/* ========================================================== VELFEN — Landing page Dark luxury · navy + gold · engineered elegance ========================================================== */ :root{ --navy: #0E1C36; --navy-deep: #07152E; --navy-abyss: #040B1C; --gold: #FFC100; --gold-soft: #FFD24D; --gold-glow: rgba(255,193,0,.55); --white: #FFFFFF; --w-80: rgba(255,255,255,.80); --w-60: rgba(255,255,255,.60); --w-40: rgba(255,255,255,.40); --w-20: rgba(255,255,255,.20); --w-10: rgba(255,255,255,.10); --w-06: rgba(255,255,255,.06); --w-03: rgba(255,255,255,.03); --f-display: "Syne", "Red Hat Display", sans-serif; --f-hero: "Poppins", "Syne", sans-serif; --f-body: "Montserrat", "Poppins", sans-serif; --f-label: "Encode Sans Semi Expanded", "Montserrat", sans-serif; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-io: cubic-bezier(.6,.2,.2,1); --page-max: 1360px; --gutter: clamp(20px, 5vw, 80px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ background:var(--navy-abyss); color:var(--white); font-family:var(--f-body); font-weight:300; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:var(--cur-hover,pointer)} /* ---------- Type helpers ---------- */ .eyebrow{ font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:inline-flex;align-items:center;gap:12px; } .eyebrow::before{ content:""; width:28px;height:1px;background:var(--gold); display:inline-block; } .display{ font-family:var(--f-hero); font-weight:200; letter-spacing:-.02em; line-height:.98; } .display em{ font-style:normal; font-family:var(--f-display); font-weight:600; background:linear-gradient(92deg, #fff 0%, var(--gold-soft) 38%, var(--gold) 62%, #fff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .section-title{ font-family:var(--f-hero); font-weight:200; font-size:clamp(36px, 5vw, 64px); line-height:1; letter-spacing:-.015em; margin:0; } .section-title b{ font-family:var(--f-display); font-weight:600; color:var(--gold); } .wrap{ max-width:var(--page-max); margin:0 auto; padding:0 var(--gutter); } /* ========================================================== GLOBAL ATMOSPHERE — gradient mesh + noise + stars ========================================================== */ .atmosphere{ position:fixed;inset:0; pointer-events:none; z-index:0; overflow:hidden; /* .mesh bleeds 10% past the edges — keep it out of page width */ } .atmosphere .mesh{ position:absolute;inset:-10% -10%; /* Atmosphere bloom — radial gradients with `transparent 70%` already feather out softly, so we DON'T need an additional `filter: blur(40px)` on top. Removing the blur eliminates a viewport-sized rasterized layer (huge cost on mobile GPUs / Safari) without changing the look. Gradient percentages were softened from 70% → 90% to keep the same diffuse edge. */ background: radial-gradient(45% 40% at 15% 20%, rgba(255,193,0,.18), transparent 90%), radial-gradient(35% 35% at 85% 10%, rgba(60,120,255,.18), transparent 90%), radial-gradient(40% 45% at 70% 80%, rgba(255,193,0,.10), transparent 90%), radial-gradient(50% 40% at 20% 90%, rgba(80,40,200,.15), transparent 90%); animation:meshDrift 24s var(--ease-io) infinite alternate; } /* The drift animation is just for a touch of life; on phones / reduced-motion it's a net waste — kill it so the compositor doesn't keep a moving layer. */ @media (max-width: 740px), (prefers-reduced-motion: reduce){ .atmosphere .mesh{animation:none} } @keyframes meshDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-3%,2%,0) scale(1.08)} } /* `.atmosphere .noise` removed — the source noise.png ships 100% transparent so all it ever did was add a network request and a `mix-blend-mode: overlay` paint pass for zero visible output. Same for `.cta::before` and `.foot::before` further down. */ .atmosphere .grid{ position:absolute;inset:0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size:88px 88px; mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); } /* Full-page content wrapper sits above atmosphere */ main,header.nav,footer{position:relative;z-index:1} /* ========================================================== NAV ========================================================== */ .nav{ position:fixed;top:0;left:0;right:0; z-index:50; padding:20px var(--gutter); display:flex;align-items:center;justify-content:space-between; transition:background .4s var(--ease-out), padding .3s var(--ease-out), border-color .4s; border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(7,21,46,.62); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); padding:14px var(--gutter); border-bottom:1px solid var(--w-10); } .nav__brand{display:flex;align-items:center;gap:12px} .nav__brand img,.nav__brand svg{width:36px;height:36px;display:block;object-fit:contain} .nav__brand .wordmark{ font-family:var(--f-display); font-weight:700; font-size:18px; letter-spacing:.04em; } .nav__brand .wordmark span{color:var(--gold)} .nav__links{ display:flex;align-items:center;gap:38px; } .nav__links a{ font-family:var(--f-label); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--w-80); position:relative; padding:4px 0; transition:color .2s var(--ease-out); } .nav__links a::after{ content:""; position:absolute;left:0;right:100%;bottom:-2px; height:1px;background:var(--gold); transition:right .3s var(--ease-out); } .nav__links a:hover{color:var(--white)} .nav__links a:hover::after{right:0} .nav__cta{ display:inline-flex;align-items:center;gap:10px; background:var(--gold);color:var(--navy); font-family:var(--f-body);font-weight:600;font-size:13px; letter-spacing:.14em;text-transform:uppercase; padding:12px 22px;border-radius:22px; position:relative;overflow:hidden; transition:transform .2s var(--ease-out), box-shadow .3s; box-shadow:0 8px 24px -8px rgba(255,193,0,.5); } .nav__cta::after{ content:""; position:absolute;inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease-out); } .nav__cta:hover{transform:translateY(-1px);box-shadow:0 12px 32px -8px rgba(255,193,0,.7)} .nav__cta:hover::after{transform:translateX(120%)} .nav__cta svg{width:14px;height:14px} @media (max-width: 860px){ .nav__links{display:none} } /* ========================================================== HERO ========================================================== */ .hero{ position:relative; min-height:100vh; padding:140px var(--gutter) 80px; display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; overflow:hidden; } .hero__bg{ position:absolute;inset:0;z-index:-1; background: radial-gradient(80% 60% at 50% 50%, rgba(14,28,54,0) 0%, rgba(4,11,28,.9) 80%), linear-gradient(180deg, #07152E 0%, #040B1C 100%); } .hero__bg::before{ /* Animated conic glow. The blur radius is the dominant cost here — a 1400 × 1400 layer + `blur(80px)` is a *massive* rasterized GPU surface (especially painful on iOS Safari). We've dropped it to 40 px (still very soft because the conic-gradient itself fades smoothly) and kill it outright on mobile. */ content:""; position:absolute;left:50%;top:45%; width:1400px;height:1400px; transform:translate(-50%,-50%); background:conic-gradient(from 120deg, rgba(255,193,0,0) 0deg, rgba(255,193,0,.08) 90deg, rgba(60,130,255,.08) 180deg, rgba(255,193,0,.08) 270deg, rgba(255,193,0,0) 360deg); filter:blur(40px); animation:spin 40s linear infinite; opacity:.9; } @media (max-width: 740px), (prefers-reduced-motion: reduce){ .hero__bg::before{filter:none;animation:none;opacity:.55} } @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}} @media (max-width: 740px){ /* Mobile blanket: strip costly backdrop-filter blurs off chrome/cards. Replace with a slightly more opaque solid so the surface still reads. */ .nav.scrolled{ backdrop-filter:none;-webkit-backdrop-filter:none; background:rgba(7,21,46,.92); } .mill__hud,.mill__callout-box,.mill__hint,.btn--ghost{ backdrop-filter:none !important;-webkit-backdrop-filter:none !important; } /* Per-frame paint costs on phones: blurred pulsing heat dot (canvas bloom already covers it) and the box-shadow pulse on the primary button. */ .mill__contact::before{filter:none;animation:none;opacity:.9} .btn--primary{animation:none} .drawer::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,11,28,.8)} .mill__ring{animation-duration:60s} .mill__ring--dashed{animation-duration:45s} } .hero__copy{position:relative;z-index:2} .hero__eyebrow{margin-bottom:32px} .hero__title{ font-size:clamp(44px, 6.2vw, 88px); margin:0 0 28px; max-width:720px; } .hero__title .line{display:block;overflow:hidden} .hero__title .line > span{ display:inline-block; transform:translateY(110%); animation:rise 1.1s var(--ease-out) forwards; } .hero__title .line:nth-child(2) > span{animation-delay:.12s} .hero__title .line:nth-child(3) > span{animation-delay:.24s} @keyframes rise{to{transform:translateY(0)}} .hero__sub{ font-size:19px; line-height:1.6; color:var(--w-60); max-width:520px; margin:0 0 44px; opacity:0; animation:fadeUp .9s var(--ease-out) .6s forwards; } @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .hero__ctas{ display:flex;gap:18px;flex-wrap:wrap; opacity:0;animation:fadeUp .9s var(--ease-out) .8s forwards; } .btn{ display:inline-flex;align-items:center;gap:12px; padding:18px 32px; border-radius:22px; font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; transition:transform .25s var(--ease-out), box-shadow .3s, background .3s, color .3s, border-color .3s; position:relative;overflow:hidden; white-space:nowrap; } .btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease-out)} .btn:hover svg{transform:translateX(4px)} .btn--primary{ background:var(--gold);color:var(--navy); box-shadow:0 12px 30px -10px rgba(255,193,0,.4), inset 0 0 0 1px rgba(255,255,255,.18); animation:pulseGlow 5s cubic-bezier(.42,0,.58,1) infinite; } @keyframes pulseGlow{ 0% {box-shadow:0 12px 30px -10px rgba(255,193,0,.40), inset 0 0 0 1px rgba(255,255,255,.18)} 25% {box-shadow:0 15px 38px -9px rgba(255,193,0,.52), inset 0 0 0 1px rgba(255,255,255,.24)} 50% {box-shadow:0 18px 50px -8px rgba(255,193,0,.66), inset 0 0 0 1px rgba(255,255,255,.30)} 75% {box-shadow:0 15px 38px -9px rgba(255,193,0,.52), inset 0 0 0 1px rgba(255,255,255,.24)} 100% {box-shadow:0 12px 30px -10px rgba(255,193,0,.40), inset 0 0 0 1px rgba(255,255,255,.18)} } .btn--primary::after{ content:""; position:absolute;inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform:translateX(-130%); animation:shimmer 3.4s var(--ease-io) infinite; } @keyframes shimmer{ 0%,60%{transform:translateX(-130%)} 80%,100%{transform:translateX(130%)} } .btn--primary:hover{transform:translateY(-2px)} .btn--ghost{ color:var(--white); border:1px solid var(--w-20); background:var(--w-03); } .btn--ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,193,0,.06)} /* --- Hero stats strip --- */ .hero__stats{ display:flex;gap:44px;margin-top:64px; opacity:0;animation:fadeUp 1s var(--ease-out) 1s forwards; } .hero__stat{ position:relative;padding-left:18px; } .hero__stat::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg, var(--gold), transparent); } .hero__stat .v{ font-family:var(--f-display); font-weight:600; font-size:26px; color:var(--white); letter-spacing:-.01em; } .hero__stat .k{ font-family:var(--f-label); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-60); margin-top:4px; } /* --- Hero 3D centerpiece --- */ .hero__stage{ position:relative; perspective:1400px; height:560px; display:flex;align-items:center;justify-content:center; opacity:0;animation:fadeUp 1s var(--ease-out) .3s forwards; } /* ========= Interactive end-mill scene ========= */ .mill{ position:relative; width:min(100%, 520px); aspect-ratio: 1 / 1.05; border-radius:28px; background: radial-gradient(80% 70% at 50% 20%, rgba(255,193,0,.10), transparent 60%), radial-gradient(100% 80% at 50% 100%, rgba(60,130,255,.14), transparent 60%), linear-gradient(180deg, rgba(14,28,54,.85) 0%, rgba(7,21,46,.95) 100%); border:1px solid var(--w-20); box-shadow: 0 60px 120px -30px rgba(0,0,0,.75), 0 40px 80px -40px rgba(255,193,0,.18), inset 0 0 0 1px rgba(255,255,255,.04); overflow:hidden; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:pan-y; } .mill.is-dragging{touch-action:none} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .mill:active{cursor:grabbing} .mill::before{ /* scanline grid */ content:""; position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:36px 36px; mask-image:radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%); pointer-events:none; } .mill__hud{ position:absolute; font-family:var(--f-label); font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--w-60); pointer-events:none; z-index:5; white-space:nowrap; } .mill__hud b{ font-family:var(--f-display); font-weight:600; color:var(--white); letter-spacing:.02em; font-size:12px; } /* HUD corners are shifted down slightly so the top-pinned Reset button has its own row at the very top edge of the panel. */ .mill__hud--tl{top:42px;left:22px} .mill__hud--tr{top:42px;right:22px;color:var(--gold);display:flex;align-items:center;gap:8px} .mill__hud--bl{bottom:20px;left:22px} .mill__hud--br{bottom:20px;right:22px} .mill__live{ width:7px;height:7px;border-radius:50%;background:var(--gold); box-shadow:0 0 8px var(--gold-glow); animation:blink 1.4s ease-in-out infinite; } /* Concentric rings behind tool */ .mill__ring{ position:absolute; width:84%;aspect-ratio:1; left:8%;top:8%; border:1px solid var(--w-10); border-radius:50%; pointer-events:none; animation:ringSpin 40s linear infinite; } .mill__ring::before{ content:"";position:absolute;top:-4px;left:50%; width:8px;height:8px;border-radius:50%; background:var(--gold);box-shadow:0 0 14px var(--gold-glow); transform:translateX(-50%); } @keyframes ringSpin{to{transform:rotate(360deg)}} .mill__ring--dashed{ width:64%;left:18%;top:18%; border:1px dashed rgba(255,193,0,.25); animation-duration:30s;animation-direction:reverse; } /* Tool assembly — anchored by its BOTTOM at a fixed distance above the mill floor. As the tool carves deeper, JS sets --ty (a translateY) so the cutter tip rides the bottom of the carved groove, exactly as it would in a real CNC plunge cut. Total visible height: 46 (collet) + 80 (shank) + 140 (flutes) = 266 px. */ .mill__tool{ position:absolute; left:50%;bottom:22%; width:90px; height:270px; transform:translate3d(calc(-50% + var(--mx,0px)), var(--ty,0px), 0); will-change:transform; z-index:3; pointer-events:none; } .mill__collet{ position:absolute;left:50%;top:0;transform:translateX(-50%); width:70px;height:46px; border-radius:6px 6px 3px 3px; background: linear-gradient(180deg, #3a434f 0%, #1b2028 50%, #2b323c 100%); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 -4px 6px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.15); } .mill__collet::after{ content:"";position:absolute;left:6px;right:6px;bottom:-4px;height:10px; background:linear-gradient(180deg,#4a5260,#1a1e26); border-radius:3px; box-shadow:inset 0 2px 3px rgba(255,255,255,.1), inset 0 -2px 4px rgba(0,0,0,.6); } .mill__shank{ position:absolute;left:50%;top:46px;transform:translateX(-50%); width:26px;height:80px; background: linear-gradient(90deg, #1a1e26 0%, #7f8793 30%, #c9cdd4 50%, #7f8793 70%, #1a1e26 100%); border-top:1px solid rgba(255,255,255,.3); } /* End-mill flutes — STATIC motion-blurred spin. A 3-flute cutter spinning at 18 000 RPM is way too fast for any per-frame CSS animation to read as motion; the old `fluteSpin` keyframe just burned GPU on jitter no eye could resolve. Instead we BAKE the spin into the look: vertical flute streaks averaged into faint 1-px bands, a bright specular highlight where light catches the cylinder, and cylinder shading on the edges. Zero per-frame cost. */ .mill__flutes{ position:absolute;left:50%;top:126px;transform:translateX(-50%); width:26px;height:140px; background: /* off-center specular highlight — light catching the rotating body */ linear-gradient(90deg, transparent 0 32%, rgba(255,255,255,.14) 42%, rgba(255,255,255,.34) 52%, rgba(255,255,255,.14) 62%, transparent 72% 100%), /* motion-blurred flute marks — fine vertical streaks */ repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 2px, rgba(255,255,255,.05) 2px 3px, transparent 3px 4px), /* cylinder shading */ linear-gradient(90deg, #06080c 0%, #1a1f27 18%, #353c46 40%, #4a525e 50%, #353c46 60%, #1a1f27 82%, #06080c 100%); border-bottom-left-radius:2px;border-bottom-right-radius:2px; overflow:hidden; } /* Static highlight band — adds a soft horizontal sheen so the cutter doesn't read flat. Used to be `mill__shank::after` flickering on a 120 ms step animation; even though that was opacity-only, it was invisible at that speed. Now it's a fixed gradient — zero per-frame cost. */ .mill__shank::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.25) 100%); pointer-events:none; } /* Old per-flute layers — no longer needed; the spinning illusion lives on `.mill__flutes` itself. Hidden in case the HTML still has them. */ .flute{display:none} .mill__core{ position:absolute;left:50%;top:0;bottom:0;width:4px; transform:translateX(-50%); background:linear-gradient(180deg, #dfe3ea 0%, #9ea4ad 40%, #dfe3ea 100%); box-shadow:0 0 4px rgba(255,255,255,.35); } .mill__tip{ position:absolute;left:50%;bottom:-1px;transform:translateX(-50%); width:0;height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:10px solid #2a2f38; } /* Heat bloom at the cutting edge — sits at the tool tip, drawn over the workpiece. */ .mill__contact{ position:absolute;left:50%;bottom:-8px;transform:translateX(-50%); width:64px;height:28px; pointer-events:none; z-index:4; } .mill__contact::before{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:24px;height:24px;border-radius:50%; background:radial-gradient(circle, #fff8c7 0%, rgba(255,193,0,.85) 40%, rgba(255,140,40,.4) 65%, transparent 80%); filter:blur(3px); animation:heatPulse .28s ease-in-out infinite alternate; } @keyframes heatPulse{ 0%{opacity:.75;transform:translate(-50%,-50%) scale(.85)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1.25)} } /* Particle layer covers the entire mill scene; sparks/chips are drawn in mill-local coordinates so they emit from the live tip position. */ #sparks{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none; z-index:6; } /* Workpiece (metal block being milled) — sized so the cutter can plunge up to 90 % of the flute length without bottoming through the part. */ .mill__piece{ position:absolute;left:8%;right:8%;bottom:8%; height:32%; border-radius:6px; overflow:hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); z-index:2; } .mill__piece-top{ position:absolute;top:0;left:0;right:0;height:18px; background: linear-gradient(180deg, #3a4250 0%, #2a303a 100%); border-bottom:1px solid rgba(255,255,255,.08); } .mill__piece-front{ position:absolute;top:18px;left:0;right:0;bottom:0; background: linear-gradient(180deg, #1a1f27 0%, #0d1017 100%), repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.03) 22px 23px); background-blend-mode:overlay; } .mill__piece-front::before{ /* brushed texture */ content:"";position:absolute;inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; } .mill__piece-front::after{ /* top edge highlight */ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); } /* Carved groove — drawn by JS as an SVG path on the workpiece top surface */ .mill__groove{ position:absolute;left:0;top:12px;right:0;height:160px; pointer-events:none; overflow:visible; } .mill__groove svg{display:block;width:100%;height:100%;overflow:visible} .mill__chips{ position:absolute;left:0;top:0;right:0;bottom:0; pointer-events:none; } /* Callout sits centered at the top of the mill panel, well above the collet so the cutter never overlaps the text. */ .mill__callout{ position:absolute; left:50%;top:76px; transform:translateX(-50%); z-index:4; pointer-events:none; } .mill__callout-box{ padding:8px 14px; border:1px solid var(--w-20); border-radius:10px; background:rgba(7,21,46,.7); backdrop-filter:blur(6px); white-space:nowrap; text-align:center; } .mill__callout-label{ font-family:var(--f-display);font-weight:600;font-size:12px;color:var(--white); letter-spacing:-.005em; } .mill__callout-sub{ font-family:var(--f-label);font-size:9px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-60);margin-top:3px; } .mill__hint{ position:absolute;left:50%;bottom:64px;transform:translateX(-50%); font-family:var(--f-label);font-size:9px;letter-spacing:.28em;text-transform:uppercase; color:var(--w-40); padding:6px 12px;border:1px solid var(--w-10);border-radius:999px; background:rgba(7,21,46,.5);backdrop-filter:blur(4px); pointer-events:none; animation:hintFade 3.6s ease-out 4s forwards; } @keyframes hintFade{to{opacity:0;transform:translate(-50%, 10px)}} /* Reset button — appears once the cut bottoms out so the user can start a fresh part instead of the animation auto-rewinding. Pinned to the TOP of the panel so it never crosses the cutter's sweep path. */ .mill__reset{ position:absolute; left:50%; top:16px; transform:translateX(-50%) translateY(-6px); z-index:10; display:inline-flex;align-items:center;gap:8px; background:var(--gold);color:var(--navy); font-family:var(--f-label); font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700; padding:10px 18px;border:0;border-radius:999px; cursor:var(--cur-hover,pointer); box-shadow:0 10px 26px -8px rgba(255,193,0,.55), inset 0 0 0 1px rgba(255,255,255,.25); opacity:0;pointer-events:none; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .25s; } .mill__reset.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } .mill__reset:hover{ box-shadow:0 14px 36px -8px rgba(255,193,0,.75), inset 0 0 0 1px rgba(255,255,255,.35); } .mill__reset svg{width:12px;height:12px} /* particles canvas */ #particles{ position:absolute;inset:0; pointer-events:none; z-index:0; } @media (max-width: 980px){ .hero{grid-template-columns:1fr;gap:40px;padding-top:120px} .hero__stage{height:520px} .hero__stats{gap:28px;flex-wrap:wrap} .mill__callout{display:none} } /* ========================================================== SECTION: CAPABILITIES (features) ========================================================== */ .section{ padding:clamp(80px, 10vw, 140px) var(--gutter); position:relative; } .section__head{ display:flex;align-items:flex-end;justify-content:space-between; gap:40px;margin-bottom:64px;flex-wrap:wrap; } .section__head .lead{max-width:720px} .section__head .lead p{ color:var(--w-60);max-width:560px;margin:20px 0 0;font-size:17px; } .section__head .aside{ max-width:300px;text-align:right; color:var(--w-40);font-size:14px;line-height:1.6; } .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } @media (max-width: 960px){ .cards{grid-template-columns:1fr} .cards > article[style*="span 2"]{grid-column:auto !important;flex-direction:column !important;align-items:stretch !important} /* backdrop-filter is one of the heaviest CSS effects on mobile — each blurred card forces the compositor to re-sample everything below it every scroll frame. Card backgrounds already have visible tint, so dropping the blur on phones costs essentially nothing visually. */ .card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} } .card{ position:relative; padding:38px 34px 34px; border-radius:22px; background:linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 60%); border:1px solid var(--w-10); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow:hidden; transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s; min-height:320px; display:flex;flex-direction:column; } .card::before{ /* gold edge glow that appears on hover */ content:"";position:absolute;inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(140deg, rgba(255,193,0,.6), rgba(255,193,0,0) 40%, rgba(255,193,0,0) 60%, rgba(255,193,0,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0; transition:opacity .4s var(--ease-out); pointer-events:none; } .card::after{ /* subtle radial spotlight that follows cursor */ content:"";position:absolute;inset:0; background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%), rgba(255,193,0,.18), transparent 60%); opacity:0;transition:opacity .3s; pointer-events:none; } .card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,193,0,.15); } .card:hover::before{opacity:1} .card:hover::after{opacity:1} .card__num{ position:absolute;top:22px;right:28px; font-family:var(--f-label); font-size:11px;letter-spacing:.22em; color:var(--w-40); } .card__icon{ width:56px;height:56px;border-radius:16px; background:linear-gradient(145deg, rgba(255,193,0,.18), rgba(255,193,0,.04)); border:1px solid rgba(255,193,0,.3); display:flex;align-items:center;justify-content:center; color:var(--gold); margin-bottom:28px; position:relative; } .card__icon::after{ content:"";position:absolute;inset:-8px; border-radius:22px;border:1px dashed var(--w-10); opacity:.6; } .card__icon svg{width:28px;height:28px} .card__title{ font-family:var(--f-display); font-weight:600; font-size:24px; letter-spacing:-.005em; margin:0 0 10px; } .card__desc{ color:var(--w-60); font-size:15px;line-height:1.65; margin:0 0 auto; } .card__foot{ display:flex;align-items:center;justify-content:space-between; margin-top:28px;padding-top:20px; border-top:1px solid var(--w-10); } .card__foot .spec{ font-family:var(--f-label); font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-60); } .card__foot .arrow{ width:36px;height:36px;border-radius:50%; border:1px solid var(--w-20); display:flex;align-items:center;justify-content:center; transition:background .3s, border-color .3s, color .3s, transform .3s; color:var(--white); } .card:hover .card__foot .arrow{ background:var(--gold);color:var(--navy);border-color:var(--gold); transform:rotate(-45deg); } /* Spec-card arrow ships with inline `color:var(--gold)` / `border-color:var(--gold)` so the gold sits on a dark card at rest. Inline styles beat plain :hover rules, so on hover the arrow was going gold-on-gold (invisible). Force the hover color over the inline with `!important` only on this exact state. */ .card:hover .card__foot .arrow[style*="--gold"]{ color:var(--navy) !important; border-color:var(--gold) !important; } .card__foot .arrow svg{width:14px;height:14px} /* ========================================================== SECTION: STATS band ========================================================== */ .stats{ padding:clamp(80px, 10vw, 140px) var(--gutter); position:relative; border-top:1px solid var(--w-10); border-bottom:1px solid var(--w-10); background: radial-gradient(60% 80% at 50% 0%, rgba(255,193,0,.08), transparent 70%), linear-gradient(180deg, var(--navy-deep), var(--navy-abyss)); } .stats__grid{ display:grid;grid-template-columns:repeat(4, 1fr); gap:20px; max-width:var(--page-max);margin:48px auto 0; } @media (max-width:900px){.stats__grid{grid-template-columns:repeat(2,1fr)}} .stat{ position:relative;padding:40px 28px; border-left:1px solid var(--w-10); } .stat:first-child{border-left:0} @media (max-width:900px){ .stat{border-left:0;border-top:1px solid var(--w-10)} .stat:first-child, .stat:nth-child(2){border-top:0} } .stat__val{ font-family:var(--f-display); font-weight:600; font-size:clamp(54px, 6vw, 88px); line-height:1; letter-spacing:-.02em; background:linear-gradient(180deg, #fff 10%, rgba(255,193,0,.9) 90%); -webkit-background-clip:text;background-clip:text;color:transparent; display:inline-block; /* Fixed-width digits so the count-up never changes the number's width (JS also reserves the final width up front). */ font-variant-numeric:tabular-nums; } /* Number + suffix row: never wrap mid-count, or the whole stats section grows a line and shoves the page around (very visible on a reload that restores the scroll position below this section). */ .stat > div:first-child{white-space:nowrap} .stat__suffix{ font-family:var(--f-display); font-weight:500;font-size:36px;color:var(--gold); margin-left:.2em; /* "6 yrs", "6 aastat", "99,2 %" — a real gap, not glued */ } .stat__label{ font-family:var(--f-label); font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-60); margin-top:14px; } .stat__note{ color:var(--w-40); font-size:13px;margin-top:8px;line-height:1.4; } /* ========================================================== SECTION: PROCESS / showcase with big image ========================================================== */ .showcase{ display:grid;grid-template-columns: 1fr 1fr; gap:60px;align-items:center; } @media (max-width: 960px){.showcase{grid-template-columns:1fr}} .showcase__img{ position:relative; aspect-ratio: 4 / 5; border-radius:24px;overflow:hidden; border:1px solid var(--w-10); background:#000; } .showcase__img img{ width:100%;height:100%;object-fit:cover; transition:transform 8s var(--ease-io); } .showcase:hover .showcase__img img{transform:scale(1.05)} .showcase__img::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, transparent 40%, rgba(4,11,28,.9) 100%); } .showcase__tag{ position:absolute;left:24px;bottom:24px;right:24px; display:flex;align-items:end;justify-content:space-between;gap:16px; z-index:2;color:var(--white); } .showcase__tag h4{ font-family:var(--f-display);font-weight:600;font-size:22px;margin:0 0 6px; } .showcase__tag p{margin:0;font-size:13px;color:var(--w-60);letter-spacing:.04em} .steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:20px} .step{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:24px 24px 24px 0; border-top:1px solid var(--w-10); align-items:start; transition:background .3s; } .step:last-child{border-bottom:1px solid var(--w-10)} .step__num{ font-family:var(--f-display);font-weight:600; font-size:34px; color:var(--gold); line-height:1; padding-top:4px; } .step h5{ font-family:var(--f-display);font-weight:600; font-size:20px;margin:0 0 6px;letter-spacing:-.005em; } .step p{margin:0;color:var(--w-60);font-size:15px;line-height:1.6} /* ========================================================== CTA banner ========================================================== */ .cta{ margin:60px var(--gutter); padding:clamp(60px, 9vw, 110px) clamp(32px, 8vw, 90px); position:relative; overflow:hidden; border-radius:30px; border:1px solid rgba(255,193,0,.35); background: radial-gradient(140% 200% at 100% 0%, rgba(255,193,0,.40), transparent 50%), radial-gradient(100% 180% at 0% 100%, rgba(60,130,255,.28), transparent 55%), linear-gradient(140deg, #0E1C36 0%, #07152E 60%, #040B1C 100%); box-shadow:0 50px 100px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); } .cta::before{ content:none; } /* ---------- CTA backdrop — "CAD viewport" composition ---------- Replaces the old half-cropped logo mark with an integrated scene: slow-rotating conic glow + fine technical grid + a circular crosshair frame on the right (with the brand mark at its centre) + floating engineering callouts that flicker in/out + a sweeping scan line. Everything is non-interactive decoration sitting in z-index 1 below the copy. */ .cta__bg{ position:absolute;inset:0; pointer-events:none; overflow:hidden; border-radius:30px; z-index:1; } .cta__glow{ position:absolute; right:-220px;top:50%; width:900px;height:900px; transform:translateY(-50%); background:conic-gradient(from 90deg, transparent 0deg, rgba(255,193,0,.18) 60deg, transparent 180deg, rgba(255,193,0,.10) 280deg, transparent 360deg); filter:blur(40px); animation:ctaSpin 36s linear infinite; animation-play-state:paused; } .cta.in .cta__glow{animation-play-state:running} @keyframes ctaSpin{to{transform:translateY(-50%) rotate(360deg)}} .cta__tech{ position:absolute;inset:0; background-image: linear-gradient(to right, rgba(255,193,0,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,193,0,.05) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse at 80% 50%, #000 25%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse at 80% 50%, #000 25%, transparent 80%); } /* Right-anchored crosshair viewport with the logo at its centre */ .cta__view{ position:absolute; right:-80px;top:50%; width:560px;height:560px; transform:translateY(-50%); color:rgba(255,193,0,.45); } .cta__view svg{ position:absolute;inset:0;width:100%;height:100%; animation:ctaRotateSlow 80s linear infinite; } @keyframes ctaRotateSlow{to{transform:rotate(360deg)}} @keyframes floatY{from{transform:translate(-50%,-50%) translateY(0)}to{transform:translate(-50%,-50%) translateY(-14px)}} .cta__view-mark{ position:absolute;left:50%;top:50%; width:240px;height:240px; transform:translate(-50%,-50%); opacity:.85; filter:drop-shadow(0 8px 30px rgba(255,193,0,.45)); animation:floatY 8s var(--ease-io) infinite alternate; } .cta__view-mark img{width:100%;height:100%;object-fit:contain} .cta__view-tag{ position:absolute; top:8px;left:50%;transform:translateX(-50%); font-family:var(--f-label);font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--gold); background:rgba(7,21,46,.85); padding:5px 12px;border-radius:999px; border:1px solid rgba(255,193,0,.35); white-space:nowrap; } /* Floating engineering callouts — flicker subtly so the panel feels live */ .cta__cal{ position:absolute; font-family:var(--f-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,193,0,.7); border:1px solid rgba(255,193,0,.22); padding:5px 10px;border-radius:4px; background:rgba(7,21,46,.55); white-space:nowrap; animation:ctaFlicker 7s ease-in-out infinite; } .cta__cal::before{ content:"";display:inline-block; width:5px;height:5px;border-radius:50%; background:var(--gold); box-shadow:0 0 6px var(--gold-glow); margin-right:8px;vertical-align:middle; } .cta__cal--1{top:14%;right:42%;animation-delay:0s} .cta__cal--2{top:34%;right:8%;animation-delay:2.1s} .cta__cal--3{top:64%;right:52%;animation-delay:4.4s} .cta__cal--4{top:82%;right:14%;animation-delay:1.2s} @keyframes ctaFlicker{ 0%,100%{opacity:.35} 50%{opacity:1} } /* Vertical scan line sweeping the right pane — like a CMM probe pass. The element spans the full CTA height and draws its 2px line at the top, so the sweep is a pure translateY (percent = CTA height). Animating `top` forced a layout + repaint every frame; a transform stays on the compositor. */ .cta__scan{ position:absolute; left:50%;right:0;top:0;height:100%; background:linear-gradient(90deg, transparent, rgba(255,193,0,.6), transparent) top / 100% 2px no-repeat; filter:blur(1px); pointer-events:none; will-change:transform, opacity; animation:ctaScan 5s linear infinite; } @keyframes ctaScan{ 0% {transform:translateY(-4%);opacity:0} 8% {opacity:1} 92% {opacity:1} 100%{transform:translateY(104%);opacity:0} } /* Mobile: drop the heavy effects (blur, rotation, scan) and shrink the viewport so the right pane doesn't dominate. */ @media (max-width: 740px){ .cta__glow{display:none} .cta__view{ right:-150px;width:380px;height:380px; opacity:.5; } .cta__view svg,.cta__view-mark{animation:none} .cta__scan{display:none} .cta__cal--1,.cta__cal--3{display:none} } @media (prefers-reduced-motion: reduce){ .cta__glow,.cta__view svg,.cta__view-mark,.cta__cal,.cta__scan{animation:none} } .cta__mark{ display:none } /* legacy floating logo — superseded by .cta__view */ .cta__inner{ position:relative;z-index:2; max-width:780px; } .cta h2{ font-family:var(--f-hero); font-weight:200; font-size:clamp(40px, 5.5vw, 72px); line-height:1; margin:20px 0 24px; letter-spacing:-.02em; } .cta h2 b{ font-family:var(--f-display); font-weight:600; color:var(--gold); } .cta p{color:var(--w-80);font-size:18px;max-width:540px;margin:0 0 40px} .cta__ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .cta__contact{ font-family:var(--f-label); font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-60); display:flex;flex-direction:column;gap:4px; } .cta__contact b{color:var(--white);font-family:var(--f-display);font-weight:500;letter-spacing:.06em;font-size:15px} /* ========================================================== FOOTER ========================================================== */ .foot{ background:var(--navy-deep); padding:80px var(--gutter) 40px; border-top:1px solid var(--w-10); position:relative; } .foot::before{ /* noise overlay removed — see comment near .atmosphere */ content:none; } .foot__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:60px; max-width:var(--page-max);margin:0 auto; } @media (max-width: 860px){.foot__grid{grid-template-columns:1fr 1fr;gap:40px}} .foot__brand p{ color:var(--w-60);margin:18px 0 28px;max-width:340px;font-size:14px;line-height:1.65; } .foot__brand .addr{ font-family:var(--f-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-40);line-height:1.9; } .foot h6{ font-family:var(--f-label); font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);font-weight:500; margin:0 0 22px; } .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:12px} .foot ul a{ color:var(--w-80);font-size:14px; transition:color .2s, padding-left .3s; position:relative;display:inline-block; } .foot ul a:hover{color:var(--gold);padding-left:10px} .foot ul a::before{ content:"→";position:absolute;left:-10px;top:0; opacity:0;transition:opacity .3s;color:var(--gold); } .foot ul a:hover::before{opacity:1} .foot__socials{display:flex;gap:10px;margin-top:24px} .foot__socials a{ width:40px;height:40px;border-radius:50%; border:1px solid var(--w-20); display:flex;align-items:center;justify-content:center; color:var(--white); transition:background .3s, border-color .3s, color .3s, transform .3s; } .foot__socials a:hover{ background:var(--gold);color:var(--navy);border-color:var(--gold); transform:translateY(-2px); } .foot__socials svg{width:16px;height:16px} .foot__bottom{ max-width:var(--page-max);margin:60px auto 0; padding-top:24px;border-top:1px solid var(--w-10); display:flex;justify-content:space-between;align-items:center;gap:20px; font-family:var(--f-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-40);flex-wrap:wrap; } .foot__bottom .marks{display:flex;gap:20px;flex-wrap:wrap} /* ========================================================== REVEAL ANIMATIONS ========================================================== */ .reveal{ opacity:0;transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--rd, 0ms); } .reveal.in{opacity:1;transform:none} /* ========================================================== MOBILE-OPTIMIZED OVERRIDES (≤ 760 px) Applied on top of the desktop styles so the page is genuinely built for the phone — single column, larger tap targets, the mill demo fits without horizontal scroll, and the CTA backdrop stays decorative without dominating the copy. ========================================================== */ @media (max-width: 760px){ :root{ --gutter: 20px; } body{font-size:15px;line-height:1.55} /* --- Hide desktop nav, show hamburger --- */ .nav{padding:12px var(--gutter);gap:10px} .nav__cta{display:none} .nav__brand img,.nav__brand svg{width:28px;height:28px} .nav__brand .wordmark{font-size:14px} .nav__burger{ display:flex !important; width:40px;height:40px; } .nav.scrolled{padding:10px var(--gutter)} /* --- Atmosphere: cheaper on mobile --- */ .atmosphere .grid{background-size:56px 56px} .atmosphere .mesh{opacity:.85} /* ============ HERO ============ */ /* Reordered on mobile: copy first, MILL SCENE before the stats strip so the demo is visible without scrolling past a long stack of text. `display:contents` hoists .hero__copy's children up as direct grid items; we use `order` to slot the mill stage between the CTA block and the stats strip (which lives inside .hero__copy in the source). */ .hero{ grid-template-columns:1fr; gap:20px; padding:60px var(--gutter) 36px; min-height:auto; } .hero__copy{display:contents} .hero__eyebrow{order:1;margin-bottom:0;font-size:11px;letter-spacing:.24em} .hero__eyebrow::before{width:20px} .hero__title{ order:2; font-size:clamp(34px, 10.5vw, 52px) !important; margin:0; line-height:1; } .hero__sub{ order:3; font-size:14.5px;line-height:1.55; margin:0; max-width:none; } .hero__ctas{ order:4; gap:10px;flex-direction:column;align-items:stretch; margin:4px 0 0; } .hero__ctas .btn{ justify-content:center; padding:15px 22px; font-size:12px; letter-spacing:.18em; } .hero__stage{order:5;margin-top:8px} /* On mobile we flip the stats from "vertical gold accent on the left" to "horizontal gold accent on top" — each stat gets its own row of room so the value never crowds the next column's border. */ .hero__stats{ order:6; margin-top:4px; gap:14px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); padding-top:24px; border-top:1px solid var(--w-10); } .hero__stat{ padding:10px 0 0 0; min-width:0; position:relative; } .hero__stat::before{ /* horizontal gold tick instead of vertical bar */ left:0;top:0; width:22px;height:2px; background:linear-gradient(90deg, var(--gold), transparent); } /* Keep tolerance value on one line — "±0.001 mm" was wrapping on narrow phones and reading as broken layout. Shrink the font instead of breaking. */ .hero__stat .v{ font-size:15px; white-space:nowrap; letter-spacing:-.01em; line-height:1.1; } .hero__stat .k{font-size:9px;letter-spacing:.16em;margin-top:6px;line-height:1.4} /* --- Mill scene: shrink to fit phone, drop heaviest effects --- */ .hero__stage{ height:auto; perspective:none; margin:0; } .mill{ width:100%; max-width:none; aspect-ratio:1 / 1.08; border-radius:20px; } /* HUD: drop the two top corners on mobile so they never crowd the LIVE indicator / Next-part button. Keep the bottom two (FEED + RPM) since they react to the cutter and are part of the demo's life. */ .mill__hud--tl{display:none} .mill__hud--tr{ top:auto;bottom:14px;right:16px; font-size:9px;letter-spacing:.16em;gap:6px; } .mill__hud--bl{ top:auto;bottom:14px;left:16px; font-size:9px;letter-spacing:.16em; } /* Move FEED/RPM into a single bottom row by hiding RPM (LIVE replaces TR); keeps the bottom strip clean on narrow screens. */ .mill__hud--br{display:none} .mill__hud b{font-size:10.5px} .mill__live{width:6px;height:6px} /* Callout pinned to top — Reset button is also pinned to top, so we move the callout DOWN slightly and shrink it so neither overlap. */ .mill__callout{top:54px} .mill__callout-box{padding:5px 10px} .mill__callout-label{font-size:10.5px} .mill__callout-sub{font-size:7.5px;letter-spacing:.18em;margin-top:2px} .mill__hint{ bottom:46px; font-size:8px;letter-spacing:.20em; padding:5px 10px; } /* Compact Reset pill so it doesn't crowd the callout below it */ .mill__reset{ top:14px; padding:7px 14px; font-size:9px;letter-spacing:.18em; gap:6px; } .mill__reset svg{width:10px;height:10px} /* Tool stays at design size — looks correct because workpiece % is fixed. But on very small screens, scale it down proportionally to the panel. */ .mill__tool{ width:72px; height:216px; } .mill__collet{width:56px;height:36px} .mill__shank{width:22px;height:64px;top:36px} .mill__flutes{width:22px;height:116px;top:100px} .mill__tip{border-left-width:11px;border-right-width:11px;border-top-width:8px} .mill__contact{width:52px;height:24px;bottom:-6px} /* ============ SECTION HEADS ============ */ .section{padding:68px var(--gutter)} .section__head{ flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:36px; } .section__head .lead{max-width:none;width:100%} .section__head .lead p{font-size:14.5px;margin-top:14px;line-height:1.6} .section__head .aside{ text-align:left; max-width:none; font-size:13px; padding-top:16px; border-top:1px solid var(--w-10); width:100%; } .section-title{ font-size:clamp(34px, 9.5vw, 46px) !important; line-height:1.02; } /* ============ CAPABILITY CARDS ============ */ .cards{gap:14px} .card{ padding:28px 22px 22px; min-height:0; border-radius:18px; } .card__num{top:18px;right:20px;font-size:10px} .card__icon{width:48px;height:48px;border-radius:13px;margin-bottom:20px} .card__icon svg{width:24px;height:24px} .card__icon::after{inset:-6px;border-radius:18px} .card__title{font-size:21px} .card__desc{font-size:14px;line-height:1.6} .card__foot{margin-top:22px;padding-top:16px;gap:12px} .card__foot .spec{font-size:9.5px;letter-spacing:.18em} .card__foot .arrow{width:32px;height:32px} /* The "wide" Quality feature card collapses to a single column */ .cards > article[style*="span 2"]{ grid-column:auto !important; flex-direction:column !important; align-items:stretch !important; gap:24px !important; min-height:0 !important; } .cards > article[style*="span 2"] .card__title{font-size:24px !important} .cards > article[style*="span 2"] > div:last-child{ grid-template-columns:repeat(2, 1fr) !important; min-width:0 !important; gap:10px !important; } .cards > article[style*="span 2"] > div:last-child > div{ padding:12px 14px !important; } .cards > article[style*="span 2"] > div:last-child > div > div:first-child{ font-size:18px !important; } /* ============ PROCESS / SHOWCASE ============ */ .showcase{gap:24px} /* On phones the DMU 50 photo gets a TIGHTER aspect and we hoist its "DMU 50 · 5-axis simultaneous" label OUT of the image entirely — the gradient overlay on a vertical phone-sized frame was sitting straight across the machine and reading as a smudge. Label now sits in its own row right below the image. */ /* Card = photo on top + caption strip below, one rounded unit. */ .showcase__img{ aspect-ratio:auto; border-radius:18px; overflow:hidden; background:linear-gradient(180deg, #0E1C36 0%, #07152E 100%); } .showcase__img img{ height:auto; aspect-ratio:4 / 3; padding:6% !important; } .showcase__img::after{display:none} /* kill the dark gradient */ .showcase__tag{ position:static; padding:16px 20px 18px; border-top:1px solid var(--w-10); display:block; text-align:center; color:var(--white); } .showcase__tag h4{ font-family:var(--f-display); font-weight:600; font-size:16px; margin:0 0 8px; letter-spacing:-.005em; } .showcase__tag p{ font-family:var(--f-label); font-size:10px; line-height:1.7; letter-spacing:.16em; text-transform:uppercase; color:var(--w-60); margin:0; } /* Specs on their own line instead of an orphaned "300 KG" */ .showcase__tag p .sep{display:none} .showcase__tag p span{display:block} .showcase__tag p .spec{color:var(--gold);opacity:.85} .steps{margin-top:8px;gap:0} .step{ grid-template-columns:42px 1fr; gap:14px; padding:18px 0; } .step__num{font-size:24px;padding-top:2px} .step h5{font-size:16.5px;margin:0 0 4px} .step p{font-size:13.5px;line-height:1.55} /* ============ STATS ============ */ .stats{padding:72px var(--gutter)} .stats__grid{ grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:32px; } .stat{ padding:24px 16px; border-left:0 !important; border-top:1px solid var(--w-10) !important; } .stat:first-child,.stat:nth-child(2){border-top:0 !important} .stat__val{font-size:42px !important} .stat__suffix{font-size:22px} .stat__label{font-size:10.5px;letter-spacing:.18em;margin-top:10px} .stat__note{font-size:11.5px;margin-top:6px} /* ============ CTA banner ============ */ .cta{ margin:36px var(--gutter); padding:48px 24px 44px; border-radius:22px; } /* On phones, the floating "RA 0.4 µm / N100 / 5-axis · live" callouts and the right-side crosshair viewport sit ON TOP of the headline — way too cluttered on a 360-px screen. Strip ALL of those decorative bits and leave only the gradient background; the copy gets full room. */ .cta__bg .cta__view, .cta__bg .cta__cal, .cta__bg .cta__scan, .cta__bg .cta__glow{display:none !important} /* Restore a subtle gold-mark in the bottom-right corner so the panel still feels engineered, without intruding on the text. */ .cta::after{ content:""; position:absolute; right:-30px;bottom:-30px; width:160px;height:160px; background:url('../assets/logo-mark-gold.svg') no-repeat center / contain; opacity:.10; pointer-events:none; z-index:1; } .cta h2{ font-size:clamp(30px, 9vw, 42px); margin:16px 0 16px; line-height:1.02; } .cta p{font-size:14.5px;margin:0 0 26px;max-width:none} .cta__ctas{flex-direction:column;align-items:stretch;gap:18px} .cta__ctas .btn{justify-content:center;width:100%;padding:15px 22px;font-size:12px} .cta__contact{font-size:11px;letter-spacing:.18em;text-align:left} .cta__contact b{font-size:13px;letter-spacing:.04em;line-height:1.45} /* ============ FOOTER ============ */ .foot{padding:60px var(--gutter) 32px} .foot__grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } /* Brand block: centered column, set off from the link columns below */ .foot__brand{ grid-column:span 2; display:flex;flex-direction:column;align-items:center; text-align:center; padding-bottom:32px; border-bottom:1px solid var(--w-10); } .foot__brand p{font-size:13px;margin:16px auto 20px;max-width:34ch;text-wrap:balance} .foot__brand .addr{font-size:10px;letter-spacing:.18em;line-height:1.8} .foot__socials{margin-top:20px;gap:10px;justify-content:center} .foot__socials a{width:38px;height:38px} .foot h6{font-size:10.5px;letter-spacing:.20em;margin:0 0 16px} .foot ul{gap:10px} .foot ul a{font-size:13px} /* Link menus: centered to match the brand block and bottom bar. Capabilities + Company sit side by side; Contact spans both columns as a 2×2 grid that lines up with them. */ .foot__grid > div:not(.foot__brand){text-align:center} .foot__grid > div:last-child{ grid-column:span 2; padding-top:28px; border-top:1px solid var(--w-10); } .foot__grid > div:last-child ul{grid-template-columns:1fr 1fr;column-gap:24px} /* No hover-arrow nudge on touch layouts — it shifts centered text */ .foot ul a:hover{padding-left:0} .foot ul a::before{display:none} /* Bottom bar: centered, stacked, with gold dot separators */ .foot__bottom{ margin-top:44px; padding-top:28px; flex-direction:column; align-items:center; text-align:center; gap:18px; font-size:10px;letter-spacing:.18em;line-height:1.9; } .foot__legal{ display:flex;flex-wrap:wrap;justify-content:center; column-gap:10px; } .foot__legal .sep{display:none} .foot__legal > span:not(.sep):not(.foot__copy) + .sep + span::before, .foot__bottom .marks span + span::before{ content:""; display:inline-block; width:3px;height:3px;border-radius:50%; background:var(--gold);opacity:.7; vertical-align:middle; margin:0 10px 0 0; transform:translateY(-1px); } .foot__copy{ flex-basis:100%; color:var(--w-60); letter-spacing:.22em; } .foot__bottom .marks{ justify-content:center; gap:10px; } .foot__bottom .marks a{padding:4px 0} } /* Extra-narrow phones (≤ 380 px) */ @media (max-width: 380px){ .hero__title{font-size:34px !important} .hero__stats{grid-template-columns:repeat(3, 1fr)} .hero__stat .v{font-size:14px} .hero__stat .k{font-size:8.5px} .mill__hud--tl{display:none} /* free up corner space */ .mill__hud--br{display:none} .mill__callout-label{font-size:10px} } /* ========================================================== TABLET (761 – 1024 px) ========================================================== */ @media (min-width: 761px) and (max-width: 1024px){ :root{--gutter: 32px} /* Nav: keep desktop links visible on tablet — original base CSS hides them at ≤860 px, but at 768-ish there's plenty of room for them. */ .nav__links{display:flex !important;gap:24px} .nav__links a{font-size:11px} /* Hero: stack vertically — at this width the side-by-side hero feels cramped, the mill scene scrunched and the copy crowded. Better to stack and let each get the full width. */ .hero{ grid-template-columns:1fr; gap:48px; padding:120px var(--gutter) 80px; min-height:auto; align-items:start; } .hero__title{font-size:clamp(54px, 8vw, 76px) !important; max-width:none} .hero__sub{max-width:560px;font-size:17px} .hero__stage{ height:auto; width:100%; max-width:520px; justify-self:center; } .hero__stats{gap:32px} /* Capability cards: 2-up on tablet (vs 3-up desktop) */ .cards{grid-template-columns:repeat(2, 1fr)} .cards > article[style*="span 2"]{ grid-column:span 2 !important; } /* Stats band: 2×2 */ .stats__grid{grid-template-columns:repeat(2, 1fr)} .stat{border-left:0;border-top:1px solid var(--w-10)} .stat:first-child,.stat:nth-child(2){border-top:0} .stat:nth-child(3),.stat:nth-child(4){border-left:0} .stat:nth-child(2){border-left:1px solid var(--w-10)} .stat:nth-child(4){border-left:1px solid var(--w-10)} /* Showcase: stacked */ .showcase{grid-template-columns:1fr;gap:48px} .showcase__img{aspect-ratio:16 / 10;max-height:520px} /* CTA banner: keep the decorative crosshair but push it further off the right edge so it doesn't crowd the copy. */ .cta__view{ right:-180px !important; width:480px !important;height:480px !important; opacity:.55 !important; } .cta__cal--1{display:none} .cta__cal--3{display:none} /* Footer: 2-up */ .foot__grid{grid-template-columns:1fr 1fr;gap:48px} .foot__brand{grid-column:span 2} } /* ========================================================== HAMBURGER + MOBILE DRAWER ========================================================== */ .nav__burger{ display:none; width:44px;height:44px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--w-10); align-items:center;justify-content:center; flex-direction:column;gap:5px; cursor:var(--cur-hover,pointer); transition:background .25s var(--ease-out), border-color .25s; } .nav__burger:hover{background:rgba(255,193,0,.10);border-color:rgba(255,193,0,.35)} .nav__burger span{ display:block;width:18px;height:1.5px;background:var(--white); transition:transform .3s var(--ease-out), opacity .3s, background .3s; transform-origin:center; } .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:var(--gold)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:var(--gold)} .drawer{ position:fixed;inset:0; z-index:60; pointer-events:none; visibility:hidden; /* Clip the off-screen (translated) panel. Without this its box counts as page width, and mobile browsers zoom out / shift the page on load. */ overflow:hidden; } .drawer.open{pointer-events:auto;visibility:visible} .drawer::before{ content:""; position:absolute;inset:0; background:rgba(4,11,28,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease-out); } .drawer.open::before{opacity:1} .drawer__panel{ position:absolute;top:0;right:0;bottom:0; width:min(86vw, 380px); background:linear-gradient(180deg, #0E1C36 0%, #07152E 60%, #040B1C 100%); border-left:1px solid var(--w-10); box-shadow:-30px 0 60px -20px rgba(0,0,0,.6); padding:22px 26px 28px; display:flex;flex-direction:column; transform:translateX(100%); transition:transform .42s var(--ease-out); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .drawer.open .drawer__panel{transform:translateX(0)} .drawer__head{ display:flex;align-items:center;justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--w-10); margin-bottom:8px; } .drawer__head .nav__brand img{width:30px;height:30px} .drawer__head .nav__brand .wordmark{font-size:15px} .drawer__close{ width:42px;height:42px; border-radius:12px; border:1px solid var(--w-10); background:rgba(255,255,255,.03); color:var(--white); display:flex;align-items:center;justify-content:center; transition:background .25s, border-color .25s, color .25s; } .drawer__close:hover{background:rgba(255,193,0,.10);border-color:var(--gold);color:var(--gold)} .drawer__close svg{width:18px;height:18px} .drawer__links{ display:flex;flex-direction:column; margin-top:8px; flex:1; } .drawer__links a{ display:flex;align-items:baseline;justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--w-10); font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:-.005em; color:var(--white); transition:color .25s, padding-left .3s var(--ease-out); position:relative; } .drawer__links a span{ font-family:var(--f-label); font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--w-40); font-weight:500; } .drawer__links a:hover,.drawer__links a:focus-visible{ color:var(--gold); padding-left:8px; } .drawer__links a:hover span,.drawer__links a:focus-visible span{color:var(--gold)} .drawer__foot{ margin-top:24px; padding-top:22px; border-top:1px solid var(--w-10); display:flex;flex-direction:column;gap:18px; } .drawer__contact{ font-family:var(--f-label); font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-60); display:flex;flex-direction:column;gap:6px; } .drawer__contact b{ color:var(--white); font-family:var(--f-display); font-weight:500; letter-spacing:.04em; font-size:13px; } body.no-scroll{overflow:hidden} /* reduce motion */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .reveal{opacity:1;transform:none} } /* ========================================================== SUBPAGES — Request NDA, Privacy, Terms Share the home page's nav, footer, tokens and type. ========================================================== */ .page{ padding:clamp(56px, 8vw, 110px) var(--gutter) clamp(80px, 10vw, 130px); } .page__inner{max-width:var(--page-max);margin:0 auto} .page__head{max-width:820px;margin-bottom:clamp(40px, 6vw, 72px)} .page__head .section-title{margin-top:22px} .page__lead{ font-size:clamp(16px, 1.5vw, 19px); color:var(--w-80); max-width:640px; margin:26px 0 0; } .page__meta{ margin-top:22px; font-family:var(--f-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--w-40); } /* ---------- Legal prose ---------- */ .legal{ display:grid;grid-template-columns:220px minmax(0, 760px);gap:clamp(32px, 6vw, 90px); align-items:start; } .legal__toc{ position:sticky;top:110px; font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase; } .legal__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:toc} .legal__toc li{counter-increment:toc} .legal__toc a{color:var(--w-60);transition:color .2s} .legal__toc a::before{content:counter(toc, decimal-leading-zero) " ";color:var(--gold)} .legal__toc a:hover{color:var(--gold)} .prose{color:var(--w-80);font-size:16px;line-height:1.75} .prose section{padding-top:8px;margin-bottom:44px;scroll-margin-top:100px} .prose h2{ font-family:var(--f-display);font-weight:600; font-size:clamp(20px, 2vw, 24px);color:var(--white); margin:0 0 16px;letter-spacing:-.005em; } .prose h2 span{color:var(--gold);margin-right:12px;font-size:.8em} .prose h3{font-family:var(--f-body);font-weight:600;font-size:15px;color:var(--white);margin:22px 0 8px} .prose p{margin:0 0 14px} .prose ul{margin:0 0 14px;padding-left:20px} .prose li{margin-bottom:8px} .prose li::marker{color:var(--gold)} .prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose strong{color:var(--white);font-weight:600} .prose .callout{ border:1px solid rgba(255,193,0,.35); background:rgba(255,193,0,.06); border-radius:16px; padding:18px 22px;margin:0 0 18px; } .prose .facts{ display:grid;grid-template-columns:max-content 1fr;gap:6px 22px; margin:0 0 14px; } .prose .facts dt{font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--w-40);padding-top:4px} .prose .facts dd{margin:0;color:var(--white)} /* ---------- Request NDA ---------- */ .nda{ display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(32px, 6vw, 80px);align-items:start; } .nda__steps{list-style:none;margin:0;padding:0;display:grid;gap:4px} .nda__steps li{ display:grid;grid-template-columns:44px 1fr;gap:16px; padding:20px 0;border-top:1px solid var(--w-10); } .nda__steps li:first-child{border-top:0;padding-top:0} .nda__steps b{ font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--gold);line-height:1.3; } .nda__steps h3{font-family:var(--f-display);font-weight:600;font-size:17px;margin:0 0 6px} .nda__steps p{margin:0;font-size:14.5px;color:var(--w-60)} .nda__note{ margin-top:28px;padding:18px 20px;border-radius:16px; border:1px solid var(--w-10);background:var(--w-03); font-size:14px;color:var(--w-60); } .nda__note a{color:var(--gold)} .form-card{ border:1px solid var(--w-20);border-radius:24px; background:linear-gradient(180deg, rgba(14,28,54,.85), rgba(7,21,46,.95)); box-shadow:0 40px 90px -40px rgba(0,0,0,.8); padding:clamp(24px, 4vw, 44px); } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px} .field{display:flex;flex-direction:column;gap:8px;min-width:0} .field--full{grid-column:1 / -1} .field label,.field legend{ font-family:var(--f-label);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--w-60);padding:0; } .field label i{font-style:normal;color:var(--gold)} .field input,.field textarea,.field select{ font:inherit;font-size:15px;color:var(--white); background:rgba(4,11,28,.6); border:1px solid var(--w-20);border-radius:14px; padding:14px 16px;width:100%; transition:border-color .2s, box-shadow .2s; } .field textarea{min-height:130px;resize:vertical;line-height:1.55} .field input::placeholder,.field textarea::placeholder{color:var(--w-40)} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,193,0,.18); } .field .hint{font-size:12.5px;color:var(--w-40);margin:0} fieldset.field{border:0;margin:0;padding:0} .choices{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-top:2px} .field .choice{ position:relative; /* undo the uppercase field-label style these