/* ═══════════════════════════════════════════════════════════════ BUGATTI INSIGHTS — Editorial Design System Cormorant Garamond display · Inter labels · dark heritage palette ═══════════════════════════════════════════════════════════════ */ /* Lazy background images (set by main.js initLazyBg once near the viewport). While the photo decodes the placeholder shows an elegant navy/gold "skeleton" pulse for perceived performance (#51); once loaded it fades the photo in. Uses background-color only (no positioning/size changes) so it can't affect how the loaded image is rendered. */ /* (3122) The two skeleton stops were #14223a and #20355c — hue 218/223 at 15% and 21% lightness, a good deal bluer and brighter than anything they stand in for, so a page mid-load flashed a colour that appears nowhere in the finished design. Derived from the surface token instead: the resting stop is the raised card ground, the pulse lifts it slightly. */ .bi-lazy-bg { background-color: var(--sur2); animation: bi-skeleton 1.6s ease-in-out infinite; } .bi-lazy-bg.is-bg-loaded { animation: bi-bg-fade-in 420ms ease both; } @keyframes bi-skeleton { 0%, 100% { background-color: var(--sur2); } 50% { background-color: color-mix(in srgb, var(--sur2) 82%, var(--fg)); } } @keyframes bi-bg-fade-in { from { opacity: .55; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bi-lazy-bg { animation: none; } } /* ── Where the tokens went (task 3128) ─────────────────────────────────── This file used to open with a 48-token :root block, one of five places that declared the same design tokens and did not agree with each other. All of it now lives in assets/css/tokens.css, which is enqueued before this file. Nothing was renamed and no rendered value changed; the block moved, and the aliases that nothing referenced were dropped. Dropped for having zero call sites: --surface, --panel, --surface2, --panel2, --white, --text (the only var(--text) in the codebase is in dossier-template.php, which declares its own), and --blue / --blue-hsl. --bg2 had three call sites, all in nav.css, all of them broken · see the note there. The historical notes that block carried (the gold consolidation of 3121, the shell of 3120) moved with it. Read tokens.css first if you are about to add a colour, a size or a spacing step anywhere in this codebase. ── The gold (task 3121) ── There is exactly one gold on this site and it is --gold / --gold-hsl in tokens.css, resolving to #E8C868. Before 3121 there were five, all written as literals so none of them tracked the token: #C9A84C (the old token value, 112 sites), #D4AF68 and #C2A162 / rgba(194,161,98,·) in the homepage hero, rgba(196,160,90,·) in brand-home, rgba(201,170,84,·) in this file, plus a stale hsl(43 60% 55%) fallback in the subscription widget. Changing the token moved none of them. The two rules that follow from that are written out at the colour block in tokens.css. Two surfaces cannot reach the token and carry a documented copy of the literal instead: dossier-template.php (a self-contained export printed outside the theme) and the plugin's standalone payment error page. Both say so in a comment at the copy. */ /* ══════════════════════════════════════════════════════════════ A) GLOBAL RESET + BASE ══════════════════════════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } /* Clip horizontal overflow at the html (viewport) level so full-bleed children can extend past without triggering a scrollbar. clip (not hidden) preserves position:sticky inside the page. */ html { overflow-x: clip; } html { font-size:16px; scroll-behavior:smooth; background: var(--bg); } body { background: var(--bg); color: var(--fg); /* Running text follows --f-body (Tinos since the 30-08 notes); UI chrome opts back in to --f-label per element. */ font-family: var(--f-body, var(--f-label)); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { display:block; max-width:100%; } a { color: var(--gold); text-decoration:none; transition: color .15s; } a:hover { color: var(--gold); } ol,ul { list-style: none; } /* Shared dropdown theming — every native 's background. A select whose box sets an explicit dark background + light text (as most on this site do, per-component) but whose