/* =============================================================================
NaviFin marketing site - NaviBeat design system (Oswald + Manrope), re-skinned
through the shared token cascade to the Jellyfin palette: deep navy canvas,
purple-to-blue accent. Source of truth for the geometry is NaviBeat's
styles.css; only the :root token VALUES differ, plus the NaviFin-only blocks
appended at the end. Keep token NAMES identical so both sites stay in sync.
============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* ---- Palette (Vinyl / audiophile tokens - neutral carbon + vinyl orange).
Token NAMES kept identical to the old Warm-Vinyl set so every inline
var(--token) across all pages re-skins through the cascade. ---- */
--bg-0: #000b25; /* neutral carbon - primary canvas (not warm brown, not embertide plum) */
--bg-1: #04102e; /* slightly lifted surface */
--bg-2: #081a3d; /* card backgrounds */
--bg-3: #0c2249; /* hover states / speaker-mesh base */
--border: rgba(159, 176, 208, 0.09);
--border-strong: rgba(159, 176, 208, 0.20);
--text-0: #eaf0ff; /* off-white - primary text */
--text-1: #9fb0d0; /* muted - secondary text */
--text-2: #8295b8; /* quiet - labels, captions */
--accent: #aa5cc3; /* vinyl orange (on copper-metallic gradients, not flat) */
--accent-2: #00a4dc; /* deep copper-orange */
--accent-hi: #c98fe0; /* lighter amber for hover */
--accent-dim: rgba(106, 123, 216, 0.13);
--accent-glow: rgba(0, 164, 220, 0.22);
--copper: #7d8fd6; /* steel-blue metallic (was copper) */ /* metallic copper secondary */
/* ---- Typography ---- */
--font-display: "Oswald", Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace;
/* ---- Layout ---- */
--max-w: 1280px;
--gutter: 80px;
--rhythm: 72px;
/* ---- Motion ---- */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 900px) {
:root {
--gutter: 24px;
--rhythm: 48px;
}
}
html { scroll-behavior: smooth; color-scheme: dark; }
body {
background: var(--bg-0);
color: var(--text-0);
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Subtle neutral grain overlay - carbon texture */
background-image: url("data:image/svg+xml;utf8,");
background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--text-0); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--accent-hi); }
::selection { background: var(--accent); color: var(--bg-0); }
:focus-visible {
outline: 2px solid var(--accent-hi);
outline-offset: 3px;
border-radius: 4px;
}
/* Visually-hidden utility - keeps heading semantics for screen readers
and SEO crawlers without painting it on the page. WCAG 1.3.1 friendly. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link - visually hidden until keyboard focus brings it
in. WCAG 2.4.1 (Bypass Blocks). Every page provides ``
as the target. */
.skip-link {
position: absolute;
top: 0;
left: 0;
transform: translateY(-150%);
z-index: 10000;
padding: 12px 18px;
background: var(--accent);
color: #0C0C0E;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
border-radius: 0 0 8px 0;
text-decoration: none;
transition: transform 0.18s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid #0C0C0E;
outline-offset: 2px;
color: #0C0C0E;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =============================================================================
Typography utilities
============================================================================= */
.eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--text-2);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow--accent { color: var(--accent); }
h1, h2, h3, h4 {
color: var(--text-0);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.01em;
}
/* accent words: no italic serif - colored orange, like the VinylBeat prototype */
h1 em, h2 em, h3 em, h4 em,
.display em, .h2 em, .h3 em, .lede em {
font-style: normal;
color: var(--accent);
}
.display {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(44px, 7vw, 88px);
line-height: 1.02;
letter-spacing: 0.01em;
}
.h2 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(30px, 4.2vw, 50px);
line-height: 1.05;
letter-spacing: 0.012em;
}
.h3 {
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
font-size: clamp(20px, 2.1vw, 26px);
line-height: 1.18;
letter-spacing: 0.02em;
}
.lede {
font-family: var(--font-sans);
font-weight: 500;
font-style: normal;
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.55;
color: var(--text-1);
letter-spacing: 0;
}
.body-copy {
font-size: 16px;
line-height: 1.68;
color: var(--text-1);
max-width: 58ch;
}
/* =============================================================================
Layout
============================================================================= */
.wrap {
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
section { padding-block: var(--rhythm); }
/* =============================================================================
Buttons
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 44px;
padding: 13px 22px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
text-decoration: none;
white-space: nowrap;
}
.btn--primary {
background: linear-gradient(180deg, var(--accent), var(--accent-2));
color: #0C0C0E;
border-color: rgba(214, 226, 255, 0.35);
box-shadow: 0 8px 24px rgba(96, 124, 214, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover {
background: linear-gradient(180deg, var(--accent-hi), var(--accent));
color: #0C0C0E;
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(96, 124, 214, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
background: rgba(255, 255, 255, 0.025);
border-color: var(--border-strong);
color: var(--text-0);
backdrop-filter: blur(10px);
}
.btn--ghost:hover {
border-color: rgba(96, 124, 214, 0.5);
color: var(--accent-hi);
background: rgba(96, 124, 214, 0.06);
}
.btn--compact {
min-height: 38px;
padding: 8px 16px;
font-size: 13px;
}
.link-quiet {
color: var(--text-1);
font-size: 14px;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 2px;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-quiet:hover { color: var(--accent-hi); border-color: var(--accent); }
/* =============================================================================
Beta banner
============================================================================= */
.beta-banner {
background: linear-gradient(90deg, rgba(96, 124, 214, 0.10), rgba(96, 124, 214, 0.07));
border-bottom: 1px solid rgba(96, 124, 214, 0.20);
padding: 10px var(--gutter);
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-1);
}
.beta-banner__inner {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: var(--max-w);
}
.beta-banner__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
flex-shrink: 0;
animation: betaPulse 2.4s var(--ease) infinite;
}
@keyframes betaPulse {
0%, 100% { opacity: 0.7; box-shadow: 0 0 6px var(--accent); }
50% { opacity: 1; box-shadow: 0 0 14px var(--accent-hi); }
}
.beta-banner a { color: var(--accent); border-bottom: 1px solid rgba(96, 124, 214, 0.3); }
.beta-banner a:hover { color: var(--accent-hi); }
/* =============================================================================
Navigation
============================================================================= */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(14, 11, 8, 0.62);
backdrop-filter: saturate(150%) blur(22px);
-webkit-backdrop-filter: saturate(150%) blur(22px);
border-bottom: 1px solid transparent;
transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-scrolled {
background: rgba(14, 11, 8, 0.90);
border-bottom-color: var(--border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.nav__inner {
display: flex;
align-items: center;
gap: 28px;
padding-block: 18px;
transition: padding-block 0.3s var(--ease);
}
.nav.is-scrolled .nav__inner { padding-block: 12px; }
.nav__brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
letter-spacing: 0.01em;
color: var(--text-0);
white-space: nowrap;
}
.nav__mark {
position: relative;
display: inline-flex;
width: 30px;
height: 30px;
}
.nav__mark img {
width: 30px;
height: 30px;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(96, 124, 214, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
transition: transform 0.3s var(--ease);
}
.nav__brand:hover .nav__mark img { transform: scale(1.06); }
.nav__pulse {
position: absolute;
top: -3px; right: -3px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--bg-0), 0 0 10px var(--accent);
animation: navPulse 2.4s var(--ease) infinite;
}
@keyframes navPulse {
0%, 100% { box-shadow: 0 0 0 2px var(--bg-0), 0 0 7px var(--accent); opacity: 0.8; }
50% { box-shadow: 0 0 0 2px var(--bg-0), 0 0 16px var(--accent-hi); opacity: 1; }
}
.nav__links {
display: flex;
gap: 32px;
margin-left: auto;
align-items: center;
}
.nav__link {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-1);
min-height: 24px;
display: inline-flex;
align-items: center;
padding: 4px 2px;
position: relative;
transition: color 0.2s var(--ease);
white-space: nowrap;
}
.nav__link::after {
content: "";
position: absolute;
left: 2px; right: 2px; bottom: 0;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--text-0); }
.nav__link:hover::after { transform: scaleX(1); }
/* NaviFin cross-promo nav item: gradient icon + gradient label (Jellyfin purple -> blue) */
.nav__link--navifin {
gap: 7px;
font-weight: 600;
background: linear-gradient(135deg, #c98fe0 0%, #2bb6e6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition: filter 0.2s var(--ease);
}
.nav__link--navifin:hover { filter: brightness(1.12) saturate(1.1); }
.nav__link--navifin::after { background: linear-gradient(135deg, #aa5cc3 0%, #00a4dc 100%); }
.nav__navifin-ic {
width: 17px;
height: 17px;
border-radius: 5px;
flex: 0 0 auto;
box-shadow: 0 1px 5px rgba(0, 164, 220, 0.40);
}
/* Mobile disclosure toggle (hamburger). Hidden on desktop. */
.nav__toggle { display: none; }
/* Mid widths: the full link row needs ~1080px; tighten spacing instead of
letting the right side clip before the hamburger takes over at 900px. */
@media (min-width: 901px) and (max-width: 1140px) {
.nav__inner { gap: 16px; padding-inline: 40px; }
.nav__links { gap: 14px; }
.nav__link { letter-spacing: 0.07em; }
.nav__inner .btn--compact { padding-left: 12px; padding-right: 12px; font-size: 12px; }
}
@media (max-width: 900px) {
.nav__inner { position: relative; }
/* Nav: shorten the always-visible CTA so the right edge never crops. */
.nav__inner .btn--compact { padding-left: 12px; padding-right: 12px; font-size: 12px; }
/* Closed bar: hide product links + NaviFin cross-promo; keep only the App Store CTA + the toggle. */
.nav__links a.nav__link-hide-sm,
.nav__links .nav__link--navifin { display: none; }
.nav__links { gap: 12px; margin-left: auto; }
.nav__toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 40px; height: 40px; margin-left: 4px; padding: 0;
background: transparent; border: 0; cursor: pointer; flex: 0 0 auto;
}
.nav__toggle span {
display: block; width: 20px; height: 2px; margin: 0 auto;
background: var(--text-0); border-radius: 2px;
transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Open: the whole link cluster drops into a full-width panel in the nav's blur/border voice. */
.nav--open .nav__links {
position: absolute; top: calc(100% + 1px); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0; margin: 0;
background: rgba(14, 11, 8, 0.97);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--border);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
padding: 6px 22px 18px;
}
.nav--open .nav__links a.nav__link-hide-sm,
.nav--open .nav__links .nav__link--navifin {
display: flex; align-items: center; padding: 14px 0;
border-bottom: 1px solid var(--border); font-size: 13px;
}
.nav--open .nav__links .btn { margin-top: 14px; align-self: flex-start; }
}
/* =============================================================================
Hero
============================================================================= */
.hero {
--lineup-parallax: 0px;
position: relative;
padding-top: clamp(60px, 9vh, 112px);
padding-bottom: clamp(40px, 6vh, 80px);
overflow: hidden;
isolation: isolate;
}
/* Ambient warm glows */
.hero__ambient {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.hero__ambient-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
will-change: opacity, transform;
}
.hero__ambient-glow--a {
top: -15%; left: 25%;
width: 840px; height: 840px;
background: radial-gradient(circle, rgba(96, 124, 214, 0.32) 0%, rgba(96, 124, 214, 0.06) 45%, transparent 68%);
animation: heroPulse 9s var(--ease) infinite;
}
.hero__ambient-glow--b {
top: 45%; left: 8%;
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(170, 92, 195, 0.20) 0%, rgba(170, 92, 195, 0.04) 50%, transparent 72%);
animation: heroPulse 11s var(--ease) infinite 2s;
}
.hero__ambient-glow--c {
top: 0; right: 0;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(122, 46, 42, 0.15) 0%, transparent 65%);
animation: heroPulse 13s var(--ease) infinite 1s;
}
/* Vinyl concentric rings */
.hero__rings {
position: absolute;
top: 5%; right: -8%;
width: 600px; height: 600px;
border-radius: 50%;
border: 1px solid rgba(96, 124, 214, 0.06);
box-shadow:
0 0 0 40px rgba(96, 124, 214, 0.03),
0 0 0 85px rgba(96, 124, 214, 0.02),
0 0 0 140px rgba(96, 124, 214, 0.012);
pointer-events: none;
z-index: -1;
}
/* Faint spinning turntable groove behind the device lineup (decorative) */
.hero__vinyl {
position: absolute;
top: 50%; right: -6%;
width: 540px; height: 540px;
transform: translateY(-50%);
border-radius: 50%;
background: repeating-radial-gradient(circle at center, #161618 0 2.5px, #0c0c0e 2.5px 5px);
opacity: 0.28;
-webkit-mask: radial-gradient(circle, #000 58%, transparent 72%);
mask: radial-gradient(circle, #000 58%, transparent 72%);
animation: vb-spin 30s linear infinite;
pointer-events: none;
z-index: -1;
}
@media (max-width: 900px) {
.hero__vinyl { width: 360px; height: 360px; right: -20%; opacity: 0.2; }
}
@keyframes heroPulse {
0%, 100% { opacity: 0.4; transform: translate3d(0, 0, 0) scale(1); }
50% { opacity: 0.65; transform: translate3d(0, -12px, 0) scale(1.04); }
}
.hero__wrap {
position: relative;
}
.hero__copy {
max-width: 860px;
margin: 0 auto 56px;
text-align: center;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: rgba(22, 17, 12, 0.60);
backdrop-filter: blur(12px);
margin-bottom: 32px;
font-size: 11px;
}
.hero__eyebrow-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
animation: navPulse 2.4s var(--ease) infinite;
flex-shrink: 0;
}
.hero__h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(52px, 8.5vw, 100px);
letter-spacing: 0.01em;
line-height: 1.03;
margin-bottom: 28px;
max-width: 18ch;
margin-inline: auto;
font-variation-settings: "opsz" 144;
}
.hero__h1 .word {
display: inline-block;
opacity: 0;
transform: translateY(16px);
animation: wordIn 0.6s var(--ease-spring) forwards;
}
.hero__h1 .word + .word { margin-left: 0.22em; }
.hero__h1 .word--italic { font-style: normal; color: var(--accent); }
@keyframes wordIn {
to { opacity: 1; transform: translateY(0); }
}
.hero__sub {
margin: 0 auto 40px;
font-style: italic;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.55;
color: var(--text-1);
max-width: 54ch;
opacity: 0;
transform: translateY(10px);
animation: wordIn 0.65s var(--ease) 0.5s forwards;
}
.hero__ctas {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
transform: translateY(8px);
animation: wordIn 0.6s var(--ease) 0.7s forwards;
}
/* =============================================================================
Hero device lineup - real screenshots
============================================================================= */
.lineup {
position: relative;
width: 100%;
margin-top: clamp(40px, 6vh, 80px);
opacity: 0;
animation: lineupFade 0.9s var(--ease) 0.9s forwards;
}
@keyframes lineupFade { to { opacity: 1; } }
.lineup__stage {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto;
aspect-ratio: 1280 / 700;
transform: translate3d(0, var(--lineup-parallax, 0px), 0);
transition: transform 0.12s linear;
will-change: transform;
}
/* Warm amber underlighting - stage floor */
.lineup__glow {
position: absolute;
inset: -12% -4% -22% -4%;
background:
radial-gradient(ellipse 52% 64% at 50% 58%, rgba(96, 124, 214, 0.52) 0%, rgba(96, 124, 214, 0.12) 38%, transparent 70%),
radial-gradient(ellipse 28% 42% at 50% 74%, rgba(168, 186, 240, 0.36) 0%, rgba(168, 186, 240, 0.04) 50%, transparent 68%),
radial-gradient(ellipse 20% 38% at 80% 60%, rgba(96, 124, 214, 0.18) 0%, transparent 72%);
filter: blur(52px);
z-index: 0;
pointer-events: none;
animation: lineupGlow 7s var(--ease) infinite;
}
@keyframes lineupGlow {
0%, 100% { opacity: 0.88; filter: blur(52px) hue-rotate(0deg); transform: scale(1); }
50% { opacity: 1; filter: blur(66px) hue-rotate(5deg); transform: scale(1.03); }
}
.lineup__floor {
position: absolute;
left: 0; right: 0; bottom: -4%;
height: 130px;
background: radial-gradient(ellipse 58% 100% at 50% 0%, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
/* Shared device figure styles */
.lineup__device {
position: absolute;
bottom: 0;
z-index: 2;
opacity: 0;
transform: translate3d(0, 28px, 0);
animation: deviceIn 1s var(--ease-spring) forwards;
animation-delay: var(--stagger, 0ms);
will-change: opacity, transform;
filter:
drop-shadow(0 52px 96px rgba(0, 0, 0, 0.68))
drop-shadow(0 16px 36px rgba(0, 0, 0, 0.52))
drop-shadow(0 4px 18px rgba(96, 124, 214, 0.10));
}
@keyframes deviceIn {
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.lineup__device img {
width: 100%;
height: auto;
display: block;
}
/* Individual device placements */
.lineup__device--tv {
left: 0;
bottom: 4%;
width: 30%;
z-index: 2;
}
.lineup__device--mac {
left: 50%;
bottom: 8%;
width: 58%;
translate: -50% 28px;
animation-name: deviceInMac;
animation-timing-function: var(--ease-spring);
z-index: 5;
}
@keyframes deviceInMac {
to { opacity: 1; translate: -50% 0; }
}
.lineup__device--ipad {
right: 6%;
bottom: 10%;
width: 44%;
z-index: 4;
}
.lineup__device--iphone {
right: 2%;
bottom: -2%;
width: 15%;
z-index: 6;
}
.lineup__device--watch {
right: 19%;
bottom: -4%;
width: 11%;
z-index: 7;
}
/* Per-device bezel framing - warm amber inner rim, rounded glass effect */
.lineup__device--tv img {
border-radius: 10px;
}
.lineup__device--ipad img,
.lineup__device--iphone img,
.lineup__device--watch img {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 0 1.5px rgba(96, 124, 214, 0.07) inset,
0 1px 0 rgba(255, 255, 255, 0.05) inset;
background: #08080a;
}
.lineup__device--ipad img { border-radius: 14px; }
.lineup__device--iphone img { border-radius: 26px; }
.lineup__device--watch img { border-radius: 30px; }
/* Responsive lineup */
@media (max-width: 960px) {
.lineup__stage { aspect-ratio: 1; }
.lineup__device--tv { left: 0; bottom: 2%; width: 44%; }
.lineup__device--mac { left: 50%; bottom: 22%; width: 84%; }
.lineup__device--ipad { right: 2%; bottom: 4%; width: 58%; }
.lineup__device--iphone { right: 4%; bottom: 0; width: 22%; }
.lineup__device--watch { right: 28%; bottom: 0; width: 15%; }
}
@media (max-width: 600px) {
.hero__h1 { font-size: clamp(42px, 12vw, 62px); }
}
.lineup__caption {
margin-top: 52px;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 18px;
color: var(--text-1);
letter-spacing: 0.02em;
}
.lineup__caption .accent { color: var(--accent); font-style: normal; }
.lineup__caption span {
display: inline-block;
padding: 0 10px;
opacity: 0;
animation: wordIn 0.5s var(--ease) forwards;
}
.lineup__caption span:nth-child(1) { animation-delay: 1.8s; }
.lineup__caption span:nth-child(2) { animation-delay: 1.98s; }
.lineup__caption span:nth-child(3) { animation-delay: 2.16s; }
/* =============================================================================
Platforms band - clickable cards with real screenshots as bg
============================================================================= */
.platforms {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding-block: clamp(56px, 8vh, 96px);
background:
radial-gradient(ellipse 55% 80% at 50% 0%, rgba(96, 124, 214, 0.06), transparent 64%),
var(--bg-1);
}
.platforms__eyebrow {
text-align: center;
margin-bottom: 52px;
}
.platforms__eyebrow .eyebrow { margin-bottom: 14px; }
.platforms__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3.8vw, 44px);
letter-spacing: 0.01em;
max-width: 24ch;
margin-inline: auto;
font-variation-settings: "opsz" 96;
}
/* 6-card grid: each card shows a real screenshot as background thumbnail */
.plat-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
list-style: none;
padding: 0;
}
@media (max-width: 1080px) { .plat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 560px) { .plat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.plat-card {
display: flex;
flex-direction: column;
border-radius: 16px;
border: 1px solid var(--border);
overflow: hidden;
background: var(--bg-2);
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
text-decoration: none;
position: relative;
min-height: 200px;
}
.plat-card:hover {
border-color: rgba(96, 124, 214, 0.38);
transform: translateY(-4px);
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(96, 124, 214, 0.12);
}
.plat-card--inactive {
opacity: 0.72;
}
.plat-card--pipeline {
opacity: 0.55;
pointer-events: none;
}
/* Real screenshot thumbnail at top of card */
.plat-card__thumb {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bg-0);
position: relative;
flex-shrink: 0;
}
.plat-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
display: block;
transition: transform 0.4s var(--ease-spring);
}
/* Watch screenshot is portrait - center it in the 16:10 thumb (avoid grid overflow) */
.plat-card__thumb--watch img {
object-fit: contain;
object-position: center;
background: var(--bg-0);
}
.plat-card:hover .plat-card__thumb img { transform: scale(1.04); }
/* Thumbnail overlay gradient - fades into card body */
.plat-card__thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, var(--bg-2) 100%);
pointer-events: none;
}
.plat-card__body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.plat-card__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
color: var(--text-0);
display: flex;
align-items: center;
justify-content: space-between;
}
.plat-card__arrow {
opacity: 0;
color: var(--accent);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
font-size: 14px;
}
.plat-card:hover .plat-card__arrow { opacity: 1; transform: translateX(2px); }
.plat-card__status {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 5px;
}
.plat-card__dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 7px var(--accent);
flex-shrink: 0;
}
.plat-card__status--muted {
color: var(--text-2);
}
.plat-card__status--muted .plat-card__dot {
background: var(--text-2);
box-shadow: none;
}
/* =============================================================================
Explore grid - per-platform cards (homepage)
The key improvement: cards now show a real screenshot instead of wireframe SVG
============================================================================= */
.explore-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 960px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .explore-grid { grid-template-columns: 1fr; } }
.xcard {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
background: var(--bg-2);
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
text-decoration: none;
color: var(--text-0);
position: relative;
}
.xcard:hover {
border-color: rgba(96, 124, 214, 0.35);
transform: translateY(-5px);
box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
}
/* Real screenshot preview fills top 55% of card */
.xcard__shot {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-1);
position: relative;
flex-shrink: 0;
}
.xcard__shot img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
display: block;
transition: transform 0.45s var(--ease-spring);
}
.xcard:hover .xcard__shot img { transform: scale(1.04); }
/* Fade at bottom of shot into card body */
.xcard__shot::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(0deg, var(--bg-2) 0%, transparent 100%);
pointer-events: none;
}
/* iPhone cards use portrait aspect ratio */
.xcard--portrait .xcard__shot {
aspect-ratio: 9 / 16;
max-height: 220px;
}
/* Watch cards use near-square */
.xcard--watch .xcard__shot {
aspect-ratio: 4 / 5;
max-height: 200px;
}
.xcard__body {
padding: 18px 22px 22px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.xcard__eyebrow {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.xcard__h {
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
letter-spacing: 0.01em;
line-height: 1.2;
color: var(--text-0);
margin: 0;
}
.xcard__tag {
font-size: 14px;
line-height: 1.6;
color: var(--text-1);
margin: 0;
}
.xcard__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.xcard__badge {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
}
.xcard__badge--live {
color: var(--accent);
background: rgba(96, 124, 214, 0.10);
border-color: rgba(96, 124, 214, 0.25);
}
.xcard__badge--coming {
color: var(--text-2);
background: rgba(255, 255, 255, 0.04);
border-color: var(--border);
}
.xcard__badge--pipeline {
color: var(--text-2);
background: transparent;
border-color: var(--border);
}
.xcard__dot {
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.xcard__badge--live .xcard__dot { box-shadow: 0 0 7px var(--accent); }
.xcard__cta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-1);
transition: color 0.2s var(--ease);
}
.xcard:hover .xcard__cta { color: var(--accent); }
.xcard__label { font-size: 12px; color: var(--text-2); }
/* Pipeline (CarPlay) - no-link */
.xcard--pipeline {
opacity: 0.6;
}
/* =============================================================================
Feature cards - 4 selling points
============================================================================= */
.features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.f-card {
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px 28px;
background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-1) 100%);
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
min-height: 200px;
display: flex;
flex-direction: column;
gap: 10px;
}
.f-card:hover {
border-color: rgba(96, 124, 214, 0.35);
transform: translateY(-3px);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
.f-card__idx {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
}
.f-card h3 { margin-bottom: 2px; }
.f-card p { color: var(--text-1); font-size: 15px; line-height: 1.65; }
.f-card__kicker {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: var(--accent);
margin-top: auto;
}
/* =============================================================================
#whats-new - "Fresh from the workshop" card illustrations.
Everything below is scoped under #whats-new / a .wn- class prefix so it
never touches the shared .f-card / .features grid used by the "4 selling
points" section above (or any other page reusing those base classes).
============================================================================= */
/* Shared inset "device screen" frame the illustrations sit in */
#whats-new .wn-illo {
border-radius: 12px;
background: var(--bg-0);
border: 1px solid var(--border);
padding: 14px 16px 12px;
margin: 2px 0 4px;
}
/* ---- Equalizer card: 10-band live EQ ---- */
#whats-new .wn-eq__bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 64px;
}
#whats-new .wn-eq__bar {
width: 14px;
height: var(--h, 45%);
border-radius: 3px 3px 1px 1px;
background: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-2));
box-shadow: 0 0 8px rgba(96, 124, 214, 0.16);
transform-origin: bottom center;
animation: wnEqPulse var(--dur, 2.1s) ease-in-out infinite;
animation-delay: var(--d, 0s);
}
#whats-new .wn-eq__bar--hot {
background: var(--accent);
box-shadow: 0 0 12px rgba(96, 124, 214, 0.32);
}
@keyframes wnEqPulse {
0%, 100% { transform: scaleY(0.86); }
50% { transform: scaleY(1.14); }
}
#whats-new .wn-eq__labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
}
/* ---- Listening Stats card: 24-hour clock ring + weekday heatmap.
Deliberately abstract: no numbers, hours, or counts are drawn, so this
never reads as a real-data claim or a faked screenshot. ---- */
#whats-new .wn-stats {
display: flex;
align-items: center;
gap: 18px;
}
#whats-new .wn-stats__clock { flex: none; overflow: visible; }
#whats-new .wn-stats__ring {
fill: none;
stroke: var(--border-strong);
stroke-width: 2;
}
#whats-new .wn-stats__tick {
stroke: var(--text-2);
stroke-width: 1;
opacity: 0.55;
}
#whats-new .wn-stats__tick--major {
stroke: var(--text-1);
stroke-width: 1.6;
opacity: 0.85;
}
#whats-new .wn-stats__arc {
fill: none;
stroke: var(--accent);
stroke-width: 3.5;
stroke-linecap: round;
filter: drop-shadow(0 0 5px var(--accent-glow));
animation: wnArcGlow 3.2s ease-in-out infinite;
}
#whats-new .wn-stats__hub { fill: var(--accent); }
@keyframes wnArcGlow {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
#whats-new .wn-stats__heatmap {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
flex: none;
}
#whats-new .wn-stats__heatmap span {
display: block;
width: 9px;
height: 9px;
border-radius: 2px;
background: var(--accent);
opacity: var(--o, 0.3);
}
/* ---- Localization card: language chips ---- */
#whats-new .wn-langs {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 2px 0 4px;
padding: 0;
}
#whats-new .wn-langs__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--bg-1);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
color: var(--text-1);
white-space: nowrap;
}
#whats-new .wn-langs__chip::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
#whats-new .wn-langs__ask {
font-size: 14px;
color: var(--text-2);
}
#whats-new .wn-langs__ask a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
#whats-new .wn-langs__ask a:hover { color: var(--accent-hi); }
/* ---- NaviSyncRock card: Rockbox project shout-out ---- */
#whats-new .wn-rockbox-note {
font-size: 13.5px;
color: var(--text-2);
padding-top: 8px;
border-top: 1px dashed var(--border);
}
#whats-new .wn-rockbox-note a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
#whats-new .wn-rockbox-note a:hover { color: var(--accent-hi); }
@media (max-width: 640px) {
#whats-new .wn-eq__bar { width: 10px; }
#whats-new .wn-stats { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
#whats-new .wn-eq__bar { animation: none; }
#whats-new .wn-stats__arc { animation: none; opacity: 1; }
}
/* =============================================================================
Privacy manifesto
============================================================================= */
.manifesto {
background:
radial-gradient(ellipse at 25% 0%, rgba(96, 124, 214, 0.08), transparent 55%),
linear-gradient(180deg, var(--bg-1), var(--bg-0));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.manifesto__inner {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 72px;
align-items: center;
}
@media (max-width: 960px) { .manifesto__inner { grid-template-columns: 1fr; gap: 48px; } }
.manifesto__nos {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(36px, 4.8vw, 58px);
line-height: 1.12;
letter-spacing: 0.01em;
margin-bottom: 24px;
font-variation-settings: "opsz" 96;
}
.manifesto__nos em { font-style: italic; color: var(--accent); }
/* Monospace "network trace" panel */
.manifesto__trace {
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
background: var(--bg-2);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.9;
color: var(--text-1);
position: relative;
overflow: hidden;
}
.manifesto__trace::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(96, 124, 214, 0.4), transparent);
}
.manifesto__trace-label {
color: var(--accent);
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 10px;
margin-bottom: 18px;
}
.manifesto__trace-ok { color: var(--accent); }
.manifesto__trace-bad { color: #d97757; } /* terracotta-red, lifted to clear AA text contrast on bg-2 while staying in palette */
/* #proofbar - at-a-glance trust row under the hero. Reuses the mono/eyebrow
voice + the warm surface; no new visual language. */
.proofbar { background: var(--bg-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proofbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 0; padding: 15px 0; }
.proofbar__item { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.proofbar__item + .proofbar__item::before { content: "·"; color: var(--text-2); opacity: .5; margin: 0 18px; }
a.proofbar__item { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
a.proofbar__item:hover { color: var(--accent-hi); }
.proofbar__item--accent { color: var(--accent); }
.proofbar__item--accent::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); vertical-align: middle; animation: vb-pulse 2.4s ease-out infinite; }
@media (max-width: 720px) {
.proofbar__inner { flex-direction: column; gap: 8px; padding: 14px 0; }
.proofbar__item + .proofbar__item::before { content: none; }
}
.manifesto__trace-rule {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--border);
color: var(--text-2);
}
.manifesto__trace-comment {
margin-top: 14px;
color: var(--accent);
font-style: italic;
}
/* =============================================================================
Works-with band: compatible Subsonic / OpenSubsonic servers
============================================================================= */
.works-with {
border-top: 1px solid var(--border);
background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
.works-with__head { max-width: 720px; margin-bottom: 48px; }
.works-with__title { margin-top: 8px; }
.works-with__lede {
color: var(--text-1);
font-size: 17px;
line-height: 1.65;
margin-top: 16px;
font-family: var(--font-sans);
}
.works-with__grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.works-with__pill {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 12px;
font-family: var(--font-sans);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.works-with__pill:hover {
border-color: rgba(96, 124, 214, 0.35);
background: rgba(96, 124, 214, 0.04);
transform: translateY(-1px);
}
/* Each pill's content is a full-bleed anchor: the whole tile is the
click target, the system arrow appears on hover (visited indicator),
and color stays inherited so .prose a or :visited overrides do not
wash the name out the way the early build 67 beta CTAs did. */
.works-with__link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 18px;
width: 100%;
color: var(--text-0);
text-decoration: none;
border-bottom: 0 !important;
}
.works-with__link:hover,
.works-with__link:visited { color: inherit; }
.works-with__pill--primary .works-with__link { color: var(--accent-hi); }
.works-with__pill--any .works-with__link { color: var(--text-1); }
.works-with__pill--primary {
background:
linear-gradient(180deg, rgba(96, 124, 214, 0.08), rgba(96, 124, 214, 0.03)),
var(--bg-2);
border-color: rgba(96, 124, 214, 0.32);
}
.works-with__pill--any {
border-style: dashed;
color: var(--text-1);
}
.works-with__name {
color: var(--text-0);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
}
.works-with__pill--primary .works-with__name { color: var(--accent-hi); }
.works-with__note {
color: var(--text-2);
font-size: 11px;
font-family: var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.works-with__foot {
margin-top: 36px;
max-width: 64ch;
color: var(--text-1);
font-size: 15px;
line-height: 1.7;
font-family: var(--font-sans);
}
.works-with__foot a {
color: var(--accent);
border-bottom: 1px solid rgba(96, 124, 214, 0.28);
}
.works-with__foot a:hover {
color: var(--accent-hi);
border-bottom-color: var(--accent-hi);
}
/* =============================================================================
About the maker
============================================================================= */
.maker {
border-top: 1px solid var(--border);
background: var(--bg-0);
}
.maker .wrap { max-width: 760px; }
.maker__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3.6vw, 42px);
line-height: 1.18;
letter-spacing: 0.01em;
margin: 12px 0 24px;
font-variation-settings: "opsz" 96;
}
.maker__copy {
color: var(--text-1);
font-size: 17px;
line-height: 1.72;
font-family: var(--font-sans);
margin-bottom: 18px;
max-width: 64ch;
}
.maker__copy strong { color: var(--text-0); font-weight: 600; }
.maker__ctas {
display: inline-flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 16px;
}
/* =============================================================================
Price band
============================================================================= */
.price {
text-align: center;
padding-block: clamp(88px, 13vh, 152px);
position: relative;
overflow: hidden;
}
/* Warm center glow */
.price::before {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 820px; height: 820px;
background: radial-gradient(circle, rgba(96, 124, 214, 0.10), transparent 65%);
filter: blur(40px);
pointer-events: none;
}
.price .eyebrow { margin-bottom: 28px; }
.price__h {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(38px, 5.5vw, 60px);
line-height: 1.1;
margin-bottom: 20px;
font-variation-settings: "opsz" 96;
}
.price__num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(88px, 14vw, 160px);
line-height: 0.92;
letter-spacing: 0.01em;
background: linear-gradient(180deg, var(--text-0) 0%, var(--accent) 60%, var(--accent-2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
font-variation-settings: "opsz" 144;
}
.price__sub {
color: var(--text-1);
font-style: italic;
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
margin-bottom: 44px;
}
.price__ctas {
display: inline-flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
}
.price__trial {
margin-top: 28px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-2);
}
/* =============================================================================
FAQ accordion
============================================================================= */
.faq {
border-top: 1px solid var(--border);
}
.faq__inner { max-width: 840px; margin-inline: auto; }
.faq__item {
border-top: 1px solid var(--border);
}
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__q {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 24px 4px;
background: transparent;
border: 0;
color: var(--text-0);
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(18px, 1.8vw, 22px);
text-align: left;
cursor: pointer;
min-height: 44px;
transition: color 0.2s var(--ease);
}
.faq__q:hover { color: var(--accent-hi); }
.faq__plus {
color: var(--accent);
font-size: 24px;
line-height: 1;
flex-shrink: 0;
transition: transform 0.35s var(--ease);
}
.faq__item.is-open .faq__plus { transform: rotate(45deg); }
.faq__panel {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq__item.is-open .faq__panel { max-height: 300px; }
.faq__a {
padding: 0 4px 24px;
color: var(--text-1);
font-size: 16px;
line-height: 1.72;
max-width: 66ch;
}
.faq__a a { color: var(--accent); border-bottom: 1px solid rgba(96, 124, 214, 0.3); }
.faq__a a:hover { color: var(--accent-hi); }
/* =============================================================================
Footer
============================================================================= */
.footer {
background: var(--bg-1);
border-top: 1px solid var(--border);
padding-block: 60px 40px;
color: var(--text-1);
font-size: 14px;
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 40px;
}
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 400;
font-size: 19px;
color: var(--text-0);
margin-bottom: 10px;
letter-spacing: 0.01em;
}
.footer__brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer h3 {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 14px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer ul a { color: var(--text-1); font-size: 14px; transition: color 0.2s var(--ease); }
.footer ul a:hover { color: var(--accent-hi); }
.footer__bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding-top: 22px;
border-top: 1px solid var(--border);
font-size: 11px;
font-family: var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
}
.footer__heart { color: var(--accent); }
/* =============================================================================
Scroll-reveal system
============================================================================= */
.reveal-ready .reveal,
.reveal-ready .reveal-stagger > * {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition:
opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
will-change: opacity, transform;
}
.reveal-ready .reveal.is-in,
.reveal-ready .reveal-stagger.is-in > *,
.reveal-ready .reveal-stagger > .is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.reveal-ready .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-ready .reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-ready .reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-ready .reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-ready .reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
.reveal-ready .reveal-stagger > *:nth-child(6) { transition-delay: 400ms; }
.reveal-ready .reveal-stagger > *:nth-child(7) { transition-delay: 480ms; }
.reveal-ready .reveal-stagger > *:nth-child(8) { transition-delay: 560ms; }
.reveal-ready .reveal-stagger > *:nth-child(9) { transition-delay: 640ms; }
.reveal-ready .reveal-stagger > *:nth-child(10) { transition-delay: 720ms; }
.reveal-ready .reveal-stagger > *:nth-child(11) { transition-delay: 800ms; }
.reveal-ready .reveal-stagger > *:nth-child(12) { transition-delay: 880ms; }
/* Feature grid wave */
.reveal-ready .features > .f-card {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition:
opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
border-color 0.25s var(--ease);
}
.reveal-ready .features.is-in > .f-card:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-ready .features.is-in > .f-card:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.reveal-ready .features.is-in > .f-card:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.reveal-ready .features.is-in > .f-card:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.reveal-ready .explore-grid > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition:
opacity 0.65s cubic-bezier(0.2, 0.6, 0.2, 1),
transform 0.65s cubic-bezier(0.2, 0.6, 0.2, 1),
border-color 0.3s var(--ease),
box-shadow 0.3s var(--ease);
}
.reveal-ready .explore-grid.is-in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-ready .explore-grid.is-in > *:nth-child(2) { transition-delay: 70ms; opacity: 1; transform: none; }
.reveal-ready .explore-grid.is-in > *:nth-child(3) { transition-delay: 140ms; opacity: 1; transform: none; }
.reveal-ready .explore-grid.is-in > *:nth-child(4) { transition-delay: 210ms; opacity: 1; transform: none; }
.reveal-ready .explore-grid.is-in > *:nth-child(5) { transition-delay: 280ms; opacity: 1; transform: none; }
.reveal-ready .explore-grid.is-in > *:nth-child(6) { transition-delay: 350ms; opacity: 1; transform: none; }
.reveal-ready .plat-grid > * {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition:
opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1),
transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal-ready .plat-grid.is-in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-ready .plat-grid.is-in > *:nth-child(2) { transition-delay: 55ms; opacity: 1; transform: none; }
.reveal-ready .plat-grid.is-in > *:nth-child(3) { transition-delay: 110ms; opacity: 1; transform: none; }
.reveal-ready .plat-grid.is-in > *:nth-child(4) { transition-delay: 165ms; opacity: 1; transform: none; }
.reveal-ready .plat-grid.is-in > *:nth-child(5) { transition-delay: 220ms; opacity: 1; transform: none; }
.reveal-ready .plat-grid.is-in > *:nth-child(6) { transition-delay: 275ms; opacity: 1; transform: none; }
/* =============================================================================
Section layout helpers
============================================================================= */
.sec-head {
margin-bottom: 52px;
max-width: 56ch;
}
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head .h2 { margin-bottom: 18px; }
.sec-head p { color: var(--text-1); font-size: 17px; line-height: 1.65; }
/* =============================================================================
Platform pages - platform.css additions
============================================================================= */
/* Breadcrumb */
.crumb {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.crumb a { color: var(--text-1); transition: color 0.2s var(--ease); }
.crumb a:hover { color: var(--accent); }
.crumb__sep { opacity: 0.4; }
.crumb__current { color: var(--text-0); }
/* Platform hero */
.p-hero {
position: relative;
padding-top: clamp(56px, 8vh, 100px);
padding-bottom: clamp(40px, 6vh, 72px);
overflow: hidden;
}
.p-hero__ambient {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.p-hero__glow {
position: absolute;
top: -20%; left: 30%;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(96, 124, 214, 0.20), transparent 65%);
filter: blur(70px);
}
.p-hero__grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
opacity: 0.5;
}
.p-hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 6.5vw, 80px);
line-height: 1.05;
letter-spacing: 0.01em;
margin-bottom: 24px;
font-variation-settings: "opsz" 144;
}
.p-hero h1 .word {
display: inline-block;
opacity: 0;
transform: translateY(14px);
animation: wordIn 0.6s var(--ease-spring) forwards;
}
.p-hero h1 .word + .word { margin-left: 0.22em; }
.p-hero__sub {
font-size: 18px;
line-height: 1.62;
color: var(--text-1);
max-width: 58ch;
margin-bottom: 36px;
opacity: 0;
transform: translateY(8px);
animation: wordIn 0.6s var(--ease) 0.4s forwards;
}
.p-hero__ctas {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(6px);
animation: wordIn 0.6s var(--ease) 0.6s forwards;
}
.p-hero__wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 64px;
align-items: center;
}
@media (max-width: 960px) {
.p-hero__wrap { grid-template-columns: 1fr; gap: 40px; }
.p-hero__shot { order: -1; }
}
.p-hero__shot img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
border: 1px solid var(--border);
box-shadow: 0 40px 88px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(96, 124, 214, 0.07);
}
/* macOS screenshots have built-in OS window shadow - skip ours to avoid
double-shadow / picture-frame effect (matches .p-shot__media img rule below) */
.p-hero__shot img[src*="/macos/"] {
border: none;
box-shadow: none;
border-radius: 0;
}
/* Tall portrait hero shot (iPhone, Watch) */
.p-hero__shot--portrait {
max-width: 340px;
margin-inline: auto;
}
.p-hero__shot--portrait img { border-radius: 28px; }
/* Stats strip */
.p-stats {
display: flex;
gap: 0;
flex-wrap: wrap;
list-style: none;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: linear-gradient(180deg, rgba(28, 21, 16, 0.55), rgba(22, 17, 12, 0.40));
}
.p-stat {
flex: 1;
min-width: 160px;
padding: 22px 24px;
border-right: 1px solid var(--border);
}
.p-stat:last-child { border-right: 0; }
@media (max-width: 720px) {
.p-stat { border-right: 0; border-bottom: 1px solid var(--border); }
.p-stat:last-child { border-bottom: 0; }
}
.p-stat__num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(26px, 3vw, 36px);
letter-spacing: 0.01em;
color: var(--text-0);
font-variation-settings: "opsz" 72;
margin-bottom: 4px;
}
.p-stat__num .accent { color: var(--accent); }
.p-stat__label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
line-height: 1.5;
}
/* Screenshot feature rows */
.p-shots { display: flex; flex-direction: column; gap: 100px; }
.p-shot {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
.p-shot--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.p-shot--reverse .p-shot__media { order: 2; }
.p-shot--reverse .p-shot__copy { order: 1; }
@media (max-width: 900px) {
.p-shot, .p-shot--reverse { grid-template-columns: 1fr; gap: 32px; }
.p-shot--reverse .p-shot__media { order: 0; }
.p-shot--reverse .p-shot__copy { order: 0; }
}
.p-shot__media img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 32px 72px rgba(0, 0, 0, 0.52);
}
/* macOS screenshots ship with built-in OS window shadow - skip our box-shadow
on macOS images to avoid double-shadow / picture-frame effect */
.p-shot__media img[src*="/macos/"] {
box-shadow: none;
border-radius: 0;
}
/* =========================================================================
Lightbox - click any platform-page screenshot to open full-screen
========================================================================= */
.lightbox-trigger {
cursor: zoom-in;
transition: filter 0.2s var(--ease);
}
.lightbox-trigger:hover {
filter: brightness(1.04);
}
.lightbox {
position: fixed;
inset: 0;
background: rgba(8, 6, 4, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 4vh 4vw;
cursor: zoom-out;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
}
.lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.lightbox__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
transform: scale(0.96);
transition: transform 0.3s var(--ease-spring);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption {
position: absolute;
bottom: max(20px, 3vh);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.10em;
color: var(--text-1);
text-transform: uppercase;
padding: 8px 16px;
background: rgba(14, 11, 8, 0.6);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 999px;
}
.lightbox__close {
position: absolute;
top: max(16px, 2vh);
right: max(16px, 2vw);
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(14, 11, 8, 0.6);
backdrop-filter: blur(10px);
color: var(--text-0);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox__close:hover {
background: rgba(96, 124, 214, 0.15);
border-color: rgba(96, 124, 214, 0.40);
}
/* Disable lightbox below 720px (touch users zoom natively) */
@media (max-width: 720px) {
.lightbox-trigger { cursor: default; }
}
.p-shot__copy .eyebrow { margin-bottom: 14px; color: var(--accent); }
.p-shot__copy h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.5vw, 30px); margin-bottom: 14px; letter-spacing: 0.01em; }
.p-shot__copy p { color: var(--text-1); font-size: 16px; line-height: 1.68; }
.p-shot__copy code {
font-family: var(--font-mono);
font-size: 13px;
background: var(--bg-2);
border: 1px solid var(--border);
padding: 1px 6px;
border-radius: 4px;
color: var(--text-0);
}
/* Screenshot gallery - responsive grid, wraps naturally */
.strip {
padding-block: 16px 32px;
}
.strip__track {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.strip__item {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--bg-1);
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.strip__item:hover {
border-color: rgba(96, 124, 214, 0.3);
transform: translateY(-2px);
}
.strip__item img { display: block; width: 100%; height: auto; }
.strip__caption {
padding: 12px 16px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.10em;
color: var(--text-2);
border-top: 1px solid var(--border);
text-transform: uppercase;
}
/* =============================================================================
Prose - support & privacy pages
============================================================================= */
.prose {
max-width: 680px;
margin: 80px auto;
padding: 0 var(--gutter);
}
.prose h1 {
font-family: var(--font-display);
font-weight: 700;
font-style: normal;
font-size: clamp(36px, 4.5vw, 52px);
margin-bottom: 10px;
letter-spacing: 0.01em;
font-variation-settings: "opsz" 96;
}
.prose .meta {
color: var(--text-2);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 52px;
}
.prose h2 {
font-family: var(--font-sans);
font-size: 21px;
font-weight: 600;
margin: 52px 0 14px;
color: var(--text-0);
letter-spacing: 0.01em;
}
.prose p, .prose li {
color: var(--text-1);
font-size: 16px;
line-height: 1.78;
margin-bottom: 14px;
}
.prose ul { padding-left: 20px; }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(96, 124, 214, 0.28); padding-bottom: 1px; }
.prose a:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
/* Beta program (and any future inline CTA inside .prose) - the generic
`.prose a` rule above paints anchor text in `--accent` and adds a faux
underline border, which would override `.btn--primary`'s dark text +
bright orange fill and produce a barely-readable cream-on-tan button.
These resets restore the button's intended colours when it lives
inside a long-form .prose page. */
.prose a.btn { color: #0C0C0E; border-bottom: none; padding-bottom: 13px; }
.prose a.btn:hover { color: #0C0C0E; border-bottom: none; }
.prose a.btn--ghost { color: var(--text-0); }
.prose a.btn--ghost:hover { color: var(--accent-hi); }
.prose code {
font-family: var(--font-mono);
font-size: 13px;
background: var(--bg-2);
border: 1px solid var(--border);
padding: 1px 6px;
border-radius: 4px;
color: var(--text-0);
}
.prose .contact-box {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 28px;
margin-top: 12px;
}
.prose .contact-box p { margin: 0; color: var(--text-0); font-size: 16px; }
/* =========================================================
THEATER - cinematic sticky-scroll showcase
5 acts · ~100vh each · height:480vh total
========================================================= */
/* --- Container + sticky stage --- */
.theater {
position: relative;
height: 480vh;
margin-top: 30px;
}
.theater__sticky {
position: sticky; top: 0;
height: 100vh;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
/* --- Stage backdrop: warm rings + vinyl spin --- */
.theater__backdrop {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 70% at 50% 55%, rgba(96, 124, 214,.18), transparent 65%),
radial-gradient(ellipse 80% 100% at 50% 100%, rgba(170, 92, 195,.10), transparent 70%);
}
.theater__backdrop::before {
content: ""; position: absolute; left: 50%; top: 55%;
width: 1400px; height: 1400px; transform: translate(-50%,-50%);
border-radius: 50%; opacity: .5;
background:
radial-gradient(circle, transparent 38%, rgba(96, 124, 214,.05) 38.4%, transparent 39%),
radial-gradient(circle, transparent 50%, rgba(96, 124, 214,.04) 50.4%, transparent 51%),
radial-gradient(circle, transparent 62%, rgba(96, 124, 214,.03) 62.4%, transparent 63%);
animation: vinylSpin 220s linear infinite;
}
@keyframes vinylSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* --- Progress rail --- */
.theater__rail {
position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
display: flex; align-items: center; gap: 10px;
padding: 10px 18px; border-radius: 999px;
background: rgba(14,11,8,.55); backdrop-filter: blur(14px);
border: 1px solid var(--border); z-index: 30;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-2);
}
.theater__rail-dots { display: flex; gap: 0; align-items: center; }
.theater__rail-dot {
/* 24x24 hit target (WCAG 2.2 Target Size Minimum); visual dot is the ::before */
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; cursor: pointer;
appearance: none; -webkit-appearance: none; font: inherit; outline-offset: 2px;
}
.theater__rail-dot::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--text-2); opacity: .45;
transition: width .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease), box-shadow .2s var(--ease), border-radius .35s var(--ease);
}
.theater__rail-dot:hover::before {
opacity: 0.85;
background: var(--accent);
box-shadow: 0 0 6px rgba(96, 124, 214, 0.6);
}
.theater__rail-dot.is-active {
cursor: default;
}
.theater__rail-dot.is-active::before {
background: var(--accent); opacity: 1;
box-shadow: 0 0 10px var(--accent);
width: 18px; border-radius: 3px;
}
.theater__rail-label { color: var(--accent); min-width: 9ch; }
/* --- Stage title (centred, above acts) --- */
.theater__title {
position: absolute; top: 8vh; left: 0; right: 0;
text-align: center; z-index: 20; pointer-events: none;
}
.theater__title-eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
display: block;
}
.theater__title-h {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(28px,3.6vw,44px); line-height: 1.08;
letter-spacing: 0.01em; color: var(--text-0);
font-variation-settings: "opsz" 96;
max-width: 24ch; margin-inline: auto;
}
.theater__title-h em { font-style: italic; color: var(--accent); }
/* --- Keyboard hint --- */
.theater__hint {
position: absolute; right: 24px; top: 24px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: var(--text-2);
display: flex; align-items: center; gap: 8px;
z-index: 30;
}
.theater__hint kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px;
background: rgba(28,21,16,.7); border: 1px solid var(--border);
border-radius: 4px; color: var(--text-1); font-family: var(--font-mono); font-size: 10px;
}
/* --- Act base: absolute, cross-fades via opacity --- */
.act {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity .8s var(--ease);
z-index: 10;
}
.act.is-active { opacity: 1; pointer-events: auto; z-index: 11; }
.act__stage {
position: relative;
/* Height-aware width cap: on short viewports the centred stage must not rise
into the .theater__title overlay (top:8vh + ~2 title lines). Bounding width
by a vh-derived term keeps the device clear of the title at every height;
the term only binds on short screens, so tall screens are unchanged.
max() floor guards against a negative width on pathologically short windows. */
width: min(1180px, 92vw, max(380px, 160vh - 571px));
aspect-ratio: 1180/620;
display: flex; align-items: center; justify-content: center;
}
/* --- Caption block (with backdrop glass - user tweak a) --- */
.act__caption {
position: absolute; right: max(40px, 5vw); bottom: 14vh;
max-width: 380px; z-index: 25;
transform: translateY(20px); opacity: 0;
transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;
text-align: right;
padding: 22px 26px;
background: linear-gradient(135deg, rgba(14,11,8,.78), rgba(14,11,8,.62));
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.act.is-active .act__caption { opacity: 1; transform: none; }
.act__caption-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--accent);
padding: 6px 12px; border: 1px solid rgba(96, 124, 214,.3);
border-radius: 999px; background: rgba(96, 124, 214,.08);
margin-bottom: 14px;
}
.act__caption-eyebrow .dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 6px var(--accent);
}
.act__caption-h {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(24px,2.6vw,34px); line-height: 1.15;
letter-spacing: 0.01em; color: var(--text-0); margin-bottom: 10px;
font-variation-settings: "opsz" 72;
text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.act__caption-h em { font-style: italic; color: var(--accent); }
.act__caption-p {
font-size: 14.5px; line-height: 1.65; color: var(--text-0); opacity: .92;
}
@media (max-width: 900px) {
.act__caption { right: 24px; left: 24px; bottom: 18vh; max-width: none; text-align: center; }
}
/* ---- Act 1: Apple TV (wide hero) ---- */
.dev-tv {
position: relative; width: 78%;
border-radius: 14px; overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,.04) inset,
0 60px 120px rgba(0,0,0,.7),
0 18px 40px rgba(0,0,0,.5),
0 0 80px rgba(96, 124, 214,.18);
transform: scale(.96); opacity: 0;
transition: transform 1s var(--ease-spring), opacity .8s var(--ease);
}
.act.is-active .dev-tv { transform: scale(1); opacity: 1; }
.dev-tv img { width: 100%; height: auto; display: block; }
.dev-tv__stand {
position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
width: 18%; height: 14px;
background: linear-gradient(180deg,#17171B,#08080a);
border-radius: 0 0 6px 6px;
box-shadow: 0 18px 30px rgba(0,0,0,.6);
}
/* ---- Act 2: Mac (main window + mini-player floater - user tweak c: floater on LEFT) ---- */
.act-mac__group { position: relative; width: 90%; }
.dev-mac {
position: relative; width: 100%;
border-radius: 14px; overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,.04) inset,
0 60px 110px rgba(0,0,0,.7),
0 0 90px rgba(96, 124, 214,.16);
transform: scale(.94) translateY(20px); opacity: 0;
transition: transform 1.1s var(--ease-spring), opacity .8s var(--ease);
}
.act.is-active .dev-mac { transform: scale(1) translateY(0); opacity: 1; }
.dev-mac img { width: 100%; height: auto; display: block; }
/* Floater moved to LEFT side (user tweak c) */
.dev-mac__floater {
position: absolute; left: -3%; bottom: -12%;
width: 32%;
filter:
drop-shadow(0 40px 60px rgba(0,0,0,.75))
drop-shadow(0 12px 24px rgba(0,0,0,.5))
drop-shadow(0 0 50px rgba(96, 124, 214,.28));
transform: translate(-40px, 40px) rotate(-4deg) scale(.9); opacity: 0;
transition: transform 1.1s var(--ease-spring) .25s, opacity .9s var(--ease) .2s;
background: transparent;
}
.act.is-active .dev-mac__floater { transform: translate(0, 0) rotate(2deg) scale(1); opacity: 1; }
.dev-mac__floater img { width: 100%; height: auto; display: block; background: transparent; }
/* ---- Act 3: iPad (large + lyric zoom + connector) ---- */
/* The iPad group is 4:3, so it's taller than the shared 1180/620 stage aspect and
makes this stage grow past its siblings (top rises into the title on short/mid
viewports). Cap it on the iPad's real effective aspect so it clears like the rest. */
.act--ipad .act__stage { width: min(1180px, 92vw, max(360px, 144vh - 513px)); }
.act-ipad__group { position: relative; width: 78%; }
.dev-ipad {
position: relative; width: 100%; aspect-ratio: 1800/1350;
border-radius: 18px; overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,.04) inset,
0 60px 110px rgba(0,0,0,.7),
0 0 100px rgba(96, 124, 214,.18);
transform: scale(.95); opacity: 0;
transition: transform 1.1s var(--ease-spring), opacity .8s var(--ease);
}
.act.is-active .dev-ipad { transform: scale(1); opacity: 1; }
.dev-ipad img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Lyric macro zoom overlay - pops out to the LEFT of the iPad. Kept below the
iPad's top edge (was top:-12%, which poked up into the centred .theater__title
across a wide band of viewport heights). */
.dev-ipad__zoom {
position: absolute; left: -8%; top: 6%;
width: 46%; aspect-ratio: 1/1.1;
border-radius: 14px; overflow: hidden;
border: 1px solid rgba(96, 124, 214,.35);
box-shadow:
0 30px 60px rgba(0,0,0,.6),
0 0 0 6px rgba(14,11,8,.92),
0 0 80px rgba(96, 124, 214,.30);
transform: translate(-30px,30px) scale(.85); opacity: 0;
transition: transform 1.1s var(--ease-spring) .3s, opacity .9s var(--ease) .25s;
background: var(--bg-1);
}
.act.is-active .dev-ipad__zoom { transform: translate(0,0) scale(1); opacity: 1; }
.dev-ipad__zoom-img {
position: absolute; inset: 0;
background-image: url("assets/screenshots/ipad/navibeat-ipad-lyrics.jpg");
background-size: 300%;
background-position: 35% 38%;
animation: theaterZoomDrift 14s var(--ease) infinite alternate;
}
@keyframes theaterZoomDrift {
0% { background-position: 30% 35%; transform: scale(1); }
100% { background-position: 42% 48%; transform: scale(1.05); }
}
.dev-ipad__zoom-tag {
position: absolute; left: 14px; top: 14px; z-index: 2;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
text-transform: uppercase; color: var(--accent);
padding: 5px 10px; border-radius: 999px;
background: rgba(14,11,8,.85); border: 1px solid rgba(96, 124, 214,.4);
display: inline-flex; align-items: center; gap: 6px;
}
.dev-ipad__zoom-tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
/* connector line from main iPad shot to zoom overlay */
.dev-ipad__line {
position: absolute; left: 36%; top: 35%;
width: 1px; height: 1px; pointer-events: none; z-index: 1;
}
.dev-ipad__line::before {
content: ""; position: absolute; left: 0; top: 0;
width: 90px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(96, 124, 214,.6), transparent);
transform: rotate(-30deg) translate(-90px,-30px);
}
/* ---- Act 4: iPhone + Watch ---- */
.act-iphone__group {
position: relative; width: 90%;
display: flex; align-items: flex-end; justify-content: center; gap: 6%;
}
.dev-iphone {
position: relative; width: 22%; aspect-ratio: 644/1400;
border-radius: 38px; overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 0 0 8px #08080a,
0 50px 90px rgba(0,0,0,.7),
0 0 80px rgba(96, 124, 214,.22);
transform: translateY(40px) scale(.95); opacity: 0;
transition: transform 1.1s var(--ease-spring), opacity .8s var(--ease);
background: #000;
}
.act.is-active .dev-iphone { transform: none; opacity: 1; }
.dev-iphone img { width: 100%; height: 100%; object-fit: cover; }
.dev-iphone--lyrics { --d: .15s; transform: translateY(40px) scale(.92) rotate(-3deg); }
.dev-iphone--np { --d: 0s; transform: translateY(60px) scale(.94); }
.dev-iphone--queue { --d: .3s; transform: translateY(40px) scale(.92) rotate(3deg); }
.act.is-active .dev-iphone--lyrics { transform: translateY(-12px) scale(1) rotate(-4deg); }
.act.is-active .dev-iphone--queue { transform: translateY(-12px) scale(1) rotate(4deg); }
.dev-iphone { transition-delay: var(--d); }
/* Apple Watch - hovers top-right near phones */
.dev-watch {
position: absolute; right: 6%; top: 8%;
width: 13%; aspect-ratio: 410/502;
border-radius: 36px; overflow: hidden;
border: 5px solid #141417;
box-shadow:
0 30px 60px rgba(0,0,0,.7),
0 0 0 1px rgba(96, 124, 214,.25) inset,
0 0 70px rgba(96, 124, 214,.30);
background: #000;
transform: translate(20px,-20px) scale(.85) rotate(8deg); opacity: 0;
transition: transform 1.2s var(--ease-spring) .35s, opacity .9s var(--ease) .3s;
}
.act.is-active .dev-watch { transform: translate(0,0) scale(1) rotate(-3deg); opacity: 1; }
.dev-watch img { width: 100%; height: 100%; object-fit: cover; }
.dev-watch__crown {
position: absolute; right: -7px; top: 35%;
width: 5px; height: 14%;
background: linear-gradient(180deg,#2a2a2e,#141417);
border-radius: 2px;
}
/* ---- Act 5: Family - all five devices together ---- */
.family {
/* Family act sets its own width (ignores the .act__stage cap), so it gets the
same height-aware clearance term to stay below the title on short viewports. */
position: relative; width: min(1280px, 95vw, max(400px, 158vh - 565px));
aspect-ratio: 1280/680;
}
.family__device {
position: absolute; opacity: 0; transform: translateY(40px) scale(.96);
transition: opacity 1s var(--ease) var(--d,0s), transform 1.2s var(--ease-spring) var(--d,0s);
filter: drop-shadow(0 50px 90px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(96, 124, 214,.12));
}
.act.is-active .family__device { opacity: 1; transform: none; }
.family__device img { width: 100%; height: auto; display: block; border-radius: 8px; }
.family__tv { left: 0; bottom: 6%; width: 30%; --d: 0s; }
.family__mac { left: 50%; bottom: 10%; width: 56%; transform: translate(-50%,40px) scale(.96); --d: .15s; }
.act.is-active .family__mac { transform: translateX(-50%); }
.family__ipad { right: 8%; bottom: 14%; width: 40%; --d: .30s; z-index: 3; }
.family__ipad img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset; }
.family__iphone { right: 4%; bottom: 0; width: 14%; --d: .45s; z-index: 5; }
.family__iphone img { border-radius: 24px; box-shadow: 0 0 0 1px rgba(96, 124, 214,.08) inset, 0 0 0 5px #08080a; }
/* Watch repositioned to top-right, more visible (user tweak b) */
.family__watch { right: 6%; top: 14%; width: 14%; --d: .60s; z-index: 7; }
.family__watch img { border-radius: 22px; box-shadow: 0 0 0 1px rgba(96, 124, 214,.12) inset, 0 0 0 4px #141417; }
/* Family - receipt overlay (Universal Purchase) */
.family__receipt {
position: absolute; left: 6%; top: 14%;
background: rgba(14,11,8,.86); backdrop-filter: blur(12px);
border: 1px solid var(--border-strong); border-radius: 14px;
padding: 18px 22px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
color: var(--text-1); line-height: 2;
min-width: 240px;
opacity: 0; transform: translateY(20px);
transition: opacity .7s var(--ease) .8s, transform .7s var(--ease) .8s;
box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.act.is-active .family__receipt { opacity: 1; transform: none; }
.family__receipt-h { color: var(--accent); text-transform: uppercase; font-size: 9px; letter-spacing: .2em; margin-bottom: 8px; }
.family__receipt-row { display: flex; justify-content: space-between; gap: 24px; }
.family__receipt-row b { color: var(--text-0); font-weight: 500; }
.family__receipt-rule { height: 1px; background: var(--border); margin: 8px 0; }
.family__receipt-total { color: var(--accent); font-size: 13px; }
/* ---- Mobile fallback (≤ 720px): static stacked layout ---- */
@media (max-width: 720px) {
.theater { height: auto; }
.theater__sticky { position: relative; height: auto; padding-block: 48px; flex-direction: column; }
.theater__rail, .theater__hint { display: none; }
.theater__title { position: relative; top: 0; margin-bottom: 24px; }
.act { position: relative; opacity: 1; pointer-events: auto; padding: 32px 0; }
.act__caption { position: relative; right: auto; bottom: auto; margin-top: 16px; max-width: none; text-align: center; }
}
/* ---- Reduced-motion: disable all theater keyframes + transitions ---- */
@media (prefers-reduced-motion: reduce) {
.theater__backdrop::before { animation: none; }
.dev-ipad__zoom-img { animation: none; }
.dev-tv, .dev-mac, .dev-mac__floater,
.dev-ipad, .dev-ipad__zoom,
.dev-iphone, .dev-watch,
.family__device, .family__receipt,
.act__caption { transition: none; opacity: 1; transform: none; }
.act { transition: none; }
}
/* =============================================================================
MOBILE EMERGENCY FIXES - 2026-04-29 night
The 5-act theater (480vh sticky scroll) is a desktop-only experience.
Below 720px every act fails to lay out: stages shrink to ~190px tall,
captions overlap the device, and you're left scrolling through ~4000px
of empty dark backdrop. Hide the theater entirely on phones; the
platforms band immediately below already does the "all five Apple
screens" job in a 6-up grid.
Also tighten the hero-area things that crammed at narrow widths:
nav button text shortens, hero CTAs stack vertically, banner copy
wraps so the link isn't cropped off the right edge.
============================================================================= */
@media (max-width: 720px) {
/* The cinematic theater is a desktop showcase; on phones the platforms
band right after it carries the "every Apple screen" message in a clean
6-up grid. Skip the 480vh dead-air block entirely. */
.theater { display: none; }
/* Hero CTAs: stack vertically + full-width buttons. Two CTAs side-by-side
never fit at iPhone widths (390px content area). */
.hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
.hero__ctas .btn { width: 100%; justify-content: center; }
.hero__ctas .link-quiet { text-align: center; }
/* Beta banner: allow the copy + link to wrap onto a second line so the
"Join TestFlight →" link is never cropped. */
.beta-banner__inner { flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; text-align: center; }
/* Hero ambient rings: reposition + shrink so they don't push content
off the right edge on a narrow viewport. */
.hero__rings { width: 320px; height: 320px; right: -25%; top: 2%; }
/* Lineup: keep the existing 600px / 960px placements; just constrain the
stage so taller-than-wide phones don't end up with a flat sliver. */
.lineup__stage { aspect-ratio: 1.05 / 1; max-width: 100%; }
.lineup { margin-top: 32px; }
.lineup__caption { margin-top: 36px; font-size: 22px; }
}
/* Even tighter at iPhone-mini-class widths (≤390px). */
@media (max-width: 400px) {
.hero__h1 { font-size: clamp(36px, 11vw, 52px); }
.hero__sub { font-size: 14.5px; }
.nav__brand { font-size: 14px; gap: 8px; }
.nav__mark { width: 24px; height: 24px; }
.nav__inner .btn--compact { font-size: 11px; padding: 6px 10px; }
}
/* =============================================================================
Vinyl / audiophile signature motifs (added for the VinylBeat reskin).
Decorative only - these never replace the app brand icon.
============================================================================= */
@keyframes vb-spin { to { transform: rotate(360deg); } }
@keyframes vb-eq { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
@keyframes vb-float{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes vb-pulse{ 0%, 100% { box-shadow: 0 0 0 0 rgba(96, 124, 214,0.45); } 50% { box-shadow: 0 0 0 16px rgba(96, 124, 214,0); } }
/* Speaker-mesh perforated-grille texture (apply to a section/card) */
.mesh {
background-color: var(--bg-3);
background-image:
radial-gradient(circle at 34% 34%, rgba(255,255,255,.06) 0 .8px, transparent 1.2px),
radial-gradient(circle at center, #050505 0 1.5px, transparent 1.9px);
background-size: 9px 9px, 9px 9px;
box-shadow: inset 0 0 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
}
/* Live equalizer / waveform - author bars as with inline height + delay */
.eq { display: flex; align-items: center; gap: 3px; height: 96px; }
.eq span {
display: block; width: 4px; border-radius: 4px; transform-origin: center;
background: linear-gradient(180deg, #FBB67E, #E8782E);
animation: vb-eq 1s ease-in-out infinite;
}
.eq span.hot { background: var(--accent); }
.wave-div { display: flex; justify-content: center; padding-top: 10px; }
/* Spinning vinyl record + tonearm (hero decoration) */
.vinyl-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 430px; }
.vinyl { position: relative; width: 320px; height: 320px; animation: vb-float 7s ease-in-out infinite; }
.vinyl__glow { position: absolute; inset: -36px; border-radius: 50%;
background: radial-gradient(circle, rgba(96, 124, 214,.30), transparent 65%); filter: blur(6px); }
.vinyl__disc { position: absolute; inset: 0; border-radius: 50%;
background: linear-gradient(150deg, #26262a, #08080a);
box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.08); }
.vinyl__grooves { position: absolute; inset: 14px; border-radius: 50%;
background: repeating-radial-gradient(circle at center, #161618 0 2.2px, #080808 2.2px 4px);
animation: vb-spin 20s linear infinite; box-shadow: inset 0 0 50px rgba(0,0,0,.9); }
.vinyl__sheen { position: absolute; inset: 14px; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
background: conic-gradient(from 35deg, rgba(255,255,255,.12), transparent 23%, rgba(255,255,255,.04) 51%, transparent 77%, rgba(255,255,255,.12)); }
.vinyl__label { position: absolute; inset: 0; margin: auto; width: 108px; height: 108px; border-radius: 50%;
background: radial-gradient(circle at 34% 28%, var(--accent-hi), var(--accent) 58%, var(--accent-2));
box-shadow: 0 0 0 5px var(--bg-0), 0 6px 18px rgba(0,0,0,.55);
display: flex; align-items: center; justify-content: center; z-index: 3; }
.vinyl__hole { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-0); }
.arm__pivot { position: absolute; top: 2px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #e8e8e8, #9a9a9a); box-shadow: 0 3px 8px rgba(0,0,0,.6); z-index: 4; }
.arm__bar { position: absolute; top: 12px; right: 8px; width: 150px; height: 7px; border-radius: 4px;
background: linear-gradient(90deg, #dcdcdc, #8f8f8f); transform-origin: right center; transform: rotate(42deg);
box-shadow: 0 3px 7px rgba(0,0,0,.5); z-index: 4; }
/* "Beat" accent on the NaviBeat wordmark (name unchanged, just colored) */
.brand-beat { color: var(--accent); }
@media (max-width: 900px) {
.vinyl-stage { min-height: 340px; }
.vinyl { width: 260px; height: 260px; }
}
/* =============================================================================
NaviFin-only components (not in the NaviBeat base)
============================================================================= */
/* =============================================================================
NaviFin marketing site v2 - Aurora Gradient premium design
Design direction: Aurora Gradient, sibling of NaviBeat's Warm Vinyl.
Deep navy canvas, Jellyfin purple-to-blue accent, Fraunces display, JetBrains Mono.
============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sister-app cross-promo card (NaviBeat) */
.sibling-card {
display: inline-flex;
align-items: center;
gap: 13px;
margin-top: 22px;
padding: 12px 16px 12px 12px;
border: 1px solid var(--border-strong);
border-radius: 14px;
background: var(--accent-gradient-soft);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
max-width: 320px;
}
.sibling-card:hover {
border-color: rgba(106, 123, 216, 0.5);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 7, 23, 0.5);
}
.sibling-card__icon { width: 44px; height: 44px; border-radius: 11px; flex: none; box-shadow: 0 4px 12px rgba(0,7,23,0.5); }
.sibling-card__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
.sibling-card__label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
}
.sibling-card__name {
font-family: var(--font-display);
font-size: 17px;
color: var(--text-0);
letter-spacing: -0.01em;
}
.sibling-card:hover .sibling-card__name { color: var(--accent-hi); }
.sibling-card__desc { font-size: 12.5px; color: var(--text-1); }
/* Hero sibling line */
.hero__sibling {
margin-top: 22px;
font-size: 13.5px;
color: var(--text-2);
display: flex;
align-items: center;
gap: 9px;
}
.hero__sibling a { color: var(--accent-hi); border-bottom: 1px solid var(--accent-dim); padding-bottom: 1px; }
.hero__sibling a:hover { border-color: var(--accent); }
.hero__sibling-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 10px var(--accent-glow);
flex: none;
}
.theater__rail-dot:hover {
opacity: 0.85;
background: var(--accent);
box-shadow: 0 0 6px rgba(106, 123, 216, 0.6);
}
/* "App Store - coming soon" pill next to the primary TestFlight CTA. */
.soon-pill {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text-2);
border: 1px dashed var(--border-strong);
border-radius: 999px;
padding: 9px 16px;
white-space: nowrap;
}
/* Hero CTA row: extra air between the button, the coming-soon pill, and the setup link
(the three-item row read cramped; the setup link now sits on its own line below). */
.hero__ctas { gap: 16px 22px; }
.hero__setup {
margin: 18px 0 0;
opacity: 0;
animation: wordIn 0.6s var(--ease) 0.85s forwards;
}