/* ============================================================================ 48x — homepage v4 · shared stylesheet · ZERO-BUILD STATIC (no CDN/runtime) Loaded by both /index.html (dark) and /light.html (light). The two pages differ ONLY by the attribute + theme-color. v4.2 — closer to mistral.ai: • Inter (self-hosted) display + body, like Mistral; Geist Mono eyebrows. • Cell-divided nav (logo left · links left · inverted CTA right) + mega-dropdown. • Pixel-grid motifs throughout (hero pixel field, dropdown tiles, accents). • Horizontal motion: scroll-shifting pixel rows + sideways reveals. • FLAT — no box-shadows / drop-shadows anywhere (borders carry elevation). Brand stays 48x: rose/crimson palette, node-fan figure, verbatim v3 copy. ============================================================================ */ /* ---------- self-hosted fonts (root-absolute; no runtime CDN) ---------- */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url("/assets/fonts/inter.woff2") format('woff2-variations');} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap; src:url("/assets/fonts/geist-mono.woff2") format('woff2');} @font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/silkscreen.woff2") format('woff2');} /* ============================== TOKENS ============================== */ :root{ /* --- DARK theme (the only theme now) — very dark FOREST GREEN --- */ --surface-1:#0b1711; --surface-2:#11241a; --surface-3:#173022; --surface-4:#1e3c2b; --ink-1:#eef4ef; --ink-2:#c2d2c6; --ink-3:#8fa596; --ink-4:#74897d; --border-1:rgba(200,255,220,.10); --border-2:rgba(200,255,220,.17); --accent:#4ade80; /* green text/marks — AA on dark green */ --accent-2:#86efac; --accent-strong:#22c55e; /* bright green button fill (dark text) */ --accent-strong-hov:#16a34a; --ring:rgba(74,222,128,.7); --select:rgba(74,222,128,.26); --btn-ink:#052e16; /* very dark green text on bright-green fills — ~8:1 */ --ghost-bg:rgba(200,255,220,.05); --ghost-bg-hov:rgba(200,255,220,.10); --glow:rgba(74,222,128,.14); --cta-bg:#22c55e; --cta-ink:#052e16; --cta-bg-hov:#16a34a; /* grid ramp — greens + teal & lime "sparks" (the colours that go with green) */ --px1:#0f2a1c; --px2:#14532d; --px3:#166534; --px4:#16a34a; --px5:#34d399; --px6:#86efac; --px7:#2dd4bf; --px8:#bef264; /* --- shared scale --- */ --frame-max:1726px; --frame-gutter:clamp(16px,2.4vw,48px); --gutter:clamp(20px,5vw,48px); --band:30.24vh; /* X-tile field band height (desktop) */ --nav-h:64px; --r:8px; --r-lg:10px; --r-btn:6px; --r-chip:4px; /* Mistral rounded-md ≈ 6px */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.65,0,.15,.99); --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --font-pixel:"Silkscreen",ui-monospace,monospace; --fs-display:clamp(2.9rem,1.1rem + 8.4vw,6.2rem); --fs-h2:clamp(2rem,1.1rem + 4vw,3.5rem); --fs-h3:clamp(1.4rem,1rem + 1.9vw,2.25rem); --fs-lede:clamp(1.05rem,.95rem + .8vw,1.3rem); /* v5 secondary accent system (non-green) — used on ~10-20% of surface */ --amber:#f5a524; --clay:#d97757; --violet:#8b5cf6; --cyan:#22d3ee; --magenta:#f472b6; /* section tones for tonal rhythm */ --bg-cool:#0b1226; /* deep indigo (code section) */ --bg-light:#dbe8de; /* light break section (text #0b1711) */ /* categorical chart palette (reuse anywhere we show data) */ --chart-1:#22c55e; --chart-2:#8b5cf6; --chart-3:#f5a524; --chart-4:#22d3ee; --chart-5:#f472b6; --edge-muted:#2a4133; } /* --- LIGHT theme (light.html) --- */ [data-theme="light"]{ --surface-1:#fbf8f8; --surface-2:#f4edee; --surface-3:#ece3e4; --surface-4:#e5dadb; --ink-1:#1a1416; --ink-2:#362b2d; --ink-3:#5e4d4f; --ink-4:#7a686a; --border-1:#e7d6d8; --border-2:#d4bcbe; --accent:#c81e3a; --accent-2:#a8182f; --accent-strong:#c81e3a; --accent-strong-hov:#a8182f; --ring:#a8182f; --select:rgba(200,30,58,.2); --btn-ink:#fff; --ghost-bg:rgba(20,15,17,.04); --ghost-bg-hov:rgba(20,15,17,.08); --glow:rgba(200,30,58,.10); /* inverted CTA cell = near-black on the light nav (Mistral "Contact sales") */ --cta-bg:#1a1416; --cta-ink:#fbf8f8; --cta-bg-hov:#000; --px1:#f0dcdd; --px2:#e7a9b1; --px3:#e1546b; --px4:#c81e3a; --px5:#a8182f; --px6:#7f0e22; } /* ============================== RESET / BASE ============================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)} body{ background:var(--surface-1);color:var(--ink-2); font-family:var(--font-body);font-size:17px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; transition:background .3s var(--ease),color .3s var(--ease); } a{color:inherit;text-decoration:none} img,svg,canvas{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4{color:var(--ink-1);font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.04} ::selection{background:var(--select)} /* ============================== A11Y ============================== */ .skip{position:fixed;left:16px;top:16px;z-index:300;background:var(--accent-strong);color:#fff; padding:11px 17px;border-radius:8px;font-weight:700;transform:translateY(-180%);transition:transform .2s} .skip:focus{transform:none} :focus-visible{outline:2.5px solid var(--ring);outline-offset:2px;border-radius:4px} :focus:not(:focus-visible){outline:none} main:focus{outline:none} /* ============================== FRAMED GRID ============================== */ .frame{width:100%;max-width:var(--frame-max);margin-inline:auto;border-inline:1px solid var(--border-1)} .band{position:relative} .band + .band{border-top:1px solid var(--border-1)} .pad{padding:clamp(56px,8vw,104px) var(--gutter)} .eyebrow{font-family:var(--font-pixel);font-size:12px;font-weight:400;letter-spacing:.04em; text-transform:uppercase;color:var(--accent);display:inline-block} .eyebrow.muted{color:var(--ink-3)} .dim{color:var(--ink-4)} .h2{font-size:var(--fs-h2);max-width:20ch} .lede{margin-top:18px;font-size:var(--fs-lede);color:var(--ink-3);max-width:78ch;line-height:1.5} .sec-head{max-width:80ch} .sec-head .h2{margin-top:14px} .sec-head.center{margin-inline:auto;text-align:center} .sec-head.center .lede{margin-inline:auto} /* ============================== PIXEL MARK + TILES ============================== */ /* shared crisp pixel glyph (logo + dropdown tiles); crisp edges = the 8-bit read */ .pixmark{display:block} .pixmark rect{shape-rendering:crispEdges;transition:transform .55s cubic-bezier(.16,.84,.32,1)} /* hover the service row → its pixel boxes slide outward symmetrically + the whole mark turns 90° */ @media (prefers-reduced-motion:no-preference){ .mega-row:hover .pixmark{transform:rotate(var(--rot,90deg));transform-origin:center;transition:transform .6s cubic-bezier(.16,.84,.32,1)} .mega-row:hover .pixmark rect{transform:translate(var(--ex,0),var(--ey,0))} } .pixmark .s1{fill:var(--px1)}.pixmark .s2{fill:var(--px2)}.pixmark .s3{fill:var(--px3)} .pixmark .s4{fill:var(--px4)}.pixmark .s5{fill:var(--px5)}.pixmark .s6{fill:var(--px6)} .mark-core{fill:var(--ink-1)} .brand .pixmark{width:30px;height:30px} .tile{width:40px;height:40px;flex:none;border-radius:6px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--border-1)} .tile .pixmark{width:24px;height:24px} /* ============================== BUTTONS (flat) ============================== */ .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body); font-weight:600;font-size:15px;line-height:1;padding:13px 21px;border-radius:var(--r-btn); border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s} .btn .arrow{transition:transform .2s var(--ease)} .btn:hover .arrow{transform:translateX(3px)} .btn-primary{color:var(--btn-ink);background:var(--accent-strong)} .btn-primary:hover{transform:translateY(-1px);background:var(--accent-strong-hov)} .btn-ghost{color:var(--ink-1);background:var(--ghost-bg);border-color:var(--border-2)} .btn-ghost:hover{transform:translateY(-1px);border-color:var(--ring);background:var(--ghost-bg-hov)} .btn-lg{padding:15px 26px;font-size:16px} /* ============================== NAV (cell-divided, full-bleed) ============================== */ .nav{position:sticky;top:0;z-index:200;background:var(--surface-1); transition:border-color .25s var(--ease)} /* nav content is constrained to the page frame (max-width, centred) so the logo + CTA line up with the content below; the hairline borders match the framed grid (à la Mistral). */ .nav-bar{display:flex;align-items:stretch;height:var(--nav-h); max-width:var(--frame-max);margin-inline:auto; border-inline:1px solid var(--border-1);border-bottom:1px solid var(--border-1)} .nav-cell{display:flex;align-items:center;padding:0 clamp(14px,1.6vw,22px);border-left:1px solid var(--border-1)} .nav-cell:first-child{border-left:0} .brand{gap:10px;font-family:var(--font-display);font-weight:700;color:var(--ink-1);font-size:19px;letter-spacing:-.02em} .bxx{color:var(--accent)} .nav-links-wrap{padding:0} .nav-links{display:flex;height:100%} .nav-links > a,.menu-btn{display:inline-flex;align-items:center;gap:5px;height:100%;padding:0 clamp(12px,1.3vw,18px); font-size:14.5px;font-weight:500;color:var(--ink-2);border-left:1px solid var(--border-1); transition:color .15s,background .15s} .nav-links > a:first-child,.nav-links .has-mega:first-child .menu-btn{border-left:0} .nav-links > a:hover,.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--ink-1);background:var(--ghost-bg)} .menu-btn .caret{font-size:11px;transition:transform .2s var(--ease);color:var(--ink-4)} .menu-btn[aria-expanded="true"] .caret{transform:rotate(180deg)} .nav-spacer{flex:1 1 auto;border-left:1px solid var(--border-1)} .theme-toggle{gap:7px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3); transition:color .15s,background .15s} .theme-toggle:hover{color:var(--ink-1);background:var(--ghost-bg)} .theme-toggle svg{width:15px;height:15px} .nav-cta-primary{background:var(--cta-bg);color:var(--cta-ink);font-weight:600;font-size:14.5px;gap:7px; transition:background .2s var(--ease)} .nav-cta-primary:hover{background:var(--cta-bg-hov)} .nav-cta-primary .arrow{transition:transform .2s var(--ease)} .nav-cta-primary:hover .arrow{transform:translateX(3px)} .nav-toggle{display:none;align-items:center;justify-content:center;width:var(--nav-h);border-left:1px solid var(--border-1)} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:19px;height:2px;background:var(--ink-1);position:relative;transition:transform .2s} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0} .nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px} /* ---- mega-dropdown ---- */ .has-mega{position:static;display:flex} .mega{position:absolute;left:0;right:0;top:var(--nav-h);z-index:190; background:var(--surface-1);border-bottom:1px solid var(--border-1); opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;transition-delay:.14s} .has-mega:hover .mega,.has-mega:focus-within .mega,.mega.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s} .mega-in{max-width:var(--frame-max);margin-inline:auto;display:flex;align-items:stretch; border-inline:1px solid var(--border-1)} .mega-rows{flex:1.7 1 0;border-right:1px solid var(--border-1)} .mega-row{display:flex;align-items:center;gap:16px;padding:18px clamp(16px,2vw,28px); border-top:1px solid var(--border-1);transition:background .15s} .mega-row:first-child{border-top:0} .mega-row:hover{background:var(--surface-2)} .mega-row .mr-txt{flex:1;display:flex;flex-direction:column} .mega-row .mr-t{font-family:var(--font-display);font-weight:600;color:var(--ink-1);font-size:16px;letter-spacing:-.01em} .mega-row .mr-d{font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.45} .mega-row .mr-go{color:var(--ink-4);font-size:15px} .mega-side{flex:1 1 0;padding:22px clamp(16px,2vw,28px)} .mega-side .ms-title{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px} .mega-side a{display:block;font-size:15px;color:var(--ink-2);padding:7px 0;transition:color .15s} .mega-side a:hover{color:var(--accent)} /* ============================== HERO ============================== */ /* mobile-first: stacked hero (no pin). Order: headline → lede → CTAs/principles → field. */ .hero{--p:0;position:relative} .hero-pin{position:static} .hero-frame{position:relative} .hero-head{padding:clamp(28px,7vh,72px) var(--gutter) clamp(14px,2vh,22px)} .hero h1{font-size:var(--fs-display);font-weight:620;letter-spacing:-.04em;line-height:.98;max-width:14ch;color:var(--ink-1)} .hero h1 .accent{color:var(--accent)} .ways-rail h2 .accent{color:var(--accent)} .hero-lede{font-size:var(--fs-lede);color:var(--ink-2);line-height:1.45;max-width:48ch;padding:0 var(--gutter);margin:0} .hl-text{margin:0} .hl-icons{display:none} /* only shown in the expanded desktop hero */ .hl-i{width:38px;height:38px;display:block} .hl-i .s3{fill:var(--px3)}.hl-i .s4{fill:var(--px4)}.hl-i .s5{fill:var(--px5)}.hl-i .s6{fill:var(--px6)} .hero-aside{padding:clamp(16px,3vh,26px) var(--gutter) clamp(28px,5vh,52px)} .hero-cta{display:flex;flex-wrap:wrap;gap:11px} .hero-cta .btn-lg{padding:17px 32px} .principles{margin-top:24px} .principles .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:11px} .principles .row{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px} .principles .pr{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-2)} .principles .pr svg{width:15px;height:15px;color:var(--accent)} .principles .sep{color:var(--border-2)} .hero-stage{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--border-1);background:#008344} .hero-vline{display:none} /* DESKTOP — Mistral layout: airy top, headline BOTTOM-LEFT, right rail (CTAs/principles), a FIXED block field bottom-left, and the LEDE cell that GROWS to fullscreen on scroll while the headline / aside / field lift + fade. */ @media (min-width:1041px) and (prefers-reduced-motion:no-preference){ .hero{min-height:215vh} .hero-pin{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden} .hero-frame{height:100%;overflow:hidden} /* clip the sliding headline at the frame's border */ .hf-fade{transform:translateY(calc(var(--p) * -6vh));opacity:calc(1 - 1.6*var(--p))} .hero-head{position:absolute;left:0;width:63%;top:0;bottom:calc(var(--band) + 28px);z-index:2; opacity:calc(1 - 1.6 * var(--p)); /* fade as it slides — a half-slid headline reads broken */ transform:translateX(calc(-100% * var(--p))); /* slides LEFT, right edge glued to the panel */ display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(24px,3vw,46px) 0 var(--gutter)} .hero h1{font-size:clamp(3.8rem,1rem + 9.6vw,7.4rem);max-width:13ch} /* CTAs + principles are their OWN block, an even lighter green, sitting on the panel */ .hero-aside{position:absolute;right:0;width:37%;bottom:var(--band);z-index:5;opacity:1;min-height:120px; border-left:1px solid var(--border-1); /* this border belongs to the CTAs block — slides DOWN with it */ transform:translateY(calc((var(--band) + 120px) * var(--p))); /* slides DOWN with the field */ display:flex;flex-direction:column;justify-content:center; background:var(--surface-3); padding:clamp(22px,2.4vw,30px) var(--gutter) clamp(22px,2.4vw,30px) clamp(28px,3.4vw,60px)} .hero-vline{display:block;position:absolute;left:calc(63% * (1 - var(--p)));top:0;bottom:calc(var(--band) + 120px);width:1px;background:var(--border-1);z-index:6;transform:none;opacity:calc(1 - 3.2 * var(--p))} .hero-stage{position:absolute;left:0;bottom:0;width:100%;height:var(--band);z-index:1;opacity:1; transform:translateY(calc((var(--band) + 120px) * var(--p)))} /* the field slides DOWN out of the way */ /* the lede IS the right-column panel: one lighter block from the header down to the field; grows to fullscreen */ /* collapsed: bottom-left + left-justified. scales + flies to dead-center as the cell grows. */ .hero-lede{position:absolute;z-index:4;margin:0;max-width:none; left:calc(63% * (1 - var(--p)));right:0;top:0; bottom:calc((var(--band) + 120px) * (1 - var(--p))); padding:clamp(28px,3.4vw,60px);background:var(--surface-1); font-size:calc(var(--fs-lede) + 0.15rem);line-height:1.4} .hl-inner{position:absolute;width:max-content;max-width:38ch; left:calc(clamp(28px,3.4vw,60px) * (1 - var(--p)) + 50% * var(--p)); bottom:calc(clamp(28px,3.4vw,60px) * (1 - var(--p)) + 50% * var(--p)); transform:translate(calc(-50% * var(--p)),calc(50% * var(--p))) scale(calc(1 + 0.5 * var(--p))); transform-origin:center;display:flex;flex-direction:column;align-items:flex-start} .hl-text{max-width:38ch;text-align:left;margin:0} .hl-icons{display:flex;align-self:center;justify-content:center;gap:clamp(28px,3vw,50px); margin-bottom:clamp(18px,2.4vh,34px);opacity:calc(var(--p) * 1.7 - 0.7)} /* glyphs spin gently upright as they fade in (staggered per icon) */ .hl-i{width:clamp(22px,2vw,34px);height:auto;pointer-events:auto;cursor:pointer; transform:rotate(calc((1 - var(--p)) * var(--gspin,44deg))); transition:transform .5s cubic-bezier(.16,.84,.32,1)} .hl-i:hover,.hl-i.spin{transform:rotate(90deg)} .hl-i[data-i="0"]{--gspin:38deg}.hl-i[data-i="1"]{--gspin:-52deg} .hl-i[data-i="2"]{--gspin:64deg}.hl-i[data-i="3"]{--gspin:-40deg} } /* ---- the hero field (blocks → interlocking X's): bottom-anchored; rows shift on scroll ---- */ .pixfield{overflow:hidden;width:100%;height:32vh} /* desktop band: top edge is OPEN (X's render in full, bleeding up behind the content above); left / right / bottom stay cropped via clip-path */ @media (min-width:1041px) and (prefers-reduced-motion:no-preference){.pixfield{position:absolute;inset:auto 0 0 0;height:100%;overflow:visible;clip-path:polygon(0 -380px,100% -380px,100% 100%,0 100%)}} .pixfield svg{display:block;width:100%;height:100%;overflow:visible;transform:scaleX(-1)} .xtiles use{stroke:none;transform-box:fill-box;transform-origin:50% 50%} .xlights rect{opacity:0} /* hidden during the build; xglint fades them in (and in/out) only after it */ @keyframes xslide{from{transform:translate(var(--dx,-70px),var(--dy,70px))}to{transform:translate(0,0)}} @keyframes xfade{0%,100%{fill-opacity:1}50%{fill-opacity:.35}} @keyframes xglint{0%,100%{opacity:0}50%{opacity:.85}} @media (prefers-reduced-motion:no-preference){ /* on load each X slides in left→right (var(--sd) staggered by x), spinning about its own centre and landing flush at rotate(0) in its final tessellation position; then it fades slowly */ .xtiles use{animation:xslide var(--su,.45s) cubic-bezier(.2,.7,.3,1) var(--sd,0s) both, xfade var(--fd,18s) ease-in-out var(--fdl,6s) infinite} .xlights rect{animation:xglint var(--lu,9s) ease-in-out var(--ld,2s) infinite} } /* (X-grid line-art variant removed — the blocks themselves now form the interlocking X's) */ /* (reverted: no modal-zoom; the hero field grows to fullscreen on scroll instead) */ /* scroll cue */ .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:0;padding:14px 0 18px;opacity:calc(1 - 1.6*var(--p)); font-family:var(--font-pixel);font-size:16px;line-height:.78;color:var(--ink-4)} @media (min-width:1041px) and (prefers-reduced-motion:no-preference){ .scroll-cue{position:absolute;right:0;bottom:20px;width:37%;z-index:3;padding:0} } .scroll-cue span:nth-child(1){animation:cue 2s 0s linear infinite} .scroll-cue span:nth-child(2){animation:cue 2s .2s linear infinite} .scroll-cue span:nth-child(3){animation:cue 2s .4s linear infinite} @keyframes cue{0%,100%{opacity:.25}50%{opacity:1}} /* pixel arrow glyph (stepped) used in CTAs / links / dropdown rows */ .pxarrow{width:13px;height:11px;flex:none;fill:currentColor} .pxarrow rect{shape-rendering:crispEdges} /* offscreen: pause idle loops + release GPU layers (motion.js toggles .hero-out) */ .hero.hero-out .scroll-cue span,.hero.hero-out .xtiles use,.hero.hero-out .xlights rect{animation-play-state:paused} /* ============================== WAYS WE MULTIPLY (sticky rail) ============================== */ .ways{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} .ways-rail{position:sticky;top:calc(var(--nav-h) + 8px);align-self:start; min-height:calc(100vh - var(--nav-h) - 8px);display:flex;flex-direction:column;justify-content:center; padding:clamp(48px,7vw,88px) clamp(24px,3vw,40px) clamp(48px,7vw,88px) var(--gutter); border-right:1px solid var(--border-1)} .ways-rail h2{font-size:var(--fs-h2)} .ways-rail .lede{max-width:42ch} .ways-steps{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:4px} .ways-step{display:flex;align-items:center;gap:14px;padding:12px 0;color:var(--ink-4); font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.01em; transition:color .35s var(--ease)} .ways-step .idx{font-family:var(--font-mono);font-size:12px;font-weight:500;opacity:.7} .ways-step .bar{width:24px;height:2px;border-radius:1px;background:var(--border-2);transition:all .35s var(--ease)} .ways-step.on{color:var(--ink-1)} .ways-step.on .bar{width:44px;background:var(--accent)} .ways-rail .progress{margin-top:26px;height:2px;background:var(--border-1);overflow:hidden} .ways-rail .progress i{display:block;height:100%;width:33%;background:var(--accent);transition:width .4s var(--ease)} .ways-panels{display:flex;flex-direction:column} .way-panel{min-height:min(86vh,720px);display:flex;flex-direction:column;justify-content:center; gap:16px;padding:clamp(48px,7vw,96px) var(--gutter);border-bottom:1px solid var(--border-1)} .way-panel:last-child{border-bottom:0} .way-panel .kw{font-family:var(--font-pixel);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)} .way-panel h3{font-size:var(--fs-h3);max-width:none;color:var(--ink-1)} .way-panel p{color:var(--ink-3);font-size:16.5px;max-width:68ch;line-height:1.55} .way-vis{margin-top:8px;border:1px solid var(--border-1);border-radius:var(--r-lg);overflow:hidden; background:var(--surface-2);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center} .way-vis svg{width:80%;height:auto;overflow:visible} /* ============================== DOMAINS (card grid) ============================== */ .cards-3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-1)} .card{position:relative;padding:30px var(--gutter) 34px;border-right:1px solid var(--border-1);transition:background .25s var(--ease)} .card:last-child{border-right:0} .card:hover{background:var(--surface-2)} .card .dnum{font-family:var(--font-pixel);font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--accent)} .card .cvis{width:54px;height:54px;margin-bottom:18px} .card .cvis svg{width:100%;height:100%;overflow:visible} .card h3{font-size:19px;letter-spacing:-.02em;margin:13px 0 9px;color:var(--ink-1)} .card p{font-size:14.5px;color:var(--ink-3);line-height:1.55} /* ============================== WHY (editorial band + spine) ============================== */ .why-head h2{font-size:var(--fs-h2);max-width:24ch} .why-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:40px; background:var(--border-1);border:1px solid var(--border-1)} .edge{position:relative;background:var(--surface-1);padding:26px 26px 28px 56px;transition:background .2s var(--ease)} .edge:hover{background:var(--surface-2)} .edge .check{position:absolute;left:24px;top:27px;width:22px;height:22px;color:var(--accent)} .edge .check svg{width:14px;height:14px} .edge h3{font-size:17px;letter-spacing:-.015em;margin-bottom:7px;color:var(--ink-1)} .edge p{font-size:14.5px;color:var(--ink-3);line-height:1.55} .edge .ekw{color:var(--ink-1);font-weight:600} .edge.span{grid-column:1 / -1} .why-spine{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent); transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease-out)} .in-view .why-spine{transform:scaleY(1)} /* ============================== PROOF (stat band) ============================== */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border:1px solid var(--border-1);background:var(--border-1);gap:1px} .metric{background:var(--surface-1);text-align:center;padding:34px 14px} .metric .mv{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5vw,54px);letter-spacing:-.04em;line-height:1;color:var(--accent)} .metric .mv .u{font-size:.5em;font-weight:600;color:var(--ink-3);letter-spacing:0} .metric .ml{margin-top:14px;font-size:14px;color:var(--ink-3);line-height:1.5;max-width:24ch;margin-inline:auto} /* ============================== TEAM ============================== */ .team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center} .team h2{font-size:var(--fs-h2);max-width:16ch} .cred-list{display:flex;flex-direction:column;border:1px solid var(--border-1);border-radius:var(--r-lg);overflow:hidden} .cred{display:flex;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border-1);background:var(--surface-1);transition:background .2s var(--ease)} .cred:last-child{border-bottom:0} .cred:hover{background:var(--surface-2)} .cred .cn{flex:none;width:34px;height:34px;border-radius:6px;display:grid;place-items:center;color:var(--cta-ink); font-family:var(--font-mono);font-size:13px;font-weight:600;background:var(--accent-strong)} .cred .ct{font-family:var(--font-display);font-weight:600;color:var(--ink-1);font-size:16px;letter-spacing:-.01em} .cred .cd{margin-top:5px;font-size:14px;color:var(--ink-3);line-height:1.5} /* ============================== CONTACT (inverted accent panel) ============================== */ .contact{padding:0} .contact-panel{position:relative;overflow:hidden;text-align:center;padding:clamp(56px,9vw,116px) var(--gutter); background:#07120c;color:#fff;border-top:1px solid var(--border-1)} [data-theme="light"] .contact-panel{background:#1a1416} .contact-panel .pixedge{position:absolute;inset:0 0 auto 0;display:flex;height:18px} .contact-panel .pixedge i{flex:1 0 auto;width:18px} .contact-panel .inner{position:relative;z-index:1} .contact-panel h2{color:#fff;font-size:clamp(2rem,1.2rem + 4.5vw,3.6rem);font-weight:620;letter-spacing:-.04em;max-width:20ch;margin-inline:auto;text-wrap:balance} .contact-panel h2 .accent{color:var(--accent-2)} .contact-panel p{color:rgba(255,255,255,.78);max-width:52ch;margin:18px auto 0;font-size:var(--fs-lede);line-height:1.5;text-wrap:pretty} .contact-panel .hero-cta{justify-content:center;margin-top:30px} /* unified two-column contact block (intro + form), used on every page */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,130px);align-items:center;padding-block:clamp(24px,5vh,72px);max-width:1400px;margin-inline:auto} @media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px;padding-block:8px}} .cg-intro h2{font-size:clamp(2rem,1.2rem + 3vw,3.2rem);font-weight:620;letter-spacing:-.035em;color:var(--ink-1);margin:0 0 18px;line-height:1.05;text-wrap:balance} .cg-intro h2 .accent{color:var(--accent)} .cg-intro p{color:var(--ink-3);font-size:var(--fs-lede);line-height:1.55;margin:0 0 28px;max-width:46ch;text-wrap:pretty} .cg-points{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:16px;max-width:46ch} .cg-points li{position:relative;padding-left:26px;color:var(--ink-2);font-size:14.5px;line-height:1.5} .cg-points li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .contact-panel .btn-primary{background:var(--accent-strong);color:var(--cta-ink)} .contact-panel .btn-primary:hover{background:var(--accent-strong-hov)} .contact-panel .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.32)} .contact-panel .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.6)} /* contact: a plain static section — the scroll-grow (--cp) treatment was removed. */ .contact-pin{display:contents} /* ============================== FOOTER ============================== */ footer.site-foot{border-top:1px solid var(--border-1)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr} .foot-cell{padding:clamp(32px,4vw,52px) var(--gutter);border-right:1px solid var(--border-1)} .foot-cell:last-child{border-right:0} .foot-brand .brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px} .foot-brand p{font-size:14px;color:var(--ink-3);max-width:38ch;line-height:1.6;margin:0;padding-right:12px} .foot-col h3{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px} .foot-col a{display:block;font-size:14.5px;color:var(--ink-2);padding:6px 0;transition:color .15s} .foot-col a:hover{color:var(--accent)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; padding:20px var(--gutter);border-top:1px solid var(--border-1);font-size:13.5px;color:var(--ink-3)} .foot-bottom .badge{display:inline-flex;align-items:center;gap:7px} .foot-bottom .badge .dot{width:6px;height:6px;border-radius:1px;background:var(--accent)} /* ============================== REVEAL (vertical + horizontal) ============================== */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * .05s)} .reveal-l{opacity:0;transform:translateX(-48px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * .06s)} .reveal-r{opacity:0;transform:translateX(48px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * .06s)} .reveal.in-view,.in-view > .reveal,.reveal-group.in-view .reveal, .reveal-l.in-view,.in-view > .reveal-l,.reveal-group.in-view .reveal-l, .reveal-r.in-view,.in-view > .reveal-r,.reveal-group.in-view .reveal-r{opacity:1;transform:none} /* light theme: deepen rose-family decorative line-art so it reads on light surfaces (pixel mark + pixel field use the --px ramp which already theme-swaps, so no filter) */ [data-theme="light"] .way-vis svg, [data-theme="light"] .cvis svg{filter:saturate(1.12) brightness(.82)} /* ============================== RESPONSIVE ============================== */ @media (max-width:1040px){ .hero h1{max-width:18ch} } @media (max-width:980px){ .ways{grid-template-columns:1fr} .ways-rail{position:static;min-height:0;display:block;border-right:0;border-bottom:1px solid var(--border-1)} .ways-steps{flex-direction:row;flex-wrap:wrap;gap:8px 18px} .ways-rail .progress{display:none} .team{grid-template-columns:1fr;gap:32px} .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--border-1)} .mega-in{flex-direction:column} .mega-rows{border-right:0;border-bottom:1px solid var(--border-1)} } @media (max-width:760px){ .nav-links-wrap,.nav-spacer,.nav-cta-primary,.theme-toggle .lbl{display:none} .nav-toggle{display:inline-flex} /* mobile menu: the links wrap drops below as a stacked panel */ .nav.open .nav-links-wrap{display:block;position:absolute;top:var(--nav-h);left:0;right:0; background:var(--surface-1);border-bottom:1px solid var(--border-1);padding:8px 0} .nav.open .nav-links{flex-direction:column;height:auto} .nav.open .nav-links > a,.nav.open .menu-btn{border-left:0;border-top:1px solid var(--border-1);padding:14px var(--gutter);width:100%;height:auto} .nav.open .has-mega{display:block} .nav.open .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;border-bottom:0} .nav.open .mega-in{border-inline:0} .cards-3{grid-template-columns:1fr} .card{border-right:0;border-bottom:1px solid var(--border-1)} .card:last-child{border-bottom:0} .why-grid{grid-template-columns:1fr} .edge.span{grid-column:auto} .metrics{grid-template-columns:repeat(2,1fr)} .way-panel{min-height:auto} } @media (max-width:480px){ .metrics{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .foot-cell{border-right:0;border-bottom:1px solid var(--border-1)} } /* ============================== REDUCED-MOTION POSTER ============================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal,.reveal-l,.reveal-r{opacity:1;transform:none;transition:none} .hero{min-height:0} .hero-pin{position:static;min-height:0} .hero-split{transform:none;opacity:1} .pixfield{height:32vh} [data-grow]{transform:none} .scroll-cue{display:none} .ways-rail{position:static} .why-spine{transform:scaleY(1);transition:none} .mega{transition:none} .btn,.card,.edge,.cred{transition:none} } /* pillar/domain outbound links (multi-page build-out) */ .way-more{margin-top:14px} .way-more a{color:var(--accent);font-weight:500} .way-more a:hover{color:var(--accent-2)} .card-link{color:inherit} .card-link:hover{color:var(--accent)} .foot-grid-4{grid-template-columns:1.4fr 1fr 1fr 1fr} @media (max-width:980px){.foot-grid-4{grid-template-columns:1fr 1fr}} @media (max-width:560px){.foot-grid-4{grid-template-columns:1fr}} .foot-grid-5{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr} @media (max-width:1100px){.foot-grid-5{grid-template-columns:1fr 1fr 1fr}} @media (max-width:760px){.foot-grid-5{grid-template-columns:1fr 1fr}} @media (max-width:480px){.foot-grid-5{grid-template-columns:1fr}} /* ============================== CONTACT FORM ============================== */ .contact-form{max-width:640px;margin:44px auto 0;text-align:left} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:600px){.cf-row{grid-template-columns:1fr}} .cf-field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px} .cf-field label{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.72)} .cf-opt{color:rgba(255,255,255,.45);text-transform:none;letter-spacing:.04em} .cf-field input,.cf-field textarea{width:100%;padding:13px 14px;font:inherit;font-size:15.5px;color:#fff; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-btn); transition:border-color .15s,background .15s} .cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(255,255,255,.4)} .cf-field input:focus-visible,.cf-field textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px; border-color:transparent;background:rgba(255,255,255,.09)} .cf-field textarea{resize:vertical;min-height:120px} .cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .cf-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px} .contact-panel .cf-note{margin:0;font-size:13.5px;max-width:none;text-align:left;color:rgba(255,255,255,.6);line-height:1.45} .cf-note a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px} .contact-panel .cf-status{margin:14px 0 0;font-size:15px;max-width:none;text-align:left;min-height:1.4em;color:var(--accent-2)} .contact-panel .cf-status.err{color:#fca5a5} /* homepage section headings: accent spans use the bright accent green */ body:not(.subpage) h2 .accent{color:var(--accent)} /* compact nav dropdowns (Products / Industries / Company) */ .has-mega.compact{position:relative} .has-mega.compact .mega{left:0;right:auto;top:100%;width:max-content;min-width:230px} .has-mega.compact .mega-in{display:block;padding:6px} .has-mega.compact .mega-side{padding:8px 10px} .has-mega.compact .mega-side a{font-size:14.5px;padding:8px 10px;border-radius:8px} .has-mega.compact .mega-side a:hover{background:var(--surface-2);color:var(--ink-1)} /* hero lede: principal segments highlight when their icon (or the phrase) is hovered */ .hl-seg{transition:color .25s var(--ease);cursor:default} .hl-seg.on{color:var(--accent)} /* ===================== v5 — additive accent treatments (NO gradients) ===================== */ /* #2 hero pixel-cross icons, color-coded per offering */ .hl-i[data-i="0"] rect{fill:var(--accent)} .hl-i[data-i="1"] rect{fill:var(--amber)} .hl-i[data-i="2"] rect{fill:var(--violet)} .hl-i[data-i="3"] rect{fill:var(--cyan)} /* #3 "four ways" rail + panels color-coded (Build green, Consult amber, Invest violet, Hire cyan) */ .way-panel[data-step="0"]{--wa:var(--accent)} .way-panel[data-step="1"]{--wa:var(--amber)} .way-panel[data-step="2"]{--wa:var(--violet)} .way-panel[data-step="3"]{--wa:var(--cyan)} .way-panel{border-left:3px solid var(--wa,var(--accent));padding-left:clamp(18px,2.2vw,34px)} .way-panel h3{display:flex;align-items:center;gap:12px} .way-panel h3::before{content:"";width:11px;height:11px;flex:none;background:var(--wa);border-radius:50%} .way-panel .way-more a{color:var(--wa)} .ways-step[data-step="0"].on,.ways-step[data-step="0"].on .idx{color:var(--accent)} .ways-step[data-step="1"].on,.ways-step[data-step="1"].on .idx{color:var(--amber)} .ways-step[data-step="2"].on,.ways-step[data-step="2"].on .idx{color:var(--violet)} .ways-step[data-step="3"].on,.ways-step[data-step="3"].on .idx{color:var(--cyan)} .ways-step[data-step="1"].on .bar{background:var(--amber)} .ways-step[data-step="2"].on .bar{background:var(--violet)} .ways-step[data-step="3"].on .bar{background:var(--cyan)} /* #7 outcome stat numbers: green / cyan / amber */ .metrics .metric:nth-child(1) .mv{color:var(--chart-1)} .metrics .metric:nth-child(2) .mv{color:var(--cyan)} .metrics .metric:nth-child(3) .mv{color:var(--amber)} /* #8 "No bench" section on the light break background */ #team{background:var(--bg-light);border-top-color:rgba(11,23,17,.14)} #team .frame{border-color:rgba(11,23,17,.10)} #team h2,#team .ct{color:#0b1711} #team h2 .accent{color:#15803d} #team .lede,#team .cd{color:#3c5147} #team .cred{border-color:rgba(11,23,17,.10)} #team .cred:nth-child(1) .cn{background:var(--accent-strong)} #team .cred:nth-child(2) .cn{background:var(--violet)} #team .cred:nth-child(3) .cn{background:var(--amber)} /* dot-matrix treatment (solid discrete dots; hue-shifts by x — NOT a gradient) */ .dotmatrix{display:block;pointer-events:none} .card-dm{position:absolute;right:0;bottom:0;width:120px;height:80px;opacity:.55} .dm-divider{width:100%;height:22px;opacity:.7} /* #6 code section (deep indigo, syntax-highlighted MCP/TS) */ .code-band{background:var(--bg-cool)} .code-band .h2{color:#e6edf3} .code-band .lede{color:#9aa4c0} .editor{margin-top:34px;max-width:860px;margin-inline:auto;background:#070b16;border:1px solid #26305a;border-radius:12px;overflow:hidden} .editor-bar{background:#0c1224;border-bottom:1px solid #26305a;padding:12px 16px;display:flex;align-items:center;gap:8px} .editor-bar .ed-dot{width:11px;height:11px;border-radius:50%;background:#26305a} .editor-file{margin-left:12px;font-family:var(--font-mono);font-size:12.5px;color:#8b949e} .editor-code{margin:0;padding:20px 22px;overflow-x:auto;font-family:var(--font-mono);font-size:13.5px;line-height:1.75;color:#c9d1d9;white-space:pre;tab-size:2} .editor-code .k{color:#ff7b72}.editor-code .fn{color:#d2a8ff}.editor-code .s{color:#a5d6ff} .editor-code .n{color:#79c0ff}.editor-code .v{color:#ffa657}.editor-code .c{color:#8b949e} /* #5 domain-tinted product cards (solid) + dot-matrix corner */ .sp-cards.dcards{background:none;border:0;gap:18px} .sp-cards.dcards .card{border:1px solid var(--border-2);border-radius:12px;position:relative;overflow:hidden} .dcard-commerce{background:#0f2b1f!important;border-color:#1f6f4a!important} .dcard-compliance{background:#17143a!important;border-color:#4c3a9e!important} .dcard-aviation{background:#241a0e!important;border-color:#7a5a1e!important} .card-dm{position:absolute;right:-4px;bottom:-4px;width:120px;height:80px;opacity:.6} /* dot-matrix divider band */ .dm-wrap{padding:20px var(--gutter)} .dm-divider{width:100%;height:20px;display:block} /* #8 refine: cred cards transparent on the light break section */ #team .cred{background:transparent} #team .cred:hover{background:rgba(11,23,17,.05)} #team .cred-list{border-color:rgba(11,23,17,.14)} #team .cd{color:#33463b} /* ===================== v5 — accent treatment, site-wide + icon coordination ===================== */ /* hero: highlighted principal text takes the HOVERED icon's color */ .hl-seg[data-i="0"].on{color:var(--accent)} .hl-seg[data-i="1"].on{color:var(--amber)} .hl-seg[data-i="2"].on{color:var(--violet)} .hl-seg[data-i="3"].on{color:var(--cyan)} /* "Where we go deep" domain icons — different colors */ #domains .card:nth-child(1) .cvis{color:var(--accent)} #domains .card:nth-child(2) .cvis{color:var(--violet)} #domains .card:nth-child(3) .cvis{color:var(--amber)} #domains .card:nth-child(1) .cvis svg *{stroke:var(--accent)} #domains .card:nth-child(2) .cvis svg *{stroke:var(--violet)} #domains .card:nth-child(3) .cvis svg *{stroke:var(--amber)} /* header nav mega-row glyphs — categorical per row */ .mega-rows .mega-row:nth-child(5n+1) .pixmark rect{fill:var(--chart-1)!important} .mega-rows .mega-row:nth-child(5n+2) .pixmark rect{fill:var(--chart-2)!important} .mega-rows .mega-row:nth-child(5n+3) .pixmark rect{fill:var(--chart-3)!important} .mega-rows .mega-row:nth-child(5n+4) .pixmark rect{fill:var(--chart-4)!important} .mega-rows .mega-row:nth-child(5n+5) .pixmark rect{fill:var(--chart-5)!important} /* site-wide: categorical accent bars on card grids (green stays the card) */ .sp-cards:not(.dcards) .card{border-top:3px solid var(--ct,var(--chart-1))} .sp-cards:not(.dcards) .card:nth-child(5n+1){--ct:var(--chart-1)} .sp-cards:not(.dcards) .card:nth-child(5n+2){--ct:var(--chart-2)} .sp-cards:not(.dcards) .card:nth-child(5n+3){--ct:var(--chart-3)} .sp-cards:not(.dcards) .card:nth-child(5n+4){--ct:var(--chart-4)} .sp-cards:not(.dcards) .card:nth-child(5n+5){--ct:var(--chart-5)} /* per-page / domain theme accent (green default) */ .subpage .page-hero h1 .accent{color:var(--page-accent,var(--accent))} .faq summary::after{color:var(--page-accent,var(--accent))} .crumbs a:hover{color:var(--page-accent,var(--accent))} /* code section: keep the tagline on one line */ .code-band .h2{max-width:none} .code-band .sec-head{text-align:center;margin-inline:auto} /* logo spins on hover (header + footer brand) */ .brand .pixmark{transition:transform .6s cubic-bezier(.16,.84,.32,1)} .brand:hover .pixmark,.brand:focus-visible .pixmark{transform:rotate(90deg)} /* hero glyphs: staggered spin on page open */ @keyframes glyphspin{0%{transform:rotate(-90deg)}62%{transform:rotate(10deg)}100%{transform:rotate(0)}} .hl-i.gspin{animation:glyphspin .7s cubic-bezier(.16,.84,.32,1) both} /* v5: link hovers match the cell accent */ .way-panel .way-more a:hover,.way-panel a:hover{color:var(--wa)} #domains .card:nth-child(1){--card-accent:var(--accent)} #domains .card:nth-child(2){--card-accent:var(--violet)} #domains .card:nth-child(3){--card-accent:var(--amber)} #domains .card:hover h3,#domains .card h3 a:hover{color:var(--card-accent)} /* v5: "four ways to ship." takes the active step's accent, wiping bottom->top */ #what h2 .accent{position:relative;display:inline-block;color:var(--active-accent,var(--accent))} #what h2 .accent::after{content:attr(data-text);position:absolute;inset:0;color:var(--wipe-accent,var(--active-accent));clip-path:inset(100% 0 0 0);pointer-events:none} #what h2 .accent.wipe::after{animation:wipeup .55s cubic-bezier(.16,.84,.32,1) forwards} @keyframes wipeup{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}} @media(min-width:1041px){#domains .sec-head .lede{max-width:none;text-wrap:balance}} .foot-grid-4r{grid-template-columns:2.4fr 1fr 1fr 1fr} @media(max-width:760px){.foot-grid-4r{grid-template-columns:1fr 1fr}} @media(max-width:480px){.foot-grid-4r{grid-template-columns:1fr}} .sec-head-wide{max-width:84ch} .sec-head-wide .lede{max-width:84ch} .sec-head-wide + .cards-2,.sec-head-wide + .cards-3{margin-top:clamp(28px,3.6vh,52px)} .sec-head .h2{max-width:none;text-wrap:balance} /* full-cell click target for hover-highlight cards that contain a link (stretched-link) */ .card{position:relative} .card h3 a::after,.card .card-link::after{content:"";position:absolute;inset:0;z-index:1} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}