/* ============================================================ NxtAtlas — product page Loaded after css/tokens.css. Nothing here invents a colour or a typeface: every value resolves back to a token. Sections: 0 utilities · 1 chrome · 2 hero · 3 instrument 4 capabilities · 5 reach · 6 figures · 7 close 8 footer · 9 narrow screens ============================================================ */ /* ---- 0. utilities ---------------------------------------- */ /* skip link — first tab stop on the page */ .skip{ position:absolute; left:-9999px; top:0; } .skip:focus{ left:calc(var(--edge) + 14px); top:calc(var(--edge) + 14px); z-index:30; background:var(--ink-card); border:1px solid var(--brass); color:var(--paper); padding:10px 16px; border-radius:2px; text-decoration:none; } /* the engraved frame stays above the sticky header */ .plate{ z-index:20; } /* The no-js fallback tokens.css promises: motion.js stamps .js on at boot, so if it never runs — blocked, 404, scripting off — nothing stays stuck at opacity 0. */ html:not(.js) .reveal{ opacity:1; transform:none; } /* motion.js appends .cursor-glow to — this is its only styling */ .cursor-glow{ position:fixed; top:0; left:0; width:520px; height:520px; border-radius:50%; z-index:2; pointer-events:none; will-change:transform; background:radial-gradient(circle at 50% 50%, var(--brass-faint), transparent 62%); } /* italic-brass emphasis inside display type */ h1 em, h2 em{ font-style:italic; color:var(--brass); } /* a
that only exists on wide screens */ .h-br{ display:none; } /* button labels never break across two lines */ .btn{ white-space:nowrap; } .t-narrow{ display:none; } /* ---- 1. chrome: fixed meridian + sticky header ------------ */ /* the meridian: a hairline running the height of the viewport, with a bearing needle that turns as the page moves */ .rail{ position:fixed; top:0; bottom:0; left:calc(var(--edge) + 13px); width:1px; z-index:4; pointer-events:none; display:none; background:linear-gradient(180deg, transparent, var(--line) 10%, var(--line) 90%, transparent); } .rail-lbl{ position:absolute; top:24vh; left:7px; writing-mode:vertical-rl; font-size:9px; letter-spacing:.3em; white-space:nowrap; } .rail-needle{ position:absolute; top:50%; left:50%; width:48px; height:48px; translate:-50% -50%; } .rail-needle svg{ width:100%; height:100%; display:block; transform-box:view-box; transform-origin:50% 50%; transform:rotate(var(--scroll-rot, 0deg)); } @media (min-width:1180px){ .rail{ display:block; } } .hdr{ position:sticky; top:0; z-index:5; padding-block:clamp(16px, 2.6vw, 28px); transition:padding-block var(--fast) var(--ease), background-color var(--fast) var(--ease); } .hdr::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); opacity:0; transition:opacity var(--fast) var(--ease); } .hdr.is-stuck{ padding-block:10px; background-color:color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); } .hdr.is-stuck::after{ opacity:1; } /* same full-bleed header as the home page */ .hdr > .hdr-in, .hdr-in{ max-width:none; padding-inline:clamp(20px, 3.2vw, 60px); display:flex; align-items:center; justify-content:space-between; gap:clamp(12px,3vw,40px); } .hdr-mark{ display:inline-flex; align-items:baseline; gap:9px; text-decoration:none; transition:opacity var(--fast) var(--ease); } .hdr-mark:hover{ opacity:.72; } .hdr-mark .wm{ font-size:12px; } .hdr-tag{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); border:1px solid var(--brass-soft); border-radius:2px; padding:2px 6px 1px; line-height:1.4; } .hdr-mid{ margin-inline:auto; } .hdr-act{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); } .hdr-act .btn{ font-size:10.5px; letter-spacing:.18em; } .hdr-cta{ padding:10px 18px; } /* ---- 2. hero --------------------------------------------- */ .hero{ padding-block:clamp(46px, 9vh, 108px) clamp(56px, 10vh, 120px); } .hero-in{ position:relative; } .hero-copy{ position:relative; z-index:2; max-width:64%; } .hero h1{ margin:20px 0 0; } .hero-status{ display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; } .hero-status i{ display:block; width:26px; height:1px; background:var(--line-strong); flex:none; } .hero-lede{ margin-top:20px; } .hero-cta{ display:flex; align-items:center; gap:clamp(16px,3vw,34px); margin-top:38px; flex-wrap:wrap; } .hero-note{ margin-top:18px; max-width:38ch; font-size:11.5px; color:var(--paper-dim); line-height:1.7; } .hero-meta{ list-style:none; margin:clamp(40px,7vh,72px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; position:relative; z-index:2; } .hero-meta li{ display:flex; align-items:center; gap:10px; } .hero-meta li::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--brass-soft); flex:none; } .hero-rule{ margin-top:22px; } /* ---- 3. the instrument (shared SVG vocabulary) ------------ */ .a-ring{ fill:none; stroke:var(--paper); stroke-width:.6; opacity:.40; } .a-ring.a-brass{ stroke:var(--brass); opacity:.78; stroke-width:.8; } .a-ring.a-faint{ opacity:.20; } .a-tick{ fill:none; stroke:var(--paper); opacity:.34; } .a-tick.a-brass{ stroke:var(--brass); opacity:.6; } .a-dot{ fill:var(--brass); stroke:none; } .a-core{ fill:var(--paper); stroke:none; opacity:.6; } .a-needle{ fill:var(--brass); stroke:none; opacity:.9; } .a-needle-s{ fill:none; stroke:var(--brass-soft); stroke-width:.7; } .a-g{ transform-box:view-box; transform-origin:50% 50%; } .a-scroll{ transform:rotate(var(--scroll-rot, 0deg)); } .a-scroll-rev{ transform:rotate(calc(var(--scroll-rot, 0deg) * -0.55)); } .a-spin-a{ animation:aSpin 58s linear infinite; } .a-spin-b{ animation:aSpin 104s linear infinite reverse; } .a-spin-c{ animation:aSpin 34s linear infinite; } .a-orbit{ animation:aSpin 22s linear infinite; } @keyframes aSpin{ to{ transform:rotate(360deg); } } .hero-instr{ position:absolute; z-index:1; right:-7%; top:50%; translate:0 -50%; width:clamp(240px, 40vw, 500px); aspect-ratio:1; pointer-events:none; opacity:0; animation:instrIn 1.9s var(--ease) .45s forwards; } .hero-instr svg{ width:100%; height:100%; display:block; overflow:visible; } @keyframes instrIn{ to{ opacity:.72; } } /* ---- 4. capabilities ------------------------------------- */ .caps{ padding-bottom:clamp(48px, 8vh, 96px); } .caps-head{ max-width:62ch; } .caps-head h2{ margin:22px 0 0; } .caps-head .lede{ margin-top:24px; } .caps-body{ position:relative; margin-top:clamp(56px, 9vh, 104px); } .stratum{ position:relative; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(18px, 4vw, 60px); border-top:1px solid var(--line); padding-block:clamp(24px,3.4vw,40px) clamp(40px,6vw,78px); } .stratum:last-child{ border-bottom:1px solid var(--line); } .stratum-mark{ position:relative; } .stratum-num{ display:block; font-family:var(--serif); color:var(--brass); font-size:clamp(2.4rem, 5.6vw, 4.2rem); line-height:.7; letter-spacing:-.03em; opacity:.55; margin-top:-.34em; } .stratum-mark .lbl{ display:block; margin-top:18px; } .stratum-body{ position:relative; z-index:2; } .stratum-body h3{ margin-bottom:clamp(18px,2.6vw,30px); max-width:22ch; } .caps-list{ margin:0; } .caps-item{ position:relative; border-top:1px solid var(--line); padding-block:clamp(15px, 2.2vw, 22px); } .caps-item::after{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--brass); transition:width .6s var(--ease); } .caps-item:hover::after{ width:100%; } .caps-item dt{ display:flex; align-items:baseline; gap:12px; font-family:var(--serif); letter-spacing:-.01em; line-height:1.15; font-size:clamp(1.12rem, 2.1vw, 1.45rem); transition:color var(--fast) var(--ease); } .caps-item:hover dt{ color:var(--brass-lit); } .caps-item dd{ margin:9px 0 0; max-width:44ch; color:var(--paper-soft); font-size:12.5px; line-height:1.72; } .caps-tick{ width:6px; height:6px; flex:none; rotate:45deg; translate:0 -3px; border:1px solid var(--brass-soft); transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .caps-item:hover .caps-tick{ background-color:var(--brass); border-color:var(--brass); } /* stratum I reads as a ledger: term left, definition right */ .stratum-1 .caps-item{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(10px, 2.6vw, 44px); align-items:start; } .stratum-1 .caps-item dd{ margin-top:0; } /* strata II & III break into two engraved columns, and shift off-axis */ .stratum-2 .stratum-body{ margin-left:6%; } .stratum-3 .stratum-body{ margin-right:7%; } /* the dial that bleeds past the right edge, behind stratum II */ .caps-dial{ position:absolute; z-index:0; right:-27%; top:42%; translate:0 -50%; width:clamp(260px, 40vw, 480px); aspect-ratio:1; pointer-events:none; opacity:.22; } .caps-dial svg{ width:100%; height:100%; display:block; } /* ---- 5. reach: four ways in ------------------------------- */ .reach-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,5vw,64px); align-items:end; } .reach-head h2{ margin-top:22px; } .reach-bar{ margin-top:clamp(44px,7vh,84px); } .stations{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); } .station{ position:relative; padding:clamp(26px,3.4vw,38px) clamp(14px,2vw,26px) 0; border-left:1px solid var(--line); } .station:first-child{ padding-left:0; border-left:0; } .station::before{ content:""; position:absolute; left:0; top:0; width:1px; height:0; background:var(--brass-soft); transition:height .6s var(--ease); } .station:hover::before{ height:100%; } .station:first-child::before{ display:none; } .station-glyph{ display:block; width:38px; height:38px; } .station-glyph svg{ width:100%; height:100%; display:block; stroke-linejoin:round; stroke-linecap:round; } .station-glyph path, .station-glyph rect, .station-glyph circle, .station-glyph line{ fill:none; stroke:var(--paper-dim); stroke-width:.9; transition:stroke var(--fast) var(--ease); } .station:hover .station-glyph :is(path,rect,circle,line){ stroke:var(--brass); } .station h3{ margin:22px 0 0; font-size:clamp(1.15rem,2.2vw,1.5rem); } .station .lbl{ display:block; margin-top:16px; } .station p{ margin-top:10px; color:var(--paper-soft); font-size:12.5px; line-height:1.7; max-width:26ch; } /* ---- 6. figures ------------------------------------------ */ .figures{ position:relative; } .fig-dial{ position:absolute; z-index:0; left:50%; top:50%; translate:-50% -50%; width:clamp(340px, 62vw, 640px); aspect-ratio:1; pointer-events:none; opacity:.16; } .fig-dial svg{ width:100%; height:100%; display:block; } .figures .shell{ position:relative; z-index:2; } .fig-row{ list-style:none; margin:clamp(30px,5vh,54px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .fig{ padding:clamp(24px,3.4vw,40px) clamp(12px,2vw,24px); border-left:1px solid var(--line); } .fig:first-child{ border-left:0; padding-left:0; } .fig-num{ display:block; font-family:var(--serif); font-weight:400; letter-spacing:-.03em; font-size:clamp(2.7rem, 7vw, 4.4rem); line-height:.9; } .fig-num::after{ content:""; display:block; width:24px; height:1px; background:var(--brass-soft); margin-top:16px; } .fig .lbl{ display:block; margin-top:16px; } .fig p{ margin-top:9px; font-size:11.5px; line-height:1.65; color:var(--paper-dim); max-width:22ch; } /* ---- 7. closing call ------------------------------------- */ .close{ position:relative; overflow:hidden; } /* the shell keeps the page's left margin; the copy simply stops short of the sphere instead of being centred away from it */ .close-in{ position:relative; z-index:2; } .close-in h2{ margin:22px 0 0; max-width:19ch; } .close-in .lede{ margin-top:24px; max-width:44ch; } .close-cta{ display:flex; align-items:center; gap:clamp(16px,3vw,34px); margin-top:38px; flex-wrap:wrap; } .close-foot{ display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap; } /* the brass sphere carries the wordmark, so it is never cropped */ .close-orb{ position:absolute; z-index:0; top:50%; translate:0 -50%; right:calc(var(--edge) + 10px); width:clamp(260px, 33vw, 420px); aspect-ratio:1; pointer-events:none; } .close-orb img{ position:absolute; inset:9%; width:82%; height:82%; object-fit:contain; opacity:.92; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 50%, transparent 72%); mask-image:radial-gradient(circle at 50% 50%, #000 50%, transparent 72%); } .orb-ring{ position:absolute; inset:0; } .orb-ring svg{ width:100%; height:100%; display:block; transform-box:view-box; transform-origin:50% 50%; transform:rotate(var(--scroll-rot, 0deg)); } /* ---- 8. footer ------------------------------------------- */ .ftr{ padding-block:0 calc(var(--edge) + 22px); } .ftr-in{ padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px 40px; } .ftr-mark{ text-decoration:none; } .ftr-mark .wm{ font-size:clamp(1.5rem, 3.4vw, 2rem); letter-spacing:-.02em; } .ftr-nav{ display:flex; flex-wrap:wrap; gap:12px 28px; } .ftr-nav a{ font-size:12px; color:var(--paper-soft); } .ftr-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; } /* ---- 9. narrow screens ----------------------------------- */ @media (min-width:820px){ .h-br{ display:inline; } /* strata II and III break into two engraved columns */ .caps-list-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(24px, 4vw, 60px); } } @media (max-width:1000px){ .caps-dial{ right:-32%; opacity:.18; } .hero-copy{ max-width:100%; } .hero-instr{ right:-24%; top:auto; bottom:-6%; translate:0 0; opacity:0; width:clamp(220px, 54vw, 400px); animation-name:instrInSoft; } @keyframes instrInSoft{ to{ opacity:.34; } } .close-in{ max-width:100%; } /* the sphere stops hiding behind the copy and sits above it instead */ .close-orb{ position:relative; right:auto; top:auto; translate:0 0; width:min(300px, 62vw); margin:0 auto clamp(20px, 5vw, 40px); } } @media (max-width:860px){ .hdr-mid{ display:none; } .reach-head{ grid-template-columns:minmax(0,1fr); align-items:start; } .stations{ grid-template-columns:repeat(2, minmax(0,1fr)); } .station{ padding-inline:clamp(14px,3vw,24px); } .station:nth-child(odd){ padding-left:0; border-left:0; } .station:nth-child(odd)::before{ display:none; } .station:nth-child(n+3){ margin-top:clamp(26px,4vw,38px); border-top:1px solid var(--line); } .fig-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } .fig:nth-child(odd){ border-left:0; padding-left:0; } .fig:nth-child(n+3){ border-top:1px solid var(--line); } } @media (max-width:760px){ .stratum{ grid-template-columns:minmax(0,1fr); gap:24px; } .stratum-mark{ display:flex; align-items:baseline; gap:18px; } .stratum-num{ margin-top:0; line-height:.8; } .stratum-mark .lbl{ margin-top:0; } .stratum-1 .caps-item{ grid-template-columns:minmax(0,1fr); gap:0; } .stratum-1 .caps-item dd{ margin-top:9px; } .stratum-2 .stratum-body{ margin-left:0; } .stratum-3 .stratum-body{ margin-right:0; } .caps-dial{ right:-34%; opacity:.2; } } @media (max-width:560px){ .hdr-act .btn-ghost{ display:none; } .hero-status i{ display:none; } .hero h1{ margin-top:16px; } .stations{ grid-template-columns:minmax(0,1fr); } .station{ padding-inline:0; border-left:0; margin-top:0; } .station + .station{ border-top:1px solid var(--line); margin-top:clamp(22px,5vw,32px); } .station::before{ display:none; } .station p{ max-width:40ch; } .fig-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } .fig{ padding-inline:0 12px; } .fig:nth-child(even){ padding-left:16px; } .ftr-in{ flex-direction:column; align-items:flex-start; } } @media (max-width:480px){ /* the header CTA shortens rather than wrapping */ .t-wide{ display:none; } .t-narrow{ display:inline; } } @media (max-width:400px){ .hdr-cta{ padding:9px 13px; font-size:10px; letter-spacing:.14em; } .hero-meta{ gap:8px 18px; } .fig-num{ font-size:2.5rem; } } /* motion.js is progressive: without it the reveals must not stay hidden */ @media (prefers-reduced-motion:reduce){ .hero-instr{ opacity:.4; animation:none; } .caps-item::after, .station::before{ transition:none; } } /* the tick stripes are retired sitewide */ .ticks,.rail-ticks{ display:none !important; }