/* ===================================================================== SpeakoFlow · styles.css (rebuilt as one cohesive system) Creamy Teal theme. Soft, cool-leaning cream base (a clean "sea-glass" white, NOT warm beige — warm + teal muddies into "dirty", cool lets teal pop), espresso dark fills, a clean bright teal accent, indigo as the secondary "intelligence" cue. The accent stays light almost everywhere so it never dominates; the primary button is a bright teal with dark text. Newsreader (display) + Manrope (body) + JetBrains Mono (keys only). Each chapter uses a composition matched to its behavior: dictation split, assistant workspace, immersive screen vision, personalization tabs, and a visible local-data boundary. ===================================================================== */ /* ---------- Tokens ---------- */ :root { --bg: #f3f7f5; /* soft sea-glass white — clean & cool so teal pops */ --bg-2: #e8f0ec; /* soft cool band */ --surface: #ffffff; /* crisp white cards */ --ink: #16191a; /* headings — neutral-cool near-black */ --ink-2: #474e4c; /* body (~7.9:1) */ --muted: #696f6b; /* meta (~4.7:1) */ --line: rgba(18, 32, 28, 0.09); --line-2: rgba(18, 32, 28, 0.14); /* Clean teal ramp — light and fresh, never the old muddy dark teal. Token names kept as --teal* for stability. */ --teal: #14b8a6; /* bright clean teal (matches logo) — accents, button */ --teal-ink: #0a7a70; /* clean deep teal — kickers, links (~4.8:1) */ --teal-deep: #075e57; /* deepest teal — hover / emphasis */ --teal-wash: #d7efe9; /* light teal wash */ --teal-wash-2: #eaf6f2; /* faint teal tint */ --local-surface: #dbeee8; /* Secondary accent — indigo "intelligence". Warm ember + cool indigo is a deliberate complementary pairing, and it stays colorblind-safe against the amber (they separate on the blue–yellow axis, which red–green CVD keeps). */ --iris: #6366f1; /* bright — small glyphs, dots, listening cue */ --iris-ink: #4338ca; /* text / kickers on light (~7.9:1 on white) */ --iris-deep: #3730a3; /* hover / deep surfaces */ --iris-wash: #eceefb; /* section tint */ --iris-wash-2: #f4f5fd; /* faint tint */ /* Soft, cool teal-tinted shadows (not flat neutral grey, not warm) so elevation reads as designed rather than default. */ --shadow-sm: 0 1px 2px rgba(12, 44, 40, 0.05), 0 2px 8px rgba(12, 44, 40, 0.06); --shadow-md: 0 8px 24px rgba(12, 44, 40, 0.09), 0 2px 8px rgba(12, 44, 40, 0.06); --shadow-lg: 0 30px 70px -24px rgba(12, 44, 40, 0.20), 0 12px 28px -18px rgba(12, 44, 40, 0.14); --ring: 0 0 0 3px rgba(10, 125, 116, 0.4); --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --maxw: 1140px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* One vertical rhythm for every band, so spacing never feels random. */ --section-y: clamp(4.5rem, 9vw, 8rem); --flow-gap: clamp(2.5rem, 5vw, 4rem); /* header -> its content */ } /* Dark theme is opt-in via . */ :root[data-theme="dark"] { --bg: #16120f; --bg-2: #1d1815; --surface: #221c18; --ink: #f6f2ec; --ink-2: #d3ccc1; --muted: #9b938a; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.16); --teal: #2dd4bf; --teal-ink: #5eead4; --teal-deep: #99f6e4; --teal-wash: rgba(45, 212, 191, 0.14); --teal-wash-2: rgba(45, 212, 191, 0.07); --iris: #a5b4fc; --iris-ink: #c7d2fe; --iris-deep: #e0e7ff; --iris-wash: rgba(99, 102, 241, 0.14); --iris-wash-2: rgba(99, 102, 241, 0.07); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.7); --ring: 0 0 0 3px rgba(94, 234, 212, 0.4); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink-2); line-height: 1.65; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } a { color: var(--teal-ink); text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: rgba(22, 182, 164, 0.26); color: var(--ink); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 16px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top 0.2s var(--ease); } .skip-link:focus-visible { top: 16px; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } section { position: relative; } section[id] { scroll-margin-top: 6rem; } /* ---------- Typography (ONE scale) ---------- Every section heading is .section-title at ONE fluid size. Card titles are the only smaller heading tier. Nothing else competes at section level. */ .section-title { font-family: var(--font-serif); font-weight: 500; color: var(--ink); font-size: clamp(2rem, 1.45rem + 1.9vw, 2.7rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; } .section-body { color: var(--ink-2); font-size: 1.075rem; line-height: 1.7; max-width: 46rem; margin-top: 1.25rem; text-wrap: pretty; } .section-body-center { margin-inline: auto; text-align: center; max-width: 56ch; } /* Left-aligned section header (compare, faq) — matches the feature sections' left-to-right reading rhythm instead of pulling to center. */ .section-head { max-width: 56rem; margin: 0 0 var(--flow-gap); } .section-head .section-body { max-width: none; } /* One consistent kicker for every feature section. */ .feature-kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--teal-ink); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.005em; margin-bottom: 0.9rem; } .feature-kicker i { font-size: 1.15rem; } @media (max-width: 640px) { br.br-desktop { display: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-sans); font-weight: 700; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; transition: transform 0.2s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); will-change: transform; } .btn i { font-size: 1.2em; } .btn-sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; } .btn-lg { padding: 0.95rem 1.7rem; font-size: 1.05rem; } /* A bright, clean teal with dark ink text — light and vibey, so the CTA reads as an accent rather than a heavy saturated slab that hijacks the hero. */ .btn-primary { background: var(--teal); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(10, 125, 116, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-primary:hover { background: #12a493; color: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(10, 125, 116, 0.55), inset 0 1px 0 rgba(255,255,255,0.45); } .btn-primary:active { transform: translateY(0) scale(0.985); } [data-theme="dark"] .btn-primary { background: #16b6a4; color: #0e1210; } [data-theme="dark"] .btn-primary:hover { background: #35d6c2; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--teal-ink); color: var(--teal-ink); transform: translateY(-2px); } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: clamp(0.6rem, 1.5vw, 1rem); padding-bottom: 0.4rem; pointer-events: none; } .nav-shell { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(0.75rem, 2.5vw, 1.25rem); border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: var(--shadow-sm); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); pointer-events: auto; } .site-header.scrolled .nav-shell { background: color-mix(in srgb, var(--bg) 94%, transparent); border-color: var(--line-2); box-shadow: var(--shadow-md); } /* Auto-hide the header on scroll-down (revealed on scroll-up or near the top). Scoped to phone/tablet widths where screen space is tight; JS toggles .nav-hidden. Desktop keeps the nav always visible. */ @media (max-width: 820px) { .site-header { transition: transform 0.35s var(--ease); will-change: transform; } .site-header.nav-hidden { transform: translateY(-115%); } } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 60px; } .nav-brand { display: inline-flex; align-items: center; } .nav-logo { height: 30px; width: auto; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--ink-2); font-weight: 600; font-size: 0.96rem; position: relative; padding: 0.35rem 0; transition: color 0.2s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--teal); border-radius: 2px; transition: width 0.25s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 0.9rem; } .nav-github { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-weight: 600; font-size: 0.95rem; transition: color 0.2s var(--ease); } .nav-github i { font-size: 1.25rem; } .nav-github:hover { color: var(--ink); } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; background: transparent; border: 1px solid var(--line-2); align-items: center; justify-content: center; } .nav-toggle-bars { position: relative; width: 20px; height: 14px; } .nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .nav-toggle-bars span:nth-child(1) { top: 3px; } .nav-toggle-bars span:nth-child(2) { bottom: 3px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { bottom: 6px; transform: rotate(-45deg); } /* ---------- Hero ---------- */ .hero { min-height: clamp(660px, 90vh, 900px); overflow: hidden; background: var(--bg); border-bottom: 1px solid rgba(18, 32, 28, 0.08); } /* A light legibility scrim behind the hero copy. It keeps the headline and subhead crisp while letting the animated voice-field read through as a live presence (not a dead centre). Painted above the canvas (z0), below the copy (z1), in the same --bg colour so there is no visible edge. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(88% 66% at 50% 46%, color-mix(in srgb, var(--bg) 32%, transparent) 0%, color-mix(in srgb, var(--bg) 18%, transparent) 44%, color-mix(in srgb, var(--bg) 6%, transparent) 68%, transparent 92%); } .hero-voice-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .hero-inner { position: relative; z-index: 1; min-height: clamp(660px, 90vh, 900px); padding-top: clamp(6.5rem, 12vh, 8.5rem); padding-bottom: clamp(2.5rem, 5vh, 4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2.25rem, 5vh, 3.5rem); text-align: center; } .hero-main { width: min(100%, 47rem); display: flex; flex-direction: column; align-items: center; } .hero-title { font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: clamp(2.9rem, 1.9rem + 3.4vw, 4.75rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; } .hero-title span { white-space: nowrap; } /* Characterful brand slogan — the line that gives the hero life. Existing Newsreader italic (identity), inked in brand teal so the fold isn't all near-black on off-white. */ .hero-slogan { margin-top: 1.1rem; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 0.95vw, 1.9rem); line-height: 1.25; letter-spacing: -0.012em; color: var(--teal-deep); text-wrap: balance; } .hero-sub { margin: 1.05rem auto 0; max-width: 54ch; font-size: clamp(1rem, 0.96rem + 0.22vw, 1.12rem); color: var(--ink-2); line-height: 1.62; text-wrap: pretty; } .hero-cta { margin-top: 2rem; display: flex; justify-content: center; gap: 0.85rem; flex-wrap: wrap; } /* GitHub star count pill on the secondary CTA. Hidden until JS resolves it, so it never shows an empty or broken state. */ .gh-stars { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.1rem; padding: 0.06rem 0.5rem; border-radius: 999px; background: var(--teal-wash); color: var(--teal-deep); font-size: 0.82em; font-weight: 700; line-height: 1.4; } .gh-stars[hidden] { display: none; } .hero-pill { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin: 0; color: var(--ink); } /* Shadow sits on the pill itself so it never bleeds onto the typed line. */ .hero-pill-mount { display: flex; justify-content: center; filter: drop-shadow(0 16px 24px rgba(18, 32, 28, 0.2)); } /* Hero listening pill — the dense waveform fills the chip instead of floating in empty black space. The bars are widened a touch for presence (the demo sets --sf-bar-w / --sf-bar-gap inline, so we override with !important) and the box is sized to the 19-bar spindle so there's no dead space. */ .hero-pill-mount .sf-rec-pill { height: 46px; padding: 0 14px; min-width: 0; } .hero-pill-mount .sf-rec-pill .sf-waveform.sm { height: 26px; --sf-bar-w: 3px !important; --sf-bar-gap: 2.6px !important; } .hero-pill-mount .sf-rec-pill .sf-wave-box { width: 104px; } /* The pill "writes" a warm welcome, line by line: a live show-don't-tell of voice-to-text that also carries the open-source note. */ .hero-type { margin: 0; width: 22rem; max-width: 88vw; text-align: center; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); min-height: 1.7em; /* reserve a line so nothing jumps */ transition: opacity 0.4s var(--ease); } .hero-type.is-fading { opacity: 0; } .hero-type-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.14em; background: var(--teal-ink); border-radius: 1px; animation: heroCaretBlink 1.05s steps(1, end) infinite; } @keyframes heroCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-type { transition: none; } .hero-type-caret { animation: none; opacity: 0; } } /* ---------- Trust strip ---------- */ .trust { padding: clamp(1.75rem, 4vw, 2.5rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .trust-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .trust-row li { display: flex; flex-direction: column; gap: 0.15rem; padding-inline: 1.5rem; text-align: center; align-items: center; } .trust-row li:not(:last-child) { border-right: 1px solid var(--line); } .trust-key { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .trust-note { font-size: 0.85rem; color: var(--muted); } /* ---------- Core feature moments ---------- */ .feature { padding: clamp(5.5rem, 8.5vw, 8.5rem) 0; } #features { background: radial-gradient(120% 85% at 14% 0%, var(--teal-wash-2), transparent 56%), var(--surface); } .feature--assistant { background: radial-gradient(115% 90% at 86% 4%, color-mix(in srgb, var(--iris) 10%, transparent), transparent 54%), linear-gradient(180deg, color-mix(in srgb, var(--iris-wash) 72%, var(--bg)) 0%, var(--bg) 80%); border-top: 1px solid color-mix(in srgb, var(--iris) 16%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--iris) 12%, transparent); } .feature--assistant .feature-kicker { color: var(--iris-ink); } .feature--assistant kbd { background: #f5f6fe; border-color: color-mix(in srgb, var(--iris) 28%, transparent); } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6.5vw, 5.75rem); align-items: center; } .feature--assistant .feature-media { order: -1; } .feature-copy { max-width: 34rem; } .feature-copy .section-body { margin-bottom: 0; } .kbd-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.6rem; } kbd { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 7px; padding: 0.35rem 0.6rem; line-height: 1; } .kbd-plus { color: var(--muted); font-weight: 700; } .kbd-caption { color: var(--muted); font-size: 0.9rem; margin-left: 0.4rem; } /* Compact speed proof (replaces the old separate comparison band). */ .stat-row { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 2.75rem); margin-top: 2rem; } .stat { display: flex; flex-direction: column; gap: 0.1rem; } .stat-num { font-family: var(--font-serif); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--teal-deep); letter-spacing: -0.01em; } .stat-cap { font-size: 0.85rem; color: var(--muted); font-weight: 600; } /* Media column: every visual is centered and shares one max width so no section dominates another. */ .feature-media { display: flex; justify-content: center; } .feature-media > * { width: 100%; max-width: 560px; } /* Shared demo surface (dictation + spoken pill). */ .demo-card, .pill-showcase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .demo-card { display: flex; align-items: center; min-height: 340px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .demo-card .dictation-demo-mount { width: 100%; } .demo-card .sf-dictation { width: 100%; max-width: none; } .demo-card .sf-doc { min-height: 0; height: 208px; overflow: hidden; } /* Spoken-answers pill, shown in its own calm stage (the "beautiful pill"). */ .pill-showcase { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); background: radial-gradient(130% 120% at 50% 12%, var(--teal-wash) 0%, var(--surface) 66%); text-align: center; } .pill-showcase-mount { display: flex; flex-direction: column; align-items: center; } .pill-showcase .sf-pill-stage { min-height: 56px; } /* The state caption sits BELOW the pill, centered, with real breathing room — never crammed against its right edge. */ .pill-showcase .sf-state-label { margin-top: 1rem; } /* Screen-vision demo renders its own framed display, so it just fills the column (no double frame, and NOT the old oversized 1000px band). */ .screen-frame { width: 100%; } /* Assistant demo — same white card + real app pill as the other sections, so this section finally reads as the same product (was a bespoke dark bar). The piece paints its own header, thread and pill; the card just frames it and matches the dictation card's height so the two split cards rhyme. */ .demo-card--assistant { align-items: stretch; } .demo-card--assistant .assistant-demo-mount { width: 100%; display: flex; align-items: center; } .demo-card--assistant .sf-assistant { width: 100%; } /* Spoken output is the final state of the assistant story, not another demo. */ .assistant-spoken { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.85rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--iris) 24%, transparent); } .assistant-spoken > i { margin-top: 0.15rem; color: var(--iris-ink); font-size: 1.35rem; } .assistant-spoken h3 { color: var(--ink); font-size: 1.05rem; line-height: 1.3; } .assistant-spoken p { margin-top: 0.45rem; color: var(--ink-2); font-size: 0.94rem; line-height: 1.65; } /* The assistant demo keeps the REAL app colours: the app's red live cue (--sf-live #e5484d) and teal accent, so the panel matches the product the user actually ships — we do not re-tint it to the section's indigo. */ /* The captured screen is the only cloud image on the page. */ .vision { overflow: hidden; padding: clamp(5rem, 8.5vw, 8rem) 0; background: radial-gradient(95% 85% at 88% 100%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 58%), radial-gradient(85% 75% at 6% 0%, color-mix(in srgb, var(--iris) 9%, transparent), transparent 55%), #eef3f1; border-bottom: 1px solid var(--line); } .vision .feature-kicker { color: var(--teal-ink); } .vision .sf-scope { --sf-accent: var(--teal-ink); } /* Copy and the live screen sit side by side and balance on the centre line, so the section reads as one composed unit rather than a narrow column stranded beside a void. Copy leads (left), the screen answers (right) — the mirror of the assistant section above, so the two alternate instead of repeating. The screen column runs slightly wider because the display is the payoff here. */ .vision-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5.5vw, 5rem); align-items: center; } .vision-copy { max-width: 34rem; } .vision-copy .section-title { font-size: clamp(2.15rem, 1.7rem + 1.7vw, 2.9rem); } .vision-copy .section-body { max-width: none; } /* The live display is the payoff of this section, so it earns real presence: a soft teal→iris halo blooms behind it, as if the screen were spilling light onto the warm page, and breathes slowly — a living "eye" that sees. The glow sits behind; the screen and its own drop shadow float above it. */ .vision-media { position: relative; width: 100%; margin: 0; } .vision-media::before { content: ""; position: absolute; z-index: 0; inset: -14% -11% -20%; border-radius: 50%; background: radial-gradient(58% 58% at 50% 46%, color-mix(in srgb, var(--teal) 46%, transparent), transparent 68%), radial-gradient(40% 42% at 72% 20%, color-mix(in srgb, var(--iris) 20%, transparent), transparent 72%); filter: blur(52px); opacity: 0.92; pointer-events: none; animation: visionGlow 7.5s var(--ease) infinite; } .vision-media .screen-frame { position: relative; z-index: 1; } .vision-media .sf-screen { border-radius: var(--radius-md); box-shadow: 0 34px 70px -30px rgba(10, 125, 116, 0.4), 0 26px 64px -30px rgba(22, 16, 12, 0.55), var(--sf-inner-shadow); } @keyframes visionGlow { 0%, 100% { opacity: 0.72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .vision-media::before { animation: none; } } /* Memory and profiles share one workspace and switch in place when JS is on. */ .personalize { padding: clamp(5rem, 9vw, 8rem) 0; background: radial-gradient(85% 72% at 92% 6%, color-mix(in srgb, var(--iris) 12%, transparent), transparent 55%), radial-gradient(85% 75% at 4% 98%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 58%), var(--bg); } .personalize-head { max-width: 50rem; } .personalize-head .section-body { max-width: 60ch; } .personalize-workspace { margin-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 10px 28px -20px rgba(12, 44, 40, 0.32); } .personalize-tabs { display: none; align-items: center; gap: 0.25rem; padding: 0.55rem; border-bottom: 1px solid var(--line); background: var(--bg-2); } .personalize-workspace.is-enhanced .personalize-tabs { display: flex; } .personalize-tab { min-height: 44px; padding: 0.65rem 1rem; border: 0; border-radius: 9px; color: var(--ink-2); background: transparent; font-weight: 700; transition: color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease); } .personalize-tab:hover { color: var(--ink); } .personalize-tab.is-active { color: var(--teal-deep); background: var(--surface); box-shadow: 0 1px 4px rgba(12, 44, 40, 0.08); } .personalize-workspace.is-enhanced .personalize-panel:not(.is-active) { display: none; } .personalize-panel { min-height: 330px; display: grid; grid-template-columns: minmax(16rem, 0.78fr) minmax(20rem, 1.22fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(2rem, 5vw, 4rem); } .personalize-panel + .personalize-panel { border-top: 1px solid var(--line); } .personalize-copy { max-width: 33rem; } .personalize-panel .card-title { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.3rem); } .personalize-panel .card-body { max-width: 48ch; line-height: 1.7; } .personalize-panel .card-demo { margin-top: 0; min-height: 210px; justify-content: center; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 12px; background: var(--teal-wash-2); } /* Animated chat scenes used by the personalization workspace. */ .card-demo { margin-top: auto; width: 100%; /* Breathing room above the chat, plus a constant reserved height so streaming text / persona swaps never resize the card (which would push the whole section). Reserve = top padding + the tallest state (2-line replies); wide desktop stays 1-line so it reserves less. */ padding-top: 1.5rem; min-height: 178px; display: flex; flex-direction: column; justify-content: flex-start; } @media (min-width: 1100px) { .card-demo { min-height: 154px; } } .mini-demo { font-family: var(--font-sans); } .mini-thread { display: flex; flex-direction: column; gap: 0.7rem; } .mini-msg { max-width: 93%; padding: 0.58rem 0.9rem; font-size: 0.92rem; line-height: 1.55; font-weight: 500; border-radius: 15px; opacity: 0; transform: translateY(7px); transition: opacity 0.32s var(--ease), transform 0.36s var(--ease); } .mini-msg.is-on { opacity: 1; transform: none; } .mini-msg--user { align-self: flex-end; border-radius: 15px 15px 5px 15px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); } .mini-msg--bot { align-self: flex-start; border-radius: 15px 15px 15px 5px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); } /* streaming caret while a reply is being produced */ .mini-msg.is-live .mini-txt::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; border-radius: 1px; background: var(--teal-ink); animation: mini-caret 1.06s steps(1) infinite; } @keyframes mini-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Memory: recalled spans light up; a small tag names the source */ .mini-hi { background: color-mix(in srgb, var(--teal) 22%, transparent); color: var(--teal-deep); border-radius: 4px; padding: 0 0.15em; font-weight: 700; } .mini-memtag { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; font-size: 0.76rem; font-weight: 600; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .mini-memtag.is-on { opacity: 1; transform: none; } .mini-memtag svg { width: 12px; height: 12px; color: var(--teal-ink); } /* Personas: a named badge per voice, each with its own accent dot */ .mini-badge { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); } .mini-badge-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--teal-ink); } .mini-msg.p0 .mini-badge-dot { background: #0a7d74; } .mini-msg.p1 .mini-badge-dot { background: #6366f1; } .mini-msg.p2 .mini-badge-dot { background: #8b5cf6; } @media (prefers-reduced-motion: reduce) { .mini-msg { opacity: 1 !important; transform: none !important; transition: none !important; } .mini-memtag { opacity: 1 !important; transform: none !important; } .mini-msg.is-live .mini-txt::after { animation: none !important; } } .card-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; } .card-body { margin-top: 0.75rem; color: var(--ink-2); font-size: 1.02rem; } /* ---------- Comparison ---------- */ .compare { padding: clamp(5.5rem, 10vw, 8.5rem) 0; background: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 60%), radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--iris) 10%, transparent), transparent 55%), var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .compare-head { max-width: 54rem; margin-bottom: clamp(2.75rem, 6vw, 4.75rem); } .compare-head .section-body { max-width: 62ch; } .compare-board { display: grid; grid-template-columns: minmax(21rem, 1.05fr) minmax(24rem, 0.95fr); overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); } .compare-home { position: relative; overflow: hidden; padding: clamp(2.25rem, 4vw, 3.25rem); /* Deep jewel-teal — clearly on-brand and noticeably lighter than the old near-black espresso, so it belongs to the cool/teal story instead of fighting it. A brighter teal glow (::before) gives it dimension. */ background: linear-gradient(158deg, #0f5f57 0%, #0b4a44 52%, #073834 100%); color: #ffffff; } .compare-home::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Teal glow for cool light and dimension on the espresso card — not grain. */ background: radial-gradient(115% 90% at 14% -12%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 52%); } .compare-home > * { position: relative; z-index: 1; } .compare-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; flex-wrap: wrap; } .compare-brand img { flex: 0 0 auto; } /* "Open source" badge — the counterpoint to the competitors' muted "Closed source". A bright, satisfying mint pill with dark text and a soft glow so it reads as a proud "good guys" badge that pops off the deep-teal card, instead of a faint outline that melts into it. */ .compare-tag { display: inline-flex; align-items: center; gap: 0.34rem; padding: 0.2rem 0.6rem 0.2rem 0.52rem; border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #b6f2e2; background: rgba(108, 231, 210, 0.13); border: 1px solid rgba(108, 231, 210, 0.32); } .compare-tag i { font-size: 1rem; line-height: 1; color: #5fe7ca; } .compare-price { margin-top: clamp(2rem, 5vw, 3.5rem); font-family: var(--font-serif); font-size: clamp(4rem, 7vw, 6.5rem); line-height: 0.9; letter-spacing: -0.025em; } .compare-price-note { margin-top: 0.7rem; color: #c3e2db; font-weight: 700; } .compare-advantages { display: grid; gap: 1.15rem; margin-top: 2.5rem; padding: 0; list-style: none; } .compare-advantages li { display: flex; align-items: flex-start; gap: 0.7rem; color: #d2e8e2; line-height: 1.55; } .compare-advantages i { margin-top: 0.28rem; color: #6ce7d2; } .compare-advantages strong { color: #ffffff; } .competitor-list { display: flex; flex-direction: column; } .competitor-row { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); } .competitor-row:not(:last-child) { border-bottom: 1px solid var(--line); } .competitor-row h3 { color: var(--ink); font-size: 1.1rem; line-height: 1.2; } .competitor-row p { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; } /* "Closed source" badge — pairs with the paid price to make the contrast with SpeakoFlow (open + free) explicit. */ .competitor-tag { display: inline-block; margin-right: 0.5rem; padding: 0.04rem 0.45rem; border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line-2); vertical-align: 0.08em; } .competitor-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; } .competitor-price strong { color: var(--ink-2); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; } .competitor-price span { color: var(--muted); font-size: 0.78rem; } .competitor-row > a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--teal-ink); border: 1px solid var(--line-2); transition: color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); } .competitor-row > a:hover { color: var(--teal-deep); border-color: var(--teal-ink); transform: translateY(-2px); } .compare-foot { color: var(--muted); font-size: 0.82rem; margin-top: 1.2rem; } /* ---------- Privacy ---------- */ .privacy { padding: clamp(5.5rem, 10vw, 8.5rem) 0; overflow: hidden; background: radial-gradient(92% 80% at 90% 6%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 55%), radial-gradient(70% 62% at 5% 100%, color-mix(in srgb, var(--iris) 9%, transparent), transparent 55%), var(--surface); border-top: 1px solid rgba(10, 125, 116, 0.1); border-bottom: 1px solid rgba(10, 125, 116, 0.12); } .privacy-head { max-width: 58rem; } .privacy-head .section-title { font-size: clamp(2.7rem, 2rem + 2.5vw, 4.15rem); } .privacy-head .section-body { max-width: 60ch; } .privacy-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(3.5rem, 7vw, 5.5rem); } .privacy-principles article { padding-top: 1.4rem; border-top: 1px solid var(--line-2); } .privacy-principles i { color: var(--teal-ink); font-size: 1.35rem; } .privacy-principles h3 { margin-top: 1.25rem; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.35rem, 1.1rem + 0.65vw, 1.75rem); font-weight: 500; line-height: 1.2; } .privacy-principles p { margin-top: 0.85rem; color: var(--ink-2); line-height: 1.7; } .privacy-quiet-proof { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 3rem); margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 0.92rem; font-weight: 700; } .privacy-quiet-proof a { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; color: var(--teal-ink); } /* ---------- FAQ ---------- */ .faq { padding: var(--section-y) 0; } .faq-head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); } .faq-head .section-body a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0.25rem; background: none; border: none; text-align: left; font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; transition: color 0.2s var(--ease); } .faq-q:hover { color: var(--teal-ink); } .faq-toggle { position: relative; width: 20px; height: 20px; flex-shrink: 0; } .faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--teal-ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .faq-toggle::before { top: 9px; left: 0; width: 20px; height: 2px; } .faq-toggle::after { top: 0; left: 9px; width: 2px; height: 20px; } .faq-q[aria-expanded="true"] .faq-toggle::after { transform: rotate(90deg); opacity: 0; } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); } .faq-a p { padding: 0 0.25rem 1.6rem; color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; } /* ---------- Final CTA ---------- */ .final-cta { padding: clamp(6rem, 11vw, 9rem) 0; text-align: center; overflow: hidden; /* Deep jewel-teal band — on-brand and lighter than the old espresso, part of the cool/teal story. Teal + mint glows in .final-wash add dimension. */ background: linear-gradient(158deg, #105f57 0%, #0b4841 46%, #063633 100%); } .final-wash { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Teal corner glows over the espresso base: a clean teal light source top-left, a softer mint on the right, and a deep shadow settling bottom-right for dimension. No grain. */ background: radial-gradient(60% 92% at 6% -6%, color-mix(in srgb, var(--teal) 44%, transparent), transparent 60%), radial-gradient(50% 78% at 92% 4%, color-mix(in srgb, #5eead4 26%, transparent), transparent 58%), radial-gradient(100% 120% at 100% 112%, rgba(3, 26, 24, 0.5), transparent 60%); } .final-inner { position: relative; z-index: 1; } .final-title { font-family: var(--font-serif); font-weight: 500; color: #ffffff; font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.4rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; } .final-sub { margin: 1.25rem auto 0; max-width: 42ch; color: #cfe7e1; font-size: 1.15rem; } .final-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .final-cta .btn-primary { background: #ffffff; color: var(--teal-deep); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.45); } .final-cta .btn-primary:hover { background: #edf6f3; color: var(--teal-deep); } .final-cta .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.42); } .final-cta .btn-ghost:hover { color: #ffffff; border-color: #ffffff; } .final-note { margin-top: 1.5rem; color: #a7c7c0; font-size: 0.92rem; } .final-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .final-note a { color: #ffffff; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; } .footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); } .footer-brand img { height: 30px; width: auto; } .footer-tagline { margin-top: 0.9rem; color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; } .footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; } .footer-links a { color: var(--ink-2); font-weight: 600; font-size: 0.95rem; transition: color 0.2s var(--ease); } .footer-links a:hover { color: var(--teal-ink); } .footer-bottom { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; } .footer-credit { color: var(--ink-2); font-size: 0.92rem; } .footer-credit a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .footer-fine { color: var(--muted); font-size: 0.85rem; } /* Content is visible by default. JS opts into reveal motion only after the observer is ready, so blocked or delayed scripts never blank the page. */ .reveal { opacity: 1; transform: none; transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo); } .reveal-group > * { opacity: 1; transform: none; transition: opacity 0.65s var(--ease-out-expo), transform 0.65s var(--ease-out-expo); } .motion-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); } .motion-ready .reveal.is-visible { opacity: 1; transform: none; } .motion-ready .reveal-group:not(.is-visible) > * { opacity: 0; transform: translateY(22px); } .motion-ready .reveal-group.is-visible > * { opacity: 1; transform: none; } .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; } .reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; } .reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; } /* ===================================================================== Embedded SpeakoFlow UI demo (pill + waveform) · site integration Make the extracted demo's surface tokens follow the site theme, and hide the app-only "cancel" affordance. ===================================================================== */ /* The dark voice pills all use the app's real champagne-to-ivory waveform (source of truth: speakoflow-feature-reference.html). Teal stays the site's own accent everywhere else (kickers, buttons, caret, highlights). */ .sf-scope.sf-on-light, .sf-scope.sf-on-dark { --sf-wave-bar: linear-gradient(to top, #b0885a 0%, #e3cda3 50%, #fbf3e2 100%); --sf-doc-ink: var(--ink); /* Keep the embedded demo's accent on the site's ember brand. */ --sf-accent: var(--teal-ink); } :root[data-theme="dark"] .sf-scope.sf-on-light, :root[data-theme="dark"] .sf-scope.sf-on-dark { --sf-wave-bar: linear-gradient(to top, #b0885a 0%, #e3cda3 50%, #fbf3e2 100%); } .sf-pill-cancel { display: none !important; } .sf-scope .sf-state-label { color: var(--muted); } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); } .feature--assistant .feature-media { order: 0; } /* Cleanup puts its demo first in the DOM for the desktop media-left layout. When stacked on tablet/phone, lift the copy above the demo so the "Speak messy. Paste polished." heading leads the section like every other one — the demo should never appear before its own heading. */ .feature--cleanup .feature-copy { order: -1; } .feature-copy { max-width: none; } .feature-media > * { max-width: 560px; } .vision-inner { grid-template-columns: 1fr; gap: clamp(2.25rem, 6vw, 3rem); } .vision-copy { max-width: 46rem; } .vision-copy .section-title { font-size: clamp(2.2rem, 1.7rem + 2vw, 2.9rem); } .vision-media { width: 100%; max-width: 620px; justify-self: center; } .personalize-panel { grid-template-columns: 1fr; min-height: 0; } .personalize-copy { max-width: 42rem; } .compare-board { grid-template-columns: 1fr; } /* Trust strip: four narrow columns get cramped on tablets, so drop to a 2x2 grid from here down (the <=520 block re-tunes borders below that). */ .trust-row { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; } .trust-row li { padding-block: 0.5rem; } .trust-row li:nth-child(2) { border-right: none; } .trust-row li:last-child { border-right: none; } } @media (max-width: 820px) { .nav-links, .nav-github span { display: none; } .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.5rem; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.85rem 1rem; font-size: 1.05rem; } .nav-links a::after { display: none; } } @media (max-width: 760px) { .hero { min-height: auto; } .hero-inner { min-height: auto; padding-top: clamp(6rem, 18vw, 7.5rem); padding-bottom: clamp(3rem, 8vw, 4rem); gap: clamp(2.25rem, 7vw, 3rem); } .hero-main { width: 100%; max-width: 37rem; } .hero-title { font-size: clamp(2.75rem, 11vw, 4rem); } .hero-slogan { font-size: clamp(1.25rem, 5.4vw, 1.6rem); } .hero-sub { max-width: 46ch; } .vision-copy .section-title { font-size: clamp(2.5rem, 10vw, 3.4rem); } .vision-media { width: 100%; } .personalize-tabs { overflow-x: auto; } .personalize-tab { flex: 1 0 auto; } /* Three privacy cards get pinched below ~760px; stack them so each keeps a comfortable measure instead of squeezing to ~150px columns. */ .privacy-principles { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 600px) { .privacy-quiet-proof { flex-wrap: wrap; } .privacy-quiet-proof a { width: 100%; margin-left: 0; } } @media (max-width: 520px) { body { font-size: 1rem; } .site-header { padding-top: max(0.45rem, env(safe-area-inset-top)); } .nav { gap: 0.5rem; height: 56px; } .nav-shell { padding-inline: 0.7rem; } .nav-logo { height: 25px; } .nav-actions { gap: 0.5rem; } .nav-github { display: none; } .nav .btn-sm { padding: 0.58rem 0.85rem; } .nav-toggle { width: 42px; height: 42px; } .hero { min-height: auto; } .hero-inner { min-height: auto; padding-inline: 1.25rem; padding-top: 5.5rem; padding-bottom: 3rem; gap: 2.25rem; } .hero-title { font-size: clamp(2rem, 9.5vw, 2.75rem); } .hero-title span { white-space: normal; } .hero-slogan { font-size: 1.08rem; margin-top: 0.8rem; } .hero-sub { margin-top: 0.9rem; font-size: 1rem; } /* Keep the CTA clearly narrower than the headline so the heading stays the widest, dominant element and the buttons read as a calm accent beneath it, rather than a heavy full-width slab that competes with the h1. */ .hero-cta { margin-top: 1.5rem; width: 100%; max-width: 17.5rem; margin-inline: auto; gap: 0.7rem; } .hero-cta .btn { width: 100%; } /* Lighter, still-tappable (>=44px) size so it doesn't dominate the fold. */ .hero-cta .btn-lg { padding: 0.78rem 1.2rem; font-size: 0.95rem; } .trust { padding-block: 0.85rem; } .trust-row { grid-template-columns: 1fr 1fr; gap: 0; } .trust-row li { padding: 0.7rem 0.5rem; } .trust-row li:nth-child(odd) { border-right: 1px solid var(--line); } .trust-row li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .trust-key { font-size: 0.98rem; } /* Phones: keep just the four labels — the sub-notes are extra weight here. */ .trust-note { display: none; } .feature, .vision, .personalize, .compare, .privacy, .faq { padding-block: 3.25rem; } .demo-card { min-height: 0; padding: 1.1rem; border-radius: var(--radius-md); } /* Demos carry fixed-height surfaces tuned for the wide two-column desktop layout; on phones the text wraps to fewer lines, so those fixed heights leave dead space. Trim the ones that hug short content (the transcribe writing surface and the cleanup body) — the flow/translate result cards are left alone because their longest example needs the room. */ .demo-card--transcribe .sf-doc { height: 156px; } .sf-scope .sf-transcribe-surface { min-height: 200px; } .sf-scope .sf-cleanup-body { min-height: 160px; padding: 16px 16px 18px; } .pill-showcase { min-height: 180px; } .personalize-panel { padding: 1.5rem; gap: 1.5rem; } .personalize-panel .card-demo { padding: 0.75rem; } /* On phones this becomes a quick comparison, not a shrunken desktop card: identity and price share the first row, the three benefits reduce to their scannable claims, and secondary competitor details yield to price. */ .compare-board { border-radius: 16px; box-shadow: var(--shadow-md); } .compare-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem 1rem; padding: 1.25rem; } .compare-brand { gap: 0.45rem; font-size: 0.96rem; } .compare-brand img { width: 25px; height: 25px; } .compare-tag { padding: 0.16rem 0.48rem 0.16rem 0.42rem; font-size: 0.58rem; } .compare-tag i { font-size: 0.85rem; } .compare-price { grid-column: 2; grid-row: 1; margin: 0; font-size: 3.4rem; line-height: 0.9; } .compare-price-note { grid-column: 1 / -1; margin-top: 0.65rem; font-size: 0.9rem; } .compare-advantages { grid-column: 1 / -1; gap: 0.6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } .compare-advantages li { align-items: center; gap: 0.55rem; line-height: 1.35; } .compare-advantages i { margin-top: 0; font-size: 0.95rem; } .compare-advantages strong { font-size: 0.9rem; } .compare-advantage-detail { display: none; } .competitor-row { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; min-height: 88px; padding: 1rem 3.8rem 1rem 1.15rem; } .competitor-row h3 { font-size: 1rem; } .competitor-row p { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.4rem; margin-top: 0.32rem; font-size: 0.76rem; line-height: 1.35; } .competitor-tag { margin-right: 0; } .competitor-kind { display: none; } .competitor-price { align-self: center; } .competitor-price strong { font-size: 1rem; } .competitor-price span { font-size: 0.68rem; } .competitor-row > a { position: absolute; top: 50%; right: 0.85rem; width: 40px; height: 40px; transform: translateY(-50%); } .competitor-row > a:hover { transform: translateY(-50%); } .compare-foot { margin-top: 0.9rem; font-size: 0.76rem; line-height: 1.45; } .final-actions { flex-direction: column; } .final-actions .btn { width: 100%; } .footer-inner { flex-direction: column; } .stat-row { gap: 1.5rem; } } @media (max-height: 650px) and (min-width: 761px) { .hero, .hero-inner { min-height: 540px; } .hero-inner { align-items: center; padding-top: 5.5rem; padding-bottom: 2.5rem; gap: 1.75rem; } .hero-title { font-size: clamp(2.6rem, 5vw, 3.15rem); } .hero-slogan { font-size: 1.25rem; margin-top: 0.75rem; } .hero-sub { margin-top: 0.8rem; font-size: 1rem; line-height: 1.5; } .hero-cta { margin-top: 1.25rem; } .hero-pill-caption { display: none; } } @media (hover: none) { .btn-primary:hover, .btn-ghost:hover { transform: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; } .reveal-group.is-visible > * { transition-delay: 0ms !important; } .btn, .nav-links a::after, .personalize-tab { transition: none !important; } .faq-a { transition: none !important; } } /* ===================================================================== New feature sections · Generate with Flow, AI cleanup, screen-aware Built on the existing .feature / .feature-grid / .demo-card system so they read as the same site, just with the new demos embedded. ===================================================================== */ /* Flow section — a soft teal wash to lift it above the dictation band it follows. It now shares the same two-column feature-grid as every other feature so it reads as part of the same rhythm instead of an empty, centered band. The demo sits on the LEFT to alternate with the dictation section above it (copy-left) and the translate section below it. */ .feature--flow { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--teal-wash) 60%, var(--bg)) 0%, var(--bg) 74%); border-top: 1px solid color-mix(in srgb, var(--teal) 14%, transparent); border-bottom: 1px solid var(--line); } /* Give the two Flow cards a real frame so they read as one deliberate demo, not two cards floating loose on the wash. A soft teal panel lifts the dark recording card and the light result card and ties them together. */ .feature--flow .feature-media > * { max-width: 600px; } .flow-stage { width: 100%; padding: clamp(1.25rem, 0.9rem + 1.8vw, 2rem); border-radius: var(--radius-lg); background: radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--teal) 12%, var(--surface)) 0%, var(--surface) 72%); border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent); box-shadow: var(--shadow-lg); } /* Flip the stack so the finished result sits ON TOP and the recording card sits below it — the outcome leads, the source follows. */ .feature--flow .sf-flow { flex-direction: column-reverse; } /* Lock the result panel to a fixed height. Cycling from a long multi-paragraph email to a one-line answer used to grow then shrink the card (it only had a 184px min-height floor, which the email exceeds at narrower two-column widths), resizing the whole demo. A fixed height keeps every example the same size; the card's overflow is already hidden, so the tallest one is contained rather than pushing the layout. */ .feature--flow .sf-flow-text { height: 212px; min-height: 0; } /* Only pull the demo to the left on the two-column desktop layout. Below the grid's 900px breakpoint the section stacks, and the heading must lead — scoping this to min-width keeps the demo from jumping above the title on phones. */ @media (min-width: 901px) { .feature--flow .feature-media { order: -1; } } /* The wake phrase gets a little magic: a living teal gradient that gently shimmers, so "Hey Flow" reads as the special, speakable part of the title. */ .flow-wake { background: linear-gradient(100deg, #0a6f66 0%, #16b39c 38%, #2ee0c6 62%, #0a6f66 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: flow-wake-shimmer 7s ease-in-out infinite; } @keyframes flow-wake-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Same magic on the dark recording card: a brighter teal gradient (the card is near-black, so the phrase needs light, luminous stops) that shimmers in step with the title. Overrides the demo's flat mint wake colour. */ .feature--flow .sf-flow-wake { background: linear-gradient(100deg, #10e6c1 0%, #3ef5d4 38%, #79ffdb 60%, #10e6c1 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Vivid, luminous teal so it clearly separates from the white command text beside it, plus a stronger glow to make it lift off the dark card. */ filter: drop-shadow(0 0 12px rgba(45, 240, 205, 0.6)); animation: flow-wake-shimmer 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .flow-wake, .feature--flow .sf-flow-wake { animation: none; } } /* The copy sits next to a tall demo; centering it left it floating low, so pin it to the top and nudge it down just enough to line up with the demo. */ .feature--flow .feature-copy { align-self: start; padding-top: clamp(0.5rem, 2vw, 1.75rem); } .feature--cleanup { background: radial-gradient(115% 85% at 10% 4%, color-mix(in srgb, var(--iris) 9%, transparent), transparent 54%), var(--surface); } /* Small print under a feature (e.g. the "Hey Flow is not a wake word" note). */ .feature-note { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 40rem; color: var(--muted); font-size: 0.86rem; line-height: 1.6; } /* Interaction cue beside the cleanup demo — invites picking a tone. */ .cleanup-cue { display: flex; align-items: center; gap: 0.65rem; margin-top: 1.75rem; padding: 0.8rem 1.05rem; max-width: 35rem; border-radius: 12px; border: 1px solid var(--line); background: var(--teal-wash-2); color: var(--ink-2); font-size: 0.92rem; font-weight: 600; line-height: 1.5; } .cleanup-cue i { flex-shrink: 0; color: var(--teal-ink); font-size: 1.25rem; } /* Screen-aware: the look / decide / skip choice, as three tactile mode rows with soft accent chips. Colour carries the meaning — teal for "look" (active and grounded), iris for "let it decide" (the intelligence accent used by the assistant), muted grey for "skip" (off, nothing captured) — so the three ways it can see read at a glance instead of as a documentation list. */ .vision-choice { list-style: none; margin: 2.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; max-width: 40rem; } .vision-choice li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: 0.95rem; padding: 0.8rem 0.9rem; border-radius: 14px; border: 1px solid transparent; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; transition: background 220ms var(--ease), border-color 220ms var(--ease); } .vision-choice li:hover { background: color-mix(in srgb, var(--teal-wash) 60%, transparent); border-color: color-mix(in srgb, var(--teal) 18%, transparent); } .vision-choice i { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin: 0; border-radius: 12px; background: var(--teal-wash); color: var(--teal-ink); font-size: 1.25rem; } .vision-choice li:nth-child(2) i { background: var(--iris-wash); color: var(--iris-ink); } .vision-choice li:nth-child(2):hover { background: color-mix(in srgb, var(--iris-wash) 70%, transparent); border-color: color-mix(in srgb, var(--iris) 18%, transparent); } .vision-choice li:nth-child(3) i { background: var(--bg-2); color: var(--muted); } .vision-choice li:nth-child(3):hover { background: color-mix(in srgb, var(--bg-2) 70%, transparent); border-color: var(--line-2); } .vision-choice strong { color: var(--ink); font-weight: 700; } /* --- Demo sizing / integration --------------------------------------- */ .transcribe-demo-mount, .flow-demo-mount, .cleanup-demo-mount { width: 100%; } /* Transcription/Live demo: let the writing surface size itself rather than inheriting the fixed-height dictation doc. */ /* Translate — compact left-copy / right-demo, same system as dictation. */ .feature--translate .feature-kicker { color: var(--teal-ink); } .feature-fineprint { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.85rem; color: var(--muted); } .feature-fineprint i { color: var(--teal-ink); font-size: 1.05rem; flex: none; } .demo-card--translate { align-items: stretch; } .demo-card--translate .translate-demo-mount { width: 100%; display: flex; } .demo-card--translate .sf-tr { width: 100%; } .demo-card--transcribe { align-items: stretch; } .demo-card--transcribe .sf-doc { height: auto; overflow: visible; } /* Flow + cleanup: the mini app fills the card so the floating overlay docks to its bottom edge, matching how the real overlay sits over your app. */ .demo-card--stage { align-items: stretch; padding: clamp(1.1rem, 0.8rem + 1.4vw, 1.6rem); } .demo-card--stage .flow-demo-mount, .demo-card--stage .cleanup-demo-mount { display: flex; } .demo-card--cleanup { min-height: 344px; } .sf-scope .sf-stagecard { flex: 1; } .sf-scope .sf-stagecard .sf-miniapp { display: flex; flex-direction: column; flex: 1 1 auto; } .sf-scope .sf-stagecard .sf-miniapp-body { flex: 1 1 auto; } @media (max-width: 600px) { .vision-choice li { font-size: 0.92rem; } .demo-card--stage { padding: 0.9rem; } .tone-legend span { font-size: 0.75rem; } } /* ---------- First-fold composition ---------- Treat the hero as two independent beats: the message holds the visual centre, while the listening pill closes the fold near the bottom edge. Absolute placement is intentionally desktop-only; smaller screens return to normal flow so content can grow without clipping. */ .hero, .hero-inner { min-height: 100vh; min-height: 100svh; } .hero-inner { display: block; padding-top: 0; padding-bottom: 0; } .hero-main { position: absolute; top: 52%; inset-inline: 0; width: min(calc(100% - clamp(2.5rem, 8vw, 5rem)), 47rem); margin-inline: auto; transform: translateY(-50%); } .hero-slogan { margin-top: clamp(1.25rem, 2vh, 1.6rem); } .hero-sub { margin-top: clamp(1.1rem, 1.8vh, 1.35rem); } .hero-cta { margin-top: clamp(2rem, 3.5vh, 2.5rem); } .hero-pill { position: absolute; inset-inline: 0; bottom: clamp(0.75rem, 2vh, 1.5rem); width: max-content; max-width: 100%; margin-inline: auto; } @media (max-width: 760px) { /* Phones: center the message (headline, slogan, CTAs) in the screen, and pin the listening pill near the bottom edge — the same composition as desktop. The pill is taken OUT of flow (absolute) so it stays at the bottom and can never pull up into the message; the message then centers on its own. The large padding-bottom reserves the bottom band for the pill so the centred message never crowds it. min-height lets the hero grow, not clip, if the content is ever taller than the screen. */ .hero-inner { display: flex; flex-direction: column; justify-content: center; padding-top: clamp(5rem, 10vh, 6rem); padding-bottom: clamp(6rem, 15vh, 8rem); gap: 0; } .hero-main { position: relative; top: auto; inset-inline: auto; width: 100%; margin-inline: 0; margin-top: 0; transform: none; } .hero-pill { position: absolute; inset-inline: 0; top: auto; bottom: clamp(1.25rem, 4vh, 2.25rem); width: max-content; max-width: 100%; margin-inline: auto; margin-top: 0; padding-top: 0; } } @media (max-width: 520px) { .hero-inner { padding-inline: 1.25rem; padding-top: clamp(4.5rem, 9vh, 5.5rem); padding-bottom: clamp(5.5rem, 14vh, 7rem); } } @media (max-height: 650px) and (min-width: 761px) { .hero-main { top: 50%; } .hero-slogan { margin-top: 0.8rem; } .hero-sub { margin-top: 0.85rem; } .hero-cta { margin-top: 1.25rem; } .hero-pill { bottom: 0.75rem; } } /* ===================================================================== Touch targets · comfortable hit areas on touch devices Coarse pointers (phones, tablets, touch laptops) get >=44px targets per WCAG 2.5.5 / mobile usability, without changing the crafted density on precise (mouse) pointers. Only affects controls the audit measured under ~40px tall: the GitHub link's icon-only state, the demo toggle + tone chips, the brand logo, small nav button, and footer links. ===================================================================== */ @media (pointer: coarse) { .nav-brand { min-height: 44px; } .nav-github { min-width: 44px; min-height: 44px; justify-content: center; } .nav .btn-sm { min-height: 44px; } .footer-links a, .privacy-quiet-proof a { display: inline-flex; align-items: center; min-height: 44px; } .sf-scope .sf-mode-btn { min-height: 44px; } .sf-scope .sf-tone-chip { display: inline-flex; align-items: center; min-height: 44px; } } /* ===================================================================== Large & ultrawide displays Below 1140px the layout is fully fluid; above it the page was a fixed 1140px island with growing empty margins. Widen the shell in two calm steps so big monitors get more presence while body copy keeps its readable measure (.section-body stays capped at 46rem). The feature media caps near the column width, so the split stays balanced, not gappy. ===================================================================== */ @media (min-width: 1600px) { :root { --maxw: 1240px; } } @media (min-width: 1920px) { :root { --maxw: 1320px; } } /* ===================================================================== AI cleanup demo · mobile proportions Unlike the dictation / Flow / assistant cards, the cleanup card has no docked pill to fill its lower half ("the fix itself is the story"), and it reserves height for the long "messy" take. On phones that left the polished result floating in a mostly-empty window. Trim the reserved height, center the message so short results read as balanced (not top-loaded with a void), and ease the type down a touch so the long take still fits with no layout jump between the messy and cleaned states. ===================================================================== */ @media (max-width: 600px) { .demo-card--cleanup { min-height: 0; } .sf-scope .sf-cleanup-body { min-height: 128px; padding: 16px 16px 18px; align-items: center; } .sf-scope .sf-cleanup-line { font-size: 0.96rem; line-height: 1.58; } }