/* ─── tokens ─── */ :root { /* The palette below is the design, in one fixed light scheme — there is no dark variant and no prefers-color-scheme branch anywhere in this file. `only light` says so to the browser, which stops it substituting its own dark treatment on a device set to dark (Chrome's Auto Dark Theme on Android re-colours pages that make no declaration). Without this the cream backgrounds and orange brand can be machine-inverted into colours nobody approved. `only` rather than plain `light`: plain `light` sets the scheme, `only light` additionally forbids the UA's automatic darkening. */ color-scheme: only light; --brand: #F68328; /* PDF-exact brand orange */ --brand-soft: #FDE9D9; /* peach card / soft fill */ /* Two families: Nunito is the display face (titles/headers), Mulish carries body copy and UI text. --font-body is set on so everything inherits it; only h1/h2 and the .title-* classes opt back into --font-head. */ --font-head: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ink: #1A1A1A; --ink-soft: #464646; /* body copy */ --muted: #919191; /* secondary / hints */ --dot: #A6A6A6; /* unwatched progress dot */ --bg: #FFFBF7; /* warm page background — all panels */ --bg-tint: #F4F5EE; /* cool section wash */ --card: #FFFFFF; --shadow: 0 6px 24px rgba(0,0,0,.08); --radius: 16px; --radius-sm: 10px; --app-vh: 1vh; /* updated by JS for FB-IAB */ --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --bar-h: 58px; /* floating section-bar height (excl. safe-top) */ --app-w: min(420px, 100vw); /* feed column — caps at the max mobile width; never fills a wide viewport. On phones (≤420px) this is 100vw. */ --app-left: calc(50% - var(--app-w) / 2); /* left edge of the centered column */ } /* ─── reset ─── */ *, *::before, *::after { box-sizing: border-box; min-width: 0; } html, body { margin: 0; padding: 0; overflow: hidden; } html, body { background: var(--bg); color: var(--ink); } /* iOS paints a translucent grey box over whatever you tap. Every interactive element here already answers a tap with its own :active state (the buttons and cards scale, the bar back button fills), so the default flash adds nothing and reads as a rendering glitch when it lands over a full-bleed video panel. */ html { -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Headings take the display face by tag, so a new h1/h2 needs no extra class. Font-family only — colour/alignment stay with the .title-* classes, which differ per heading (.lead is not orange, .lead-em is). */ h1, h2 { font-family: var(--font-head); } img, video { max-width: 100%; height: auto; display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; } /* Button labels use the display face. Must come after the reset above, whose `font: inherit` shorthand would otherwise reset font-family back to Mulish. .cta-card is listed explicitly because it ships as BOTH and