/* ========================================================================= SBTi "Net-Zero Loop" experience — chassis stylesheet Design tokens lifted from the prior index.html / scope-1.html so the editorial identity carries over: ivory #FBFAF7, deep teal #0F6E56, amber #BA7517, Georgia display, Avenir Next body, Courier kickers. ========================================================================= */ :root { color-scheme: light; /* palette — light */ --bg: #FBFAF7; --surface: #FFFFFF; --surface-2: #F1EFE8; --ink: #1E2B26; --muted: #5C6B64; --hint: #606D66; --line: #E3E1D8; --line-strong: #C9C6BA; --teal: #0F6E56; --on-teal: #FFFFFF; --teal-ink: #085041; --teal-soft: #E1F5EE; --amber: #BA7517; --amber-text: #98590C; --amber-ink: #633806; --amber-soft: #FAEEDA; --gray-soft: #F1EFE8; --gray-ink: #444441; /* type */ --font-display: Georgia, "Times New Roman", serif; --font-body: "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-mono: "Courier New", Courier, monospace; /* shape */ --radius-lg: 14px; --radius-md: 10px; --radius-sm: 6px; /* layout */ --measure: 720px; --gutter: clamp(20px, 5vw, 48px); --rail-w: 84px; /* motion */ --ease: cubic-bezier(.16, 1, .3, 1); /* expo-out: fast start, long silky settle */ --dur: 220ms; } /* palette — dark. assets/boot.js resolves the OS preference (or the stored header-toggle choice) into before first paint, so this single block serves both "system dark" and "toggled dark". */ :root[data-theme="dark"] { color-scheme: dark; --bg: #141917; --surface: #1C2421; --surface-2: #222B27; --ink: #E8EDE9; --muted: #A7B3AC; --hint: #8FA098; --line: #2E3833; --line-strong: #3A453F; --teal: #5DCAA5; --on-teal: #141917; --teal-ink: #9FE1CB; --teal-soft: #0B3D31; --amber: #E2A04A; --amber-text: #FAC775; --amber-ink: #FAC775; --amber-soft: #4A3514; --gray-soft: #2A332E; --gray-ink: #D3D1C7; } /* ---- reset ---- */ * { box-sizing: border-box; } /* While the theme toggle swaps light/dark, freeze every transition for a frame so the page repaints in the new palette all at once. Otherwise the many border-color / background transitions animate out of sync and flash visible edges around cards and panels. theme.js adds/removes the class. */ :root.theme-switching, :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } /* subtle paper grain — pure CSS, no asset load */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .025; background-image: radial-gradient(circle at 25% 35%, currentColor .5px, transparent .6px), radial-gradient(circle at 70% 60%, currentColor .5px, transparent .6px); background-size: 7px 7px, 11px 11px; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- focus visibility (a11y) ---- */ :focus { outline: none; } :focus-visible { outline: 2.5px solid var(--teal); outline-offset: 3px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--teal); color: var(--on-teal); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; } .skip-link:focus { left: 12px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================= HEADER ========================================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 16px var(--gutter); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); } /* ---- jump menu: desktop inline nav ---- */ .hd-nav { margin-left: auto; display: none; gap: 18px; } @media (min-width: 1180px) { .hd-nav { display: flex; } } .hd-nav a { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .hd-nav a:visited { color: var(--muted); } .hd-nav a:hover { color: var(--ink); } .hd-nav a.is-current, .hd-nav a.is-current:visited { color: var(--teal); border-bottom-color: var(--teal); } .menu-list a:visited { color: var(--ink); } /* ---- jump menu: mobile button + overlay ---- */ .menu-btn { margin-left: auto; appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .menu-btn:hover { border-color: var(--teal); } @media (min-width: 1180px) { .menu-btn { display: none; } } /* ---- theme toggle (sun/moon) — static in index.html; flex `order` keeps it to the right of the JS-injected nav / menu button ---- */ .theme-btn { order: 1; flex: none; appearance: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-btn:hover { border-color: var(--teal); color: var(--ink); } .theme-btn svg { width: 16px; height: 16px; } .theme-btn .icon-sun { display: none; } :root[data-theme="dark"] .theme-btn .icon-sun { display: block; } :root[data-theme="dark"] .theme-btn .icon-moon { display: none; } .menu-overlay { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); padding: 92px var(--gutter) 40px; overflow-y: auto; opacity: 0; transition: opacity 280ms var(--ease); } .menu-overlay.is-open { opacity: 1; } .menu-close { position: absolute; top: 18px; right: var(--gutter); appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; } .menu-list { display: flex; flex-direction: column; max-width: var(--measure); margin: 0 auto; } .menu-list a { display: flex; align-items: baseline; gap: 16px; font-family: var(--font-display); font-size: clamp(24px, 5.2vw, 32px); color: var(--ink); text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease), transform 420ms var(--ease), color var(--dur) var(--ease); transition-delay: calc(var(--mi, 0) * 40ms); } .menu-overlay.is-open .menu-list a { opacity: 1; transform: none; } .menu-list a:hover, .menu-list a.is-current { color: var(--teal); } .menu-num { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--hint); } /* site title — the sole header wordmark, so it reads in ink, not hint. min-width/ellipsis let it yield to the menu + theme buttons rather than push them off-screen on narrow viewports. */ .site-header .ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } /* phones: tighten the title so it clears the menu + theme buttons */ @media (max-width: 599px) { .site-header .ctx { font-size: 11px; letter-spacing: .08em; } } /* small phones: drop the tail — "Net-Zero Standard" carries the name */ @media (max-width: 374px) { .site-header .ctx-tail { display: none; } } /* ========================================================================= PROGRESS RAIL — desktop loop SVG, mobile top bar ========================================================================= */ /* mobile top bar (default) */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; transform-origin: left center; transform: scaleX(0); background: var(--teal); } .rail { display: none; } @media (min-width: 1024px) { .progress-bar { display: none; } .rail { display: block; position: fixed; left: 0; top: 0; width: var(--rail-w); height: 100vh; z-index: 40; padding-top: 64px; pointer-events: none; } .rail-inner { position: sticky; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: auto; } .rail-loop { width: 48px; height: 48px; } .rail-loop .track { stroke: var(--line); stroke-width: 3; fill: none; } .rail-loop .fill { stroke: var(--teal); stroke-width: 3; fill: none; stroke-linecap: round; /* circumference of r=20 circle ≈ 125.66; set by JS, fallback full */ stroke-dasharray: 125.66; stroke-dashoffset: 125.66; transform: rotate(-90deg); transform-origin: center; } .rail-dots { display: flex; flex-direction: column; align-items: center; gap: 11px; margin: 0; padding: 0; list-style: none; } .rail-dot { --d: 8px; width: var(--d); height: var(--d); border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; padding: 0; cursor: pointer; position: relative; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); } .rail-dot:hover { transform: scale(1.25); border-color: var(--teal); } .rail-dot.is-active { background: var(--teal); border-color: var(--teal); transform: scale(1.2); } .rail-dot .tip { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 7px; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .rail-dot:hover .tip, .rail-dot:focus-visible .tip { opacity: 1; } } /* ========================================================================= LAYOUT — sections ========================================================================= */ .experience { position: relative; z-index: 1; } @media (min-width: 1024px) { .experience { padding-left: var(--rail-w); } } .chapter { position: relative; padding: clamp(52px, 8vh, 96px) var(--gutter); scroll-margin-top: 70px; } .chapter-inner { max-width: var(--measure); margin: 0 auto; } .chapter-inner > :last-child { margin-bottom: 0; } .headline, .hero-headline { text-wrap: balance; } .lede { text-wrap: pretty; } /* alternating tone to break the scroll */ .chapter:nth-of-type(even of .chapter) { background: color-mix(in srgb, var(--surface-2) 45%, var(--bg)); } .kicker { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; } .headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 14px; max-width: 18ch; } .lede { color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; max-width: 56ch; margin: 0 0 28px; } .chapter-num { font-family: var(--font-mono); font-size: 12.5px; color: var(--hint); letter-spacing: .1em; } /* ========================================================================= HERO ========================================================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: clamp(96px, 14vh, 160px) var(--gutter) clamp(72px, 12vh, 120px); overflow: hidden; scroll-margin-top: 0; } .hero-canvas-wrap { /* fixed so the field can linger as an ambient backdrop a few screens past the hero; hero3d.js drives opacity and disposes when it fades out */ position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: opacity; } .hero-canvas-wrap canvas { width: 100%; height: 100%; display: block; } /* CSS-gradient poster fallback (shown when no WebGL / reduced motion) */ .hero-poster { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); background: radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 60%), radial-gradient(90% 80% at 12% 90%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 55%), linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 70%, transparent)); } .hero-poster.is-on { opacity: 1; } .hero-poster::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--teal) 30%, transparent) 50%, transparent 62%); background-size: 200% 200%; mix-blend-mode: screen; } .hero-inner { position: relative; z-index: 2; max-width: var(--measure); margin: 0 auto; width: 100%; } .hero .kicker { color: var(--teal); } .hero-headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 9vw, 88px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; } .hero-sub { font-size: clamp(17px, 2.4vw, 22px); color: var(--muted); max-width: 46ch; line-height: 1.55; margin: 0 0 36px; } .hero-sub strong { color: var(--ink); font-weight: 600; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; padding: 15px 24px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); display: inline-flex; align-items: center; gap: 8px; } .btn-primary { background: var(--teal); color: var(--on-teal); } .btn-primary:hover { transform: translateY(-2px); text-decoration: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); text-decoration: none; } /* scroll cue */ .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--hint); display: flex; flex-direction: column; align-items: center; gap: 6px; } .scroll-cue .line { width: 1px; height: 28px; background: linear-gradient(var(--line-strong), transparent); animation: cuePulse 2.4s var(--ease) infinite; } @keyframes cuePulse { 0%, 100% { opacity: .3; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 34px var(--gutter) 56px; font-size: 14.5px; color: var(--hint); line-height: 1.6; text-align: center; } @media (min-width: 1024px) { .site-footer { padding-left: calc(var(--rail-w) + var(--gutter)); } } .site-footer { color: var(--muted); } .site-footer a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } /* Hero entrance — pure CSS so the headline paints (and is LCP) before any JS/CDN module arrives. Stagger order comes from document order (kicker → headline → sub → CTAs). */ .hero-enter { animation: heroRise .7s var(--ease, ease-out) both; animation-delay: calc(var(--he, 0) * 90ms); } .hero-inner > .hero-enter:nth-child(2) { --he: 1; } .hero-inner > .hero-enter:nth-child(3) { --he: 2; } .hero-inner > .hero-enter:nth-child(4) { --he: 3; } @keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ========================================================================= REVEAL UTILITIES — driven by [data-reveal]; JS adds .is-in ========================================================================= */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 850ms var(--ease), transform 850ms var(--ease); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-28px); } [data-reveal="right"] { transform: translateX(28px); } [data-reveal="scale"] { transform: scale(.96); } /* stagger children: set --i on each child */ [data-reveal-group] > * { opacity: 0; transform: translateY(16px); transition: opacity 750ms var(--ease), transform 750ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity, transform; } [data-reveal-group].is-in > * { opacity: 1; transform: none; } /* ========================================================================= REDUCED MOTION — instant reveals, no animation, full content parity ========================================================================= */ /* ========================================================================= =========================================================================== CHAPTER COMPONENTS — shared primitives + per-chapter styles =========================================================================== ========================================================================= */ /* ---- shared: req/opt badges (personalize.js populates data-req-a / data-req-b) ---- */ .req-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--gray-soft); color: var(--gray-ink); white-space: nowrap; max-width: 100%; } /* long dual-state badges must wrap inside narrow viewports */ @media (max-width: 480px) { .req-badge { white-space: normal; border-radius: var(--radius-sm); line-height: 1.5; } .req-badge .rb-text { white-space: normal; } } /* CSS-only fallback (no-JS): show the Category A side as a sensible default */ .req-badge::before { content: attr(data-req-a); } .req-badge[data-active="b"]::before { content: attr(data-req-b); } /* once personalize.js adopts a badge it injects .rb-text and we drop the ::before */ .req-badge.rb-js::before { content: none; } .req-badge .rb-text { display: inline-block; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .req-badge[data-state="required"] { background: var(--amber-soft); color: var(--amber-ink); } .req-badge[data-state="optional"] { background: var(--teal-soft); color: var(--teal-ink); } .req-badge[data-state="recommended"] { background: var(--gray-soft); color: var(--gray-ink); } /* default "both" form — neutral, low-key, since no choice has been made yet */ .req-badge[data-state="both"] { background: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); color: var(--muted); text-transform: none; letter-spacing: .02em; } /* staggered ripple: a quick lift + fade as the label swaps */ .req-badge.rb-flip .rb-text { transform: translateY(-3px); opacity: 0; } /* ---- Table 1 long-term labels: tap to reveal when the target is required ---- */ .lt-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px 3px 11px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: 100%; transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .lt-label .lt-tap { font-size: 13px; line-height: 1; opacity: .55; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .lt-label:hover { filter: brightness(.97); } .lt-label:hover .lt-tap { opacity: .9; } .lt-label:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .lt-label[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px currentColor; } .lt-label[aria-expanded="true"] .lt-tap { transform: rotate(45deg); opacity: .9; } .lt-label.lt-depends { background: var(--amber-soft); color: var(--amber-ink); } .lt-label.lt-optional { background: var(--teal-soft); color: var(--teal-ink); } .matrix-table .lt-label { margin-top: 2px; } /* the reveal box that sits underneath the table */ .lt-detail { margin: 14px 0 2px; padding: 16px 18px; position: relative; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius-sm); background: var(--surface-2); animation: lt-detail-in var(--dur) var(--ease); } @keyframes lt-detail-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .lt-detail-close { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; } .lt-detail-close:hover { background: var(--gray-soft); color: var(--ink); } .lt-detail-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .lt-panel { font-size: 13.5px; color: var(--muted); line-height: 1.65; } .lt-panel p { margin: 0 0 8px; } .lt-panel p:last-child { margin-bottom: 0; } .lt-panel-head { color: var(--ink); font-weight: 600; padding-right: 28px; } .lt-pill { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-right: 8px; vertical-align: 1px; } .lt-pill-amber { background: var(--amber-soft); color: var(--amber-ink); } .lt-pill-teal { background: var(--teal-soft); color: var(--teal-ink); } .lt-list { margin: 0; padding-left: 18px; } .lt-list li { margin: 0 0 7px; } .lt-list li:last-child { margin-bottom: 0; } .lt-list strong { color: var(--ink); } /* ---- shared: chips / tags ---- */ .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: var(--gray-soft); color: var(--gray-ink); line-height: 1.5; } .chip-teal { background: var(--teal-soft); color: var(--teal-ink); } .chip-amber { background: var(--amber-soft); color: var(--amber-ink); } /* ---- shared: fine-print expandable ---- */ .fineprint { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .fineprint-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; padding: 14px 18px; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; } .fineprint-toggle .chev { font-family: var(--font-mono); color: var(--hint); transition: transform var(--dur) var(--ease); flex-shrink: 0; } .fineprint[open] .fineprint-toggle .chev { transform: rotate(180deg); } .fineprint-body { display: none; padding: 0 18px 18px; color: var(--muted); font-size: 14px; line-height: 1.65; } .fineprint[open] .fineprint-body { display: block; } .fineprint-body code { font-family: var(--font-mono); font-size: 12.5px; color: var(--teal); } .fineprint-body p { margin: 0 0 10px; } .fineprint-body p:last-child { margin-bottom: 0; } /* nested collapsible: "could this apply to my business?" EIA checklist — a plain
box inside the fineprint, same body font size */ .eia-check { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; } .eia-check > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--ink); } .eia-check > summary::-webkit-details-marker { display: none; } .eia-chev { font-family: var(--font-mono); color: var(--hint); flex-shrink: 0; transition: transform var(--dur) var(--ease); } .eia-check[open] .eia-chev { transform: rotate(180deg); } .eia-intro { font-size: 14px; padding: 0 14px; } .eia-list { font-size: 14px; margin: 8px 0 14px; padding: 0 14px 0 32px; columns: 2; column-gap: 24px; } .eia-list li { margin: 0 0 5px; break-inside: avoid; } @media (max-width: 520px) { .eia-list { columns: 1; } } /* ---- shared: source footer link ---- */ .chapter-source { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--hint); } /* ---- shared: pull-quote ---- */ .pull-quote { border-left: 2px solid var(--teal); padding: 2px 0 2px 18px; margin: 28px 0; font-family: var(--font-display); font-size: clamp(18px, 2.6vw, 22px); font-style: italic; line-height: 1.45; color: var(--ink); } .pull-quote cite { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 12.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); } /* ========================================================================= #govern — flip cards + disclosure badge ========================================================================= */ .flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 8px; } .flip-card { perspective: 1200px; } .flip-card-inner { position: relative; display: grid; width: 100%; border-radius: var(--radius-lg); transition: transform 520ms var(--ease); transform-style: preserve-3d; cursor: pointer; } .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); } .flip-face { /* Stack both faces in the same grid cell so the card grows to fit its own content instead of a fixed height. */ grid-area: 1 / 1; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-face-back { transform: rotateY(180deg); background: var(--teal-soft); border-color: var(--teal); } .flip-face .ficon { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; } .flip-face .ftitle { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 0 0 8px; line-height: 1.3; } .flip-face .ftext { font-size: 13.5px; color: var(--muted); line-height: 1.55; } .flip-face-back .ftext { color: var(--teal-ink); } .flip-hint { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); } .flip-face-back .flip-hint { color: var(--teal); } /* ========================================================================= #baseline — assurance chip ========================================================================= */ .assurance-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .assurance-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink); } /* ========================================================================= SET TARGETS — Scope 1 / 2 / 3 (each now its own chapter) ========================================================================= */ /* S1 route cards (ported from scope-1.html) */ .route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; gap: 12px; margin-bottom: 8px; } .route-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .route-card:hover { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); transform: translateY(-2px); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--ink) 35%, transparent); } /* pin the chip row to the card base so the three routes read as one line */ .route-card { display: flex; flex-direction: column; } .route-card-head { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .route-card-head .chip { margin-top: auto; } .route-card-head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 18px; font-family: var(--font-body); color: inherit; position: relative; } .route-card-head .ricon { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } .route-card-head .rtitle { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin: 0 0 4px; } .route-card-head .rsub { font-size: 13px; color: var(--muted); margin: 0 0 10px; } .route-card-head .chev { position: absolute; top: 16px; right: 16px; color: var(--hint); font-size: 14px; transition: transform var(--dur) var(--ease); } .route-card.is-open .chev { transform: rotate(180deg); } .route-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease); } .route-card.is-open .route-detail { grid-template-rows: 1fr; } .route-detail-inner { overflow: hidden; } .route-detail p { margin: 0 16px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.6; } .route-detail code { font-family: var(--font-mono); font-size: 12.5px; color: var(--teal); } .route-bestfor strong { color: var(--ink); } /* S2 toggle + instrument chips */ .toggle-row { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 18px; background: var(--surface); } .toggle-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .toggle-btn:hover { border-color: var(--teal); color: var(--ink); } .toggle-btn.is-active { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .target-panel { display: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px; margin-bottom: 18px; } .target-panel.is-active { display: block; } .ptitle { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin: 0 0 8px; } .ptext { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0 0 12px; } .ptext code, .cat-note code, .fineprint-body code { font-family: var(--font-mono); font-size: 12.5px; color: var(--teal); } /* Scope 2 procurement guide */ .anchor-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .anchor-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.35; text-decoration: none; } .anchor-pill:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; } .s2-block, .s2-major-box { scroll-margin-top: 84px; margin-top: 28px; } .s2-callout, .s2-major-box, .s2-note-box, .s2-mini-card, .s2-status-card, .s2-claim-pair, .s2-final-checklist { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .s2-callout { padding: 20px 22px; margin-bottom: 24px; border-color: color-mix(in srgb, var(--teal) 32%, var(--line)); background: color-mix(in srgb, var(--teal-soft) 28%, var(--surface)); } .callout-kicker, .s2-card-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 0 8px; } .s2-callout-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.25; margin: 0 0 8px; } .s2-callout p:not(.callout-kicker) { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; } .s2-callout p:last-child { margin-bottom: 0; } .s2-claim-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .legend-chip, .claim-pill { display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; line-height: 1.35; } .legend-physical, .claim-pill-physical { background: var(--teal-soft); color: var(--teal-ink); } .legend-alignment, .claim-pill-alignment { background: var(--gray-soft); color: var(--gray-ink); } .legend-system, .claim-pill-warning { background: var(--amber-soft); color: var(--amber-ink); } .s2-card-grid, .s2-example-grid, .s2-claim-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .s2-mini-card, .s2-status-card, .s2-claim-pair { padding: 16px 18px; } .s2-mini-card h4, .s2-note-box h4, .s2-status-card h4 { font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1.3; margin: 0 0 8px; } .s2-mini-card p, .s2-status-card p, .s2-note-box p, .s2-claim-pair p, .s2-ranked-list, .s2-timeline, .s2-checklist { font-size: 13.5px; color: var(--muted); line-height: 1.6; } .s2-mini-card p:last-child, .s2-status-card p:last-child, .s2-note-box p:last-child, .s2-claim-pair p:last-child { margin-bottom: 0; } .s2-mini-card.claim-physical { border-color: color-mix(in srgb, var(--teal) 28%, var(--line)); } .s2-mini-card.claim-alignment { border-color: var(--line-strong); } .s2-mini-card.claim-system { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); } .s2-major-box { padding: 20px 22px; border-color: color-mix(in srgb, var(--amber) 36%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 18%, var(--surface)); } .s2-major-box > p { font-size: 14.5px; color: var(--muted); line-height: 1.65; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .table-scroll:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 3px; } /* tables sit flush inside the scroll frame — the wrapper owns the margin */ .table-scroll > .matrix-table { margin: 0; } .matrix-table.s2-table { min-width: 580px; margin: 0; border: 0; } .matrix-table.s2-table th, .matrix-table.s2-table td { border-left: 0; } .matrix-table.s2-table th:last-child, .matrix-table.s2-table td:last-child { border-right: 0; } .matrix-table.s2-table tr:first-child th { border-top: 0; } .matrix-table.s2-table tbody tr:last-child td { border-bottom: 0; } .s2-compact-table { min-width: 640px; } .s2-warning, .s2-rule { border-left: 2px solid var(--amber); background: color-mix(in srgb, var(--amber-soft) 48%, var(--surface)); color: var(--amber-ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 13px; font-size: 13.5px; line-height: 1.6; margin: 14px 0 0; } .s2-warning > p:first-child { margin: 0 0 12px; } .claim-rewrite { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 12px; } .claim-rewrite:first-of-type { margin-top: 0; } .claim-rewrite .claim-before, .claim-rewrite .claim-after { margin: 0; padding: 8px 11px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; } .claim-rewrite .claim-before { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line)); color: var(--amber-ink); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--amber-ink) 55%, transparent); } .claim-rewrite .claim-after { background: color-mix(in srgb, var(--teal-soft) 50%, var(--surface)); border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); color: var(--teal-ink); font-weight: 500; } .claim-rewrite .claim-arrow { margin: 0; text-align: center; font-size: 18px; line-height: 1; color: var(--teal); } .s2-rule { border-left-color: var(--teal); background: color-mix(in srgb, var(--teal-soft) 42%, var(--surface)); color: var(--teal-ink); } .s2-note-box { margin-top: 16px; padding: 16px 18px; } .s2-ranked-list, .s2-timeline { padding-left: 20px; margin: 10px 0 0; } .s2-ranked-list li, .s2-timeline li { margin-bottom: 6px; } .s2-ranked-list li:last-child, .s2-timeline li:last-child { margin-bottom: 0; } .s2-status-card.is-good { border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); background: color-mix(in srgb, var(--teal-soft) 22%, var(--surface)); } .s2-status-card.is-watch { border-color: var(--line-strong); } .s2-status-card.is-bad { border-color: color-mix(in srgb, var(--amber) 34%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 18%, var(--surface)); } .s2-hourly-bars { width: 100%; max-width: none; margin-top: 18px; } .s2-checklist-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 10px; } .s2-checklist { list-style: none; padding: 0; margin: 0; } .s2-checklist li { position: relative; padding-left: 18px; margin-bottom: 8px; } .s2-checklist li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); } .s2-checklist li:last-child { margin-bottom: 0; } .s2-checklist-columns { columns: 2 260px; column-gap: 26px; } .s2-checklist-columns li { break-inside: avoid; } .s2-claim-pair { display: flex; flex-direction: column; gap: 6px; } .s2-claim-pair p { margin: 0; } .claim-label { align-self: flex-start; font-family: var(--font-mono); font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-top: 8px !important; } .claim-label:first-child { margin-top: 0 !important; } .claim-label.bad { background: var(--amber-soft); color: var(--amber-ink); } .claim-label.better { background: var(--teal-soft); color: var(--teal-ink); } .s2-final-checklist { padding: 18px 20px; border-color: color-mix(in srgb, var(--teal) 34%, var(--line)); } .s2-expander-card { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .s2-expander-card.s2-major-box, .s2-expander-card.s2-final-checklist { padding: 0; } .s2-expander-toggle { appearance: none; width: 100%; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; text-align: left; font-family: var(--font-body); } .s2-expander-toggle:hover { background: color-mix(in srgb, var(--teal-soft) 24%, transparent); } .s2-expander-copy { display: grid; gap: 4px; min-width: 0; } .s2-expander-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); line-height: 1.35; } .s2-expander-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.25; } .s2-expander-icon { flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 999px; display: grid; place-items: center; color: var(--hint); font-family: var(--font-mono); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .s2-expander-card.is-open .s2-expander-icon { transform: rotate(180deg); border-color: var(--teal); color: var(--teal); } .s2-expander-body { display: none; padding: 0 18px 18px; } .s2-expander-card.is-open .s2-expander-body { display: block; } .s2-major-box .s2-expander-body > p { font-size: 14.5px; color: var(--muted); line-height: 1.65; } .s2-expander-body > :first-child { margin-top: 0; } .s2-expander-body > :last-child { margin-bottom: 0; } @media (max-width: 620px) { .anchor-pill { min-height: 32px; font-size: 11.5px; padding: 6px 10px; } .s2-callout, .s2-major-box, .s2-final-checklist { padding: 17px 16px; } .s2-card-grid, .s2-example-grid, .s2-claim-pairs { grid-template-columns: 1fr; } .legend-chip, .claim-pill { border-radius: var(--radius-sm); } .s2-expander-toggle { padding: 14px 15px; } .s2-expander-body { padding: 0 15px 16px; } } /* S3 — 5% boundary mini-interactive */ .boundary-tool { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px 22px; margin-bottom: 18px; } .boundary-profiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .boundary-profile-btn { font-family: var(--font-body); font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); } .boundary-profile-btn:hover { border-color: var(--teal); color: var(--ink); } .boundary-profile-btn.is-active { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .boundary-profile-note { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; } .boundary-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .boundary-controls label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); } .boundary-controls input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--teal); } .boundary-controls .bval { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--teal); min-width: 3.5ch; text-align: right; } .boundary-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .boundary-bar { flex: 1; min-width: 8px; border-radius: 4px 4px 0 0; background: var(--gray-soft); transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease), outline-color var(--dur) var(--ease); position: relative; cursor: default; } .boundary-bar.in-boundary { background: var(--teal); } .boundary-bar:hover { opacity: .82; } .boundary-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .boundary-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .swatch-in { background: var(--teal); } .swatch-out { background: var(--gray-soft); border: 1px solid var(--line-strong); } .boundary-readout { margin-top: 14px; font-size: 13.5px; color: var(--muted); } .boundary-readout strong { color: var(--ink); } /* S3 — Table 3 category explorer */ .cat-explorer { margin-top: 8px; } .cat-group-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); margin: 14px 0 8px; } .cat-row { display: flex; flex-wrap: wrap; gap: 7px; } .cat-btn { font-family: var(--font-body); font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); } .cat-btn:hover { border-color: var(--teal); color: var(--ink); } .cat-btn.is-active { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .cat-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 16px 18px; } .cat-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .cat-panel-head .cname { font-family: var(--font-display); font-size: 15px; font-weight: 500; } .cat-panel-head .cgroup { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; background: var(--teal-soft); color: var(--teal-ink); white-space: nowrap; } .cat-opts { margin-bottom: 10px; } .cat-opt { display: inline-block; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; margin: 0 6px 6px 0; } .cat-opt.on { background: var(--teal-soft); color: var(--teal-ink); } .cat-opt.on::before { content: "✓ "; } .cat-opt.off { background: transparent; border: 1px dashed var(--line-strong); color: var(--hint); } .cat-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; } /* Table 1 matrix (near-term / long-term × scopes) */ .matrix-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 18px 0; } .matrix-table th, .matrix-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; } .matrix-table th { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); background: var(--surface-2); font-weight: 600; } .matrix-table td:first-child { font-weight: 600; } .matrix-table .req-badge { margin-top: 4px; } /* ========================================================================= #prove — claim-type cards + cycle dial ========================================================================= */ .claim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; } .claim-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px; } .claim-card .ctitle { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin: 0 0 6px; } .claim-card .ckicker { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 0 10px; } .claim-card .ctext { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; } .claim-sample { border-left: 2px solid var(--teal); padding: 8px 0 8px 12px; font-style: italic; font-size: 13px; color: var(--ink); background: var(--teal-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .claim-sample .slabel { display: block; font-family: var(--font-mono); font-size: 12.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 4px; } /* cycle dial */ .cycle-dial-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px 40px; align-items: center; margin: 24px 0 8px; } @media (max-width: 600px) { .cycle-dial-wrap { grid-template-columns: 1fr; justify-items: center; } .cycle-dial-wrap .cycle-legend { justify-self: stretch; } } .cycle-dial { position: relative; width: 210px; height: 210px; } .cycle-dial svg { display: block; width: 100%; height: 100%; } .cycle-dial .ring { fill: none; stroke: var(--line); stroke-width: 2; } .cycle-dial .seg { fill: none; stroke-width: 10; stroke-linecap: round; } .cycle-dial .seg-annual { stroke: var(--teal); } .cycle-dial .seg-eoc { stroke: var(--amber); } .cycle-dial .center-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); pointer-events: none; } .cycle-dial .center-num { font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--ink); } .cycle-legend { font-size: 13.5px; color: var(--muted); line-height: 1.8; } .cycle-legend .lg-item { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .cycle-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .cycle-legend .lg-annual { background: var(--teal); } .cycle-legend .lg-eoc { background: var(--amber); } .cycle-legend strong { color: var(--ink); } .timeline-you { margin: 8px 0 0; padding: 9px 12px; border-left: 2px solid var(--teal); background: color-mix(in srgb, var(--teal-soft) 40%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); } .hy-tag { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-right: 4px; } /* ========================================================================= #oer — tier cards + preset calculator ========================================================================= */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 26px; } .tier-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 20px; display: flex; flex-direction: column; } .tier-card.is-leadership { border-color: var(--amber); } .tier-card .tname { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin: 0 0 4px; } .tier-card .tcoverage { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--teal); margin: 6px 0 2px; } .tier-card.is-leadership .tcoverage { color: var(--amber); } .tier-card .tcoverage-detail { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; } .tier-card .tprice { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--gray-soft); color: var(--gray-ink); display: inline-block; margin-bottom: 12px; width: fit-content; } .tier-card .tapproach { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; } .tier-card .tnote { margin-top: 12px; font-size: 12.5px; color: var(--hint); border-top: 1px solid var(--line); padding-top: 10px; } /* preset calculator */ .calc-box { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 20px 22px; } .calc-box .ptitle { margin: 0 0 10px; } .calc-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .calc-result-label { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin: 0 0 4px; } .calc-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 4px; } .calc-result .rcell { background: var(--surface-2); border-radius: var(--radius-md); padding: 12px 14px; } .calc-result .rnum { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); } .calc-result .rlbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; } .calc-result .rcell.is-highlight .rnum { color: var(--teal); } .calc-result .rcell.is-leadership .rnum { color: var(--amber-text); } /* ========================================================================= #timeline — 2026→2050 scroll-revealed timeline ========================================================================= */ .timeline-line { position: relative; margin: 28px 0 8px; padding-left: 28px; border-left: 2px solid var(--line); } .timeline-item { position: relative; padding: 0 0 30px 24px; } .timeline-item:last-child { padding-bottom: 4px; } .timeline-item::before { content: ""; position: absolute; left: -33px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); background: var(--teal); box-shadow: 0 0 0 2px var(--line); } .timeline-item.tone-amber::before { background: var(--amber); } .timeline-item.tone-gray::before { background: var(--hint); } .timeline-date { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 0 4px; } .timeline-item.tone-amber .timeline-date { color: var(--amber-text); } .timeline-item.tone-gray .timeline-date { color: var(--hint); } .timeline-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 0 0 4px; } .timeline-text { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } /* ========================================================================= #about — bio / contact ========================================================================= */ .about-grid { display: grid; gap: 16px; } .about-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 20px 22px; } .about-card .alabel { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; } .about-card .awho { font-size: 17px; font-weight: 600; margin: 0 0 2px; } .about-card .arole { font-size: 13px; color: var(--teal); font-weight: 500; margin: 0 0 12px; } /* name on the left, LinkedIn link on the right */ .about-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 12px; } .about-head .arole { margin-bottom: 0; } .about-head .about-link { margin-top: 0; } .about-card p { margin: 0 0 12px; font-size: 14.5px; color: var(--muted); line-height: 1.65; } .about-card p:last-child { margin-bottom: 0; } .about-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--teal); font-weight: 500; font-size: 14px; } /* ========================================================================= PERSONALIZATION ENGINE (#category) ========================================================================= */ .cat-engine { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px 28px; align-items: start; margin-top: 6px; } .cat-controls { display: flex; flex-direction: column; gap: 18px; border: 0; margin: 0; padding: 0; } .cat-field { border: 0; margin: 0; padding: 0; } .cat-field legend { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); margin: 0 0 8px; padding: 0; } .seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .seg-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .seg-btn:hover { color: var(--ink); } .seg-btn.is-on { background: var(--surface); color: var(--teal-ink); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent); } .seg-btn:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; } /* On phones the toggle groups span the full column so every row lines up edge-to-edge — otherwise the shorter groups sit left with a big right gap and the form reads as off-centre against the (centred) verdict card. */ @media (max-width: 600px) { .seg { display: flex; flex-wrap: wrap; width: 100%; } .seg-btn { flex: 1 1 auto; text-align: center; } } /* ---- verdict card ---- */ .cat-verdict { display: flex; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 22px 24px; min-height: 132px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .cat-verdict[data-cat="a"] { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 30%, var(--surface)); } .cat-verdict[data-cat="b"] { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: color-mix(in srgb, var(--teal-soft) 30%, var(--surface)); } .cv-stamp { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; width: 92px; } .cv-cat { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .18em; color: var(--hint); margin-bottom: -2px; } .cv-letter { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 9vw, 72px); line-height: 1; letter-spacing: -.02em; color: var(--muted); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .cat-verdict[data-cat="none"] .cv-letter { font-size: clamp(28px, 5vw, 40px); } .cat-verdict[data-cat="a"] .cv-letter { color: var(--amber); } .cat-verdict[data-cat="b"] .cv-letter { color: var(--teal); } .cv-body { min-width: 0; } .cv-headline { font-family: var(--font-display); font-size: clamp(17px, 2.3vw, 21px); font-weight: 500; line-height: 1.2; margin: 0 0 7px; } .cv-explain { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; max-width: 42ch; } .cv-reset { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .cv-reset:hover { color: var(--ink); border-color: var(--ink); } .cv-reset:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; } .cat-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--hint); line-height: 1.6; margin: 4px 0 0; max-width: 70ch; } .cat-note strong { color: var(--muted); } .cat-emtest { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 8px; cursor: pointer; color: var(--muted); } .cat-emtest input { margin-top: 2px; accent-color: var(--teal); flex: 0 0 auto; } @media (max-width: 760px) { .cat-engine { grid-template-columns: 1fr; } } /* ========================================================================= IMPLEMENTATION-HIERARCHY LADDER (#implement) Static 3-rung list with a teal spine — no scroll states, CSS only. ========================================================================= */ .ladder-stage { padding: 12px var(--gutter) 8px; } .ladder { position: relative; list-style: none; margin: 0 auto; padding: 0 0 0 34px; max-width: var(--measure); width: 100%; } /* teal spine threading the three rung marks */ .ladder::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--teal); } .rung { position: relative; padding: 14px 0 28px; } .rung:last-child { padding-bottom: 0; } .rung-mark { position: absolute; left: -34px; top: 14px; width: 24px; height: 24px; border-radius: 999px; background: var(--teal); border: 2px solid var(--teal); display: flex; align-items: center; justify-content: center; } .rung-num { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--on-teal); } .rung-tier { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 0 6px; } .rung-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 3vw, 27px); line-height: 1.14; margin: 0 0 8px; } .rung-text { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; max-width: 54ch; } .rung-text strong { color: var(--ink); } .rung-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .rung-claim { font-size: 13px; line-height: 1.5; margin: 0; padding: 9px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); } .claim-tag { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-right: 8px; } .rung-claim.claim-company { background: color-mix(in srgb, var(--teal-soft) 45%, var(--surface)); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); color: var(--teal-ink); } .rung-claim.claim-company .claim-tag { background: var(--teal-ink); color: var(--surface); } .rung-claim.claim-system { background: color-mix(in srgb, var(--amber-soft) 40%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); color: var(--amber-ink); } .rung-claim.claim-system .claim-tag { background: var(--amber-ink); color: var(--surface); } /* ========================================================================= Hourly-matching bars (grow on reveal) ========================================================================= */ .hourly { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 22px 24px 18px; margin-bottom: 18px; } .hourly-bars { display: flex; align-items: flex-end; gap: 16px; height: 168px; margin-bottom: 14px; } .hb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; } .hb-fill { position: relative; height: 0; border-radius: 8px 8px 0 0; background: var(--amber-soft); display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; transition: height 720ms var(--ease); } .hb:nth-child(2) .hb-fill { background: color-mix(in srgb, var(--amber-soft) 60%, var(--amber) 40%); transition-delay: 90ms; } .hb.is-peak .hb-fill { background: var(--amber-text); transition-delay: 180ms; } /* bar heights keyed off data-pct (markup carries no inline styles) */ .hb[data-pct="50"] { --pct: 50%; } .hb[data-pct="75"] { --pct: 75%; } .hb[data-pct="90"] { --pct: 90%; } .hourly.is-grown .hb-fill { height: var(--pct); } /* compact, always-grown variant for the scope-2 fine print */ .hourly-bars.hourly-mini { height: 120px; gap: 10px; margin: 4px 0 12px; } .hourly-mini .hb-fill { height: var(--pct); transition: none; } .hb-num { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--amber-ink); } .hb.is-peak .hb-num { color: var(--surface); } .hb-label { font-size: 12.5px; color: var(--muted); margin-top: 8px; } .hourly-note { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; } .hourly-note strong { color: var(--ink); } /* scope-2 hourly bars: fixed-height track keeps 50/75/90 proportional (labels no longer eat into the bar height), with a green scale where a higher percentage reads as a deeper green */ .s2-hourly-bars { height: auto; align-items: flex-end; } .s2-hourly-bars .hb { height: auto; } .s2-hourly-bars .hb-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 120px; } .s2-hourly-bars .hb-fill { width: 100%; height: var(--pct); transition: none; background: color-mix(in srgb, var(--teal) 22%, var(--surface)); } .s2-hourly-bars .hb:nth-child(2) .hb-fill { background: color-mix(in srgb, var(--teal) 52%, var(--surface)); } .s2-hourly-bars .hb.is-peak .hb-fill { background: var(--teal); } .s2-hourly-bars .hb-num { color: var(--teal-ink); } .s2-hourly-bars .hb.is-peak .hb-num { color: var(--surface); } /* scope-2 "what to do next" — short numbered action list */ .s2-next-actions { list-style: none; counter-reset: na; padding: 0; margin: 14px 0 0; } .s2-next-actions li { counter-increment: na; position: relative; padding: 1px 0 0 34px; margin-bottom: 12px; font-size: 14px; line-height: 1.55; color: var(--muted); } .s2-next-actions li:last-child { margin-bottom: 0; } .s2-next-actions li::before { content: counter(na); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .s2-next-actions li strong { color: var(--ink); } /* hourly-matching: mandatory-vs-optional infographic above the bar chart */ .hm-mandate { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; margin: 16px 0 14px; } .hm-mandate-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface); } .hm-mandate-item.is-required { border-color: color-mix(in srgb, var(--teal) 38%, var(--line)); background: color-mix(in srgb, var(--teal-soft) 24%, var(--surface)); } .hm-mandate-item.is-optional { border-color: color-mix(in srgb, var(--amber) 38%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 22%, var(--surface)); } .hm-mandate-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; } .is-required .hm-mandate-tag { background: var(--teal); color: var(--surface); } .is-optional .hm-mandate-tag { background: var(--amber); color: var(--surface); } .hm-mandate-item h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); } .hm-mandate-item p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); } .hm-mandate-item p strong { color: var(--ink); } .hm-mandate-arrow { align-self: center; font-family: var(--font-display); font-size: 22px; color: var(--hint); } .hm-leader-q { margin: 0 0 22px; font-size: 15px; text-align: center; color: var(--ink); } .hm-leader-q strong { color: var(--teal-ink); } @media (max-width: 600px) { .hm-mandate { grid-template-columns: 1fr; } .hm-mandate-arrow { transform: rotate(90deg); } } /* scope-2 "go deeper" collapsible — slightly more prominent than fineprint */ .s2-go-deeper { margin-top: 22px; } .s2-go-deeper-toggle { align-items: flex-start; padding: 18px 20px; } .s2-go-deeper-head { display: flex; flex-direction: column; gap: 4px; } .s2-go-deeper-head .kicker { margin: 0; font-size: 11.5px; } .s2-go-deeper-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.2; color: var(--ink); } .s2-go-deeper-toggle .chev { margin-top: 4px; } .s2-go-deeper-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.55; } .s2-go-deeper-nav { margin: 0 0 28px; } .s2-deep-block { margin: 0; scroll-margin-top: 84px; } .s2-deep-block + .s2-deep-block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); } @media (max-width: 767px) { .ladder-stage { padding: 8px var(--gutter); } } /* ========================================================================= SHARED TEXT STYLES & SPACING UTILITIES Extracted from former inline style="" attributes in index.html. Defined last so they win same-specificity ties against component rules. ========================================================================= */ .sub-h3 { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 28px 0 8px; } .muted-note { font-size: 13.5px; color: var(--muted); margin: 0; } .micro-note { font-size: 12.5px; color: var(--hint); margin: 8px 0 0; } .u-mt0 { margin-top: 0; } .u-mt8 { margin-top: 8px; } .u-mt12 { margin-top: 12px; } .u-mt24 { margin-top: 24px; } .u-mt28 { margin-top: 28px; } .u-mb0 { margin-bottom: 0; } .u-mb4 { margin-bottom: 4px; } .u-mb12 { margin-bottom: 12px; } .u-mb14 { margin-bottom: 14px; } .u-mb18 { margin-bottom: 18px; } /* ========================================================================= READABILITY OVER THE LIVE FIELD — HERO + TIMELINE ONLY --------------------------------------------------------------------------- Append this block to assets/experience.css (anywhere after the base palette / :root tokens — it only references --bg). The Three.js trajectory drifts behind the hero copy and trails, faintly, behind the timeline. Two protections keep type crisp: (1) a diffused "cloud" of page colour pooled behind the reading column (a blurred ::before, z-index:-1, sitting above the field but below the text inside an isolated stacking context), and (2) a soft halo — text-shadow in the page colour — on exposed type. Both are built from --bg, so they adapt to the theme automatically (light-on-light by day, dark-on-dark at night). Under reduced-motion the static poster shows instead, so the cloud + halos are dropped. ========================================================================= */ /* ---------- HERO ---------- */ .hero-inner { isolation: isolate; } .hero-inner::before { content: ""; position: absolute; z-index: -1; inset: -16% -18% -22% -16%; background: radial-gradient(58% 66% at 33% 47%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 42%, color-mix(in srgb, var(--bg) 30%, transparent) 64%, transparent 80%); filter: blur(26px); pointer-events: none; } .hero-headline { text-shadow: 0 2px 30px var(--bg), 0 0 10px color-mix(in srgb, var(--bg) 85%, transparent); } .hero .kicker, .hero-sub { text-shadow: 0 1px 18px var(--bg), 0 0 6px color-mix(in srgb, var(--bg) 80%, transparent); } .hero-sub strong { text-shadow: inherit; } /* ---------- TIMELINE ---------- */ /* the timeline is text on a bare track (no card backing), so the whole section gets a tall diffused page-colour cloud pooled behind the reading column — covering the heading and every dated entry. */ /* clip the decorative cloud's horizontal bleed (it's set with negative side insets) so it can't push the page wider than the viewport; vertical bleed stays visible so the cloud still pools above/below the section. */ #timeline .chapter-inner { position: relative; isolation: isolate; overflow-x: clip; } #timeline .chapter-inner::before { content: ""; position: absolute; z-index: -1; inset: -6% -8%; background: radial-gradient(56% 92% at 30% 48%, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 64%, transparent) 50%, color-mix(in srgb, var(--bg) 24%, transparent) 70%, transparent 84%); filter: blur(32px); pointer-events: none; } #timeline .kicker, #timeline .headline, #timeline .lede, .timeline-date, .timeline-title, .timeline-text { text-shadow: 0 1px 14px var(--bg), 0 0 5px color-mix(in srgb, var(--bg) 80%, transparent); } /* ---------- ABOUT / CONTACT — net-zero reprise field behind the closing copy The .about-card surfaces are opaque, so only the section heading column sits over the returning field. A diffused page-colour cloud pools behind it, with halos on the exposed type — same recipe as hero/timeline, scoped here so the reprise never costs legibility. */ #about .chapter-inner { position: relative; isolation: isolate; overflow-x: clip; } #about .chapter-inner::before { content: ""; position: absolute; z-index: -1; inset: -8% -8% auto -8%; height: 62%; background: radial-gradient(60% 74% at 32% 30%, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 50%, color-mix(in srgb, var(--bg) 24%, transparent) 70%, transparent 82%); filter: blur(30px); pointer-events: none; } #about .kicker, #about .headline, #about .lede, .site-footer { text-shadow: 0 1px 14px var(--bg), 0 0 5px color-mix(in srgb, var(--bg) 80%, transparent); } /* The foam band sits right behind the footer, so the closing credit gets the same treatment as the hero copy: a diffused page-colour cloud pooled behind the text (above the field, below the type via the footer's own stacking context) plus the halo above — keeping the line highly visible over the dots. */ .site-footer { isolation: isolate; overflow-x: clip; } .site-footer::before { content: ""; position: absolute; z-index: -1; inset: -40% -6%; background: radial-gradient(72% 130% at 50% 50%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 66%, transparent) 44%, color-mix(in srgb, var(--bg) 24%, transparent) 68%, transparent 82%); filter: blur(24px); pointer-events: none; } /* ========================================================================= COMPANY TARGET LOOKUP — hero search overlay (assets/target-lookup.js) ========================================================================= */ .lookup-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px, 6vh, 80px) var(--gutter) 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); opacity: 0; transition: opacity 260ms var(--ease); } .lookup-overlay[hidden] { display: none; } .lookup-overlay.is-open { opacity: 1; } .lookup-panel { position: relative; width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--ink) 50%, transparent); padding: clamp(22px, 4vw, 36px); transform: translateY(12px) scale(.99); transition: transform 320ms var(--ease); } .lookup-overlay.is-open .lookup-panel { transform: none; } .lookup-close { position: absolute; top: 14px; right: 14px; appearance: none; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .lookup-close:hover { border-color: var(--teal); color: var(--teal); } .lookup-panel .kicker { color: var(--teal); margin: 0 0 6px; } .lookup-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 5vw, 36px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; } .lookup-intro { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin: 0 0 20px; max-width: 52ch; } .lookup-meta { color: var(--hint); } .lookup-search { position: relative; display: flex; align-items: center; } .lookup-search-icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--hint); pointer-events: none; } .lookup-input { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 14px 16px 14px 44px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .lookup-input::placeholder { color: var(--hint); } .lookup-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } .lookup-status { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--hint); margin: 12px 2px 8px; min-height: 1em; } .lookup-results { display: flex; flex-direction: column; gap: 8px; max-height: 48vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px 2px; } .lk-item { /* Keep natural height: in the flex-column results list, the default flex-shrink would squash items to fit max-height instead of letting the container scroll (most visible on phones, where max-height is low). */ flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; } .lk-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 12px; width: 100%; appearance: none; background: transparent; border: 0; text-align: left; cursor: pointer; padding: 13px 16px; font-family: var(--font-body); color: var(--ink); transition: background var(--dur) var(--ease); } .lk-row:hover { background: var(--surface-2); } .lk-name { grid-column: 1; font-size: 15.5px; font-weight: 600; } .lk-name mark { background: var(--teal-soft); color: var(--teal-ink); border-radius: 3px; padding: 0 1px; } .lk-sub { grid-column: 1; font-size: 13px; color: var(--muted); } .lk-chev { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--hint); transition: transform var(--dur) var(--ease); } .lk-row[aria-expanded="true"] .lk-chev { transform: rotate(180deg); } .lk-pill { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: var(--gray-soft); color: var(--gray-ink); } .lk-pill--good { background: var(--teal-soft); color: var(--teal-ink); } .lk-pill--pending { background: var(--amber-soft); color: var(--amber-ink); } .lk-pill--off { background: var(--gray-soft); color: var(--muted); } @media (max-width: 520px) { .lk-pill { display: none; } } .lk-detail { border-top: 1px solid var(--line); padding: 16px; background: var(--surface); } .lk-dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 16px; margin: 0 0 14px; } .lk-dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--hint); } .lk-dd { font-size: 14px; color: var(--ink); } .lk-language { font-size: 14px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 14px; margin: 0 0 12px; } .lk-updated { font-family: var(--font-mono); font-size: 11.5px; color: var(--hint); margin: 0 0 12px; } .lk-dashlink { font-size: 14px; font-weight: 600; color: var(--teal); } .lookup-foot { font-size: 12.5px; color: var(--hint); line-height: 1.55; margin: 16px 0 0; } .lookup-foot a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .lookup-overlay, .lookup-panel { transition: none; } } /* ========================================================================= ROLE ONE-PAGER — chooser + printable briefs (assets/one-pager.js) Reuses the .lookup-overlay base (fixed, blur, opacity, [hidden]). ========================================================================= */ .op-panel { max-width: 800px; } .op-accent--teal { --op-accent: var(--teal); --op-accent-soft: var(--teal-soft); --op-accent-ink: var(--teal-ink); } /* On phones the one-pager becomes a full-height scrolling sheet so the chooser and long briefs always have room and scroll cleanly (iOS Safari leaves a fixed overlay's bottom unreachable without a dynamic height). */ @media (max-width: 600px) { .op-overlay { height: 100dvh; padding: 0; } .op-panel { max-width: none; min-height: 100dvh; border: 0; border-radius: 0; padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); } } .op-accent--amber { --op-accent: var(--amber); --op-accent-soft: var(--amber-soft); --op-accent-ink: var(--amber-ink); } /* ---- chooser ---- */ .op-role-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; } @media (min-width: 680px) { .op-role-grid { grid-template-columns: repeat(3, 1fr); } } .op-role-card { --op-accent: var(--teal); --op-accent-soft: var(--teal-soft); --op-accent-ink: var(--teal-ink); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; appearance: none; cursor: pointer; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px 18px; font-family: var(--font-body); color: var(--ink); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .op-role-card--amber { --op-accent: var(--amber); --op-accent-soft: var(--amber-soft); --op-accent-ink: var(--amber-ink); } .op-role-card:hover { border-color: var(--op-accent); transform: translateY(-3px); box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--ink) 60%, transparent); } .op-role-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 11px; background: var(--op-accent-soft); color: var(--op-accent-ink); } .op-role-icon svg { width: 22px; height: 22px; } .op-role-name { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.15; } .op-role-tag { font-size: 13.5px; color: var(--muted); line-height: 1.45; } .op-role-go { margin-top: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--op-accent); } /* ---- sheet (a rendered one-pager) ---- */ .op-sheet-bar { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 18px; gap: 12px; } .op-back, .op-print { appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .op-back:hover, .op-print:hover { border-color: var(--teal); color: var(--teal); } .op-print { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } .op-print:hover { color: var(--on-teal); filter: brightness(1.06); } .op-sheet-head { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 18px; border-bottom: 2px solid var(--op-accent, var(--teal)); margin-bottom: 22px; } .op-sheet-icon { flex: none; display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 13px; background: var(--op-accent-soft, var(--teal-soft)); color: var(--op-accent-ink, var(--teal-ink)); } .op-sheet-icon svg { width: 28px; height: 28px; } .op-sheet-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 4.5vw, 32px); line-height: 1.05; letter-spacing: -.02em; margin: 2px 0 4px; } .op-sheet-tag { font-size: 14.5px; color: var(--muted); line-height: 1.4; margin: 0; } .op-lede { font-size: 16.5px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; } .op-lede em { font-style: italic; color: var(--muted); } .op-section { margin: 0 0 26px; } .op-section-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--op-accent, var(--teal)); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .op-fine { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; } /* stat cards */ .op-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 26px; } @media (max-width: 560px) { .op-stats { grid-template-columns: 1fr; } } .op-stat { background: var(--surface-2); border-radius: var(--radius-md); padding: 16px; border-left: 3px solid var(--op-accent, var(--teal)); } .op-stat-big { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1; color: var(--ink); margin-bottom: 6px; } .op-stat-label { font-size: 12.5px; line-height: 1.4; color: var(--muted); } /* key-point grid */ .op-keypoints { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .op-keypoints { grid-template-columns: 1fr; } } .op-kp { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; } .op-kp h5 { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--ink); } .op-kp p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; } .op-kp em { color: var(--ink); font-style: italic; } /* bars */ .op-bars { display: flex; align-items: flex-end; gap: 16px; height: 150px; padding: 8px 4px 0; } .op-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; } .op-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; } .op-bar-fill { width: 100%; background: color-mix(in srgb, var(--teal) 28%, var(--surface-2)); border-radius: 6px 6px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--teal-ink); } .op-bar.is-peak .op-bar-fill { background: var(--teal); color: var(--on-teal); } .op-bar-label { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: var(--font-mono); } /* tables */ .op-table-wrap { overflow-x: auto; } .op-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .op-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); padding: 8px 12px; border-bottom: 1.5px solid var(--line-strong); } .op-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.4; vertical-align: top; } .op-td-key { color: var(--ink); font-weight: 600; } /* do / don't */ .op-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .op-dodont { grid-template-columns: 1fr; } } .op-dd { border-radius: var(--radius-sm); padding: 14px 15px; border: 1px solid var(--line); } .op-dd h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 7px; } .op-dd p { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--ink); } .op-dd--good { background: var(--teal-soft); border-color: transparent; } .op-dd--good h5 { color: var(--teal-ink); } .op-dd--watch { background: var(--amber-soft); border-color: transparent; } .op-dd--watch h5 { color: var(--amber-ink); } .op-dd--bad { background: var(--gray-soft); border-color: transparent; } .op-dd--bad h5 { color: var(--gray-ink); } /* checklist */ .op-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .op-checklist li { position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.5; color: var(--ink); } .op-checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 4px; background: var(--op-accent-soft, var(--teal-soft)); border: 1.5px solid var(--op-accent, var(--teal)); } .op-checklist li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 8px; border: solid var(--op-accent, var(--teal)); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ladder */ .op-ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: none; } .op-rung { display: flex; gap: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; } .op-rung-num { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--op-accent, var(--teal)); color: var(--on-teal); font-family: var(--font-mono); font-weight: 600; font-size: 13px; } .op-rung-tier { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); margin: 0 0 3px; } .op-rung-body h5 { font-size: 14.5px; margin: 0 0 4px; color: var(--ink); } .op-rung-body p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; } .op-rung-earns { font-size: 12.5px !important; margin-top: 6px !important; color: var(--ink) !important; } .op-rung-earns span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin-right: 6px; } /* key dates */ .op-dates { list-style: none; padding: 0; margin: 0; } .op-date { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .op-date:last-child { border-bottom: 0; } .op-date-when { flex: none; width: 118px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); position: relative; padding-left: 18px; } .op-date-when::before { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; } .op-date--teal .op-date-when::before { background: var(--teal); } .op-date--amber .op-date-when::before { background: var(--amber); } .op-date--gray .op-date-when::before { background: var(--line-strong); } .op-date-what { font-size: 13.5px; line-height: 1.45; color: var(--muted); } /* cost tiers */ .op-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 560px) { .op-tiers { grid-template-columns: 1fr; } } .op-tier { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; text-align: center; } .op-tier.is-lead { border-color: var(--teal); background: var(--teal-soft); } .op-tier-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); margin: 0 0 8px; } .op-tier-cov { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); margin: 0 0 4px; } .op-tier-detail { font-size: 11.5px; color: var(--muted); line-height: 1.35; margin: 0 0 10px; min-height: 2.6em; } .op-tier-price { font-size: 14px; font-weight: 600; color: var(--teal-ink); margin: 0; } /* callout */ .op-callout { border-radius: var(--radius-md); padding: 16px 18px; margin: 0 0 8px; } .op-callout--teal { background: var(--teal-soft); } .op-callout--amber { background: var(--amber-soft); } .op-callout-h { font-weight: 600; font-size: 14.5px; margin: 0 0 5px; color: var(--ink); } .op-callout p:last-child { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0; } .op-sheet-foot { font-size: 12.5px; color: var(--hint); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; } .op-sheet-foot a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================= OFFICIAL SBTi ROADMAP — interactive flowchart (assets/roadmap.js) 4th one-pager entry. Node key mirrors the PDF: teal fill = all companies, amber fill = Cat A required / Cat B optional, dashed = optional, dark = decision. Connectors are pure CSS so branches reflow on mobile for free. ========================================================================= */ .op-panel--wide { max-width: 940px; } .op-sheet { position: relative; } /* anchor context for the .op-pop bubble */ /* the 4th chooser card spans the grid as an "or take the official route" row */ @media (min-width: 680px) { .op-role-card[data-role="roadmap"] { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name go" "icon tag go"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 16px 18px; } .op-role-card[data-role="roadmap"] .op-role-icon { grid-area: icon; } .op-role-card[data-role="roadmap"] .op-role-name { grid-area: name; } .op-role-card[data-role="roadmap"] .op-role-tag { grid-area: tag; } .op-role-card[data-role="roadmap"] .op-role-go { grid-area: go; margin: 0; } } /* ---- key / legend ---- */ .op-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 10px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-md); } .op-key-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--muted); } .op-key-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; } .op-key-swatch--all { background: var(--teal-soft); border: 1.5px solid var(--teal); } .op-key-swatch--cata { background: var(--amber-soft); border: 1.5px solid var(--amber); } .op-key-swatch--opt { background: transparent; border: 1.5px dashed var(--line-strong); } /* ---- stages ---- */ .op-stage { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); } .op-stage:first-child { border-top: 0; } .op-stage-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 10px; } .op-stage-intro { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; } @media (max-width: 680px) { .op-stage { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; } } /* ---- nodes ---- */ .op-node { position: relative; display: block; width: 100%; appearance: none; text-align: left; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; } .op-node--all { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 45%, transparent); } .op-node--cata { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 50%, transparent); } .op-node--opt { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--muted); } .op-node--q { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; text-align: center; } button.op-node { cursor: pointer; padding-right: 30px; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } button.op-node:hover, button.op-node[aria-expanded="true"] { transform: translateY(-1px); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink) 60%, transparent); } button.op-node--all:hover, button.op-node--all[aria-expanded="true"] { border-color: var(--teal); } button.op-node--cata:hover, button.op-node--cata[aria-expanded="true"] { border-color: var(--amber); } button.op-node--opt:hover, button.op-node--opt[aria-expanded="true"] { border-color: var(--muted); } .op-node-go { position: absolute; top: 7px; right: 9px; font-family: var(--font-mono); font-size: 13px; line-height: 1; color: var(--teal); } .op-node--cata .op-node-go { color: var(--amber-text); } .op-node-go--inline { position: static; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 4px; vertical-align: -2px; } .op-node--method { width: auto; font-size: 12px; padding: 6px 10px; } button.op-node--method { padding-right: 24px; } .op-node--method .op-node-go { top: 5px; right: 7px; font-size: 12px; } /* ---- flow connectors (vertical line + arrowhead between rows) ---- */ .op-flow-item { position: relative; } .op-stage-flow > .op-flow-item + .op-flow-item, .op-flow-col > .op-flow-item + .op-flow-item { margin-top: 24px; } .op-stage-flow > .op-flow-item + .op-flow-item::before, .op-flow-col > .op-flow-item + .op-flow-item::before { content: ""; position: absolute; left: 50%; top: -19px; width: 2px; height: 10px; background: var(--line-strong); transform: translateX(-50%); } .op-stage-flow > .op-flow-item + .op-flow-item::after, .op-flow-col > .op-flow-item + .op-flow-item::after { content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); border: 5px solid transparent; border-top: 6px solid var(--line-strong); border-bottom: 0; } /* bridges carry their own connector look — suppress the arrow */ .op-flow-item--bridge::before, .op-flow-item--bridge::after { display: none !important; } .op-flow-bridge { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--hint); text-align: center; margin: 0; padding: 2px 0; } /* ---- branches (2/3-column splits under a decision) ---- */ .op-flow-branch { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 0 14px; padding-top: 16px; } .op-branch-bar { /* horizontal bar spanning from first to last column midpoint. A real element (not ::before) — the flow-connector rules own that pseudo. */ position: absolute; top: 0; left: calc(100% / (var(--cols, 2) * 2)); right: calc(100% / (var(--cols, 2) * 2)); border-top: 2px solid var(--line-strong); } .op-flow-col { position: relative; padding-top: 14px; } .op-flow-col::before { /* vertical drop from the bar into each column */ content: ""; position: absolute; left: 50%; top: -16px; width: 2px; height: 30px; background: var(--line-strong); transform: translateX(-50%); } .op-flow-col-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); text-align: center; background: var(--surface); position: relative; /* sits on top of the column drop line */ margin: 0 0 10px; padding: 2px 6px; } /* ---- chips + scope 3 method tree ---- */ .op-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .op-tree { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .op-tree-group { background: var(--surface-2); border-radius: var(--radius-md); padding: 14px; } .op-tree-group > .op-flow-col-label { background: transparent; text-align: left; padding: 0; } .op-tree-sub { border-left: 2px solid var(--line-strong); padding-left: 12px; margin-top: 12px; } .op-tree-sub-label { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 0 0 8px; } /* ---- context bubble ---- */ .op-pop { position: absolute; z-index: 5; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--ink) 55%, transparent); padding: 14px 16px; } .op-pop-arrow { position: absolute; top: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--surface); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); } .op-pop--above .op-pop-arrow { top: auto; bottom: -6px; border: 0; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .op-pop-text { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0 18px 0 0; } .op-pop-link { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--teal); text-decoration: none; } .op-pop-link:hover { text-decoration: underline; text-underline-offset: 2px; } .op-pop-close { position: absolute; top: 6px; right: 6px; appearance: none; width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted); border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; } .op-pop-close:hover { color: var(--teal); } /* ---- "back to roadmap" pill (after leaving via a bubble deep link) ---- Sits centered just below the fixed .site-header; one-pager.js measures the header and sets the exact inline top, this is only the fallback. */ .op-return-pill { position: fixed; left: 50%; top: 92px; transform: translate(-50%, -8px); z-index: 80; /* under the overlay (90) */ appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--teal); background: var(--teal); color: var(--on-teal); box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--ink) 60%, transparent); opacity: 0; transition: opacity 260ms var(--ease), transform 260ms var(--ease), filter var(--dur) var(--ease); } .op-return-pill.is-in { opacity: 1; transform: translate(-50%, 0); } .op-return-pill:hover { filter: brightness(1.08); } /* ---- mobile: branches stack, grouping kept legible with a left rail ---- */ @media (max-width: 600px) { .op-flow-branch { grid-template-columns: 1fr; gap: 14px; } .op-branch-bar, .op-flow-col::before { display: none; } .op-flow-col { padding-top: 0; border-left: 2px solid var(--line); padding-left: 12px; } .op-flow-col-label { text-align: left; background: transparent; padding: 0; } .op-tree { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .op-return-pill, button.op-node { transition: none; } } /* ---- print: turn the open one-pager into an actual page ---- */ @media print { body > *:not(#onePagerOverlay) { display: none !important; } #onePagerOverlay { position: static !important; display: block !important; inset: auto !important; padding: 0 !important; background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; overflow: visible !important; } #onePagerOverlay .op-panel { max-width: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; transform: none !important; } .lookup-close, .op-sheet-bar, .op-role-go { display: none !important; } .op-keypoints, .op-stats, .op-tiers, .op-dodont { break-inside: avoid; } .op-section { break-inside: avoid; } /* roadmap view */ .op-pop, .op-return-pill, .op-node-go { display: none !important; } .op-node, .op-key-swatch { -webkit-print-color-adjust: exact; print-color-adjust: exact; } button.op-node { padding-right: 12px; } .op-stage { break-inside: avoid; } .op-stage--s3, .op-stage--oer, .op-stage--cycle { break-inside: auto; } .op-flow-branch, .op-tree-group, .op-flow-item { break-inside: avoid; } }