/* mikey — brand.css * BellexFire spec v1.23 §1 (Brand System) * CSS variables, fonts, base typography. Components styled in components.css. */ @font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Orbitron'; src: url('/assets/fonts/orbitron-800.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } :root { --font-display: 'Orbitron', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* ============================================================ 2026-08-06 retheme: page background flipped from near-black to Britt's logo mid-tone denim (#92A8B2) — client direction, "the site flips from dark theme to mid-tone theme." This is NOT a find/replace of the old dark-theme values: several vars were consumed by BOTH "dark surface" components (header/nav/footer, staying dark) AND "page-level" components (body text, cards, ghost buttons, follow pills — now light), so those got split into an on-dark/on-light pair rather than repointed in place. See the consumer-analysis note above each split pair below. ============================================================ */ /* --color-bg is now the LIGHT mid-tone page background — anything that used to read var(--color-bg) as a "the dark near-black value" shortcut for dark text (the old .btn-watch/.follow-pill hover trick) has been repointed to --color-fg instead; see components.css. */ --color-bg: #A3B8A4; /* --color-bg-elevated is now dark denim (same hue family as the page bg, ~200deg, low lightness) — consumers left on this var are exactly the ones that stay dark: .site-header, .site-nav (mobile dropdown), .site-footer, and .follow-pill:focus-visible's outline. Nothing else uses it — .follow-pill's own background moved OFF this var onto --britt-cream (see 1f), so no split var was needed here, just a repoint. */ --color-bg-elevated: #1F3A2A; /* --color-fg is now dark slate — the PAGE-level text color (body, .btn-ghost, .follow-pill, .video-card, .video-stat-num). Consumers that must stay LIGHT because they sit on the dark header/nav/ footer family (.site-logo, .nav-toggle-bar, .nav-tabs a, .footer-legal a:hover) were moved to the new --color-fg-on-dark below instead of following this repoint. */ --color-fg: #16211A; --color-fg-on-dark: #E8EAED; /* = the OLD --color-fg value, unchanged */ /* Same split as --color-fg, for the secondary/muted text tier. --color-muted is now a dark, denim-tinted gray verified to pass >=4.5:1 against BOTH the page bg and the cream cards (the harder constraint is the page bg, since it's darker than cream — see build-time contrast log). Footer's muted text (.site-footer, .footer-legal a default state) stays light via --color-muted-on-dark, the OLD value, unchanged. */ --color-muted: #2E3B33; --color-muted-on-dark: #9AA0A6; /* = the OLD --color-muted value, unchanged */ --color-accent: #2E6B3F; --color-accent-hover: #3C8A52; --color-cta: #e65100; --color-cta-hover: #d84315; /* --color-link: unchanged, still correct for its one remaining dark-surface consumer (.footer-disclosure a). It measured 1.24:1 against the new page bg — nowhere near AA — so the two consumers that render link-styled text on the light page/cream surfaces (.product-meta-link, and .product-card's inherited link color, which had no override unlike .video-card) get the new --color-link-on-light instead. See components.css. */ --color-link: #4fc3f7; --color-link-on-light: #1C4A2C; /* --color-border (translucent white) is unchanged and still correct for its remaining consumers — all within the dark header/nav/ footer family, where a light-tint hairline still reads as a highlight on a dark surface. New light-surface borders/overlays get their own tokens below rather than trying to reuse this one at the opposite polarity. */ --color-border: rgba(255,255,255,0.08); --color-border-strong: rgba(22,33,26,0.55); /* dark-slate-tint border/outline for light surfaces: .btn-ghost, .btn-watch, .video-stats dividers */ --color-overlay-dark: rgba(22,33,26,0.08); /* subtle dark hover-wash for .btn-ghost:hover on the page */ --color-card-border: rgba(212,169,106,0.6); /* translucent britt-tan, for .card/.video-card borders on cream */ /* --color-card-bg (translucent white) is unchanged and still correct for its one remaining dark-surface consumer, .nav-tabs a:hover (inside the dark mobile dropdown). .card/.video-card moved OFF this var onto a solid --britt-cream background instead — a translucent overlay approach doesn't work once there's no dark base surface underneath it to lighten. */ --color-card-bg: rgba(255,255,255,0.03); --color-stub-banner: #b8860b; /* Texas-flag palette — demoted to accent badge only (header flag mark, hardcoded hex literals in the SVG itself, not wired through these vars). Kept for that one use; no longer the site theme. */ --color-tx-red: #BF0A30; --color-tx-red-hover: #97081f; --color-tx-blue: #002868; --color-tx-blue-hover: #001c49; --color-tx-white: #ffffff; /* Britt's logo palette (extracted 2026-08-07 via PIL median-cut from britt-logo-256.jpg, targeted crop of the shirt-collar region for the blue). This IS the site theme: WATCH buttons + chips (untouched by the retheme below), follow bar, section headings, header accent stripe, and now (2026-08-06 retheme) the page background itself. --britt-blue — shirt collar, lit side (dominant fabric tone) --britt-blue-hover — shirt collar, shadow side. UNUSED as of the 2026-08-06 retheme: its value (#92A8B2) IS NOW THE PAGE BACKGROUND, so both of its old consumers (.btn-watch:hover, .follow-pill: hover border) moved to --britt-tan instead (a hovered element can't fill with the exact color of the page it sits on). Left defined, not deleted — not asked for, and harmless — but do not reuse it as a "darker blue" without checking it isn't reintroducing this exact bug. --britt-tan — cap mesh, lit side. Doubles as the WATCH-button and follow-pill hover color post-retheme. --britt-cream — circular badge background. Doubles as the card/follow-pill resting background post- retheme. */ --britt-blue: #C8DCC9; --britt-blue-hover: #A3B8A4; --britt-tan: #D4A96A; --britt-cream: #E3E1D5; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-xxl: 3rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --thumb-radius: 12px; --max-content-width: 1200px; --header-height: 64px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-md) 0; } p { margin: 0 0 var(--space-md) 0; } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } main { max-width: var(--max-content-width); margin: 0 auto; padding: var(--space-xl) var(--space-md); min-height: calc(100vh - var(--header-height) - 120px); } @media (max-width: 600px) { main { padding: var(--space-lg) var(--space-md); } }