/* ============================================================ SPVOX — Dark Mode Loaded on every page. [data-theme="dark"] on is set by site-chrome.js (with localStorage persistence). ============================================================ */ /* ── Core token overrides ──────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --white: #141416; /* page bg, card bg (was #FFFFFF) */ --canvas: #1C1C1E; /* section bg (was #F6F5F2) */ --line: #2E2E2E; /* borders/dividers (was #ECEAE5) */ --ink-60: #ADADB0; /* secondary text */ --ink-40: #636367; /* tertiary text */ --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2); --shadow-md: 0 8px 24px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.24); --shadow-lg: 0 24px 60px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.32); } /* Primary text — --charcoal stays #1A1A1A (used for dark panels/footer/cta) so we override body and headings directly here */ [data-theme="dark"] body { background: #141416; color: #F2F2F4; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #F2F2F4; } [data-theme="dark"] .lead { color: rgba(242,242,244,.65); } [data-theme="dark"] .eyebrow { color: var(--pink); } [data-theme="dark"] .eyebrow::before { background: var(--pink); } /* Marker highlights: light-on-light in dark mode → tone down to a subtle glow */ [data-theme="dark"] .mark-hl::after { background: rgba(127,226,182,.18); } [data-theme="dark"] .mark-hl.pink::after { background: rgba(184,60,196,.2); } /* ── Header ─────────────────────────────────────────────────── */ [data-theme="dark"] .site-header { background: rgba(20,20,22,.8); } [data-theme="dark"] .site-header.scrolled { background: rgba(20,20,22,.96); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.04), var(--shadow-sm); } /* ── Burger ──────────────────────────────────────────────────── */ [data-theme="dark"] .burger span, [data-theme="dark"] .burger span::before, [data-theme="dark"] .burger span::after { background: rgba(242,242,244,.88); } [data-theme="dark"] body.menu-open .burger span { background: transparent; } /* ── Logo ────────────────────────────────────────────────────── */ [data-theme="dark"] .site-header .logo-box .tag { color: rgba(242,242,244,.6); } /* ── Desktop nav ─────────────────────────────────────────────── */ [data-theme="dark"] .nav a, [data-theme="dark"] .nav .dd-toggle { color: rgba(242,242,244,.62); } [data-theme="dark"] .nav a:hover, [data-theme="dark"] .nav a.active { color: var(--pink); background: rgba(184,60,196,.1); } [data-theme="dark"] .nav .dropdown:hover .dd-toggle, [data-theme="dark"] .nav .dd-toggle.active { color: var(--pink); background: rgba(184,60,196,.1); } [data-theme="dark"] .nav .dd-menu { background: #1E1E22; border-color: rgba(255,255,255,.1); } [data-theme="dark"] .nav .dd-menu a { color: #F2F2F4; background: transparent; } [data-theme="dark"] .nav .dd-menu a:hover { background: rgba(255,255,255,.07); } [data-theme="dark"] .nav .dd-menu a small { color: rgba(242,242,244,.5); } /* ── Header CTA ──────────────────────────────────────────────── */ [data-theme="dark"] .header-cta .signin { color: rgba(242,242,244,.7); } [data-theme="dark"] .header-cta .signin:hover { color: var(--pink); } /* ── Dark mode toggle button ─────────────────────────────────── */ .dm-btn { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink-60, #8A8A8A); transition: color .18s, background .18s; } .dm-btn:hover { color: var(--charcoal, #1A1A1A); background: var(--canvas, #F6F5F2); } .dm-btn svg { width: 18px; height: 18px; pointer-events: none; } .dm-btn .dm-sun { display: none; } .dm-btn .dm-moon { display: block; } [data-theme="dark"] .dm-btn .dm-sun { display: block; } [data-theme="dark"] .dm-btn .dm-moon { display: none; } [data-theme="dark"] .dm-btn { color: rgba(242,242,244,.65); } [data-theme="dark"] .dm-btn:hover { color: #F2F2F4; background: rgba(255,255,255,.08); } /* ── Buttons ─────────────────────────────────────────────────── */ /* btn-dark has charcoal bg — flip to purple→blue gradient in dark mode */ [data-theme="dark"] .btn-dark { background: linear-gradient(135deg,#B83CC4,#4361EE); color: #fff; box-shadow: 0 6px 20px rgba(67,97,238,.32); } [data-theme="dark"] .btn-dark:hover { background: linear-gradient(135deg,#C848D4,#5575F5); box-shadow: 0 8px 26px rgba(67,97,238,.48); } [data-theme="dark"] .btn-dark:active { background: linear-gradient(135deg,#C848D4,#5575F5); box-shadow: 0 8px 26px rgba(67,97,238,.48); } [data-theme="dark"] .btn-ghost { color: rgba(242,242,244,.85); border-color: rgba(242,242,244,.28); } [data-theme="dark"] .btn-ghost:hover { background: rgba(242,242,244,.1); color: #F2F2F4; } [data-theme="dark"] .btn-ghost:active { background: rgba(242,242,244,.1); color: #F2F2F4; } /* circled "Let's talk" CTA — text uses var(--charcoal) */ [data-theme="dark"] .circled { color: #F2F2F4; } [data-theme="dark"] .circled:hover { color: var(--pink); } /* ── Client logos → white ────────────────────────────────────── */ [data-theme="dark"] .logos .logo img, [data-theme="dark"] .about-logos .lg img { filter: brightness(0) invert(1); opacity: .70; } [data-theme="dark"] .logos .logo:hover img, [data-theme="dark"] .about-logos .lg:hover img { opacity: .88; } /* ── Descriptor chips ────────────────────────────────────────── */ /* fc-tag: founder cards (about page) */ [data-theme="dark"] .fc-tag:not(.lead) { background: rgba(255,255,255,.09); color: color-mix(in srgb, var(--accent, var(--pink)) 80%, #F2F2F4); border: 1px solid rgba(255,255,255,.13); } /* pt: player-tab descriptor chips (index player) */ [data-theme="dark"] .pt:not(.lead) { background: rgba(255,255,255,.09); color: color-mix(in srgb, var(--accent, var(--pink)) 80%, #F2F2F4); } /* talent-tags (About section in homepage) */ [data-theme="dark"] .talent-tags span { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); color: rgba(242,242,244,.72); } /* ── Player card ─────────────────────────────────────────────── */ [data-theme="dark"] .spvox-player { background: linear-gradient(var(--white, #141416), var(--white, #141416)) padding-box, linear-gradient(var(--gangle, 135deg), var(--pink), var(--zapote), var(--green), var(--pink)) border-box; } [data-theme="dark"] .sp-tab { color: rgba(242,242,244,.45); } [data-theme="dark"] .sp-tab:not(.active):hover { background: rgba(255,255,255,.07); color: #F2F2F4; } [data-theme="dark"] .sp-tab.active { background: var(--white, #141416); border-color: var(--line, #2E2E2E); color: #F2F2F4; } [data-theme="dark"] .sp-np-title { color: #F2F2F4; } [data-theme="dark"] .sp-cat { border-color: var(--line, #2E2E2E); color: rgba(242,242,244,.65); } [data-theme="dark"] .sp-cat:hover { color: #F2F2F4; border-color: var(--accent, var(--pink)); } /* demo-chip list items */ [data-theme="dark"] .demo-chip { background: var(--white, #141416); border-color: var(--line, #2E2E2E); } [data-theme="dark"] .demo-chip .t { color: #F2F2F4; } [data-theme="dark"] .demo-chip:hover { border-color: color-mix(in srgb, var(--accent, var(--pink)) 45%, var(--line, #2E2E2E)); } /* ── Demos section band ──────────────────────────────────────── */ [data-theme="dark"] .demos-section { background: #1A1A1C; } /* ── Talent cards ────────────────────────────────────────────── */ [data-theme="dark"] .talent-card { background: #1C1C1E; border-color: var(--line, #2E2E2E); } /* ── Founder photo ring ──────────────────────────────────────── */ [data-theme="dark"] .fc-photo { box-shadow: 0 0 0 2px var(--canvas, #1C1C1E), 0 0 0 4px var(--accent, var(--pink)); } /* ── "Our services:" label (.whatwedo is a

, not h*) ─────── */ [data-theme="dark"] .whatwedo { color: #F2F2F4; } /* ── Video reel section heading (higher-specificity rule in source) ── */ [data-theme="dark"] .videos .section-head h2 { color: #F2F2F4; } /* ── Reel library switch tabs ────────────────────────────────── */ [data-theme="dark"] .reel-switch { background: #1C1C1E; border-color: var(--line, #2E2E2E); } [data-theme="dark"] .rsw { color: var(--ink-60, #ADADB0); } [data-theme="dark"] .rsw:hover { color: #F2F2F4; } [data-theme="dark"] .rsw.active { background: var(--pink); color: #fff; } /* ── Footer logo (frame uses --white which goes dark in dark mode) ── */ [data-theme="dark"] .site-footer .logo-box .frame, [data-theme="dark"] .site-footer .logo-box .frame span { color: rgba(242,242,244,.9); border-color: rgba(242,242,244,.3); } [data-theme="dark"] .site-footer .logo-box .tag { color: rgba(242,242,244,.5); } /* ── Footer column headings (color: var(--white) → dark in dark mode) ── */ [data-theme="dark"] .footer-col h5 { color: rgba(242,242,244,.55); } /* ── CTA blocks (charcoal bg blends into dark canvas; outline+shadow needed) ── */ /* outline is used for the border ring because overflow:hidden clips box-shadow */ [data-theme="dark"] .end-cta, [data-theme="dark"] .hub-cta, [data-theme="dark"] .svc-cta, [data-theme="dark"] .faq-cta, [data-theme="dark"] .vo-cta { outline: 1.5px solid rgba(184,60,196,.32); box-shadow: 0 0 50px rgba(184,60,196,.25), 0 4px 20px rgba(184,60,196,.18); } /* ── Contact / form card ─────────────────────────────────────── */ [data-theme="dark"] .form-card { background: #1C1C1E; border-color: var(--line, #2E2E2E); box-shadow: 0 8px 32px rgba(184,60,196,.18), 0 2px 8px rgba(0,0,0,.35); } [data-theme="dark"] .form-header { background: linear-gradient(135deg, rgba(184,60,196,.12) 0%, rgba(232,154,60,.06) 60%, transparent 100%); border-bottom-color: rgba(184,60,196,.15); } [data-theme="dark"] .fld input, [data-theme="dark"] .fld select, [data-theme="dark"] .fld textarea { background: rgba(255,255,255,.07); color: #F2F2F4; border-color: transparent; } [data-theme="dark"] .fld input:focus, [data-theme="dark"] .fld select:focus, [data-theme="dark"] .fld textarea:focus { border-color: var(--pink); background: rgba(184,60,196,.10); box-shadow: 0 0 0 3px rgba(184,60,196,.28), 0 0 20px rgba(184,60,196,.18); } [data-theme="dark"] .fld input::placeholder, [data-theme="dark"] .fld textarea::placeholder { color: rgba(242,242,244,.35); } [data-theme="dark"] .chk .chk-label { color: rgba(242,242,244,.82); } [data-theme="dark"] .chk .chk-box { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); } [data-theme="dark"] .cmeta { background: #1C1C1E; border-color: var(--line, #2E2E2E); color: #F2F2F4; } [data-theme="dark"] .cmeta:hover, [data-theme="dark"] .contact-card:hover { box-shadow: 0 0 0 1px rgba(184,60,196,.3), 0 8px 28px rgba(184,60,196,.25), 0 2px 8px rgba(0,0,0,.35); } [data-theme="dark"] .cmeta small { color: var(--ink-40, #636367); } /* ── VO landing "Best for" chips ─────────────────────────────── */ [data-theme="dark"] .vo-bestfor span { color: rgba(242,242,244,.72); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); } /* ── Hero proof bar ──────────────────────────────────────────── */ [data-theme="dark"] .hero-proof b { color: #F2F2F4; } [data-theme="dark"] .hero-proof .avatars span { border-color: rgba(242,242,244,.2); } /* ── Service / feature cards ("how we help") ─────────────────── */ [data-theme="dark"] .card:hover { box-shadow: 0 8px 32px rgba(184,60,196,.18), 0 2px 8px rgba(0,0,0,.35); } [data-theme="dark"] .card .card-more { color: rgba(242,242,244,.8); border-color: rgba(242,242,244,.18); } [data-theme="dark"] .card:hover .card-more { color: var(--pink); border-color: var(--pink); } /* ── Showcase panels (alternating "how we help" rows) ────────── */ /* .panel .mini uses color:var(--white) which goes dark in dark mode */ [data-theme="dark"] .panel .mini { color: rgba(242,242,244,.9); } /* ── Reviews carousel arrows + dots ─────────────────────────── */ /* Arrow icon color is var(--charcoal) = near-invisible on dark canvas */ [data-theme="dark"] .rev-arrow { color: rgba(242,242,244,.7); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); } [data-theme="dark"] .rev-arrow:hover { background: var(--pink); border-color: var(--pink); color: #fff; } /* Inactive dots use var(--line) = #2E2E2E, nearly invisible on dark canvas */ [data-theme="dark"] .rev-dot { background: rgba(255,255,255,.28); } [data-theme="dark"] .rev-dot:hover { background: rgba(255,255,255,.5); } /* ── Video pager arrows + dots ───────────────────────────────── */ [data-theme="dark"] .vpager-arrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); color: rgba(242,242,244,.7); } [data-theme="dark"] .vpager-arrow:hover:not(:disabled) { background: var(--pink); border-color: var(--pink); color: #fff; } [data-theme="dark"] .vpager-dot { background: rgba(255,255,255,.28); } /* ── Testimonial / quote cards (hardcoded #fff background) ──── */ [data-theme="dark"] .quote { background: #1C1C1E; border-color: var(--line, #2E2E2E); box-shadow: 0 1px 4px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.2); } [data-theme="dark"] .quote:hover { box-shadow: 0 8px 32px rgba(184,60,196,.18), 0 2px 8px rgba(0,0,0,.35); } [data-theme="dark"] .quote p { color: rgba(242,242,244,.85); } [data-theme="dark"] .quote .who b { color: #F2F2F4; } [data-theme="dark"] .quote .who span > span { color: rgba(242,242,244,.55); } [data-theme="dark"] .quote .who .ava { color: #fff; } /* ── Demo player autoplay label (active state) ───────────────── */ [data-theme="dark"] .dt-toggle[aria-checked="true"] .dt-label { color: #F2F2F4; } /* ── Video filter tabs (vtab) ────────────────────────────────── */ /* .vtab.active uses color:var(--white) which becomes dark in dark mode */ [data-theme="dark"] .vtab.active { color: #fff; } /* ── Reel channel CTA strong text ────────────────────────────── */ [data-theme="dark"] .reel-channel p strong { color: #F2F2F4; } /* ── Founder caption under hero photo ───────────────────────── */ [data-theme="dark"] .founder-cap { color: #F2F2F4; } /* ── Mobile menu links — var(--white) resolves to #141416 in dark mode ── */ [data-theme="dark"] .mobile-menu a, [data-theme="dark"] .mobile-menu .m-dd-toggle { color: #F2F2F4; } [data-theme="dark"] .mobile-menu a:hover, [data-theme="dark"] .mobile-menu .m-dd-toggle:hover { color: var(--green); } [data-theme="dark"] .mobile-menu .m-dd-menu a { color: rgba(242,242,244,.72); } [data-theme="dark"] .mobile-menu .m-dd-menu a:hover { color: var(--green); } /* ── Mobile menu logo (frame uses var(--white) on dark bg) ──── */ [data-theme="dark"] .mobile-menu .logo-box .frame, [data-theme="dark"] .mobile-menu .logo-box .frame span { color: rgba(242,242,244,.9); border-color: rgba(242,242,244,.3); } /* ════════════════════════════════════════════════════════════ Hub tab navigation (FAQ + About pages) .hub-tab.active uses color:var(--charcoal) + background:var(--white) → both resolve to near-black in dark mode ════════════════════════════════════════════════════════════ */ [data-theme="dark"] .hub-tab.active { color: #F2F2F4; background: #141416; } [data-theme="dark"] .hub-tab:not(.active):hover { color: #F2F2F4; background: rgba(255,255,255,.06); } /* ════════════════════════════════════════════════════════════ FAQ page ════════════════════════════════════════════════════════════ */ /* Search bar (hardcoded #fff bg) */ [data-theme="dark"] .faq-search { background: #1C1C1E; border-color: var(--line, #2E2E2E); box-shadow: none; } [data-theme="dark"] .faq-search input { color: #F2F2F4; } [data-theme="dark"] .faq-search input::placeholder { color: rgba(242,242,244,.35); } /* ── Category filter pills — shared by FAQ (color-coded) and Blog (flat) ── */ [data-theme="dark"] .cat-pill { background: #1C1C1E; border-color: #3A3A3E; /* elevated-surface border, consistent with other pill elements */ color: rgba(242,242,244,.65); } [data-theme="dark"] .cat-pill:hover { border-color: var(--pill-color, rgba(242,242,244,.4)); color: var(--pill-color, #F2F2F4); } [data-theme="dark"] .cat-pill.active { background: var(--pill-color, var(--pink)); border-color: var(--pill-color, var(--pink)); color: #fff; } /* Blog chips: per-category --pill-color set in JS; hover/active follow the same pattern as FAQ pills */ [data-theme="dark"] .blog-controls .cat-pill:hover { border-color: var(--pill-color, rgba(242,242,244,.4)); color: var(--pill-color, #F2F2F4); } [data-theme="dark"] .blog-controls .cat-pill.active { background: var(--pill-color, var(--pink)); border-color: var(--pill-color, var(--pink)); color: #fff; } /* Strong text in FAQ answers */ [data-theme="dark"] .faq-a strong { color: #F2F2F4; } [data-theme="dark"] .faq-a a { text-decoration-color: rgba(184,60,196,.45); } /* Search highlight marks */ [data-theme="dark"] mark { background: rgba(184,60,196,.38); color: #F2F2F4; } /* Trusted partners cards (hardcoded #fff) */ [data-theme="dark"] .partner-card { background: #1C1C1E; border-color: var(--line, #2E2E2E); } [data-theme="dark"] .partner-card .pc-logo { background: rgba(255,255,255,.05); border-color: var(--line, #2E2E2E); } [data-theme="dark"] .partner-card:hover { border-color: transparent; } /* AI Disclaimer — green statement block (hardcoded #ECF6F0) */ [data-theme="dark"] .disc-statement { background: rgba(21,178,124,.07); border-color: rgba(21,178,124,.18); color: #F2F2F4; } /* Disclaimer point cards (hardcoded #fff) */ [data-theme="dark"] .disc-point { background: #1C1C1E; border-color: var(--line, #2E2E2E); } /* Usage-rights warning box */ [data-theme="dark"] .disc-warning { color: #F2F2F4; background: #1C1C1E; border-color: var(--line, #2E2E2E); } [data-theme="dark"] .disc-warning strong { color: #F2F2F4; } /* Our Commitment tab */ [data-theme="dark"] .commit-letter .lede { color: #F2F2F4; } [data-theme="dark"] .commit-close p strong { color: #F2F2F4; } /* Polaroid photo frame — base CSS is already cream; just deepen the shadow in dark mode */ [data-theme="dark"] .commit-photo figure { box-shadow: 0 22px 50px -20px rgba(0,0,0,.7); } /* ════════════════════════════════════════════════════════════ About page ════════════════════════════════════════════════════════════ */ /* Copy strong text */ [data-theme="dark"] .about-story .copy strong { color: #F2F2F4; } /* Founder / team cards (hardcoded #fff) */ [data-theme="dark"] .founder-card { background: #1C1C1E; border-color: var(--line, #2E2E2E); } /* Photo ring: inner halo was hardcoded white — use card bg instead */ [data-theme="dark"] .founder-card .fc-photo { box-shadow: 0 0 0 2px #1C1C1E, 0 0 0 4px var(--accent, var(--pink)); } /* Studio cards (hardcoded #fff) */ [data-theme="dark"] .studio-card { background: #1C1C1E; border-color: var(--line, #2E2E2E); } /* Gear cards (hardcoded #fff) */ [data-theme="dark"] .gear-card { background: #1C1C1E; border-color: var(--line, #2E2E2E); } [data-theme="dark"] .gear-card li b { color: #F2F2F4; } /* "A regular family" section trait chips */ [data-theme="dark"] .humans-copy .h-tags span { color: rgba(242,242,244,.72); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); } /* ── FAQ accordion ───────────────────────────────────────────── */ [data-theme="dark"] .faq-item { background: #1C1C1E; border-color: var(--line, #2E2E2E); } [data-theme="dark"] .faq-item[open] { border-color: transparent; box-shadow: 0 8px 24px rgba(0,0,0,.36); } [data-theme="dark"] .faq-q { color: #F2F2F4; } [data-theme="dark"] .faq-item:hover .faq-q { color: var(--pink); } [data-theme="dark"] .faq-a { color: var(--ink-60, #ADADB0); } /* ── Blog pagination ─────────────────────────────────────────── */ [data-theme="dark"] .pg-btn { background: #1C1C1E; border-color: var(--line, #2E2E2E); color: rgba(242,242,244,.65); } [data-theme="dark"] .pg-btn:hover:not(:disabled) { border-color: rgba(242,242,244,.4); color: #F2F2F4; } [data-theme="dark"] .pg-btn.active { background: var(--pink); border-color: var(--pink); color: #fff; } /* ── Privacy Policy page ─────────────────────────────────────── */ /* .updated badge has hardcoded background:#fff */ [data-theme="dark"] .legal-hero .updated { background: #252527; border-color: #3A3A3E; color: #ADADB0; } /* .intro and strong use color:var(--charcoal) = near-black */ [data-theme="dark"] .prose > .intro { color: rgba(242,242,244,.82); } [data-theme="dark"] .prose strong { color: #F2F2F4; } /* GDPR highlight box (background:var(--canvas) is fine, but border needs softening) */ [data-theme="dark"] #gdpr { border-color: #3A3A3E; } /* ── Audio player download dropdown ─────────────────────────── */ [data-theme="dark"] .sp-dl-menu { background: #252527; border-color: #3A3A3E; box-shadow: 0 8px 32px rgba(0,0,0,.55); } [data-theme="dark"] .sp-dl-item { color: rgba(242,242,244,.85); } [data-theme="dark"] .sp-dl-item:hover { background: rgba(255,255,255,.08); color: var(--green); } [data-theme="dark"] .sp-dl-all-btn { background: #1C1C1E; border-color: #3A3A3E; color: rgba(242,242,244,.65); } [data-theme="dark"] .sp-dl-all-btn:hover { border-color: var(--green); color: var(--green); } /* ── Blog layout toggle ──────────────────────────────────────── */ [data-theme="dark"] .layout-toggle { background: #1C1C1E; } [data-theme="dark"] .layout-toggle button.active { background: #2E2E30; color: #F2F2F4; } /* ── Blog listing author name (color:var(--charcoal) = invisible) ── */ [data-theme="dark"] .post-meta b { color: #F2F2F4; } /* ── Blog article ────────────────────────────────────────────── */ [data-theme="dark"] .art-body { color: rgba(242,242,244,.85); } [data-theme="dark"] .art-body img { border-color: var(--line, #2E2E2E); } [data-theme="dark"] .art-body blockquote { color: rgba(242,242,244,.85); } [data-theme="dark"] .art-body tbody tr:nth-child(even) td { background: rgba(255,255,255,.05); } [data-theme="dark"] .art-body thead th { color: rgba(242,242,244,.75); } /* ── Article byline author name ──────────────────────────────── */ [data-theme="dark"] .art-byline .who b { color: #F2F2F4; } /* ── Share buttons (color:var(--charcoal) = invisible on dark bg) ── */ [data-theme="dark"] .share-btn { color: rgba(242,242,244,.75); border-color: #3A3A3E; background: #252527; transition: all .18s var(--ease), transform .18s var(--ease); } [data-theme="dark"] .share-btn:hover { transform: translateY(-2px); } [data-theme="dark"] .share-btn.linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; box-shadow: 0 6px 20px rgba(10,102,194,.35); } [data-theme="dark"] .share-btn.facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; box-shadow: 0 6px 20px rgba(24,119,242,.35); } [data-theme="dark"] .share-btn.copy:hover { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 6px 20px rgba(184,60,196,.35); } /* ── Footer bottom link hover (var(--white)=#141416 in dark mode) ── */ [data-theme="dark"] .footer-bottom a:hover { color: #ffffff; } /* ── VO landing "Explore other types" cards ──────────────────── */ [data-theme="dark"] .vo-type-link { background: #2C2C2E; border-color: rgba(255,255,255,.12); box-shadow: 0 2px 8px rgba(0,0,0,.4); } [data-theme="dark"] .vo-type-link b { color: #F2F2F4; } [data-theme="dark"] .vo-type-link span:not(.ti) { color: #ADADB0; } [data-theme="dark"] .vo-type-link .ti { color: #fff; } [data-theme="dark"] .vo-type-link:hover { border-color: transparent; box-shadow: 0 4px 20px rgba(184,60,196,.2), 0 2px 8px rgba(0,0,0,.35); } [data-theme="dark"] .vo-type-link.cur { border-color: var(--accent, var(--pink)); background: color-mix(in srgb, var(--accent, var(--pink)) 10%, #2C2C2E); } /* ── VO landing page player card ─────────────────────────────── */ [data-theme="dark"] .vo-player.agent-card { background: var(--white, #141416); border-color: var(--line, #2E2E2E); } [data-theme="dark"] .player-tab.active { background: var(--white, #141416); border-color: var(--line, #2E2E2E); } [data-theme="dark"] .player-tab:not(.active):hover { background: rgba(255,255,255,.07); color: #F2F2F4; } [data-theme="dark"] .demo-chip.active { background: color-mix(in srgb, var(--accent, var(--pink)) 9%, var(--white, #141416)); } /* ════════════════════════════════════════════════════════════ Script Timer (Tailwind page) Tailwind hardcodes all colors into utility class names; CSS custom-property overrides don't reach them. We patch the specific classes and IDs used on script-timer.html. ════════════════════════════════════════════════════════════ */ /* Card surfaces */ [data-theme="dark"] .bg-white { background-color: #1C1C1E; } [data-theme="dark"] .border-line { border-color: #2E2E2E; } /* Ink text (Tailwind config hardcodes #1A1A1A) */ [data-theme="dark"] .text-ink { color: #F2F2F4; } [data-theme="dark"] .text-ink-60 { color: rgba(242,242,244,.65); } /* Script textarea */ [data-theme="dark"] #script { background-color: rgba(255,255,255,.05); color: #F2F2F4; border-color: #2E2E2E; } [data-theme="dark"] #script::placeholder { color: rgba(242,242,244,.3); } [data-theme="dark"] #script:focus { background-color: rgba(255,255,255,.07); } /* Progress bar tracks (bg-canvas overflow-hidden) */ [data-theme="dark"] .bg-canvas.overflow-hidden { background-color: #2E2E2E; } /* WPM / expansion setting badges (span.bg-canvas) and status pill */ [data-theme="dark"] span.bg-canvas, [data-theme="dark"] #statusPill { background-color: rgba(255,255,255,.08) !important; } /* Range sliders (inline