/* ============================================================ CLView — SINGLE SOURCE OF TRUTH for the whole site's theme. Load this LAST in on every page. Nothing else needed. How it works ------------ • Every page uses the Tailwind CDN for utility classes (layout, spacing, responsive) — so nothing here depends on a compiled build that can drift. • All DARK / MONOCHROME repainting is scoped to `.theme-dark`. - App pages: put `theme-dark` on → whole page dark. - Landing: put `theme-dark` on the wrapper around the sections BELOW the hero → those go dark, the LIGHT HERO (which has no .theme-dark ancestor) stays light & safe. • Palette: page #0a0a0a · card #0d0d10 · raised rgba(255,255,255,.05) · border rgba(255,255,255,.10) · text #ececf0 / #c0c2cb / #8b8e99 • Accent: monochrome. Only green/red/amber survive as real status. • Mobile: this file only changes COLOUR, never layout — Tailwind's responsive utilities keep every page responsive. ============================================================ */ /* ---------- 0. Base ---------- */ :root { color-scheme: dark; } body { font-family: 'Inter', system-ui, sans-serif; } ::selection { background: rgba(255,255,255,0.20); color: #fff; } /* keyframes used across pages */ @keyframes auraPulse { 0%,100% { opacity:1; } 50% { opacity:.5; } } .animate-pulse-slow { animation: auraPulse 2s cubic-bezier(0.4,0,0.6,1) infinite; } @keyframes clviewMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes loginCardIn { 0% { opacity:0; transform: translateY(20px) scale(.98); filter: blur(8px);} 100% { opacity:1; transform:none; filter:none; } } .login-card-in { animation: loginCardIn 800ms cubic-bezier(0.22,1,0.36,1) forwards; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .animate-pulse-slow, .clview-marquee-track, .login-card-in { animation: none !important; } } /* ============================================================ 1. DARK REPAINT (scoped to .theme-dark) ============================================================ */ /* page bg helpers (arbitrary classes on bodies) */ .theme-dark, body.theme-dark { background-color:#0a0a0a; color:#e7e7e3; } /* solid backdrop + stacking so any fixed background layer (aurora/dots) behind the page can't bleed through the dark zone */ .theme-dark:not(body) { position:relative; z-index:1; } /* --- surfaces: white / gray / slate → dark --- */ .theme-dark .bg-white, .theme-dark [class*="bg-white\/"], .theme-dark .bg-slate-50, .theme-dark .bg-slate-100, .theme-dark .bg-slate-200, .theme-dark .bg-gray-50, .theme-dark .bg-gray-100, .theme-dark .bg-gray-200, .theme-dark .bg-zinc-50, .theme-dark .bg-zinc-100, .theme-dark .bg-slate-900,.theme-dark .bg-slate-800, .theme-dark .bg-gray-900 { background-color: rgba(255,255,255,0.05) !important; } /* card-level dark surfaces use a flat near-black */ .theme-dark .bg-gray-950, .theme-dark .bg-slate-950, .theme-dark .bg-zinc-900, .theme-dark .bg-black { background-color: #0d0d10 !important; } /* LIGHT arbitrary-hex surfaces (e.g. pricing cards bg-[#f8fafc], bg-[#e2e8f0]) — these slip past the named-class rules above. Hexes starting with e/f are light, so repaint them to neutral dark glass. */ .theme-dark [class*="bg-[#f"], .theme-dark [class*="bg-[#e"], .theme-dark [class*="from-[#f"], .theme-dark [class*="from-[#e"], .theme-dark [class*="to-[#f"], .theme-dark [class*="to-[#e"] { background-image: none !important; background-color: rgba(255,255,255,0.05) !important; } /* --- light GRADIENT cards (from-white / from-slate-50 / from-blue-50 …) --- */ .theme-dark [class*="from-white"], .theme-dark [class*="via-white"], .theme-dark [class*="to-white"], .theme-dark [class*="from-slate-50"],.theme-dark [class*="from-slate-100"], .theme-dark [class*="to-slate-50"], .theme-dark [class*="to-slate-100"], .theme-dark [class*="from-gray-50"], .theme-dark [class*="from-gray-100"] { background-image: none !important; background-color: rgba(255,255,255,0.05) !important; } /* keep thin gradient RULES (from-transparent … to-transparent) as hairlines */ .theme-dark [class*="from-transparent"] { background-color: transparent !important; background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent) !important; } /* --- light accent tints (50-level chips) → subtle dark tints --- */ .theme-dark .bg-blue-50 { background-color: rgba(255,255,255,0.06) !important; } .theme-dark .bg-sky-50, .theme-dark .bg-cyan-50, .theme-dark .bg-indigo-50, .theme-dark .bg-violet-50, .theme-dark .bg-purple-50 { background-color: rgba(255,255,255,0.06) !important; } .theme-dark .bg-emerald-50, .theme-dark .bg-green-50, .theme-dark .bg-teal-50 { background-color: rgba(16,185,129,0.12) !important; } .theme-dark .bg-amber-50, .theme-dark .bg-yellow-50, .theme-dark .bg-orange-50 { background-color: rgba(245,158,11,0.12) !important; } .theme-dark .bg-red-50, .theme-dark .bg-rose-50 { background-color: rgba(239,68,68,0.12) !important; } /* --- text: dark ink → off-white scale --- */ .theme-dark .text-black, .theme-dark .text-gray-900, .theme-dark .text-slate-900, .theme-dark .text-slate-950, .theme-dark .text-zinc-900, .theme-dark .text-gray-800, .theme-dark .text-slate-800 { color:#ececf0 !important; } .theme-dark .text-gray-700, .theme-dark .text-slate-700, .theme-dark .text-gray-600, .theme-dark .text-slate-600 { color:#c0c2cb !important; } .theme-dark .text-gray-500, .theme-dark .text-slate-500, .theme-dark .text-gray-400, .theme-dark .text-slate-400, .theme-dark .text-zinc-400 { color:#8b8e99 !important; } .theme-dark .text-gray-300, .theme-dark .text-slate-300 { color:#6c6f7a !important; } /* --- borders → hairlines --- */ .theme-dark .border-white, .theme-dark [class*="border-white\/"], .theme-dark .border-gray-100, .theme-dark .border-slate-100, .theme-dark .border-gray-200, .theme-dark .border-slate-200, .theme-dark .border-zinc-200, .theme-dark .border-gray-300, .theme-dark .border-slate-300 { border-color: rgba(255,255,255,0.10) !important; } .theme-dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]), .theme-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), .theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]), .theme-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.08) !important; } /* --- form fields --- */ .theme-dark input:not([type="checkbox"]):not([type="radio"]), .theme-dark textarea, .theme-dark select { background-color: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.12) !important; color: #ececf0 !important; } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: #71747f !important; } /* --- hover surfaces: ANY light hover utility (any shade / opacity variant, e.g. hover:bg-gray-50/50) → one soft white fade. Never a harsh gray. --- */ .theme-dark [class*="hover:bg-gray-"]:hover, .theme-dark [class*="hover:bg-slate-"]:hover, .theme-dark [class*="hover:bg-zinc-"]:hover, .theme-dark [class*="hover:bg-white"]:hover { background-color: rgba(255,255,255,0.05) !important; } /* data-table rows: smooth quiet-row hover (Option A) */ .theme-dark tbody tr { transition: background-color .15s ease; } /* ============================================================ 2. MONOCHROME — strip every blue / navy accent (scoped) Green / red / amber survive only as semantic status. ============================================================ */ /* blue text → light zinc */ .theme-dark [class*="text-blue-"], .theme-dark [class*="text-sky-"], .theme-dark [class*="text-indigo-"], .theme-dark [class*="text-cyan-"] { color:#d4d4d8 !important; } /* blue gradient / solid SURFACES (cards, avatars, step circles — NOT buttons) */ .theme-dark [class*="from-blue-"]:not(a):not(button), .theme-dark [class*="from-indigo-"]:not(a):not(button), .theme-dark [class*="from-sky-"]:not(a):not(button), .theme-dark [class*="to-blue-"]:not(a):not(button), .theme-dark [class*="to-indigo-"]:not(a):not(button) { background-image: none !important; background-color: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; } /* navy hard-coded hex cards */ .theme-dark [class*="from-[#1d2a3d]"], .theme-dark [class*="from-[#172033]"], .theme-dark [class*="to-[#131c2b]"], .theme-dark [class*="to-[#101827]"], .theme-dark [class*="bg-[#0f1"], .theme-dark [class*="bg-[#101"], .theme-dark [class*="bg-[#111"], .theme-dark [class*="bg-[#131"], .theme-dark [class*="bg-[#17"], .theme-dark [class*="bg-[#1a2"], .theme-dark [class*="bg-[#1d2"] { background-image: none !important; background-color: rgba(255,255,255,0.05) !important; } /* blue BUTTONS / links → white pill (dark text) */ .theme-dark a[class*="bg-blue-"], .theme-dark button[class*="bg-blue-"], .theme-dark a[class*="from-blue-"], .theme-dark button[class*="from-blue-"] { background-image: none !important; background-color: #ededed !important; color: #0a0a0a !important; border-color: rgba(255,255,255,0.16) !important; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6) !important; } .theme-dark a[class*="from-blue-"] *, .theme-dark button[class*="from-blue-"] *, .theme-dark a[class*="bg-blue-"] *, .theme-dark button[class*="bg-blue-"] * { color:#0a0a0a !important; } /* blue dots / number badges / tint chips (non-button) → faint white */ .theme-dark [class*="bg-blue-"]:not(a):not(button):not([class*="bg-blue-400"]):not([class*="bg-blue-500"]):not([class*="bg-blue-600"]), .theme-dark [class*="bg-sky-"]:not(a):not(button), .theme-dark [class*="bg-indigo-"]:not(a):not(button), .theme-dark [class*="bg-cyan-"]:not(a):not(button), .theme-dark [class*="bg-blue-400"]:not(a):not(button), .theme-dark [class*="bg-blue-500"]:not(a):not(button), .theme-dark [class*="bg-blue-600"]:not(a):not(button) { background-image: none !important; background-color: rgba(255,255,255,0.10) !important; } /* blue borders / rings → hairline */ .theme-dark [class*="border-blue-"], .theme-dark [class*="border-sky-"], .theme-dark [class*="border-indigo-"], .theme-dark [class*="ring-blue-"] { border-color: rgba(255,255,255,0.12) !important; } /* inline blue glow shadows shadow-[…rgba(59,130,246,…)] */ .theme-dark [class*="rgba(59,130,246"]:not(a):not(button) { box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; } /* links hover → white */ .theme-dark a:hover { color:#fff !important; } /* soft white shadows read as muddy halos on black */ .theme-dark [class*="shadow-"]:not(a):not(button) { box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 18px 40px -28px rgba(0,0,0,0.9) !important; } /* eye-logo SVG (inline currentColor where possible) */ .theme-dark .cl-eye path, .theme-dark .cl-eye circle { stroke:#e7e7e3 !important; fill:#e7e7e3 !important; } .theme-dark .cl-eye path { fill:none !important; } /* decorative blurred glow blobs → gone */ .theme-dark .absolute.rounded-full[class*="blur-"] { display:none !important; } /* ============================================================ 3. LANDING hero / wave / marquee (light hero is OUTSIDE .theme-dark) ============================================================ */ .clview-marquee { -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); } .clview-marquee-track { display:inline-flex; flex-wrap:nowrap; width:max-content; align-items:center; animation:clviewMarquee 28s linear infinite; will-change:transform; } .clview-marquee:hover .clview-marquee-track { animation-play-state:paused; } .clview-marquee-item { font-family:'JetBrains Mono',monospace; font-weight:600; line-height:.9; letter-spacing:-0.04em; font-size:clamp(3rem,13vw,13rem); color:rgba(255,255,255,0.055); padding:0 .18em; white-space:nowrap; } .clview-marquee-sep { width:.32em; height:.32em; border-radius:9999px; background:rgba(255,255,255,0.10); margin:0 .35em; display:inline-block; } /* ============================================================ 4. ADMIN layout chrome (_layout_top.php custom classes) ============================================================ */ .theme-dark .admin-sb { background:#0f0f12 !important; border-right-color:rgba(255,255,255,0.08) !important; box-shadow:1px 0 0 rgba(255,255,255,0.02) !important; } .theme-dark .sb-brand { border-bottom-color:rgba(255,255,255,0.08) !important; } .theme-dark .sb-brand-logo { background:rgba(255,255,255,0.05) !important; border-color:rgba(255,255,255,0.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) !important; } .theme-dark .sb-brand-name { color:#ececf0 !important; } .theme-dark .sb-brand-sub, .theme-dark .sb-section { color:#71747f !important; } .theme-dark .sb-btn { color:#a1a4ad !important; } .theme-dark .sb-btn:hover { background:rgba(255,255,255,0.05) !important; color:#fff !important; } .theme-dark .sb-btn.active { background:rgba(255,255,255,0.08) !important; color:#fff !important; } .theme-dark .sb-btn.active::before { background:#fff !important; } .theme-dark .sb-bottom { border-top-color:rgba(255,255,255,0.08) !important; } .theme-dark .admin-main, .theme-dark .admin-panel { background:#0a0a0a !important; } .theme-dark .admin-top, .theme-dark .admin-stats-bar { background:#0f0f12 !important; border-bottom-color:rgba(255,255,255,0.08) !important; } .theme-dark .astat { border-right-color:rgba(255,255,255,0.06) !important; border-bottom-color:rgba(255,255,255,0.06) !important; } .theme-dark .astat-l { color:#71747f !important; } .theme-dark .astat-v { color:#ececf0 !important; } .theme-dark .qa-menu { background:#15161a !important; border-color:rgba(255,255,255,0.10) !important; box-shadow:0 12px 40px rgba(0,0,0,0.6) !important; } .theme-dark .qa-menu button{ color:#c0c2cb !important; } .theme-dark .qa-menu button:hover { background:rgba(255,255,255,0.05) !important; color:#fff !important; } @media (max-width:768px){ .theme-dark .admin-sb { border-top-color:rgba(255,255,255,0.08) !important; box-shadow:0 -2px 8px rgba(0,0,0,0.5) !important; } }