/*
* SITE_LIGHT_THEME_v1
*
* Site-wide Google-style light theme. Injected as the last
* stylesheet in every text/html response by app.py's
* `_inject_light_theme` after_request hook, so it wins the
* cascade against every template's inline `:root { --bg: #0b0d12; ... }`
* block.
*
* Strategy: override the CSS custom properties at :root and html
* level (both used by various templates) and then patch the
* handful of element-level dark-mode-specific colors that don't
* route through the variables (mostly inline styles using rgba()
* with dark-mode-tuned alphas).
*
* If a single page needs to opt back into the dark theme, add
* class="theme-dark" to its or .
*/
html:not(.theme-dark):not(.theme-dark *),
html:not(.theme-dark) :root,
:root {
--bg: #ffffff !important;
--panel: #f8f9fa !important;
--panel-2: #f1f3f4 !important;
--text: #202124 !important;
--muted: #5f6368 !important;
--accent: #1a73e8 !important;
--accent-2: #1967d2 !important;
--border: #dadce0 !important;
--err: #d93025 !important;
--ok: #1e8e3e !important;
}
/* Body always white. Foreground TRUE near-black so copy reads
strong on white -- #202124 was the Google body-text gray that
looked washed-out next to the bolder content on this app. */
html:not(.theme-dark), html:not(.theme-dark) body {
background: #ffffff !important;
color: #1a1a1a !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* SITE_TYPOGRAPHY_v2: editorial direction modeled after a contact-
data marketing landing page -- huge bold serif headline as the
visual anchor, small muted eyebrow text above it, generous
spacing. The look: "1 Contact = Email + Phone" energy.
- h1: Charter/Georgia serif, weight 700, very tight tracking,
pure black, generous size that scales DOWN on small screens.
- h2: still serif but more restrained; pure black.
- h3/h4: sans-serif, near-black.
- body: near-black #1a1a1a.
- .eyebrow / .kicker: muted gray, small, centered above headlines.
- .lede: dark mid-gray, larger than body, centered-friendly.
*/
html:not(.theme-dark) h1 {
color: #111111 !important;
font-family: 'Charter', 'Georgia', 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.08;
font-size: clamp(2rem, 4.5vw + 1rem, 3.6rem);
margin: 0 0 0.6rem;
}
html:not(.theme-dark) h2 {
color: #111111 !important;
font-family: 'Charter', 'Georgia', 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.18;
font-size: clamp(1.35rem, 1.6vw + 0.9rem, 1.75rem);
}
html:not(.theme-dark) h3 {
color: #111111 !important;
font-weight: 700;
letter-spacing: -0.01em;
font-size: 1.15rem;
}
html:not(.theme-dark) h4 {
color: #1a1a1a !important;
font-weight: 600;
font-size: 0.95rem;
}
html:not(.theme-dark) p, html:not(.theme-dark) li, html:not(.theme-dark) span {
color: inherit; /* let parent decide -- avoid forcing gray everywhere */
}
/* Lede / supporting copy: darker than the old Google muted gray
but still clearly secondary to headlines. Slightly larger so
it reads as an editorial subhead, not a footnote. */
html:not(.theme-dark) .lede {
color: #3c4043 !important;
font-size: 1.06rem;
line-height: 1.6;
max-width: 56rem;
}
/* "Eyebrow" / "kicker" -- the small muted line above the headline
("More meetings. More pipeline. More revenue."). Use as
or
above an h1. */
html:not(.theme-dark) .eyebrow,
html:not(.theme-dark) .kicker {
color: #5f6368 !important;
font-size: 0.95rem;
font-weight: 400;
margin: 0 0 0.7rem;
letter-spacing: 0;
}
/* HERO_v1: a centered marketing-style hero block -- big serif h1
in the middle, eyebrow above, lede below. Templates can opt in
with . */
html:not(.theme-dark) .hero {
text-align: center;
padding: 2.8rem 1.5rem 2rem;
max-width: 64rem;
margin: 0 auto;
}
html:not(.theme-dark) .hero h1 {
font-size: clamp(2.4rem, 5.5vw + 1rem, 4.4rem);
}
html:not(.theme-dark) .hero .lede {
margin: 0 auto;
text-align: center;
}
html:not(.theme-dark) .hero .eyebrow,
html:not(.theme-dark) .hero .kicker {
text-align: center;
}
/* TOP NAV — simple horizontal bar with text links, login on right.
Matches the reference's clean app-bar look. Templates that want
to keep their custom topbar can do so; this just tightens the
default styling. */
html:not(.theme-dark) .topbar a,
html:not(.theme-dark) .topnav a {
color: #1a1a1a !important;
font-weight: 500;
text-decoration: none;
transition: color 0.15s;
}
html:not(.theme-dark) .topbar a:hover,
html:not(.theme-dark) .topnav a:hover {
color: #1a73e8 !important;
text-decoration: none;
}
/* BUTTON_SAFETY_v1: keep button text from being clipped or wrapping
under itself when the surrounding flex container is narrow.
Guarantees text is visible and the button doesn't bleed outside
its container. */
html:not(.theme-dark) .btn,
html:not(.theme-dark) .btn.primary {
display: inline-flex !important;
align-items: center;
justify-content: center;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* BUTTON_TEXT_COLOR_v2: only re-assert white text on buttons that
ACTUALLY have a dark/colored background. Some templates use bare
.btn as an outline style (light bg, dark text) so a blanket
:not(.secondary):not(.disabled) rule wiped out their text. Target
only the explicit primary variant + buttons with a gradient
background. */
html:not(.theme-dark) .btn.primary {
color: #ffffff !important;
}
/* Top navigation bars (.topbar / .topnav) — keep white with a
divider so they read as a Google-style app bar. */
html:not(.theme-dark) .topbar,
html:not(.theme-dark) .topnav,
html:not(.theme-dark) nav.topbar,
html:not(.theme-dark) header.topbar {
background: #ffffff !important;
border-bottom: 1px solid #dadce0 !important;
color: #202124 !important;
}
/* Cards / panels — white surface, soft Material elevation. */
html:not(.theme-dark) .card,
html:not(.theme-dark) .panel,
html:not(.theme-dark) .filters-panel,
html:not(.theme-dark) .empty,
html:not(.theme-dark) .filters-card,
html:not(.theme-dark) .stat,
html:not(.theme-dark) .stat-card,
html:not(.theme-dark) .lead-card,
html:not(.theme-dark) .hm-row {
background: #ffffff !important;
border-color: #dadce0 !important;
color: #202124 !important;
box-shadow: 0 1px 3px rgba(60,64,67,0.10), 0 1px 2px rgba(60,64,67,0.06);
}
/* Form fields — white background, gray border, Google blue focus ring. */
html:not(.theme-dark) input[type="text"],
html:not(.theme-dark) input[type="email"],
html:not(.theme-dark) input[type="password"],
html:not(.theme-dark) input[type="tel"],
html:not(.theme-dark) input[type="url"],
html:not(.theme-dark) input[type="number"],
html:not(.theme-dark) input[type="search"],
html:not(.theme-dark) select,
html:not(.theme-dark) textarea {
background: #ffffff !important;
border: 1px solid #dadce0 !important;
color: #202124 !important;
}
html:not(.theme-dark) input:focus,
html:not(.theme-dark) select:focus,
html:not(.theme-dark) textarea:focus {
outline: none !important;
border-color: #1a73e8 !important;
box-shadow: 0 0 0 2px rgba(26,115,232,0.20) !important;
}
/* Generic muted text. */
html:not(.theme-dark) .muted,
html:not(.theme-dark) .lede,
html:not(.theme-dark) .hint,
html:not(.theme-dark) .subtle {
color: #5f6368 !important;
}
/* Secondary buttons — white-on-white needs a border to stay visible. */
html:not(.theme-dark) .btn.secondary,
html:not(.theme-dark) .btn-secondary {
background: #ffffff !important;
color: #202124 !important;
border: 1px solid #dadce0 !important;
}
html:not(.theme-dark) .btn.secondary:hover,
html:not(.theme-dark) .btn-secondary:hover {
border-color: #1a73e8 !important;
}
/* Accent-tinted chips (rgba blue/purple at low alpha) — make them
readable on white. We can't selector-match every page's
bespoke chip, but this catches the common .chip / .preview-chip /
.pipeline-chip patterns. */
html:not(.theme-dark) .chip,
html:not(.theme-dark) .preview-chip,
html:not(.theme-dark) .pipeline-chip,
html:not(.theme-dark) .badge {
background: rgba(26,115,232,0.10) !important;
border-color: rgba(26,115,232,0.30) !important;
color: #1a73e8 !important;
}
html:not(.theme-dark) .badge.ok,
html:not(.theme-dark) .chip.ok {
background: rgba(30,142,62,0.12) !important;
border-color: rgba(30,142,62,0.35) !important;
color: #1e8e3e !important;
}
html:not(.theme-dark) .badge.warn,
html:not(.theme-dark) .chip.warn {
background: rgba(249,168,37,0.14) !important;
border-color: rgba(249,168,37,0.40) !important;
color: #b06000 !important;
}
html:not(.theme-dark) .badge.err,
html:not(.theme-dark) .chip.err {
background: rgba(217,48,37,0.10) !important;
border-color: rgba(217,48,37,0.30) !important;
color: #c5221f !important;
}
/* Error blocks. */
html:not(.theme-dark) .err,
html:not(.theme-dark) .error-banner,
html:not(.theme-dark) .alert-error {
background: #fce8e6 !important;
border: 1px solid #f5c2c0 !important;
color: #c5221f !important;
}
/* Anchors default to Google blue. */
html:not(.theme-dark) a {
color: #1a73e8;
}
/* Dashboard "Today's priorities" widget background — many templates
use a dark-tuned linear-gradient(rgba(124,92,255,0.08), ...). On
white that vanishes; force a light accent wash instead. */
html:not(.theme-dark) .card[style*="rgba(124,92,255"],
html:not(.theme-dark) .card[style*="rgba(79,158,255"] {
background: linear-gradient(135deg, rgba(26,115,232,0.06), rgba(26,115,232,0.02)) !important;
border-color: rgba(26,115,232,0.30) !important;
color: #202124 !important;
}
/* Dark-mode-tuned green callouts (rgba(34,197,94,0.10) bg +
#86efac text) wash out completely on white. Patch any element
whose inline style starts with rgba(34,197,94,...) to use Google's
success-green tones instead. */
html:not(.theme-dark) [style*="rgba(34,197,94"],
html:not(.theme-dark) [style*="rgba(34, 197, 94"] {
background: #e6f4ea !important;
border-color: #34a853 !important;
}
/* And the pastel green text (#86efac) used inside those callouts —
force a darker, readable green. */
html:not(.theme-dark) [style*="#86efac"] {
color: #1e8e3e !important;
}
/* Tables — light rows + dividers. */
html:not(.theme-dark) table {
background: #ffffff !important;
color: #202124 !important;
}
html:not(.theme-dark) th,
html:not(.theme-dark) td {
border-color: #dadce0 !important;
}
html:not(.theme-dark) thead {
background: #f8f9fa !important;
}
/* Code / pre — light gray background, dark text. */
html:not(.theme-dark) code,
html:not(.theme-dark) pre {
background: #f1f3f4 !important;
color: #202124 !important;
}