/* ========================================================================== Callback Clone — Theme Layer (light default / dark override) Applied via [data-theme="dark"] on , set by theme.js based on the visitor's local clock (day = light, night = dark) unless they've picked one manually with the toggle, in which case that choice is remembered. Loaded after motion.css / mobile.css so it wins the cascade. ========================================================================== */ /* ---------- Content cards: flat, not frosted ---------- Benchmarked against Smith.ai, Goodcall and Ruby, whose feature/stat/ pricing cards are all flat surfaces with a hairline border — blur is reserved for a panel that sits over moving content underneath it. Here that's only the fixed nav pill, its dropdown, and the mobile drawer — all outside
, so this rule leaves them untouched and flattens every other .glass / .glass-strong card site-wide. */ main .glass, main .glass-strong { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(20,20,22,0.08); box-shadow: 0 1px 2px rgba(20,20,22,0.04); } /* ---------- Theme toggle button (injected by theme.js) ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(20,20,22,0.08); color: #141416; cursor: pointer; flex-shrink: 0; transition: background .3s, border-color .3s, transform .2s, color .3s; } .theme-toggle:hover { transform: translateY(-2px); } .theme-toggle:active { transform: translateY(0) scale(.94); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } /* ---------- Smooth crossfade when switching ---------- */ html.theme-transition, html.theme-transition * { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease !important; } /* ========================================================================== Light mode: the hero + marquee ("chapter-dark") used to be a fixed dark canvas regardless of theme, which is why light mode never looked fully light — most of the first screen stayed black no matter what. Light mode is now genuinely full: the hero goes bright/white like the rest of the page. Dark mode is untouched here, so the hero still reads as it always has when the theme is dark. ========================================================================== */ html[data-theme="light"] .chapter-dark { background: #FFFFFF; } html[data-theme="light"] .hairline-dark { border-color: rgba(20,20,22,0.08) !important; } html[data-theme="light"] .hero-headline { color: #141416; } html[data-theme="light"] .hero-lede { color: #475569; } html[data-theme="light"] .marquee-text { color: #64748B; } html[data-theme="light"] .chapter-dark .chapter-mark { color: #6B7280; } html[data-theme="light"] .btn-secondary-dark { background: rgba(20,20,22,0.04); border: 1px solid rgba(20,20,22,0.12); color: #141416; } html[data-theme="light"] .btn-secondary-dark:hover { background: rgba(20,20,22,0.08); } html[data-theme="light"] .trial-badge-dark { color: #475569; } /* ========================================================================== Dark mode overrides ========================================================================== */ html[data-theme="dark"] body { background: #0A0B0E; color: #EDF1F7; } html[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #EDF1F7; } /* Surfaces */ html[data-theme="dark"] .glass { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.10); } html[data-theme="dark"] .glass-strong { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); } html[data-theme="dark"] main .glass, html[data-theme="dark"] main .glass-strong { background: #14161B; border: 1px solid rgba(255,255,255,0.10); box-shadow: none; } html[data-theme="dark"] .bg-bgElevated { background: #14161B !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-white\/70, html[data-theme="dark"] .bg-white\/80, html[data-theme="dark"] .bg-white\/90 { background: #14161B !important; } html[data-theme="dark"] .bg-gray-100 { background: rgba(255,255,255,0.06) !important; } /* Text */ html[data-theme="dark"] .text-gray-900 { color: #F3F6FA !important; } html[data-theme="dark"] .text-text-secondary { color: #AEB9C9 !important; } html[data-theme="dark"] .text-text-muted { color: #7B8598 !important; } html[data-theme="dark"] .eyebrow { color: #3EE8B8; } /* Borders / hairlines */ html[data-theme="dark"] .border-hairline { border-color: rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .bg-hairline { background-color: rgba(255,255,255,0.10) !important; } /* Buttons & inputs */ html[data-theme="dark"] .btn-primary { color: #fff !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 12px 28px -14px rgba(14,159,122,0.4); } html[data-theme="dark"] .btn-secondary { color: #EDF1F7 !important; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); } html[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.12); } html[data-theme="dark"] .input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #EDF1F7; } html[data-theme="dark"] .input::placeholder { color: #6B7686; } html[data-theme="dark"] input[type=range] { background: linear-gradient(90deg,#3EE8B8 var(--fill,20%),rgba(255,255,255,0.14) var(--fill,20%)); } html[data-theme="dark"] input[type=range]::-webkit-slider-thumb { background: #14161B; border-color: #3EE8B8; } /* Nav / drawer */ html[data-theme="dark"] header.site-nav .glass { background: rgba(10,13,18,0.72); } html[data-theme="dark"] header.site-nav .glass.nav-scrolled { background: rgba(10,13,18,0.9); border-color: rgba(255,255,255,0.12); } html[data-theme="dark"] .drawer { background: #0D1118; border-left-color: rgba(255,255,255,0.10); } html[data-theme="dark"] .drawer-head, html[data-theme="dark"] .drawer-foot { border-color: rgba(255,255,255,0.08); } html[data-theme="dark"] .drawer-nav a { color: #EDF1F7; } html[data-theme="dark"] .drawer-nav a:hover { background: rgba(62,232,184,0.12); color: #3EE8B8; } /* Cards, tiles, badges */ html[data-theme="dark"] .addon-tile.on, html[data-theme="dark"] .plan-tile.on { background: rgba(14,159,122,0.10); } html[data-theme="dark"] .trial-badge { background: rgba(5,150,105,0.16); border-color: rgba(5,150,105,0.35); color: #34D399; } html[data-theme="dark"] .referral-card { background: linear-gradient(135deg,rgba(14,159,122,0.14),rgba(14,159,122,0.03)); border-color: rgba(14,159,122,0.28); } /* Sticky mobile CTA gradient backdrop */ html[data-theme="dark"] .sticky-mobile-cta { background: linear-gradient(to top, rgba(10,13,18,0.97), rgba(10,13,18,0.82) 70%, transparent); } /* Scroll cue */ html[data-theme="dark"] .scroll-mouse { border-color: rgba(255,255,255,0.22); } /* Blobs read better dimmer against a dark page */ html[data-theme="dark"] .blob { opacity: .7; } /* Footer + generic dark-gray badges keep their look; force readable text inside elevated footer */ html[data-theme="dark"] footer .text-gray-900 { color: #F3F6FA !important; }