/* ---------------------------------------------------------------------- * components.css — Dedollarize News (_tw) * * Section 1 :: DaisyUI HSL token overrides (light + dark) * Section 2 :: Brand-named CSS variables (light + dark) * Section 3 :: Body / themed-surface styling + typography * Section 4 :: Hand-CSS components * Section 5 :: Theme-toggle visibility helpers * * Per R22: NO Tailwind utilities on themed surfaces (, , top-level layout). * Per R23: Override DaisyUI tokens via [data-theme] HSL — no !important. * Per L4: No :root for theme-managed tokens — both blocks define every token. * Per L6: Both light AND dark blocks must define every brand token. * * PALETTE (option E): production-extracted from dedollarizenews.com. * paper #ffffff ink #000000 / #313131 / #757575 * primary red #b21b29 alarm red #fe2d2d orange CTA #ff6900 * gold #edb824 blue #2b7bb9 * Typography: Poppins via Google Fonts (matches production). * --------------------------------------------------------------------- */ /* ===== Section 1 :: DaisyUI HSL overrides ============================= */ [data-theme="light"] { --p: 354 73% 40%; /* primary — brand red #b21b29 */ --pc: 0 0% 100%; /* primary-content (text on red) */ --s: 25 100% 50%; /* secondary — orange CTA #ff6900 */ --sc: 0 0% 100%; /* secondary-content */ --a: 45 84% 53%; /* accent — gold #edb824 */ --ac: 0 0% 10%; /* accent-content */ --n: 0 0% 19%; /* neutral — #313131 */ --nc: 0 0% 100%; /* neutral-content */ --b1: 0 0% 100%; /* base-100 — paper #ffffff */ --b2: 0 0% 96%; /* base-200 — light fill #f4f4f4 */ --b3: 0 0% 88%; /* base-300 — borders */ --bc: 0 0% 7%; /* base-content — body ink */ --in: 207 62% 45%; /* info — tint blue #2b7bb9 */ --su: 158 64% 40%; /* success */ --wa: 25 100% 50%; /* warning — share orange CTA channel */ --er: 0 99% 59%; /* error — alarm red #fe2d2d */ } [data-theme="dark"] { --p: 354 65% 55%; /* primary lifted for dark contrast */ --pc: 0 0% 7%; --s: 25 100% 60%; --sc: 0 0% 7%; --a: 45 90% 65%; --ac: 0 0% 7%; --n: 0 0% 88%; --nc: 0 0% 7%; --b1: 0 0% 4%; /* base-100 — near-black paper */ --b2: 0 0% 8%; --b3: 0 0% 16%; --bc: 0 0% 92%; --in: 207 60% 60%; --su: 158 50% 55%; --wa: 25 100% 60%; --er: 0 80% 65%; } /* ===== Section 2 :: Brand-named CSS variables ========================= */ /* Per L4: both blocks define every brand token — no :root cascade. */ [data-theme="light"] { --paper: hsl(0 0% 100%); /* body bg */ --ink: hsl(0 0% 7%); /* body text */ --ink-muted: hsl(0 0% 46%); /* #757575 — meta/byline */ --ink-strong: hsl(0 0% 0%); /* #000000 — headlines */ --line: hsl(0 0% 88%); /* dividers */ --surface-alt: hsl(0 0% 96%); /* #f4f4f4 — section fills */ --brand-red: hsl(354 73% 40%); /* #b21b29 — primary brand */ --alarm-red: hsl(0 99% 59%); /* #fe2d2d — BREAKING */ --cta-orange: hsl(25 100% 50%); /* #ff6900 — newsletter CTA */ --accent-warm: hsl(45 84% 53%); /* #edb824 — premium / gold */ --tint-blue: hsl(207 62% 45%); /* #2b7bb9 — links */ } [data-theme="dark"] { --paper: hsl(0 0% 4%); --ink: hsl(0 0% 92%); --ink-muted: hsl(0 0% 68%); --ink-strong: hsl(0 0% 100%); --line: hsl(0 0% 16%); --surface-alt: hsl(0 0% 8%); --brand-red: hsl(354 65% 55%); --alarm-red: hsl(0 80% 65%); --cta-orange: hsl(25 100% 60%); --accent-warm: hsl(45 90% 65%); --tint-blue: hsl(207 60% 65%); } /* ===== Section 3 :: Body / themed surfaces + typography =============== */ /* Color rules live HERE so [data-theme] flips actually take effect. * No bg/text/border utilities on or per R22. * Poppins is enqueued from functions.php via Google Fonts. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.6; background-color: var(--paper); color: var(--ink); transition: background-color 0.15s ease, color 0.15s ease; } h1, h2, h3, h4, h5, h6, .site-title, .article-title, .entry-title, .card-title { font-family: 'Poppins', system-ui, -apple-system, sans-serif; font-weight: 700; line-height: 1.2; color: var(--ink-strong); letter-spacing: -0.01em; } a { color: var(--brand-red); text-decoration: none; } a:hover { text-decoration: underline; } /* ===== Section 4 :: Hand-CSS components =============================== */ .site-header { background-color: var(--paper); border-bottom: 1px solid var(--line); } .site-footer { background-color: var(--paper); border-top: 1px solid var(--line); color: var(--ink-muted); } .site-title { color: var(--ink-strong); } .site-title:hover { color: var(--brand-red); } .site-description, .byline, .byline-cats { color: var(--ink-muted); font-size: 0.875rem; } .byline-sep { margin: 0 0.4em; color: var(--line); } .article-title, .entry-title { color: var(--ink-strong); } .article-figure-credit { color: var(--ink-muted); font-size: 0.8125rem; } .article-footer { border-color: var(--line); } /* Breaking-news flag — for editor-tagged urgent stories. R21 keeps the * visual class theme-side; the mu-plugin that decides WHEN to render it * stays theme-agnostic and just emits its own wrapper. */ .flag-breaking { display: inline-block; background-color: var(--alarm-red); color: hsl(0 0% 100%); padding: 0.15rem 0.55rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; margin-right: 0.5rem; vertical-align: 0.15em; } /* Newsletter CTA banner — orange chip per production. */ .cta-newsletter { background-color: var(--cta-orange); color: hsl(0 0% 100%); padding: 0.4rem 0.9rem; font-weight: 600; border-radius: 0.25rem; display: inline-block; } .cta-newsletter:hover { text-decoration: none; filter: brightness(0.95); } /* Premium / featured marker — gold left rule. */ .flag-premium { border-left: 3px solid var(--accent-warm); padding: 0.15rem 0.6rem; color: var(--accent-warm); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } /* Card tints — borrowed from the _tw lineage (theme-tw.md § 7) */ .tint-primary { border-left: 4px solid hsl(var(--p) / 1); background: hsl(var(--p) / 0.05); } .tint-secondary { border-left: 4px solid hsl(var(--s) / 1); background: hsl(var(--s) / 0.05); } .tint-accent { border-left: 4px solid hsl(var(--a) / 1); background: hsl(var(--a) / 0.05); } .tint-info { border-left: 4px solid hsl(var(--in) / 1); background: hsl(var(--in) / 0.05); } /* ===== Section 5 :: Theme-toggle visibility =========================== */ /* Show "Dark" label in light mode (means: switch TO dark), and vice versa. */ [data-theme="light"] .theme-toggle-show-when-dark { display: none; } [data-theme="dark"] .theme-toggle-show-when-light { display: none; }