/* ========================================================================== SPAI theme — dark mode, and the nav toggle that switches it. Light mode is the default and is left completely untouched: every rule in this file is either the toggle button itself or scoped to :root[data-theme="dark"], so nothing here can change the light design. is stamped by a tiny synchronous script in each page's (stored choice, else the OS preference) so there is no flash of the wrong theme. spai-theme.js wires up the button. The site's palette is a small set of custom properties defined identically in every page stylesheet, so redefining those tokens does most of the work. The rest of this file covers surfaces that hard-code a light colour. ========================================================================== */ /* ---------------------------------------------------------------- toggle -- */ .sp-theme-toggle { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; transition: background .2s, border-color .2s, color .2s, transform .12s; } .sp-theme-toggle:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } .sp-theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .sp-theme-toggle svg { width: 18px; height: 18px; display: block; } /* light mode offers the moon (switch to dark); dark mode offers the sun */ .sp-theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .sp-theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .sp-theme-toggle .i-moon { display: none; } /* the toggle also appears at the end of the open mobile menu */ .sp-mobile .sp-theme-toggle { width: auto; height: auto; justify-content: flex-start; } .sp-mobile-theme { display: flex; align-items: center; gap: 10px; padding: 11px 6px; font-weight: 600; color: var(--slate); background: none; border: none; border-radius: 0; cursor: pointer; font-family: inherit; font-size: inherit; width: 100%; text-align: left; } .sp-mobile-theme svg { width: 17px; height: 17px; flex: none; } .sp-mobile-theme .i-sun { display: none; } :root[data-theme="dark"] .sp-mobile-theme .i-sun { display: block; } :root[data-theme="dark"] .sp-mobile-theme .i-moon { display: none; } .sp-mobile-theme .lbl-dark { display: inline; } .sp-mobile-theme .lbl-light { display: none; } :root[data-theme="dark"] .sp-mobile-theme .lbl-dark { display: none; } :root[data-theme="dark"] .sp-mobile-theme .lbl-light { display: inline; } /* brief cross-fade while switching (added by the script, then removed) */ .spai-theming, .spai-theming *, .spai-theming *::before, .spai-theming *::after { transition: background-color .25s ease, border-color .25s ease, color .25s ease, fill .25s ease !important; } @media (prefers-reduced-motion: reduce) { .spai-theming, .spai-theming *, .spai-theming *::before, .spai-theming *::after { transition: none !important; } } /* ============================================================== dark mode == */ :root[data-theme="dark"] { color-scheme: dark; --ink: #eaf1fd; /* primary text */ --slate: #b6c5db; /* body copy */ --muted: #8da0bd; /* captions, meta */ --line: #243450; /* borders and rules */ --bg: #0b1424; /* page */ --card: #131f36; /* raised surface */ --surface-2: #0f1a2e; /* inset surface (table heads, segmented controls) */ --blue: #5b95f7; --blue-strong: #8ab4ff; --blue-soft: #172743; --blue-100: #2b3f63; --sky: #6fb0fb; --teal: #2dd4bf; --green: #8fd6a6; --amber: #fbbf24; --red: #fb8a7a; /* product-page accents */ --p1: #ff7a5e; --p2: #f6a992; --p-ok: #2b4a37; --p-best: #8fd6a6; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px rgba(0, 0, 0, .38); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6); } /* ---------------------------------------------------------------- canvas -- */ :root[data-theme="dark"] body { /* same three brand line-art layers, over dark washes instead of light ones */ background: url("/assets/crystal-cube-bg.svg") top right / min(820px, 68vw) auto no-repeat fixed, url("/assets/crystal-cube-echo.svg") bottom left / min(360px, 50vw) auto no-repeat fixed, url("/assets/crystal-cube-center.svg") center center / min(1000px, 82vw) auto no-repeat fixed, radial-gradient(1100px 520px at 12% -10%, #16274a, #16274a00 60%), radial-gradient(900px 500px at 100% 0%, #122340, #12234000 55%), var(--bg); } @media (max-width: 760px) { :root[data-theme="dark"] body { background-image: radial-gradient(1100px 520px at 12% -10%, #16274a, #16274a00 60%), radial-gradient(900px 500px at 100% 0%, #122340, #12234000 55%); } } /* ------------------------------------------------------------------ nav --- */ :root[data-theme="dark"] .sp-nav { background: #0b1424fa; border-bottom-color: rgba(36, 52, 80, .9); } :root[data-theme="dark"] .sp-mobile { background: #0b1424fa; } /* the two product pages that ship their own sticky header */ :root[data-theme="dark"] header.nav { background: #0b1424e6; border-bottom-color: rgba(36, 52, 80, .9); } /* ---------------------------------------------------------------- buttons - */ /* a bright fill needs dark text, the standard dark-mode inversion */ :root[data-theme="dark"] .sp-btn-primary, :root[data-theme="dark"] .btn-primary { color: #07132a; } :root[data-theme="dark"] .sp-btn-primary:hover, :root[data-theme="dark"] .btn-primary:hover { color: #07132a; } :root[data-theme="dark"] .sp-btn-ghost, :root[data-theme="dark"] .btn-ghost { background: var(--card); color: var(--ink); } /* buttons that sit on the permanently dark CTA bands stay white with dark text */ :root[data-theme="dark"] .sp-cta .sp-btn-primary, :root[data-theme="dark"] .ctaband .btn-primary, :root[data-theme="dark"] .mk-spot-btn { background: #fff; color: #12305e; } :root[data-theme="dark"] .sp-cta .sp-btn-primary:hover, :root[data-theme="dark"] .ctaband .btn-primary:hover { background: #e7efff; color: #12305e; } :root[data-theme="dark"] .sp-cta .sp-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); } /* ------------------------------------------------------------ footer/CTA -- */ /* these are dark in both themes; they just need separating from a dark page */ :root[data-theme="dark"] .sp-footer { border-top: 1px solid var(--line); } :root[data-theme="dark"] .sp-cta, :root[data-theme="dark"] .ctaband { border: 1px solid #23407a; } /* ---------------------------------------------------------------- badges -- */ :root[data-theme="dark"] .sp-badge.live { background: #0f2a1c; color: #6ee7a0; border-color: #1d4c33; } :root[data-theme="dark"] .sp-badge.soon { background: #2b1f07; color: #f5c24a; border-color: #4a3712; } :root[data-theme="dark"] .sp-badge.avail { background: #16233f; color: #8ab4ff; border-color: #2b3f63; } :root[data-theme="dark"] .sp-badge.ref { background: #1a2438; color: #a9b8cf; border-color: #2b3850; } :root[data-theme="dark"] .sp-badge.featured { background: linear-gradient(90deg, #172743, #0d2b2a); color: #8ab4ff; border-color: #2b3f63; } :root[data-theme="dark"] .mk-src.aprimo { background: #07312e; color: #5fe3d6; border-color: #125c56; } :root[data-theme="dark"] .tag-soon { background: #2b1f07; color: #f5c24a; border-color: #4a3712; } :root[data-theme="dark"] .s-soon { background: var(--surface-2); } /* -------------------------------------------------- hard-coded white cards- */ /* every surface below is painted white in the light design */ :root[data-theme="dark"] .pill, :root[data-theme="dark"] .wf-node, :root[data-theme="dark"] .achip, :root[data-theme="dark"] .match-card, :root[data-theme="dark"] .hv-card, :root[data-theme="dark"] .h-chip, :root[data-theme="dark"] .h-quote, :root[data-theme="dark"] .a-quote, :root[data-theme="dark"] .lib-card, :root[data-theme="dark"] .seg button, :root[data-theme="dark"] .ai-bar, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .field.filled, :root[data-theme="dark"] .seg span.on, :root[data-theme="dark"] .tag, :root[data-theme="dark"] .assetrow, :root[data-theme="dark"] .tabs, :root[data-theme="dark"] .mk-filter, :root[data-theme="dark"] .prio.p1, :root[data-theme="dark"] .prio.p0, :root[data-theme="dark"] .prio.p3, :root[data-theme="dark"] .prio.p4, :root[data-theme="dark"] .fg select, :root[data-theme="dark"] .shot button, :root[data-theme="dark"] .aswitch, :root[data-theme="dark"] .tool, :root[data-theme="dark"] .cell-input, :root[data-theme="dark"] .prio.p2, :root[data-theme="dark"] .prio.p5, :root[data-theme="dark"] .match-detail .mini-btn { background: var(--card); } /* the chrome bar at the top of each interactive demo shell */ :root[data-theme="dark"] .demo-top { background: linear-gradient(180deg, #17243d, #121d33); } :root[data-theme="dark"] .demo-body { background: radial-gradient(700px 240px at 50% -40%, #17243d, transparent 70%), var(--card); } :root[data-theme="dark"] .fvis:before { background: radial-gradient(420px 180px at 80% -20%, #17243d, transparent 70%); } /* priority chips: keep the red/green reading, lightened for a dark card */ :root[data-theme="dark"] .prio.p2 { color: #ff8a6b; } :root[data-theme="dark"] .prio.p3, :root[data-theme="dark"] .prio.p4 { color: #8fd6a6; border-color: #3f7a4a; } /* the eyebrow pill that heads most page heroes */ :root[data-theme="dark"] .sp-pill { background: var(--card); } /* status pills keep their meaning: green cleared, red blocked, amber review */ :root[data-theme="dark"] .match-status.found, :root[data-theme="dark"] .safety-status.cleared { background: #0f2a1c; color: #6ee7a0; } :root[data-theme="dark"] .match-status.missing, :root[data-theme="dark"] .safety-status.blocked { background: #2e1512; color: #ff9b86; } :root[data-theme="dark"] .safety-status.review { background: #2b1f07; color: #f5c24a; } :root[data-theme="dark"] .safety-status.checking { background: var(--surface-2); } :root[data-theme="dark"] .ai-note, :root[data-theme="dark"] .match { background: #07312e; border-color: #125c56; } :root[data-theme="dark"] .lib-card .li.pg { background: #2e2008; color: #f0a94e; } :root[data-theme="dark"] .tmpl-banner { background: #2b1f07; border-bottom-color: #4a3712; color: #f5c24a; } /* tracks, rails and hover washes */ :root[data-theme="dark"] .progress-track, :root[data-theme="dark"] .tgl { background: #2b3850; } :root[data-theme="dark"] .tab:hover, :root[data-theme="dark"] table.qb th:hover, :root[data-theme="dark"] td:hover .cell, :root[data-theme="dark"] table.cmp td.win { background: #16233d; } /* inset / recessed surfaces */ :root[data-theme="dark"] .doc-hl, :root[data-theme="dark"] .field, :root[data-theme="dark"] .srcpill, :root[data-theme="dark"] .seg, :root[data-theme="dark"] table.rv tr.total td, :root[data-theme="dark"] table.cmp th, :root[data-theme="dark"] table.sub th, :root[data-theme="dark"] .cmp-scroll, :root[data-theme="dark"] .asset-rail, :root[data-theme="dark"] .rv-filters, :root[data-theme="dark"] table.rv th, :root[data-theme="dark"] table.qb th, :root[data-theme="dark"] table.safety th, :root[data-theme="dark"] th.freeze, :root[data-theme="dark"] td.freeze { background: var(--surface-2); } /* the sticky marketplace toolbar sits over the page, so it needs to be opaque */ :root[data-theme="dark"] .mk-toolbar { background: #0b1424f7; } /* Selected states have to be restated. The rules above are scoped to :root[data-theme="dark"], which outranks the plain .foo.selected rules in the page stylesheets, so without these the selected chip, tab or filter would lose its fill and read as unselected. */ :root[data-theme="dark"] .mk-filter.active, :root[data-theme="dark"] .chip.active, :root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .aswitch.on, :root[data-theme="dark"] .tag.on { background: var(--blue); border-color: var(--blue); color: #07132a; } /* the same inversion wherever an accent fill carries white label text */ :root[data-theme="dark"] .ai-bar button, :root[data-theme="dark"] .unified, :root[data-theme="dark"] .mk-demo:hover { color: #07132a; } :root[data-theme="dark"] .achip.on { background: var(--blue-soft); border-color: var(--blue-100); color: var(--blue-strong); } :root[data-theme="dark"] .wf-node.done { background: #0f2a1c; border-color: var(--green); } /* the lightbox backdrop keeps a white mat: the screenshots inside are light */ :root[data-theme="dark"] .lb { background: rgba(3, 7, 15, .92); } /* ------------------------------------------------------- third-party embed- */ /* The contact card hosts HubSpot's form and meetings widgets in a cross-origin iframe, which cannot be restyled from here. So in dark mode this one card stays a deliberate light island: the palette is reset to its light values for everything inside it, and the embedded form reads exactly as its authors intended instead of dark-on-dark. */ :root[data-theme="dark"] .c-form { --ink: #0b1220; --slate: #334155; --muted: #64748b; --line: #e2e8f0; --bg: #f5f8ff; --card: #ffffff; --surface-2: #f1f5fb; --blue: #2563eb; --blue-strong: #1d4ed8; --blue-soft: #eaf1ff; --blue-100: #dbe7ff; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 30px rgba(37, 99, 235, .08); background: #fff; border-color: #dbe3f2; color: #0b1220; } /* --------------------------------------------------------------- imagery -- */ /* the hero clip and the product screenshots are light assets; take the glare off them so they sit in a dark page instead of shouting out of it */ :root[data-theme="dark"] .heroB .heroB-video { border-color: rgba(122, 160, 255, .18); box-shadow: 0 50px 90px -24px rgba(0, 0, 0, .7), 0 10px 30px -10px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .heroB .heroB-video video { filter: brightness(.82) contrast(1.06) saturate(1.05); } :root[data-theme="dark"] .heroB .heroB-video-wash::after { background: linear-gradient(125deg, rgba(255, 255, 255, .3) 8%, transparent 26%); } :root[data-theme="dark"] .heroB .heroB-glow { background: radial-gradient(640px 480px at 82% 20%, rgba(29, 163, 221, .2), transparent 60%), radial-gradient(560px 440px at 98% 85%, rgba(153, 38, 142, .16), transparent 65%); } :root[data-theme="dark"] .shot img, :root[data-theme="dark"] .mk-shot img { filter: brightness(.92) contrast(1.02); } :root[data-theme="dark"] .shot button:hover img, :root[data-theme="dark"] .mk-shot button:hover img { filter: none; } /* the logo keeps its brand colours; it is only lifted slightly on dark navy */ :root[data-theme="dark"] .sp-logo-img { filter: brightness(1.12); } /* ----------------------------------------------------------- misc detail -- */ :root[data-theme="dark"] .h-trust-card:before { color: #2b3f63; } :root[data-theme="dark"] .sp-burger span { background: var(--ink); } :root[data-theme="dark"] ::selection { background: #2b4f8f; color: #fff; } :root[data-theme="dark"] .skip-link { background: var(--blue); color: #07132a; }