/* ==========================================================================
BriefTime — Marketing Site Styles
Vanilla CSS · Light + Dark · Mobile-first
========================================================================== */
/* ---------- 1. Design tokens ---------- */
:root {
/* Palette */
--white: #FFFFFF;
--slate-50: #F8FAFC;
--slate-100: #F1F5F9;
--slate-200: #E2E8F0;
--slate-300: #CBD5E1;
--slate-400: #94A3B8;
--slate-500: #64748B;
--slate-700: #334155;
--navy: #0F172A;
--navy-deep: #050711;
--card-surface: #111827;
/* Brand */
--teal: #24AE9B;
--teal-light: #5DD0BD;
--teal-dark: #177E72;
--sand-brown: #876D45;
--sand-old: #C4A87A;
/* Type */
--font-display: "Sora", system-ui, -apple-system, sans-serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
/* Geometry */
--radius-card: 16px; /* fixed card corners */
--radius-pill: 9999px;
--max-width: 1200px;
--copy-width: 640px;
/* Type, spacing, and element sizes are NOT tokens — they are fixed values set
directly in the rules below and stepped at three breakpoints (1024 / 768 /
480). See the Responsive section for the per-breakpoint overrides. */
}
/* ---------- 2. Themes ---------- */
:root,
[data-theme="light"] {
--bg-page: var(--slate-100);
--bg-nav: var(--white);
--bg-footer: var(--white);
--bg-card: var(--white);
--border-card: var(--slate-200);
--text-headline: var(--navy);
--text-body: var(--slate-500);
--text-emphasis: var(--navy);
--text-accent: var(--teal-dark);
--eyebrow-warm: var(--sand-brown);
--eyebrow-brand: var(--teal-dark);
--cta-bg: var(--teal);
--cta-text: var(--navy);
--icon-fill: var(--navy);
--icon-accent: var(--teal-dark);
--pill-warm-bg: rgba(135, 109, 69, 0.10);
--pill-warm-border: rgba(135, 109, 69, 0.40);
--pill-brand-bg: rgba(36, 174, 155, 0.10);
--pill-brand-border: rgba(36, 174, 155, 0.30);
--tile-bg: rgba(36, 174, 155, 0.10);
--shadow-elev:
0 12px 32px rgba(15, 23, 41, 0.06),
0 4px 8px rgba(15, 23, 41, 0.04);
color-scheme: light;
}
[data-theme="dark"] {
--bg-page: var(--navy-deep);
--bg-nav: var(--navy-deep);
--bg-footer: #0B1220;
--bg-card: var(--card-surface);
--border-card: rgba(51, 65, 85, 0.55);
--text-headline: var(--slate-50);
--text-body: var(--slate-300);
--text-emphasis: var(--slate-50);
--text-accent: var(--teal-light);
--eyebrow-warm: var(--sand-old);
--eyebrow-brand: var(--teal-light);
--cta-bg: var(--teal);
--cta-text: var(--navy);
--icon-fill: var(--slate-300);
--icon-accent: var(--teal-light);
--pill-warm-bg: rgba(196, 168, 122, 0.10);
--pill-warm-border: rgba(196, 168, 122, 0.40);
--pill-brand-bg: rgba(36, 174, 155, 0.14);
--pill-brand-border: rgba(36, 174, 155, 0.40);
--tile-bg: rgba(36, 174, 155, 0.16);
--shadow-elev: 0 8px 24px rgba(0, 0, 0, 0.25);
color-scheme: dark;
}
/* ==========================================================================
HOVER SYSTEM — applied consistently across all interactive elements
Easing: cubic-bezier(0.22, 1, 0.36, 1) (house curve, ease-out tail)
Duration: 200ms color / border / opacity
250ms transform / box-shadow
Pattern by element type:
- Primary CTA → lift -2px + teal-tinted shadow + brightness 1.05
- Ghost button → lift -1px + teal border + faint teal bg tint
- Store badge → lift -1px + shadow growth
- Card (clickable) → lift -3px + teal border tint + shadow growth (teal halo in dark)
- Card (static) → subtle border emphasis + faint shadow growth (no lift,
no teal — teal is reserved as the interaction signal)
- Nav link → teal color + underline slides in from left
- Footer link → teal color (no underline, less prominent context)
- Footer social → bg fills with faint teal + lift -2px
- FAQ item → border tints teal + summary color → teal-accent
- Theme toggle → bg faint teal + border teal + active scale 0.96
- Form input → focus border teal + 4px teal-15% ring
- Logo → opacity 0.85 (subtle, not the main interaction)
========================================================================== */
/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Contain off-canvas bleed (ambient glows/arcs, float chips, the closed drawer
panel) at the viewport. Must live on , not : the page scroll
container is , and overflow-x:clip does NOT propagate body→viewport, so
a clip on alone leaves a horizontal scrollbar. `clip` (not `hidden`)
keeps the sticky nav working — it doesn't create a scroll container. */
overflow-x: clip;
}
body {
margin: 0;
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip; /* secondary clip; the real viewport containment is on html (see above) */
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: var(--text-accent); text-decoration: none; }
/* Keyboard focus indicator — applied globally; buttons/pills override below
to swap outline for a shape-matching teal box-shadow ring. */
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
border-radius: 4px;
}
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-store:focus-visible,
.theme-toggle:focus-visible {
outline: none;
box-shadow:
var(--shadow-elev),
0 0 0 3px color-mix(in srgb, var(--teal) 35%, transparent);
}
/* Skip link */
.skip-link {
position: absolute; top: -100px; left: 16px; z-index: 100;
background: var(--navy); color: var(--white);
padding: 12px 20px; border-radius: 8px;
}
.skip-link:focus { top: 16px; }
/* ---------- 4. Typography utility classes ---------- */
.hero-big, .hero-sub, .section-headline {
font-family: var(--font-display);
color: var(--text-headline);
margin: 0;
}
/* Fixed type — desktop defaults; stepped at 1024 / 768 / 480 in the Responsive section. */
.hero-big { font-weight: 700; font-size: 80px; line-height: 88px; letter-spacing: -2.5px; }
.hero-sub { font-weight: 700; font-size: 64px; line-height: 72px; letter-spacing: -2.0px; }
.section-headline { font-weight: 600; font-size: 44px; line-height: 52px; letter-spacing: -1.2px; }
.body-text { font-size: 17px; line-height: 28px; color: var(--text-body); margin: 0; }
.body-sm { font-size: 14px; line-height: 22px; color: var(--text-body); margin: 0; }
.eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
line-height: 1.4;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0;
}
.eyebrow.warm { color: var(--eyebrow-warm); }
.eyebrow.brand { color: var(--eyebrow-brand); }
.text-emphasis { color: var(--text-emphasis); font-weight: 600; }
.text-warm { color: var(--eyebrow-warm); }
/* ---------- 5. Layout primitives ---------- */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: 24px; /* the ONE place horizontal gutters live (→ 20px @768, 16px @480) */
box-sizing: border-box;
}
.section { padding-top: 96px; padding-bottom: 96px; }
.section-tight { padding-top: 56px; padding-bottom: 56px; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 16px); }
.stack-center { align-items: center; text-align: center; }
.copy-narrow { max-width: var(--copy-width); margin-left: auto; margin-right: auto; }
/* Centered section header: eyebrow + headline + (optional) sub-body */
.section-head {
display: flex; flex-direction: column;
align-items: center; text-align: center;
gap: 16px;
margin-bottom: 32px;
}
/* ============== AMBIENT GLOWS (decorative, behind everything) ============== */
.ambient-host {
position: relative;
isolation: isolate;
/* No overflow:hidden — that clips intentional bleed elements (hero halo tail,
how-it-works float chips at right: -4%/-8%). Horizontal scroll is contained
globally via body { overflow-x: clip } instead. */
}
.ambient-host > :not(.ambient-glow):not(.ambient-arcs) {
position: relative;
z-index: 1; /* keep content above ambient layer */
}
.ambient-glow {
position: absolute;
pointer-events: none;
border-radius: 50%;
background: var(--teal);
filter: blur(80px);
opacity: 0.16; /* default light — overridden in dark below */
z-index: 0;
transform: translate3d(0, 0, 0); /* promote to own layer for perf */
}
[data-theme="dark"] .ambient-glow { opacity: 0.22; }
/* Composable variants */
.ambient-glow--soft { filter: blur(120px); } /* big, diffuse */
.ambient-glow--tight { filter: blur(40px); } /* tighter, more visible */
.ambient-glow--beam { border-radius: 200px; } /* elongated horizontal beam */
/* ============== HERO-SPECIFIC GLOW PLACEMENTS ============== */
/* Phone-area halo — sits in the right half of the hero, behind where the phone
visually anchors. right/top + translateY(-50%) gives reliable vertical
centering without depending on the visual column's own height. */
.hero-glow--phone {
width: 480px;
height: 720px;
right: -40px; /* slight bleed off the right edge for atmospheric feel */
top: 50%;
transform: translateY(-50%);
/* opacity inherits from .ambient-glow base + .ambient-glow--pulse animation */
}
/* Top-right corner ambient — extends off-canvas, very subtle */
.hero-glow--corner-tr {
width: 800px;
height: 800px;
right: -300px;
top: -300px;
opacity: 0.10; /* whisper, not glow */
}
[data-theme="dark"] .hero-glow--corner-tr { opacity: 0.12; }
/* Bottom-left ambient — even more subtle counter-weight */
.hero-glow--corner-bl {
width: 600px;
height: 600px;
left: -200px;
bottom: -200px;
opacity: 0.07;
}
[data-theme="dark"] .hero-glow--corner-bl { opacity: 0.08; }
/* ============== FINAL CTA GLOW PLACEMENT ============== */
/* Wide horizontal teal wash behind the Final CTA card */
.cta-glow--wash {
width: 1120px;
height: 360px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.16;
}
[data-theme="dark"] .cta-glow--wash { opacity: 0.20; }
/* ============== CONCENTRIC ARCS (Open / Play / Feel smarter section) ============== */
.ambient-arcs {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.ambient-arc {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border: 1px solid var(--teal);
border-radius: 50%;
opacity: 0.13;
}
[data-theme="dark"] .ambient-arc { opacity: 0.14; }
.ambient-arc--1 { width: 580px; height: 580px; }
.ambient-arc--2 { width: 760px; height: 760px; opacity: 0.10; }
.ambient-arc--3 { width: 940px; height: 940px; opacity: 0.08; }
.ambient-arc--4 { width: 1120px; height: 1120px; opacity: 0.06; }
[data-theme="dark"] .ambient-arc--1 { opacity: 0.12; }
[data-theme="dark"] .ambient-arc--2 { opacity: 0.10; }
[data-theme="dark"] .ambient-arc--3 { opacity: 0.08; }
[data-theme="dark"] .ambient-arc--4 { opacity: 0.06; }
/* ============== MOTION (ambient breath, not marketing flash) ============== */
/* Phone columns (.landing-hero__visual and .how-it-works__visual) stay static —
the phone mockups are the stable product anchors. Floating elements around
them (audio card, chips) carry the motion via card-drift below. */
/* Card drift — extremely subtle. The card should appear to gently breathe.
No horizontal sway, no rotation — those compete with the waveform bars.
The asymmetric stops (slow rise, brief float, slow fall) feel like breath
rather than a metronomic bob. */
@keyframes card-drift {
0%, 100% { transform: translate3d(0, 0, 0); }
45% { transform: translate3d(0, -4px, 0); }
65% { transform: translate3d(0, -3px, 0); }
}
/* Mobile drift — smaller amplitude (±2px) so the card never leaves the phone
silhouette, and every frame preserves translateX(-50%) so the horizontal
centering survives the animation (combining a centering transform with an
animated transform requires repeating the centering in each keyframe). */
@keyframes card-drift-mobile {
0%, 100% { transform: translateY(0); }
45% { transform: translateY(-2px); }
65% { transform: translateY(-1px); }
}
/* Halo pulse — opacity only (no scale, avoids transform conflict with centering translate) */
.ambient-glow--pulse {
animation: glow-pulse 8s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { opacity: var(--pulse-min, 0.18); }
50% { opacity: var(--pulse-max, 0.28); }
}
[data-theme="light"] .ambient-glow--pulse { --pulse-min: 0.12; --pulse-max: 0.20; }
[data-theme="dark"] .ambient-glow--pulse { --pulse-min: 0.18; --pulse-max: 0.28; }
/* Equalizer bars — for the Phase 4 audio card. 1.2s per bar with staggered delays
gives a ~2.7s ensemble breath — feels like real audio, not a UI spinner. */
.waveform-bars { display: flex; align-items: end; gap: 4px; height: 32px; }
.waveform-bars span {
display: block; width: 3px;
background: var(--teal);
border-radius: 2px;
animation: equalize 1.2s ease-in-out infinite;
transform-origin: bottom;
}
.waveform-bars span:nth-child(1) { animation-delay: 0s; height: 60%; }
.waveform-bars span:nth-child(2) { animation-delay: 0.15s; height: 100%; }
.waveform-bars span:nth-child(3) { animation-delay: 0.3s; height: 80%; }
.waveform-bars span:nth-child(4) { animation-delay: 0.45s; height: 90%; }
.waveform-bars span:nth-child(5) { animation-delay: 0.6s; height: 50%; }
@keyframes equalize {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
/* Play button pulse rings (3s for ambient cadence, not UI cadence) */
.play-button { position: relative; }
.play-button::before,
.play-button::after {
content: '';
position: absolute; inset: -8px;
border: 2px solid var(--teal);
border-radius: 50%;
opacity: 0;
animation: pulse-ring 3s ease-out infinite;
pointer-events: none;
}
.play-button::after { animation-delay: 1.5s; }
@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Scroll-triggered reveal — one-time, cubic-bezier ease-out tail */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
/* Visually hidden (accessible labels) */
.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;
}
/* ---------- 6. Nav ---------- */
/* Scroll-aware nav — at the top of the page the nav is flush (no shadow, no
visible border), giving the hero room to breathe. Once the user has scrolled
past ~8px, JS adds .is-scrolled which fades in a hairline border + soft
elevation shadow — signaling "I'm now floating above the content."
The shared house easing keeps the transition feeling intentional, not
reactive. Both states use the same backdrop-blur for legibility. */
.site-nav {
position: sticky; top: 0; z-index: 50;
background: var(--bg-nav);
border-bottom: 1px solid transparent;
-webkit-backdrop-filter: saturate(180%) blur(4px);
backdrop-filter: saturate(180%) blur(4px);
transition:
border-color 0.30s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav.is-scrolled {
border-bottom-color: var(--border-card);
box-shadow: 0 4px 20px rgba(15, 23, 41, 0.06);
}
[data-theme="dark"] .site-nav.is-scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}
.site-nav__inner {
max-width: var(--max-width);
margin: 0 auto;
padding-block: 16px;
padding-inline: 24px; /* mirrors .container gutter so the logo aligns with content (stepped with it @768/@480) */
display: flex; align-items: center; gap: 32px;
}
.site-nav__logo {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-weight: 700; font-size: 22px;
line-height: 1; /* collapse text box to glyph height so the wordmark
and the symbol share a true optical baseline */
letter-spacing: -0.01em; /* slight negative tracking — Sora Bold at 22px reads
cleaner with display-type convention */
color: var(--text-headline); text-decoration: none;
transition: opacity 0.20s ease;
}
.site-nav__logo:hover { opacity: 0.75; }
.site-nav__logo .logo-brief { color: var(--text-headline); }
.site-nav__logo .logo-time { color: var(--teal); }
.site-nav__logo .logo-img { width: auto; }
[data-theme="light"] .logo-img--dark,
[data-theme="dark"] .logo-img--light { display: none; }
.site-nav__links {
display: flex; gap: 32px; margin: 0 auto;
list-style: none; padding: 0;
}
.site-nav__links a {
position: relative;
color: var(--text-headline);
font-weight: 500; font-size: 15px;
text-decoration: none;
padding-bottom: 4px; /* room for the underline */
transition: color 0.20s ease;
}
.site-nav__links a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--teal);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__links a:hover {
color: var(--teal);
opacity: 1;
}
/* Hover is color-only now. The teal ::after bar (defined above) is reserved
for the active in-view section, set via aria-current in app.js — the only
underline in the nav. */
.site-nav__links a[aria-current="true"] {
color: var(--teal);
font-weight: 600; /* default nav weight is 500 → one step heavier */
}
.site-nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.site-nav__actions { display: flex; gap: 12px; align-items: center; }
.site-nav__actions .btn-primary {
border-radius: 12px;
padding: 12px 20px;
font-size: 14px;
}
/* Hamburger trigger — hidden at desktop, shown at ≤768px via the main mobile block */
.site-nav__hamburger {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border-card);
border-radius: 12px;
color: var(--text-headline);
cursor: pointer;
transition: background 0.20s ease, border-color 0.20s ease, color 0.20s ease;
}
.site-nav__hamburger:hover {
background: var(--bg-card);
border-color: var(--text-accent);
color: var(--text-accent);
opacity: 1;
}
/* ============== Mobile drawer ==============
Sibling of the header, animates in from the right on tap.
Pattern: page-level overlay with a backdrop + a sliding panel.
The drawer is always in the DOM (visibility/pointer-events gated by .is-open)
so the transitions can animate cleanly in both directions. */
.mobile-drawer {
position: fixed;
inset: 0;
z-index: 100;
visibility: hidden;
pointer-events: none;
}
.mobile-drawer.is-open {
visibility: visible;
pointer-events: auto;
}
.mobile-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 41, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.28s ease;
}
.mobile-drawer.is-open .mobile-drawer__backdrop { opacity: 1; }
.mobile-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(340px, 84vw);
background: var(--bg-page);
border-left: 1px solid var(--border-card);
padding: 20px 24px 28px;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: -16px 0 48px rgba(15, 23, 41, 0.12);
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border-card);
}
.mobile-drawer__brand .logo-img { height: 32px; width: auto; } /* let the theme-switch
rule above handle display:none on the inactive variant */
.mobile-drawer__close {
/* Borderless X — matches the screenshot reference. Icon stroke is enough
visual weight; a box around it would feel heavy in this minimal layout. */
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: transparent;
border: none;
color: var(--text-headline);
cursor: pointer;
transition: color 0.20s ease, opacity 0.20s ease;
}
.mobile-drawer__close:hover { color: var(--text-accent); opacity: 1; }
/* Nav links — each is a tall row with a chevron on the right and a hairline
divider below. Reads as a "list of destinations", not a row of inline links. */
.mobile-drawer__nav {
display: flex;
flex-direction: column;
margin-bottom: 28px;
}
.mobile-drawer__nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 4px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--text-headline);
text-decoration: none;
border-bottom: 1px solid var(--border-card);
transition: color 0.20s ease;
}
.mobile-drawer__nav a:hover { color: var(--text-accent); opacity: 1; }
.mobile-drawer__chevron {
color: var(--text-body);
flex-shrink: 0;
opacity: 0.7;
}
/* Appearance — eyebrow label + 2-pill segmented control (Dark / Light) */
.drawer-appearance {
margin-bottom: 28px;
}
.drawer-appearance__label {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-body);
margin-bottom: 12px;
}
.drawer-appearance__group {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: 9999px;
padding: 4px;
gap: 4px;
}
.drawer-appearance__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 9999px;
color: var(--text-body);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.20s ease, color 0.20s ease, border-color 0.20s ease;
}
.drawer-appearance__btn[aria-pressed="true"] {
background: color-mix(in srgb, var(--teal) 10%, transparent);
border-color: color-mix(in srgb, var(--teal) 40%, transparent);
color: var(--text-accent);
}
.drawer-appearance__btn:hover { opacity: 1; }
.drawer-appearance__btn svg { display: block; }
/* CTA — full-width button anchored to the bottom of the panel.
Only width + centering overrides — padding, font-size, radius, color, and
hover all inherit from .btn-primary so the drawer CTA stays consistent
with every other primary action on the site. */
.mobile-drawer__cta {
margin-top: auto;
}
.mobile-drawer__cta-btn {
width: 100%;
justify-content: center;
}
/* Lock body scroll while drawer is open */
body.is-drawer-open { overflow: hidden; }
/* Honor reduced motion — collapse drawer transitions to instant */
@media (prefers-reduced-motion: reduce) {
.mobile-drawer__panel,
.mobile-drawer__backdrop { transition-duration: 0.01ms; }
}
.theme-toggle {
position: relative; /* anchor for the ::after tooltip */
width: 40px; height: 40px;
background: var(--bg-nav);
border: 1px solid var(--border-card);
border-radius: 10px;
display: grid; place-items: center;
cursor: pointer;
color: var(--icon-fill);
transition:
background 0.20s ease,
border-color 0.20s ease,
color 0.20s ease,
transform 0.15s ease;
}
.theme-toggle:hover {
background: color-mix(in srgb, var(--teal) 5%, var(--bg-nav));
border-color: color-mix(in srgb, var(--teal) 30%, var(--border-card));
color: var(--text-accent);
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* Custom tooltip — appears instantly on hover/focus (the native title=
attribute has a ~1s OS delay we can't override). Text comes from the
data-tooltip attribute, which JS keeps in sync with the current theme.
Placement: below the trigger (the sticky nav above leaves no room) and
centered on it (Apple HIG / Material 3 default for icon-button tooltips).
Color: inverted surface tokens. --text-headline is the page's strongest
text color in either theme, so it doubles as the highest-contrast pill
background; --bg-card is its inverse and reads cleanly as the text color.
Result: dark pill in light mode, light pill in dark mode — automatic. */
.theme-toggle::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-2px);
padding: 6px 10px;
background: var(--text-headline);
color: var(--bg-card);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.01em;
white-space: nowrap;
max-width: calc(100vw - 32px); /* never overflow viewport on narrow screens */
border-radius: 6px;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.22),
0 1px 2px rgba(0, 0, 0, 0.10);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
z-index: 10;
}
.theme-toggle:hover::after,
.theme-toggle:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---------- 7. Buttons ---------- */
.btn-primary {
background: var(--cta-bg); color: var(--cta-text);
font-family: var(--font-body); font-weight: 600; font-size: 16px;
padding: 16px 28px; border: none; border-radius: 12px; /* rounded-rectangle CTA, matches nav */
cursor: pointer;
box-shadow: var(--shadow-elev);
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
transition:
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.20s ease;
}
.btn-primary:hover {
box-shadow:
0 16px 40px rgba(36, 174, 155, 0.30),
0 6px 12px rgba(15, 23, 41, 0.08);
filter: brightness(1.05);
}
.btn-primary:active {
filter: brightness(0.94);
transition-duration: 0.10s; /* snappier press feedback */
}
.btn-ghost {
background: var(--bg-card); color: var(--text-headline);
font-family: var(--font-body); font-weight: 600; font-size: 16px;
padding: 16px 28px;
border: 1px solid var(--border-card);
border-radius: var(--radius-pill); cursor: pointer;
box-shadow: var(--shadow-elev);
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
transition:
border-color 0.20s ease,
background 0.20s ease,
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-ghost:hover {
border-color: var(--teal);
background: color-mix(in srgb, var(--teal) 6%, var(--bg-card));
box-shadow:
0 16px 32px rgba(15, 23, 41, 0.06),
0 0 0 1px color-mix(in srgb, var(--teal) 20%, transparent);
}
.btn-ghost:active {
background: color-mix(in srgb, var(--teal) 12%, var(--bg-card));
transition-duration: 0.10s;
}
.btn-link {
color: var(--text-accent);
font-weight: 500; font-size: 15px;
display: inline-flex; align-items: center; gap: 6px;
}
/* App Store / Google Play store badge (always dark surface, white text) */
.btn-store {
display: inline-flex; align-items: center; gap: 12px;
padding: 10px 18px;
border-radius: 10px;
background: var(--navy);
color: var(--slate-50);
font-family: var(--font-body);
line-height: 1;
text-decoration: none;
box-shadow: var(--shadow-elev);
/* All three properties share the same ease + duration so the hover feels
like a single coordinated response, not three independent animations. */
transition:
box-shadow 0.30s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.30s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-store:hover {
/* Subtle brightness lift — the badge is dark, so brightening reads as
"alive" without changing color. Matches Apple's own download-badge hover. */
filter: brightness(1.10);
box-shadow:
0 20px 40px rgba(15, 23, 41, 0.18),
0 6px 12px rgba(15, 23, 41, 0.10);
opacity: 1;
}
.btn-store:active {
filter: brightness(0.94);
transition-duration: 0.10s;
}
[data-theme="dark"] .btn-store {
background: var(--card-surface);
border: 1px solid var(--border-card);
}
[data-theme="dark"] .btn-store:hover {
/* Dark mode: lighter brightness boost (the surface is already dark), plus
a teal-tinted border + halo so the hover signature stays on-brand. */
filter: brightness(1.06);
border-color: color-mix(in srgb, var(--teal) 30%, var(--border-card));
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.45),
0 0 20px rgba(36, 174, 155, 0.20);
}
.btn-store__top {
display: block;
font-size: 10px; line-height: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.85;
}
.btn-store__bot {
display: block;
font-size: 16px; line-height: 18px;
font-weight: 600;
margin-top: 2px;
}
/* ---------- 8. Pill (eyebrow badges) ---------- */
.pill {
display: inline-flex; align-items: center;
padding: 8px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-body); font-weight: 600; font-size: 12px;
line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase;
border: 1px solid transparent;
}
.pill.warm { background: var(--pill-warm-bg); border-color: var(--pill-warm-border); color: var(--eyebrow-warm); }
.pill.brand { background: var(--pill-brand-bg); border-color: var(--pill-brand-border); color: var(--eyebrow-brand); }
/* ---------- 9. Card primitives ---------- */
.card {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
padding: 28px;
box-shadow: var(--shadow-elev);
}
/* Perk card (numbered, Early Access) */
.perk-card .perk-num {
font-family: var(--font-display); font-weight: 700;
font-size: 40px; line-height: 44px; letter-spacing: -0.8px;
color: var(--text-accent);
margin-bottom: 16px;
}
.perk-card .perk-title {
font-family: var(--font-display); font-weight: 600;
font-size: 20px; line-height: 1.25;
color: var(--text-headline); margin: 0 0 8px;
}
.perk-card .perk-desc {
font-size: 14px; line-height: 22px;
color: var(--text-body); margin: 0;
}
/* Benefit card (icon-led, Early Access) */
.benefit-card .benefit-tile {
width: 52px; height: 52px;
border-radius: 10px;
background: var(--tile-bg);
display: grid; place-items: center;
margin-bottom: 16px;
color: var(--icon-accent);
}
.benefit-card .benefit-title {
font-family: var(--font-display); font-weight: 600;
font-size: 20px; line-height: 1.25;
color: var(--text-headline); margin: 0 0 8px;
}
.benefit-card .benefit-desc {
font-size: 14px; line-height: 22px;
color: var(--text-body); margin: 0;
}
/* ============== ABOUT PAGE ============== */
/* About hero — centered manifesto with a teal divider + accent pull-quote */
.about-hero { padding-top: 96px; padding-bottom: 56px; text-align: center; }
.about-hero .section-head { margin-bottom: 40px; }
.about-manifesto { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.about-manifesto .body-text { text-align: center; margin: 0; }
.about-divider {
border: none;
height: 1px;
width: 80px;
background: var(--teal);
opacity: 0.45;
margin: 24px auto;
}
.about-pullquote {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
line-height: 28px;
letter-spacing: -0.3px;
color: var(--text-headline);
text-align: center;
margin: 0;
max-width: 560px;
}
.about-pullquote__accent { color: var(--text-accent); }
.about-attribution {
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--text-body);
text-align: center;
margin: 12px 0 0;
}
/* Team card — left-aligned, founder info + LinkedIn icon at bottom (About page) */
.team-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 24px;
position: relative;
text-align: left;
}
.team-card .team-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--tile-bg);
display: grid; place-items: center;
margin: 0 0 16px;
font-family: var(--font-display);
font-weight: 600; font-size: 14px;
letter-spacing: 0.5px;
color: var(--text-accent);
}
.team-card .team-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 17px; line-height: 24px;
color: var(--text-headline);
margin: 0 0 4px;
}
.team-card .team-role {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-accent);
margin: 0 0 16px;
}
.team-card .team-desc {
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--text-body);
margin: 0 0 24px;
flex: 1; /* push the LinkedIn icon to the bottom of the card */
}
.team-card .team-social {
position: relative; /* anchor for the expanded hit area */
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
border-radius: 6px;
border: 1px solid var(--border-card);
background: var(--bg-page);
color: var(--text-body);
align-self: flex-start; /* bottom-left */
transition: background 0.20s ease, border-color 0.20s ease, color 0.20s ease;
}
/* Invisible 44x44 tap target around the 28px visual icon (Apple/Material min) */
.team-card .team-social::before {
content: '';
position: absolute;
inset: -8px;
}
.team-card .team-social:hover {
background: var(--pill-brand-bg);
border-color: var(--pill-brand-border);
color: var(--text-accent);
opacity: 1;
}
/* Policy card (Privacy + Terms) */
.policy-card { padding: 28px; }
.policy-card h2 {
font-family: var(--font-display); font-weight: 600;
font-size: 22px; line-height: 28px;
color: var(--text-headline);
margin: 32px 0 12px;
}
.policy-card > h2:first-child { margin-top: 0; }
.policy-card p,
.policy-card ul {
font-family: var(--font-body); font-weight: 400;
font-size: 16px; line-height: 26px;
color: var(--text-body);
margin: 0 0 12px;
}
.policy-card ul { padding-left: 20px; }
.policy-card li { margin-bottom: 6px; }
.policy-meta {
font-size: 13px;
color: var(--slate-500);
margin: 0 0 16px;
text-align: center;
}
/* Social card (Success page) — link card with icon tile + name + handle + tag.
Hover lift comes from the universal interactive-card block below. */
.social-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 22px;
text-decoration: none;
color: inherit;
text-align: left;
position: relative;
}
.social-card:hover { opacity: 1; } /* defensive override of any global anchor hover */
.social-card__tile {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--tile-bg);
color: var(--icon-accent);
display: grid; place-items: center;
margin-bottom: 18px;
}
.social-card__name {
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
line-height: 22px;
color: var(--text-headline);
margin: 0 0 4px;
}
.social-card__handle {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-body);
margin: 0 0 4px;
}
.social-card__tag {
font-family: var(--font-body);
font-size: 12px;
line-height: 16px;
color: var(--text-body);
margin: 0;
opacity: 0.85;
}
/* Universal card hover system — applied across .card and all card variants.
TWO TIERS of hover, intentionally distinct so users can read interactivity
from the motion alone:
- Static cards → subtle border emphasis + faint shadow growth, no lift,
no teal (teal is reserved as the interaction signal).
Reads as "presence acknowledged" — not "click me".
- Interactive cards (a.…, button.…, .is-interactive, .social-card)
→ full lift -3px, teal border tint, larger shadow,
teal halo in dark mode. Reads as "click me".
The :not() chain on the static selectors is required because
`.card:hover` (2,0) outranks `a.card:hover` (1,1) in specificity —
without :not() the static rule would override the interactive one. */
.card,
.perk-card,
.benefit-card,
.social-card,
.team-card {
transition:
transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.20s ease;
}
/* Static (non-interactive) cards — subtle acknowledgement only */
.card:not(a):not(button):not(.is-interactive):hover,
.perk-card:not(a):not(button):not(.is-interactive):hover,
.benefit-card:not(a):not(button):not(.is-interactive):hover,
.team-card:not(a):not(button):not(.is-interactive):hover {
border-color: color-mix(in srgb, var(--text-headline) 14%, var(--border-card));
box-shadow:
0 16px 32px rgba(15, 23, 41, 0.06),
0 4px 8px rgba(15, 23, 41, 0.04);
}
[data-theme="dark"] .card:not(a):not(button):not(.is-interactive):hover,
[data-theme="dark"] .perk-card:not(a):not(button):not(.is-interactive):hover,
[data-theme="dark"] .benefit-card:not(a):not(button):not(.is-interactive):hover,
[data-theme="dark"] .team-card:not(a):not(button):not(.is-interactive):hover {
border-color: color-mix(in srgb, var(--slate-50) 16%, var(--border-card));
box-shadow:
0 16px 32px rgba(0, 0, 0, 0.30),
0 4px 8px rgba(0, 0, 0, 0.20);
}
/* Interactive cards — full treatment (lift + teal accent) */
a.card:hover,
a.perk-card:hover,
a.benefit-card:hover,
a.social-card:hover,
a.team-card:hover,
button.card:hover,
.card.is-interactive:hover,
.perk-card.is-interactive:hover,
.benefit-card.is-interactive:hover,
.social-card:hover,
.team-card.is-interactive:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--teal) 30%, var(--border-card));
box-shadow:
0 24px 48px rgba(15, 23, 41, 0.08),
0 8px 16px rgba(36, 174, 155, 0.06);
}
/* Dark mode: cards get a soft teal halo bleed in the shadow */
[data-theme="dark"] a.card:hover,
[data-theme="dark"] a.perk-card:hover,
[data-theme="dark"] a.benefit-card:hover,
[data-theme="dark"] a.social-card:hover,
[data-theme="dark"] a.team-card:hover,
[data-theme="dark"] button.card:hover,
[data-theme="dark"] .card.is-interactive:hover,
[data-theme="dark"] .perk-card.is-interactive:hover,
[data-theme="dark"] .benefit-card.is-interactive:hover,
[data-theme="dark"] .social-card:hover,
[data-theme="dark"] .team-card.is-interactive:hover {
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.35),
0 0 24px rgba(36, 174, 155, 0.15);
}
/* ---------- 11. Footer ---------- */
.site-footer {
background: var(--bg-footer);
border-top: 1px solid var(--border-card);
padding: 64px 0 32px;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 48px;
margin-bottom: 48px;
}
.site-footer__brand .tagline {
margin: 16px 0 24px;
color: var(--text-headline);
font-weight: 500;
font-size: 15px;
line-height: 24px;
}
.site-footer__socials { display: flex; gap: 12px; }
.site-footer__socials a {
width: 36px; height: 36px;
border: 1px solid var(--border-card);
border-radius: 10px;
display: grid; place-items: center;
color: var(--icon-fill);
transition:
background 0.20s ease,
border-color 0.20s ease,
color 0.20s ease;
}
.site-footer__socials a:hover {
background: var(--pill-brand-bg);
border-color: var(--pill-brand-border);
color: var(--text-accent);
opacity: 1;
}
.site-footer__col h4 {
font-family: var(--font-body); font-weight: 600; font-size: 13px;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-headline); margin: 0 0 16px;
}
.site-footer__col ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
}
.site-footer__col a {
color: var(--text-headline);
font-size: 14px; font-weight: 400;
text-decoration: none;
transition: color 0.20s ease;
}
.site-footer__col a:hover {
color: var(--text-accent);
opacity: 1;
}
.site-footer__bottom {
padding-top: 24px;
border-top: 1px solid var(--border-card);
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(--text-body);
}
/* ---------- 12. Hero (Landing) ---------- */
.landing-hero {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 48px;
padding-block: 96px; /* vertical only (→ 72 @1024 / 56 @768 / 48 @480); horizontal gutter comes from .container */
}
.landing-hero__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.landing-hero__copy .pill { align-self: flex-start; }
.landing-hero__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.phone-mockup {
width: 320px; aspect-ratio: 9/19;
background: var(--bg-card);
border-radius: 40px;
border: 8px solid var(--navy);
box-shadow: var(--shadow-elev);
/* Replace this with an ![]()
of your app screenshot */
}
/* Hero visual — HeroMockup phone + animated audio card overlay.
No min-height: the tall phone SVG drives the height, so the visual scales
with the phone and the audio card's percentage anchors stay locked. */
.landing-hero__visual {
position: relative;
display: block;
width: max-content;
margin-left: auto; /* push to the right edge of its grid cell so the phone's
right edge aligns with the nav CTA (same container gutter) */
margin-right: 0;
}
.hero-phone { display: block; width: 380px; height: auto; }
/* ========== Audio card (animated, replaces static waveform SVG) ==========
Always-dark surface in BOTH themes to match the always-dark HeroMockup phone
it overlays. No [data-theme] split. */
.audio-card {
position: absolute;
left: -16%; /* extends 16% of phone width past the left edge — scales with the phone */
top: 42%; /* sits at the phone's vertical center (card top edge at 42%, ~120px-tall card centers ~near 50%) */
bottom: auto;
width: 63%; /* 63% of phone width — scales with the phone, not a fixed px step */
min-width: 200px; /* floor: card never gets too small to read */
max-width: 240px; /* ceiling: never overpowers the phone on desktop */
padding: 18px 20px; /* slightly more breathing room (was 16px 18px) */
border-radius: 18px; /* slightly softer corners (was 16px) */
/* 3D surface: thin top highlight (glass edge) over a deeper dark gradient */
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.04) 0%,
transparent 1px,
transparent 100%
),
linear-gradient(180deg,
color-mix(in srgb, var(--card-surface) 92%, white) 0%,
var(--card-surface) 35%,
color-mix(in srgb, var(--card-surface) 88%, var(--navy-deep)) 100%
);
border: 1px solid rgba(51, 65, 85, 0.65);
box-shadow:
0 28px 56px rgba(0, 0, 0, 0.50), /* far drop shadow */
0 12px 24px rgba(0, 0, 0, 0.30), /* mid drop shadow */
0 4px 8px rgba(0, 0, 0, 0.20), /* near contact shadow */
0 0 32px rgba(36, 174, 155, 0.14), /* teal halo bleed */
inset 0 1px 0 rgba(255, 255, 255, 0.08), /* inner top highlight (glass edge) */
inset 0 -1px 0 rgba(0, 0, 0, 0.40); /* inner bottom shadow (volume) */
/* Glass — blurs the phone art behind the card; lets the ambient teal seep through */
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
animation: card-drift 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Top row: status (dot + eyebrow) ↔ time */
.audio-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
/* No play-button reservation here: the button is vertically centered, so it
only overlaps the title + waveform rows below — never this top row. Padding
it would shrink the row and force "NOW PLAYING" / the time to wrap. */
}
.audio-card__status { display: inline-flex; align-items: center; gap: 8px; }
.audio-card__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px rgba(36, 174, 155, 0.7);
animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1.0; transform: scale(1.15); }
}
.audio-card__eyebrow {
font-family: var(--font-body);
font-weight: 600; font-size: 11px;
letter-spacing: 1.4px; text-transform: uppercase;
color: var(--teal);
white-space: nowrap; /* "NOW PLAYING" stays on one line */
}
.audio-card__time {
font-family: var(--font-body);
font-weight: 500; font-size: 11px;
color: var(--slate-400);
font-variant-numeric: tabular-nums;
white-space: nowrap; /* "1:24 / 5:00" never wraps */
}
/* Title */
.audio-card__title {
font-family: var(--font-display);
font-weight: 600; font-size: 14px; line-height: 1.3;
color: var(--slate-50);
margin: 0 0 14px;
letter-spacing: -0.2px;
padding-right: 56px; /* same reservation as __top */
white-space: nowrap; /* keep the title on one line */
overflow: hidden;
text-overflow: ellipsis; /* graceful truncation instead of clipping under the button */
}
/* Waveform bars container */
.audio-card__waveform {
display: flex;
align-items: center;
gap: 4px;
height: 32px;
padding-right: 56px; /* matches __top/__title so all three rows clear the play button */
}
/* The bars themselves */
.wave-bar {
flex: 1;
max-width: 4px;
height: 100%;
border-radius: 2px;
background: var(--teal);
opacity: 0.55;
transform-origin: center;
transform: scaleY(var(--base, 0.4));
animation:
var(--wave-anim, wave-a)
var(--wave-dur, 1.8s)
var(--wave-ease, ease-in-out)
var(--wave-delay, 0s)
infinite;
}
/* Center bars brighter — the "active accent" from Figma */
.wave-bar:nth-child(4),
.wave-bar:nth-child(5),
.wave-bar:nth-child(6) {
opacity: 1;
filter: drop-shadow(0 0 4px rgba(36, 174, 155, 0.45));
}
/* Each bar gets a unique baseline + pattern + duration + delay so the row reads
as real audio peaks instead of a synchronized UI animation. */
.wave-bar:nth-child(1) { --base: 0.30; --wave-anim: wave-a; --wave-dur: 1.7s; --wave-delay: 0.0s; }
.wave-bar:nth-child(2) { --base: 0.55; --wave-anim: wave-b; --wave-dur: 2.1s; --wave-delay: 0.3s; }
.wave-bar:nth-child(3) { --base: 0.45; --wave-anim: wave-c; --wave-dur: 1.5s; --wave-delay: 0.5s; }
.wave-bar:nth-child(4) { --base: 0.80; --wave-anim: wave-b; --wave-dur: 1.9s; --wave-delay: 0.1s; }
.wave-bar:nth-child(5) { --base: 1.00; --wave-anim: wave-a; --wave-dur: 1.6s; --wave-delay: 0.4s; }
.wave-bar:nth-child(6) { --base: 0.85; --wave-anim: wave-c; --wave-dur: 2.0s; --wave-delay: 0.2s; }
.wave-bar:nth-child(7) { --base: 0.50; --wave-anim: wave-a; --wave-dur: 1.8s; --wave-delay: 0.6s; }
.wave-bar:nth-child(8) { --base: 0.40; --wave-anim: wave-b; --wave-dur: 2.2s; --wave-delay: 0.15s; }
.wave-bar:nth-child(9) { --base: 0.25; --wave-anim: wave-c; --wave-dur: 1.7s; --wave-delay: 0.45s; }
/* Three distinct "audio peak" patterns — each asymmetric so the bars don't
read as a smooth sine. Real spoken audio is uneven. */
@keyframes wave-a {
0% { transform: scaleY(var(--base)); }
25% { transform: scaleY(calc(var(--base) * 1.75)); }
50% { transform: scaleY(calc(var(--base) * 0.65)); }
75% { transform: scaleY(calc(var(--base) * 1.40)); }
100% { transform: scaleY(var(--base)); }
}
@keyframes wave-b {
0% { transform: scaleY(var(--base)); }
30% { transform: scaleY(calc(var(--base) * 0.50)); }
55% { transform: scaleY(calc(var(--base) * 1.65)); }
80% { transform: scaleY(calc(var(--base) * 0.80)); }
100% { transform: scaleY(var(--base)); }
}
@keyframes wave-c {
0% { transform: scaleY(var(--base)); }
20% { transform: scaleY(calc(var(--base) * 1.30)); }
45% { transform: scaleY(calc(var(--base) * 0.40)); }
70% { transform: scaleY(calc(var(--base) * 1.55)); }
100% { transform: scaleY(var(--base)); }
}
/* Play button — circular, teal, with two expanding pulse rings */
.audio-card__play {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%); /* centering — not motion */
width: 40px; height: 40px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%,
color-mix(in srgb, var(--teal) 80%, white) 0%,
var(--teal) 50%,
color-mix(in srgb, var(--teal) 85%, var(--teal-dark)) 100%
);
border: none;
color: var(--navy);
display: grid; place-items: center;
cursor: pointer;
box-shadow:
0 8px 20px rgba(36, 174, 155, 0.45), /* teal-tinted drop shadow */
0 3px 6px rgba(0, 0, 0, 0.25), /* hard contact shadow */
inset 0 1px 1px rgba(255, 255, 255, 0.45), /* top highlight (raised feel) */
inset 0 -1px 2px rgba(0, 0, 0, 0.20); /* bottom inner shadow */
transition:
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.20s ease,
transform 0.20s ease;
}
.audio-card__play svg { margin-left: 2px; } /* optical centering of the triangle */
.audio-card__play::before,
.audio-card__play::after {
content: '';
position: absolute; inset: -6px;
border: 2px solid var(--teal);
border-radius: 50%;
opacity: 0;
animation: play-ring 3s ease-out infinite;
pointer-events: none;
}
.audio-card__play::after { animation-delay: 1.5s; }
@keyframes play-ring {
0% { transform: scale(0.85); opacity: 0.55; }
100% { transform: scale(1.7); opacity: 0; }
}
.audio-card__play:hover {
filter: brightness(1.08);
transform: translateY(-50%) scale(1.05); /* preserve centering, add a small lift */
box-shadow:
0 12px 28px rgba(36, 174, 155, 0.60),
0 4px 8px rgba(0, 0, 0, 0.30),
inset 0 1px 1px rgba(255, 255, 255, 0.50),
inset 0 -1px 2px rgba(0, 0, 0, 0.20);
}
.audio-card__play:active {
filter: brightness(0.92);
transform: translateY(-50%) scale(0.97); /* preserve centering on press */
transition-duration: 0.10s;
}
/* Reduced-motion — freeze everything at the baseline; bars still read as a waveform shape */
@media (prefers-reduced-motion: reduce) {
.audio-card__dot,
.wave-bar,
.audio-card__play::before,
.audio-card__play::after { animation: none !important; }
.wave-bar { transform: scaleY(var(--base)); }
}
/* ============== LEGAL PAGES (Privacy / Terms) ============== */
/* Hero — centered, similar to About hero but tighter padding */
.legal-hero {
padding-top: 96px;
padding-bottom: 56px;
text-align: center;
}
.legal-hero .section-head { margin-bottom: 20px; }
.legal-meta {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-body);
margin: 8px 0 0;
}
.legal-intro {
text-align: center;
margin: 0 auto;
max-width: 560px;
}
.legal-content { padding-top: 0; padding-bottom: 96px; }
/* "Brief on" callout — small white card with teal icon */
.brief-callout {
max-width: 720px;
margin: 32px auto 64px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-elev);
padding: 18px 22px;
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: flex-start;
}
.brief-callout__icon {
display: grid; place-items: center;
width: 32px; height: 32px;
color: var(--icon-accent);
flex-shrink: 0;
}
.brief-callout__body { display: flex; flex-direction: column; gap: 6px; }
.brief-callout__body .body-sm { color: var(--text-body); margin: 0; }
/* Policy section — heading + body with short teal accent line above */
.policy-section { margin-bottom: 40px; }
.policy-section:last-child { margin-bottom: 0; }
.policy-section__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.2px;
color: var(--text-headline);
margin: 0 0 12px;
position: relative;
padding-top: 16px;
}
.policy-section__title::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--teal);
border-radius: 2px;
opacity: 0.85;
}
/* Bullet list inside a policy section */
.policy-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.policy-list li {
position: relative;
padding-left: 18px;
font-family: var(--font-body);
font-size: 16px;
line-height: 26px;
color: var(--text-body);
}
.policy-list li::before {
content: '';
position: absolute;
left: 0;
top: 11px;
width: 6px;
height: 6px;
background: var(--teal);
border-radius: 50%;
}
/* Inline contact link inside policy body */
.policy-section a[href^="mailto:"] {
color: var(--text-accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
/* Legal pages: no mobile block needed — hero padding, callout spacing, and
section-title size all scale via fluid tokens now. */
/* ============== CONTACT PAGE ============== */
/* Trust strip — 3 items above the form. Subtle vertical dividers between
items (per Figma screenshots) make the row read as a single composed unit
rather than three loose pills. */
.trust-strip {
max-width: 720px;
margin: 0 auto 24px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-elev);
padding: 14px 24px;
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.trust-strip__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
line-height: 18px;
color: var(--text-headline);
white-space: nowrap;
padding-left: 16px;
border-left: 1px solid var(--border-card); /* faint divider per screenshots */
}
.trust-strip__item:first-child {
padding-left: 0;
border-left: none; /* leftmost item has no divider */
}
.trust-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
flex-shrink: 0;
}
/* Contact form — wider card with eyebrow-style labels and a left-aligned CTA */
.contact-form {
max-width: 720px;
margin: 0 auto 32px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-form__actions {
margin-top: 8px;
display: flex;
justify-content: flex-start; /* Send message sits left, not centered */
}
.contact-form .btn-primary {
height: 56px;
padding: 0 28px;
font-size: 15px;
/* border-radius: 12px inherited from .btn-primary — explicit 56px height
matches the .ea-signup__btn geometry */
}
/* Inline variant of brief-callout — single-line message with a trailing link */
.brief-callout--inline {
margin-top: 0;
margin-bottom: 0;
padding: 14px 22px;
}
.brief-callout--inline .brief-callout__body {
gap: 2px;
}
.brief-callout--inline .body-sm {
display: inline;
}
/* Teal arrow link inside the callout */
.brief-callout__link {
color: var(--text-accent);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
margin-left: 4px;
transition: color 0.20s ease;
}
.brief-callout__link:hover {
color: var(--teal);
opacity: 1;
}
/* Contact — layout only: stack the trust strip and drop its dividers */
@media (max-width: 768px) {
.trust-strip {
flex-direction: column;
align-items: flex-start;
}
.trust-strip__item {
padding-left: 0;
border-left: none; /* dividers don't make sense when stacked */
}
}
/* ============== EARLY ACCESS PAGE ============== */
.ea-hero {
padding-top: 96px;
padding-bottom: 96px;
text-align: center;
}
.ea-hero .section-head { margin-bottom: 24px; }
.ea-hero__body {
text-align: center;
margin: 0 auto 32px;
max-width: 560px;
}
/* ============== Early Access — split email signup ==============
Per Figma intent: two side-by-side pills (input + button) with an 8px gap.
The