/* ============================================================
* v2 redesign — design tokens + shared primitives.
*
* Loaded via React 19
* from public/redesign-v2/css/. NOT a CSS import — Turbopack would
* otherwise hoist this into the route segment's CSS bundle and ship
* it on flag-off requests (see #139). The pattern lets the
* stylesheet load only when a v2 surface actually renders.
*
* All v2 styles MUST be authored against these tokens. v2-prefixed
* classes are the only classes defined here, to avoid colliding
* with existing global / module CSS.
*
* Two genuine deltas across the 5 design-source mockups are exposed
* as variant tokens:
* --v2-radius-card-tight (18px, landing) vs --v2-radius-card-roomy (24px, onboarding)
* --v2-shadow-pop-soft (landing) vs --v2-shadow-pop-deep (onboarding)
*
* --font-display resolves to Averia Serif Libre 700, self-hosted at
* /redesign-v2/fonts/averia-serif-libre-700.woff2 (was next/font/google
* before #139's CSS-leak fix; self-hosting was needed to drop the
* Averia_Serif_Libre() call sites that themselves leaked font CSS
* into the flag-off chunk graph). --font-geist-sans is still wired
* by next/font in src/app/layout.tsx.
* ============================================================ */
@font-face {
font-family: "Averia Serif Libre";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/redesign-v2/fonts/averia-serif-libre-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
U+FFFD;
}
:root {
/* ---- palette ---- */
--v2-pool-blue: #0086d3;
--v2-pool-blue-deep: #006fb1;
--v2-pool-blue-dark: #00547f;
--v2-pool-blue-night: #003a5c;
--v2-ink: #ffffff;
--v2-ink-mute: rgba(255, 255, 255, 0.90);
--v2-ink-faint: rgba(255, 255, 255, 0.84);
/* ---- glass surfaces ---- */
--v2-glass-bg: rgba(255, 255, 255, 0.11);
--v2-glass-bg-strong: rgba(255, 255, 255, 0.16);
--v2-glass-bd: rgba(255, 255, 255, 0.22);
--v2-glass-bd-strong: rgba(255, 255, 255, 0.32);
/* ---- typography (display token; body aliases to existing Geist) ---- */
--v2-font-body: var(--font-geist-sans), -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, sans-serif;
--font-display: "Averia Serif Libre";
/* ---- chrome ---- */
--v2-chrome-top: clamp(14px, 1.8vh, 22px);
--v2-chrome-height: 44px;
/* ---- radii ---- */
--v2-radius-pill: 999px;
--v2-radius-card-tight: 18px; /* landing (index) */
--v2-radius-card-roomy: 24px; /* connect / authorize / welcome / app */
/* ---- shadows ---- */
--v2-shadow-soft: 0 8px 32px rgba(0, 30, 60, 0.18);
--v2-shadow-pop-soft: 0 14px 48px rgba(0, 30, 60, 0.28); /* landing */
--v2-shadow-pop-deep: 0 20px 60px rgba(0, 30, 70, 0.35); /* onboarding */
/* ---- motion durations (hover affordances) ----
* Two timing buckets emerge from real consumers (landing port + chip):
* --v2-motion-fast (140ms) — color/bg/transform on chips, nav cta,
* link hover, hero form button hover. Snappy.
* --v2-motion-card (200ms) — glass-card hover lift (steps / features
* / versus rows on the landing). Slower so the translateY reads.
* No easing tokens — every consumer uses the CSS default `ease`. */
--v2-motion-fast: 140ms;
--v2-motion-card: 200ms;
/* ---- z-index layers (hero stack + topnav) ----
* Named slots so landing markup doesn't sprinkle bare integers and
* a future page port can stack against the same scale. Scoped to
* what the v2 surface actually needs today; not a global app scale. */
--v2-z-pool: 0; /* pool wallpaper */
--v2-z-caustic: 1; /* caustic overlay above pool */
--v2-z-hero-content: 3; /* hero copy + form + scroll hint */
--v2-z-topnav: 50; /* fixed topnav above hero */
/* ---- focus ring (foundation accessibility primitive) ----
* Applied via :focus-visible to every interactive v2 primitive so
* page-port workspaces don't each reinvent focus styling. The
* inner white halo + outer pool-blue ring reads cleanly against
* both dark glass (over the pool) and light glass (white form
* cards). Use box-shadow rather than outline so the ring follows
* the element's border-radius (pills, cards). */
--v2-focus-ring:
0 0 0 3px rgba(255, 255, 255, 0.92),
0 0 0 5px var(--v2-pool-blue-deep);
}
/* ============================================================
* Shared primitives.
*
* v2 page-port workspaces consume these classes; they are not
* expected to redefine pool/glass/chip styling per page. Page-
* specific surfaces (hero copy, plan grid, confetti, etc.) live
* in those workspaces.
* ============================================================ */
/* ---- Pool background (used by every v2 page) ----
* Fixed full-viewport pool wallpaper with an animated caustic
* overlay. On the landing page the pool sits inside the hero
* section; the page port overrides position/inset as needed.
*
* Assets live in /public/redesign-v2/. Desktop wallpaper is the
* landscape image; the portrait fallback kicks in at ≤768px.
*/
.v2-pool {
position: fixed;
inset: 0;
z-index: var(--v2-z-pool);
background-color: var(--v2-pool-blue);
background-image: url("/redesign-v2/pool-desktop.jpg");
background-image: image-set(
url("/redesign-v2/pool-desktop.avif") type("image/avif"),
url("/redesign-v2/pool-desktop.jpg") type("image/jpeg")
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
isolation: isolate;
}
/* Scope override — landing hero positions the pool inside the hero
* section rather than fixed to the viewport. The parent must be a
* positioned containing block (the hero is `position: relative`). */
.v2-pool--contained { position: absolute; }
@media (max-width: 768px) {
.v2-pool {
background-image: url("/redesign-v2/pool-mobile.jpg");
background-image: image-set(
url("/redesign-v2/pool-mobile.avif") type("image/avif"),
url("/redesign-v2/pool-mobile.jpg") type("image/jpeg")
);
}
}
.v2-pool-caustics {
position: absolute;
inset: -6%;
pointer-events: none;
background-image:
radial-gradient(40% 22% at 18% 25%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 65%),
radial-gradient(28% 16% at 62% 14%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%),
radial-gradient(34% 18% at 80% 50%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 70%),
radial-gradient(30% 14% at 35% 70%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%),
radial-gradient(22% 12% at 8% 82%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%),
radial-gradient(38% 18% at 78% 88%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%),
radial-gradient(20% 12% at 50% 38%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
filter: blur(3px);
mix-blend-mode: screen;
animation: v2CausticDrift 27s ease-in-out infinite;
will-change: transform;
z-index: var(--v2-z-caustic);
}
@keyframes v2CausticDrift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1.00) rotate(0deg); }
17% { transform: translate3d(-12px, 8px, 0) scale(1.030) rotate(0.40deg); }
43% { transform: translate3d(20px, -6px, 0) scale(1.060) rotate(-0.60deg); }
68% { transform: translate3d(8px, 16px, 0) scale(1.020) rotate(0.30deg); }
}
@media (prefers-reduced-motion: reduce) {
.v2-pool-caustics { animation: none; }
}
/* ---- Identity chip (welcome, app) ---- */
.v2-identity-chip {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 14px 6px 6px;
border-radius: var(--v2-radius-pill);
background: var(--v2-glass-bg-strong);
border: 1px solid var(--v2-glass-bd-strong);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
color: var(--v2-ink);
text-decoration: none;
transition: background var(--v2-motion-fast) ease;
}
.v2-identity-chip:hover { background: rgba(255, 255, 255, 0.22); }
.v2-identity-chip:focus-visible {
outline: none;
box-shadow: var(--v2-focus-ring);
}
.v2-identity-chip__avatar {
flex: 0 0 36px;
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(180deg, #ffffff 0%, #d8efff 100%);
color: var(--v2-pool-blue-deep);
font-family: var(--font-display), Georgia, serif;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(0, 80, 150, 0.16);
}
.v2-identity-chip__meta {
display: flex;
flex-direction: column;
line-height: 1.15;
max-width: 220px;
}
.v2-identity-chip__label {
font-size: 12px;
color: var(--v2-ink-faint);
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: 600;
}
.v2-identity-chip__email {
font-size: 13.5px;
color: var(--v2-ink);
font-weight: 600;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Glass card (two variants) ----
* Dark glass sits over the pool (low-contrast surfaces like the
* landing's feature cards). Light glass is the high-opacity white
* surface used by the connect / authorize / welcome forms so input
* text reads cleanly against the darker water.
*/
.v2-glass-card {
position: relative;
padding: clamp(22px, 2.4vw, 32px);
border-radius: var(--v2-radius-card-roomy);
box-shadow: var(--v2-shadow-soft);
}
.v2-glass-card--dark {
background: var(--v2-glass-bg);
border: 1px solid var(--v2-glass-bd);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
color: var(--v2-ink);
}
.v2-glass-card--light {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.95);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
color: var(--v2-pool-blue-night);
box-shadow: var(--v2-shadow-pop-deep);
}
.v2-glass-card--tight { border-radius: var(--v2-radius-card-tight); }
.v2-glass-card:focus-visible {
outline: none;
box-shadow: var(--v2-shadow-soft), var(--v2-focus-ring);
}
/* ---- Eyebrow pill (connect, authorize step indicators) ---- */
.v2-eyebrow-pill {
display: inline-block;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--v2-ink);
background: var(--v2-glass-bg);
border: 1px solid var(--v2-glass-bd);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border-radius: var(--v2-radius-pill);
text-shadow: 0 1px 2px rgba(0, 30, 60, 0.20);
margin: 0;
}
.v2-eyebrow-pill:focus-visible {
outline: none;
box-shadow: var(--v2-focus-ring);
}