/* SparkChambers brand theme (issue #415) -- DARK-FIRST, surface-overriding * ============================================================================= * Per-blog theme file. Linked by BlogThemingHelper#blog_theme_stylesheet_link_tag * AFTER stylesheet_link_tag :app, so this unlayered :root/.dark beats the bundle's * unlayered defaults on source order. Logical path is the BARE FILENAME * "theme-sparkchambers.css" (lib/assets/blog_themes IS the Propshaft root). * * SparkChambers is a FORCED-DARK blog (blogs.settings_overrides.color_scheme = "dark", * resolved by ApplicationController#resolved_color_scheme -> layout forces * and suppresses the theme switcher). Unlike theme-kofferly.css this theme is NOT a no-op: * it retones the brand ramps to SparkChambers gold/coral AND deliberately OVERRIDES the * neutral surface/content/border tokens to the near-black SC palette. * * CONTRACT compliance (see theme-kofferly.css header for the full contract): * - :root defines BOTH ramps, all ELEVEN stops (50..900 + 950). REQUIRED. * - --surface-*/--content-*/--border-* are the documented TRAP: the base sets each * TWICE (:root light, .dark dark) at EQUAL specificity, source-order-decided. This * theme overrides them, so per the both-or-neither rule they are restated in BOTH * our :root AND our .dark. With forced .dark the .dark block is what actually wins; * the :root copy keeps the seam correct if the force is ever removed. * - --interactive-* are NOT defined here (base derives all four from --brand-primary-*). * - --font-* overrides are blessed by the contract. * * DARK-MODE AA -- ⚠️ RE-MEASURED FOR #564's SURFACE RE-MAP. The page is now --surface-secondary * #0a0a0b (unchanged colour, different token) and cards are --surface-elevated #141416 (was * #252528, i.e. cards got DARKER, so every accent-on-card ratio moved UP, not down). Re-measured * on the new card surface #141416: * --content-secondary #a1a1aa 7.18:1 PASS (normal text) * --content-tertiary #808088 4.70:1 PASS (normal text) -- the tightest row; it is why * --content-tertiary stays LIFTED from legacy's #71717a * (which measures 3.53:1 here and would fail). This is the * ONE deliberate divergence from legacy's palette, and it * predates #564. * --content-primary #f5f5f7 ~17:1 PASS * --border-control #8a8a92 was authored for >=3:1 on #0a0a0b AND on the old * elevated #252528; the new elevated #141416 is darker, so * that row improves and needs no change. * The figures below are the original #415 measurements against #0a0a0b, still valid -- the page * colour did not change, only which token names it: * * (#415 GAP 5) only stops the 6 encyclopedia views actually render in forced-dark are gated: * accent TEXT (>=4.5:1): amber-300 13.72 / amber-200 15.89 / coral-300 10.76 * .btn-primary + active-pill fills, #0a0a0b label (>=4.5:1, == 3:1 fill-vs-surface): * amber-400 11.85 / amber-500 9.21 / amber-300 13.72 * amber-700 hover border (non-text, 3:1): 3.04 on #252528 PASS * NOTE amber-700/coral-700 as TEXT measure 3.94/3.62 (sub-4.5) but NEVER render in * dark -- every view usage is either dark-paired (dark:text-*-300) or a light-only * :group-hover, so the dark cascade always wins. Not nudged: keeping the standard * Tailwind amber/coral ramps matches "SC gold -> brand-primary, coral -> brand-secondary". * bin/factory-theme.py check FAILS its light-mode brand rows and its * --content-*-vs-surface GUARD rows BY CONSTRUCTION (it is built for light-default * themes that reuse base surfaces); those rows are WAIVED for this intentional * dark-first surface override. See the PR body for the full recorded output. * ============================================================================= */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit.woff2") format('woff2'); } /* Playfair Display -- the accent SERIF. The :root block below has declared --font-accent as * 'Playfair Display' since #415, with its own note that no @font-face shipped because no ported * view rendered accent text yet, so it silently resolved to the Georgia fallback. #564 makes the * encyclopedia entry title font-accent (legacy parity), which is that "first accent element" -- * so the woff2 lands here now. Self-hosted, like Outfit and every other font in this repo: legacy * pulls Playfair from fonts.gstatic.com, we do not add a third-party font origin. Latin subset * (v40), variable 400..900. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/playfair-display.woff2") format('woff2'); } :root { /* Primary brand ramp -- SparkChambers gold (amber). Dominant accent. */ --brand-primary-50: #fffbeb; --brand-primary-100: #fef3c7; --brand-primary-200: #fde68a; --brand-primary-300: #fcd34d; --brand-primary-400: #fbbf24; --brand-primary-500: #f59e0b; --brand-primary-600: #d97706; --brand-primary-700: #b45309; --brand-primary-800: #92400e; --brand-primary-900: #78350f; /* SC gold == Kofferly amber, so reuse the base amber-950 (Tailwind v4 built-in, verbatim oklch) -- keeps the -950 utilities identical to what already resolves. */ --brand-primary-950: oklch(27.9% 0.077 45.635); /* Secondary brand ramp -- SparkChambers coral. */ --brand-secondary-50: #fff5f5; --brand-secondary-100: #ffe3e3; --brand-secondary-200: #ffc9c9; --brand-secondary-300: #ffa8a8; --brand-secondary-400: #ff7b7b; --brand-secondary-500: #f56565; --brand-secondary-600: #e53e3e; --brand-secondary-700: #c53030; --brand-secondary-800: #9b2c2c; --brand-secondary-900: #742a2a; /* Authored: one step darker than coral-900 #742a2a (no SC source token; unused by the ported views but the contract requires all 11 stops). Verified L darker than 900. */ --brand-secondary-950: #4a1818; /* Neutral surfaces/content/borders -- SC near-black palette. Overridden in BOTH :root and .dark (both-or-neither rule). ⛔ RE-MAPPED IN #564 -- read this before "restoring" the old ladder. The VALUES were already 1:1 with legacy SparkChambers (--bg-primary #0a0a0b .. --bg-surface #2e2e32, verified against legacy's own application.css). What did NOT match was which token each surface CONSUMES, so every surface rendered one step too light than legacy and the page read flat -- the founder's "the colors were better" (#564). Measured, legacy vs staging, same entry: page #0a0a0b vs #141416; card #141416 vs #252528. The consumers are FIXED in the shared layout and cannot be re-pointed per blog: body -> --surface-secondary (app/views/layouts/application.html.erb) sticky header -> --surface-primary (shared/_header.html.erb) + the SC index filter bar cards -> --surface-elevated (.card-elevated and 146 bg-surface-elevated sites) So the mapping is corrected HERE, theme-locally, instead: no layout edit, no other tenant touched. Legacy's relationship -- page darkest, sticky bars a step LIGHTER and translucent, cards at the same step as the bars -- is reproduced by the ladder below. */ --surface-primary: #141416; /* sticky header + filter bars: lighter than the page, as legacy */ --surface-secondary: #0a0a0b; /* THE PAGE (body paints this) -- legacy --bg-primary */ --surface-tertiary: #1c1c1f; /* tracks, skeletons, subtle fills (unchanged) */ --surface-elevated: #141416; /* cards -- legacy --bg-secondary, what its card surface really is */ --surface-hover: #1c1c1f; /* hover, one step above a card */ --surface-active: #252528; /* active/pressed */ --content-primary: #f5f5f7; /* headings/body */ --content-secondary: #a1a1aa; /* secondary text -- 7.72:1 on #0a0a0b */ --content-tertiary: #808088; /* subtle text (SC #71717a lifted for AA on #0a0a0b: 5.05:1; used as small label text in the views) */ --content-muted: #a1a1aa; /* hints/placeholders */ --content-inverse: #0a0a0b; /* dark label on gold/coral fills (.btn-primary, pills) */ --border-default: #2e2e32; /* decorative (cards, dividers) */ --border-muted: #1c1c1f; /* subtle */ --border-strong: #3a3a3f; /* emphasized */ /* Interactive-control boundary (#323). Authored: >=3:1 on both surfaces (5.78:1 on #0a0a0b, 4.46:1 on --surface-elevated #252528). */ --border-control: #8a8a92; /* Fonts. Outfit AND Playfair Display are self-hosted above; --font-body stays base DM Sans (already self-hosted). --font-accent became live in #564 -- the encyclopedia entry title is font-accent for legacy parity, which was the "accent element first appears" trigger the original note anticipated. */ --font-display: 'Outfit', system-ui, sans-serif; --font-accent: 'Playfair Display', Georgia, serif; } .dark { /* Must stay byte-identical to the :root block above (both-or-neither rule). */ --surface-primary: #141416; --surface-secondary: #0a0a0b; --surface-tertiary: #1c1c1f; --surface-elevated: #141416; --surface-hover: #1c1c1f; --surface-active: #252528; --content-primary: #f5f5f7; --content-secondary: #a1a1aa; --content-tertiary: #808088; --content-muted: #a1a1aa; --content-inverse: #0a0a0b; --border-default: #2e2e32; --border-muted: #1c1c1f; --border-strong: #3a3a3f; --border-control: #8a8a92; }