/* Buzmate — Design System v2 */
/* ── Typography — Sora for display/headings (geometric, confident, pairs
with the blue→purple brand gradient), Inter for body/UI (best-in-class
legibility at small sizes). Loaded via tags in each page's
(see index.html etc.) rather than @import here, so the font request
fires in parallel with the CSS instead of blocking on it. ── */
:root {
--font-display: 'Sora', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ── Token layer — light mode (bare :root = default for all un-stamped visitors) ── */
:root {
/* Brand */
--primary: #2563EB;
--primary-soft: rgba(37,99,235,.09);
--tertiary: #7C3AED;
--success: #10B981;
--error: #EF4444;
--warning: #F59E0B;
/* Gradients */
--grad: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
--grad-soft: linear-gradient(135deg, rgba(37,99,235,.07), rgba(124,58,237,.07));
/* Surface */
--bg: #EEF2FF;
--bg-alt: #E4EAFC;
--card: #FFFFFF;
--nav-bg: rgba(238,242,255,.88);
--text: #091526;
--text-medium: #364D72;
--text-light: #6A80A8;
--text-muted: #8A9DC0;
--border: #D2DCED;
/* Elevation */
--shadow-xs: 0 1px 3px rgba(37,99,235,.07), 0 1px 2px rgba(0,0,0,.04);
--shadow-sm: 0 2px 8px rgba(37,99,235,.09), 0 1px 3px rgba(0,0,0,.04);
--shadow-md: 0 8px 28px rgba(37,99,235,.13), 0 2px 8px rgba(0,0,0,.05);
--shadow-lg: 0 24px 64px rgba(37,99,235,.16), 0 6px 24px rgba(37,99,235,.07);
/* Tokens */
--max: 1160px;
--r-sm: 10px;
--r: 18px;
--r-lg: 24px;
--r-full: 100px;
}
/* ── Dark mode via OS preference (only when user hasn't explicitly chosen light) ── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary: #3B82F6;
--primary-soft: rgba(59,130,246,.10);
--bg: #060E1E;
--bg-alt: #0A1428;
--card: #0D1A30;
--nav-bg: rgba(6,14,30,.9);
--text: #E8F0FF;
--text-medium: #8BAAD4;
--text-light: #546A8E;
--text-muted: #546A8E;
--border: #182640;
--shadow-xs: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
--shadow-sm: 0 2px 8px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.30);
--shadow-md: 0 8px 28px rgba(0,0,0,.52), 0 2px 8px rgba(0,0,0,.36);
--shadow-lg: 0 24px 64px rgba(0,0,0,.58), 0 6px 24px rgba(0,0,0,.40);
}
}
/* ── Dark mode via explicit toggle ── */
:root[data-theme="dark"] {
--primary: #3B82F6;
--primary-soft: rgba(59,130,246,.10);
--bg: #060E1E;
--bg-alt: #0A1428;
--card: #0D1A30;
--nav-bg: rgba(6,14,30,.9);
--text: #E8F0FF;
--text-medium: #8BAAD4;
--text-light: #546A8E;
--text-muted: #546A8E;
--border: #182640;
--shadow-xs: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
--shadow-sm: 0 2px 8px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.30);
--shadow-md: 0 8px 28px rgba(0,0,0,.52), 0 2px 8px rgba(0,0,0,.36);
--shadow-lg: 0 24px 64px rgba(0,0,0,.58), 0 6px 24px rgba(0,0,0,.40);
}
/* ── Light mode via explicit toggle (same as :root, ensures toggle always wins) ── */
:root[data-theme="light"] {
--primary: #2563EB;
--primary-soft: rgba(37,99,235,.09);
--bg: #EEF2FF;
--bg-alt: #E4EAFC;
--card: #FFFFFF;
--nav-bg: rgba(238,242,255,.88);
--text: #091526;
--text-medium: #364D72;
--text-light: #6A80A8;
--text-muted: #8A9DC0;
--border: #D2DCED;
--shadow-xs: 0 1px 3px rgba(37,99,235,.07), 0 1px 2px rgba(0,0,0,.04);
--shadow-sm: 0 2px 8px rgba(37,99,235,.09), 0 1px 3px rgba(0,0,0,.04);
--shadow-md: 0 8px 28px rgba(37,99,235,.13), 0 2px 8px rgba(0,0,0,.05);
--shadow-lg: 0 24px 64px rgba(37,99,235,.16), 0 6px 24px rgba(37,99,235,.07);
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* ── Layout ── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
section { padding: 100px 0; }
.section-alt { background: var(--bg-alt); }
.center { text-align: center; }
.muted { color: var(--text-muted); }
/* ── Typography ── */
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; font-family: var(--font-display); }
h1 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
/* Previously had no explicit size at all -- silently fell back to the
browser's unstyled default, which is why feature-card titles
(features.html's fp.f*.h items) read as noticeably smaller/less
deliberate than everything else on the page. Headings wrap naturally
(text-wrap:balance, block-level), so sizing this up doesn't carry the
same overlap risk the nav's single-row flex layout had. */
h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.lede { font-size: 17px; color: var(--text-medium); line-height: 1.72; max-width: 600px; }
.lede-lg { font-size: 18.5px; color: var(--text-medium); line-height: 1.72; }
/* ── Eyebrow labels ── */
.eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--primary); background: var(--primary-soft);
border-radius: var(--r-full); padding: 6px 16px; margin-bottom: 18px;
}
/* ── Buttons ── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: var(--r-full); padding: 14px 26px; font-size: 14.5px; font-weight: 700;
cursor: pointer; border: none; white-space: nowrap; line-height: 1;
transition: transform .18s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
}
.btn-primary {
background: var(--grad); color: #fff;
box-shadow: 0 4px 18px rgba(37,99,235,.40);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(37,99,235,.52); }
.btn-outline {
background: var(--card); color: var(--text);
border: 1.5px solid var(--border); box-shadow: var(--shadow-xs);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.btn-white { background: #fff; color: var(--primary); box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.26); }
.btn-lg { padding: 17px 34px; font-size: 15.5px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* ── Dev Banner ── */
.dev-banner {
background: rgba(245,158,11,.07); border-bottom: 1px solid rgba(245,158,11,.18);
color: var(--text-medium); font-size: 12px; text-align: center; padding: 9px 16px;
}
.dev-banner strong { color: var(--warning); }
/* ── Nav ── */
.nav {
position: sticky; top: 0; z-index: 100;
background: var(--nav-bg);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between; height: 96px;
}
.nav-logo {
display: flex; align-items: center; gap: 12px;
font-weight: 800; font-size: 24px; flex-shrink: 0; letter-spacing: -0.03em;
}
.nav-logo .mark {
width: 48px; height: 48px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
object-fit: cover; flex-shrink: 0;
background: #fff;
box-shadow: 0 3px 10px rgba(37,99,235,.28);
}
/* overflow:hidden is a hard backstop, not just a tightening step: even if
the media-query breakpoints below are wrong for some future font/content/
translation-length combination (as happened here twice already), the
nav-links box can only ever clip its own trailing content at the box
edge — it can no longer visually overlap .nav-cta's buttons the way an
unclipped flex item does when squeezed narrower than its content. */
.nav-links { display: flex; align-items: center; gap: 34px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.nav-links a { font-size: 17px; font-weight: 600; color: var(--text-medium); white-space: nowrap; transition: color .15s; }
.nav-links a.active, .nav-links a:hover { color: var(--primary); }
.nav-links .btn { display: none; } /* hides duplicate btn inside nav-links; nav-cta carries it */
.nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-cta .btn { font-size: 15.5px; padding: 15px 28px; } /* bigger than the site-wide .btn default, matches the larger nav-links text next to it */
.nav-toggle {
display: none; background: none; border: 1.5px solid var(--border); border-radius: var(--r-sm);
width: 40px; height: 40px; font-size: 18px; cursor: pointer; color: var(--text); transition: border-color .15s;
}
.nav-toggle:hover { border-color: var(--primary); }
.nav-mobile {
display: none; flex-direction: column; padding: 8px 24px 20px;
border-top: 1px solid var(--border); background: var(--bg);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
padding: 13px 0; font-size: 15px; font-weight: 600;
color: var(--text-medium); border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile a.active { color: var(--primary); }
.nav-mobile .btn-primary { justify-content: center; margin-top: 12px; }
/* Icon-only circular toggle for theme (dark/light). The language toggle
(#lang-pill below) tried this too but went back to text -- a lone globe
doesn't tell you WHICH language you'll get the way "EN"/"FR" does, so
that one keeps its label; theme (sun/moon) is unambiguous as an icon
alone and stays circular. */
.theme-pill {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--border); background: var(--card);
border-radius: 50%; padding: 0;
font-size: 18px; cursor: pointer; color: var(--text-medium);
transition: border-color .15s, color .15s, transform .15s;
}
.theme-pill:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
#lang-pill {
width: auto; height: 44px; border-radius: var(--r-full);
padding: 0 18px; font-size: 14px; font-weight: 700;
}
/* ── Hero ── */
.hero { position: relative; padding: 88px 0 76px; overflow: hidden; }
.hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 70% at 50% -5%, rgba(37,99,235,.16) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 90% 95%, rgba(124,58,237,.09) 0%, transparent 55%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-centered { text-align: center; max-width: 820px; margin: 0 auto; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.hero-badge {
display: flex; align-items: center; gap: 7px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r-full); padding: 9px 17px;
font-size: 13px; font-weight: 600; color: var(--text-medium);
box-shadow: var(--shadow-xs);
}
.hero-visual { margin-top: 64px; }
/* ── Hero 2-col split ── */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
/* ── Trust checklist (hero left col) ── */
.trust-list { display: flex; flex-direction: column; gap: 11px; margin-top: 28px; }
.trust-item { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: var(--text-medium); }
.trust-check {
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
background: rgba(16,185,129,.14); color: #059669;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
}
/* ── Stats band — row of gradient capsules ── */
.stats-band { padding: 56px 0; }
.stat-strip {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.stat-item {
background: var(--grad); border-radius: 100px;
padding: 18px 36px; text-align: center;
box-shadow: 0 6px 22px rgba(37,99,235,.32);
min-width: 148px;
}
.stat-item + .stat-item::before { display: none; }
.stat-num {
display: block; font-size: 36px; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
color: #fff;
}
.stat-label { display: block; font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 7px; font-weight: 600; }
/* ── Grids ── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ── Cards ── */
.card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r); padding: 32px;
transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(37,99,235,.25); }
/* ── Feature cards ── */
.feature-card .icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 20px; background: var(--primary-soft);
}
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { margin: 0; color: var(--text-medium); font-size: 14.5px; line-height: 1.65; }
/* ── Dashboard mockup ── */
.dash-mock {
background: var(--bg-alt); border: 1px solid var(--border);
border-radius: var(--r-sm); overflow: hidden;
}
.dash-row {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.dash-row:last-child { border-bottom: none; }
.dash-pill { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-full); }
.pill-new { background: rgba(245,158,11,.12); color: #D97706; }
.pill-urgent { background: rgba(239,68,68,.12); color: #DC2626; }
.pill-done { background: rgba(16,185,129,.12); color: #059669; }
/* ── Voice chips ── */
.voice-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.voice-strip::-webkit-scrollbar { display: none; }
.voice-chip {
flex-shrink: 0; display: flex; align-items: center; gap: 10px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--r); padding: 12px 16px; min-width: 160px;
box-shadow: var(--shadow-xs); cursor: pointer;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.voice-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: rgba(37,99,235,.3); }
.voice-chip .av { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.voice-chip b { font-size: 13.5px; }
.voice-chip span { display: block; font-size: 11.5px; color: var(--text-muted); }
/* ── Audience cards ── */
.audience-card { display: flex; flex-direction: column; gap: 16px; }
.audience-card .icon-circle {
width: 52px; height: 52px; border-radius: 50%; background: var(--grad);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 22px; box-shadow: 0 4px 14px rgba(37,99,235,.30); flex-shrink: 0;
}
/* ── Phone mock (kept for other pages) ── */
.phone-mock {
background: var(--grad); border-radius: 28px; padding: 22px;
box-shadow: 0 30px 60px rgba(37,99,235,.25); max-width: 320px; margin: 0 auto;
}
.phone-mock .screen { background: var(--card); border-radius: 18px; padding: 22px; }
/* ── Steps ── */
.step { display: flex; gap: 22px; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step .num {
width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
flex-shrink: 0; box-shadow: 0 4px 14px rgba(37,99,235,.30);
}
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--text-medium); font-size: 15px; line-height: 1.68; }
/* ── Callout / gradient CTA ── */
.callout {
background: var(--grad); border-radius: var(--r-lg); padding: 72px 48px;
position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.callout::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 65% 80% at 80% 25%, rgba(255,255,255,.10) 0%, transparent 60%);
}
.callout > * { position: relative; z-index: 1; }
/* ── Soft callout ── */
.callout-soft {
background: var(--grad-soft); border: 1px solid rgba(37,99,235,.16);
border-radius: var(--r); padding: 32px;
}
/* ── Tag pill ── */
.tag-pill {
display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--tertiary);
background: rgba(124,58,237,.1); border-radius: var(--r-full); padding: 5px 13px; margin-bottom: 10px;
}
/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ── Live dot pulse ── */
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-dot { animation: live-pulse 2.4s ease-in-out infinite; }
/* ── Footer ── */
footer.site-footer { border-top: 1px solid var(--border); padding: 68px 0 32px; background: var(--bg-alt); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
.footer-grid h4 {
font-size: 11px; margin-bottom: 18px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .07em; font-weight: 800;
}
.footer-grid a { display: block; font-size: 14px; color: var(--text-medium); margin-bottom: 12px; transition: color .15s; }
.footer-grid a:hover { color: var(--primary); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 10px;
}
/* ── Responsive ── */
@media (max-width: 980px) {
section { padding: 72px 0; }
.hero { padding: 64px 0 52px; }
.hero-grid { grid-template-columns: 1fr; gap: 44px; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.stats-band { padding: 40px 0; }
.stat-item { min-width: 130px; padding: 16px 28px; }
}
/* The nav row never wraps (flex + white-space:nowrap on each link), so once
combined label width exceeds the available row width, items overflow
past the box edge -- clipped by .nav-links' own overflow:hidden rather
than visibly overlapping .nav-cta, but still needs these breakpoints to
avoid clipping in the first place. Applies to both languages now (English
used to have enough margin to skip this entirely, but Sora/Inter erased
that margin -- see git history for the two rounds of pixel-guessing that
preceded this comment). */
@media (max-width: 1700px) {
.nav-links { gap: 24px; }
}
@media (max-width: 1500px) {
.nav-links { gap: 19px; }
.nav-links a { font-size: 15px; }
}
/* French labels run noticeably longer than their English equivalents at
every width -- these stack ON TOP of the universal breakpoints above
(both apply together), not instead of them, since French needs strictly
more margin than English at the same viewport width, not just the same
treatment English now also needs. Unconditional (no media query): this
was proven to work for French before and isn't worth re-guessing.
(No :lang(fr) .btn-outline rule anymore -- the outline "Try the Demo"
button was removed from the nav entirely, it duplicated the "Live Demo"
link right next to it.) Scaled up to match when the base English sizes
went up -- these were previously left behind at their old small values
while only the English base got bigger, which is its own bug worth
remembering: any future nav size change must touch this block too,
not just the plain .nav-links rule above it. */
:lang(fr) .nav-links { gap: 15px; }
:lang(fr) .nav-links a { font-size: 15px; }
@media (max-width: 1450px) {
:lang(fr) .nav-links, :lang(fr) .nav-cta .btn { display: none; }
:lang(fr) .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 1250px) {
.nav-links, .nav-cta .btn { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 720px) {
section { padding: 52px 0; }
.hero { padding: 48px 0 40px; }
.container { padding: 0 20px; }
.nav-links, .nav-cta .btn { display: none; }
.nav-inner { height: 64px; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.callout { padding: 40px 24px; }
.card { padding: 24px; }
.hero-visual { margin-top: 44px; }
.stats-band { padding: 32px 0; }
.stat-strip { gap: 10px; }
.stat-item { min-width: 110px; padding: 14px 22px; }
.stat-num { font-size: 30px; }
}