/* ─────────────────────────────────────────────────────────────────
Solas — site-wide light/dark theme.
v1.14.10 — Each page already uses a CSS-variable system for colours
(--paper, --ink, --rule, --accent, …). This file ONLY needs to
provide the dark-mode override block; light values remain in each
page's own :root.
Pages opt in by:
1. Adding the no-flash inline init script in
(sets data-theme on before paint).
2.
3.
The toggle button is injected by theme.js — no per-page HTML.
───────────────────────────────────────────────────────────────── */
/* Dark-mode variable overrides. Applied when html[data-theme="dark"] is
set on the element. Carefully colour-matched against the
Solas accent so the brand feels coherent across both modes. */
html[data-theme="dark"] {
/* v1.15.5 — body text contrast bumped. Old values were a touch
muted against the dark paper, especially on hero ledes and
marketing prose. The lifts below push --ink-soft and --ink-faint
closer to --ink so paragraphs read cleanly without turning the
page into all-white noise. */
/* v1.15.8 — Background tones aligned with the Solas Chrome extension.
Old website palette sat at #1a1d24 (slightly blue-grey "soft dark")
while the extension uses a near-black charcoal. Matched here so
the website and extension feel like one product. */
--paper: #0f1115; /* was #1a1d24 — much darker, near-black */
--ink: #f2f3f8; /* slightly brighter headlines */
--ink-soft: #cfd3e0; /* much brighter body text */
--ink-faint: #a1a8bd; /* brighter captions / footnotes */
--rule: #23262e; /* was #2a2e38 — tightened for the darker bg */
--surface: #0a0c10; /* was #14171c — even darker for inset cards */
--accent: #6db09e; /* was #5fa18f — slightly brighter accent for dark bg */
--accent-hover: #82c0af; /* was #75b4a3 */
--accent-soft: rgba(95, 161, 143, 0.18);
/* v1.14.14 — --accent-bg is the audit portal's pale accent tint
(used by .drop:hover, .funnel-card, alignment banner). The
light value (#f4f8f6) turns near-white in dark mode, which
looks broken on hover; map it to a subtle accent tint over
the dark surface so the hover stays readable. */
--accent-bg: rgba(95, 161, 143, 0.10);
--danger: #e07259;
--danger-soft: rgba(224, 114, 89, 0.16);
--danger-strong: rgba(224, 114, 89, 0.28);
--warn: #d8a13a;
--warn-soft: rgba(216, 161, 58, 0.16);
--success: #5cb586;
}
/* Smooth the transition so toggling doesn't feel abrupt. Only
transition colour properties — leave layout untouched. */
html { transition: background-color .25s ease, color .25s ease; }
body, .nav, .card, .kpi, .activity, .heatmap-card, .explainer,
.page-head, .demo-banner, .ctrl, button {
transition: background-color .25s ease, color .25s ease,
border-color .25s ease, box-shadow .25s ease;
}
/* ── Theme toggle button (injected by theme.js) ──────────────────── */
.theme-toggle {
background: transparent;
border: 0;
cursor: pointer;
width: 34px;
height: 34px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
font-family: inherit;
padding: 0;
margin: 0;
flex-shrink: 0;
}
.theme-toggle:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--ink);
}
html[data-theme="dark"] .theme-toggle:hover {
background: rgba(255, 255, 255, 0.07);
}
.theme-toggle svg { width: 17px; height: 17px; }
/* v1.15.6 — Icon shows CURRENT theme state, not the destination.
Light mode shows a sun, dark mode shows a moon. This matches
how macOS, iOS, and most websites do it; the older "click to
reach this state" convention was confusing users into thinking
the page was in the wrong mode. */
.theme-toggle .icon-sun { display: block; }
.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: block; }
/* ── Page-specific dark-mode tweaks ─────────────────────────────── */
/* Dashboard hero KPI gauge backdrop blends differently in dark mode. */
html[data-theme="dark"] .kpi.is-hero {
background: linear-gradient(135deg, rgba(95,161,143,0.10) 0%, var(--paper) 70%);
border-color: rgba(95, 161, 143, 0.30);
}
/* Score-legend dot colours are baked into HTML inline styles in
the dashboard. Boost contrast slightly so they read on dark bg. */
html[data-theme="dark"] .score-legend-dot,
html[data-theme="dark"] .heatmap-legend-dot {
outline: 1px solid rgba(255, 255, 255, 0.08);
}
/* Tooltip pop on info-i — make sure colours invert correctly. */
html[data-theme="dark"] .info-i {
background: var(--ink-faint);
color: var(--paper);
}
html[data-theme="dark"] .info-i[data-tooltip]:hover::after {
background: var(--ink);
color: var(--paper);
}
/* Recent-activity dots: the colour utilities stay readable but
give them a subtle ring so they pop on the darker rows. */
html[data-theme="dark"] .activity-dot {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
/* The demo banner stays accent in both modes — readable on white
already, and on dark it still serves the same focus role. */
html[data-theme="dark"] .demo-banner { background: var(--accent); color: var(--paper); }
/* Form controls (select.ctrl) — the chevron SVG inside the select
is set via a data URL with a hardcoded grey. Override in dark
mode so it doesn't disappear. */
html[data-theme="dark"] select.ctrl {
background: var(--paper) url("data:image/svg+xml;utf8,") no-repeat right 10px center;
}
/* v1.14.14 — Audit portal alignment banner hardcodes #ffffff in its
gradient — in dark mode that's a bright white blob in the corner.
Re-paint the gradient using --paper so it adapts cleanly. */
html[data-theme="dark"] .alignment-banner {
background: linear-gradient(135deg, var(--accent-bg) 0%, var(--paper) 60%);
}
/* v1.14.14 — Homepage card classes hardcode #f8f9fa (pale grey) and
#eaf3ef (pale green) for backgrounds. In dark mode these turn into
bright white-ish blocks against the dark page. Repaint them using
the theme variables so they adapt. */
html[data-theme="dark"] .feature,
html[data-theme="dark"] .pricing,
html[data-theme="dark"] .coverage,
html[data-theme="dark"] .pillar,
html[data-theme="dark"] .step,
html[data-theme="dark"] .callout {
background: var(--surface);
border-color: var(--rule);
color: var(--ink);
}
html[data-theme="dark"] .badge {
background: var(--accent-soft);
color: var(--accent);
}
html[data-theme="dark"] .feature-icon {
background: var(--accent-soft);
color: var(--accent);
}
/* Institutional landing — audit CTA hardcodes a pale gradient, demo
CTA inverts its background using --ink (which becomes light in
dark mode and breaks the contrast). Repaint both. */
html[data-theme="dark"] .audit-cta {
background: linear-gradient(180deg, var(--accent-bg) 0%, var(--paper) 100%);
border-color: var(--rule);
}
html[data-theme="dark"] .demo-cta {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--rule);
}
html[data-theme="dark"] .demo-cta h3,
html[data-theme="dark"] .demo-cta p {
color: var(--ink);
}
/* Demo form input — no explicit background, inherits browser default
(white) in light mode. Force a paper-coloured background in dark
mode so it doesn't flash white inside the demo CTA. */
html[data-theme="dark"] .demo-form input {
background: var(--paper);
color: var(--ink);
border: 1px solid var(--rule);
}
html[data-theme="dark"] .demo-form input::placeholder {
color: var(--ink-faint);
}
/* Audit portal Pro waitlist email input hardcodes background:#fff. */
html[data-theme="dark"] .funnel-form input[type=email] {
background: var(--paper);
color: var(--ink);
border-color: var(--rule);
}
html[data-theme="dark"] .funnel-form input[type=email]::placeholder {
color: var(--ink-faint);
}
/* v1.15.8 — Match the Solas Chrome extension's green-pill style.
In light mode the green CTA buttons use white text (high contrast
on saturated forest green). In dark mode the accent is brighter
teal-green, and white text on that washes out — the extension
uses the near-black page colour for an "inset" feel. Apply that
here to the homepage CTAs and the nav install pill so the website
and extension feel like one product. */
html[data-theme="dark"] .cta:not(.cta-ghost),
html[data-theme="dark"] .nav-install,
html[data-theme="dark"] .install-pill {
color: var(--paper);
}
html[data-theme="dark"] .cta:not(.cta-ghost):hover,
html[data-theme="dark"] .nav-install:hover,
html[data-theme="dark"] .install-pill:hover {
color: var(--paper);
}