/* Atlas AI site system for every page but the homepage: the reference build's _pages.css, _themes.css, _v2.css and _system.css, concatenated in the order the sub-pages load them (atlas-website/site/*.html). Pages import it after site.base.css and before their own CSS, so page-.css still wins, as it does in the reference. Ported as is, except: - every selector is scoped to .atlas-page; the reference's body classes become classes on the page root, so `.page-foresight .x` reads `.atlas-page.atlas-foresight .x` (one class more everywhere, so the cascade is unchanged); - :root tokens are left out (site-settings/head.html declares them); - nav, footer, newsletter, skip-link and prototype-banner rules are left out (their own components), and so are the homepage-only rules (Homepage.system.css has them); - breakpoints are Webflow's: 900 px is 991 px, 901 px is 992 px. */ /* ════ _pages.css ════ */ /* ═══════════════════════════════════════════════════════════════ Atlas AI — sub-page components Additive to _shared.css (extracted verbatim from the shipped homepage). Uses only existing tokens — no new colours, no new type. Everything here is a pattern the homepage implies but does not yet instantiate. ═══════════════════════════════════════════════════════════════ */ /* ── Page hero — quieter than the homepage hero ──────────────── */ .atlas-page .page-hero { padding: 132px 0 72px; border-bottom: 1px solid var(--ink-08); } .atlas-page .page-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.018em; margin: 18px 0 0; max-width: 21ch; } .atlas-page .page-hero .standfirst { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--ink-70); max-width: 54ch; margin: 26px 0 0; } /* ── Section furniture ───────────────────────────────────────── */ .atlas-page .sec { padding: 92px 0; border-bottom: 1px solid var(--ink-08); } .atlas-page .sec.dark { background: var(--ink); color: var(--paper-86); border-bottom: none; } .atlas-page .sec.alt { background: var(--paper-alt); } .atlas-page .sec h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.12; letter-spacing: -0.012em; margin: 18px 0 0; max-width: 24ch; } .atlas-page .sec.dark h2 { color: var(--paper); } .atlas-page .sec .lede { font-family: var(--serif); font-size: 19px; line-height: 1.62; color: var(--ink-70); max-width: 62ch; margin: 22px 0 0; } .atlas-page .sec.dark .lede { color: var(--paper-74); } /* ── Pulled line — serif italic, ochre. Never restates; hands off ─ */ .atlas-page .pulled { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.34; color: var(--ochre); max-width: 26ch; margin: 44px 0 0; padding-left: 22px; border-left: 2px solid var(--ochre-soft); } .atlas-page .sec.dark .pulled { color: var(--ochre-light); border-left-color: rgba(217,185,138,0.28); } /* ── 3-up units ──────────────────────────────────────────────── */ .atlas-page .units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 52px; } .atlas-page .units.two { grid-template-columns: repeat(2, 1fr); } .atlas-page .unit { border-top: 1px solid var(--ink-20); padding-top: 18px; } .atlas-page .sec.dark .unit { border-top-color: var(--paper-22); } .atlas-page .unit .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ochre); } .atlas-page .unit h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.26; margin: 12px 0 0; } .atlas-page .sec.dark .unit h3{ color: var(--paper); } .atlas-page .unit p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 10px 0 0; } .atlas-page .sec.dark .unit p { color: var(--paper-74); } /* ── label / value / gloss — gives figures display weight ────── */ .atlas-page .lvg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 52px; } .atlas-page .lvg .item { border-top: 1px solid var(--ink-20); padding-top: 18px; } .atlas-page .lvg .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-50); } .atlas-page .lvg .val { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); line-height: 1; margin: 12px 0 0; letter-spacing: -0.015em; } .atlas-page .lvg .gloss { font-size: 14px; line-height: 1.6; color: var(--ink-70); margin: 12px 0 0; } /* ── Evidence strip — mono, foot of a section. Never a headline ─ */ .atlas-page .evidence { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--ink-14); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-50); } .atlas-page .evidence b { color: var(--ink); font-weight: 500; } .atlas-page .evidence .fine { text-transform: none; letter-spacing: 0; color: var(--ink-50); font-family: var(--sans); } /* ── Aperture band ───────────────────────────────────────────── */ .atlas-page .band { background: var(--paper-deep); padding: 40px 44px; margin-top: 56px; border-left: 3px solid var(--ochre); } .atlas-page .band .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ochre); } .atlas-page .band p { font-family: var(--serif); font-size: 18px; line-height: 1.58; margin: 14px 0 0; max-width: 66ch; } /* ── Engagement steps — sequence, never a flywheel or funnel ──── */ .atlas-page .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; border-top: 1px solid var(--ink-20); } .atlas-page .step { padding: 26px 30px 0 0; border-right: 1px solid var(--ink-14); } .atlas-page .step:last-child { border-right: none; } .atlas-page .step .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ochre); } .atlas-page .step .dur { font-family: var(--serif); font-size: 26px; margin: 10px 0 0; } .atlas-page .step p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 12px 0 0; } .atlas-page .bring { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink-14); } .atlas-page .bring .h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-50); } .atlas-page .bring p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 10px 0 0; } /* ── Decision rows — every row names a decision, never a capability ─ */ .atlas-page .rows { margin-top: 48px; border-top: 1px solid var(--ink-20); } .atlas-page .row { display: grid; grid-template-columns: 22ch 13ch 1fr; gap: 28px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--ink-08); } .atlas-page .row .what { font-family: var(--serif); font-size: 20px; line-height: 1.24; } .atlas-page .row .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ochre); padding-top: 6px; } .atlas-page .row p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 0; } /* ── TO SUPPLY / CONFIRM slot — the missing fact IS the deliverable ─ */ .atlas-page .slot { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ochre); background: var(--ochre-soft); border: 1px dashed var(--ochre); padding: 5px 10px; border-radius: 2px; } .atlas-page .slot.block { display: block; margin-top: 16px; max-width: 70ch; line-height: 1.7; } .atlas-page .sec.dark .slot { color: var(--ochre-light); border-color: var(--ochre-light); background: rgba(217,185,138,0.10); } /* ── Page close ──────────────────────────────────────────────── */ .atlas-page .page-close { padding: 104px 0; background: var(--paper-alt); } .atlas-page .page-close h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; max-width: 22ch; margin: 0; } @media (max-width: 991px) { .atlas-page .units, .atlas-page .units.two, .atlas-page .lvg, .atlas-page .steps, .atlas-page .bring { grid-template-columns: 1fr; gap: 26px; } .atlas-page .step { border-right: none; border-bottom: 1px solid var(--ink-14); padding: 22px 0; } .atlas-page .row { grid-template-columns: 1fr; gap: 10px; } .atlas-page .sec { padding: 64px 0; } .atlas-page .page-hero { padding: 104px 0 56px; } } /* ── Capability list — Foresight's five categories ───────────── */ .atlas-page .caps { margin-top: 52px; border-top: 1px solid var(--ink-20); } .atlas-page .cap { display: grid; grid-template-columns: 26ch 1fr; gap: 34px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--ink-08); } .atlas-page .cap .name { font-family: var(--serif); font-size: 21px; line-height: 1.24; } .atlas-page .cap .name .k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ochre); margin-bottom: 9px; } .atlas-page .cap p { font-size: 15.5px; line-height: 1.64; color: var(--ink-70); margin: 0; } @media (max-width: 991px) { .atlas-page .cap { grid-template-columns: 1fr; gap: 10px; } } /* ── Contact form ────────────────────────────────────────────── */ .atlas-page .form-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; margin-top: 52px; } .atlas-page .field { margin-bottom: 24px; } .atlas-page .field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-50); margin-bottom: 8px; } .atlas-page .field input, .atlas-page .field textarea { width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-20); border-radius: 2px; padding: 13px 14px; } .atlas-page .field textarea { min-height: 116px; resize: vertical; font-family: var(--serif); line-height: 1.55; } .atlas-page .field input:focus, .atlas-page .field textarea:focus { outline: none; border-color: var(--ochre); } .atlas-page .field .help { font-size: 13px; color: var(--ink-50); margin: 7px 0 0; } .atlas-page .check { display: flex; gap: 11px; align-items: flex-start; margin: 26px 0 0; } .atlas-page .check input { margin-top: 3px; } .atlas-page .check span { font-size: 14px; line-height: 1.55; color: var(--ink-70); } .atlas-page .privacy-note { font-size: 13px; line-height: 1.6; color: var(--ink-50); margin-top: 18px; max-width: 52ch; } .atlas-page .aside-block { border-top: 1px solid var(--ink-20); padding-top: 18px; margin-bottom: 34px; } .atlas-page .aside-block .h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-50); } .atlas-page .aside-block p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 10px 0 0; } .atlas-page .aside-block a { color: var(--ochre); } @media (max-width: 991px) { .atlas-page .form-grid { grid-template-columns: 1fr; gap: 44px; } } /* ── Chooser — the Pulse/Foresight disambiguator, identical on both ─── */ .atlas-page .chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 46px; border-top: 1px solid var(--ink-20); } .atlas-page .chooser > div { padding: 22px 30px 22px 0; border-right: 1px solid var(--ink-14); } .atlas-page .chooser > div:last-child { border-right: none; padding-left: 30px; } .atlas-page .chooser .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ochre); } .atlas-page .chooser p { font-size: 15.5px; line-height: 1.62; color: var(--ink-70); margin: 10px 0 0; } .atlas-page .chooser a { color: var(--ink); } .atlas-page.atlas-foresight .chooser { border-top-color: var(--paper-22); } .atlas-page.atlas-foresight .chooser > div { border-right-color: var(--paper-10); } .atlas-page.atlas-foresight .chooser .k { color: var(--ochre-light); } .atlas-page.atlas-foresight .chooser p { color: var(--paper-74); } .atlas-page.atlas-foresight .chooser a { color: var(--paper); } .atlas-page.atlas-foresight .sec.alt .chooser { border-top-color: var(--ink-20); } .atlas-page.atlas-foresight .sec.alt .chooser > div { border-right-color: var(--ink-14); } .atlas-page.atlas-foresight .sec.alt .chooser .k { color: var(--ochre); } .atlas-page.atlas-foresight .sec.alt .chooser p { color: var(--ink-70); } @media (max-width: 991px) { .atlas-page .chooser { grid-template-columns: 1fr; } .atlas-page .chooser > div, .atlas-page .chooser > div:last-child { border-right: none; padding: 20px 0; border-bottom: 1px solid var(--ink-14); } } /* ════ _themes.css ════ */ /* ═══════════════════════════════════════════════════════════════ Per-page themes — one family, four characters The problem: four sub-pages on identical paper ground read as one long monotone page. The wrong fix is making them all dark — that spends the system's only punctuation device and turns the homepage into an outlier. The fix is three axes of variation inside the locked palette: 1 GROUND WEIGHT the palette is already a ladder — paper → paper-alt → paper-deep → ink. Each page sits at a different rung and alternates on a different rhythm. 2 ONE DARK PAGE /foresight only. This is INHERITED, not invented: the homepage already renders "what it changes" on ink, and that beat now lives on Foresight. Dark stays meaningful because it is spent once. 3 STRUCTURE each page gets its own compositional signature — see the per-page notes below. NOT varied: the accent hue. Ochre is the only accent in the brand system. A second hue would buy variety by breaking the thing that makes these read as one company. ═══════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────── PULSE — "the instrument" Lightest page. Mono-forward, ruled, measured. Alternates paper / paper-alt on a tight rhythm so it reads like a calibrated device rather than an essay. ─────────────────────────────────────────────────────────────── */ .atlas-page.atlas-pulse .evidence { border-top-width: 2px; border-top-color: var(--ink-30); } .atlas-page.atlas-pulse .lvg .item { border-top-width: 2px; border-top-color: var(--ink); } .atlas-page.atlas-pulse .lvg .val { font-family: var(--mono); font-size: clamp(24px,2.6vw,32px); letter-spacing: -0.01em; } .atlas-page.atlas-pulse .unit { border-top-width: 2px; } .atlas-page.atlas-pulse .sec h2 { max-width: 21ch; } /* ─────────────────────────────────────────────────────────────── COMPANY — "the essay" Warmest and widest. paper-alt base, most air, longest measure, pulled lines doing structural work. One dark section only (A company of scientists) as punctuation. ─────────────────────────────────────────────────────────────── */ .atlas-page.atlas-company { background: var(--paper-alt); } .atlas-page.atlas-company .page-hero { background: var(--paper-alt); } .atlas-page.atlas-company .sec { background: var(--paper-alt); } .atlas-page.atlas-company .sec.alt { background: var(--paper); } .atlas-page.atlas-company .sec.dark { background: var(--ink); } .atlas-page.atlas-company .page-close { background: var(--paper-deep); } .atlas-page.atlas-company .sec h2, .atlas-page.atlas-company .page-hero h1 { max-width: 24ch; } .atlas-page.atlas-company .lede { font-size: 20px; max-width: 58ch; } .atlas-page.atlas-company .pulled { font-size: clamp(24px,2.7vw,34px); max-width: 24ch; } /* ─────────────────────────────────────────────────────────────── CONTACT — "the quiet room" Heaviest light ground, least content, most air. Distinct by emptiness rather than by colour. Deliberately NOT dark — dark is spent once, on Foresight. ─────────────────────────────────────────────────────────────── */ .atlas-page.atlas-contact { background: var(--paper-deep); } .atlas-page.atlas-contact .page-hero, .atlas-page.atlas-contact .sec { background: var(--paper-deep); } .atlas-page.atlas-contact .field input, .atlas-page.atlas-contact .field textarea { background: var(--paper); border-color: var(--ink-30); } .atlas-page.atlas-contact .page-hero { border-bottom: none; } .atlas-page.atlas-contact .sec { border-bottom: none; } /* ═══════════════════════════════════════════════════════════════ FORESIGHT — "the dark room" The one dark page. Inverts the homepage's device: where the homepage is paper with a dark inset, this is ink with PAPER insets. Same grammar, reversed. ═══════════════════════════════════════════════════════════════ */ .atlas-page.atlas-foresight { background: var(--ink); color: var(--paper-86); } /* the page's own CTAs were ink on the ink ground (1.0:1): invert them like the nav button */ .atlas-page.atlas-foresight .close-cta { background: var(--paper); color: var(--ink); } .atlas-page.atlas-foresight .close-cta:hover { background: var(--ochre-light); } /* hero */ .atlas-page.atlas-foresight .page-hero { background: var(--ink); border-bottom-color: var(--paper-22); } .atlas-page.atlas-foresight .page-hero h1 { color: var(--paper); } .atlas-page.atlas-foresight .page-hero .standfirst { color: var(--paper-74); } /* eyebrow */ .atlas-page.atlas-foresight .eyebrow .label { color: var(--paper-55); } .atlas-page.atlas-foresight .eyebrow .tick { background: var(--ochre-light); } /* sections — ink default, PAPER inset replaces the alt tone */ .atlas-page.atlas-foresight .sec { background: var(--ink); border-bottom-color: var(--paper-10); } .atlas-page.atlas-foresight .sec h2 { color: var(--paper); } .atlas-page.atlas-foresight .sec .lede { color: var(--paper-74); } .atlas-page.atlas-foresight .sec .pulled { color: var(--ochre-light); border-left-color: rgba(217,185,138,0.30); } .atlas-page.atlas-foresight .sec.alt { background: var(--paper); color: var(--ink); } .atlas-page.atlas-foresight .sec.alt h2, .atlas-page.atlas-foresight .sec.alt .unit h3, .atlas-page.atlas-foresight .sec.alt .cap .name, .atlas-page.atlas-foresight .sec.alt .row .what, .atlas-page.atlas-foresight .sec.alt .step .dur, .atlas-page.atlas-foresight .sec.alt .band p { color: var(--ink); } .atlas-page.atlas-foresight .sec.alt .lede, .atlas-page.atlas-foresight .sec.alt .unit p, .atlas-page.atlas-foresight .sec.alt .cap p, .atlas-page.atlas-foresight .sec.alt .row p, .atlas-page.atlas-foresight .sec.alt .step p, .atlas-page.atlas-foresight .sec.alt .bring p { color: var(--ink-70); } .atlas-page.atlas-foresight .sec.alt .eyebrow .label { color: var(--ink-50); } .atlas-page.atlas-foresight .sec.alt .eyebrow .tick { background: var(--ochre); } .atlas-page.atlas-foresight .sec.alt .unit, .atlas-page.atlas-foresight .sec.alt .cap, .atlas-page.atlas-foresight .sec.alt .row, .atlas-page.atlas-foresight .sec.alt .rows, .atlas-page.atlas-foresight .sec.alt .caps, .atlas-page.atlas-foresight .sec.alt .steps { border-color: var(--ink-20); } .atlas-page.atlas-foresight .sec.alt .step { border-right-color: var(--ink-14); } .atlas-page.atlas-foresight .sec.alt .bring { border-top-color: var(--ink-14); } .atlas-page.atlas-foresight .sec.alt .cap .name .k, .atlas-page.atlas-foresight .sec.alt .unit .n, .atlas-page.atlas-foresight .sec.alt .step .n, .atlas-page.atlas-foresight .sec.alt .row .who { color: var(--ochre); } /* components on ink */ .atlas-page.atlas-foresight .unit, .atlas-page.atlas-foresight .caps, .atlas-page.atlas-foresight .rows, .atlas-page.atlas-foresight .steps { border-color: var(--paper-22); } .atlas-page.atlas-foresight .unit h3, .atlas-page.atlas-foresight .cap .name, .atlas-page.atlas-foresight .row .what, .atlas-page.atlas-foresight .step .dur { color: var(--paper); } .atlas-page.atlas-foresight .unit p, .atlas-page.atlas-foresight .cap p, .atlas-page.atlas-foresight .row p, .atlas-page.atlas-foresight .step p, .atlas-page.atlas-foresight .bring p { color: var(--paper-74); } .atlas-page.atlas-foresight .cap, .atlas-page.atlas-foresight .row { border-bottom-color: var(--paper-10); } .atlas-page.atlas-foresight .step { border-right-color: var(--paper-10); } .atlas-page.atlas-foresight .bring { border-top-color: var(--paper-10); } .atlas-page.atlas-foresight .unit .n, .atlas-page.atlas-foresight .cap .name .k, .atlas-page.atlas-foresight .step .n, .atlas-page.atlas-foresight .row .who, .atlas-page.atlas-foresight .bring .h { color: var(--ochre-light); } /* Aperture band on ink — hairline rather than fill */ .atlas-page.atlas-foresight .band { background: rgba(245,239,229,0.05); border-left-color: var(--ochre-light); } .atlas-page.atlas-foresight .band .tag { color: var(--ochre-light); } .atlas-page.atlas-foresight .band p { color: var(--paper-86); } /* slots + close */ .atlas-page.atlas-foresight .slot { color: var(--ochre-light); border-color: var(--ochre-light); background: rgba(217,185,138,0.10); } .atlas-page.atlas-foresight .page-close { background: var(--ink); border-top: 1px solid var(--paper-22); } .atlas-page.atlas-foresight .page-close h2 { color: var(--paper); } /* Contact is a short page — the default hero/section stack leaves a void between the standfirst and the form. Close it up. */ .atlas-page.atlas-contact .page-hero { padding-bottom: 40px; } .atlas-page.atlas-contact .sec { padding-top: 36px; } /* ════ _v2.css ════ */ /* ═══════════════════════════════════════════════════════════════ v2 components — structural variety + product-tangible figures Fixing a real monotony problem: v1 rendered almost every section as three horizontal units. These give the pages other shapes — asymmetric splits, stacked profiles, framed figures, compact advantage rows — so structure changes as the reader scrolls. ═══════════════════════════════════════════════════════════════ */ /* ── Asymmetric split: argument left, figure right ───────────── */ .atlas-page .split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; } .atlas-page .split.narrow-fig { grid-template-columns: 1.1fr 0.9fr; } .atlas-page .split .fig { min-width: 0; } /* ── Framed figure — product assets read as artefacts, not decoration ─ */ .atlas-page .frame { border: 1px solid var(--ink-20); background: var(--paper); padding: 0; overflow: hidden; } .atlas-page .frame svg { display: block; width: 100%; height: auto; } /* real-output figure: image with an annotation layer drawn over it */ .atlas-page .map-fig { position: relative; } .atlas-page .map-fig img { display: block; width: 100%; height: auto; } .atlas-page .map-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; } .atlas-page .frame .cap { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; border-top: 1px solid var(--ink-14); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-50); } .atlas-page.atlas-foresight .frame { border-color: var(--paper-22); background: rgba(245,239,229,0.04); } .atlas-page.atlas-foresight .frame .cap { border-top-color: var(--paper-10); color: var(--paper-55); } .atlas-page.atlas-foresight .sec.alt .frame { border-color: var(--ink-20); background: var(--paper); } .atlas-page.atlas-foresight .sec.alt .frame .cap{ border-top-color: var(--ink-14); color: var(--ink-50); } /* ── Legend for product figures ──────────────────────────────── */ .atlas-page .legend { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-70); } .atlas-page .legend i { display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px; border-radius: 1px; } .atlas-page.atlas-foresight .legend { color: var(--paper-74); } /* ── Profiles — stacked rows with a hanging rule, not a 3-up ──── */ .atlas-page .profiles { margin-top: 48px; } .atlas-page .profile { display: grid; grid-template-columns: 4ch 1fr; gap: 26px; padding: 26px 0; border-top: 1px solid var(--ink-20); } .atlas-page .profile:last-child { border-bottom: 1px solid var(--ink-20); } .atlas-page .profile .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ochre); padding-top: 6px; } .atlas-page .profile h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.24; margin: 0; } .atlas-page .profile p { font-size: 15.5px; line-height: 1.64; color: var(--ink-70); margin: 9px 0 0; max-width: 64ch; } .atlas-page.atlas-foresight .profile { border-top-color: var(--paper-22); } .atlas-page.atlas-foresight .profile:last-child { border-bottom-color: var(--paper-22); } .atlas-page.atlas-foresight .profile h3 { color: var(--paper); } .atlas-page.atlas-foresight .profile p { color: var(--paper-74); } .atlas-page.atlas-foresight .profile .num { color: var(--ochre-light); } .atlas-page.atlas-foresight .sec.alt .profile { border-top-color: var(--ink-20); } .atlas-page.atlas-foresight .sec.alt .profile:last-child { border-bottom-color: var(--ink-20); } .atlas-page.atlas-foresight .sec.alt .profile h3 { color: var(--ink); } .atlas-page.atlas-foresight .sec.alt .profile p { color: var(--ink-70); } .atlas-page.atlas-foresight .sec.alt .profile .num { color: var(--ochre); } /* ── Advantages — compact 4-across, mono-led ─────────────────── */ .atlas-page .adv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 46px; } .atlas-page .adv .a { border-top: 2px solid var(--ink); padding-top: 16px; } .atlas-page .adv .a .t { font-family: var(--serif); font-size: 18px; line-height: 1.25; } .atlas-page .adv .a p { font-size: 14px; line-height: 1.6; color: var(--ink-70); margin: 9px 0 0; } /* ── Capability cards with iconography ───────────────────────── */ .atlas-page .caps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 48px; margin-top: 48px; } .atlas-page .capc { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; } .atlas-page .capc .ic { width: 52px; height: 52px; } .atlas-page .capc .ic svg { width: 100%; height: 100%; display: block; } .atlas-page .capc h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.24; margin: 2px 0 0; } .atlas-page .capc p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 9px 0 0; } .atlas-page.atlas-foresight .capc h3 { color: var(--paper); } .atlas-page.atlas-foresight .capc p { color: var(--paper-74); } .atlas-page.atlas-foresight .sec.alt .capc h3 { color: var(--ink); } .atlas-page.atlas-foresight .sec.alt .capc p { color: var(--ink-70); } /* ── Sector chips — blunt about the verticals ────────────────── */ .atlas-page .sectors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .atlas-page .sectors span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; border: 1px solid var(--ink-20); padding: 8px 13px; color: var(--ink-70); } .atlas-page.atlas-foresight .sectors span { border-color: var(--paper-22); color: var(--paper-74); } /* ── Awards — a grid of records, since there are no team photos ─ */ .atlas-page .awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 44px; } .atlas-page .award { display: grid; grid-template-columns: 7ch 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ink-14); } .atlas-page .award .yr { font-family: var(--mono); font-size: 12px; color: var(--ochre); padding-top: 3px; } .atlas-page .award .t { font-family: var(--serif); font-size: 17px; line-height: 1.3; } .atlas-page .award .b { font-size: 13.5px; color: var(--ink-50); margin-top: 5px; } /* ── Publication records — visual substance without photographs ─ */ .atlas-page .pubs { margin-top: 42px; border-top: 1px solid var(--ink-20); } .atlas-page .pub { display: grid; grid-template-columns: 13ch 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--ink-08); } .atlas-page .pub .venue { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ochre); padding-top: 4px; } .atlas-page .pub .t { font-family: var(--serif); font-size: 17px; line-height: 1.34; } .atlas-page .pub .a { font-size: 13.5px; color: var(--ink-50); margin-top: 5px; } .atlas-page .sec.dark .pub { border-bottom-color: var(--paper-10); } .atlas-page .sec.dark .pubs { border-top-color: var(--paper-22); } .atlas-page .sec.dark .pub .t { color: var(--paper); } .atlas-page .sec.dark .pub .a { color: var(--paper-55); } .atlas-page .sec.dark .pub .venue { color: var(--ochre-light); } /* leadership-cta hard-codes ink text + underline; flip both on dark grounds or it vanishes */ .atlas-page .sec.dark .leadership-cta { color: var(--paper); border-bottom-color: var(--paper); } /* ── Embed slot — Ashby board, product demo ──────────────────── */ .atlas-page .embed { border: 1px dashed var(--ink-30); background: var(--paper); padding: 54px 30px; text-align: center; margin-top: 40px; } .atlas-page .embed .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ochre); } .atlas-page .embed p { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 12px auto 0; max-width: 56ch; } /* ── CTA pairing — primary + secondary ───────────────────────── */ .atlas-page .cta-pair { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; } @media (max-width: 991px) { .atlas-page .split, .atlas-page .split.narrow-fig, .atlas-page .caps-grid, .atlas-page .awards { grid-template-columns: 1fr; gap: 34px; } .atlas-page .adv { grid-template-columns: repeat(2, 1fr); } .atlas-page .profile { grid-template-columns: 1fr; gap: 8px; } .atlas-page .profile .num { padding-top: 0; } } /* Hero headlines sit beside a figure in a split — the full display size runs to five lines in a 0.92fr column. Step it down for split heroes only. */ .atlas-page .page-hero .split h1 { font-size: clamp(34px, 4.1vw, 54px); max-width: 19ch; } /* Placeholder text awaiting verified research — must never read as copy */ .atlas-page .pending { color: var(--ochre); background: var(--ochre-soft); border-bottom: 1px dashed var(--ochre); font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.04em; padding: 1px 5px; } /* ── Document record — version metadata, for institutional weight ─── */ .atlas-page .record { display: grid; grid-template-columns: repeat(4, auto); gap: 0 44px; justify-content: start; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ink-20); } .atlas-page .record .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-50); } .atlas-page .record .v { font-family: var(--serif); font-size: 17px; margin-top: 7px; } .atlas-page .sec.dark .record { border-top-color: var(--paper-22); } .atlas-page .sec.dark .record .k { color: var(--paper-55); } .atlas-page .sec.dark .record .v { color: var(--paper); } @media (max-width: 991px) { .atlas-page .record { grid-template-columns: 1fr 1fr; gap: 22px 32px; } } /* ── Prose measure for policy text ──────────────────────────────── */ .atlas-page .measure { max-width: 64ch; } /* ── See it work: four-step Pulse demo (pulse.html #see-it) ─────── */ .atlas-page .demo h2 { max-width: 24ch; } .atlas-page .demo [hidden] { display: none !important; } .atlas-page .demo-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 36px 0 28px; border-top: 1px solid var(--ink-20); } .atlas-page .demo-tabs button { background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; padding: 14px 12px 0 0; text-align: left; font: 500 14px/1.35 var(--sans); color: var(--ink-50); cursor: pointer; } .atlas-page .demo-tabs button span { display: block; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--ochre); margin-bottom: 6px; } .atlas-page .demo-tabs button[aria-selected="true"] { border-top-color: var(--ink); color: var(--ink); } .atlas-page .demo-tabs button:hover { color: var(--ink); } .atlas-page .demo-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; } .atlas-page .demo-fig .frame { position: relative; } .atlas-page .demo-view { position: relative; } .atlas-page .demo-view img, .atlas-page .demo-view canvas { display: block; width: 100%; height: auto; } .atlas-page .demo-spot { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); font: 500 11px/21px var(--mono); text-align: center; color: var(--ink); } .atlas-page .demo-spot.is-sel { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 5px rgba(140,106,61,.28); } .atlas-page .demo-pin { position: absolute; transform: translate(-50%, -50%); } .atlas-page .demo-pin i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); } .atlas-page .demo-pin em { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .04em; font-style: normal; background: var(--ink); color: var(--paper); padding: 5px 7px; } .atlas-page .demo-over { position: absolute; inset: 0; width: 100%; height: 100%; } .atlas-page .demo-over .t { font: 500 11px var(--mono); letter-spacing: .08em; fill: var(--ink); paint-order: stroke; stroke: #EBE4D4; stroke-width: 4px; } .atlas-page .demo-src { font-size: 12.5px; color: var(--ink-50); margin: 10px 0 0; } .atlas-page .demo-panel h3 { font: 400 25px/1.25 var(--serif); margin: 8px 0 14px; text-wrap: balance; } .atlas-page .demo-panel p { color: var(--ink-70); line-height: 1.6; margin: 0 0 16px; } .atlas-page .demo-k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); } .atlas-page .demo-note { font-size: 14px; color: var(--ink-50) !important; } .atlas-page .demo-rank { list-style: none; padding: 0; margin: 0 0 16px; border-top: 1px solid var(--ink-14); } .atlas-page .demo-rank li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ink-08); font-size: 15px; } .atlas-page .demo-rank li span { font: 500 12px/1.7 var(--mono); color: var(--ink-50); } .atlas-page .demo-rank li b { font: 500 13px/1.7 var(--mono); font-variant-numeric: tabular-nums; } .atlas-page .demo-rank li.is-sel { font-weight: 600; } .atlas-page .demo-rank li.is-sel span { color: var(--ochre); } .atlas-page .demo-next { background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 3px; margin-top: 6px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; } .atlas-page .demo-slider { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; } .atlas-page .demo-slider input { flex: 1; accent-color: #8C6A3D; } .atlas-page .demo-slider output { font: 500 20px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 3.2em; } .atlas-page .demo-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); font-size: 12px; cursor: pointer; flex: none; } .atlas-page .demo-chart { width: 100%; height: auto; margin: 4px 0 8px; color: var(--ink); overflow: visible; } .atlas-page .demo-chart .v { font: 500 12px var(--mono); fill: var(--ink); } .atlas-page .demo-chart .y { font: 500 11.5px var(--mono); fill: var(--ink-50); } .atlas-page .demo-chart .d { font: 500 11.5px var(--mono); fill: var(--ochre); } .atlas-page .demo-chart-key { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--ink-50); margin-bottom: 16px; } .atlas-page .demo-chart-key .bar { display: inline-block; width: 10px; height: 10px; background: #8C6A3D; margin-right: 6px; vertical-align: -1px; } .atlas-page .demo-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; } .atlas-page .demo-table th { font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); text-align: left; padding: 0 8px 8px 0; border-bottom: 1px solid var(--ink-20); } .atlas-page .demo-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--ink-08); font-variant-numeric: tabular-nums; } @media (max-width: 991px) { .atlas-page .demo-body { grid-template-columns: 1fr; gap: 28px; } .atlas-page .demo-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } } /* ════ _system.css ════ */ /* ═══════════════════════════════════════════════════════════════ Atlas AI — site system (launch pass, 2026-09-28) Loaded LAST on every page, including the homepage. Everything the seven-reviewer panel asked for at site level lives here, so the engineer can port it as one set of Webflow variables, classes and components (see PORT-PACK.md): 1 Accessibility tokens: ink-64 for quiet text, ochre-text for small ochre text, a field border that passes 3:1 2 Focus ring, skip link, landmarks 3 Navigation with a real mobile menu; current page marked 4 Footer: Platform / Company, legal row, newsletter 5 The academic figure system ("plates") 6 New components: proof lines, comparison rows, validation list, packages, spec table, common questions, lifecycle, contact form states, homepage mobile beats No new hue. Ochre stays the only accent; ochre-text is the same hue a step darker, used only for text under 24 px. ═══════════════════════════════════════════════════════════════ */ /* ── 2 · Focus, skip link ─────────────────────────────────────── */ .atlas-page :focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; } .atlas-page.atlas-foresight :focus-visible, .atlas-page .sec.dark :focus-visible { outline-color: var(--ochre-light); } .atlas-page.atlas-foresight .inset :focus-visible { outline-color: var(--ochre); } /* ── 4 · Footer: the visually hidden helper (nav and footer are their own components) ── */ .atlas-page .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Quiet text and small ochre text, sitewide (A-01, A-02) ─────── */ .atlas-page .fig-caption, .atlas-page .frame .cap, .atlas-page .evidence, .atlas-page .evidence .fine, .atlas-page .lvg .lab, .atlas-page .bring .h, .atlas-page .field .help, .atlas-page .privacy-note, .atlas-page .aside-block .h, .atlas-page .award .b, .atlas-page .pub .a, .atlas-page .record .k, .atlas-page .demo-src, .atlas-page .demo-rank li span, .atlas-page .demo-chart-key, .atlas-page .demo-table th, .atlas-page .demo-tabs button, .atlas-page .demo-note { color: var(--ink-64); } .atlas-page .demo-note { color: var(--ink-64) !important; } .atlas-page .demo-chart .y { fill: var(--ink-64); } .atlas-page .unit .n, .atlas-page .row .who, .atlas-page .step .n, .atlas-page .cap .name .k, .atlas-page .chooser .k, .atlas-page .band .tag, .atlas-page .award .yr, .atlas-page .pub .venue, .atlas-page .profile .num, .atlas-page .demo-tabs button span, .atlas-page .demo-k, .atlas-page .aside-block a { color: var(--ochre-text); } .atlas-page .demo-chart .d { fill: var(--ochre-text); } /* dark grounds keep their paper/ochre-light values (already passing) */ .atlas-page.atlas-foresight .unit .n, .atlas-page.atlas-foresight .row .who, .atlas-page.atlas-foresight .step .n, .atlas-page.atlas-foresight .cap .name .k, .atlas-page.atlas-foresight .chooser .k, .atlas-page.atlas-foresight .band .tag, .atlas-page.atlas-foresight .profile .num, .atlas-page .sec.dark .pub .venue, .atlas-page .sec.dark .unit .n { color: var(--ochre-light); } .atlas-page.atlas-foresight .frame .cap { color: var(--paper-55); } .atlas-page.atlas-foresight .inset .unit .n, .atlas-page.atlas-foresight .inset .row .who, .atlas-page.atlas-foresight .inset .profile .num, .atlas-page.atlas-foresight .inset .chooser .k { color: var(--ochre-text); } /* units never uppercase ("10 M" reads as million) */ .atlas-page .u { text-transform: none; letter-spacing: 0; } /* Page close: its own ground on Pulse, serif lede everywhere (S-13, R-06) */ .atlas-page.atlas-pulse .page-close { background: var(--paper-deep); } .atlas-page .page-close .lede { font-family: var(--serif); font-size: 19px; line-height: 1.62; color: var(--ink-70); max-width: 60ch; } .atlas-page.atlas-foresight .page-close .lede { color: var(--paper-74); } /* Buttons: one primary, one text link, on any ground */ .atlas-page .cta-pair .close-cta, .atlas-page .btn-primary { display: inline-block; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); padding: 14px 20px; text-decoration: none; border: 0; cursor: pointer; } .atlas-page.atlas-foresight .cta-pair .close-cta, .atlas-page.atlas-foresight .btn-primary { background: var(--paper); color: var(--ink); } .atlas-page.atlas-foresight .inset .btn-primary { background: var(--ink); color: var(--paper); } .atlas-page .text-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; font: 500 14px/1.4 var(--sans); } .atlas-page.atlas-foresight .text-link, .atlas-page .sec.dark .text-link { color: var(--paper); } .atlas-page.atlas-foresight .inset .text-link { color: var(--ink); } /* ── 5 · Figure system: numbered plates ─────────────────────────── Frame, then a caption OUTSIDE it: "FIG. n" + a sentence title, then a source line. Data plates carry no status tag; the source line is the proof. Only schematics and illustrations get a tag. Text is sized in rendered pixels: SVGs are authored at display width, or labels are HTML. */ .atlas-page .plate { margin: 0; min-width: 0; } .atlas-page .plate-frame { position: relative; border: 1px solid var(--ink-14); background: var(--paper-alt); overflow: hidden; } .atlas-page .plate-frame img { display: block; width: 100%; height: auto; } .atlas-page .plate-cap { margin-top: 14px; } .atlas-page .plate-cap .t { font: italic 400 16px/1.45 var(--serif); color: var(--ink); } .atlas-page .plate-cap .t .n { font: normal 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--ochre-text); margin-right: 10px; } .atlas-page .plate-cap .src { font: 400 13px/1.55 var(--sans); color: var(--ink-70); margin: 6px 0 0; } .atlas-page .plate-cap .src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .atlas-page .plate-tag { float: right; font: 500 10px/1.6 var(--mono); letter-spacing: .12em; color: var(--ink-64); } .atlas-page .panel-l { position: absolute; left: 12px; top: 10px; font: italic 600 15px/1 var(--serif); color: var(--ink); z-index: 2; } .atlas-page .maplab { position: absolute; transform: translate(-50%, -50%); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; color: var(--ink); white-space: nowrap; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); } .atlas-page .maplab.dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: 1px; } .atlas-page .scalebar { position: absolute; left: 14px; bottom: 12px; font: 500 11px/1 var(--mono); color: var(--ink); } .atlas-page .scalebar .bar { display: flex; height: 5px; margin-bottom: 6px; border: 1px solid var(--ink); } .atlas-page .scalebar .bar i { display: block; height: 100%; } .atlas-page .scalebar .bar i:nth-child(odd) { background: var(--ink); } .atlas-page .scalebar .ticks { display: flex; justify-content: space-between; } .atlas-page .north { position: absolute; right: 14px; bottom: 12px; width: 14px; text-align: center; font: 500 11px/1 var(--mono); color: var(--ink); } .atlas-page .north svg { display: block; width: 14px; height: 18px; margin: 0 auto 4px; } .atlas-page .plate-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-70); } .atlas-page .plate-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; } .atlas-page .plate-chart { display: block; width: 100%; height: auto; overflow: visible; } .atlas-page .plate-chart text { font-family: var(--mono); font-size: 11px; fill: var(--ink-64); } .atlas-page .plate-chart .val { fill: var(--ink); font-weight: 500; } .atlas-page .plate-chart .ttl { font-family: var(--sans); font-size: 12px; fill: var(--ink-70); } .atlas-page .plate-chart .axis { stroke: var(--ink); stroke-opacity: .55; stroke-width: .75; } .atlas-page .plate-chart .grid { stroke: var(--ink); stroke-opacity: .10; stroke-dasharray: 1 3; } .atlas-page .plate-chart .ref { stroke: var(--ink); stroke-opacity: .5; stroke-width: .75; stroke-dasharray: 4 3; } .atlas-page .plate-two { display: grid; grid-template-columns: 1fr; gap: 0; } .atlas-page .plate-two .panel { position: relative; } .atlas-page .plate-two .panel + .panel { border-top: 1px solid var(--ink-14); padding: 30px 16px 12px; background: var(--paper); } /* Plates on ink (Foresight) */ .atlas-page.atlas-foresight .plate-frame, .atlas-page .plate.on-ink .plate-frame { background: rgba(245,239,229,.04); border-color: var(--paper-22); } .atlas-page.atlas-foresight .plate-cap .t, .atlas-page .plate.on-ink .plate-cap .t { color: var(--paper); } .atlas-page.atlas-foresight .plate-cap .t .n, .atlas-page .plate.on-ink .plate-cap .t .n { color: var(--ochre-light); } .atlas-page.atlas-foresight .plate-cap .src, .atlas-page .plate.on-ink .plate-cap .src { color: var(--paper-74); } .atlas-page.atlas-foresight .plate-chart text, .atlas-page .plate.on-ink .plate-chart text { fill: var(--paper-55); } .atlas-page.atlas-foresight .plate-chart .val, .atlas-page .plate.on-ink .plate-chart .val { fill: var(--paper); } .atlas-page.atlas-foresight .plate-chart .ttl, .atlas-page .plate.on-ink .plate-chart .ttl { fill: var(--paper-74); } .atlas-page.atlas-foresight .plate-chart .axis, .atlas-page .plate.on-ink .plate-chart .axis, .atlas-page.atlas-foresight .plate-chart .ref, .atlas-page .plate.on-ink .plate-chart .ref { stroke: var(--paper); } .atlas-page.atlas-foresight .plate-chart .grid, .atlas-page .plate.on-ink .plate-chart .grid { stroke: var(--paper); stroke-opacity: .12; } .atlas-page.atlas-foresight .plate-legend, .atlas-page .plate.on-ink .plate-legend { color: var(--paper-74); } .atlas-page.atlas-foresight .panel-l, .atlas-page .plate.on-ink .panel-l { color: var(--paper); } .atlas-page.atlas-foresight .plate-tag { color: var(--paper-55); } /* ── 6 · Components ───────────────────────────────────────────── */ /* Proof line under a decision row: one line of evidence, one link */ .atlas-page .row .proof-line { grid-column: 3; font-size: 13.5px; line-height: 1.55; color: var(--ink-64); margin: -14px 0 0; } .atlas-page .row .proof-line a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .atlas-page .row .proof-wrap p + p { margin-top: 8px; } @media (max-width: 991px) { .atlas-page .row .proof-line { grid-column: 1; margin: 0; } } /* Comparison rows: "instead of X" — label, then the answer */ .atlas-page .vs { margin-top: 44px; border-top: 1px solid var(--ink-20); } .atlas-page .vs > div { display: grid; grid-template-columns: 24ch 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--ink-08); } .atlas-page .vs .k { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ochre-text); padding-top: 4px; } .atlas-page .vs p { font-size: 15.5px; line-height: 1.64; color: var(--ink-70); margin: 0; max-width: 70ch; } .atlas-page .vs p b { color: var(--ink); font-weight: 500; } @media (max-width: 991px) { .atlas-page .vs > div { grid-template-columns: 1fr; gap: 8px; } } /* Validation list */ .atlas-page .checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 48px; margin-top: 44px; } .atlas-page .checks > div { border-top: 1px solid var(--ink-20); padding-top: 16px; } .atlas-page .checks h3 { font: 500 19px/1.3 var(--serif); margin: 0; } .atlas-page .checks p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 9px 0 0; } .atlas-page .checks p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 991px) { .atlas-page .checks { grid-template-columns: 1fr; gap: 24px; } } /* How Pulse is sold: packages beside the spec table */ .atlas-page .sold { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 46px; align-items: start; } .atlas-page .pkgs > div { border-top: 1px solid var(--ink-20); padding: 16px 0 20px; } .atlas-page .pkgs .k { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--ochre-text); } .atlas-page .pkgs h3 { font: 500 19px/1.3 var(--serif); margin: 10px 0 0; } .atlas-page .pkgs p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 8px 0 0; } .atlas-page .pkgs ul { list-style: none; margin: 10px 0 0; padding: 0; } .atlas-page .pkgs li { font-size: 14.5px; line-height: 1.55; color: var(--ink-70); padding: 5px 0 5px 16px; position: relative; } .atlas-page .pkgs li::before { content: "–"; position: absolute; left: 0; color: var(--ochre); } .atlas-page .spec { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); } .atlas-page .spec caption { text-align: left; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink-64); padding-bottom: 12px; } .atlas-page .spec th { width: 34%; text-align: left; vertical-align: top; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-64); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ink-14); } .atlas-page .spec td { font-size: 14.5px; line-height: 1.55; padding: 12px 0; border-bottom: 1px solid var(--ink-14); } @media (max-width: 991px) { .atlas-page .sold { grid-template-columns: 1fr; gap: 36px; } } /* Common questions */ .atlas-page .faq { margin-top: 40px; border-top: 1px solid var(--ink-20); max-width: 860px; } .atlas-page .faq details { border-bottom: 1px solid var(--ink-14); } .atlas-page .faq summary { cursor: pointer; list-style: none; font: 400 19px/1.35 var(--serif); padding: 18px 36px 18px 0; position: relative; } .atlas-page .faq summary::-webkit-details-marker { display: none; } .atlas-page .faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 22px/1 var(--sans); color: var(--ochre); } .atlas-page .faq details[open] summary::after { content: "–"; } .atlas-page .faq details p { font-size: 15px; line-height: 1.64; color: var(--ink-70); margin: 0 0 20px; max-width: 70ch; } .atlas-page .faq details p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* Powered-by band: one engine, two ways in */ .atlas-page .engine-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 991px) { .atlas-page .engine-band { grid-template-columns: 1fr; gap: 24px; } } /* Foresight: paper insets inside the ink page (D4) */ .atlas-page.atlas-foresight .inset { background: var(--paper); color: var(--ink); padding: 44px 48px; margin-top: 48px; } .atlas-page.atlas-foresight .inset h2, .atlas-page.atlas-foresight .inset h3, .atlas-page.atlas-foresight .inset .row .what { color: var(--ink); } .atlas-page.atlas-foresight .inset p, .atlas-page.atlas-foresight .inset .row p, .atlas-page.atlas-foresight .inset .lede { color: var(--ink-70); } .atlas-page.atlas-foresight .inset .eyebrow .label { color: var(--ink-64); } .atlas-page.atlas-foresight .inset .eyebrow .tick { background: var(--ochre); } .atlas-page.atlas-foresight .inset .rows, .atlas-page.atlas-foresight .inset .row { border-color: var(--ink-14); } .atlas-page.atlas-foresight .inset .row .proof-line { color: var(--ink-64); } .atlas-page.atlas-foresight .inset .row .proof-line a { color: var(--ink); } @media (max-width: 991px) { .atlas-page.atlas-foresight .inset { padding: 28px 22px; } } /* Micro-figures for Foresight's four answers (replaces stock icons, V-26) */ .atlas-page .capc .ic.micro { width: 72px; height: 44px; } .atlas-page .capc.micro-row { grid-template-columns: 72px 1fr; } /* Responsible AI: the six-stage lifecycle (G2) */ .atlas-page .lifecycle { margin-top: 48px; } .atlas-page .lifecycle ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; } .atlas-page .lifecycle ol::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ink-30); } .atlas-page .lifecycle li { position: relative; padding: 26px 12px 0 0; } .atlas-page .lifecycle li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper-alt); border: 1.5px solid var(--ink); } .atlas-page .lifecycle li.v::before { background: var(--ochre); border-color: var(--ochre); } .atlas-page .lifecycle .k { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--ochre-text); } .atlas-page .lifecycle .s { font: 400 19px/1.25 var(--serif); margin-top: 8px; } .atlas-page .lifecycle .gate { font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-64); margin-top: 8px; } .atlas-page .lifecycle .bracket { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 22px; } .atlas-page .lifecycle .bracket span { grid-column: 2 / 4; border: 1px solid var(--ochre); border-top: 0; height: 12px; } .atlas-page .lifecycle .bracket-l { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--ochre-text); margin-top: 10px; padding-left: calc(100% / 6); } @media (max-width: 991px) { .atlas-page .lifecycle ol { grid-template-columns: 1fr; } .atlas-page .lifecycle ol::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .atlas-page .lifecycle li { padding: 0 0 22px 30px; } .atlas-page .lifecycle .bracket { display: none; } .atlas-page .lifecycle .bracket-l { padding-left: 30px; } } /* Contact form (F1) */ .atlas-page .field select { width: 100%; font: 400 16px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--ink-55); border-radius: 2px; padding: 13px 14px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; } .atlas-page.atlas-contact .field input, .atlas-page.atlas-contact .field textarea, .atlas-page.atlas-contact .field select { border-color: var(--ink-55); } .atlas-page .field input:focus, .atlas-page .field textarea:focus, .atlas-page .field select:focus { outline: 2px solid var(--ochre); outline-offset: 0; border-color: var(--ochre); } .atlas-page .field label { text-transform: uppercase; color: var(--ink-64); } .atlas-page .field label .req { color: var(--ochre-text); margin-left: 4px; } .atlas-page .field .err { display: none; font-size: 13px; color: #7A2E1E; margin: 7px 0 0; } .atlas-page .field.invalid .err { display: block; } .atlas-page .field.invalid input, .atlas-page .field.invalid select, .atlas-page .field.invalid textarea { border-color: #7A2E1E; } .atlas-page .form-actions { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .atlas-page .form-error { display: none; font-size: 14px; color: #7A2E1E; margin-top: 14px; } .atlas-page .form-error.on { display: block; } .atlas-page .privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .atlas-page .routing { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-70); margin-top: 14px; max-width: 54ch; } /* Chart marks (figure system) */ .atlas-page .plate-chart .bar { fill: var(--ochre); } .atlas-page .plate-chart .l-subj { stroke: var(--ochre); } .atlas-page .plate-chart .l-ctx { stroke: var(--ink); stroke-opacity: .55; } .atlas-page .plate-chart .dot-subj { fill: var(--ochre); } .atlas-page .plate-chart .lab-subj { fill: var(--ochre-text); font-weight: 500; } .atlas-page .plate-chart .lab-ctx { fill: var(--ink-64); } .atlas-page.atlas-foresight .plate-chart .l-subj, .atlas-page .plate.on-ink .plate-chart .l-subj { stroke: var(--ochre-light); } .atlas-page.atlas-foresight .plate-chart .dot-subj, .atlas-page .plate.on-ink .plate-chart .dot-subj { fill: var(--ochre-light); } .atlas-page.atlas-foresight .plate-chart .lab-subj, .atlas-page .plate.on-ink .plate-chart .lab-subj { fill: var(--ochre-light); } .atlas-page.atlas-foresight .plate-chart .l-ctx, .atlas-page .plate.on-ink .plate-chart .l-ctx { stroke: var(--paper); stroke-opacity: .6; } .atlas-page.atlas-foresight .plate-chart .lab-ctx, .atlas-page .plate.on-ink .plate-chart .lab-ctx { fill: var(--paper-74); } /* ── Homepage additions (launch pass) ───────────────────────────── Hand these to the engineer as edits to the already-ported page. */ .atlas-page .close-cta { text-decoration: none; display: inline-block; } /* ── /pulse additions (launch pass) ──────────────────────────────── */ .atlas-page .proof-strip { padding: 56px 0 64px; } .atlas-page .proof-strip .lvg { margin-top: 0; } .atlas-page .lvg .srcline { font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink-64); margin: 10px 0 0; } .atlas-page .lvg .srcline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .atlas-page .evidence a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .atlas-page .page-hero .plate { margin: 0; } .atlas-page .page-hero .plate .plate-frame img { image-rendering: pixelated; } .atlas-page .faq-h { font: 400 26px/1.2 var(--serif); margin: 72px 0 0; } /* demo: plain labels in HTML at readable size (V-15), ticks, 44 px targets, one-row tabs on phones */ .atlas-page .demo .lede { margin-top: 14px; } .atlas-page .demo-lab { position: absolute; transform: translate(0, -50%); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(235,228,212,.9); padding: 3px 6px; white-space: nowrap; } .atlas-page .demo-view canvas { image-rendering: pixelated; } .atlas-page button.demo-spot { cursor: pointer; padding: 0; } .atlas-page button.demo-spot::after { content: ""; position: absolute; inset: -10px; } .atlas-page .demo-play { width: 44px; height: 44px; } .atlas-page .demo-range { flex: 1; min-width: 0; } .atlas-page .demo-range input { width: 100%; margin: 0; height: 28px; } .atlas-page .demo-ticks { display: flex; justify-content: space-between; font: 500 11px/1.2 var(--mono); color: var(--ink-64); margin-top: 2px; } .atlas-page .demo-ticks span { width: 2.2em; text-align: center; position: relative; } .atlas-page .demo-ticks .c { color: var(--ink); } .atlas-page .demo-ticks .c em { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); font-style: normal; font-size: 10px; letter-spacing: .06em; color: var(--ochre-text); } .atlas-page .demo-slider { margin-bottom: 30px; } .atlas-page .demo-next { padding: 10px 0 4px; } .atlas-page .demo-after { margin-top: 28px; font-size: 15px; color: var(--ink-70); } .atlas-page .demo-after a { color: var(--ink); border-bottom: 1px solid var(--ink); } .atlas-page .demo-panel h3:focus { outline: none; } .atlas-page .demo-panel h3:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; } .atlas-page .demo-tabs button .tl { font-weight: 500; } .atlas-page .demo-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 991px) { .atlas-page .demo-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } .atlas-page .demo-tabs button { min-height: 44px; padding: 12px 6px 6px 0; } .atlas-page .demo-tabs button .tl { display: none; } .atlas-page .demo-tabs button span { font-size: 13px; margin: 0; } .atlas-page .demo-lab { font-size: 10px; } } .atlas-page .scalebar, .atlas-page .north { background: rgba(235,228,212,.88); padding: 6px 8px; } .atlas-page .north { width: auto; } .atlas-page .pkgs > .cta-pair { border-top: 0; padding-top: 0; } /* /foresight links on ink */ .atlas-page.atlas-foresight .band a, .atlas-page.atlas-foresight .bring a, .atlas-page.atlas-foresight .chooser a, .atlas-page.atlas-foresight .plate-cap .src a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .atlas-page.atlas-foresight .inset .rows { margin-top: 30px; } .atlas-page.atlas-foresight .capc .ic.micro { color: var(--paper); } .atlas-page .page-hero .fig .plate { margin: 0; } /* /company additions */ .atlas-page .units.values { grid-template-columns: repeat(2, 1fr); gap: 34px 48px; } .atlas-page .award .b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .atlas-page .roles { margin-top: 40px; } .atlas-page.atlas-company .split .plate { margin: 0; } @media (max-width: 991px) { .atlas-page .units.values { grid-template-columns: 1fr; } } /* ── Round-2 fixes ─────────────────────────────────────────────────── */ /* Phone variants of every chart (V-03): authored at 340 px so 11 px text renders at ~11 px */ .atlas-page .fig-mob { display: none; } @media (max-width: 600px) { .atlas-page .fig-desk { display: none !important; } .atlas-page .fig-mob { display: block; } .atlas-page .plate-legend.fig-mob { display: flex; } .atlas-page .scalebar.fig-mob { display: block; } } .atlas-page .plate-kicker { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-text); margin: 0 0 10px; } .atlas-page.atlas-foresight .plate-kicker, .atlas-page .plate.on-ink .plate-kicker { color: var(--ochre-light); } .atlas-page .plate-legend .k-subj, .atlas-page .plate-legend .k-ctx { height: 3px; width: 16px; vertical-align: 3px; } .atlas-page .plate-legend .k-subj { background: var(--ochre); } .atlas-page .plate-legend .k-ctx { background: var(--ink); opacity: .55; } .atlas-page.atlas-foresight .plate-legend .k-subj, .atlas-page .plate.on-ink .plate-legend .k-subj { background: var(--ochre-light); } .atlas-page.atlas-foresight .plate-legend .k-ctx, .atlas-page .plate.on-ink .plate-legend .k-ctx { background: var(--paper); } /* /pulse round 2: the proof line has its own class (".proof" is the homepage's Trusted-by section) */ .atlas-page .demo-mhead { display: none; } @media (max-width: 991px) { .atlas-page .demo-mhead { display: block; font: 400 20px/1.3 var(--serif); margin: 0 0 14px; } .atlas-page .demo-lab { white-space: normal; max-width: 36%; font-size: 10px; } } .atlas-page .as-delivered { max-width: 560px; margin-top: 48px; } .atlas-page .as-delivered .plate-frame { background: #000; } .atlas-page .as-delivered .plate-frame img { image-rendering: pixelated; } /* Round 2: an error token (form errors only), Foresight footer titles, newsletter placeholder, links in dark records */ .atlas-page .field .err, .atlas-page .form-error { color: var(--error); } .atlas-page .field.invalid input, .atlas-page .field.invalid select, .atlas-page .field.invalid textarea { border-color: var(--error); } .atlas-page .sec.dark .pub .t a, .atlas-page .pub .t a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .atlas-page .impact-fig { max-width: 640px; margin-top: 56px; } .atlas-page .units-note { font-size: 14px; line-height: 1.6; color: var(--ink-64); margin: 28px 0 0; max-width: 70ch; } .atlas-page .units-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ═══ Round 3 (2026-09-29) ═══════════════════════════════════════════════════════════════════════ */ /* Forecast range: the shaded band around a forecast line */ .atlas-page .plate-chart .band { fill: var(--ochre); fill-opacity: .16; stroke: none; } .atlas-page.atlas-foresight .plate-chart .band, .atlas-page .plate.on-ink .plate-chart .band { fill: var(--ochre-light); fill-opacity: .16; } .atlas-page .plate-compact .plate-cap .src { font-size: 12.5px; } /* Sector band: the five sectors as a designed strip (replaces the faded .sectors chips on /pulse and /foresight) */ .atlas-page .sector-band { background: var(--paper-alt); border-top: 1px solid var(--ink-14); border-bottom: 1px solid var(--ink-14); padding: 30px 0; } .atlas-page .sector-band .wrap { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; } .atlas-page .sector-band .sb-label { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-64); } .atlas-page .sector-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); } .atlas-page .sector-band li { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); padding: 0 20px; border-left: 1px solid var(--ink-14); } .atlas-page .sector-band li .n { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ochre-text); margin-bottom: 8px; } .atlas-page .sector-band.on-ink, .atlas-page.atlas-foresight .sector-band { background: #221C17; border-color: var(--paper-10); } .atlas-page .sector-band.on-ink .sb-label, .atlas-page.atlas-foresight .sector-band .sb-label { color: var(--paper-55); } .atlas-page .sector-band.on-ink li, .atlas-page.atlas-foresight .sector-band li { color: var(--paper); border-left-color: var(--paper-22); } .atlas-page .sector-band.on-ink li .n, .atlas-page.atlas-foresight .sector-band li .n { color: var(--ochre-light); } @media (max-width: 991px) { .atlas-page .sector-band .wrap { grid-template-columns: 1fr; gap: 14px; } .atlas-page .sector-band ul { grid-template-columns: 1fr 1fr; row-gap: 18px; } .atlas-page .sector-band li { padding: 0 14px; font-size: 16px; } } /* Product names read as names */ .atlas-page .pname { font-style: italic; color: var(--ochre-text); } .atlas-page .nowrap { white-space: nowrap; } /* Headings balance their lines; paragraphs avoid one-word last lines */ .atlas-page h1, .atlas-page h2, .atlas-page h3 { text-wrap: balance; } .atlas-page p { text-wrap: pretty; } /* Before/after map: the 2017 layer sits over the 2024 layer, clipped at --pos; a range input drives it */ .atlas-page .maplab.road { font: 500 10px/1 var(--mono); letter-spacing: .04em; color: var(--ink-64); background: rgba(244,239,229,.85); padding: 2px 4px; transform: translate(-50%, -50%); white-space: nowrap; } .atlas-page .maplab.place { font: italic 400 14px/1.2 var(--serif); color: var(--ink); background: rgba(244,239,229,.8); padding: 2px 6px; transform: translate(-50%, -50%); white-space: nowrap; } .atlas-page .map-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-64); } .atlas-page .map-key i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; } .atlas-page .map-key .k-new { background: #8C6A3D; } .atlas-page .map-key .k-pre { background: #C9C2B5; } .atlas-page .map-key .k-blk { border: 1.5px dashed var(--ink); } /* ═══ Round 3 panel fixes (2026-09-29) ═══════════════════════════════════════════════════════════════════════════ */ /* Forecast range you can see; values that stay legible over a line */ .atlas-page .plate-chart .band { fill-opacity: .35; } .atlas-page.atlas-foresight .plate-chart .band, .atlas-page .plate.on-ink .plate-chart .band { fill-opacity: .30; } .atlas-page .plate-chart .val { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; } .atlas-page.atlas-foresight .plate-chart .val, .atlas-page .plate.on-ink .plate-chart .val { stroke: var(--ink); } @media (max-width: 600px) { .atlas-page .plate-frame[style] { padding: 14px 8px 6px !important; } } /* The registered mark reads as a mark, not a tick */ .atlas-page .reg { font-family: var(--sans); font-size: .6em; vertical-align: .55em; } /* Before/after map: a full-height grab strip (touch and iOS), direct labels, a scale bar */ .atlas-page .maplab.direct { position: absolute; transform: translate(-50%, -50%); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: #8C6A3D; padding: 6px 8px; pointer-events: none; white-space: nowrap; } .atlas-page .maplab.direct.pre { background: #EDE7DA; color: var(--ink); border: 1px solid #C9C2B5; } @media (max-width: 600px) { .atlas-page .maplab.direct { font-size: 10px; } } /* Sector band inside a proof section: its last row, with context */ .atlas-page .in-proof.sector-band { background: none; border: 0; border-top: 1px solid var(--ink-14); margin-top: 36px; padding: 26px 0 0; } .atlas-page .in-proof.sector-band .wrap { padding: 0; } .atlas-page.atlas-foresight .in-proof.sector-band { background: none; border-top-color: var(--paper-22); } .atlas-page .in-proof.sector-band .sb-label { font-size: 12px; color: var(--ink-70); } .atlas-page.atlas-foresight .in-proof.sector-band .sb-label { color: var(--paper-74); } @media (max-width: 600px) { .atlas-page .sector-band ul { grid-template-columns: 1fr; } .atlas-page .sector-band li { border-left: 0; padding: 0; } } /* Phones: comfortable tap targets and legible functional text (conversion 14, 15, 16). The hit area grows through an overlay, not padding, so each link keeps its box: its margin above and its border-bottom underline stay put. */ @media (max-width: 991px) { .atlas-page :is(.text-link, .case .more a, .leadership-cta, .demo-next) { display: inline-block; position: relative; } .atlas-page :is(.text-link, .case .more a, .leadership-cta, .demo-next)::after { content: ""; position: absolute; inset: -11px 0; } .atlas-page button.demo-spot::before { content: ""; position: absolute; inset: -10px; } } @media (max-width: 600px) { .atlas-page .field label, .atlas-page .map-key, .atlas-page .spec th { font-size: 12px; } .atlas-page .maplab.road { font-size: 11px; } } .atlas-page .maplab.direct { text-shadow: none; } /* ═══ Round 6 launch review (visual QA) ═══ */ /* Small ochre numerals meet AA: the text token, full opacity (weight and the rail fill still mark the active stage) */ .atlas-page .demo-rank li.is-sel span { color: var(--ochre-text); }