/* ============================================================ Sunnybrook — DARK THEME Activates when . Designed to keep the exact same hierarchy and rhythm as light mode — just inverted into a confident deep-indigo night palette. ============================================================ */ [data-theme="dark"] { /* Brand — lift the indigo slightly so it reads on dark surfaces. */ --brand-indigo: #7A86F2; --brand-indigo-700: #5C68DA; --brand-indigo-900: #424CB8; --brand-teal: #2FC8AA; --brand-teal-600: #25B294; /* On dark the light-mode text step would be far too dark, so teal-as-text tracks the lifted brand teal instead (8.9:1 on --bg). */ --brand-teal-text: #2FC8AA; --brand-sun: #F4B96A; --brand-sun-soft: #F8D49A; /* Amber as text. On light surfaces small amber must darken to hold contrast; DESIGN.md fixes that at #8C5A12 (5.9:1 on --bg). Dark mode lifts it. */ --brand-sun-text: #F4B96A; /* Surface palette */ --bg: #0A0E2A; --bg-alt: #0F143A; --surface: #161C48; --surface-ink: #F5F2E8; /* Ink */ --ink-900: #F5F2E8; --ink-700: #CDD2E6; --ink-500: #8B95BC; --ink-400: #6B749A; --ink-300: #4A537A; /* Lines */ --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.16); /* Form validation — lifted so it stays legible on the deep-indigo canvas. */ --form-error: #FF9A8C; /* "Dark sections" go a touch deeper than the base bg in dark mode. */ --dark-bg: #050828; --dark-bg-alt: #0B0F35; /* Shadows — reduce/restyle for dark */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 12px 32px -12px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 32px 72px -24px rgba(0,0,0,0.7), 0 10px 24px -8px rgba(0,0,0,0.4); } /* Base */ [data-theme="dark"] body { color: var(--ink-900); background: var(--bg); } /* selection */ [data-theme="dark"] ::selection { background: var(--brand-indigo); color: #fff; } /* ----- Hero ----- */ [data-theme="dark"] .hero-bg { background: radial-gradient(60% 50% at 15% 0%, rgba(244,169,61,0.10), transparent 70%), radial-gradient(50% 60% at 100% 15%, rgba(47,200,170,0.16), transparent 70%), radial-gradient(80% 60% at 50% 100%, rgba(122,134,242,0.20), transparent 70%); } [data-theme="dark"] .hero-grid-mask { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); } /* ----- Nav ----- */ [data-theme="dark"] .nav { background: rgba(10,14,42,0.7); } [data-theme="dark"] .nav.scrolled { background: rgba(10,14,42,0.92); border-bottom-color: var(--line); } [data-theme="dark"] .nav-logo { color: var(--ink-900); } [data-theme="dark"] .nav-link { color: var(--ink-500); } [data-theme="dark"] .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); } [data-theme="dark"] .nav-link.is-active { color: #ADB6FA; } [data-theme="dark"] .nav-link.is-active::after { background: #ADB6FA; } /* ----- Buttons ----- */ [data-theme="dark"] .btn-primary { background: #5C68DA; color: #fff; box-shadow: none; } [data-theme="dark"] .btn-primary:hover { background: #6C76E8; box-shadow: none; } /* The HubSpot form's submit button should read as the same control as .btn-primary. In dark, .btn-primary pins a fixed indigo instead of using the lifted --brand-indigo, so the form's button has to be pinned to match. */ [data-theme="dark"] .hs-form-html { --hsf-button__background-color: #5C68DA; --hsf-button--hover__background-color: #6C76E8; --hsf-button--focus__background-color: #6C76E8; --hsf-button__box-shadow: none; } [data-theme="dark"] .btn-teal { background: #2FC8AA; color: #06262A; box-shadow: none; } [data-theme="dark"] .btn-teal:hover { background: #38D6B7; box-shadow: none; } [data-theme="dark"] .btn-outline { color: var(--ink-900); border-color: rgba(255,255,255,0.16); } [data-theme="dark"] .btn-outline:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.04); } [data-theme="dark"] .btn-ghost { color: var(--ink-500); } [data-theme="dark"] .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.05); } [data-theme="dark"] .btn-light { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); } /* ----- Chips ----- */ [data-theme="dark"] .chip { background: rgba(47,200,170,0.12); border-color: rgba(47,200,170,0.24); color: #5CDDBF; } [data-theme="dark"] .chip .dot { background: #5CDDBF; box-shadow: 0 0 0 3px rgba(47,200,170,0.2); } [data-theme="dark"] .chip-indigo { background: rgba(122,134,242,0.13); border-color: rgba(122,134,242,0.28); color: #B5BEFA; } [data-theme="dark"] .chip-indigo .dot { background: #B5BEFA; box-shadow: 0 0 0 3px rgba(122,134,242,0.22); } [data-theme="dark"] .chip-sun { background: rgba(244,185,106,0.13); border-color: rgba(244,185,106,0.3); color: #F8CD89; } [data-theme="dark"] .chip-sun .dot { background: #F8CD89; box-shadow: 0 0 0 3px rgba(244,185,106,0.22); } /* ----- Cards / feature grid ----- */ [data-theme="dark"] .card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); } [data-theme="dark"] .card-hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } [data-theme="dark"] .feature-grid { background: var(--line); border-color: var(--line); } [data-theme="dark"] .feature-grid > * { background: var(--surface); } [data-theme="dark"] .feature-ico { background: linear-gradient(180deg, #6C76E8, #4854C8); box-shadow: 0 8px 24px -10px rgba(108,118,232,0.5); } [data-theme="dark"] .feature-ico.teal { background: linear-gradient(180deg, #2FC8AA, #25A98E); box-shadow: 0 8px 24px -10px rgba(47,200,170,0.5); } [data-theme="dark"] .feature-ico.sun { background: linear-gradient(180deg, #F4B96A, #D88A1D); color: #161C48; box-shadow: 0 8px 24px -10px rgba(244,169,61,0.5); } /* ----- Stat / footer / sections ----- */ [data-theme="dark"] .stat { border-top-color: var(--line); } [data-theme="dark"] .stat-value { color: var(--ink-900); } [data-theme="dark"] .stat-value .unit { color: #5CDDBF; } [data-theme="dark"] .stat-label { color: var(--ink-500); } [data-theme="dark"] .bg-alt { background: var(--bg-alt); } [data-theme="dark"] .bg-dark { background: var(--dark-bg); } [data-theme="dark"] .footer { background: var(--dark-bg); } /* ----- Modal ----- */ [data-theme="dark"] .modal { background: var(--surface); color: var(--ink-900); } [data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.6); } /* ----- Logo swap ----- */ /* The logo is a single logo-mark.png in both themes now, so there is no light/dark image pair to swap. */ /* ----- Theme toggle button (injected by shared-ui.js) ----- */ .theme-toggle { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; cursor: pointer; color: var(--ink-700); transition: background .15s, color .15s, border-color .15s; } .theme-toggle:hover { color: var(--ink-900); border-color: var(--ink-700); background: rgba(15,21,48,0.05); } [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: opacity .2s, transform .3s cubic-bezier(.22,.61,.36,1); position: absolute; } .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); } /* ----- Page-specific element overrides ----- */ /* Pricing calculator */ [data-theme="dark"] .calculator-wrap { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .calc-slider-track-wrap::before { background: rgba(255,255,255,0.08); } [data-theme="dark"] .calc-slider input[type=range]::-webkit-slider-thumb { background: #fff; border-color: #7A86F2; } [data-theme="dark"] .calc-slider-label { color: var(--ink-900); } [data-theme="dark"] .calc-slider-hint { color: var(--ink-500); } [data-theme="dark"] .calc-slider-value { color: #ADB6FA; } [data-theme="dark"] .calc-num:focus { background: var(--bg-alt); } [data-theme="dark"] .calculator-summary { background: linear-gradient(160deg, #050828 0%, #0F143A 100%); } /* Compare table */ [data-theme="dark"] .compare-table { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .compare-table thead tr { background: rgba(255,255,255,0.03) !important; } [data-theme="dark"] .compare-table th { color: var(--ink-500) !important; } /* The pricing table is a single "what you get / included" list now, so its value column keeps the teal header. (This used to force columns 2 and 4 to ink for the old pay-as-you-go vs regular comparison.) */ [data-theme="dark"] .compare-table tbody tr { border-top-color: var(--line) !important; } [data-theme="dark"] .compare-table td { color: var(--ink-700) !important; } /* FAQ */ [data-theme="dark"] .faq { border-top-color: var(--line); } [data-theme="dark"] .faq:last-of-type { border-bottom-color: var(--line); } [data-theme="dark"] .faq summary { color: var(--ink-900); } [data-theme="dark"] .faq summary::after { border-color: var(--ink-500); } [data-theme="dark"] .faq p { color: var(--ink-500); } /* Solutions/Game changers — inline list checkmark backgrounds */ [data-theme="dark"] .ink-row-icon { background: rgba(122,134,242,0.18) !important; color: #B5BEFA !important; } /* Integrations grid */ [data-theme="dark"] .int-tile { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .int-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } [data-theme="dark"] .int-name { color: var(--ink-900); } [data-theme="dark"] .int-cat { color: var(--ink-500); } [data-theme="dark"] .int-filter { background: var(--surface); border-color: var(--line-strong); color: var(--ink-700); } [data-theme="dark"] .int-filter:hover { border-color: rgba(255,255,255,0.4); } [data-theme="dark"] .int-filter.is-on { background: #5C68DA; border-color: #5C68DA; color: #fff; } [data-theme="dark"] .int-status { background: rgba(47,200,170,0.14); color: #5CDDBF; } [data-theme="dark"] .int-status.coming { background: rgba(244,185,106,0.16); color: #F8CD89; } /* About page — story prose */ [data-theme="dark"] .story-prose { color: var(--ink-700) !important; } [data-theme="dark"] .story-prose em { color: var(--ink-900); } [data-theme="dark"] .story-prose strong { color: var(--ink-900); } /* Automation flow (solutions.html) */ [data-theme="dark"] .flow-node { background: var(--bg-alt) !important; border-color: var(--line) !important; color: var(--ink-900) !important; } [data-theme="dark"] .flow-node-result { background: rgba(47,200,170,0.08) !important; border-color: #2FC8AA !important; } [data-theme="dark"] .flow-node-result strong { color: #5CDDBF !important; } [data-theme="dark"] .flow-node-label { color: var(--ink-500) !important; } /* Headline indigo spans (used throughout for the colored part of h-display headlines) */ [data-theme="dark"] .indigo-text { color: #ADB6FA !important; } [data-theme="dark"] .teal-text { color: #5CDDBF !important; } /* Avoid the smooth-scroll snap if a user is toggling theme. */ .theme-transitioning, .theme-transitioning * { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; } /* ...but not for someone who asked for no motion. */ @media (prefers-reduced-motion: reduce) { .theme-transitioning, .theme-transitioning * { transition: none !important; } }