/* ========================================================================== SocialCTL — public marketing DARK theme -------------------------------------------------------------------------- A single override layer that re-skins the light Tailwind marketing pages to the redesigned dark brand palette. Everything is SCOPED to `body.theme-sctl` so it never bleeds into the authed app (/app) or admin (/admin) — those layouts don't carry the class. Colour VALUES come from CSS custom properties injected in by App\Services\FrontendTheme (admin-editable at /admin/frontend). This file only maps Tailwind's light utilities onto those variables, so changing a colour in admin re-skins the whole site with no recompile. The `!important`s are intentional: we're overriding utility classes that already set the property, and only within the scoped `.theme-sctl` context. ========================================================================== ┌──────────────────────────────────────────────────────────────────────────┐ │ THEME NOTE — SEMANTIC TOKEN MAP (D-Batch 0, the token foundation) │ │ Defined ONCE in App\Services\FrontendTheme::cssVarsBlock() and emitted │ │ into :root. Later batches (A–D) reference these with var() ONLY — no new │ │ raw hex should appear in any Batch A–D diff. │ │ │ │ Contrast ratios are measured against --surface: --sctl-panel │ │ rgba(11,16,36,.78) composited over --sctl-bg #040510 ≈ rgb(9,14,32), │ │ relative luminance ≈ 0.0048. All text roles below pass WCAG AA (≥4.5:1). │ │ │ │ ROLE VALUE RATIO on --surface │ │ ──────────────── ─────────────────────────────── ────────────────── │ │ --surface var(--sctl-panel) rgba(11,16,36,.78) (surface) │ │ --surface-elevated #11182B (solid lifted) (surface) │ │ --surface-hover rgba(255,255,255,.07) overlay │ │ --border var(--sctl-line) rgba(255,255,255,.12) hairline │ │ --text-primary var(--sctl-ink) #f8fbff ~17:1 │ │ --text-secondary var(--sctl-muted) #a8b0c3 ~8.83:1 │ │ --text-subtle var(--sctl-muted2) #8B96AD (FLOORED) ~6.45:1 │ │ --accent-focus var(--sctl-violet) #825cf8 focus ring │ │ --input-bg rgba(255,255,255,.04) field bg │ │ --success var(--sctl-teal) #0cbbad ~7.97:1 │ │ --warning var(--sctl-orange) #f48c1e ~7.87:1 │ │ --danger #f87171 (lightened palette red) ~6.93:1 │ │ --prose-body var(--text-secondary) #a8b0c3 ~8.83:1 │ │ --prose-heading var(--text-primary) #f8fbff ~17:1 │ │ --prose-strong var(--text-primary) #f8fbff ~17:1 │ │ --prose-link #a78bfa (lightened brand violet) ~7.05:1 │ │ --prose-link-hover #c4b5fd ~10.4:1 │ │ --table-surface var(--surface-elevated) #11182B (surface) │ │ --table-head var(--sctl-panel-2) rgba(255,255,255,.06) header row │ │ --table-border var(--border) rgba(255,255,255,.12) hairline │ │ │ │ CONTRAST FLOOR FIX: --sctl-muted2 default raised #687086 (~4.05:1, FAILS │ │ AA) → #8B96AD (~6.45:1) in FrontendTheme::COLORS. Fixes secondary-text │ │ failures site-wide. --sctl-muted #a8b0c3 verified ~8.83:1 (PASS). │ └──────────────────────────────────────────────────────────────────────────┘ */ /* ── Base canvas ─────────────────────────────────────────────────────────── */ body.theme-sctl { background: radial-gradient(circle at 15% 0%, rgba(251,72,120,.20), transparent 28rem), radial-gradient(circle at 92% 7%, rgba(130,92,248,.20), transparent 28rem), radial-gradient(circle at 50% 45%, rgba(12,187,173,.12), transparent 34rem), linear-gradient(180deg, var(--sctl-bg) 0%, var(--sctl-bg2) 48%, var(--sctl-bg) 100%); background-attachment: fixed; color: var(--sctl-ink); } /* Text colours ------------------------------------------------------------- */ body.theme-sctl .text-slate-950, body.theme-sctl .text-slate-900, body.theme-sctl .text-slate-800, body.theme-sctl .text-gray-900, body.theme-sctl .text-black { color: var(--sctl-ink) !important; } body.theme-sctl .text-slate-700, body.theme-sctl .text-slate-600, body.theme-sctl .text-gray-600 { color: var(--sctl-muted) !important; } body.theme-sctl .text-slate-500, body.theme-sctl .text-slate-400, body.theme-sctl .text-gray-400 { color: var(--sctl-muted2) !important; } /* Surfaces (light cards → dark glass panels) ------------------------------- */ body.theme-sctl .bg-white, body.theme-sctl .bg-white\/95, body.theme-sctl .bg-white\/92, body.theme-sctl .bg-white\/90, body.theme-sctl .bg-white\/80, body.theme-sctl .bg-white\/70 { background-color: var(--sctl-panel) !important; color: var(--sctl-ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* NOTE: low-opacity whites (bg-white/5…/25) are deliberately NOT overridden — they're translucent overlays on the already-dark hero / footer / CTA bands and read correctly there. */ body.theme-sctl .bg-slate-50, body.theme-sctl .bg-slate-50\/80, body.theme-sctl .bg-slate-50\/70, body.theme-sctl .bg-slate-50\/60, body.theme-sctl .bg-slate-50\/50, body.theme-sctl .bg-slate-50\/40, body.theme-sctl .bg-slate-100, body.theme-sctl .bg-slate-100\/70, body.theme-sctl .bg-gray-50, body.theme-sctl .bg-gray-100 { background-color: var(--sctl-panel-2) !important; } /* Sections already dark (slate-950/900) — deepen to the brand black. */ body.theme-sctl .bg-slate-950, body.theme-sctl .bg-slate-900 { background-color: var(--sctl-bg) !important; } /* Borders + rings ---------------------------------------------------------- */ body.theme-sctl [class*="border-slate-2"], body.theme-sctl [class*="border-slate-1"], body.theme-sctl .border-slate-200\/70, body.theme-sctl .border-slate-200\/60, body.theme-sctl .border-slate-200\/80, body.theme-sctl [class*="border-gray-2"] { border-color: var(--sctl-line) !important; } body.theme-sctl [class*="ring-slate-2"], body.theme-sctl [class*="ring-slate-1"], body.theme-sctl .ring-slate-900\/5, body.theme-sctl .ring-slate-200\/80, body.theme-sctl .ring-slate-200\/70 { --tw-ring-color: var(--sctl-line) !important; } /* Row dividers (divide-slate/gray) use --tw-divide-color, a different var than border-color, so the border remap above misses them — a light hairline between list/table rows. Map to the same dark line token. */ body.theme-sctl [class*="divide-slate"], body.theme-sctl [class*="divide-gray"] { --tw-divide-color: var(--sctl-line) !important; } /* Hover states that assume a light surface -------------------------------- */ /* Substring match (not the escaped exact class) so OPACITY variants are caught too — hover:bg-slate-100/70 (nav links), hover:bg-slate-50/40 (comparison table rows). The base remap can't reach hover:/opacity utilities, so these would otherwise flash a light-grey hover on the dark theme. */ body.theme-sctl [class*="hover:bg-slate"]:hover, body.theme-sctl [class*="hover:bg-gray"]:hover, body.theme-sctl [class*="hover:bg-white"]:hover { background-color: var(--surface-hover) !important; } /* Coloured icon tiles + status badges ------------------------------------- */ /* Feature-card icon tiles and status pills are always a light-pastel/dark-text pair — bg-{hue}-50/100/200 + text-{hue}-600/700 (+ border-{hue}-200). On the dark theme the pastel tile reads as a bright square and the medium text goes dim. Keep each hue's IDENTITY but tuned for dark: tile → a low-opacity tint of the hue, border → a slightly stronger tint, icon/text → a brightened shade. Token match (~=) so a saturated bg-{hue}-500 blur-blob is never caught. */ body.theme-sctl [class~="bg-emerald-50"],body.theme-sctl [class~="bg-emerald-100"],body.theme-sctl [class~="bg-emerald-200"]{background-color:rgba(16,185,129,.15)!important} body.theme-sctl [class~="bg-sky-50"],body.theme-sctl [class~="bg-sky-100"],body.theme-sctl [class~="bg-sky-200"]{background-color:rgba(14,165,233,.15)!important} body.theme-sctl [class~="bg-rose-50"],body.theme-sctl [class~="bg-rose-100"],body.theme-sctl [class~="bg-rose-200"]{background-color:rgba(244,63,94,.15)!important} body.theme-sctl [class~="bg-violet-50"],body.theme-sctl [class~="bg-violet-100"],body.theme-sctl [class~="bg-violet-200"]{background-color:rgba(139,92,246,.16)!important} body.theme-sctl [class~="bg-pink-50"],body.theme-sctl [class~="bg-pink-100"],body.theme-sctl [class~="bg-pink-200"]{background-color:rgba(236,72,153,.15)!important} body.theme-sctl [class~="bg-fuchsia-50"],body.theme-sctl [class~="bg-fuchsia-100"],body.theme-sctl [class~="bg-fuchsia-200"]{background-color:rgba(217,70,239,.15)!important} body.theme-sctl [class~="bg-amber-50"],body.theme-sctl [class~="bg-amber-100"],body.theme-sctl [class~="bg-amber-200"]{background-color:rgba(245,158,11,.15)!important} body.theme-sctl [class~="bg-teal-50"],body.theme-sctl [class~="bg-teal-100"],body.theme-sctl [class~="bg-teal-200"]{background-color:rgba(20,184,166,.15)!important} body.theme-sctl [class~="bg-indigo-50"],body.theme-sctl [class~="bg-indigo-100"],body.theme-sctl [class~="bg-indigo-200"]{background-color:rgba(99,102,241,.16)!important} body.theme-sctl [class~="bg-cyan-50"],body.theme-sctl [class~="bg-cyan-100"],body.theme-sctl [class~="bg-cyan-200"]{background-color:rgba(6,182,212,.15)!important} /* Coloured hairline borders on those tiles → a matching subtle tint. */ body.theme-sctl [class*="border-emerald-1"],body.theme-sctl [class*="border-emerald-2"]{border-color:rgba(16,185,129,.30)!important} body.theme-sctl [class*="border-sky-1"],body.theme-sctl [class*="border-sky-2"]{border-color:rgba(14,165,233,.30)!important} body.theme-sctl [class*="border-rose-1"],body.theme-sctl [class*="border-rose-2"]{border-color:rgba(244,63,94,.30)!important} body.theme-sctl [class*="border-violet-1"],body.theme-sctl [class*="border-violet-2"]{border-color:rgba(139,92,246,.32)!important} body.theme-sctl [class*="border-pink-1"],body.theme-sctl [class*="border-pink-2"]{border-color:rgba(236,72,153,.30)!important} body.theme-sctl [class*="border-fuchsia-1"],body.theme-sctl [class*="border-fuchsia-2"]{border-color:rgba(217,70,239,.30)!important} body.theme-sctl [class*="border-amber-1"],body.theme-sctl [class*="border-amber-2"]{border-color:rgba(245,158,11,.30)!important} body.theme-sctl [class*="border-teal-1"],body.theme-sctl [class*="border-teal-2"]{border-color:rgba(20,184,166,.30)!important} body.theme-sctl [class*="border-indigo-1"],body.theme-sctl [class*="border-indigo-2"]{border-color:rgba(99,102,241,.32)!important} body.theme-sctl [class*="border-cyan-1"],body.theme-sctl [class*="border-cyan-2"]{border-color:rgba(6,182,212,.30)!important} /* Icon/badge text → brightened hue (~-300/400) so it pops on the dark tint. */ body.theme-sctl [class*="text-emerald-6"],body.theme-sctl [class*="text-emerald-7"],body.theme-sctl [class*="text-emerald-8"]{color:#34d399!important} body.theme-sctl [class*="text-sky-6"],body.theme-sctl [class*="text-sky-7"],body.theme-sctl [class*="text-sky-8"]{color:#38bdf8!important} body.theme-sctl [class*="text-rose-6"],body.theme-sctl [class*="text-rose-7"],body.theme-sctl [class*="text-rose-8"]{color:#fb7185!important} body.theme-sctl [class*="text-violet-6"],body.theme-sctl [class*="text-violet-7"],body.theme-sctl [class*="text-violet-8"]{color:#a78bfa!important} body.theme-sctl [class*="text-pink-6"],body.theme-sctl [class*="text-pink-7"],body.theme-sctl [class*="text-pink-8"]{color:#f472b6!important} body.theme-sctl [class*="text-fuchsia-6"],body.theme-sctl [class*="text-fuchsia-7"],body.theme-sctl [class*="text-fuchsia-8"]{color:#e879f9!important} body.theme-sctl [class*="text-amber-6"],body.theme-sctl [class*="text-amber-7"],body.theme-sctl [class*="text-amber-8"]{color:#fbbf24!important} body.theme-sctl [class*="text-teal-6"],body.theme-sctl [class*="text-teal-7"],body.theme-sctl [class*="text-teal-8"]{color:#2dd4bf!important} body.theme-sctl [class*="text-indigo-6"],body.theme-sctl [class*="text-indigo-7"],body.theme-sctl [class*="text-indigo-8"]{color:#818cf8!important} body.theme-sctl [class*="text-cyan-6"],body.theme-sctl [class*="text-cyan-7"],body.theme-sctl [class*="text-cyan-8"]{color:#22d3ee!important} /* Inputs / textareas ------------------------------------------------------- */ body.theme-sctl input:not([type=checkbox]):not([type=radio]):not([type=range]), body.theme-sctl textarea, body.theme-sctl select { background-color: var(--input-bg) !important; border-color: var(--sctl-line) !important; color: var(--sctl-ink) !important; } body.theme-sctl input::placeholder, body.theme-sctl textarea::placeholder { color: var(--sctl-muted2) !important; } /* ── Brand accents ───────────────────────────────────────────────────────── */ /* The signature multi-stop gradient replaces flat brand→brand-dark buttons. */ body.theme-sctl .bg-gradient-to-r.from-brand, body.theme-sctl .bg-gradient-to-br.from-brand, body.theme-sctl .bg-gradient-to-r.from-brand.to-brand-dark, body.theme-sctl .solid-btn { background-image: var(--sctl-gradient) !important; color: #fff !important; } /* Dark primary buttons (bg-slate-900) → the brand gradient so CTAs pop. */ body.theme-sctl .bg-slate-900:not(section):not(footer), body.theme-sctl .hover\:bg-slate-800:hover { background-image: var(--sctl-gradient) !important; background-color: transparent !important; color: #fff !important; } /* Gradient headline text — override the old purple gradient. */ body.theme-sctl .gradient-text { background-image: var(--sctl-gradient-text) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Chips / pills / eyebrow badges built on bg-brand/10. */ body.theme-sctl .chip { background: rgba(var(--sctl-brand-rgb), .14) !important; color: #fff !important; border: 1px solid var(--sctl-line); } /* Aurora / decorative blobs read a touch brighter on the dark canvas. */ body.theme-sctl [aria-hidden="true"].blur-3xl, body.theme-sctl .aurora-a, body.theme-sctl .aurora-b { opacity: .5; mix-blend-mode: screen; } /* The nav bar is polished GLASS (2026 pass): translucent near-black with a heavy blur and a faint light hairline — not the old near-solid slab. The blur keeps dropdown/panel text readable while the aurora glows through. */ body.theme-sctl nav.sticky { background-color: rgba(6,8,18,.55) !important; -webkit-backdrop-filter: blur(18px) saturate(1.35) !important; backdrop-filter: blur(18px) saturate(1.35) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } /* The floating nav capsule + ghost auth pill live on their own classes so the bg-white remap below can't turn them into solid slabs. */ body.theme-sctl .nav-capsule { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 26px -14px rgba(0,0,0,.6) !important; } body.theme-sctl .nav-ghost { background: rgba(255,255,255,.08); color: var(--ink); } body.theme-sctl .nav-ghost:hover { background: rgba(255,255,255,.15); } /* ── Marketing-nav dark polish ──────────────────────────────────────────────── The mega-menu internals (light dropdown tiles/borders/rings, grey hovers) are handled by the GLOBAL remaps above — border-slate-*, ring-slate-*, from-slate-* gradients, and the broadened hover:bg-slate rule all reach into the nav. A floating MENU, though, must NOT be glass: the global bg-white remap gives every white surface --sctl-panel (rgba .78) + blur(14px), which is right for a hero card sitting over the aurora but wrong for a dropdown you read text in — the page bleeds through and looks cheap. Force the nav's own bg-white panels to a SOLID elevated surface with no backdrop blur. */ body.theme-sctl nav [class*="bg-white"] { background-color: var(--surface-elevated) !important; /* #11182B, opaque */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Heavier drop-shadow so the solid dark panel still lifts off the near-black nav (its shadow-slate-900/10 is invisible on dark). */ body.theme-sctl nav .shadow-2xl { box-shadow: 0 24px 60px -20px rgba(0,0,0,.7) !important; } /* Mockup partials (mk-mock) are self-styled light cards on marketing pages — keep them as bright "product screenshots" so they read as UI against dark. We simply lift them onto a solid light surface instead of glass. */ body.theme-sctl .mk-mock.bg-white { background-color: #0d1226 !important; } body.theme-sctl .mk-mock.bg-white * { /* keep inner mock text legible */ } /* /try/p/{token} calendar preview (studio/preview.blade.php) — the top hero card is a bespoke `.hero-grad` class, not a Tailwind utility, so none of the generic bg-white/from-white remaps above can reach it. It rendered as a solid white card even with the dark theme on. Keep the two accent glows, swap the white→lavender base for the dark panel tokens. */ body.theme-sctl .hero-grad { background: radial-gradient(circle at 10% 0%, rgba(130,92,248,.16), transparent 42%), radial-gradient(circle at 95% 8%, rgba(64,240,223,.14), transparent 46%), linear-gradient(135deg, var(--sctl-panel) 0%, var(--sctl-bg2) 100%) !important; } /* Divider lines / hr */ body.theme-sctl hr, body.theme-sctl .divide-slate-100 > * + *, body.theme-sctl .divide-slate-200 > * + * { border-color: var(--sctl-line) !important; } /* Shadows read as glow on dark */ body.theme-sctl .shadow-xl, body.theme-sctl .shadow-2xl, body.theme-sctl .shadow-lg { box-shadow: 0 24px 80px rgba(0,0,0,.45) !important; } /* Prose / blog article body */ body.theme-sctl .prose { color: var(--sctl-muted) !important; } body.theme-sctl .prose :is(h1,h2,h3,h4,strong) { color: var(--sctl-ink) !important; } body.theme-sctl .prose a { color: var(--sctl-cyan) !important; } body.theme-sctl .prose :is(code,pre) { background: rgba(255,255,255,.06) !important; color: var(--sctl-ink) !important; } /* ========================================================================== 2026-07-10 — dark-mode consistency audit fixes. Everything below stays scoped to body.theme-sctl and reuses the existing --sctl-* tokens (no new hex introduced). NOTE on selectors: we use the `[class~="token"]` attribute form (exact whitespace-separated class-token match) rather than `[class*="token"]` (raw substring) wherever a `-50`/ `-100` shade is involved — `*=` would also match e.g. `from-slate-500` (contains "from-slate-50" as a literal substring) and wrongly flatten a saturated decorative gradient. `~=` matches the whole utility class only. ========================================================================== */ /* ── 1) Light GRADIENT card / section backgrounds → dark glass ───────────── Tailwind's from-/via-/to- utilities set `background-image`, so the plain `.bg-white` → panel remap above never touches them. We flatten the whole gradient onto the same dark-glass surface used for solid light cards (reusing --sctl-panel-2, the token already used for bg-slate-50/bg-gray-50 — there's no separate --sctl-surface var, so we don't invent one). Confirmed present on: studio/landing.blade.php (hero demo stage bg L263, "from the blog" section wrapper L1042), studio/preview.blade.php (upgrade callout L349), studio/start.blade.php (page bleed L166), marketing/pricing.blade.php (section wrap L143), blog/index.blade.php (page wrap L37), help/tutorials.blade.php (video thumb placeholder L137). */ body.theme-sctl [class~="from-white"], body.theme-sctl [class~="via-white"], body.theme-sctl [class~="to-white"], body.theme-sctl [class~="from-slate-50"], body.theme-sctl [class~="from-slate-100"], body.theme-sctl [class~="from-gray-50"], body.theme-sctl [class~="from-slate-50/60"], body.theme-sctl [class~="via-slate-50/30"], body.theme-sctl [class~="to-slate-50/70"], body.theme-sctl [class~="to-fuchsia-50/30"] { background-image: none !important; background-color: var(--sctl-panel-2) !important; border-color: var(--sctl-line) !important; } /* Decorative fade-to-transparent masks (aria-hidden scroll-edge / sticky-bar fades, e.g. landing.blade.php L792-793, preview.blade.php L686) are a special case of the above — from-slate-50/from-white … to-transparent. Flattening them to a flat panel color would turn a fade into a hard bar, so instead we re-fade them from the dark canvas colour. Matched via pointer-events-none (every instance in the codebase is a decorative overlay with pointer-events-none — a real content card never sets that on itself), so this intentionally wins over the flatten rule above via higher selector specificity (two attribute selectors vs. one). */ body.theme-sctl [class~="pointer-events-none"][class~="bg-gradient-to-b"], body.theme-sctl [class~="pointer-events-none"][class~="bg-gradient-to-t"] { background-color: transparent !important; } body.theme-sctl [class~="pointer-events-none"][class~="bg-gradient-to-b"] { background-image: linear-gradient(to bottom, var(--sctl-bg), transparent) !important; } body.theme-sctl [class~="pointer-events-none"][class~="bg-gradient-to-t"] { background-image: linear-gradient(to top, var(--sctl-bg), transparent) !important; } /* ── 2) Light SOLID tint cards (-50/-100 family) → dark glass ────────────── Small colour-tint callouts/pills/badges (bg-amber-50, bg-cyan-50, …) used as a whole-element background — distinct from the bg-slate-50/bg-gray-50 pair already remapped above, and DELIBERATELY NOT touching the saturated -400/-500/-600 icon-badge gradients (from-amber-500 to-orange-500 etc.), which stay vivid by design. Confirmed on landing.blade.php ~L653-657 (feature-grid tint icons), ~L486-489 (stat strip), the hero browser-frame demo chips, plus the public/*.blade.php legal-page eyebrow badges and privacy/refund/cookies/acceptable-use "note" callouts. */ body.theme-sctl [class~="bg-amber-50"], body.theme-sctl [class~="bg-amber-50/50"], body.theme-sctl [class~="bg-amber-50/70"], body.theme-sctl [class~="bg-amber-100"], body.theme-sctl [class~="bg-cyan-50"], body.theme-sctl [class~="bg-cyan-100"], body.theme-sctl [class~="bg-rose-50"], body.theme-sctl [class~="bg-rose-50/50"], body.theme-sctl [class~="bg-rose-100"], body.theme-sctl [class~="bg-purple-50"], body.theme-sctl [class~="bg-purple-100"], body.theme-sctl [class~="bg-sky-50"], body.theme-sctl [class~="bg-sky-100"], body.theme-sctl [class~="bg-emerald-50"], body.theme-sctl [class~="bg-emerald-50/50"], body.theme-sctl [class~="bg-emerald-100"], body.theme-sctl [class~="bg-violet-50"], body.theme-sctl [class~="bg-violet-100"], body.theme-sctl [class~="bg-indigo-50"], body.theme-sctl [class~="bg-indigo-100"], body.theme-sctl [class~="bg-orange-50"], body.theme-sctl [class~="bg-orange-100"], body.theme-sctl [class~="bg-pink-50"], body.theme-sctl [class~="bg-pink-100"], body.theme-sctl [class~="bg-teal-50"], body.theme-sctl [class~="bg-teal-100"], body.theme-sctl [class~="bg-fuchsia-50"], body.theme-sctl [class~="bg-fuchsia-100"], body.theme-sctl [class~="bg-green-50"] { background-color: var(--sctl-panel-2) !important; border-color: var(--sctl-line) !important; } /* ── 4) Footer contrast (WCAG 4.5:1) ──────────────────────────────────────── The general .text-slate-500/.text-slate-400 remap above targets --sctl-muted2 (~4.1:1 on the footer's near-black background — fails AA for normal text). Footer-scoped only (higher specificity than the general rule, so it wins) bumps footer labels/links to --sctl-muted (~9.3:1), already used one step up for slate-700/600 body copy — no new colour introduced. Link hover states already go to full white via the existing `.hover\:text-white` on marketing-footer.blade.php links, so hover contrast stays distinguishable. */ body.theme-sctl footer .text-slate-500, body.theme-sctl footer .text-slate-400 { color: var(--sctl-muted) !important; } /* ── 5) Cookie-consent "Accept all" button ────────────────────────────────── Already brand-consistent (remapped to --sctl-gradient by the .from-brand rule above with text-white preserved) rather than raw orange — BUT the gradient's own orange/teal stops sit at ~2.4:1 against white text, well under AA. Scoped to the cookie banner + preferences modal only (matched via their existing aria-label/aria-labelledby — no markup change needed): a 30% black scrim (inset box-shadow, sits behind the text, in front of the gradient) brings every stop to >=4.5:1 while keeping the multi-stop brand gradient recognisable, not flat/black. */ body.theme-sctl [aria-label="Cookie preferences"] .bg-gradient-to-r.from-brand.to-brand-dark, body.theme-sctl [aria-labelledby="cookie-modal-title"] .bg-gradient-to-r.from-brand.to-brand-dark { box-shadow: inset 0 0 0 999px rgba(0,0,0,.3) !important; } /* ── 6) Dark-mode wordmark (D-Batch 0 / D2) ───────────────────────────────── partials/logo.blade.php bakes the "Social" wordmark in dark ink (#0F172A) for the 'lockup' variant so it reads on LIGHT headers. Under theme-sctl the marketing nav (nav.sticky) and mobile drawer go near-black, so that dark lettering vanished. These overrides (winning over the span's inline color via !important) force the wordmark to light on ANY dark surface — the nav lockups (marketing-nav.blade.php L75/78/285) now read light. The 'inverse' variant used in footer/guest was already white; re-pointing it at --text-primary keeps it light (no regression). Light theme (no theme-sctl) is untouched, so the dark lockup still reads on light headers there. */ body.theme-sctl .wm-word { color: var(--text-primary) !important; } body.theme-sctl .wm-sub { color: var(--text-secondary) !important; } /* ========================================================================== D-Batch A (D3–D6) — dark-theme the article/legal PROSE at the template layer. -------------------------------------------------------------------------- All long-form content — blog articles (blog/show.blade.php), the 8 pillar guides (blog/pillar.blade.php), and the 5 legal pages (public/privacy, terms, cookies, acceptable-use, refund .blade.php) — renders into a shared `.article-body` wrapper. Every one of those 7 templates carries its own