/* 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: 1280px; --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; overflow-x: hidden; } 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; overflow-x: hidden; /* Hard backstop against any single unconstrained-width element (a long translation, a future badge/pill with no max-width like .eyebrow used to be) forcing the whole page wider than the viewport -- same "clip at the edge instead of letting it break the whole layout" philosophy as .nav-links' own overflow:hidden backstop below. */ } 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; max-width: 100%; } /* ── Icon system -- Lucide, rendered to real inline at runtime by lucide.createIcons() (see site.js). Replaces every emoji-as-icon instance sitewide; colors/sizing inherit from context via currentColor. ── */ .ic { display: inline-flex; flex-shrink: 0; vertical-align: -3px; } .ic svg { width: 1em; height: 1em; stroke-width: 2.25; } i[data-lucide] { display: inline-flex; } /* ── 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; } /* ── Cookie notice ── */ .cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 600; max-width: 520px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 16px 18px; } .cookie-notice p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-medium); flex: 1 1 240px; } .cookie-notice a { color: var(--primary); font-weight: 600; } .cookie-notice button { flex-shrink: 0; border: none; border-radius: var(--r-full); padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--grad); color: #fff; } @media (max-width: 720px) { /* Sits above the sticky mobile CTA bar rather than behind/under it. */ .cookie-notice { bottom: 90px; } } /* ── Sticky mobile CTA ── */ /* Below 720px the header's own CTA is hidden entirely (see .nav-cta .btn rule in that breakpoint) and replaced by a hamburger menu -- without this, a mobile visitor has no persistently-visible way to convert once they've scrolled past the hero. Desktop already has the header CTA, so this stays hidden there. */ .sticky-mobile-cta { display: none; } /* ── Back-to-top button ── */ /* Bottom-LEFT, not bottom-right -- buzzy-widget.js's chat FAB already owns bottom-right (22px/58px circle, z-index:9999) on every page. */ .back-to-top { position: fixed; left: 20px; bottom: 20px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-medium); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, border-color .15s ease, color .15s ease; } .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { border-color: var(--primary); color: var(--primary); } .back-to-top svg { width: 20px; height: 20px; } @media (max-width: 720px) { /* Sticky mobile CTA bar + Buzzy FAB already crowd the bottom edge on phones -- move it up above the CTA bar rather than overlapping it. */ .back-to-top { bottom: 78px; left: 14px; width: 40px; height: 40px; } } /* ── Offline banner ── */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 700; background: var(--warning); color: #241a00; text-align: center; font-size: 13px; font-weight: 700; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateY(-100%); transition: transform .25s ease; } .offline-banner.show { transform: translateY(0); } /* ── Command palette (Cmd/Ctrl+K) ── */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); border-radius: var(--r-full); padding: 7px 10px 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .cmdk-trigger:hover { border-color: var(--primary); color: var(--primary); } .cmdk-trigger kbd { font-size: 10.5px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-family: var(--font-body); line-height: 1.5; } .cmdk-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(4,10,24,.55); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; backdrop-filter: blur(2px); } .cmdk-overlay[hidden] { display: none; } .cmdk-box { width: 100%; max-width: 560px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; } .cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .cmdk-input-row svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; } .cmdk-input-row input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-size: 15px; font-family: var(--font-body); } .cmdk-input-row kbd { font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-family: var(--font-body); flex-shrink: 0; } .cmdk-list { max-height: 50vh; overflow-y: auto; padding: 8px; } .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text-medium); font-size: 14px; font-weight: 600; } .cmdk-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); } .cmdk-item.active, .cmdk-item:hover { background: var(--primary-soft); color: var(--primary); } .cmdk-item.active svg, .cmdk-item:hover svg { color: var(--primary); } .cmdk-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; } .cmdk-hint { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); } .cmdk-hint span { display: flex; align-items: center; gap: 5px; } .cmdk-hint kbd { border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 700; } /* ── Dev Banner ── */ .dev-banner { background: rgba(37,99,235,.08); border-bottom: 1px solid rgba(37,99,235,.2); color: var(--text-medium); font-size: 12px; text-align: center; padding: 9px 16px; } .dev-banner strong { color: var(--primary); } /* ── 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; /* justify-content:space-between on .nav-inner has no floor of its own -- once nav-links' content leaves no leftover row space (confirmed via screenshot to already be the case in French at every width the French nav is visible), that "space between" the logo and nav-links collapses to zero and they visually touch. A margin here guarantees a minimum without also taxing the nav-links<->nav-cta gap, which never needed it (nav-links is the only flex-shrink item, so ANY floor added anywhere in nav-inner comes out of its budget -- a one-sided margin costs it half of what a nav-inner-wide gap would). */ margin-right: 20px; } .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; } /* CSS Grid gives every item an implicit min-width:auto, which refuses to shrink a 1fr track below its content's own min-content width -- on a very narrow viewport that silently pushes the item (and everything inside it) past the edge instead of actually filling the fr track. min-width:0 opts these back into normal shrink-to-fit sizing. Confirmed via a real headless-Chrome measurement pass (not guessed): without this, .hero-grid's column overflowed at very narrow widths and .grid-4 overflowed right at 1024px (iPad landscape). */ .hero-grid > *, .grid > * { min-width: 0; } /* ── 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). */ /* The cmdk search trigger (site.js appends it into .nav-links at runtime, after all the breakpoints below were tuned) never actually gets more room on a wider monitor: .container is hard-capped at --max (1280px), so past ~1336px viewport the available row width is constant, not growing -- there is no "wide desktop" tier where the full icon+label+kbd trigger has space. Gating its compaction inside a max-width query (as a first pass here did) left every viewport ABOVE that query's ceiling with zero compaction and the worst clipping of all, on the most common monitor sizes. Dropping the kbd hint unconditionally, and the text label at the same 1500px tier used for the plain links, keeps the trigger inside the flat width budget at every desktop size instead of only within one guessed band. Verified empirically with headless- Chrome screenshots at 1280/1400/1600/1920 -- even icon+"Search"+no-kbd still collided with the logo at 1920 (the row's total content already used every pixel .container's fixed cap allows before this trigger existed at all), so the trigger stays icon-only unconditionally; kbd and the text label never have room on any viewport once nav-links itself is visible. */ .cmdk-trigger kbd, .cmdk-trigger span { display: none; } .cmdk-trigger { padding: 7px 9px; gap: 0; } /* French labels alone (Accueil/Fonctionnalités/Comment ça marche/etc) already consume nav-links' entire shrink budget at every width the French nav is visible -- confirmed empirically: even icon-only, the trigger still forced a real link ("Démo en direct") to clip once the nav-inner gap fix below also started drawing from that same budget. Site.js's own comment already treats the trigger as something that "either has the same room as the other nav links, or it's hidden right along with them" -- French simply never has that room, so it's hidden here rather than fighting for space English can spare and French can't. The Cmd/Ctrl+K shortcut itself still works regardless -- this only removes the visible button. */ :lang(fr) .cmdk-trigger { display: none; } @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; } body { padding-bottom: 78px; } .sticky-mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--nav-bg); border-top: 1px solid var(--border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .sticky-mobile-cta .btn { width: 100%; } /* buzzy-widget.js injects its own