/* tribeca-po-bust-marker-01 — page-optimize bundle-bust probe (TD3 staging validation) */ /* * Tribeca token layer — switchable light / dark / auto. * * Raw palette, type scale, spacing, radii come from theme.json (as * --wp--preset--* and --wp--custom--* custom properties). This file adds the * *semantic* layer (surface/text/border) and the per-vertical --vertical * property, both of which flip between light and dark tones via CSS * `light-dark()` keyed on `color-scheme`. * * Mode control (the JS toggle + pre-paint script land in a later phase): * - Auto : follows prefers-color-scheme (default, no class needed). * - Dark : add class `dark` or attribute [data-theme="dark"] to . * - Light : add class `light` or attribute [data-theme="light"] to . */ :root { color-scheme: light; } :root.dark, :root[data-theme="dark"] { color-scheme: dark; } :root.light, :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not(.light):not([data-theme="light"]) { color-scheme: dark; } } /* Semantic tokens — light tone / dark tone. * TD15: dark mode is NEUTRAL CHARCOAL (Foxiz-style), not blue-navy. Surface scale: * page #11121D → band/newsletter #191C24 → card/header/surface #1E2327 → ice band #232830 * ink family (nav/footer/drawer/WTW band) #171922 (own elevated value, distinct from page) * hairlines = desaturated grey ~rgba(151,152,154, low alpha). Punch, vertical dark tones, ice unchanged. */ :root { --tribeca-bg: light-dark(var(--wp--preset--color--paper), #11121D); --tribeca-surface: light-dark(#ffffff, #1E2327); --tribeca-text: light-dark(var(--wp--preset--color--ink), #E9EAEC); --tribeca-muted: light-dark(var(--wp--preset--color--slate), #9A9CA0); --tribeca-border: light-dark(var(--wp--preset--color--ice), rgba(151, 152, 154, 0.20)); /* Band / ink surfaces (used across shell.css + blocks.css) */ --tribeca-band-paper: light-dark(var(--wp--preset--color--paper), #191C24); --tribeca-band-ice: light-dark(var(--wp--preset--color--ice), #232830); --tribeca-band-ink: light-dark(var(--wp--preset--color--ink), #171922); --tribeca-band-royal: light-dark(#133072, #1A2450); /* TD20 Buying Guides — deep royal / dark royal-tint (distinct from page #11121D + ink #171922) */ --tribeca-newsletter: light-dark(var(--wp--preset--color--ice), #1E2327); --tribeca-hairline: light-dark(#f2f5f9, rgba(151, 152, 154, 0.14)); --tribeca-scrim: light-dark(rgba(5, 8, 49, 0.92), rgba(9, 10, 16, 0.92)); /* Default vertical accent = site punch until a section/category sets one. */ --vertical: light-dark(var(--wp--preset--color--punch), var(--wp--preset--color--punch)); } /* * Per-vertical accent. Templates/patterns add one class to a wrapper and read * `var(--vertical)` everywhere (post-header gradient, chips, links, hovers, * Quick Read tint). light-dark() resolves the correct tone per element. */ .is-vertical-tech { --vertical: light-dark(var(--wp--custom--vertical--tech--light), var(--wp--custom--vertical--tech--dark)); } .is-vertical-gaming { --vertical: light-dark(var(--wp--custom--vertical--gaming--light), var(--wp--custom--vertical--gaming--dark)); } .is-vertical-entertainment { --vertical: light-dark(var(--wp--custom--vertical--entertainment--light), var(--wp--custom--vertical--entertainment--dark)); } .is-vertical-mobility { --vertical: light-dark(var(--wp--custom--vertical--mobility--light), var(--wp--custom--vertical--mobility--dark)); } .is-vertical-business { --vertical: light-dark(var(--wp--custom--vertical--business--light), var(--wp--custom--vertical--business--dark)); } .is-vertical-lifestyle { --vertical: light-dark(var(--wp--custom--vertical--lifestyle--light), var(--wp--custom--vertical--lifestyle--dark)); } .is-vertical-streaming { --vertical: light-dark(var(--wp--custom--vertical--streaming--light), var(--wp--custom--vertical--streaming--dark)); } /* Apply the semantic surface so the mode switch is visible at the foundation stage. */ body { background-color: var(--tribeca-bg); color: var(--tribeca-text); } /* ========================================================================= * TD18 — configurable typography roles. Values (--tribeca-font-headings/-body/ * -meta) are set inline by Settings → Tribeca → Typography; Archivo is the * fallback. Real-specificity selectors beat theme.json's :where() global font. * ========================================================================= */ body { font-family: var(--tribeca-font-body, Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); } h1, h2, h3, h4, h5, h6, .tribeca-hero__title, .tribeca-section__title, .tribeca-card__title, .tribeca-card--lead .tribeca-card__title, .tribeca-post-header__title, .tribeca-band__title, .tribeca-wtw__title, .tribeca-strip__title, .tribeca-rail-module__title, .tribeca-related__title, .tribeca-more-across__title, .tribeca-comments__title, .tribeca-author-box__name, .tribeca-rail-newsletter__title, .wp-block-pullquote p { font-family: var(--tribeca-font-headings, Archivo, sans-serif); } .tribeca-card__eyebrow, .tribeca-chip-badge, .tribeca-chip, .tribeca-post-header__eyebrow, .tribeca-post-header__meta, .tribeca-post-header__name, .tribeca-post-header__chip, .tribeca-hero__eyebrow, .tribeca-hero__meta, .tribeca-card__meta, .tribeca-digest__eyebrow, .tribeca-digest__time, .tribeca-strip__eyebrow, .tribeca-section__more-label, .tribeca-quick-read__label, .tribeca-rail-newsletter__eyebrow, .tribeca-rail-module__note, .tribeca-author-box__eyebrow, .tribeca-post-header__caption, .tribeca-post-header__byline time, .tribeca-single__article .wp-block-table thead th, .tribeca-single__article .wp-block-table tr:first-child th { font-family: var(--tribeca-font-meta, Archivo, sans-serif); }