/* ===================================================================================================== SI Money Tracker: site.css, the shared design system for "The SI Tower" (dark deco noir, dark-only). Built 2026-10-12 for branch babylon-rebuild. Page agents NEVER edit this file: page-specific rules go in /assets/pages/.css (see _staging/build/CONTRACT.md). Sections 0 Fonts (self-hosted, SIL OFL 1.1, see /assets/fonts/OFL.txt) 1 Babylon Pixel colour tokens, dark-only form (values exact from design-babylon.json css_tokens) 2 Site tokens: noir surfaces, deco gold/sky, decoration glows (+ dynamic-range: high), type, space, motion 3 Base and typography (.fig, Dynamic Type, links, focus) 4 Layout primitives (.wrap, .section, .stack, .grid-2/3, .visually-hidden, .skip-link) 5 Elevator panel header (desktop), compact sticky bar + "Floors" sheet (phone), floor dial 6 Elevator ride overlay 7 Buttons (one primary style), exit doors, toggles 8 Deco cards, frames, dividers, floor sign, badges, show-the-math, LED price 9 Pictures and figures (screenshots with "Sample data" captions, book cover) 10 Concierge desk, profession tag, bellhop card, itinerary columns 11 Scenes: lobby hero (letterbox, sky, searchlights, data rain, skyline, rain on glass, chandelier), app / vault / engine / library / penthouse / concierge / press / archive wrappers, rooftop CTA 12 Footer 13 Prose (legal pages) 14 Texture: film grain + vignette 15 Preference gates: reduced motion, motion toggle, reduced data, increase contrast, forced colours, print Rules this file enforces - Identity colours (brand, ink, data, status) are SDR sRGB hex; oklch() lives only inside @supports. - Brand teal/cyan = brand, links, primary CTA, focus. Gold (--deco-*) = decoration only, never body text. - --glow-* tokens are decoration only and become transparent under prefers-contrast: more. - Headroom (gain-map AVIF) only on .hdr-decoration media; CSS colours never exceed SDR white. - Every number is one .fig: nowrap, tabular, set in the UI stack (the display face has no tnum). - Colour is never the only cue: current floor = aria-current + underline + lamp; status = glyph + words. - Nothing is ever 100vw wide; full-bleed layers use inset:0 inside an overflow:clip parent. ===================================================================================================== */ /* ----------------------------------------------------------------------------------------------------- 0 FONTS Big Shoulders Display (variable 500-800) and Big Shoulders Inline Display (static 700): The Big Shoulders Project Authors, SIL Open Font License 1.1, no Reserved Font Name. Latin subset (covers Spanish: á é í ó ú ü ñ ¿ ¡ « »), fetched from Google Fonts on 2026-10-12. Self-hosted; nothing is hotlinked. Glyphs outside the subset (√ π Σ →) fall back to the next family in the stack. ----------------------------------------------------------------------------------------------------- */ @font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-latin.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Big Shoulders Inline Display"; src: url("/assets/fonts/big-shoulders-inline-display-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------------------------------------------- 1 BABYLON PIXEL COLOUR TOKENS, DARK-ONLY FORM Source: _staging/research/design-babylon.json css_tokens (Babylon Pixel Guide v6, Build 44 cd2700e3). The token file says: "If the site stays dark-only, set color-scheme: dark and move the dark values into :root." (D28: the site is dark-only.) So every value below is the token file's DARK value, unchanged, and tokens with no dark override keep their single value. Block order is the token file's: normal hex -> normal OKLCH (@supports) -> Increase Contrast hex -> Increase Contrast OKLCH -> OKLab gradient -> wide-gamut glow -> Increase Contrast glow off -> HDR media gates -> .fig. The light-scheme blocks are intentionally absent: the site never renders light. ----------------------------------------------------------------------------------------------------- */ :root { color-scheme: dark; /* Surfaces */ --surface-page: #000000; --surface-card: #111B1D; --surface-grouped: #000000; --surface-instrument: #0B1315; /* calculator panel: dark in BOTH modes */ /* Ink: text uses ink-1/2/3 only. mark-2 is for icons and meaningful boundaries, never text. */ --ink-1: #E8FFFC; --ink-2: rgb(154 255 243 / 0.8); /* 11.13 on #000000, 10.84 on site #05080A */ --ink-3: rgb(154 255 243 / 0.7); --mark-2: rgb(154 255 243 / 0.6); --mark-3: rgb(154 255 243 / 0.3); --hairline: rgb(42 58 60 / 0.65); /* separator: decoration only */ --fill-4: rgb(110 143 140 / 0.18); /* Brand family */ --brand-accent: #9AFFF3; --brand-accent-on: #000000; /* 12.59:1 */ --brand-accent-start: #9AFFF3; --brand-accent-end: #9AFFF3; --brand-accent-tint: rgb(154 255 243 / 0.18); --brand-secondary: #9AFFF3; --brand-violet: #86ABA7; --brand-green: #9AFFF3; /* AMTP Green: PROPOSED, owner to confirm */ --math-accent: #86ABA7; /* flat graphite: every "Show the math" control */ --money-ink: #9AFFF3; /* 9.35:1 on its 18 % tint over #000000 */ --money-placeholder: #86ABA7; /* Data colours: physical quantity kinds only (Explorer rule), never money, status or decoration */ --data-e1: #86ABA7; --data-e2: #9AFFF3; --data-e3: #86ABA7; --data-e4: #86ABA7; --data-e5: #9AFFF3; --data-e6: #86ABA7; --data-on: #000000; /* Status: verdict GLYPHS only, always beside words */ --status-pass: #86ABA7; --status-warning: #86ABA7; --status-critical: #6E8F8C; /* LED readout chip (dark in both modes) */ --led-chip: #0B1315; --led-positive: #9AFFF3; --led-negative: #6E8F8C; --led-unlit: rgb(154 255 243 / 0.13); /* Focus: the accent, 2 px */ --focus-ring: #9AFFF3; /* Decoration (switch off under prefers-contrast: more; sRGB values are the exact fallback) */ --brand-gradient: linear-gradient(135deg, var(--brand-accent-start), var(--brand-accent-end)); --glow-accent: #9AFFF3; --glow-secondary: #9AFFF3; --glow-violet: #86ABA7; --glow-green: #9AFFF3; --glow-strength: 1; } /* The same colours authored in OKLCH: each renders the same 8-bit value as the hex above (dark twins). */ @supports (color: #000000) { :root { --surface-grouped: #000000; --surface-card: #111B1D; --surface-instrument: #0B1315; --ink-2: rgb(154 255 243 / 0.8); --ink-3: rgb(154 255 243 / 0.7); --mark-2: rgb(154 255 243 / 0.6); --mark-3: rgb(154 255 243 / 0.3); --hairline: rgb(42 58 60 / 0.65); --fill-4: rgb(110 143 140 / 0.18); --brand-accent: #9AFFF3; --brand-accent-start: #9AFFF3; --brand-accent-end: #9AFFF3; --brand-accent-tint: rgb(154 255 243 / 0.18); --brand-secondary: #9AFFF3; --brand-violet: #86ABA7; --brand-green: #9AFFF3; --math-accent: #86ABA7; --money-ink: #9AFFF3; --money-placeholder: #86ABA7; --data-e1: #86ABA7; --data-e2: #9AFFF3; --data-e3: #86ABA7; --data-e4: #86ABA7; --data-e5: #9AFFF3; --data-e6: #86ABA7; --status-pass: #86ABA7; --status-warning: #86ABA7; --status-critical: #6E8F8C; --led-chip: #0B1315; --led-positive: #9AFFF3; --led-negative: #6E8F8C; --led-unlit: rgb(154 255 243 / 0.13); --focus-ring: #9AFFF3; } } /* Increase Contrast (prefers-contrast: more), after every normal block so it always wins. Dark values, plus the mode-independent "solid strokes, no glow" settings from the token file's first Increase Contrast block. */ @media (prefers-contrast: more) { :root { --ink-2: #9AFFF3; --ink-3: #9AFFF3; --mark-2: #9AFFF3; --mark-3: rgb(154 255 243 / 0.55); --brand-accent: #9AFFF3; --brand-accent-start: #9AFFF3; --brand-accent-end: #9AFFF3; --brand-violet: #9AFFF3; --math-accent: #9AFFF3; --money-ink: #9AFFF3; --money-placeholder: #9AFFF3; --focus-ring: #9AFFF3; --data-e1: #9AFFF3; --data-e2: #9AFFF3; --data-e3: #9AFFF3; --data-e4: #9AFFF3; --data-e5: #9AFFF3; --data-e6: #9AFFF3; --brand-gradient: linear-gradient(var(--brand-accent), var(--brand-accent)); --glow-strength: 0; } } /* OKLCH twins of the Increase Contrast tokens (dark). */ @supports (color: #000000) { @media (prefers-contrast: more) { :root { --brand-accent: #9AFFF3; --brand-accent-start: #9AFFF3; --brand-accent-end: #9AFFF3; --brand-violet: #9AFFF3; --math-accent: #9AFFF3; --money-ink: #9AFFF3; --money-placeholder: #9AFFF3; --focus-ring: #9AFFF3; --data-e1: #9AFFF3; --data-e2: #9AFFF3; --data-e3: #9AFFF3; --data-e4: #9AFFF3; --data-e5: #9AFFF3; --data-e6: #9AFFF3; } } } /* The gradient is interpolated in OKLab where supported, so the blend keeps the accent's single lightness. */ @supports (background-image: linear-gradient(in oklab, red, blue)) { :root { --brand-gradient: linear-gradient(in oklab 135deg, var(--brand-accent-start), var(--brand-accent-end)); } @media (prefers-contrast: more) { :root { --brand-gradient: linear-gradient(var(--brand-accent), var(--brand-accent)); } } } /* Wide-gamut decoration only (dark values): same L and H as the brand token, chroma at 98 % of the P3 maximum. Never applied to text, logos, data or status colours. On sRGB screens the hex glow above is the fallback. */ @supports (color: #000000) { @media (color-gamut: p3) { :root { --glow-accent: oklch(0.8179 0.1940 182.29); /* = color(display-p3 0.1004 0.9008 0.8072) */ --glow-secondary: oklch(0.8173 0.1761 210.51); /* = color(display-p3 0.2000 0.8618 0.9954) */ --glow-violet: oklch(0.8085 0.1486 313.48); /* = color(display-p3 0.8502 0.6470 0.9952) */ --glow-green: oklch(0.8179 0.3176 142); /* = color(display-p3 0.3576 0.9275 0.0835) */ } } } /* Increase Contrast: "solid strokes, no glow". After the P3 block, so it wins in every mode. */ @media (prefers-contrast: more) { :root { --glow-strength: 0; --glow-accent: transparent; --glow-secondary: transparent; --glow-violet: transparent; --glow-green: transparent; } } /* HDR media gates: CSS colours never go above SDR white. Only marked decoration media may use headroom. */ img, video { dynamic-range-limit: standard; } .hdr-decoration { dynamic-range-limit: no-limit; } @media (prefers-contrast: more) { .hdr-decoration { dynamic-range-limit: standard; } } /* Figures: one unbreakable, tabular unit. Set in the UI stack because the display face has no "tnum". */ .fig { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; hyphens: none; font-family: var(--font-ui); } /* ----------------------------------------------------------------------------------------------------- 2 SITE TOKENS ----------------------------------------------------------------------------------------------------- */ :root { /* Noir surfaces. The Babylon guide measured every dark token on these four (lowest: status-critical 5.22:1 on #111B1D), so text tokens may sit on any of them. */ --noir-0: #05080A; /* page */ --noir-1: #0B1315; /* alternate band, sheets */ --noir-2: #111B1D; /* card */ --noir-glass: #0B1315; /* Deco palette: DECORATION ONLY (trim, brass, chandeliers, dial, frames, sky). Never body text, links or CTAs. */ --deco-gold: #86ABA7; --deco-gold-hi: #9AFFF3; --deco-gold-lo: #6E8F8C; --deco-gold-deep: #2A3A3C; --deco-gold-line: rgb(134 171 167 / 0.45); /* hairline trim */ --deco-gold-faint: rgb(134 171 167 / 0.18); --deco-ink: #05080A; /* silhouettes */ --deco-sky-top: #05080A; /* night zenith, oxblood-black */ --deco-sky-mid: #111B1D; /* oxblood */ --deco-sky-low: #2A3A3C; /* blood-orange horizon */ --deco-window: #9AFFF3; /* lit tower window (SDR) */ --deco-window-dim: #6E8F8C; --deco-steel: #111B1D; /* vault */ --deco-wood: #111B1D; /* library */ --deco-tube: #111B1D; /* engine room */ /* Decoration glows (emissive decor only; never text, brand or data). SDR sRGB values; the dynamic-range: high block below brightens them on capable screens; Increase Contrast turns them off. */ --glow-gold: rgb(154 255 243 / 0.45); --glow-window: rgb(154 255 243 / 0.75); --glow-searchlight: rgb(154 255 243 / 0.1); --glow-searchlight-core: rgb(232 255 252 / 0.22); --glow-rain-head: #9AFFF3; --glow-tube: rgb(154 255 243 / 0.12); --glow-deco-strength: 1; /* Type */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Big Shoulders Display", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", var(--font-ui); --font-marquee: "Big Shoulders Inline Display", "Big Shoulders Display", "Avenir Next Condensed", "Arial Narrow", var(--font-ui); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Apple text styles as em of body 17 (typography_numbers D) */ --t-large-title: 2em; --t-title1: 1.647em; --t-title2: 1.294em; --t-title3: 1.176em; --t-callout: 0.941em; --t-subhead: 0.882em; --t-footnote: max(11px, 0.765em); /* em-relative labels compound inside small text: never below 11 px */ --t-caption1: max(11px, 0.706em); --t-caption2: max(11px, 0.647em); /* the floor: never below 11 px */ /* Space, size, shape */ --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); --max: 72rem; --max-text: 40rem; /* 8 px spacing rhythm (owner 04:10); s-1 is the 4 px half-step for hairline gaps only */ --s-1: 0.25rem; /* 4 px */ --s-2: 0.5rem; /* 8 px */ --s-3: 1rem; /* 16 px */ --s-4: 1.5rem; /* 24 px */ --s-5: 2rem; /* 32 px */ --s-6: 2.5rem; /* 40 px */ --s-7: 3rem; /* 48 px */ --s-8: 4.5rem; /* 72 px */ --s-9: 6.5rem; /* 104 px */ --radius-1: 4px; --radius-2: 10px; --radius-3: 18px; --target: 44px; /* minimum touch target (HIG; stricter than WCAG 2.5.8) */ --bar-h: 3.75rem; /* sticky bar height, for scroll-margin */ /* Motion ("Clubbed to Death" pacing: slow, deliberate reveals; press 0.15 s; disclosure 0.2 s) */ --ease-film: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-press: 150ms; --dur-disclosure: 200ms; --dur-door: 320ms; --dur-reveal: 900ms; --dur-sweep: 600ms; /* Layers */ --z-content: 1; --z-bar: 100; --z-grain: 500; --z-ride: 1000; --z-skip: 1100; } /* Brighter emissive decor on screens with headroom. CSS colours still stay at or below SDR white (the web has no HDR CSS colour space); the lift comes from wider P3 chroma and stronger alpha. The real headroom is only in gain-map media (.hdr-decoration). */ @media (dynamic-range: high) { :root { --glow-gold: rgb(154 255 243 / 0.62); --glow-window: rgb(154 255 243 / 0.92); --glow-searchlight: rgb(154 255 243 / 0.14); --glow-searchlight-core: rgb(232 255 252 / 0.32); --glow-tube: rgb(154 255 243 / 0.18); --glow-deco-strength: 1.35; } } @supports (color: color(display-p3 1 1 1)) { @media (dynamic-range: high) and (color-gamut: p3) { :root { --glow-gold: color(display-p3 1 0.84 0.42 / 0.62); --glow-window: color(display-p3 1 0.83 0.40 / 0.95); --glow-rain-head: color(display-p3 0.62 1 0.93); --glow-tube: color(display-p3 0.1004 0.9008 0.8072 / 0.2); } } } @media (prefers-contrast: more) { :root { --glow-gold: transparent; --glow-window: var(--deco-window-dim); --glow-searchlight: transparent; --glow-searchlight-core: transparent; --glow-tube: transparent; --glow-deco-strength: 0; } } /* ----------------------------------------------------------------------------------------------------- 3 BASE AND TYPOGRAPHY ----------------------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; background-color: var(--noir-0); color: var(--ink-1); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--s-3)); } @media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) { scroll-behavior: smooth; } } /* Dynamic Type on iOS Safari only (touch-callout is iOS-only, so macOS Safari keeps the browser default). */ @supports (font: -apple-system-body) and (-webkit-touch-callout: none) { html { font: -apple-system-body; } } body { margin: 0; min-height: 100vh; min-height: 100svh; font-family: var(--font-ui); font-size: 1.0625rem; /* 17 px at the 16 px default */ line-height: 1.55; font-weight: 400; color: var(--ink-1); background: transparent; /* html carries the page colour; body::before carries the vignette */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } @supports (font: -apple-system-body) and (-webkit-touch-callout: none) { body { font-size: 1rem; } /* html already follows the user's text size (17 px at Large) */ } @supports (overflow: clip) { html, body { overflow-x: clip; } /* belt and braces; clip keeps position: sticky working */ } [hidden] { display: none !important; } img, video { max-width: 100%; height: auto; } img { border-style: none; } svg { overflow: visible; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; color: var(--ink-1); font-family: var(--font-display); font-weight: 700; line-height: 1.04; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 1.55rem + 3.3vw, 4.5rem); letter-spacing: 0.015em; text-transform: uppercase; font-weight: 800; } h2 { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.875rem); letter-spacing: 0.02em; text-transform: uppercase; } h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); letter-spacing: 0.012em; font-weight: 700; } h4, h5, h6 { font-family: var(--font-ui); font-size: 1em; font-weight: 600; line-height: 1.3; } :is(h1, h2, h3, .marquee, .display) .fig { font-size: 0.82em; font-weight: 700; letter-spacing: 0; text-transform: none; } :is(p, si-p), ul, ol, dl, figure, blockquote, table, pre { margin: 0 0 1em; } /* : a paragraph that Reader heuristics don't count (owner request 2026-10-16: keep Safari Reader from treating marketing pages as articles). Same box as

; every `p` selector also matches it at the same specificity via :is(p, si-p). Write new paragraphs as …. */ si-p { display: block; } ul, ol { padding-inline-start: 1.25em; } li + li { margin-block-start: 0.35em; } dt { font-weight: 600; } dd { margin: 0 0 0.75em; color: var(--ink-2); } strong, b { font-weight: 650; } small { font-size: var(--t-footnote); } hr { border: 0; border-block-start: 1px solid var(--hairline); margin: var(--s-6) 0; } abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } sup, sub { line-height: 0; } /* The marquee face: hero titles and floor signs only (short, large text). */ .marquee { font-family: var(--font-marquee); font-weight: 700; text-transform: uppercase; letter-spacing: 0.035em; line-height: 0.98; } .display { font-family: var(--font-display); font-weight: 700; } .kicker { display: flex; align-items: center; gap: 0.75em; margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .kicker::before { /* double gold rule (decor) */ content: ""; flex: 0 0 2.25rem; height: 4px; border-block: 1px solid var(--deco-gold); border-block-end-color: var(--deco-gold-line); } .kicker--center { justify-content: center; } .kicker--center::after { content: ""; flex: 0 0 2.25rem; height: 4px; border-block: 1px solid var(--deco-gold); border-block-end-color: var(--deco-gold-line); } .lede { max-width: var(--max-text); font-size: var(--t-title3); line-height: 1.45; color: var(--ink-2); } .muted { color: var(--ink-2); } .subtle { color: var(--ink-3); } .fine-print { font-size: var(--t-footnote); line-height: 1.5; color: var(--ink-3); } .measure { max-width: var(--max-text); } .center { text-align: center; margin-inline: auto; } /* Links: brand teal, underlined in running text (colour is never the only cue). */ a { color: var(--brand-accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } a:visited { color: var(--brand-accent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--brand-accent); color: var(--brand-accent-on); } /* Anchored sections land below the sticky bar. */ [id] { scroll-margin-top: calc(var(--bar-h) + var(--s-3)); } /* Inputs */ input, select, textarea, button { font: inherit; color: inherit; } input[type="text"], input[type="search"], input[type="email"], textarea, select { min-height: 48px; padding: 0.65em 0.9em; font-size: max(16px, 1rem); /* 16 px or more: iOS never zooms the page on focus */ color: var(--ink-1); background: var(--noir-1); border: 1px solid var(--mark-2); /* a meaningful boundary uses mark-2 (3:1 or more) */ border-radius: var(--radius-2); } input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; } input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--brand-accent); outline-offset: 1px; } button { cursor: pointer; } /* ----------------------------------------------------------------------------------------------------- 4 LAYOUT PRIMITIVES ----------------------------------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap--text { max-width: calc(var(--max-text) + 2 * var(--gutter)); } .section { position: relative; padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); } .section--tight { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); } .section--band { background: var(--noir-1); } .section + .section--band, .section--band + .section { border-block-start: 1px solid var(--deco-gold-faint); } .stack > * + * { margin-block-start: var(--stack-gap, var(--s-4)); } .stack > * { margin-block-end: 0; } .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 48rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .visually-hidden:not(:focus):not(:active) { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: var(--z-skip); padding: 0.75em 1.1em; background: var(--brand-accent); color: var(--brand-accent-on); font-weight: 650; text-decoration: none; border-radius: var(--radius-2); transform: translateY(-160%); } .skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--brand-accent-on); } main { display: block; position: relative; z-index: var(--z-content); } /* Slow reveal (one strong beat per section). site.js adds .is-pending only to elements that start below the fold, so nothing is ever hidden without JS or before the observer exists. */ .reveal.is-pending { opacity: 0; transform: translateY(14px); } .reveal { transition: opacity var(--dur-reveal) var(--ease-film), transform var(--dur-reveal) var(--ease-film); } .reveal--late { transition-delay: 220ms; } /* ----------------------------------------------------------------------------------------------------- 5 ELEVATOR PANEL HEADER + PHONE "FLOORS" SHEET + FLOOR DIAL Markup: _staging/build/partials/header-{en,es}.html. The bar never uses transform, filter or backdrop-filter, so the fixed Floors sheet inside it stays relative to the viewport. ----------------------------------------------------------------------------------------------------- */ .tower-bar { position: sticky; inset-block-start: 0; z-index: var(--z-bar); background: rgb(5 8 10 / 0.96); border-block-end: 1px solid var(--deco-gold-line); } .tower-bar::after { /* brass rule under the bar (decor) */ content: ""; position: absolute; inset-inline: 0; inset-block-end: -4px; height: 3px; background: linear-gradient(90deg, transparent, var(--deco-gold-lo) 18%, var(--deco-gold-hi) 50%, var(--deco-gold-lo) 82%, transparent); opacity: 0.55; pointer-events: none; } .tower-bar__inner { display: flex; align-items: center; gap: var(--s-3); min-height: var(--bar-h); max-width: calc(80rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: var(--target); min-width: var(--target); margin-inline-end: auto; color: var(--ink-1); text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.035em; white-space: nowrap; } .brand:visited, .brand:hover { color: var(--ink-1); } .brand__logo { display: block; width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 1px var(--deco-gold-line); } @media (max-width: 359.98px) { .brand__name { display: none; } } /* Desktop elevator panel */ .elevator { display: none; } .elevator__list { display: flex; align-items: stretch; gap: 0.125rem; margin: 0; padding: 0.25rem 0.5rem; list-style: none; border: 1px solid var(--deco-gold-line); border-radius: 999px; background: linear-gradient(180deg, rgb(134 171 167 / 0.1), rgb(134 171 167 / 0.02) 60%, rgb(0 0 0 / 0.25)), var(--noir-0); box-shadow: inset 0 1px 0 rgb(154 255 243 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.6); } .elevator__list li { margin: 0; } .floor-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-width: var(--target); min-height: var(--target); padding: 0.25rem 0.45rem; color: var(--ink-1); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.1; text-align: center; text-transform: uppercase; text-decoration: none; border-radius: var(--radius-2); } .floor-btn:visited { color: var(--ink-1); } .floor-btn__code { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink-1); background: radial-gradient(circle at 35% 30%, #111B1D, #05080A 70%); border: 1.5px solid var(--deco-gold); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(232 255 252 / 0.08); transition: box-shadow var(--dur-press) ease-out, transform var(--dur-press) ease-out; } .floor-btn__code svg { width: 0.95rem; height: 0.95rem; fill: currentColor; } .floor-btn__label { max-width: 8.5em; text-wrap: balance; } .floor-btn:hover { color: var(--ink-1); } .floor-btn:hover .floor-btn__code { box-shadow: 0 0 0 2px var(--deco-gold-hi), 0 0 calc(12px * var(--glow-deco-strength)) var(--glow-gold); } .floor-btn:active .floor-btn__code { transform: scale(0.95); } /* Current floor: teal lamp + underlined label + aria-current (never colour alone). */ .floor-btn[aria-current="page"] { color: var(--ink-1); } .floor-btn[aria-current="page"] .floor-btn__code { color: var(--brand-accent-on); background: var(--brand-accent); border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.6), 0 0 calc(14px * var(--glow-strength)) var(--glow-accent); } .floor-btn[aria-current="page"] .floor-btn__label { text-decoration: underline 2px; text-underline-offset: 0.35em; text-decoration-color: var(--brand-accent); } @media (min-width: 64rem) { .elevator { display: block; } .floors { display: none !important; } .brand { margin-inline-end: 0; } .elevator { margin-inline: auto; } } @media (min-width: 64rem) and (max-width: 79.98rem) { .brand__name { display: none; } .floor-btn__the { display: none; } } /* Floor dial: semicircular needle gauge. Angle comes from --dial-angle (set per page by the assembler and animated by site.js). Stops: B -90, L -60, 1 -30, 2 0, 3 30, 4 60, PH 90 (degrees). */ .floor-dial { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; width: 3.75rem; color: var(--deco-gold); } .floor-dial svg { display: block; width: 3.5rem; height: 2.2rem; } .floor-dial__face-arc { fill: none; stroke: var(--deco-gold); stroke-width: 1.5; } .floor-dial__face-plate { fill: #05080A; stroke: var(--deco-gold-lo); stroke-width: 1; } .floor-dial__tick { stroke: var(--deco-gold-hi); stroke-width: 1.4; stroke-linecap: round; } .floor-dial { --dial-angle: var(--page-dial, -60deg); } body[data-floor="archive"] { --page-dial: -90deg; } body[data-floor="lobby"], body[data-floor="concierge"], body[data-floor="press"] { --page-dial: -60deg; } body[data-floor="app"] { --page-dial: -30deg; } body[data-floor="vault"] { --page-dial: 0deg; } body[data-floor="engine"] { --page-dial: 30deg; } body[data-floor="library"] { --page-dial: 60deg; } body[data-floor="penthouse"] { --page-dial: 90deg; } .floor-dial__needle { transform-box: view-box; transform-origin: 32px 36px; transform: rotate(var(--dial-angle, -60deg)); transition: transform var(--dur-sweep) var(--ease-film); } .floor-dial__needle line { stroke: var(--deco-gold-hi); stroke-width: 2; stroke-linecap: round; } .floor-dial__needle circle { fill: var(--deco-gold); } .floor-dial__readout { display: block; margin-block-start: -0.05rem; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-align: center; color: var(--deco-gold-hi); } @media (max-width: 63.98rem) { .tower-bar .floor-dial { display: none; } } /* Language switch (plain link; lang-splash.js remembers the choice) */ .lang-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: var(--target); padding-inline: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--brand-accent); text-decoration: none; white-space: nowrap; } .lang-link:hover { text-decoration: underline; text-underline-offset: 0.25em; } /* Phone: compact bar + Floors sheet (a

, so it opens without JS; site.js adds the modal behaviour) */ .floors { position: static; } .floors > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--target); padding: 0.35rem 0.6rem 0.35rem 0.95rem; list-style: none; cursor: pointer; user-select: none; color: var(--ink-1); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--deco-gold); border-radius: 999px; background: linear-gradient(180deg, rgb(134 171 167 / 0.14), rgb(134 171 167 / 0.02)); position: relative; z-index: 3; } .floors > summary::-webkit-details-marker { display: none; } .floors > summary::marker { content: ""; } .floors__code { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: 0.3rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--brand-accent-on); background: var(--brand-accent); } .floors[open] > summary { border-color: var(--brand-accent); } .floors__backdrop { position: fixed; inset: 0; z-index: 1; background: rgb(0 0 0 / 0.66); } .floors__panel { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 2; max-height: min(86vh, 44rem); max-height: min(86dvh, 44rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgb(134 171 167 / 0.08), transparent 7rem), var(--noir-1); border-block-start: 2px solid var(--deco-gold); border-start-start-radius: var(--radius-3); border-start-end-radius: var(--radius-3); box-shadow: 0 -24px 60px rgb(0 0 0 / 0.65); } @media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .floors[open] .floors__panel { animation: sheet-up 260ms var(--ease-out) both; } } @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } .floors__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); } .floors__title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; } .floors__close { min-width: var(--target); min-height: var(--target); padding: 0 0.9rem; border: 1px solid var(--mark-2); border-radius: 999px; background: transparent; color: var(--ink-1); font-weight: 600; } .floors__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; } @media (min-width: 30rem) { .floors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .floors__list li { margin: 0; } .floors__list .floor-btn { flex-direction: row; justify-content: flex-start; gap: 0.75rem; min-height: 52px; padding: 0.5rem 0.75rem; font-size: 0.9375rem; letter-spacing: 0.06em; text-align: start; border: 1px solid var(--deco-gold-faint); background: rgb(232 255 252 / 0.02); } .floors__list .floor-btn__label { max-width: none; } .floors__list .floor-btn__desc { display: inline-block; /* inline-block: the current floor's underline stays on the name only */ width: 100%; margin-block-start: 0.15rem; font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); } .floors__list .floor-btn[aria-current="page"] { border-color: var(--brand-accent); } .floors__settings { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block-start: var(--s-3); border-block-start: 1px solid var(--hairline); } html.sheet-open { overflow: hidden; } /* Phone and tablet (< 64rem): the top bar scrolls away and the compact sticky panel is the Floors button docked in the bottom half of the screen (thumb reach, owner 04:10), showing the current floor's code. */ @media (max-width: 63.98rem) { .tower-bar { position: relative; } .floors > summary { position: fixed; inset-block-end: calc(14px + env(safe-area-inset-bottom) + var(--splash-lift, 0px)); inset-inline-end: var(--gutter); min-height: 52px; padding: 0.4rem 0.6rem 0.4rem 1.1rem; background: linear-gradient(180deg, rgb(134 171 167 / 0.22), rgb(134 171 167 / 0.06)), var(--noir-1); box-shadow: 0 0 0 4px rgb(5 8 10 / 0.85), 0 12px 32px rgb(0 0 0 / 0.65); } .floors__panel { padding-block-end: calc(6.5rem + env(safe-area-inset-bottom)); } html { scroll-padding-top: var(--s-3); } [id] { scroll-margin-top: var(--s-3); } /* While the first-visit language card (lang-splash.js) is open it holds the bottom of the screen: the docked Floors button steps aside instead of rising over the hero caption, and returns when the card closes. */ html.splash-open .floors:not([open]) > summary { visibility: hidden; } } /* The language switch inside the Floors sheet (phone): a full-width row under the settings. The language links sit in wrappers (Google honours data-nosnippet on span, div and section, not on ). */ .lang-switch { display: contents; } .floors__lang { flex: 1 0 100%; display: flex; } .floors__lang .lang-link { padding-inline: 0; } /* ----------------------------------------------------------------------------------------------------- 6 ELEVATOR RIDE OVERLAY Departure (site.js): .ride.is-riding closes the doors and sweeps the ride dial, then the browser navigates. Arrival: the head script adds html.ride-arrive before first paint; CSS alone opens the doors, so a page whose module never loads still opens. Reduced motion or the motion toggle: no ride at all. ----------------------------------------------------------------------------------------------------- */ .ride { position: fixed; inset: 0; z-index: var(--z-ride); pointer-events: none; visibility: hidden; overflow: clip; } .ride__door { position: absolute; inset-block: 0; width: 50.5%; background: url("/assets/art/elevator-doors.svg") 0 0 / 200% 100% no-repeat, repeating-linear-gradient(90deg, rgb(134 171 167 / 0) 0 22px, rgb(134 171 167 / 0.1) 22px 23px), linear-gradient(180deg, #0B1315, #111B1D 46%, #0B1315); transition: transform var(--dur-door) var(--ease-film); } .ride__door--l { inset-inline-start: 0; transform: translateX(-101%); background-position: 0 0, 0 0, 0 0; box-shadow: inset -1px 0 0 rgb(154 255 243 / 0.55), inset -3px 0 0 rgb(110 143 140 / 0.22), inset -14px 0 18px -10px rgb(0 0 0 / 0.8); } .ride__door--r { inset-inline-end: 0; transform: translateX(101%); background-position: 100% 0, 0 0, 0 0; box-shadow: inset 1px 0 0 rgb(154 255 243 / 0.55), inset 3px 0 0 rgb(110 143 140 / 0.22), inset 14px 0 18px -10px rgb(0 0 0 / 0.8); } .ride__indicator { position: absolute; inset-block-start: max(12vh, 4rem); inset-inline-start: 50%; width: 7.5rem; margin-inline-start: -3.75rem; padding: 0.6rem 0.6rem 0.75rem; text-align: center; background: #05080A; border: 1px solid var(--deco-gold); border-radius: 999px 999px var(--radius-2) var(--radius-2); box-shadow: 0 0 0 4px rgb(0 0 0 / 0.6), 0 0 calc(30px * var(--glow-deco-strength)) var(--glow-gold); opacity: 0; transition: opacity 180ms ease-out; } .ride__indicator .floor-dial { width: 100%; } .ride__indicator .floor-dial svg { width: 6rem; height: 3.8rem; } .ride__indicator .floor-dial__readout { display: none; } .ride__floor { display: block; margin-block-start: 0.15rem; font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: 0.16em; color: var(--deco-gold-hi); } .ride.is-riding { visibility: visible; pointer-events: auto; } .ride.is-riding .ride__door { transform: none; } .ride.is-riding .ride__indicator { opacity: 1; transition-delay: 160ms; } html.ride-arrive .ride { visibility: visible; animation: ride-hide 0s linear 420ms forwards; } html.ride-arrive .ride__door--l { animation: door-open-l var(--dur-door) var(--ease-film) 80ms both; } html.ride-arrive .ride__door--r { animation: door-open-r var(--dur-door) var(--ease-film) 80ms both; } @keyframes door-open-l { from { transform: none; } to { transform: translateX(-101%); } } @keyframes door-open-r { from { transform: none; } to { transform: translateX(101%); } } @keyframes ride-hide { to { visibility: hidden; } } /* ----------------------------------------------------------------------------------------------------- 7 BUTTONS (ONE PRIMARY STYLE), EXIT DOORS, TOGGLES ----------------------------------------------------------------------------------------------------- */ /* .btn is THE primary action. One per view. Secondary actions are .btn-quiet or plain links. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0.75em 1.5em; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.15; text-align: center; text-transform: uppercase; text-decoration: none; color: var(--brand-accent-on); background: var(--brand-gradient); border: 0; border-radius: var(--radius-1); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 0 0 3px rgb(134 171 167 / 0.55); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 0 0 3px rgb(134 171 167 / 0.55), 0 0 calc(26px * var(--glow-strength)) color-mix(in srgb, var(--glow-accent) 45%, transparent); transition: transform var(--dur-press) ease-out, filter var(--dur-press) ease-out; -webkit-tap-highlight-color: transparent; } .btn:visited, .btn:hover { color: var(--brand-accent-on); } .btn:hover { filter: brightness(1.06); } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 5px; } .btn--block { display: flex; width: 100%; } .btn__soon { /* "Coming soon" inside the primary button until LAUNCH DAY (D16) */ display: inline-block; padding: 0.12em 0.55em; font-size: 0.72em; letter-spacing: 0.08em; white-space: nowrap; border: 1px solid rgb(0 0 0 / 0.5); border-radius: 999px; } .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--target); padding: 0.6em 1.15em; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--ink-1); background: transparent; border: 1px solid var(--mark-2); border-radius: var(--radius-1); transition: border-color var(--dur-press) ease-out, transform var(--dur-press) ease-out; } .btn-quiet:visited { color: var(--ink-1); } .btn-quiet:hover { border-color: var(--brand-accent); color: var(--ink-1); } .btn-quiet:active { transform: scale(0.97); } /* A control that cannot act (e.g. the App Store before launch): no href, aria-disabled, and words that say why. */ .is-soon, .btn[aria-disabled="true"], .btn-quiet[aria-disabled="true"] { cursor: default; pointer-events: none; color: var(--ink-2); background: transparent; border: 1px dashed var(--mark-2); box-shadow: none; filter: none; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); } .cta-note { margin-block-start: var(--s-3); font-size: var(--t-subhead); color: var(--ink-2); } /* Exit doors: links that leave the SI Tower. The "Leaving the SI Tower -> host" label is in the HTML (or added by site.js for [data-exit] links without one); it is visually hidden until hover or focus, always shown on touch screens, and always part of the accessible name. Never a blocking dialog. */ .doors { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; } .doors li { margin: 0; } .door { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.6rem; min-height: 48px; padding: 0.6rem 0.9rem 0.6rem 2.6rem; color: var(--ink-1); text-decoration: none; background: linear-gradient(180deg, rgb(134 171 167 / 0.09), transparent 70%); border: 1px solid var(--mark-2); border-start-start-radius: 1.4rem; border-start-end-radius: 1.4rem; border-end-start-radius: var(--radius-1); border-end-end-radius: var(--radius-1); transition: border-color var(--dur-press) ease-out; } .door::before { /* a small brass door glyph (decor; the words carry the meaning) */ content: ""; position: absolute; inset-inline-start: 0.9rem; inset-block-start: 50%; width: 1rem; height: 1.3rem; margin-block-start: -0.65rem; border: 1.5px solid var(--deco-gold); border-radius: 0.5rem 0.5rem 1px 1px; background: linear-gradient(90deg, transparent 47%, var(--deco-gold) 47% 53%, transparent 53%); } .door:visited { color: var(--ink-1); } .door:hover, .door:focus-visible { border-color: var(--brand-accent); } .door__name { font-weight: 600; } .door__host { font-size: var(--t-footnote); color: var(--ink-2); } .door__exit { flex: 1 0 100%; font-size: var(--t-footnote); font-weight: 600; color: var(--brand-accent); } .door__exit:not(.is-shown) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .door:hover .door__exit, .door:focus-visible .door__exit, [data-exit]:hover > .door__exit, [data-exit]:focus-visible > .door__exit { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; } @media (hover: none) { .door__exit { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; } } /* Inline exit links in running text (a[data-exit] that is not a .door): the label follows the text as a quiet caption inside the same link, so it never reads as a second link. site.js wraps the link's own words in .door__text and only those are underlined (an underline set on the link itself would also run through the label when a page makes the link a flex box). The label is an atomic inline box, and it wraps under the words in a flex link. */ a[data-exit]:not(.door):not(.btn):not(.btn-quiet) { flex-wrap: wrap; } a[data-exit]:not(.door):not(.btn):not(.btn-quiet):has(> .door__text) { text-decoration-line: none; } a[data-exit]:not(.door) > .door__text { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a[data-exit]:not(.door):hover > .door__text { text-decoration-thickness: 2px; } a[data-exit]:not(.door) .door__exit { display: inline-block; flex: 0 1 auto; margin-inline-start: 0.4em; font-weight: 400; color: var(--ink-2); text-decoration: none; } /* A .btn-quiet exit (e.g. the press page's mailto): wrap inside the screen, label on its own row. */ .btn-quiet[data-exit] { flex-wrap: wrap; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; } a.btn-quiet[data-exit] > .door__exit { flex: 1 0 100%; margin-inline-start: 0; } .door--soon { cursor: default; color: var(--ink-2); border-style: dashed; background: transparent; } .door--soon::before { opacity: 0.55; } .door__state { display: inline-block; padding: 0.1rem 0.5rem; font-size: var(--t-caption1); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-1); border: 1px solid var(--mark-2); border-radius: 999px; } /* Toggles (sound, motion): real