/* ========================================================================== Shared design system — the original pink/purple design, restored. Used by: the Pookie marketing site (/), Let's Vibe (/vibe.html), and every content/status page. Ported-in additions for the newer server-backed flows (invite responses, waitlist confirmation) live at the bottom, under "Status pages", using the same tokens as everything else. ========================================================================== */ :root { --color-rose: #ff6f91; --color-orchid: #c96bd8; --color-violet: #7c6bf0; --color-peach: #ffb17a; --color-ink: #241b2e; --color-ink-soft: #5c5468; --color-cloud: #fdf1f5; --surface: rgba(255, 255, 255, 0.5); --surface-strong: rgba(255, 255, 255, 0.78); --surface-border: rgba(255, 255, 255, 0.6); --page-bg: var(--color-cloud); --gradient-aurora: linear-gradient(120deg, #ffe1ea 0%, #ffd7c2 25%, #f0d3ff 55%, #dcd4ff 80%, #cfe6ff 100%); --gradient-btn-yes: linear-gradient(135deg, #ff6f91 0%, #c96bd8 100%); /* Violet stop lightened from #7c6bf0 -> #897af2 so dark button text still clears 4.5:1 at that end of the gradient — see the contrast audit. */ --gradient-btn-confirm: linear-gradient(135deg, #897af2 0%, #ff6f91 100%); --gradient-text: linear-gradient(135deg, var(--color-rose), var(--color-violet)); /* Text color for anything sitting directly on --gradient-btn-yes or --gradient-btn-confirm. Deliberately NOT theme-aware (unlike --color-ink) — those two gradients don't change between light and dark mode, so neither should the text color that has to stay readable on them. Verified >=4.5:1 (WCAG AA) at every gradient stop: rose 6.24:1, orchid 5.17:1, violet 4.82:1. */ --color-on-gradient: #241b2e; /* .btn-ghost's text sits on --surface, which DOES flip between a light and a dark background per theme, so this one IS theme-aware — overridden in both dark-mode blocks below. Verified 5.27:1 here against the light surface. */ --color-ghost-text: #9750a2; /* Plain rose (--color-rose) is only 2.40:1 against the light page background — well under 4.5:1 — so inline links and nav/footer link hover states use this darker variant instead. Theme-aware: dark mode restores the original rose below (already 7.10:1 against the dark page background, no adjustment needed there). Verified 5.14:1 here. */ --color-link: #a6485e; --shadow-soft: 0 24px 70px rgba(120, 70, 130, 0.16); --shadow-btn: 0 14px 34px rgba(201, 107, 216, 0.35); --radius-lg: 32px; --radius-md: 20px; --radius-sm: 14px; --font-display: 'Outfit', 'Poppins', sans-serif; --font-body: 'Poppins', 'Inter', sans-serif; --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); /* Fluid spacing scales — same visual min/max as before, interpolated smoothly instead of jumping at a single breakpoint. */ --space-card: clamp(28px, 4vw + 16px, 56px); --space-card-x: clamp(20px, 3vw + 12px, 44px); --space-section-y: clamp(48px, 6vw + 24px, 90px); --space-section-x: clamp(16px, 3vw + 8px, 24px); --space-stage: clamp(16px, 4vw, 24px); /* Safe-area aware insets — resolve to 0 on devices without a notch. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* Dark theme — activated by prefers-color-scheme, overridable via the header toggle which stamps data-theme on and persists to localStorage (see common.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-ink: #f3edf7; --color-ink-soft: #c7b9d6; --color-cloud: #150f1c; --surface: rgba(36, 27, 46, 0.55); --surface-strong: rgba(36, 27, 46, 0.82); --surface-border: rgba(255, 255, 255, 0.1); --page-bg: #150f1c; --gradient-aurora: linear-gradient(120deg, #2b1930 0%, #351f3a 25%, #241a3d 55%, #1c1f3d 80%, #17233a 100%); --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.45); /* Original orchid, unmodified — already 5.17:1 against the dark surface, so no need to lighten it further like the light-mode value. */ --color-ghost-text: #c96bd8; /* Original rose, unmodified — already 7.10:1 against the dark page background. */ --color-link: #ff6f91; } } :root[data-theme="dark"] { --color-ink: #f3edf7; --color-ink-soft: #c7b9d6; --color-cloud: #150f1c; --surface: rgba(36, 27, 46, 0.55); --surface-strong: rgba(36, 27, 46, 0.82); --surface-border: rgba(255, 255, 255, 0.1); --color-ghost-text: #c96bd8; --color-link: #ff6f91; --page-bg: #150f1c; --gradient-aurora: linear-gradient(120deg, #2b1930 0%, #351f3a 25%, #241a3d 55%, #1c1f3d 80%, #17233a 100%); --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; } html { color-scheme: light dark; } body { font-family: var(--font-body); color: var(--color-ink); background: var(--page-bg); overflow-x: hidden; min-height: 100vh; min-height: 100dvh; padding-left: var(--safe-left); padding-right: var(--safe-right); transition: background-color 0.4s ease, color 0.4s ease; } @media (pointer: fine) { body, button, a, input, select, textarea { cursor: none; } } h1, h2, h3 { font-family: var(--font-display); margin: 0; overflow-wrap: break-word; } p { margin: 0; overflow-wrap: break-word; } button { font-family: var(--font-body); } a { color: inherit; } img, svg, canvas { max-width: 100%; } .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; } /* ========================================================================== Background ========================================================================== */ .bg-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .aurora { position: absolute; inset: -15%; background: var(--gradient-aurora); background-size: 320% 320%; animation: auroraShift 20s ease-in-out infinite; transition: background 0.6s ease; } @keyframes auroraShift { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; will-change: transform; } .blob-1 { width: 40vmax; height: 40vmax; top: -12%; left: -14%; background: radial-gradient(circle at 30% 30%, var(--color-rose), transparent 70%); animation: floatBlob1 24s ease-in-out infinite; } .blob-2 { width: 44vmax; height: 44vmax; bottom: -20%; right: -16%; background: radial-gradient(circle at 60% 60%, var(--color-violet), transparent 70%); animation: floatBlob2 28s ease-in-out infinite; } .blob-3 { width: 32vmax; height: 32vmax; top: 38%; left: 58%; background: radial-gradient(circle at 50% 50%, var(--color-peach), transparent 70%); animation: floatBlob3 22s ease-in-out infinite; } @keyframes floatBlob1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 8vh) scale(1.1); } } @keyframes floatBlob2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7vw, -6vh) scale(1.08); } } @keyframes floatBlob3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vw, 5vh) scale(0.94); } } .grain { position: absolute; inset: 0; opacity: 0.035; background-image: radial-gradient(circle, #000 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: multiply; } .particles-layer { position: absolute; inset: 0; } .particle { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); will-change: transform, opacity; animation: particleFloat linear infinite; } @keyframes particleFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.5; } 100% { transform: translateY(-100vh) translateX(var(--drift, 0px)); opacity: 0; } } /* ========================================================================== Custom cursor ========================================================================== */ .cursor-dot { position: fixed; top: 0; left: 0; z-index: 9999; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 111, 145, 0.95), rgba(201, 107, 216, 0.6)); box-shadow: 0 0 16px rgba(201, 107, 216, 0.55); pointer-events: none; transform: translate(-50%, -50%); transition: width 0.2s var(--ease-premium), height 0.2s var(--ease-premium), opacity 0.2s ease; will-change: transform; } .cursor-dot.cursor-hover { width: 34px; height: 34px; } @media (pointer: coarse) { .cursor-dot { display: none; } } /* ========================================================================== Site navigation ========================================================================== */ .site-nav { position: sticky; top: 0; top: var(--safe-top); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; margin: max(16px, var(--safe-top)) auto 0; max-width: 1080px; border-radius: 999px; background: var(--surface); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--surface-border); box-shadow: 0 8px 30px rgba(90, 50, 100, 0.1); } .site-nav.nav-minimal { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--color-ink); } .nav-brand-mark { font-size: 1.2rem; } .nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; font-size: 0.92rem; font-weight: 600; color: var(--color-ink-soft); transition: color 0.2s ease; display: inline-flex; align-items: center; } /* Touch devices only — enlarge the tap target without changing the desktop nav bar's height/appearance. */ @media (pointer: coarse) { .nav-links a { min-height: 44px; padding: 4px 0; } } .nav-links a:hover, .nav-links a:focus-visible { color: var(--color-link); } .nav-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--surface-border); background: var(--surface-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: transform 0.2s var(--ease-premium); } .theme-toggle:hover { transform: scale(1.08); } .nav-menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--surface-border); background: var(--surface-strong); font-size: 1.1rem; } @media (max-width: 760px) { .nav-links { display: none; } .nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .site-nav.nav-open .nav-links { display: flex; flex-direction: column; position: absolute; top: calc(100% + 10px); left: 12px; right: 12px; background: var(--page-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 18px; gap: 14px; box-shadow: var(--shadow-soft); text-align: center; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; z-index: 1; max-width: 1080px; margin: 60px auto 0; padding: 40px 24px 48px; text-align: center; color: var(--color-ink-soft); } .footer-tagline { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); font-size: 1rem; margin-bottom: 6px; } .footer-sub { font-size: 0.9rem; margin-bottom: 22px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; list-style: none; margin: 0 0 18px; padding: 0; } .footer-links a { text-decoration: none; font-size: 0.88rem; font-weight: 600; color: var(--color-ink-soft); transition: color 0.2s ease; display: inline-flex; align-items: center; } @media (pointer: coarse) { .footer-links a { min-height: 44px; padding: 4px 0; } } .footer-links a:hover, .footer-links a:focus-visible { color: var(--color-link); } .footer-credit { font-size: 0.8rem; opacity: 0.7; } /* ========================================================================== Layout — glass cards (shared by both experiences) ========================================================================== */ .stage { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-stage); padding-top: calc(var(--space-stage) + var(--safe-top)); padding-bottom: calc(var(--space-stage) + var(--safe-bottom)); } .card { position: relative; width: 100%; max-width: 640px; background: var(--surface); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: var(--space-card) var(--space-card-x); text-align: center; transition: transform 0.6s var(--ease-premium), opacity 0.6s var(--ease-premium), filter 0.6s var(--ease-premium); } /* Short landscape viewports (e.g. a phone rotated) — keep the card comfortably inside the visible area instead of forcing full padding. */ @media (max-height: 480px) and (orientation: landscape) { .stage { padding-top: calc(16px + var(--safe-top)); padding-bottom: calc(16px + var(--safe-bottom)); align-items: flex-start; } .card { padding: 24px; } } .hidden { display: none !important; } /* ========================================================================== Hero content (Let's Vibe) ========================================================================== */ #pitch-block { transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium); } #pitch-block.pitch-swap { opacity: 0; transform: translateY(8px); } .eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.8rem; color: var(--color-orchid); margin-bottom: 18px; } .headline { font-size: clamp(1.5rem, 4.4vw, 2.5rem); font-weight: 700; line-height: 1.3; color: var(--color-ink); margin-bottom: 12px; transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium); } .headline .highlight { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .subhead { font-size: clamp(1rem, 2.6vw, 1.15rem); color: var(--color-ink-soft); margin-bottom: 22px; } .rotator-line { font-size: 1rem; color: var(--color-ink-soft); margin-bottom: 34px; } .activity-word { display: inline-block; font-weight: 600; /* --color-link, not --color-rose: this is 16px bold, below the large-text threshold, so it needs the full 4.5:1 — plain rose is only 2.40:1 on the card/page background. See the contrast audit. */ color: var(--color-link); min-width: 90px; transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium); } .activity-word.swap { opacity: 0; transform: translateY(6px); } .main-question { font-size: clamp(1.1rem, 3.2vw, 1.55rem); font-weight: 600; color: var(--color-ink); margin-bottom: 40px; } /* ========================================================================== Buttons ========================================================================== */ .button-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; min-height: 90px; } .btn { border: none; border-radius: 999px; padding: 18px 32px; font-size: 1.05rem; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium); -webkit-tap-highlight-color: transparent; } @media (pointer: fine) { .btn { cursor: none; } } @media (pointer: coarse) { .btn { cursor: pointer; } } /* Consistent touch feedback across every button, mirroring the existing .btn-yes:active scale so presses feel responsive on mobile. */ .btn:active { transform: scale(0.97); } .chip:active, .vibe-chip:active { transform: scale(0.96); } .btn-emoji { font-size: 1.1em; } .btn-yes { background: var(--gradient-btn-yes); color: var(--color-on-gradient); box-shadow: var(--shadow-btn); } .btn-yes:hover, .btn-yes:focus-visible { box-shadow: 0 20px 44px rgba(255, 111, 145, 0.45); } .btn-yes:active { transform: scale(0.97); } .btn-no { background: var(--surface-strong); color: var(--color-ink-soft); border: 1px solid rgba(150, 120, 160, 0.3); position: relative; z-index: 2; } .btn-no.fixed-pos { position: fixed; z-index: 50; } .btn-no.settled { animation: settlePulse 0.5s var(--ease-premium); } @keyframes settlePulse { 0% { transform: scale(1.12); } 100% { transform: scale(1); } } .btn-ghost { background: var(--surface); color: var(--color-ghost-text); border: 1px solid rgba(201, 107, 216, 0.4); text-decoration: none; display: inline-flex; } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface-strong); } .btn-primary { background: var(--gradient-btn-yes); color: var(--color-on-gradient); box-shadow: var(--shadow-btn); } .btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 20px 44px rgba(255, 111, 145, 0.45); } .btn-block { width: 100%; justify-content: center; } .btn:disabled { opacity: 0.65; pointer-events: none; } .btn:focus-visible { outline: 3px solid var(--color-violet); outline-offset: 3px; } .escape-message { margin-top: 22px; min-height: 1.4em; font-weight: 600; color: var(--color-violet); font-size: 1rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium); } .escape-message.show { opacity: 1; transform: translateY(0); } /* ========================================================================== Declined card ========================================================================== */ .declined-card { animation: cardReveal 0.6s var(--ease-premium); } .declined-title { font-size: clamp(1.8rem, 4.6vw, 2.2rem); color: var(--color-ink); margin-bottom: 14px; } .declined-sub { font-size: 1.05rem; color: var(--color-ink-soft); margin-bottom: 8px; } .declined-note { font-size: 0.95rem; color: var(--color-ink-soft); opacity: 0.8; margin-bottom: 22px; } /* ========================================================================== Success card / forms (shared between both experiences) ========================================================================== */ .success-card { animation: cardReveal 0.7s var(--ease-premium); } @keyframes cardReveal { 0% { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } .success-title { font-size: clamp(1.7rem, 4.4vw, 2.3rem); color: var(--color-ink); margin-bottom: 10px; } .wink { display: inline-block; } .success-sub { font-size: 1.05rem; color: var(--color-ink-soft); margin-bottom: 30px; } .waitlist-count { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--color-orchid); background: rgba(201, 107, 216, 0.12); /* fallback for browsers without color-mix() */ background: color-mix(in srgb, var(--color-orchid) 12%, transparent); padding: 7px 16px; border-radius: 999px; margin: -12px 0 24px; } .waitlist-count.hidden { display: none; } .waitlist-count-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-rose); flex-shrink: 0; } .plan-form { display: flex; flex-direction: column; gap: 22px; text-align: left; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field-full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 8px; } .field-label { font-weight: 600; font-size: 0.92rem; color: var(--color-ink); } .field-label em { font-weight: 400; font-style: normal; color: var(--color-ink-soft); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 1rem; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid rgba(150, 120, 160, 0.3); background: var(--surface-strong); color: var(--color-ink); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; cursor: auto; resize: vertical; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-rose); box-shadow: 0 0 0 4px rgba(255, 111, 145, 0.18); } .field input:invalid.touched, .field input.field-invalid { border-color: #c0392b; } .field-error { display: none; font-size: 0.82rem; color: #c0392b; margin-top: 2px; } .field-error.show { display: block; } .checkbox-field { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 0.9rem; color: var(--color-ink-soft); text-align: left; } .checkbox-field input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-rose); } .checkbox-field a { color: var(--color-link); font-weight: 600; } .btn-confirm { margin-top: 4px; background: var(--gradient-btn-confirm); color: var(--color-on-gradient); border-radius: 999px; padding: 16px 28px; font-size: 1.05rem; font-weight: 600; box-shadow: 0 16px 38px rgba(124, 107, 240, 0.4); align-self: center; } .btn-confirm:disabled { opacity: 0.7; } /* --color-link, not --color-rose: 5.14-7.10:1 depending on theme/context, vs. 2.40:1 for plain rose — this is a shareable, read-outdoors moment. */ .confirmed-title { font-size: clamp(1.7rem, 4.4vw, 2.2rem); color: var(--color-link); margin-bottom: 18px; } .sparkle-emoji { display: inline-block; } .good-vibes-copy p { font-size: 1.02rem; color: var(--color-ink); line-height: 1.7; } .confirmed-recap { margin-top: 20px; font-size: 0.95rem; color: var(--color-ink-soft); font-weight: 600; } /* Chip / pill multi-select (used by waitlist interests) */ .chip-group { display: flex; flex-wrap: wrap; gap: 10px; } .chip { border: 1px solid rgba(150, 120, 160, 0.35); background: var(--surface-strong); color: var(--color-ink-soft); border-radius: 999px; padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; font-size: 0.88rem; font-weight: 600; transition: all 0.2s var(--ease-premium); } .chip.selected { background: var(--gradient-btn-yes); color: var(--color-on-gradient); border-color: transparent; } /* Step indicator (used by Pookie's waitlist flow) */ .step-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; } .step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(150, 120, 160, 0.3); transition: all 0.3s var(--ease-premium); } .step-dot.active { width: 24px; background: var(--gradient-text); } .step-dot.done { background: var(--color-orchid); } /* ========================================================================== Marketing sections (Pookie) ========================================================================== */ .section { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: var(--space-section-y) var(--space-section-x); } .section-narrow { max-width: 780px; } .section-eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.78rem; color: var(--color-orchid); margin-bottom: 14px; } .section-title { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 700; line-height: 1.2; margin-bottom: 18px; } .section-sub { font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--color-ink-soft); max-width: 640px; line-height: 1.6; } .section-center { text-align: center; } .section-center .section-sub { margin-left: auto; margin-right: auto; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* Hero (Pookie) */ .pookie-hero { text-align: center; padding-top: 70px; padding-bottom: 40px; } .pookie-hero .section-title { margin: 0 auto 20px; max-width: 820px; } .pookie-hero .section-sub { margin: 0 auto 36px; } .hero-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* Philosophy list */ .philosophy-list { display: flex; flex-direction: column; gap: 46px; } .philosophy-item { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: flex-start; } .philosophy-index { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: transparent; -webkit-text-stroke: 1.5px var(--color-orchid); min-width: 48px; } .philosophy-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; } .philosophy-text { color: var(--color-ink-soft); line-height: 1.6; } /* Feature cards */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { background: var(--surface); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 26px 22px; transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); } .feature-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; } .feature-title { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; } .feature-text { font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.55; } /* Vibe Mode grid */ .vibe-callout { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); padding: 40px 32px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .vibe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; } .vibe-chip { background: var(--surface-strong); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 18px 12px; text-align: center; transition: transform 0.25s var(--ease-premium), border-color 0.25s ease; } .vibe-chip:hover { transform: translateY(-4px); border-color: var(--color-rose); } .vibe-chip.selected { background: var(--gradient-btn-yes); border-color: transparent; transform: translateY(-4px); } .vibe-chip.selected .vibe-chip-label { color: var(--color-on-gradient); } .vibe-chip-emoji { font-size: 1.6rem; display: block; margin-bottom: 8px; } .vibe-chip-label { font-size: 0.8rem; font-weight: 600; color: var(--color-ink-soft); } .vibe-why { margin-top: 30px; font-size: 0.98rem; color: var(--color-ink-soft); line-height: 1.7; max-width: 680px; } /* Interactive demo */ .demo-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; } .phone-frame { position: relative; width: min(280px, 100%); aspect-ratio: 1 / 2; margin: 0 auto; border-radius: 44px; background: var(--surface-strong); border: 10px solid rgba(20, 14, 26, 0.9); box-shadow: var(--shadow-soft); overflow: hidden; } .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background: rgba(20, 14, 26, 0.9); border-radius: 0 0 16px 16px; z-index: 5; } .phone-screen { position: absolute; inset: 0; padding: 40px 18px 18px; display: flex; flex-direction: column; gap: 12px; } .demo-step { display: none; flex-direction: column; gap: 12px; animation: cardReveal 0.5s var(--ease-premium); } .demo-step.active { display: flex; } .demo-step-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--color-orchid); } .demo-step-heading { font-size: 1.05rem; font-weight: 700; } .demo-card-mini { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px; padding: 12px; font-size: 0.82rem; } .demo-vibe-row { display: flex; flex-wrap: wrap; gap: 8px; } .demo-vibe-pill { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 999px; padding: 6px 10px; font-size: 0.78rem; } .demo-vibe-pill.picked { background: var(--gradient-btn-yes); color: var(--color-on-gradient); } .demo-person-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: 14px; padding: 10px; } .demo-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-text); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .demo-controls { display: flex; flex-direction: column; gap: 22px; } .demo-flow-list { display: flex; flex-direction: column; gap: 4px; } .demo-flow-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 44px; border-radius: 12px; font-size: 0.92rem; color: var(--color-ink-soft); transition: all 0.25s ease; cursor: pointer; border: none; background: transparent; text-align: left; font-family: var(--font-body); } .demo-flow-item:hover { background: var(--surface); } .demo-flow-item.active { background: var(--surface-strong); color: var(--color-ink); font-weight: 700; box-shadow: 0 4px 16px rgba(120, 70, 130, 0.1); } .demo-flow-num { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .demo-flow-item.active .demo-flow-num { background: var(--gradient-btn-yes); color: #fff; } .demo-nav-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ========================================================================== Admin dashboard ========================================================================== */ .admin-shell { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; position: relative; z-index: 1; container-type: inline-size; container-name: admin-shell; } .admin-login-wrap { min-height: 80vh; min-height: 80dvh; display: flex; align-items: center; justify-content: center; padding: 16px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 36px; } .stat-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 20px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; } .stat-label { font-size: 0.82rem; color: var(--color-ink-soft); margin-top: 4px; } .panel { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin-bottom: 24px; } .panel-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 18px; } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Progressive enhancement: adapt to the admin shell's own width rather than the viewport, in case it's ever embedded somewhere narrower. The @media rule further down covers browsers without container query support, so nothing regresses. */ @supports (container-type: inline-size) { @container admin-shell (max-width: 780px) { .panel-grid { grid-template-columns: 1fr; } } } .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.85rem; } .bar-label { width: 130px; flex-shrink: 0; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { flex: 1; height: 10px; border-radius: 999px; background: rgba(150, 120, 160, 0.18); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: var(--gradient-btn-yes); } .bar-value { width: 36px; text-align: right; font-weight: 700; } .text-list { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; } .text-list-item { background: var(--surface-strong); border-radius: 12px; padding: 10px 12px; font-size: 0.85rem; } .data-table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--surface-border); white-space: nowrap; } .data-table th { color: var(--color-ink-soft); font-weight: 600; } .admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } /* ========================================================================== FX canvas ========================================================================== */ .fx-canvas { position: fixed; inset: 0; z-index: 100; pointer-events: none; width: 100vw; height: 100vh; height: 100dvh; } /* ========================================================================== Simple content pages (About/Privacy/Terms/Contact/FAQ) ========================================================================== */ .content-page { max-width: 760px; margin: 0 auto; padding: 70px 24px 100px; position: relative; z-index: 1; } .content-page h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 24px; } .content-page h2 { font-size: 1.3rem; margin: 32px 0 12px; } .content-page p, .content-page li { color: var(--color-ink-soft); line-height: 1.7; font-size: 1rem; } .content-page ul { padding-left: 20px; } /* :not(.btn) is the actual fix for the unreadable-button bug: without it, this selector's specificity (0,1,1) beats .btn-primary/.btn-confirm/etc. (0,1,0), silently overriding their intended text color whenever a button-styled link sits inside .content-page (e.g. contact.html, about.html) — regardless of what that color is set to. */ .content-page a:not(.btn) { color: var(--color-link); font-weight: 600; } .faq-item { border-bottom: 1px solid var(--surface-border); padding: 18px 0; } .faq-question { font-weight: 700; font-size: 1.02rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 0; } .faq-answer { color: var(--color-ink-soft); margin-top: 10px; line-height: 1.6; display: none; } .faq-item.open .faq-answer { display: block; } .faq-item.open .faq-caret { transform: rotate(180deg); } .faq-caret { transition: transform 0.25s var(--ease-premium); } /* ========================================================================== Small layout utilities (kept intentionally minimal) ========================================================================== */ .text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .mt-lg { margin-top: 40px; } .mb-lg { margin-bottom: 26px; } .mb-md { margin-bottom: 18px; } .card-wide { max-width: 100%; } .card-narrow { max-width: 420px; } .m0 { margin: 0; } .demo-center-pad { text-align: center; padding: 30px 10px; } .demo-center-pad-sm { text-align: center; padding: 24px 10px; } .demo-emoji-lg { font-size: 2.4rem; } .demo-emoji-md { font-size: 2rem; } .demo-emoji-sm { font-size: 1.6rem; } .demo-row-between { display: flex; align-items: center; justify-content: space-between; } .demo-mini-title { margin-top: 8px; font-weight: 700; } .demo-mini-sub { font-size: 0.8rem; color: var(--color-ink-soft); } .demo-person-meta { font-size: 0.75rem; color: var(--color-ink-soft); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .demo-wrap { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .panel-grid { grid-template-columns: 1fr; } .vibe-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .card { border-radius: 24px; } .button-row { flex-direction: column; gap: 16px; } .btn { width: 100%; justify-content: center; } .field-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .vibe-grid { grid-template-columns: repeat(2, 1fr); } .philosophy-item { grid-template-columns: 1fr; } .site-nav { margin: 10px 12px 0; padding: 10px 16px; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .aurora, .blob, .particle { animation: none !important; } .reveal { opacity: 1; transform: none; } } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-violet); outline-offset: 2px; } /* ---------------- Added for the restored, server-backed submit flow ---------------- */ .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-message { margin-top: 14px; font-size: 0.9rem; text-align: center; min-height: 1.2em; } .form-message.is-error { color: #c0392b; } .form-message.is-success { color: var(--color-ink-soft); } /* ---------------- Status pages (welcome.html / respond.html) ---------------- */ .status-page { max-width: 580px; margin: 0 auto; padding: 90px 24px 100px; text-align: center; position: relative; z-index: 1; } .status-icon { font-size: 3rem; margin-bottom: 18px; } /* --color-link, not --color-rose: 5.14-7.10:1 depending on theme, vs. 2.40:1 for plain rose — the whole point of this number is to be read at a glance, often outdoors. */ .rank-display { font-family: var(--font-display); font-weight: 700; font-size: 3.6rem; color: var(--color-link); margin: 14px 0 4px; } .waitlist-count-label { font-size: 0.9rem; color: var(--color-ink-soft); margin-bottom: 28px; } .referral-box { display: flex; gap: 8px; margin: 20px 0; padding: 6px; background: var(--surface-strong); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); } .referral-box input { flex: 1; border: none; background: transparent; padding: 10px 12px; font-size: 0.9rem; color: var(--color-ink); font-family: var(--font-body); } .share-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .invite-detail-list { text-align: left; display: grid; gap: 10px; margin: 28px 0; padding: 22px; background: var(--surface-strong); border: 1px solid var(--surface-border); border-radius: var(--radius-md); } .invite-detail-list dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); opacity: 0.8; } .invite-detail-list dd { margin: 0 0 10px; font-size: 1rem; color: var(--color-ink); } .respond-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .propose-form { margin-top: 18px; text-align: left; display: none; } .propose-form.is-visible { display: block; } .placeholder-notice { background: rgba(255, 177, 122, 0.18); color: var(--color-ink); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.88rem; margin-bottom: 32px; font-weight: 600; } /* ---------------- Cookie consent banner (gates Google Analytics only — Plausible is cookie-free and always on) ---------------- */ .cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 720px; margin: 0 auto; padding: 18px 22px; background: var(--surface-strong); backdrop-filter: blur(16px); border: 1px solid var(--surface-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); animation: cookie-consent-in 0.4s var(--ease-premium); } .cookie-consent.is-leaving { animation: cookie-consent-out 0.3s var(--ease-premium) forwards; } @keyframes cookie-consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes cookie-consent-out { to { opacity: 0; transform: translateY(16px); } } .cookie-consent-text { flex: 1 1 260px; font-size: 0.85rem; color: var(--color-ink-soft); margin: 0; } .cookie-consent-text a { color: var(--color-link); font-weight: 600; } .cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; } .cookie-consent-actions .btn { padding: 10px 20px; font-size: 0.88rem; } @media (max-width: 480px) { .cookie-consent { flex-direction: column; align-items: stretch; bottom: 10px; left: 10px; right: 10px; padding: 16px; } .cookie-consent-actions { margin-left: 0; } .cookie-consent-actions .btn { flex: 1; } }