/* Kargal Rock Mining — shared stylesheet for all pages. Home-only rules are scoped with .home (set on in index.html). See DESIGN.md. The design system is locked: do not drift. */ /* tokens */ :root{ --basalt:#16181B; --graphite:#22262B; --graphite2:#2B3037; --steel:#737C86; --steel-l:#9AA0A8; --ember:#E06A1B; --ember-2:#C85E16; --paper:#ECE8E1; --paper-2:#E3DED4; --line:#D6D0C4; --ink:#1B1E22; /* ink-grade variants: --ember and --steel fall below 4.5:1 on paper, so any small text or focus ring on a light surface uses these instead. */ --ember-ink:#9E480E; --steel-ink:#5C636B; --ink-2:#33383F; --ink-3:#4C525A; --paper-dim:#C7CBD0; --line-2:#C6BFB0; --disp:'Anton',sans-serif; --cond:'Barlow Condensed',sans-serif; --body:'Barlow',sans-serif; --mono:'JetBrains Mono',monospace; --ease:cubic-bezier(.22,1,.36,1); --nav-h:68px; } @supports (color: oklch(0.5 0.1 250)){ :root{ --basalt:oklch(0.20 0.006 260); --graphite:oklch(0.26 0.008 260); --graphite2:oklch(0.31 0.010 260); --steel:oklch(0.57 0.012 260); --steel-l:oklch(0.71 0.012 260); --ember:oklch(0.67 0.17 47); --ember-2:oklch(0.60 0.17 45); --ember-ink:oklch(0.50 0.14 45); --steel-ink:oklch(0.47 0.014 260); --ink-2:oklch(0.32 0.008 260); --ink-3:oklch(0.41 0.010 260); --paper-dim:oklch(0.83 0.008 260); --paper:oklch(0.93 0.008 80); --paper-2:oklch(0.89 0.010 80); --line:oklch(0.84 0.010 80); --ink:oklch(0.22 0.006 260); --line-2:oklch(0.79 0.012 80); } } /* base */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* clip, not hidden: overflow-x:hidden makes body a scroll container and breaks position:sticky for the film stages. clip contains the same overflow without it. */ body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} @supports not (overflow-x: clip){body{overflow-x:hidden}} /* viewport-fit=cover means the page runs under the notch and home indicator, so every gutter has to clear the inset on landscape/notched phones */ .wrap{max-width:1160px;margin:0 auto; padding-left:max(28px,env(safe-area-inset-left)); padding-right:max(28px,env(safe-area-inset-right))} a{color:inherit;text-decoration:none} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--ember-ink);display:inline-flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:30px;height:2px;background:var(--ember);flex:none} .dark .eyebrow,.reel .eyebrow,.caps .eyebrow,.contact .eyebrow,.strat .eyebrow,.phero .eyebrow,.ctaband .eyebrow{color:var(--ember)} h1,h2,h3,h4{font-family:var(--disp);font-weight:400;letter-spacing:.4px;line-height:1;text-transform:uppercase} /* keyboard focus: ember is only 2.75:1 on paper, so light surfaces get ink-grade */ :focus-visible{outline:2px solid var(--ember-ink);outline-offset:3px} header :focus-visible,.reel :focus-visible,.dark :focus-visible,.caps :focus-visible, .contact :focus-visible,.strat :focus-visible,.phero :focus-visible,.ctaband :focus-visible, footer :focus-visible{outline-color:var(--ember)} .skip{position:fixed;left:12px;top:-100px;z-index:100;background:var(--ember);color:var(--basalt); font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase; padding:12px 20px;transition:top .2s var(--ease)} .skip:focus{top:12px} /* staggered reveal: children each carry .reveal, the parent sets the cadence */ .stagger>.reveal:nth-child(2){transition-delay:55ms} .stagger>.reveal:nth-child(3){transition-delay:110ms} .stagger>.reveal:nth-child(4){transition-delay:165ms} .stagger>.reveal:nth-child(5){transition-delay:220ms} .stagger>.reveal:nth-child(6){transition-delay:275ms} .stagger>.reveal:nth-child(n+7){transition-delay:330ms} /* header */ header{position:sticky;top:0;z-index:50;background:var(--basalt);color:var(--paper);border-bottom:1px solid rgba(255,255,255,.06);padding-top:env(safe-area-inset-top)} .nav{display:flex;align-items:center;gap:26px;height:var(--nav-h)} .brand{display:flex;align-items:center;gap:12px} .brand img{width:34px;height:38px;flex:none} .brand .bt{font-family:var(--disp);font-size:22px;letter-spacing:1px} .brand .bt small{display:block;font-family:var(--cond);font-weight:600;font-size:9px;letter-spacing:4px;color:var(--steel-l);margin-top:1px} .links{display:flex;gap:22px;margin-left:14px} .links a{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:var(--steel-l);transition:color .2s var(--ease)} .links a:hover,.links a.active{color:var(--paper)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px} .lang{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--steel-l);border:1px solid rgba(255,255,255,.14);padding:5px 9px} .lang b{color:var(--paper)} .cta{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase;background:var(--ember);color:var(--basalt);padding:10px 18px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;transition:background .2s var(--ease),transform .2s var(--ease)} .cta:hover{background:var(--ember-2);transform:translateY(-1px)} .burger{display:none;background:none;border:1px solid rgba(255,255,255,.18);color:var(--paper);width:44px;height:44px;font-size:18px;cursor:pointer;transition:border-color .2s var(--ease)} .burger:hover{border-color:rgba(255,255,255,.4)} .mobilemenu{display:none;flex-direction:column;background:var(--graphite);border-top:1px solid rgba(255,255,255,.08)} .mobilemenu.open{display:flex} .mobilemenu a{padding:15px 28px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--paper);border-bottom:1px solid rgba(255,255,255,.06)} /* ---- 简体中文 layer ----------------------------------------------------- Anton and Barlow carry no CJK glyphs, and Google Fonts is unreliable from mainland China, so Chinese text is set in the system CJK stack: zero bytes, no blocking request, and every target platform ships a good one. Latin runs inside Chinese text (KARGAL, SiO2, +92) still pick up Anton/Barlow when they load, because those come first in the stack. */ .zh{ --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","Heiti SC",sans-serif; --disp:'Anton',var(--cjk); --cond:'Barlow Condensed',var(--cjk); --body:'Barlow',var(--cjk); --mono:'JetBrains Mono',var(--cjk); line-height:1.75; } /* Anton is a single heavy weight; the CJK fallback needs weight asked for explicitly or headings render at book weight next to Latin display type. */ .zh h1,.zh h2,.zh h3,.zh h4{font-weight:800;letter-spacing:0;text-transform:none} /* uppercase and wide tracking are Latin devices: both damage CJK */ .zh .eyebrow{letter-spacing:1px;text-transform:none;font-size:12.5px} .zh .cta,.zh .btn,.zh .links a,.zh .mobilemenu a,.zh .doc,.zh .mindex a, .zh .chip,.zh .fcol h5,.zh .pname,.zh .vcard h4{text-transform:none;letter-spacing:.5px} .zh .fbot,.zh .trust,.zh .minq,.zh .pnote,.zh .form-note{letter-spacing:0} .zh p,.zh .sub,.zh .lede,.zh .prose p{line-height:1.8} /* CJK sets denser than Latin: same measure needs fewer ch and less size */ .zh .reel h1{font-size:clamp(30px,4.2vw,58px);max-width:18ch;letter-spacing:1px} .zh .reel h2{font-size:clamp(27px,3.6vw,46px);max-width:16ch;letter-spacing:1px} .zh .reel .sub{max-width:30ch;font-size:clamp(16px,1.4vw,18px)} .zh .phero h1{font-size:clamp(28px,4.6vw,54px);max-width:16ch} .zh .sec-head h2,.zh.home .sec-head h2{font-size:clamp(24px,3.4vw,42px)} .zh .mrow-top h2{font-size:clamp(22px,3.2vw,36px)} .zh .ctaband h2{font-size:clamp(24px,3.4vw,40px)} .zh .strat h2{font-size:clamp(22px,2.6vw,32px);max-width:22ch} .zh .prose p,.zh .lede{max-width:40ch} .zh .sec-head{max-width:44ch} .zh .wbody p,.zh .cstep p,.zh .mdesc p{max-width:40ch} /* the language chip is a control now, not a label */ .zh .lang a,.lang a{color:var(--steel-l);transition:color .2s var(--ease)} .zh .lang a:hover,.lang a:hover{color:var(--paper)} .mm-lang{color:var(--ember)!important} /* The reel: ONE sticky stage holding all three movements. Three separate sticky sections left a seam between them, because each stage had to release and the next re-pin. With a single stage there is no seam to fall through. Stage height and reel height derive from the same custom property, so the release lands exactly on the reel's bottom edge whatever svh resolves to. */ .home main{margin-top:calc(var(--nav-h) * -1)} .reel{--stage-h:100svh;position:relative;height:calc(var(--stage-h) * 3.2);background:var(--basalt)} .reel-stage{position:sticky;top:0;height:var(--stage-h);overflow:hidden; display:flex;align-items:center;background:var(--basalt);color:var(--paper);padding-top:var(--nav-h)} .reel-media{position:absolute;inset:0;z-index:0} /* One element carries every movement, so there is no video-to-video crossfade to run and no reason for it to start hidden. */ .reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center;display:block} .reel-scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(95deg,rgba(12,14,17,.93),rgba(12,14,17,.66) 44%,rgba(12,14,17,.3) 100%), linear-gradient(0deg,rgba(12,14,17,.8),rgba(12,14,17,0) 48%)} /* width:100% or the flex parent shrinks it to content and the wrap gutter is lost */ .reel-body{position:relative;z-index:2;width:100%;display:grid; padding-left:max(28px,env(safe-area-inset-left)); padding-right:max(28px,env(safe-area-inset-right))} /* Panels share one grid cell. They must NOT crossfade: two headlines at 50% opacity in the same place collide illegibly. The outgoing panel leaves fast, the incoming one waits for it to clear, so the two never overlap. The hidden state is gated on .js, or the h1 would be invisible if this stylesheet loads and the script does not. */ .panel{grid-area:1/1;align-self:center} .js .panel{opacity:0;transform:translateY(24px);pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease)} .js .panel.on{opacity:1;transform:none;pointer-events:auto; transition:opacity .55s var(--ease) .22s,transform .55s var(--ease) .22s} .reel h1{font-size:clamp(38px,5.6vw,80px);max-width:15ch;margin:20px 0 0} .reel h2{font-size:clamp(32px,4.4vw,58px);max-width:14ch;margin:20px 0 0} .reel .sub{font-family:var(--body);font-weight:300;font-size:clamp(17px,1.5vw,19px); color:var(--paper-dim);max-width:46ch;margin-top:20px;line-height:1.55} .reel-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .trust{margin-top:32px;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--steel-l);border-top:1px solid rgba(255,255,255,.14);padding-top:14px;display:inline-block} /* movement rail: tells the reader where they are in a pinned sequence */ .reel-rail{grid-area:1/1;align-self:center;justify-self:end;list-style:none; display:flex;flex-direction:column;gap:14px;align-items:flex-end} .reel-rail li{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--steel); display:flex;align-items:center;gap:10px;transition:color .5s var(--ease)} .reel-rail li::after{content:"";width:22px;height:1px;background:currentColor; transition:width .5s var(--ease),background .5s var(--ease)} .reel-stage[data-active="0"] .reel-rail li:nth-child(1), .reel-stage[data-active="1"] .reel-rail li:nth-child(2), .reel-stage[data-active="2"] .reel-rail li:nth-child(3){color:var(--ember)} .reel-stage[data-active="0"] .reel-rail li:nth-child(1)::after, .reel-stage[data-active="1"] .reel-rail li:nth-child(2)::after, .reel-stage[data-active="2"] .reel-rail li:nth-child(3)::after{width:44px} /* inner page hero */ .phero{background:var(--basalt);color:var(--paper);position:relative;overflow:hidden} .phero::after{content:"";position:absolute;top:-15%;right:16%;width:2px;height:150%;background:var(--ember);transform:rotate(17deg);opacity:.7} .phero .wrap{position:relative;z-index:2;padding:72px 28px 64px} .phero h1{font-size:clamp(34px,6vw,72px);margin:18px 0 0;max-width:18ch} .phero .psub{font-family:var(--body);font-weight:300;color:var(--paper-dim);font-size:18px;margin-top:18px;max-width:60ch} /* generic section */ section{padding:80px 0;border-bottom:1px solid var(--line)} section.dark{background:var(--basalt);color:var(--paper);border-bottom:none} .home section{padding:88px 0;border-bottom:none} .sec-head{max-width:64ch} .home .sec-head{max-width:60ch} .sec-head h2{font-size:clamp(26px,4vw,42px);margin:14px 0 0} .home .sec-head h2{font-size:clamp(32px,4.6vw,56px);margin:18px 0 0} .home .sec-head p.intro{color:var(--ink-3);font-size:18px;margin-top:16px;max-width:52ch} .lede{font-size:18px;color:var(--ink-3);margin-top:14px;max-width:66ch} .dark .lede{color:var(--steel-l)} .prose p{font-size:clamp(17px,2vw,19px);color:var(--ink-2);max-width:66ch;margin-top:16px;font-weight:300;line-height:1.55} /* buttons */ .btn{font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.5px;text-transform:uppercase;padding:14px 24px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s} .btn.sm{padding:11px 18px;font-size:14px} .btn-primary{background:var(--ember);color:var(--basalt)} .btn-primary:hover{background:var(--ember-2);transform:translateY(-2px)} .btn-ghost{border:1px solid rgba(255,255,255,.28);color:var(--paper)} .btn-ghost:hover{border-color:var(--paper);transform:translateY(-2px)} /* home: positioning */ .pos h2{max-width:16ch} .pos p{font-size:clamp(18px,2.4vw,22px);font-weight:300;color:var(--ink-2);max-width:60ch;margin-top:18px;line-height:1.5} /* home: product list. First surface after the reel, so it takes the lightest ground and a hard ember edge: the cut from film to content should be felt. */ .products{background:var(--paper);border-top:3px solid var(--ember)} .home .products{padding-top:96px} .prow{display:grid;grid-template-columns:minmax(170px,1fr) 130px 2fr 30px;gap:20px;align-items:center;padding:24px 8px;border-top:1px solid var(--line);transition:background .25s var(--ease)} .prow>*{transition:transform .25s var(--ease),color .25s var(--ease)} .plist .prow:last-child{border-bottom:1px solid var(--line)} .prow:hover{background:rgba(224,106,27,.06)} .prow:hover>*{transform:translateX(8px)} .pname{font-family:var(--disp);font-size:24px;text-transform:uppercase;letter-spacing:.5px} .pform{font-family:var(--mono);font-size:13px;color:var(--ember-ink)} .pdesc{color:var(--ink-3);font-size:15px} .parrow{font-family:var(--mono);color:var(--steel-ink);text-align:right} .prow:hover .parrow{color:var(--ember-ink);transform:translateX(14px)} .pnote{font-family:var(--mono);font-size:13px;color:var(--steel-ink);margin-top:24px} /* home: why */ .why{background:var(--paper-2)} .why .wrow{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line);align-items:baseline} .why .wrow:last-child{border-bottom:1px solid var(--line)} .wnum{font-family:var(--disp);font-size:34px;color:var(--ember)} .wbody h3{font-size:24px;margin-bottom:8px} .wbody p{color:var(--ink-3);max-width:60ch} /* home: capabilities */ .caps{background:var(--basalt);color:var(--paper)} .caps .sec-head p.intro{color:var(--steel-l)} .cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);margin-top:40px} .cstep{background:var(--basalt);padding:24px} .cnum{font-family:var(--mono);font-size:13px;color:var(--ember);letter-spacing:1px} .cstep h4{font-size:20px;margin:12px 0 8px} .cstep p{color:var(--steel-l);font-size:14px} /* home: strategic band */ .strat{background:var(--graphite);color:var(--paper);text-align:left} .strat .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center} .strat h2{font-size:clamp(24px,3vw,38px);max-width:20ch} .strat .tagrow{font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--ember);text-transform:uppercase;line-height:2} .strat p{color:var(--paper-dim);font-weight:300;margin-top:14px;max-width:46ch} /* home: contact band */ .contact{background:var(--basalt);color:var(--paper);position:relative;overflow:hidden} .contact::after{content:"";position:absolute;top:-20%;left:14%;width:2px;height:140%;background:var(--ember);transform:rotate(17deg);opacity:.6} .contact .wrap{position:relative;z-index:2} .contact h2{font-size:clamp(30px,4.4vw,52px);margin:16px 0 0} .contact .lede{color:var(--paper-dim);font-weight:300;font-size:18px;margin-top:16px;max-width:48ch} .channels{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} /* about: mission/vision + values */ .mv{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px} .mv .card{background:var(--graphite);padding:32px} .mv .card h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:2px;font-size:14px;color:var(--ember);margin-bottom:12px} .mv .card p{font-size:18px;font-weight:300;color:var(--paper);line-height:1.5} .vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:32px;background:var(--line);border:1px solid var(--line)} .vcard{background:var(--paper);padding:24px} .vcard h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:1px;font-size:19px;margin-bottom:8px;display:flex;align-items:center;gap:10px} .vcard h4::before{content:"";width:11px;height:11px;background:var(--ember);flex:none} .vcard p{font-size:14px;color:var(--ink-3)} /* capabilities: process */ .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px} .pstep{display:flex;gap:20px;align-items:flex-start;padding-top:22px;border-top:1px solid var(--line)} .dark .pstep{border-top-color:rgba(255,255,255,.14)} .pnum{font-family:var(--disp);font-size:34px;color:var(--ember);line-height:1;flex:none} .pstep h4{font-size:21px;margin-bottom:6px} .pstep p{font-size:15px;color:var(--ink-3)} .dark .pstep p{color:var(--steel-l)} /* products: material rows */ .mrow{padding:32px 0;border-top:1px solid var(--line)} .mrow-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} .mrow-top h2{font-size:clamp(28px,4vw,44px)} .mform{font-family:var(--mono);font-size:15px;color:var(--ember-ink);letter-spacing:1px} .mrow-body{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;margin-top:18px} .mdesc p{font-size:17px;color:var(--ink-2)} .mdesc .mapp{font-size:15px;color:var(--ink-3);margin-top:12px} .mdesc .mapp b{font-family:var(--cond);font-weight:700;color:var(--ink)} .mind{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px} .chip{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;background:var(--basalt);color:var(--paper);padding:5px 9px} .minq{font-family:var(--mono);font-size:12px;color:var(--steel-ink);margin-bottom:14px} .mindex{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .mindex a{font-family:var(--cond);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.4px;border:1px solid var(--line);padding:8px 13px;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);transition:border-color .2s,color .2s} .mindex a:hover{border-color:var(--ember);color:var(--ember-ink)} /* quality: docs */ .cols3{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px} .qitem{border-top:2px solid var(--basalt);padding-top:16px} .qitem h4{font-size:20px;margin-bottom:8px} .qitem p{font-size:15px;color:var(--ink-3)} .docrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .doc{font-family:var(--cond);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.4px;border:1px solid var(--line);padding:9px 15px;display:inline-flex;align-items:center;min-height:44px} /* cta band */ .ctaband{background:var(--basalt);color:var(--paper);position:relative;overflow:hidden} .ctaband::after{content:"";position:absolute;top:-20%;left:12%;width:2px;height:150%;background:var(--ember);transform:rotate(17deg);opacity:.55} .ctaband .wrap{position:relative;z-index:2;text-align:center;padding:70px 28px} .ctaband h2{font-size:clamp(28px,4vw,46px)} .ctaband p{color:var(--paper-dim);font-weight:300;margin:14px auto 26px;max-width:44ch} /* contact: rfq form */ .rfq{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:10px} .form-note{font-family:var(--mono);font-size:12px;color:var(--steel-ink);margin-bottom:18px} form.rfqform{display:grid;grid-template-columns:1fr 1fr;gap:14px} form.rfqform .full{grid-column:1/-1} .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ember);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line);padding:12px 13px;font-family:var(--body);font-size:16px;min-height:48px;color:var(--ink);border-radius:0} .field textarea{min-height:120px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember)} /* contact channels (light rail on contact.html, dark row on home) */ .chan-rail{display:flex;flex-direction:column;gap:12px} .chan{display:block;border:1px solid var(--line);padding:16px 18px;transition:border-color .2s,transform .2s var(--ease)} .chan:hover{border-color:var(--ember);transform:translateY(-2px)} .chan .k{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--steel-ink);text-transform:uppercase;display:block;margin-bottom:3px} .chan .v{font-family:var(--cond);font-weight:600;font-size:18px} .chan.wa .v{color:var(--ember-ink)} .soon{font-family:var(--mono);font-size:12px;color:var(--steel-ink);margin-top:8px} .home .chan{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.16);padding:16px 20px} .home .chan .k{color:var(--steel-l)} .home .chan.wa .v{color:var(--ember)} .home .soon{color:var(--steel-l);margin-top:20px;letter-spacing:.5px} /* footer */ footer{background:#101215;color:var(--steel-l);padding:56px 0 calc(30px + env(safe-area-inset-bottom))} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)} .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px} .fbrand img{width:38px;height:42px;flex:none} .fbrand .bt{font-family:var(--disp);font-size:24px;color:var(--paper);letter-spacing:1px} .fcol h5{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ember);margin-bottom:14px} .fcol a,.fcol p{display:block;font-size:14px;color:var(--steel-l);margin-bottom:9px;transition:color .2s} .fcol a:hover{color:var(--paper)} .fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--steel-l)} .fbot .tag{color:var(--ember)} /* reveal motion */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} /* the reel holds a still frame and stacks its movements instead of pinning */ .panel,.js .panel,.js .panel.on{opacity:1;transform:none;transition:none; pointer-events:auto;grid-area:auto;padding:56px 0; border-top:1px solid rgba(255,255,255,.12)} .panel:first-of-type,.js .panel:first-of-type{border-top:0} .reel{height:auto} .reel-stage{position:static;height:auto;padding-block:var(--nav-h) 56px} .reel-rail{display:none} .skip{transition:none} } @media(max-width:860px){ .links,.nav-right .lang,.cta-full{display:none} .mm-lang{border-top:1px solid rgba(255,255,255,.14)} .burger{display:block} /* the header CTA must stay reachable without pushing the row off-screen */ .nav{gap:12px} .nav-right{gap:10px} .cta{font-size:14px;padding:10px 12px} .mv,.vgrid,.pgrid,.cols3,.rfq,.mrow-body,.fgrid{grid-template-columns:1fr} form.rfqform{grid-template-columns:1fr} /* footer links were 22px tall: pad them into a real touch target */ .fcol a{padding:11px 0;margin-bottom:0} .fcol p{margin-bottom:9px} .fgrid{gap:24px} /* the movements are 16:9 with the subject centred, so cover-crop holds up, but the pin travel shortens and the scrim goes bottom-weighted */ .reel{height:calc(var(--stage-h) * 3)} .reel-stage{align-items:flex-end;padding-bottom:calc(40px + env(safe-area-inset-bottom))} .reel-rail{display:none} /* each movement has to clear one short viewport, so tighten it */ .reel h1{font-size:clamp(34px,9vw,44px);margin-top:16px} .reel h2{font-size:clamp(30px,8vw,40px);margin-top:16px} .reel .sub{font-size:16.5px;margin-top:14px;max-width:38ch} .reel-actions{margin-top:22px;gap:12px} .reel-actions .btn{flex:1 1 100%;text-align:center} .trust{margin-top:20px;padding-top:12px} .reel-scrim{background:linear-gradient(0deg,rgba(12,14,17,.94) 4%,rgba(12,14,17,.55) 42%,rgba(12,14,17,.24) 100%)} .strat .wrap{grid-template-columns:1fr;gap:22px} .cgrid{grid-template-columns:1fr 1fr} .prow{grid-template-columns:1fr auto;gap:6px 14px} .prow .pform{grid-column:2;grid-row:1;text-align:right} .prow .pdesc{grid-column:1/-1} .prow .parrow{display:none} } /* --- phones ------------------------------------------------------------- */ @media(max-width:640px){ /* the whole movement has to clear one short viewport: cut the display sizes and the measure rather than let a panel overflow its own stage */ .reel h1{font-size:clamp(30px,8vw,38px)} .reel h2{font-size:clamp(27px,7.2vw,34px)} .reel .sub{font-size:16px;max-width:32ch;line-height:1.5} .reel-actions{margin-top:20px} .eyebrow{font-size:11px;letter-spacing:2px} .eyebrow::before{width:20px} section{padding:56px 0} .home section,.home .products{padding-top:64px;padding-bottom:56px} .sec-head h2,.home .sec-head h2{font-size:clamp(26px,7vw,34px)} .mrow-top h2{font-size:clamp(24px,6.6vw,32px)} .ctaband h2{font-size:clamp(24px,6.6vw,32px)} .ctaband .wrap{padding-top:52px;padding-bottom:52px} .phero .wrap{padding-top:52px;padding-bottom:44px} .phero h1{font-size:clamp(30px,8vw,40px)} .cgrid{grid-template-columns:1fr} .channels,.chan-rail{gap:10px} .chan{padding:14px 16px} } /* --- short viewports: SE-class phones and anything with a small height --- */ @media(max-height:700px) and (max-width:860px){ /* trust lines are supporting copy; the headline and the CTA are not */ .reel .trust{display:none} .reel h1{font-size:clamp(27px,7vw,32px)} .reel h2{font-size:clamp(25px,6.4vw,30px)} .reel .sub{font-size:15.5px;margin-top:12px;max-width:30ch} .reel-actions{margin-top:16px;gap:10px} .reel-stage{padding-bottom:calc(28px + env(safe-area-inset-bottom))} } /* --- landscape phones: pinning a 375px-tall viewport is unusable --------- */ @media(max-height:520px) and (orientation:landscape){ .reel{height:auto} .reel-stage{position:static;height:auto;align-items:stretch; padding-block:calc(var(--nav-h) + 32px) 40px} .reel-media{position:absolute;inset:0} .js .panel,.js .panel.on{opacity:1;transform:none;transition:none;grid-area:auto; padding:36px 0;border-top:1px solid rgba(255,255,255,.14);pointer-events:auto} .js .panel:first-of-type{border-top:0;padding-top:0} .reel-rail{display:none} .reel .trust{display:inline-block} }