/* ============================================================= CLICKFU — DARK MODE OVERLAY Palette A "Bold Dark" Load LAST on every page (after any other stylesheet). Activated by ============================================================= */ /* ---------- Smooth theme transitions ------------------------- */ html, body { transition: background-color .25s ease, color .25s ease; } *, *::before, *::after { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } /* ---------- Theme toggle button (works in both themes) ------- */ .cfu-theme-toggle { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0 .5rem; opacity: .85; transition: opacity .2s ease, transform .2s ease, background-color .25s ease, border-color .25s ease; flex-shrink: 0; } .cfu-theme-toggle:hover { opacity: 1; transform: scale(1.05); } .cfu-theme-toggle:focus { outline: 2px solid var(--primary, #4F46E5); outline-offset: 2px; } .cfu-theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cfu-theme-toggle .cfu-icon-moon { display: none; } .cfu-theme-toggle .cfu-icon-sun { display: block; } [data-theme="dark"] .cfu-theme-toggle .cfu-icon-sun { display: none; } [data-theme="dark"] .cfu-theme-toggle .cfu-icon-moon { display: block; } /* ============================================================= DARK MODE — Variable redefinitions Almost every page CSS already uses var(--*) so redefining here flips the entire site automatically. ============================================================= */ [data-theme="dark"] { --bg: #0B0B10; --bg-elev: #14141C; --bg-card: #181822; --bg-soft: #1E1E2A; --border: #2A2A38; --border-soft: #1F1F2B; --text: #F4F4F7; --text-mute: #A0A0B0; --text-dim: #6E6E80; --primary: #C6FF3D; /* lime/chartreuse CTA */ --primary-ink: #0B0B10; /* dark text on lime */ --primary-soft: rgba(198, 255, 61, 0.10); --accent: #FF6B5C; /* coral emphasis */ --accent-soft: rgba(255, 107, 92, 0.12); --success: #34D399; --danger: #FF6B5C; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-glow: 0 0 0 1px rgba(198,255,61,0.22), 0 8px 30px rgba(198,255,61,0.15); } /* Page background + body text fallbacks */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } /* ============================================================= Targeted dark fixes for elements that still use literal colors or rely on body defaults. ============================================================= */ /* --- Header (most pages: .site-header) ----------------------- */ [data-theme="dark"] .site-header { background: rgba(11, 11, 16, 0.85); border-bottom-color: var(--border); backdrop-filter: saturate(140%) blur(10px); } [data-theme="dark"] .site-header a, [data-theme="dark"] .site-header .brand, [data-theme="dark"] .site-header .nav a { color: var(--text); } [data-theme="dark"] .site-header .nav a:hover { color: var(--primary); } /* --- Hero / sections / cards generic fallbacks --------------- */ [data-theme="dark"] section, [data-theme="dark"] main { background: transparent; } [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .box { background: var(--bg-card); border-color: var(--border); color: var(--text); } /* --- Inputs / textareas / selects ---------------------------- */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--bg-elev); color: var(--text); border-color: var(--border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-dim); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; } /* --- Primary buttons: dark text on lime bg ------------------- */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .button-primary, [data-theme="dark"] button.primary, [data-theme="dark"] .cta, [data-theme="dark"] .btn.primary { background: var(--primary); color: var(--primary-ink) !important; border-color: var(--primary); } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .button-primary:hover, [data-theme="dark"] button.primary:hover, [data-theme="dark"] .cta:hover, [data-theme="dark"] .btn.primary:hover { filter: brightness(1.08); } /* --- Coral emphasis spans / .accent text --------------------- */ [data-theme="dark"] .accent, [data-theme="dark"] .text-accent, [data-theme="dark"] mark { color: var(--accent); background: transparent; } /* --- Generic muted text classes ------------------------------ */ [data-theme="dark"] .muted, [data-theme="dark"] .text-muted, [data-theme="dark"] small, [data-theme="dark"] .help-text { color: var(--text-mute); } /* --- Tables -------------------------------------------------- */ [data-theme="dark"] table { color: var(--text); } [data-theme="dark"] th, [data-theme="dark"] td { border-color: var(--border); } [data-theme="dark"] thead { background: var(--bg-elev); } [data-theme="dark"] tbody tr:hover { background: var(--bg-soft); } /* --- Code blocks --------------------------------------------- */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--bg-elev); color: var(--text); border-color: var(--border); } /* --- Badges / pills ------------------------------------------ */ [data-theme="dark"] .badge, [data-theme="dark"] .pill, [data-theme="dark"] .tag { background: var(--primary-soft); color: var(--primary); border-color: rgba(198,255,61,0.3); } /* --- Links default ------------------------------------------- */ [data-theme="dark"] a { color: var(--primary); } [data-theme="dark"] a:hover { color: var(--accent); } /* --- Horizontal rules --------------------------------------- */ [data-theme="dark"] hr { border-color: var(--border); } /* ============================================================= PHASE 3 (credits.html) — hardcoded color overrides This page's CSS uses literal #fff / #4F46E5 etc., so we patch each selector explicitly. ============================================================= */ [data-theme="dark"] .cfu-header { background: rgba(11,11,16,0.85); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(10px); } [data-theme="dark"] .cfu-logo { color: var(--primary); } [data-theme="dark"] .cfu-logo span { color: var(--text); } [data-theme="dark"] .cfu-nav-email { color: var(--text-mute); } [data-theme="dark"] .cfu-banner.success { background: rgba(52,211,153,0.12); color: #6EE7B7; border-color: rgba(52,211,153,0.3); } [data-theme="dark"] .cfu-banner.error { background: rgba(255,107,92,0.12); color: #FCA5A5; border-color: rgba(255,107,92,0.3); } [data-theme="dark"] .cfu-banner.info { background: rgba(198,255,61,0.10); color: #E5FF9A; border-color: rgba(198,255,61,0.28); } /* Generic cfu-* surfaces (cards, panels, modals on credits) */ [data-theme="dark"] .cfu-card, [data-theme="dark"] .cfu-panel, [data-theme="dark"] .cfu-balance, [data-theme="dark"] .cfu-pack, [data-theme="dark"] .cfu-modal, [data-theme="dark"] .cfu-section, [data-theme="dark"] .cfu-row, [data-theme="dark"] .cfu-tile { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-md); } [data-theme="dark"] .cfu-card h1, [data-theme="dark"] .cfu-card h2, [data-theme="dark"] .cfu-card h3, [data-theme="dark"] .cfu-card h4 { color: var(--text); } [data-theme="dark"] .cfu-muted, [data-theme="dark"] .cfu-sub, [data-theme="dark"] .cfu-small, [data-theme="dark"] .cfu-meta { color: var(--text-mute); } [data-theme="dark"] .cfu-btn, [data-theme="dark"] .cfu-button { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); } [data-theme="dark"] .cfu-btn.primary, [data-theme="dark"] .cfu-button.primary, [data-theme="dark"] .cfu-btn-primary, [data-theme="dark"] .cfu-button-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } [data-theme="dark"] .cfu-btn.primary:hover, [data-theme="dark"] .cfu-btn-primary:hover { filter: brightness(1.08); } [data-theme="dark"] .cfu-btn.danger, [data-theme="dark"] .cfu-btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } [data-theme="dark"] .cfu-divider, [data-theme="dark"] .cfu-hr { background: var(--border); border-color: var(--border); } [data-theme="dark"] .cfu-input, [data-theme="dark"] .cfu-textarea, [data-theme="dark"] .cfu-select, [data-theme="dark"] input.cfu-input, [data-theme="dark"] textarea.cfu-textarea { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); } [data-theme="dark"] .cfu-input:focus, [data-theme="dark"] .cfu-textarea:focus, [data-theme="dark"] .cfu-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } [data-theme="dark"] .cfu-table { color: var(--text); } [data-theme="dark"] .cfu-table th { background: var(--bg-elev); color: var(--text-mute); border-color: var(--border); } [data-theme="dark"] .cfu-table td { border-color: var(--border); } [data-theme="dark"] .cfu-table tbody tr:hover { background: var(--bg-soft); } [data-theme="dark"] .cfu-link, [data-theme="dark"] a.cfu-link { color: var(--primary); } [data-theme="dark"] .cfu-link:hover, [data-theme="dark"] a.cfu-link:hover { color: var(--accent); } /* Phase 3 status / value chips */ [data-theme="dark"] .cfu-badge.success, [data-theme="dark"] .cfu-status.success { background: rgba(52,211,153,0.15); color: #6EE7B7; } [data-theme="dark"] .cfu-badge.warn, [data-theme="dark"] .cfu-status.warn { background: rgba(245,158,11,0.15); color: #FCD34D; } [data-theme="dark"] .cfu-badge.error, [data-theme="dark"] .cfu-status.error { background: rgba(255,107,92,0.15); color: #FCA5A5; } /* ============================================================= Hero / page background gradients (visual polish) ============================================================= */ [data-theme="dark"] .hero, [data-theme="dark"] .page-bg, [data-theme="dark"] body::before { background-color: var(--bg); } /* Soft radial glow behind hero on dark (matches Palette A mockup) */ [data-theme="dark"] .hero { background-image: radial-gradient(60% 50% at 20% 30%, rgba(198,255,61,0.06), transparent 60%), radial-gradient(50% 50% at 80% 60%, rgba(255,107,92,0.05), transparent 70%); } /* ============================================================= Header layout helper so the toggle aligns nicely ============================================================= */ .header-row { display: flex; align-items: center; } .header-row .cfu-theme-toggle { margin-left: auto; } .header-row .nav + .cfu-theme-toggle { margin-left: .75rem; } .header-row .nav ~ .btn-primary, .header-row .nav ~ .cta { margin-left: .25rem; } /* On the credits header (flex with space-between) the toggle just sits inline between logo and the email. Adjust spacing only. */ .cfu-header .cfu-theme-toggle { margin: 0 .5rem; } /* Hide focus ring for mouse users (a11y) */ .cfu-theme-toggle:focus:not(:focus-visible) { outline: none; } /* Reduce motion respect */ @media (prefers-reduced-motion: reduce) { html, body, *, *::before, *::after { transition: none !important; } }