/* ═══════════════════════════════════════════════════════════════
Anirova Landing — Production Stylesheet (Profi-Edition)
Refactored for clarity, not Awwwards-tutorial-vibes
═══════════════════════════════════════════════════════════════ */
:root {
--bg: #050D1F;
--bg-2: #0A1426;
--bg-3: #0D1A26;
--bg-4: #141F2E;
--bg-5: #1A2633;
--surface: rgba(13, 26, 38, 0.55);
--surface-2: rgba(20, 31, 46, 0.6);
--glass: rgba(13, 26, 38, 0.85);
--glass-light: rgba(20, 31, 46, 0.92);
--accent: #00B3FF;
--accent-bright: #00D9FF;
--accent-neon: #00E6FF;
--accent-dark: #006FBF;
--c-magenta: #C44FE6;
--c-magenta-d: #6F2A99;
--c-green: #00CC55;
--c-green-d: #007033;
--c-orange: #FF9F1C;
--c-orange-d: #B36B00;
--c-gold: #FFD700;
--c-gold-d: #B89A00;
--c-rose: #FF5C8A;
--c-rose-d: #B33A60;
--c-red: #FF334D;
/* Text tokens — rebuilt for WCAG AA on dark bg (#050D1F).
Contrast ratios checked against --bg:
text-1 (primary) 19:1 AAA
text-2 (secondary) 12:1 AAA
text-3 (tertiary) 7:1 AA body-text safe
text-4 (muted) 5.2:1 AA small + meta safe
text-5 (faintest) 3.5:1 borderline — use for icons / decorative only
*/
--text: #F5FAFF;
--text-2: #C2D4E8;
--text-3: #92AECC;
--text-4: #6A87A8;
--text-5: #4D6680;
--text-inv: #050D1F;
--border: rgba(0, 179, 255, 0.22);
--border-2: rgba(0, 230, 255, 0.4);
--border-soft: rgba(255, 255, 255, 0.08);
--border-strong:rgba(255, 255, 255, 0.14);
--pad: clamp(20px, 4vw, 60px);
--container: 1240px;
--section-y: clamp(80px, 10vw, 140px);
/* ─── Typography Scale (modular, tuned for editorial reading) ───
H1 — page-hero / hero — display-weight, tight tracking
H2 — section header — heavy-weight, tight tracking
H3 — card / sub-section — semi-bold
H4 — small headlines, kpi labels
Body — 16px equivalent at 1rem
Small — meta, eyebrows */
--fs-h1: clamp(40px, 5.5vw, 72px);
--fs-h2: clamp(28px, 3.6vw, 48px);
--fs-h3: clamp(20px, 2vw, 26px);
--fs-h4: clamp(16px, 1.4vw, 19px);
--fs-body: clamp(15px, 1.05vw, 17px);
--fs-lead: clamp(17px, 1.3vw, 20px);
--fs-small: 13px;
--fs-micro: 11px;
--lh-tight: 1.05;
--lh-snug: 1.25;
--lh-normal: 1.55;
--lh-relaxed: 1.7;
--body: "Inter Tight", -apple-system, system-ui, sans-serif;
--display: "Inter Tight", -apple-system, system-ui, sans-serif;
--serif: "Instrument Serif", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--r-xl: 20px;
}
/* ─── Reset ──────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
font-size: 100%;
}
body {
font-family: var(--body);
background: var(--bg);
color: var(--text);
font-size: var(--fs-body);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01" on, "cv11" on; /* tighter Inter forms */
min-height: 100vh;
overflow-x: hidden;
}
/* ─── Typography baseline ─────────────────────────────────────
Headings inherit display-font + tight tracking by default.
Individual components can override but should rarely need to. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--display);
color: var(--text);
font-weight: 800;
letter-spacing: -0.02em;
line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; }
p { font-size: inherit; line-height: var(--lh-normal); color: var(--text-2); }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
p a, li a, .prose a, .footer-col a, .section-desc a {
color: var(--accent-bright);
}
p a:hover, li a:hover, .prose a:hover, .footer-col a:hover, .section-desc a:hover {
color: var(--accent-neon);
}
em.serif-em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
color: var(--accent-bright);
letter-spacing: -0.01em;
}
strong { font-weight: 700; color: var(--text); }
code, kbd, samp {
font-family: var(--mono);
font-size: 0.9em;
}
small, .text-small { font-size: var(--fs-small); }
.text-lead { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--text-2); }
.text-muted { color: var(--text-3); }
.text-faint { color: var(--text-4); }
/* Make sections semi-transparent so global squares show through */
.section { background: transparent; }
.stats { background: rgba(10, 20, 38, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.section-form .form-glass,
.faq details,
.bento-cell,
.value-card,
.ar-card,
.founder-v2-meta {
/* These keep their backgrounds — already glass / surface */
}
.outro {
background: linear-gradient(180deg, transparent, rgba(0, 179, 255, 0.05));
}
.footer { background: linear-gradient(180deg, rgba(10, 20, 38, 0.6) 0%, rgba(5, 8, 17, 0.8) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.serif-em {
font-family: var(--serif); font-style: italic; font-weight: 400;
letter-spacing: -0.015em;
color: var(--accent-bright);
}
/* ─── Skip Link ──────────────────────────────────────────────── */
.skip-link {
position: absolute; top: -100px; left: 16px; z-index: 10001;
padding: 12px 20px;
background: var(--accent); color: var(--text-inv);
font-weight: 800; border-radius: var(--r-sm);
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; outline: 3px solid var(--accent-neon); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════════
NAV
═══════════════════════════════════════════════════════════════ */
.nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 100;
display: flex; align-items: center; gap: 6px;
padding: 8px 8px 8px 20px;
/* More opaque background lets us drop the saturate() filter — the
full backdrop-filter:saturate+blur on a fixed-positioned overlay
was re-rendering the entire backing store each scroll frame.
blur(12px) on a 0.86-alpha background is visually equivalent. */
background: rgba(10, 20, 38, 0.86);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-soft);
border-radius: 100px;
box-shadow:
0 24px 60px -20px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
max-width: calc(100vw - 32px);
}
.nav-brand {
display: flex; align-items: center; gap: 8px;
color: var(--accent);
font-family: var(--display);
font-weight: 800; font-size: 14px; letter-spacing: -0.015em;
}
.nav-brand:hover { color: var(--accent-neon); }
.nav-links { display: flex; gap: 6px; padding: 0 12px; }
.nav-links a {
color: var(--text-2); font-size: 13px; font-weight: 500;
padding: 6px 10px; border-radius: 100px;
transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.is-active {
color: var(--accent-bright);
background: rgba(0, 179, 255, 0.1);
}
.nav-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px;
background: var(--text); color: var(--text-inv) !important;
font-size: 12px; font-weight: 800; letter-spacing: -0.005em;
border-radius: 100px;
transition: transform 0.2s var(--ease), background 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); background: #fff; }
@media (max-width: 720px) {
.nav-links { display: none; }
.nav { padding: 8px 8px 8px 16px; }
}
/* ═══════════════════════════════════════════════════════════════
HERO — Editorial 2-col
═══════════════════════════════════════════════════════════════ */
.hero {
position: relative;
min-height: min(100vh, 760px);
padding: 76px var(--pad) 24px;
display: flex; align-items: flex-start;
overflow: visible;
background: transparent;
}
@media (min-height: 900px) {
.hero { padding: 120px var(--pad) 60px; min-height: 900px; align-items: center; }
}
.hero-content { padding-right: 16px; }
@media (max-width: 1080px) { .hero-content { padding-right: 0; } }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0, 179, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 179, 255, 0.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
opacity: 0.6;
}
.hero-inner {
position: relative; z-index: 2;
max-width: var(--container); margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: start;
width: 100%;
}
.hero-content { max-width: 580px; }
@media (max-width: 1080px) {
.hero-inner { grid-template-columns: 1fr; gap: 60px; }
.hero-content { max-width: 700px; margin: 0 auto; text-align: center; }
}
.hero-meta {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: 11.5px; font-weight: 600;
color: var(--text-2); letter-spacing: 0.04em;
margin-bottom: 24px;
white-space: nowrap;
flex-wrap: nowrap;
}
@media (max-width: 1340px) {
.hero-meta { font-size: 11px; gap: 8px; }
}
@media (max-width: 1080px) { .hero-meta { white-space: normal; flex-wrap: wrap; justify-content: center; } }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: 100px;
color: var(--accent-bright);
font-weight: 700;
letter-spacing: 0.06em;
}
.hb-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green); box-shadow: 0 0 8px var(--c-green);
animation: pulse 1.6s ease-in-out infinite;
}
.hero-meta-sep { color: var(--text-4); }
.hero-meta-text { color: var(--text-3); }
@media (max-width: 1080px) { .hero-meta { justify-content: center; flex-wrap: wrap; } }
.hero-headline {
font-family: var(--display);
font-size: clamp(32px, 4.6vw, 58px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--text);
margin-bottom: 20px;
}
.hero-headline em.serif-em {
font-size: 1.05em;
color: var(--text-2);
}
.hero-sub {
max-width: 520px;
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.6;
color: var(--text-2);
margin-bottom: 24px;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
@media (max-width: 1080px) { .hero-sub { margin: 0 auto 32px; } }
.hero-cta-row {
display: flex; gap: 12px; flex-wrap: wrap;
margin-bottom: 24px;
}
@media (max-width: 1080px) { .hero-cta-row { justify-content: center; } }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px;
font-family: var(--display);
font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
border-radius: 100px;
transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary {
background: linear-gradient(135deg, #00D9FF 0%, #00B3FF 100%);
color: var(--text-inv);
font-weight: 800;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 -1px 0 rgba(0, 0, 0, 0.2) inset,
0 8px 24px -6px rgba(0, 230, 255, 0.55);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 -1px 0 rgba(0, 0, 0, 0.2) inset,
0 14px 36px -6px rgba(0, 230, 255, 0.75);
}
.btn-ghost {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-2);
}
.btn-ghost:hover {
background: var(--glass-light);
border-color: var(--accent);
}
.btn-large { padding: 18px 30px; font-size: 16px; }
/* Hero numbered points */
.hero-points {
list-style: none;
display: flex; flex-direction: column; gap: 10px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
}
.hero-points li {
display: flex; align-items: baseline; gap: 12px;
font-size: 14px; color: var(--text-2);
}
.hero-points strong { color: var(--text); font-weight: 700; }
.hp-num {
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em;
color: var(--text-4);
min-width: 22px;
}
@media (max-width: 1080px) { .hero-points { max-width: 380px; margin: 0 auto; } }
/* ═══════════════════════════════════════════════════════════════
HERO — Interactive Phone Prototype (1 phone, 4 tabs)
═══════════════════════════════════════════════════════════════ */
.hero-prototype {
position: relative;
width: 100%;
display: flex; flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
perspective: 1400px;
}
.proto-hint {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
background: var(--glass);
border: 1px solid var(--border-soft);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-radius: 100px;
font-family: var(--mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent-bright);
}
.proto-hint .ph-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 8px var(--c-green);
animation: pulse 1.6s ease-in-out infinite;
}
.proto-phone {
position: relative;
width: clamp(240px, min(22vw, 32vh), 320px);
height: clamp(480px, 60vh, 660px);
max-height: 660px;
/* Content-scale fixed at 1.0 — proto-screen handles scaling via zoom */
--ph-scale: 1;
--ph-fs-xs: calc(8.5px * var(--ph-scale));
--ph-fs-sm: calc(10px * var(--ph-scale));
--ph-fs-md: calc(12px * var(--ph-scale));
--ph-fs-lg: calc(14px * var(--ph-scale));
--ph-fs-xl: calc(18px * var(--ph-scale));
--ph-fs-h: calc(22px * var(--ph-scale));
--ph-pad: calc(12px * var(--ph-scale));
--ph-pad-sm: calc(8px * var(--ph-scale));
--ph-gap: calc(6px * var(--ph-scale));
--ph-icon: calc(20px * var(--ph-scale));
--ph-icon-sm: calc(14px * var(--ph-scale));
background: linear-gradient(155deg, #2c313c 0%, #1a1f28 35%, #0a0f18 100%);
border-radius: 44px;
padding: 9px;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, 0.7),
0 20px 50px -15px rgba(0, 230, 255, 0.3),
0 0 0 1px rgba(0, 0, 0, 0.5),
inset 0 0 0 1.5px rgba(0, 230, 255, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: rotateY(-4deg) rotateX(2deg);
transition: transform 0.4s var(--ease);
animation: phoneFloat 8s ease-in-out infinite;
}
.proto-phone:hover {
transform: rotateY(0deg) rotateX(0deg) translateY(-6px);
animation-play-state: paused;
}
@keyframes phoneFloat {
0%, 100% { transform: rotateY(-4deg) rotateX(2deg) translateY(0); }
50% { transform: rotateY(-3deg) rotateX(0deg) translateY(-10px); }
}
.phone-frame-shell {
position: absolute; inset: 0;
pointer-events: none;
}
.phone-side {
position: absolute;
background: linear-gradient(90deg, #0a0f18, #1a1f28);
}
.phone-side-l { left: -2px; top: 24%; width: 3px; height: 32px; border-radius: 2px 0 0 2px; }
.phone-volume { left: -2px; top: 35%; width: 3px; height: 60px; border-radius: 2px 0 0 2px; }
.phone-side-r {
right: -2px; top: 30%;
width: 3px; height: 80px;
border-radius: 0 2px 2px 0;
background: linear-gradient(270deg, #0a0f18, #1a1f28);
}
.proto-phone .phone-inner {
position: relative;
width: 100%; height: 100%;
background: linear-gradient(180deg, #050D1F 0%, #0D1A26 100%);
border-radius: 36px;
overflow: hidden;
display: flex; flex-direction: column;
}
.proto-phone .phone-inner::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 0%, rgba(0, 230, 255, 0.12), transparent 40%),
radial-gradient(circle at 80% 100%, rgba(156, 110, 204, 0.08), transparent 40%);
pointer-events: none;
z-index: 0;
}
.phone-notch {
position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
width: 100px; height: 24px;
background: #000;
border-radius: 0 0 16px 16px;
z-index: 5;
}
.phone-notch::after {
content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 8px; height: 8px; border-radius: 50%;
background: #1a1f28;
box-shadow: inset 0 0 0 1.5px #000, 0 0 0 1px rgba(0, 230, 255, 0.3);
}
.phone-status {
position: relative; z-index: 2;
display: flex; justify-content: space-between; align-items: center;
padding: calc(13px * var(--ph-scale)) calc(20px * var(--ph-scale)) calc(6px * var(--ph-scale));
font-family: var(--mono); font-size: var(--ph-fs-sm); font-weight: 800;
color: var(--text);
}
.ps-icons { display: flex; gap: 4px; align-items: center; }
.ps-signal, .ps-wifi, .ps-bat {
display: inline-block;
width: 14px; height: 10px;
background: var(--text);
border-radius: 1.5px;
}
.ps-signal { clip-path: polygon(0 80%, 25% 80%, 25% 60%, 50% 60%, 50% 30%, 75% 30%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.ps-wifi { width: 12px; border-radius: 50%; opacity: 0.85; }
.ps-bat {
width: 22px; height: 11px;
border: 1.5px solid var(--text);
background: transparent;
border-radius: 3px;
position: relative;
}
.ps-bat::before {
content: ""; position: absolute;
inset: 1.5px; right: 6px;
background: var(--text);
border-radius: 1px;
}
.ps-bat::after {
content: ""; position: absolute;
right: -3px; top: 3px; bottom: 3px;
width: 1.5px; background: var(--text);
border-radius: 0 1px 1px 0;
}
/* Screen container with sliding tab pages — content scales via zoom */
.proto-screen {
position: relative; z-index: 1;
flex: 1;
overflow: hidden;
/* Scale ALL content proportionally to the phone size.
Reference: 100% at 660px phone height, scales down to ~70% at 480px */
zoom: clamp(0.68, calc(60vh / 660), 1);
}
/* Firefox doesn't support zoom — use transform fallback */
@supports not (zoom: 1) {
.proto-screen {
zoom: unset;
transform: scale(clamp(0.68, calc(60vh / 660), 1));
transform-origin: top left;
width: calc(100% / clamp(0.68, calc(60vh / 660), 1));
height: calc(100% / clamp(0.68, calc(60vh / 660), 1));
}
}
.proto-page {
position: absolute; inset: 0;
padding: 12px 14px 8px;
display: flex; flex-direction: column;
gap: 10px;
opacity: 0;
transform: translateX(20px);
pointer-events: none;
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
overflow-y: auto;
scrollbar-width: none;
}
.proto-page::-webkit-scrollbar { display: none; }
.proto-page.is-active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
/* MATCHING — big match card */
.match-card-big {
display: flex; flex-direction: column;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 14px;
overflow: hidden;
}
.mcb-cover {
position: relative;
height: 200px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
isolation: isolate;
}
.mcb-cover-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at top right, rgba(0, 230, 255, 0.4), transparent 60%),
linear-gradient(135deg, #001a3d 0%, #003366 40%, #00B3FF 80%, #00E6FF 100%);
}
.mcb-cover-grid {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
background-size: 12px 12px;
mix-blend-mode: overlay;
opacity: 0.4;
}
.mcb-glyph {
position: relative;
font-size: 96px;
color: rgba(255, 255, 255, 0.92);
font-weight: 800;
text-shadow:
0 0 30px rgba(0, 230, 255, 0.6),
0 8px 24px rgba(0, 0, 0, 0.5);
filter: drop-shadow(0 0 8px rgba(0, 230, 255, 0.4));
z-index: 1;
}
.mcb-rank {
position: absolute; top: 12px; left: 14px;
font-family: var(--display);
font-size: 11px; font-weight: 800;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.65);
color: #FFD700;
border-radius: 6px;
letter-spacing: 0.12em;
border: 1px solid rgba(255, 215, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 2;
}
.mcb-year {
position: absolute; top: 12px; left: 88px;
font-family: var(--mono);
font-size: 10px; font-weight: 700;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.55);
color: var(--text-2);
border-radius: 6px;
letter-spacing: 0.08em;
backdrop-filter: blur(4px);
z-index: 2;
}
.mcb-pct {
position: absolute; top: 12px; right: 14px;
font-family: var(--display);
font-size: 22px; font-weight: 900;
color: #fff;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 16px rgba(0, 230, 255, 0.7);
letter-spacing: -0.02em;
z-index: 2;
line-height: 1;
display: inline-flex; align-items: baseline;
}
.mcb-pct small { font-size: 11px; opacity: 0.7; margin-left: 1px; font-weight: 700; }
.mcb-cover-info {
position: absolute; bottom: 10px; left: 14px;
z-index: 2;
}
.mcb-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
border: 1px solid rgba(0, 204, 85, 0.4);
border-radius: 100px;
font-family: var(--mono);
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--c-green);
}
.mcb-status i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 6px var(--c-green);
animation: pulse 1.6s ease-in-out infinite;
}
.mcb-info {
padding: 12px 14px 10px;
border-bottom: 1px solid var(--border-soft);
}
.mcb-info strong {
display: block;
font-family: var(--display);
font-size: 16px; font-weight: 800;
color: var(--text);
letter-spacing: -0.015em;
}
.mcb-info > span {
display: block;
font-family: var(--mono);
font-size: 10px;
color: var(--text-3);
letter-spacing: 0.04em;
margin-top: 2px;
}
.mcb-tags {
display: flex; gap: 4px; margin-top: 8px;
}
.mcb-tags i {
font-style: normal;
padding: 3px 8px;
background: rgba(0, 179, 255, 0.1);
border: 1px solid var(--border-soft);
border-radius: 100px;
font-family: var(--mono);
font-size: 9px; font-weight: 700;
color: var(--accent-bright);
letter-spacing: 0.06em;
}
.mcb-reasons {
padding: 10px 14px;
display: flex; flex-direction: column;
gap: 6px;
}
.mcb-reasons > div {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--mono);
font-size: 10.5px;
}
.mcb-reasons span { color: var(--text-2); }
.mcb-reasons b { color: var(--accent-neon); font-weight: 700; }
.match-actions-big {
display: flex; justify-content: center; gap: 14px;
padding-top: 6px;
}
.mab {
width: 52px; height: 52px;
border-radius: 50%;
font-size: 18px;
font-weight: 800;
border: 2px solid;
cursor: pointer;
transition: transform 0.2s var(--ease), box-shadow 0.2s;
display: flex; align-items: center; justify-content: center;
}
.mab-pass {
background: var(--surface-2);
border-color: var(--c-red);
color: var(--c-red);
}
.mab-info {
width: 40px; height: 40px;
background: var(--surface-2);
border-color: var(--accent);
color: var(--accent-bright);
font-family: var(--serif);
font-style: italic;
align-self: center;
}
.mab-like {
background: linear-gradient(135deg, var(--c-green), var(--c-green-d));
border-color: var(--c-green);
color: #fff;
box-shadow: 0 8px 18px -4px rgba(0, 204, 85, 0.5);
}
.mab:hover { transform: scale(1.1) translateY(-2px); }
.mab-pass:hover { box-shadow: 0 8px 18px -4px rgba(255, 51, 77, 0.5); }
.mab-like:hover { box-shadow: 0 12px 24px -4px rgba(0, 204, 85, 0.7); }
/* WATCHLIST */
.phone-rows {
display: flex; flex-direction: column; gap: 6px;
margin-top: 4px;
}
.phone-row {
display: grid;
grid-template-columns: 36px 1fr auto;
grid-template-rows: auto auto;
gap: 4px 10px;
padding: 8px 10px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 10px;
align-items: center;
}
.phone-row.done { opacity: 0.6; }
.pr-thumb {
grid-row: 1 / span 2;
width: 36px; height: 36px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 15px; font-weight: 800;
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
}
.pr-info {
grid-column: 2;
grid-row: 1;
}
.pr-info strong {
display: block;
font-family: var(--display);
font-size: 12.5px; font-weight: 700;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -0.005em;
}
.pr-info span {
display: block;
font-family: var(--mono);
font-size: 9.5px; color: var(--text-3);
letter-spacing: 0.04em;
margin-top: 1px;
}
.pr-bar {
grid-column: 2;
grid-row: 2;
height: 3px;
background: rgba(0, 179, 255, 0.1);
border-radius: 100px;
overflow: hidden;
}
.pr-bar i {
display: block; height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-neon));
border-radius: 100px;
}
.pr-rate {
grid-column: 3;
grid-row: 1 / span 2;
font-family: var(--mono);
font-size: 10px; font-weight: 700;
color: var(--c-gold);
align-self: center;
}
/* CHAT */
.proto-page[data-page="chat"] { padding: 0; }
.phone-chat-h {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: rgba(13, 26, 38, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-soft);
}
.pch-back {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--surface-2);
color: var(--text-2);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
line-height: 1;
}
.pch-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #FF5C8A, #C44FE6);
flex-shrink: 0;
position: relative;
}
.pch-avatar::after {
content: ""; position: absolute; bottom: -1px; right: -1px;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--c-green);
border: 2px solid var(--bg-3);
box-shadow: 0 0 6px var(--c-green);
}
.pch-info { flex: 1; min-width: 0; }
.pch-info strong {
display: block;
font-family: var(--display);
font-size: 14px; font-weight: 700;
color: var(--text);
}
.pch-info span {
display: flex; align-items: center; gap: 5px;
font-family: var(--mono);
font-size: 9.5px;
color: var(--text-3);
}
.pch-online {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 6px var(--c-green);
}
.pch-call {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-green), var(--c-green-d));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
box-shadow: 0 4px 12px -3px rgba(0, 204, 85, 0.5);
}
.ph-bubbles {
flex: 1;
padding: 12px 14px;
display: flex; flex-direction: column;
gap: 5px;
overflow-y: auto;
scrollbar-width: none;
}
.ph-bubbles::-webkit-scrollbar { display: none; }
.ph-day-divider {
display: flex; justify-content: center;
margin: 4px 0 6px;
}
.ph-day-divider span {
padding: 3px 10px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 100px;
font-family: var(--mono);
font-size: 9.5px;
color: var(--text-3);
font-weight: 600;
letter-spacing: 0.06em;
}
.ph-bubble {
position: relative;
font-size: 12px;
padding: 8px 12px;
border-radius: 14px;
max-width: 80%;
display: flex; flex-direction: column;
gap: 2px;
line-height: 1.35;
}
.ph-bubble.them {
align-self: flex-start;
background: var(--surface-2);
border: 1px solid var(--border-soft);
color: var(--text-2);
border-top-left-radius: 4px;
}
.ph-bubble.me {
align-self: flex-end;
background: linear-gradient(135deg, var(--accent), var(--accent-neon));
color: var(--text-inv);
font-weight: 600;
border-top-right-radius: 4px;
box-shadow: 0 4px 10px -3px rgba(0, 230, 255, 0.4);
}
.ph-bubble .bubble-time {
font-family: var(--mono);
font-size: 8.5px;
opacity: 0.6;
letter-spacing: 0.04em;
align-self: flex-end;
}
.ph-bubble.typing {
align-self: flex-start;
background: var(--surface-2);
border: 1px solid var(--border-soft);
flex-direction: row;
align-items: center;
border-top-left-radius: 4px;
padding: 11px 14px;
}
.ph-bubble.typing span {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--text-3);
margin-right: 3px;
animation: chatType 1.4s ease-in-out infinite;
}
.ph-bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.ph-bubble.typing span:nth-child(3) { animation-delay: 0.3s; margin-right: 0; }
@keyframes chatType {
0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
40% { opacity: 1; transform: scale(1.3); }
}
.phone-chat-input {
display: flex; align-items: center; gap: 8px;
margin: 8px 12px 12px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 100px;
font-family: var(--mono);
font-size: 11px;
}
.pci-emoji { font-size: 14px; }
.pci-text {
flex: 1;
color: var(--text-3);
}
.pci-send {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-neon));
color: var(--text-inv);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
box-shadow: 0 4px 10px -2px rgba(0, 230, 255, 0.5);
}
color: var(--accent-bright);
letter-spacing: 0.04em;
}
/* TAB BAR — see consolidated definition near end of file */
@media (max-width: 1080px) {
.proto-phone { width: 300px; height: 620px; }
}
@media (max-width: 480px) {
.proto-phone { width: 280px; height: 580px; }
.mcb-cover { height: 180px; }
.mcb-glyph { font-size: 64px; }
}
/* ═══════════════════════════════════════════════════════════════
STATS
═══════════════════════════════════════════════════════════════ */
.stats {
padding: clamp(60px, 8vw, 100px) var(--pad);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: var(--bg-2);
}
.stats-grid {
max-width: var(--container); margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 4px;
background: var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
}
.stat {
display: flex; flex-direction: column; gap: 4px;
padding: 32px 28px;
background: var(--bg-2);
}
.stat-num {
font-family: var(--display);
font-size: clamp(48px, 6vw, 72px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
color: var(--text);
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.stat-num i {
font-style: normal;
font-family: var(--serif);
font-weight: 400;
font-size: 0.5em;
color: var(--accent-bright);
margin-left: 2px;
letter-spacing: 0;
}
.stat-label {
font-family: var(--display);
font-size: 14px; font-weight: 700;
letter-spacing: -0.01em;
color: var(--accent-bright);
}
.stat-desc {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
line-height: 1.4;
color: var(--text-3);
}
@media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════
SECTIONS
═══════════════════════════════════════════════════════════════ */
.section {
padding: var(--section-y) var(--pad);
position: relative;
}
.section > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
/* ═══════════════════════════════════════════════════════════════
PAGE-HERO — standalone sub-page header (under the fixed nav).
Editorial, generous, premium-anime-RPG feel — clean hierarchy.
═══════════════════════════════════════════════════════════════ */
.page-hero {
position: relative;
padding: clamp(140px, 20vh, 220px) var(--pad) clamp(48px, 8vh, 96px);
overflow: hidden;
}
.page-hero-inner {
max-width: var(--container);
margin: 0 auto;
position: relative;
z-index: 2;
}
.ph-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-bright);
margin-bottom: 22px;
}
.ph-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-bright));
}
.ph-title {
font-family: var(--display);
font-size: var(--fs-h1);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: -0.035em;
color: var(--text);
margin: 0 0 22px;
max-width: 920px;
/* Subtle text-shadow boosts contrast against the atmospheric bg */
text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
.ph-title em.serif-em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
color: var(--accent-bright);
letter-spacing: -0.015em;
}
.ph-sub {
font-size: var(--fs-lead);
line-height: var(--lh-normal);
color: var(--text-2);
max-width: 680px;
margin: 0;
}
.page-hero-aura {
position: absolute;
pointer-events: none;
top: 30%; left: 50%;
width: 90%; height: 70%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(0, 230, 255, 0.10) 0%,
rgba(0, 179, 255, 0.05) 30%,
transparent 65%
);
filter: blur(50px);
z-index: 1;
}
/* First .section after a page-hero gets a tighter top-spacing */
.page-hero + .section { padding-top: clamp(20px, 3vh, 48px); }
/* Sub-pages without .page-hero (faq, beta) — first .section needs
nav-clearance + its own elegant top spacing. */
main > .section:first-child,
main > .section:first-of-type {
padding-top: clamp(140px, 18vh, 200px);
}
/* Homepage exception — hero sets its own spacing */
main > .hero:first-child + .section,
main > .hero + .section { padding-top: var(--section-y); }
/* Bottom CTA strip on sub-pages — clean, centered, breathing */
.page-cta-strip {
padding: clamp(80px, 12vh, 140px) var(--pad);
text-align: center;
position: relative;
}
.page-cta-inner {
max-width: 680px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.page-cta-strip h2 {
font-family: var(--display);
font-size: var(--fs-h2);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 16px;
color: var(--text);
}
.page-cta-strip p {
color: var(--text-2);
font-size: var(--fs-lead);
line-height: var(--lh-normal);
margin: 0;
}
@media (max-width: 720px) {
.page-hero {
padding-top: clamp(110px, 15vh, 150px);
padding-bottom: clamp(36px, 6vh, 64px);
}
.ph-title { font-size: clamp(32px, 8vw, 44px); margin-bottom: 16px; }
.ph-sub { font-size: 16px; }
}
/* Discreet admin link in footer — slightly muted, with a tiny shield
icon prefix so it reads as "private / authorised area" not just a
regular footer link. */
.footer-admin-link {
position: relative;
padding-left: 18px;
opacity: 0.72;
transition: opacity 0.2s, color 0.2s;
}
.footer-admin-link::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 12px; height: 12px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.8;
}
.footer-admin-link:hover {
opacity: 1;
color: var(--accent-bright);
}
.section-header {
max-width: 760px;
margin: 0 auto clamp(48px, 6vh, 80px);
text-align: center;
position: relative;
z-index: 2;
}
.section-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent-bright);
margin-bottom: 20px;
}
.section-eyebrow::before, .section-eyebrow::after {
content: ""; display: inline-block;
width: 32px; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-bright));
opacity: 0.6;
}
.section-eyebrow::after { background: linear-gradient(90deg, var(--accent-bright), transparent); }
.se-num {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 14px;
letter-spacing: 0;
color: var(--accent);
}
.section-h2 {
font-family: var(--display);
font-size: var(--fs-h2);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 18px;
text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}
.section-h2 em.serif-em {
color: var(--accent-bright);
font-size: 1.02em;
font-style: italic;
font-weight: 400;
}
.section-desc {
color: var(--text-2);
font-size: var(--fs-lead);
line-height: var(--lh-normal);
max-width: 620px;
margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════
BENTO — Color-coded per cell
═══════════════════════════════════════════════════════════════ */
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.bento-cell {
--color: var(--accent);
--color-d: var(--accent-dark);
position: relative;
background: linear-gradient(180deg,
rgba(15, 28, 44, 0.85),
rgba(10, 20, 38, 0.92));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-lg);
padding: 28px 30px;
overflow: hidden;
display: flex; flex-direction: column;
gap: 16px;
transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.3s;
/* Inner glow ridge — emphasizes the card edge in low-contrast areas */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 12px 30px -16px rgba(0, 0, 0, 0.5);
}
.bento-cell::before {
content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
background: linear-gradient(90deg, transparent, var(--color), transparent);
}
.bento-cell::after {
content: ""; position: absolute; right: -80px; top: -80px;
width: 240px; height: 240px;
background: radial-gradient(circle, var(--color), transparent 60%);
opacity: 0.08;
filter: blur(20px);
pointer-events: none;
}
.bento-cell:hover {
border-color: var(--color);
transform: translateY(-2px);
box-shadow:
0 24px 50px -16px rgba(0, 0, 0, 0.5),
0 0 0 1px var(--color);
}
.bento-cell[data-color="cyan"] { --color: var(--accent-bright); --color-d: var(--accent-dark); }
.bento-cell[data-color="magenta"] { --color: var(--c-magenta); --color-d: var(--c-magenta-d); }
.bento-cell[data-color="green"] { --color: var(--c-green); --color-d: var(--c-green-d); }
.bento-cell[data-color="orange"] { --color: var(--c-orange); --color-d: var(--c-orange-d); }
.bento-cell[data-color="gold"] { --color: var(--c-gold); --color-d: var(--c-gold-d); }
.bento-cell[data-color="rose"] { --color: var(--c-rose); --color-d: var(--c-rose-d); }
.bento-1 { grid-column: span 8; min-height: 320px; }
.bento-2 { grid-column: span 4; min-height: 320px; }
.bento-3 { grid-column: span 4; min-height: 280px; }
.bento-4 { grid-column: span 4; min-height: 280px; }
.bento-5 { grid-column: span 4; min-height: 280px; }
.bento-6 { grid-column: span 12; min-height: 240px; }
@media (max-width: 1080px) {
.bento-1, .bento-2 { grid-column: span 6; }
.bento-3, .bento-4, .bento-5 { grid-column: span 4; }
.bento-6 { grid-column: span 12; }
}
@media (max-width: 880px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-1, .bento-2, .bento-3, .bento-4, .bento-5, .bento-6 { grid-column: span 2; min-height: 0; }
}
@media (max-width: 540px) {
.bento { grid-template-columns: 1fr; }
.bento-1, .bento-2, .bento-3, .bento-4, .bento-5, .bento-6 { grid-column: span 1; }
}
.bento-meta {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
}
.bm-tag { color: var(--color); }
.bm-status {
display: inline-flex; align-items: center; gap: 6px;
color: var(--text-3);
}
.bm-status i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 6px var(--c-green);
animation: pulse 1.6s ease-in-out infinite;
}
.bento-cell h3 {
font-family: var(--display);
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text);
}
.bento-cell h3 em.serif-em {
color: var(--color);
font-size: 1.05em;
}
.bento-cell p {
font-size: 14px;
line-height: 1.55;
color: var(--text-2);
}
/* Bento 1: Smart Matching swipe card */
.match-vis {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 180px;
gap: 16px;
align-items: end;
}
.match-card {
position: relative;
background: linear-gradient(180deg, var(--bg-3), var(--bg-4));
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
}
.mc-cover {
position: relative;
height: 110px;
display: flex; align-items: center; justify-content: center;
font-size: 36px; color: rgba(255, 255, 255, 0.6);
font-weight: 800;
}
.mc-rank {
position: absolute; top: 8px; left: 10px;
font-family: var(--display);
font-size: 12px; font-weight: 800;
padding: 3px 8px;
background: rgba(0, 0, 0, 0.45);
color: #FFD700;
border-radius: var(--r-sm);
letter-spacing: 0.05em;
}
.mc-tag {
position: absolute; bottom: 8px; right: 10px;
font-family: var(--mono);
font-size: 11px; font-weight: 700;
padding: 3px 8px;
background: rgba(0, 230, 255, 0.95);
color: var(--text-inv);
border-radius: var(--r-sm);
letter-spacing: 0.04em;
}
.mc-info {
padding: 10px 12px;
}
.mc-info strong {
display: block;
font-family: var(--display);
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.mc-info span {
display: block;
font-family: var(--mono);
font-size: 10px; color: var(--text-3);
margin-top: 2px;
}
.match-reasons {
display: flex; flex-direction: column; gap: 6px;
font-family: var(--mono); font-size: 11px;
}
.match-reasons .mr-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 10px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
}
.mr-row span { color: var(--text-2); }
.mr-row b { color: var(--accent-bright); font-weight: 700; }
.match-actions {
display: flex; gap: 10px;
justify-content: center;
margin-top: 8px;
}
.ma-pass, .ma-like {
width: 38px; height: 38px;
border-radius: 50%;
font-size: 14px;
font-weight: 800;
border: 2px solid;
cursor: pointer;
transition: transform 0.2s var(--ease);
}
.ma-pass { background: var(--surface-2); border-color: var(--c-red); color: var(--c-red); }
.ma-like { background: var(--surface-2); border-color: var(--c-green); color: var(--c-green); }
.ma-pass:hover, .ma-like:hover { transform: scale(1.1); }
@media (max-width: 1080px) { .match-vis { grid-template-columns: 1fr; } }
/* Bento 2: Encrypted Chat */
.chat-vis {
margin-top: auto;
display: flex; flex-direction: column; gap: 6px;
}
.chat-vis .chat-bubble {
max-width: 85%;
padding: 8px 12px;
font-size: 13px;
border-radius: 12px;
}
.chat-vis .chat-bubble.them {
align-self: flex-start;
background: var(--surface-2);
border: 1px solid var(--border-soft);
color: var(--text-2);
border-top-left-radius: 4px;
}
.chat-vis .chat-bubble.me {
align-self: flex-end;
background: linear-gradient(135deg, var(--c-magenta), var(--c-magenta-d));
color: #fff;
font-weight: 600;
border-top-right-radius: 4px;
box-shadow: 0 4px 12px -4px rgba(196, 79, 230, 0.5);
}
.chat-vis .chat-bubble.typing {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 3px;
padding: 11px 14px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-top-left-radius: 4px;
}
.chat-vis .chat-bubble.typing i {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--text-3);
animation: chatType 1.4s ease-in-out infinite;
}
.chat-vis .chat-bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-vis .chat-bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
/* Bento 3: Voice */
.voice-vis {
margin-top: auto;
display: flex; flex-direction: column; gap: 12px;
}
.voice-call {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.vc-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--c-green), var(--c-green-d));
flex-shrink: 0;
position: relative;
}
.vc-avatar::after {
content: ""; position: absolute; bottom: -1px; right: -1px;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--c-green);
border: 2px solid var(--bg-3);
box-shadow: 0 0 6px var(--c-green);
}
.vc-info { flex: 1; min-width: 0; }
.vc-info strong {
display: block;
font-family: var(--display);
font-size: 13px; font-weight: 700;
color: var(--text);
}
.vc-info span {
font-family: var(--mono);
font-size: 10px; color: var(--text-3);
letter-spacing: 0.04em;
}
.vc-end {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--c-red);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800;
cursor: pointer;
}
.voice-wave {
display: flex; align-items: center; justify-content: center; gap: 4px;
height: 56px;
padding: 0 12px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.voice-wave span {
flex: 0 0 4px;
height: 36px;
background: linear-gradient(180deg, var(--c-green), var(--c-green-d));
border-radius: 100px;
/* Animate transform-scaleY instead of height — height triggers
layout reflow each frame (12 bars × 60fps = 720 reflows/sec).
scaleY runs purely on the compositor, no layout work. */
transform: scaleY(0.22);
transform-origin: center;
animation: vwPulse 1.2s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { animation-delay: 0s; }
.voice-wave span:nth-child(2) { animation-delay: 0.08s; }
.voice-wave span:nth-child(3) { animation-delay: 0.16s; }
.voice-wave span:nth-child(4) { animation-delay: 0.24s; }
.voice-wave span:nth-child(5) { animation-delay: 0.32s; }
.voice-wave span:nth-child(6) { animation-delay: 0.4s; }
.voice-wave span:nth-child(7) { animation-delay: 0.48s; }
.voice-wave span:nth-child(8) { animation-delay: 0.56s; }
.voice-wave span:nth-child(9) { animation-delay: 0.48s; }
.voice-wave span:nth-child(10) { animation-delay: 0.4s; }
.voice-wave span:nth-child(11) { animation-delay: 0.32s; }
.voice-wave span:nth-child(12) { animation-delay: 0.24s; }
@keyframes vwPulse { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
/* Bento 4: Watchlist */
.watch-mini {
margin-top: auto;
display: flex; flex-direction: column; gap: 6px;
}
.wm-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
}
.wm-thumb {
width: 28px; height: 28px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 12px; font-weight: 800;
}
.wm-row b {
font-family: var(--display);
font-size: 12.5px; font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-row i {
font-style: normal;
font-family: var(--mono);
font-size: 10px; font-weight: 700;
color: var(--c-orange);
}
/* Bento 5: Achievements */
.ach-vis {
margin-top: auto;
display: flex; flex-direction: column; gap: 12px;
}
.ach-archetype {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.aa-emoji { font-size: 20px; }
.ach-archetype div { flex: 1; }
.ach-archetype span {
display: block;
font-family: var(--mono);
font-size: 9.5px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-3);
}
.ach-archetype strong {
display: block;
font-family: var(--display);
font-size: 14px; font-weight: 800;
color: var(--c-gold);
letter-spacing: -0.01em;
}
.ach-badges {
display: flex; gap: 5px;
}
.ab-pip {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 11px; font-weight: 800;
border: 2px solid var(--bg-3);
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
}
.ab-pip.more {
background: var(--surface-2);
color: var(--text-2);
font-family: var(--mono);
font-size: 9px;
}
/* Bento 6: Stories + Quiz */
.stories-vis {
margin-top: auto;
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: center;
}
@media (max-width: 720px) { .stories-vis { grid-template-columns: 1fr; } }
.sv-rings {
display: flex; gap: 8px;
}
.sv-ring {
position: relative;
width: 52px; height: 52px;
border-radius: 50%;
padding: 2.5px;
background: conic-gradient(from 0deg, var(--c-rose), var(--c-magenta), var(--c-rose));
display: flex; align-items: center; justify-content: center;
}
.sv-ring i {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; border-radius: 50%;
background: var(--bg-3);
font-family: var(--display); font-size: 16px; font-weight: 800;
color: var(--c-rose);
font-style: normal;
}
.sv-quiz {
padding: 14px 16px;
background: linear-gradient(135deg, rgba(255, 92, 138, 0.06), rgba(196, 79, 230, 0.04));
border: 1px solid rgba(196, 79, 230, 0.3);
border-radius: var(--r-md);
}
.svq-tag {
display: inline-block;
font-family: var(--mono);
font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 3px 8px;
background: linear-gradient(135deg, var(--c-rose), var(--c-magenta));
color: #fff;
border-radius: 100px;
margin-bottom: 8px;
}
.svq-q {
display: block;
font-family: var(--display);
font-size: 14px; font-weight: 600;
color: var(--text);
margin-bottom: 10px;
line-height: 1.4;
}
.svq-q em {
color: var(--accent-bright);
font-style: italic;
font-family: var(--serif);
}
.svq-options {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.svq-options span {
padding: 6px 8px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
font-family: var(--mono);
font-size: 10.5px; font-weight: 600;
color: var(--text-2);
text-align: center;
}
.svq-options span.correct {
background: rgba(0, 204, 85, 0.12);
border-color: rgba(0, 204, 85, 0.5);
color: var(--c-green);
}
@media (max-width: 480px) { .svq-options { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════
VALUES GRID — replaces the (deleted) comparison table
═══════════════════════════════════════════════════════════════ */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1100px; margin: 0 auto;
}
@media (max-width: 980px) {
.values-grid { grid-template-columns: 1fr; }
}
.value-card {
position: relative;
padding: 32px 28px 28px;
background: linear-gradient(180deg, var(--glass-light), var(--surface-2));
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
display: flex; flex-direction: column;
gap: 14px;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
overflow: hidden;
}
.value-card::before {
content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-neon), transparent);
}
.value-card:hover {
transform: translateY(-3px);
border-color: var(--border-2);
box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.5);
}
.vc-num {
position: absolute;
top: 24px; right: 24px;
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em;
color: var(--text-4);
}
.vc-icon {
width: 48px; height: 48px;
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 22px; font-weight: 800;
box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.value-card h3 {
font-family: var(--display);
font-size: 22px; font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.2;
}
.value-card p {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-2);
}
.vc-list {
list-style: none;
display: flex; flex-direction: column;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.vc-list li {
position: relative;
padding-left: 18px;
font-family: var(--mono);
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-2);
}
.vc-list li::before {
content: ""; position: absolute; left: 0; top: 0.5em;
width: 10px; height: 1.5px;
background: var(--accent-neon);
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════
COMPARISON TABLE (legacy CSS - kept for backwards compat)
═══════════════════════════════════════════════════════════════ */
.compare-table {
max-width: 920px;
margin: 0 auto;
background: var(--bg-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
overflow: hidden;
}
.ct-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
align-items: center;
border-bottom: 1px solid var(--border-soft);
transition: background 0.25s;
}
.ct-row:last-child { border-bottom: none; }
.ct-row:not(.ct-head):hover { background: var(--surface); }
.ct-head {
background: var(--bg-3);
border-bottom: 1px solid var(--border-2);
}
.ct-feature {
padding: 14px 22px;
font-family: var(--display);
font-size: 14px; font-weight: 600;
color: var(--text-2);
}
.ct-head .ct-feature {
font-family: var(--mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-3);
}
.ct-col {
padding: 14px 12px;
text-align: center;
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-3);
position: relative;
}
.ct-head .ct-col {
border-bottom: 2px solid transparent;
}
.ct-head .ct-us {
color: var(--accent-neon);
border-bottom-color: var(--accent-neon);
}
.ct-us {
background: linear-gradient(180deg, rgba(0, 230, 255, 0.06), rgba(0, 230, 255, 0.02));
border-left: 1px solid var(--border-2);
}
.ct-yes, .ct-no, .ct-yes-bad, .ct-no-good, .ct-text {
display: inline-flex; align-items: center; justify-content: center;
font-style: normal;
width: 24px; height: 24px;
border-radius: 50%;
font-size: 13px;
}
.ct-yes { background: rgba(0, 204, 85, 0.15); color: var(--c-green); }
.ct-no { background: var(--surface-2); color: var(--text-4); width: 24px; }
.ct-yes-bad { background: rgba(255, 159, 28, 0.12); color: var(--c-orange); }
.ct-no-good { background: rgba(0, 204, 85, 0.15); color: var(--c-green); }
.ct-text {
width: auto; height: auto;
border-radius: 0; background: none;
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.04em;
text-transform: none;
}
.ct-text-good {
color: var(--c-green); font-weight: 800;
}
.ct-us .ct-yes { background: rgba(0, 230, 255, 0.15); color: var(--accent-neon); box-shadow: 0 0 12px rgba(0, 230, 255, 0.4); }
.ct-us .ct-no-good { background: rgba(0, 230, 255, 0.15); color: var(--accent-neon); }
@media (max-width: 720px) {
.ct-row { grid-template-columns: 1.5fr 1fr 1fr; }
.ct-row > .ct-col:nth-child(2),
.ct-row > .ct-col:nth-child(3) { display: none; }
.ct-feature { padding: 12px 16px; font-size: 13px; }
}
/* ═══════════════════════════════════════════════════════════════
ARCHETYPE GRID
═══════════════════════════════════════════════════════════════ */
.archetype-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
max-width: 1100px;
}
.ar-card {
position: relative;
padding: 22px 18px;
background: linear-gradient(180deg, var(--glass-light), var(--surface-2));
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
display: flex; flex-direction: column; gap: 8px;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.ar-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--ac); opacity: 0.7;
}
.ar-card:hover {
transform: translateY(-3px);
border-color: var(--ac);
box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--ac) 50%, transparent);
}
.ar-emoji { font-size: 28px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.ar-card strong {
font-family: var(--display);
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.ar-card span {
font-size: 12px;
color: var(--text-3);
line-height: 1.4;
}
.ar-featured {
background: linear-gradient(180deg, rgba(0, 179, 255, 0.1), var(--surface-2));
border-color: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════
FOUNDER V2
═══════════════════════════════════════════════════════════════ */
.section-founder-v2 {
background: linear-gradient(180deg, transparent, rgba(0, 179, 255, 0.03));
}
.founder-v2 {
display: grid;
grid-template-columns: 280px 1fr;
gap: 60px;
align-items: start;
}
@media (max-width: 880px) {
.founder-v2 { grid-template-columns: 1fr; gap: 40px; }
}
.founder-v2-meta {
display: flex; flex-direction: column; gap: 18px;
padding: 28px;
background: var(--bg-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
position: sticky; top: 100px;
}
/* On single-column layouts the sticky meta-card overlaps the prose
beneath it (the user scrolls but the card stays pinned at top:100px).
Disable sticky positioning below the breakpoint so the card scrolls
normally with the rest of the section. */
@media (max-width: 880px) {
.founder-v2-meta { position: static; top: auto; }
}
.fv-avatar {
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-neon));
padding: 3px;
box-shadow: 0 0 28px rgba(0, 230, 255, 0.4);
}
.fv-avatar-inner {
width: 100%; height: 100%;
border-radius: 50%;
background: var(--bg-3);
display: flex; align-items: center; justify-content: center;
font-family: var(--display);
font-size: 22px; font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
}
.fv-name strong {
display: block;
font-family: var(--display);
font-size: 18px; font-weight: 800;
color: var(--text);
letter-spacing: -0.015em;
}
.fv-name span {
display: block;
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.06em;
margin-top: 2px;
}
.fv-tags {
display: flex; flex-wrap: wrap; gap: 6px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
}
.fv-tags span {
padding: 4px 10px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 100px;
font-family: var(--mono);
font-size: 10.5px; font-weight: 600;
color: var(--text-2);
letter-spacing: 0.04em;
}
.founder-v2-text {
display: flex; flex-direction: column; gap: 18px;
max-width: 640px;
}
.founder-v2-eyebrow { margin-bottom: 0; }
.founder-v2-eyebrow::before, .founder-v2-eyebrow::after { width: 18px; }
.founder-v2-h {
font-family: var(--display);
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--text);
}
.founder-v2-body {
font-family: var(--serif);
font-style: normal;
font-size: clamp(17px, 1.25vw, 19px);
line-height: 1.7;
color: var(--text);
}
.founder-v2-body em.serif-em {
color: var(--accent-bright);
font-style: italic;
}
.founder-v2-body strong {
font-family: var(--display);
font-style: normal;
font-weight: 700;
color: var(--text);
}
.founder-v2-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px;
margin-top: 8px;
background: var(--text);
color: var(--text-inv) !important;
font-family: var(--display);
font-size: 14px; font-weight: 800;
border-radius: 100px;
width: fit-content;
transition: transform 0.25s var(--ease), background 0.25s;
}
.founder-v2-cta:hover { background: #fff; transform: translateY(-1px); }
.founder-v2-cta svg { transition: transform 0.3s var(--ease); }
.founder-v2-cta:hover svg { transform: translateX(4px); }
/* ═══════════════════════════════════════════════════════════════
FORM
═══════════════════════════════════════════════════════════════ */
.section-form { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.form-glass {
max-width: 600px; margin: 0 auto;
padding: 44px clamp(28px, 4vw, 48px);
background: var(--bg-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-xl);
position: relative; overflow: hidden;
box-shadow:
0 32px 80px -20px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.form-glass::before {
content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-neon), transparent);
}
.form-header { text-align: center; margin-bottom: 32px; }
.form-header .section-eyebrow { margin-bottom: 14px; }
.form-header .section-h2 {
font-size: clamp(26px, 3vw, 38px);
margin-bottom: 8px;
}
.form-sub {
font-size: 14px;
line-height: 1.55;
color: var(--text-2);
margin-bottom: 24px;
}
.form-sub strong { color: var(--text); font-weight: 700; }
.countdown {
display: flex; gap: 6px;
justify-content: center;
margin-top: 22px;
flex-wrap: wrap;
}
.cd-block {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 14px;
background: var(--bg-3);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
min-width: 64px;
position: relative;
}
.cd-block::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-neon), transparent);
}
.cd-num {
font-family: var(--display);
font-size: 22px; font-weight: 800;
color: var(--accent-bright);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.cd-label {
font-family: var(--mono);
font-size: 9px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-3);
}
.cd-sep {
font-size: 22px; color: var(--text-4);
align-self: center;
animation: pulse 1.6s ease-in-out infinite;
}
.field { margin-bottom: 18px; }
.field label {
display: block; margin-bottom: 8px;
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent-bright);
}
.field-wrap { position: relative; }
.field-icon {
position: absolute; left: 16px; top: 50%;
transform: translateY(-50%);
color: var(--text-3);
pointer-events: none;
transition: color 0.25s;
}
.field input[type="email"],
.field input[type="text"],
.field input[type="number"] {
width: 100%;
padding: 16px 18px 16px 46px;
background: var(--bg-3);
border: 1.5px solid var(--border-soft);
border-radius: var(--r-md);
color: var(--text);
font-family: inherit;
font-size: 15px; font-weight: 500;
letter-spacing: -0.005em;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
/* Hide native number-input spinners for the age field */
-moz-appearance: textfield;
}
.field input[type="email"]:focus,
.field input[type="text"]:focus,
.field input[type="number"]:focus {
outline: none;
border-color: var(--accent);
background: rgba(0, 179, 255, 0.04);
box-shadow:
0 0 0 4px rgba(0, 179, 255, 0.12),
0 0 24px -4px rgba(0, 230, 255, 0.4);
}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.field-wrap:focus-within .field-icon { color: var(--accent-bright); }
.field input::placeholder { color: var(--text-4); }
/* Two-column row for vorname+nachname / email+alter */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 0;
}
.field-row .field { margin-bottom: 18px; }
.field-row .field-narrow { grid-column: span 1; }
@media (max-width: 560px) {
.field-row { grid-template-columns: 1fr; gap: 0; }
}
/* ═══════════════════════════════════════════════════════════════
COOKIE BANNER — DSGVO/TTDSG-konform
═══════════════════════════════════════════════════════════════ */
.cookie-banner {
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 10001;
display: flex; justify-content: center;
pointer-events: none;
/* Slide-in from bottom */
animation: cookieSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookieSlideUp {
from { transform: translateY(120%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-card {
pointer-events: auto;
width: 100%; max-width: 720px;
padding: 22px 24px 20px;
background: linear-gradient(180deg, rgba(13, 26, 38, 0.96), rgba(10, 18, 32, 0.98));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(0, 179, 255, 0.28);
border-radius: var(--r-lg);
box-shadow:
0 32px 80px -20px rgba(0, 0, 0, 0.7),
0 0 60px -10px rgba(0, 230, 255, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
color: var(--text);
}
.cookie-banner-head { margin-bottom: 12px; }
.cookie-eyebrow {
display: inline-block;
font-family: var(--mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-bright);
}
.cookie-title {
margin: 6px 0 0;
font-family: var(--display);
font-size: 18px; font-weight: 800;
letter-spacing: -0.01em;
color: var(--text);
}
.cookie-desc {
margin: 0 0 16px;
font-size: 13.5px; line-height: 1.55;
color: var(--text-2);
}
.cookie-desc strong { color: var(--text); }
.cookie-actions {
display: flex; flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.cookie-btn {
flex: 1 1 auto;
min-width: 120px;
padding: 12px 18px;
border-radius: 100px;
border: 1px solid transparent;
font-family: inherit;
font-size: 13px; font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
.cookie-btn:active { transform: translateY(1px); }
.cookie-btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-bright));
color: #001020;
box-shadow: 0 0 24px -6px rgba(0, 230, 255, 0.55);
}
.cookie-btn-primary:hover { filter: brightness(1.08); }
.cookie-btn-secondary {
background: rgba(0, 179, 255, 0.08);
border-color: rgba(0, 179, 255, 0.32);
color: var(--accent-bright);
}
.cookie-btn-secondary:hover {
background: rgba(0, 179, 255, 0.14);
border-color: var(--accent);
}
.cookie-btn-ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.12);
color: var(--text-2);
}
.cookie-btn-ghost:hover {
border-color: rgba(0, 179, 255, 0.3);
color: var(--accent-bright);
}
.cookie-foot {
margin: 0;
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.04em;
}
.cookie-foot a {
color: var(--accent-bright);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.cookie-foot a:hover { border-bottom-color: var(--accent-bright); }
@media (max-width: 560px) {
.cookie-actions { flex-direction: column; }
.cookie-btn { width: 100%; }
.cookie-banner-card { padding: 20px; }
}
/* ═══════════════════════════════════════════════════════════════
COOKIE SETTINGS MODAL
═══════════════════════════════════════════════════════════════ */
.cookie-modal {
position: fixed; inset: 0;
z-index: 10003;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal-backdrop {
position: absolute; inset: 0;
background: rgba(2, 6, 13, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: cookieFadeIn 0.25s ease-out both;
}
@keyframes cookieFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal-card {
position: relative;
width: 100%; max-width: 640px;
max-height: 88vh;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(13, 26, 38, 0.98), rgba(10, 18, 32, 1));
border: 1px solid rgba(0, 179, 255, 0.3);
border-radius: var(--r-lg);
box-shadow:
0 60px 120px -30px rgba(0, 0, 0, 0.85),
0 0 80px -10px rgba(0, 230, 255, 0.22);
animation: cookieScaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cookieScaleIn {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.cookie-modal-head {
position: relative;
padding: 24px 28px 16px;
border-bottom: 1px solid rgba(0, 179, 255, 0.12);
}
.cookie-modal-head h2 {
margin: 6px 0 0;
font-family: var(--display);
font-size: 22px; font-weight: 800;
color: var(--text);
}
.cookie-modal-close {
position: absolute; top: 16px; right: 16px;
width: 36px; height: 36px;
border: 1px solid rgba(0, 179, 255, 0.2);
border-radius: 50%;
background: transparent;
color: var(--text-2);
font-size: 22px; line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-modal-close:hover {
background: rgba(0, 179, 255, 0.08);
color: var(--accent-bright);
border-color: var(--accent);
}
.cookie-modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 28px 16px;
}
.cookie-modal-foot {
display: flex; flex-wrap: wrap;
gap: 8px;
padding: 16px 28px 24px;
border-top: 1px solid rgba(0, 179, 255, 0.12);
}
/* Single category */
.cookie-cat {
margin: 16px 0;
background: rgba(10, 18, 32, 0.6);
border: 1px solid rgba(0, 179, 255, 0.12);
border-radius: var(--r-md);
overflow: hidden;
}
.cookie-cat[open] {
border-color: rgba(0, 179, 255, 0.3);
}
.cookie-cat summary {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 16px 18px;
cursor: pointer;
list-style: none;
user-select: none;
}
.cookie-cat summary::-webkit-details-marker { display: none; }
.cookie-cat summary::before {
content: "+";
flex: 0 0 auto;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(0, 179, 255, 0.3);
border-radius: 50%;
font-family: var(--mono);
font-size: 14px; font-weight: 700;
color: var(--accent-bright);
transition: transform 0.2s, background 0.2s;
}
.cookie-cat[open] summary::before {
content: "−";
background: rgba(0, 179, 255, 0.12);
}
.cookie-cat-name {
flex: 1 1 auto;
font-family: var(--display);
font-weight: 700;
font-size: 15px;
color: var(--text);
}
.cookie-cat-toggle {
display: flex; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.06em;
}
.cookie-cat-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cookie-toggle-track {
position: relative;
display: inline-block;
width: 38px; height: 22px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 179, 255, 0.25);
border-radius: 22px;
transition: background 0.25s, border-color 0.25s;
cursor: pointer;
}
.cookie-toggle-track::after {
content: "";
position: absolute;
left: 2px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
background: var(--text-3);
border-radius: 50%;
transition: transform 0.25s, background 0.25s;
}
.cookie-cat-toggle input:checked + .cookie-toggle-track {
background: linear-gradient(135deg, var(--accent), var(--accent-bright));
border-color: var(--accent-bright);
}
.cookie-cat-toggle input:checked + .cookie-toggle-track::after {
transform: translate(16px, -50%);
background: #001020;
}
.cookie-cat-toggle input:disabled + .cookie-toggle-track {
opacity: 0.6;
cursor: not-allowed;
}
.cookie-cat-status { color: var(--text-3); }
.cookie-cat-toggle input:checked ~ .cookie-cat-status { color: var(--accent-bright); }
.cookie-cat-body {
padding: 0 18px 18px;
font-size: 13.5px;
color: var(--text-2);
line-height: 1.55;
}
.cookie-cat-body p { margin: 8px 0; }
.cookie-cat-body strong { color: var(--text); }
.cookie-cat-body code {
font-family: var(--mono);
font-size: 11.5px;
background: rgba(0, 179, 255, 0.08);
padding: 1px 6px;
border-radius: 4px;
color: var(--accent-bright);
}
.cookie-table {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
font-size: 12px;
}
.cookie-table th, .cookie-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid rgba(0, 179, 255, 0.1);
vertical-align: top;
}
.cookie-table th {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-bright);
}
.cookie-table td { color: var(--text-2); }
.cookie-note {
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
margin-top: 10px !important;
}
.cookie-note strong { color: var(--accent-bright); }
@media (max-width: 560px) {
.cookie-modal-body { padding: 8px 18px 12px; }
.cookie-modal-head { padding: 20px 18px 14px; }
.cookie-modal-foot { padding: 14px 18px 20px; flex-direction: column; }
.cookie-modal-foot .cookie-btn { width: 100%; }
.cookie-cat summary { padding: 14px; gap: 10px; }
}
/* Body lock when modal open */
html.cookie-modal-open,
html.cookie-modal-open body { overflow: hidden; }
/* Birthdate fieldset (3 selects: day / month / year) */
.birthdate-field {
border: none;
padding: 0;
margin-bottom: 18px;
}
.birthdate-field legend {
display: block;
margin-bottom: 8px;
padding: 0;
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent-bright);
}
.birthdate-row {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr;
gap: 8px;
}
.bd-cell select {
width: 100%;
padding: 16px 12px;
background: var(--bg-3);
border: 1.5px solid var(--border-soft);
border-radius: var(--r-md);
color: var(--text);
font-family: inherit;
font-size: 15px; font-weight: 500;
letter-spacing: -0.005em;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 32px;
}
.bd-cell select:focus {
outline: none;
border-color: var(--accent);
background-color: rgba(0, 179, 255, 0.04);
box-shadow:
0 0 0 4px rgba(0, 179, 255, 0.12),
0 0 24px -4px rgba(0, 230, 255, 0.4);
}
.bd-cell select:invalid,
.bd-cell select option[value=""] {
color: var(--text-4);
}
.bd-hint {
margin: 8px 2px 0;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--accent-bright);
min-height: 16px;
}
.bd-hint.bd-error { color: #FF5C8A; }
.bd-hint.bd-ok { color: #00CC55; }
/* 18+ notice — sigil-style warning panel */
.age-notice {
display: flex; align-items: flex-start; gap: 12px;
margin: 6px 0 22px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(255, 160, 0, 0.04));
border: 1px solid rgba(255, 200, 0, 0.22);
border-radius: var(--r-md);
color: var(--text-2);
font-size: 13px; line-height: 1.5;
}
.age-notice svg {
flex: 0 0 auto;
color: #FFC700;
margin-top: 2px;
filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.4));
}
.age-notice strong { color: #FFD700; font-weight: 700; }
.platform-row {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px;
border: none; padding: 0;
}
.plat { cursor: pointer; }
.plat input { position: absolute; opacity: 0; pointer-events: none; }
.plat-inner {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 14px 10px;
background: var(--bg-3);
border: 1.5px solid var(--border-soft);
border-radius: var(--r-md);
color: var(--text-2);
transition: all 0.25s var(--ease);
position: relative;
}
.plat-inner svg { color: var(--text-3); transition: color 0.25s, transform 0.3s var(--ease); }
.plat-inner strong { font-size: 13px; font-weight: 700; color: var(--text); }
.plat-inner small {
font-family: var(--mono);
font-size: 9.5px; font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-3); text-transform: uppercase;
}
.plat:hover .plat-inner { border-color: var(--border-2); }
.plat input:checked + .plat-inner {
border-color: var(--accent);
background: rgba(0, 179, 255, 0.06);
box-shadow: 0 0 0 2px rgba(0, 230, 255, 0.2);
}
.plat input:checked + .plat-inner svg { color: var(--accent-bright); transform: scale(1.1); }
.plat input:checked + .plat-inner::after {
content: "✓"; position: absolute; top: 6px; right: 8px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--accent); color: var(--text-inv);
font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
animation: checkPop 0.4s var(--ease-bounce);
}
@keyframes checkPop {
0% { transform: scale(0); }
60% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@media (max-width: 480px) { .platform-row { grid-template-columns: 1fr; } }
.consent {
display: flex; gap: 10px; align-items: flex-start;
margin: 22px 0;
font-size: 12.5px;
color: var(--text-2);
line-height: 1.5;
cursor: pointer;
}
.consent input {
flex-shrink: 0; margin-top: 2px;
width: 18px; height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
.honeypot {
position: absolute !important; left: -9999px;
opacity: 0; pointer-events: none;
}
.btn-submit {
width: 100%; justify-content: center;
padding: 16px 24px;
}
.btn-submit:disabled { opacity: 0.6; cursor: wait; }
.form-msg {
margin-top: 16px;
font-size: 13px;
min-height: 20px;
text-align: center;
padding: 0 10px;
}
.form-msg.success { color: var(--c-green); }
.form-msg.error { color: #FF6B7A; }
.form-trust {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: 22px;
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
font-weight: 600;
letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════════════════════════════
ROADMAP STORY
═══════════════════════════════════════════════════════════════ */
.roadmap-story {
max-width: 760px; margin: 0 auto;
display: flex; flex-direction: column; gap: 28px;
position: relative;
padding-left: 32px;
}
.roadmap-story::before {
content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--c-green), var(--accent), var(--accent-neon) 50%, var(--text-4));
}
.rs-intro {
position: relative;
font-family: var(--serif);
font-size: clamp(18px, 1.45vw, 22px);
line-height: 1.6;
color: var(--text);
}
.rs-intro::before {
content: ""; position: absolute; left: -32px; top: 18px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg-3);
border: 2px solid var(--text-4);
z-index: 1;
}
.rs-intro:nth-child(1)::before, .rs-intro:nth-child(2)::before {
border-color: var(--c-green);
background: var(--c-green);
box-shadow: 0 0 12px var(--c-green);
}
.rs-intro.rs-active::before {
border-color: var(--accent-neon);
background: var(--accent-neon);
box-shadow: 0 0 16px var(--accent-neon);
animation: pulse 1.6s ease-in-out infinite;
}
.rs-intro.rs-future {
color: var(--text-2);
opacity: 1;
}
.rs-when {
display: inline-block;
font-family: var(--display);
font-style: normal;
font-weight: 800;
font-size: 0.95em;
color: var(--accent-bright);
margin-right: 8px;
letter-spacing: -0.01em;
}
.rs-active .rs-when { color: var(--accent-neon); }
.rs-future .rs-when { color: var(--accent-bright); opacity: 0.85; }
.rs-intro strong {
font-family: var(--display);
font-style: normal;
font-weight: 700;
color: var(--text);
}
.rs-intro em.serif-em {
color: var(--accent-bright);
}
/* ═══════════════════════════════════════════════════════════════
FAQ
═══════════════════════════════════════════════════════════════ */
.faq {
max-width: 760px; margin: 0 auto;
display: flex; flex-direction: column;
gap: 6px;
counter-reset: faq;
}
.faq details {
background: var(--bg-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
counter-increment: faq;
transition: border-color 0.3s, background 0.3s;
}
.faq details:hover { border-color: var(--border-2); }
.faq details[open] {
border-color: var(--accent);
background: var(--bg-3);
}
.faq summary {
list-style: none;
cursor: pointer;
display: flex; align-items: center; gap: 16px;
padding: 18px 22px;
font-family: var(--display);
font-size: 16px; font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
transition: color 0.25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
content: "0" counter(faq);
font-family: var(--mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent-bright);
opacity: 0.6;
flex-shrink: 0;
min-width: 22px;
}
.faq details:hover summary::before,
.faq details[open] summary::before { opacity: 1; }
.faq summary > span:first-of-type { flex: 1; }
.faq-plus {
position: relative;
width: 16px; height: 16px;
flex-shrink: 0;
transition: transform 0.4s var(--ease);
}
.faq-plus::before, .faq-plus::after {
content: ""; position: absolute; left: 50%; top: 50%;
background: var(--accent-bright);
border-radius: 1px;
}
.faq-plus::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-plus::after { width: 1.5px; height: 11px; transform: translate(-50%, -50%); transition: transform 0.4s var(--ease); }
.faq details[open] .faq-plus { transform: rotate(180deg); }
.faq details[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details > div { padding: 0 22px 20px; padding-left: 60px; }
.faq details p {
font-size: 14px;
line-height: 1.65;
color: var(--text-2);
}
.faq code {
font-family: var(--mono);
font-size: 12px;
padding: 2px 6px;
background: var(--bg-4);
border: 1px solid var(--border-soft);
border-radius: 3px;
color: var(--accent-bright);
}
/* ═══════════════════════════════════════════════════════════════
OUTRO
═══════════════════════════════════════════════════════════════ */
.outro {
padding: clamp(80px, 10vw, 140px) var(--pad);
text-align: center;
position: relative;
background: linear-gradient(180deg, transparent, rgba(0, 179, 255, 0.04));
}
.outro-inner {
max-width: 600px; margin: 0 auto;
}
.outro-title {
font-family: var(--display);
font-size: clamp(36px, 5vw, 60px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 12px;
color: var(--text);
}
.outro-title em.serif-em {
color: var(--accent-bright);
font-size: 1.05em;
}
.outro-sub {
font-size: 15px;
color: var(--text-2);
margin-bottom: 28px;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
FOOTER — Editorial · 4 organisierte Spalten
═══════════════════════════════════════════════════════════════ */
.footer {
background: linear-gradient(180deg, transparent 0%, rgba(5, 8, 17, 0.6) 100%);
border-top: 1px solid var(--border-soft);
position: relative;
margin-top: 80px;
}
.footer::before {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 60%; max-width: 640px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(170,120,255,.35), transparent);
}
.footer-inner {
max-width: var(--container);
margin: 0 auto;
padding: 48px var(--pad) 28px;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 3fr;
gap: 56px;
align-items: start;
}
.footer-brand-block {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 320px;
}
.footer-brand {
display: inline-flex; align-items: center; gap: 10px;
color: var(--accent);
font-family: var(--display);
font-weight: 800;
letter-spacing: -0.015em;
text-decoration: none;
width: fit-content;
}
.footer-brand strong { color: var(--text); font-weight: 800; font-size: 17px; }
.footer-tagline {
font-family: var(--serif);
font-style: italic;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
.footer-tag-mini {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--text-3);
text-transform: uppercase;
padding: 6px 12px;
background: rgba(255,255,255,.03);
border: 1px solid var(--border-soft);
border-radius: 999px;
width: fit-content;
}
.fs-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green); box-shadow: 0 0 8px var(--c-green);
animation: pulse 1.6s ease-in-out infinite;
}
.footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 9px;
}
.footer-h {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-bright);
margin-bottom: 4px;
}
.footer-col a {
color: var(--text-2);
font-size: 13px;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: color .15s ease;
}
.footer-col a:hover { color: var(--text); }
.footer-usecases {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
padding: 14px 18px;
background: rgba(255,255,255,.025);
border: 1px solid var(--border-soft);
border-radius: 12px;
font-size: 12.5px;
}
.footer-uc-label {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
margin-right: 6px;
}
.footer-usecases a {
color: var(--text-2);
text-decoration: none;
font-weight: 500;
transition: color .15s;
}
.footer-usecases a:hover { color: var(--accent-bright); }
.footer-bottom {
max-width: var(--container);
margin: 0 auto;
padding: 18px var(--pad) 26px;
border-top: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.04em;
}
.footer-copy { color: var(--text-3); }
.footer-copy a {
color: var(--text-2);
text-decoration: none;
}
.footer-copy a:hover { color: var(--text); }
.footer-legal {
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-legal a {
color: var(--text-3);
text-decoration: none;
}
.footer-legal a:hover { color: var(--text-2); }
.footer-sep {
color: var(--text-3);
opacity: 0.45;
margin: 0 2px;
}
/* Tablet */
@media (max-width: 980px) {
.footer-top { grid-template-columns: 1fr; gap: 32px; }
.footer-brand-block { max-width: 100%; }
.footer-cols { gap: 24px; }
}
/* Mobile */
@media (max-width: 720px) {
.footer-inner { padding: 36px var(--pad) 22px; }
.footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.footer-usecases { font-size: 12px; gap: 8px; padding: 12px 14px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px var(--pad) 22px; }
}
@media (max-width: 420px) {
.footer-cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.footer-col a { font-size: 12.5px; }
.footer-tagline { font-size: 12.5px; }
.footer-legal { font-size: 10.5px; gap: 6px; }
}
@media (max-width: 540px) {
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
.footer-col-brand { grid-column: span 1; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════
STICKY CTA
═══════════════════════════════════════════════════════════════ */
.sticky-cta {
position: fixed; bottom: 24px; right: 24px;
z-index: 90;
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 22px;
background: var(--text);
color: var(--text-inv) !important;
font-family: var(--display);
font-size: 13px; font-weight: 800;
border-radius: 100px;
box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.sticky-cta.visible {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
.sticky-cta:hover { background: #fff; transform: translateY(-3px); }
@media (max-width: 480px) {
.sticky-cta { bottom: 16px; right: 16px; padding: 11px 18px; font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
/* ─── Reveal-up ──────────────────────────────────────────────── */
.reveal-up {
opacity: 0; transform: translateY(24px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-up.visible {
opacity: 1; transform: translateY(0);
}
.bento-cell.reveal-up:nth-child(2).visible { transition-delay: 0.08s; }
.bento-cell.reveal-up:nth-child(3).visible { transition-delay: 0.16s; }
.bento-cell.reveal-up:nth-child(4).visible { transition-delay: 0.24s; }
.bento-cell.reveal-up:nth-child(5).visible { transition-delay: 0.32s; }
.bento-cell.reveal-up:nth-child(6).visible { transition-delay: 0.4s; }
/* ─── Focus-Visible ──────────────────────────────────────────── */
*:focus { outline: none; }
*:focus-visible {
outline: 2.5px solid var(--accent-neon);
outline-offset: 3px;
border-radius: 2px;
}
/* ─── 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, .orbit-ring, .hp-dot, .voice-wave span,
.hero-grad, .hb-dot, .cd-sep, .scroll-hint, .marquee-track,
.pl-shield, .pl-core, .preloader-bar i, .sv-ring,
.ph-bubble.typing span { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
GLOBAL ROTATING SQUARES — atmospheric background across whole page
Fixed to viewport so they stay visible as you scroll
═══════════════════════════════════════════════════════════════ */
.global-squares {
position: fixed; inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
}
/* Faint global grid */
.gs-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0, 179, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 179, 255, 0.04) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
opacity: 0.35;
}
/* Soft glow at center */
.gs-glow {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: clamp(420px, 42vw, 720px);
height: clamp(420px, 42vw, 720px);
background: radial-gradient(circle, rgba(0, 179, 255, 0.12), rgba(0, 230, 255, 0.05) 35%, transparent 65%);
border-radius: 50%;
filter: blur(50px);
animation: orbitBreath 10s ease-in-out infinite;
}
/* Hexagons (legacy) — replaced by .mc magic circles. The old class
selectors are kept dormant so any historic snapshot/reference still
resolves, but no .gs-hex elements are emitted by the page anymore. */
.gs-hex { display: none !important; }
.gs-hex_LEGACY {
position: absolute;
--rot: 0deg;
--scale: 1;
transform:
translate(-50%, -50%)
translate(var(--px, 0px), var(--py, 0px))
rotate(calc(var(--start, 0deg) + var(--rot)))
scale(var(--scale));
pointer-events: none;
overflow: visible;
will-change: transform, opacity;
}
.gs-hex polygon {
fill: none;
stroke: currentColor;
stroke-width: var(--sw, 1.5);
stroke-linejoin: round;
/* Removed `vector-effect: non-scaling-stroke` — it forced the
browser to recompute the stroke geometry every animation frame.
At our stroke widths (1–2px) the visual difference is invisible. */
}
/* ──────────────────────────────────────────────────────────────
CONCENTRIC HEXAGON COMPOSITION
──────────────────────────────────────────────────────────────
Design principle:
• 9 concentric hexagons, all from the same center
• Sizes follow geometric progression (× 1.4)
• Start-rotations: 0°, 30°, 0°, 30°, … alternating
→ 60° hex-symmetry means 30° offset creates star-of-david
overlap pattern between adjacent layers
• Rotation directions alternate CW/CCW (yin-yang spin)
• Speed scales with size: inner fast, outer slow
────────────────────────────────────────────────────────────── */
/* Constant 320px diameter step → identical spacing, expanding past viewport */
.gs-1 {
--start: 0deg;
left: 50%; top: 50%;
width: 280px; height: 280px;
color: rgba(0, 230, 255, 0.55);
--sw: 2;
/* drop-shadow on a constantly-animating SVG is expensive but small —
280px hex, only one of nine hexagons, and only when hero is visible
(the .global-squares pause classes catch the rest). */
filter: drop-shadow(0 0 16px rgba(0, 230, 255, 0.35));
animation: gsBreath1 12s ease-in-out infinite, gsSpinCW 32s linear infinite;
}
.gs-2 {
--start: 30deg;
left: 50%; top: 50%;
width: 600px; height: 600px;
color: rgba(0, 217, 255, 0.38);
--sw: 1.75;
animation: gsBreath2 14s ease-in-out infinite, gsSpinCCW 46s linear infinite;
}
.gs-3 {
--start: 0deg;
left: 50%; top: 50%;
width: 920px; height: 920px;
color: rgba(0, 179, 255, 0.26);
--sw: 1.5;
animation: gsBreath3 16s ease-in-out infinite, gsSpinCW 64s linear infinite;
}
.gs-4 {
--start: 30deg;
left: 50%; top: 50%;
width: 1240px; height: 1240px;
color: rgba(0, 230, 255, 0.18);
--sw: 1.5;
animation: gsBreath4 18s ease-in-out infinite, gsSpinCCW 86s linear infinite;
}
.gs-5 {
--start: 0deg;
left: 50%; top: 50%;
width: 1560px; height: 1560px;
color: rgba(0, 179, 255, 0.13);
--sw: 1.25;
animation: gsBreath5 20s ease-in-out infinite, gsSpinCW 110s linear infinite;
}
.gs-6 {
--start: 30deg;
left: 50%; top: 50%;
width: 1880px; height: 1880px;
color: rgba(0, 230, 255, 0.09);
--sw: 1.25;
animation: gsBreath6 22s ease-in-out infinite, gsSpinCCW 138s linear infinite;
}
.gs-7 {
--start: 0deg;
left: 50%; top: 50%;
width: 2200px; height: 2200px;
color: rgba(0, 179, 255, 0.07);
--sw: 1;
animation: gsBreath7 24s ease-in-out infinite, gsSpinCW 168s linear infinite;
}
.gs-8 {
--start: 30deg;
left: 50%; top: 50%;
width: 2520px; height: 2520px;
color: rgba(0, 230, 255, 0.05);
--sw: 1;
animation: gsBreath8 26s ease-in-out infinite, gsSpinCCW 200s linear infinite;
}
.gs-9 {
--start: 0deg;
left: 50%; top: 50%;
width: 2840px; height: 2840px;
color: rgba(0, 179, 255, 0.035);
--sw: 1;
animation: gsBreath9 28s ease-in-out infinite, gsSpinCW 240s linear infinite;
}
@keyframes gsBreath10 {
0%, 100% { --scale: 1; --tx: 0px; --ty: 0px; opacity: 1; }
50% { --scale: 1.12; --tx: 6px; --ty: -4px; opacity: 0.55; }
}
@keyframes gsBreath11 {
0%, 100% { --scale: 1; --tx: 0px; --ty: 0px; opacity: 0.85; }
50% { --scale: 1.15; --tx: -4px; --ty: 6px; opacity: 0.4; }
}
@keyframes gsBreath12 {
0%, 100% { --scale: 1; --tx: 0px; --ty: 0px; opacity: 0.7; }
50% { --scale: 1.1; --tx: 5px; --ty: -5px; opacity: 0.3; }
}
/* Floating sparks — small dots orbiting at random radii/speeds */
.gs-spark {
position: absolute;
left: 50%; top: 50%;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent-neon);
box-shadow:
0 0 10px var(--accent-neon),
0 0 24px rgba(0, 230, 255, 0.4);
pointer-events: none;
--orbit-r: 280px;
--orbit-dur: 22s;
--orbit-start: 0deg;
/* Orbit via a wrapper: position at radius rotated around center */
transform-origin: 0 0;
animation: gsOrbit var(--orbit-dur) linear infinite;
animation-delay: var(--orbit-delay, 0s);
}
.gs-spark::before {
/* Trailing glow */
content: ""; position: absolute;
inset: -8px; border-radius: 50%;
background: radial-gradient(circle, rgba(0, 230, 255, 0.4), transparent 60%);
filter: blur(4px);
animation: gsSparkPulse 2s ease-in-out infinite;
}
.gs-spark-1 { --orbit-r: 220px; --orbit-dur: 18s; --orbit-start: 30deg; background: var(--accent-neon); }
.gs-spark-2 { --orbit-r: 380px; --orbit-dur: 26s; --orbit-start: 110deg; background: var(--c-magenta); box-shadow: 0 0 10px var(--c-magenta), 0 0 24px rgba(196, 79, 230, 0.4); }
.gs-spark-3 { --orbit-r: 540px; --orbit-dur: 34s; --orbit-start: 200deg; background: var(--c-gold); box-shadow: 0 0 10px var(--c-gold), 0 0 24px rgba(255, 215, 0, 0.4); }
.gs-spark-4 { --orbit-r: 680px; --orbit-dur: 42s; --orbit-start: 280deg; background: var(--accent-bright); }
.gs-spark-5 { --orbit-r: 820px; --orbit-dur: 50s; --orbit-start: 60deg; background: var(--c-rose); box-shadow: 0 0 10px var(--c-rose), 0 0 24px rgba(255, 92, 138, 0.4); }
@keyframes gsOrbit {
from { transform: rotate(var(--orbit-start)) translate(var(--orbit-r)) rotate(calc(-1 * var(--orbit-start))); }
to { transform: rotate(calc(var(--orbit-start) + 360deg)) translate(var(--orbit-r)) rotate(calc(-1 * (var(--orbit-start) + 360deg))); }
}
@keyframes gsSparkPulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.6); }
}
/* Hue-shift breathing — REMOVED from full container.
Applying `filter: hue-rotate()` to .global-squares forced the GPU to
re-composite all 9 hexagon SVG layers + center-glow on every frame,
causing severe scroll-jank. The subtle color drift wasn't worth the
cost. The center glow's natural pulse (orbitBreath) provides enough
movement on its own. */
/* Trim outer hexagons + sparks on smaller / mid-range viewports.
The outer hexes (gs-7+) are mostly off-screen anyway, but they
still consume animation frames. The sparks add multiple
composite layers each. */
@media (max-width: 1280px) {
.gs-spark-4, .gs-spark-5 { display: none; }
}
@media (max-width: 720px) {
.gs-spark, .gs-10, .gs-11, .gs-12 { display: none; }
}
/* The rotation animations only set --rot — all others (breath/scale) coexist */
@keyframes gsSpinCW { to { --rot: 360deg; } }
@keyframes gsSpinCCW { to { --rot: -360deg; } }
/* Pure radial breathing — same center, only scale + opacity.
Phase-staggered so the wave ripples outward symmetrically. */
@keyframes gsBreath1 { 0%,100% { --scale: 1; opacity: 1; } 50% { --scale: 1.06; opacity: 0.7; } }
@keyframes gsBreath2 { 0%,100% { --scale: 1; opacity: 0.95; } 50% { --scale: 1.05; opacity: 0.6; } }
@keyframes gsBreath3 { 0%,100% { --scale: 1; opacity: 0.92; } 50% { --scale: 1.045; opacity: 0.55; } }
@keyframes gsBreath4 { 0%,100% { --scale: 1; opacity: 0.9; } 50% { --scale: 1.04; opacity: 0.5; } }
@keyframes gsBreath5 { 0%,100% { --scale: 1; opacity: 0.88; } 50% { --scale: 1.035; opacity: 0.45; } }
@keyframes gsBreath6 { 0%,100% { --scale: 1; opacity: 0.86; } 50% { --scale: 1.03; opacity: 0.4; } }
@keyframes gsBreath7 { 0%,100% { --scale: 1; opacity: 0.83; } 50% { --scale: 1.025; opacity: 0.35; } }
@keyframes gsBreath8 { 0%,100% { --scale: 1; opacity: 0.8; } 50% { --scale: 1.02; opacity: 0.3; } }
@keyframes gsBreath9 { 0%,100% { --scale: 1; opacity: 0.78; } 50% { --scale: 1.018; opacity: 0.25; } }
/* @property declarations make custom-prop values animate smoothly */
@property --rot { syntax: ""; initial-value: 0deg; inherits: false; }
@property --start { syntax: ""; initial-value: 0deg; inherits: false; }
@property --scale { syntax: ""; initial-value: 1; inherits: false; }
@property --tx { syntax: ""; initial-value: 0px; inherits: false; }
@property --ty { syntax: ""; initial-value: 0px; inherits: false; }
@property --ox { syntax: ""; initial-value: 0px; inherits: false; }
@property --oy { syntax: ""; initial-value: 0px; inherits: false; }
@property --px { syntax: ""; initial-value: 0px; inherits: false; }
@property --py { syntax: ""; initial-value: 0px; inherits: false; }
@keyframes orbitBreath {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
/* Center glow follows mouse via parallax too */
.gs-glow { transform: translate(-50%, -50%) translate(var(--gx, 0px), var(--gy, 0px)); }
/* ═══════════════════════════════════════════════════════════════
MAGIC CIRCLES — concentric arcane sigils (replaces hexagons)
═══════════════════════════════════════════════════════════════
Each .mc is one full magic circle (procedurally drawn in JS).
Performance design:
• All animations rotate sub-groups via SVG transform —
compositor-only, never layout/paint.
• Pulse uses opacity + scale on the root SVG (cheap GPU ops).
• Stroke widths use vector-effect:none → no stroke recalc per frame.
• One drop-shadow on the innermost ring only — outer rings
get glow from a static radial-gradient pseudo-element. */
.mc {
position: absolute;
left: 50%; top: 50%;
width: var(--mc-size, 600px);
height: var(--mc-size, 600px);
/* Parallax: --px / --py set by JS (same channel as old hexagons) */
transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
opacity: var(--mc-intensity, 1);
pointer-events: none;
overflow: visible;
/* Each .mc gets a single compositor layer — sub-groups do NOT need
their own will-change. Promoting hundreds of inner elements
burnt GPU memory + slowed scroll painting on Mac. */
will-change: transform, opacity;
contain: layout style paint;
/* Prevent Chromium from auto-flattening the rotation transforms */
transform-style: flat;
}
/* Sub-group rotators: explicitly do NOT request a separate layer.
They live inside the .mc compositor layer and reuse its surface. */
.mc g {
will-change: auto;
}
/* Hue variants — three thematic palettes for variety */
.mc-hue-cyan { color: rgba(0, 230, 255, 1); }
.mc-hue-azure { color: rgba(0, 179, 255, 1); }
.mc-hue-violet { color: rgba(196, 79, 230, 1); }
/* ─── Geometry strokes (all stroked elements) ─── */
.mc circle.mc-ring,
.mc circle.mc-ring-thin,
.mc circle.mc-ring-dash,
.mc line.mc-tick,
.mc line.mc-tick-long,
.mc line.mc-spoke,
.mc polygon.mc-star,
.mc polygon.mc-star-soft,
.mc polygon.mc-inner-poly,
.mc path.mc-glyph,
.mc path.mc-petal,
.mc path.mc-eye-outline {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.mc circle.mc-ring { stroke-width: 1.4; opacity: 0.85; }
.mc circle.mc-ring-thin { stroke-width: 0.55; opacity: 0.5; }
.mc circle.mc-ring-dash { stroke-width: 0.9; opacity: 0.7; }
.mc line.mc-tick { stroke-width: 1.2; opacity: 0.7; }
.mc line.mc-tick-long { stroke-width: 1.8; opacity: 0.95; }
.mc line.mc-spoke { stroke-width: 0.9; opacity: 0.85; }
.mc polygon.mc-star { stroke-width: 1.1; opacity: 0.95; }
.mc polygon.mc-star-soft { stroke-width: 0.7; opacity: 0.45; }
.mc polygon.mc-inner-poly { stroke-width: 0.7; opacity: 0.6; }
/* Glyph (kanji-style stroke pattern).
No drop-shadow — glyphs sit on a rotating , so a per-glyph
filter would force the GPU to recompute the shadow each frame
for every glyph (8-24 per circle × 8 circles = 100+ shadows
redrawn 60 fps on Desktop). The currentColor stroke at 0.9
opacity reads as glow against the dark navy bg. */
.mc path.mc-glyph {
stroke-width: 1.0;
opacity: 0.9;
}
/* Petal arcs (Black Clover-style flower around center) */
.mc path.mc-petal {
stroke-width: 1.4;
opacity: 0.75;
}
/* Eye outline + irises (Re:Zero summoning eye) */
.mc path.mc-eye-outline {
stroke-width: 1.2;
opacity: 0.95;
}
/* Sun-rays radiating from the inner circle outward */
.mc line.mc-ray {
stroke: currentColor;
stroke-width: 0.6;
stroke-linecap: round;
opacity: 0.55;
}
/* Diamond ornaments at star vertices — also rotating, no shadow */
.mc polygon.mc-ornament {
fill: currentColor;
stroke: none;
opacity: 0.85;
}
/* Latin / arcane text arc along the rune ring.
Static stroke (no shadow) — text-rendering:optimizeSpeed skips
subpixel anti-aliasing recompute every rotation frame. */
.mc text.mc-arc-text {
fill: currentColor;
stroke: none;
font-weight: 700;
letter-spacing: 0.15em;
opacity: 0.65;
text-rendering: optimizeSpeed;
}
/* Filled / dotted elements */
.mc circle.mc-rune-dot,
.mc circle.mc-vertex-dot,
.mc circle.mc-connector-dot,
.mc circle.mc-jewel,
.mc circle.mc-jewel-core,
.mc circle.mc-eye-pupil,
.mc circle.mc-eye-iris,
.mc circle.mc-core,
.mc circle.mc-core-inner {
fill: currentColor;
stroke: none;
}
.mc circle.mc-rune-dot { opacity: 0.6; }
.mc circle.mc-vertex-dot { opacity: 0.95; }
.mc circle.mc-connector-dot { opacity: 0.6; }
/* Jewels rotate with the star — no per-jewel shadow.
Eye/core sit on the static "breathe-only" group (no rotation),
so a single drop-shadow there is cheap. */
.mc circle.mc-jewel { opacity: 0.6; }
.mc circle.mc-jewel-core { opacity: 1; }
.mc circle.mc-eye-pupil { opacity: 0.9; }
.mc circle.mc-eye-iris { opacity: 1; }
.mc circle.mc-core { opacity: 1; }
.mc circle.mc-core-inner { opacity: 1; }
/* One drop-shadow per circle, on the static center group only */
.mc .mc-breathe-only { filter: drop-shadow(0 0 4px currentColor); }
/* Center-only breathing scale (the eye / sigil "blinks" slightly) */
.mc .mc-breathe-only {
animation: mcCorePulse 4s ease-in-out infinite;
transform-origin: center;
}
@keyframes mcCorePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* ─── Spinning sub-groups ─── */
.mc .mc-spin-cw { animation: mcSpinCW 42s linear infinite; transform-origin: center; }
.mc .mc-spin-ccw { animation: mcSpinCCW 56s linear infinite; transform-origin: center; }
.mc .mc-spin-cw-fast { animation: mcSpinCW 18s linear infinite; transform-origin: center; }
.mc .mc-spin-cw-slow { animation: mcSpinCW 90s linear infinite; transform-origin: center; }
.mc .mc-spin-ccw-fast { animation: mcSpinCCW 24s linear infinite; transform-origin: center; }
@keyframes mcSpinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mcSpinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* Different per-circle rotation speeds for variety — outer circles
spin slower, inner circles spin faster (parallax rotation effect) */
.mc-1 .mc-spin-cw { animation-duration: 38s; }
.mc-1 .mc-spin-ccw { animation-duration: 52s; }
.mc-1 .mc-spin-cw-fast { animation-duration: 14s; }
.mc-1 .mc-spin-cw-slow { animation-duration: 76s; }
.mc-1 .mc-spin-ccw-fast { animation-duration: 18s; }
.mc-2 .mc-spin-cw { animation-duration: 56s; }
.mc-2 .mc-spin-ccw { animation-duration: 78s; }
.mc-2 .mc-spin-cw-fast { animation-duration: 22s; }
.mc-2 .mc-spin-cw-slow { animation-duration: 110s; }
.mc-2 .mc-spin-ccw-fast { animation-duration: 28s; }
.mc-3 .mc-spin-cw { animation-duration: 84s; }
.mc-3 .mc-spin-ccw { animation-duration: 110s; }
.mc-3 .mc-spin-cw-fast { animation-duration: 30s; }
.mc-3 .mc-spin-cw-slow { animation-duration: 160s; }
.mc-3 .mc-spin-ccw-fast { animation-duration: 38s; }
.mc-4 .mc-spin-cw { animation-duration: 120s; }
.mc-4 .mc-spin-ccw { animation-duration: 156s; }
.mc-4 .mc-spin-cw-fast { animation-duration: 44s; }
.mc-4 .mc-spin-cw-slow { animation-duration: 240s; }
.mc-4 .mc-spin-ccw-fast { animation-duration: 56s; }
.mc-5 .mc-spin-cw { animation-duration: 180s; }
.mc-5 .mc-spin-ccw { animation-duration: 220s; }
.mc-5 .mc-spin-cw-fast { animation-duration: 64s; }
.mc-5 .mc-spin-cw-slow { animation-duration: 320s; }
.mc-5 .mc-spin-ccw-fast { animation-duration: 80s; }
.mc-6 .mc-spin-cw { animation-duration: 240s; }
.mc-6 .mc-spin-ccw { animation-duration: 290s; }
.mc-6 .mc-spin-cw-fast { animation-duration: 86s; }
.mc-6 .mc-spin-cw-slow { animation-duration: 420s; }
.mc-6 .mc-spin-ccw-fast { animation-duration: 110s; }
.mc-7 .mc-spin-cw { animation-duration: 320s; }
.mc-7 .mc-spin-ccw { animation-duration: 380s; }
.mc-7 .mc-spin-cw-fast { animation-duration: 110s; }
.mc-7 .mc-spin-cw-slow { animation-duration: 540s; }
.mc-7 .mc-spin-ccw-fast { animation-duration: 140s; }
.mc-8 .mc-spin-cw { animation-duration: 420s; }
.mc-8 .mc-spin-ccw { animation-duration: 480s; }
.mc-8 .mc-spin-cw-fast { animation-duration: 140s; }
.mc-8 .mc-spin-cw-slow { animation-duration: 720s; }
.mc-8 .mc-spin-ccw-fast { animation-duration: 180s; }
/* ─── Breath pulse — opacity-only.
Earlier this also animated `scale(1.04)`, which forced the browser
to recompose the parallax-translate matrix every frame on a layer
that had `contain: paint`. Opacity is a pure compositor property
(no recompute), so the breath is now nearly free. */
.mc { animation: mcBreath var(--mc-breath, 18s) ease-in-out infinite; }
@keyframes mcBreath {
0%, 100% { opacity: var(--mc-intensity, 1); }
50% { opacity: calc(var(--mc-intensity, 1) * 0.55); }
}
/* ─── Pulse-ripple — sigil flare during ripple wave.
Reduced from "drop-shadow stack + brightness(1.5)" to a single
shadow + small brightness bump. Stacked drop-shadows on a 660-element
SVG were the single most expensive frame cost on Mac. */
.mc.gs-pulse {
filter: drop-shadow(0 0 10px currentColor) brightness(1.25);
transition: filter 0.4s ease;
}
/* ─── Viewport-aware trim — outer circles are huge AND mostly off-screen
even on a 1440p MacBook. Each visible circle = 70-95 animated SVG
elements + own compositor layer + drop-shadow filter chain.
We aggressively cull the outermost rings on anything below 4K. */
@media (max-width: 2400px) {
.mc-8 { display: none; }
}
@media (max-width: 1920px) {
.mc-7 { display: none; }
}
@media (max-width: 1440px) {
.mc-6 { display: none; }
}
@media (max-width: 1100px) {
.mc-5 { display: none; }
}
@media (max-width: 720px) {
.mc-4 { display: none; }
/* Small screens see only the inner three circles — keeps the
atmosphere without flooding the GPU on phones. */
}
/* Pause animations when scrolling / out-of-view / tab hidden.
`*` selector is intentional — we need to pause sub-group rotations,
not just the outer .mc breath. */
html.is-scrolling .mc,
html.hero-hidden .mc,
html.tab-hidden .mc,
html.is-scrolling .mc *,
html.hero-hidden .mc *,
html.tab-hidden .mc * {
animation-play-state: paused;
}
/* Stronger: outer atmospheric circles fade entirely while scrolling.
They're decorative-only and the user is moving past them — no one
notices a flash of opacity:0 during a 200-300ms scroll burst, but
the GPU saves the cost of compositing 8 large 2000+px layers. */
@media (prefers-reduced-motion: no-preference) {
html.is-scrolling .mc-5,
html.is-scrolling .mc-6,
html.is-scrolling .mc-7,
html.is-scrolling .mc-8 {
visibility: hidden;
}
}
/* When the hero is out-of-view we go further: hide ALL circles.
They sit fixed at the page-center and visually anchor to the hero;
once scrolled past, keeping them painted is wasted GPU work even
if their animations are paused. */
html.hero-hidden .mc {
visibility: hidden;
}
/* Pulse-Ripple — short glow burst when wave propagates outward */
.gs-hex {
transition: filter 0.5s ease, color 0.4s ease;
}
.gs-hex.gs-pulse {
filter: drop-shadow(0 0 22px var(--accent-neon)) brightness(1.6) !important;
color: var(--accent-neon) !important;
}
/* On smaller screens trim down for performance */
@media (max-width: 720px) {
.gs-7, .gs-8, .gs-9 { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
AURORA BACKGROUND
═══════════════════════════════════════════════════════════════ */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora-blob {
position: absolute; border-radius: 50%;
/* blur(100px) — was 140px. Visually near-identical, ~30% cheaper. */
filter: blur(100px); opacity: 0.45;
/* `mix-blend-mode: screen` removed.
Screen-blending forced the browser to re-composite the blob
against the page backing-store every frame the blob animated.
Pure additive radial-gradient on a dark navy background reads
visually identical without the blend pass. */
will-change: transform;
transform: translateZ(0);
contain: strict;
}
.aurora-1 {
width: 700px; height: 700px;
background: radial-gradient(circle, #00B3FF, transparent 60%);
top: -15%; left: -12%;
animation: aurora1 24s ease-in-out infinite;
}
.aurora-2 {
width: 600px; height: 600px;
background: radial-gradient(circle, #00E6FF, transparent 60%);
bottom: 5%; right: -10%;
animation: aurora2 30s ease-in-out infinite;
}
.aurora-3 {
width: 500px; height: 500px;
background: radial-gradient(circle, #9C6ECC, transparent 60%);
top: 35%; left: 35%;
animation: aurora3 34s ease-in-out infinite;
opacity: 0.3;
}
@keyframes aurora1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px, 60px) scale(1.1); } }
@keyframes aurora2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px, -40px) scale(1.05); } }
@keyframes aurora3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, -50px) scale(0.95); } }
.bg-noise {
position: fixed; inset: 0; z-index: -3; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55;
}
/* ═══════════════════════════════════════════════════════════════
PRE-LOADER
═══════════════════════════════════════════════════════════════ */
.preloader {
position: fixed; inset: 0; z-index: 10000;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.preloader-logo {
color: var(--accent);
animation: plPulse 1.6s ease-in-out infinite;
filter: drop-shadow(0 0 18px rgba(0, 230, 255, 0.5));
}
.pl-shield {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: plShield 1.6s ease-in-out infinite;
}
.pl-core {
transform-origin: center;
animation: plCore 1.6s ease-in-out infinite;
}
@keyframes plPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes plShield { 0% { stroke-dashoffset: 60; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes plCore { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } }
.preloader-name {
font-family: var(--display); font-size: 22px; font-weight: 800;
letter-spacing: -0.015em; color: var(--text);
}
.preloader-bar {
width: 200px; height: 2px;
background: rgba(0, 179, 255, 0.15);
border-radius: 100px;
overflow: hidden;
}
.preloader-bar i {
display: block; height: 100%; width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent-neon), var(--accent-bright));
background-size: 200% 100%;
animation: plBar 2s ease-in-out infinite, plShine 1.5s linear infinite;
}
@keyframes plBar { 0% { width: 0%; } 50% { width: 80%; } 100% { width: 100%; } }
@keyframes plShine { to { background-position: 200% 0; } }
.preloader-meta {
font-family: var(--mono); font-size: 10px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-3);
}
/* ═══════════════════════════════════════════════════════════════
CUSTOM CURSOR
═══════════════════════════════════════════════════════════════ */
.cursor-wrap {
position: fixed; inset: 0;
pointer-events: none; z-index: 9999;
/* Removed `mix-blend-mode: difference` — it forced the browser to
re-blend the entire viewport backing-store through the difference
filter on every cursor move. Our background is uniformly dark
navy, so a bright cyan cursor reads cleanly without blending. */
}
.cursor-dot, .cursor-ring, .cursor-trail {
position: absolute; left: 0; top: 0;
pointer-events: none;
border-radius: 50%;
will-change: transform;
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--accent-neon);
box-shadow: 0 0 12px var(--accent-neon);
transform: translate(var(--cx, 50vw), var(--cy, 50vh)) translate(-50%, -50%);
}
.cursor-ring {
width: 30px; height: 30px;
border: 1.5px solid var(--accent-neon);
transform: translate(var(--rx, 50vw), var(--ry, 50vh)) translate(-50%, -50%) scale(var(--cursor-scale, 1));
transition: width 0.2s, height 0.2s, border-color 0.2s, background 0.2s;
}
.cursor-ring.cursor-active {
width: 48px; height: 48px;
background: rgba(0, 230, 255, 0.15);
border-color: var(--accent-bright);
}
.cursor-trail-1 {
width: 14px; height: 14px;
background: rgba(0, 179, 255, 0.3);
filter: blur(4px);
transform: translate(var(--t1x, 50vw), var(--t1y, 50vh)) translate(-50%, -50%);
}
.cursor-trail-2 {
width: 24px; height: 24px;
background: rgba(0, 230, 255, 0.18);
filter: blur(8px);
transform: translate(var(--t2x, 50vw), var(--t2y, 50vh)) translate(-50%, -50%);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
.cursor-wrap { display: none; }
}
.cursor-active-page * { cursor: none !important; }
/* ═══════════════════════════════════════════════════════════════
SIDENAV (right edge)
═══════════════════════════════════════════════════════════════ */
.sidenav {
position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
z-index: 80;
display: flex; flex-direction: column; gap: 14px;
padding: 14px 6px;
}
.sidenav-dot {
position: relative;
width: 14px; height: 14px;
display: flex; align-items: center; justify-content: center;
}
.sidenav-dot span {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-3); opacity: 0.6;
transition: background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s, opacity 0.25s;
}
.sidenav-dot:hover span {
background: var(--accent);
transform: scale(1.4);
opacity: 1;
}
.sidenav-dot.is-active span {
background: var(--accent-neon);
transform: scale(1.5);
opacity: 1;
box-shadow:
0 0 12px var(--accent-neon),
0 0 24px var(--accent-neon),
0 0 0 4px rgba(0, 179, 255, 0.18);
animation: snavPulse 2.4s ease-in-out infinite;
}
@keyframes snavPulse {
0%, 100% { box-shadow: 0 0 10px var(--accent-neon), 0 0 20px var(--accent-neon), 0 0 0 3px rgba(0, 179, 255, 0.18); }
50% { box-shadow: 0 0 18px var(--accent-neon), 0 0 32px var(--accent-neon), 0 0 0 6px rgba(0, 179, 255, 0.08); }
}
.sidenav-dot::before {
content: attr(data-label);
position: absolute; right: calc(100% + 14px); top: 50%;
transform: translateY(-50%) translateX(8px);
padding: 5px 12px;
background: var(--glass);
backdrop-filter: blur(8px);
border: 1px solid var(--border-soft);
border-radius: 100px;
font-family: var(--mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em;
color: var(--accent-bright);
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 0.25s, transform 0.25s var(--ease);
}
.sidenav-dot:hover::before {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 1100px) { .sidenav { display: none; } }
/* ═══════════════════════════════════════════════════════════════
SECTION PROGRESS
═══════════════════════════════════════════════════════════════ */
.section-progress {
position: fixed; top: 0; left: 0; right: 0; height: 2px;
background: rgba(0, 179, 255, 0.04);
z-index: 90;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.section-progress.active { opacity: 1; }
.section-progress .sp-fill {
display: block; height: 100%; width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent-neon), var(--accent-bright));
background-size: 200% 100%;
box-shadow: 0 0 12px var(--accent-neon);
transition: width 0.18s linear;
animation: spShine 4s linear infinite;
}
@keyframes spShine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.section-progress .sp-label { display: none; }
/* ═══════════════════════════════════════════════════════════════
HERO VISUAL ATMOSPHERE — orbit rings, glow, particles
═══════════════════════════════════════════════════════════════ */
.hero-bg {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.orbit-glow {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: clamp(420px, 42vw, 720px);
height: clamp(420px, 42vw, 720px);
background: radial-gradient(circle, rgba(0, 179, 255, 0.18), rgba(0, 230, 255, 0.08) 35%, transparent 65%);
border-radius: 50%;
filter: blur(40px);
animation: orbitBreath 8s ease-in-out infinite;
}
@keyframes orbitBreath {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.orbit-ring {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 1.5px solid rgba(0, 179, 255, 0.18);
border-radius: 4px;
}
.orbit-ring-1 { width: clamp(220px, 18vw, 320px); height: clamp(220px, 18vw, 320px); animation: spinCW 18s linear infinite; border-color: rgba(0, 230, 255, 0.32); }
.orbit-ring-2 { width: clamp(340px, 28vw, 480px); height: clamp(340px, 28vw, 480px); animation: spinCCW 26s linear infinite; border-color: rgba(0, 179, 255, 0.24); }
.orbit-ring-3 { width: clamp(480px, 38vw, 640px); height: clamp(480px, 38vw, 640px); animation: spinCW 34s linear infinite; border-color: rgba(0, 230, 255, 0.18); }
.orbit-ring-4 { width: clamp(640px, 50vw, 880px); height: clamp(640px, 50vw, 880px); animation: spinCCW 44s linear infinite; border-color: rgba(0, 179, 255, 0.14); }
.orbit-ring-5 { width: clamp(820px, 64vw, 1120px); height: clamp(820px, 64vw, 1120px); animation: spinCW 56s linear infinite; border-color: rgba(0, 230, 255, 0.1); }
@keyframes spinCW { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spinCCW { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.hero-particles { position: absolute; inset: 0; }
.hp-dot {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--accent-neon);
box-shadow: 0 0 12px var(--accent-neon);
opacity: 0.6;
animation: hpDrift var(--hp-dur, 14s) ease-in-out infinite var(--hp-delay, 0s);
}
@keyframes hpDrift {
0%, 100% { transform: translate(0, 0); opacity: 0.4; }
50% { transform: translate(28px, -36px); opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════
HERO CYCLER PILL
═══════════════════════════════════════════════════════════════ */
.hero-cycler-wrap {
display: flex;
margin: 0 0 20px;
}
@media (max-width: 1080px) { .hero-cycler-wrap { justify-content: center; } }
.hero-cycler {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px 7px 12px;
background: var(--glass);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-soft);
border-radius: 100px;
font-family: var(--mono); font-size: 12px;
position: relative; overflow: hidden;
}
.hero-cycler::before {
content: ""; position: absolute; inset: -1px;
border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, rgba(0, 179, 255, 0.5), transparent 40%, rgba(0, 230, 255, 0.4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none; opacity: 0.7;
}
.hc-prefix {
text-transform: uppercase;
font-size: 10.5px; font-weight: 600;
color: var(--text-3);
letter-spacing: 0.08em;
}
.hc-word {
font-family: var(--display);
font-size: 14px; font-weight: 700;
color: var(--hc-color, var(--accent-bright));
text-shadow: 0 0 14px color-mix(in srgb, var(--hc-color, #00B3FF) 40%, transparent);
display: inline-block;
min-width: 110px;
text-align: left;
}
.hc-word.hc-in { animation: hcIn 0.6s var(--ease) both; }
@keyframes hcIn {
0% { opacity: 0; transform: translateY(8px); filter: blur(4px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* ═══════════════════════════════════════════════════════════════
BETA-SPOTS BAR (Hero)
═══════════════════════════════════════════════════════════════ */
.section-spots {
padding: 28px var(--pad);
display: flex; justify-content: center;
}
.beta-spots {
margin-top: 0;
padding: 16px 22px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
max-width: 540px;
position: relative; overflow: hidden;
box-shadow: 0 12px 28px -10px rgba(0, 179, 255, 0.18);
}
@media (max-width: 1080px) { .beta-spots { margin-left: auto; margin-right: auto; } }
.beta-spots::before {
content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1.5px;
background: linear-gradient(90deg, transparent, var(--accent-neon), transparent);
}
.bs-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 12px; flex-wrap: wrap; gap: 12px;
}
.bs-label {
font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent-bright);
}
.bs-stats {
font-family: var(--mono); font-size: 13px; font-weight: 600;
color: var(--text-2);
}
.bs-current {
font-size: 22px; font-weight: 800;
color: var(--accent-neon);
text-shadow: 0 0 14px rgba(0, 230, 255, 0.5);
font-variant-numeric: tabular-nums;
}
.bs-sep { color: var(--text-3); opacity: 0.5; margin: 0 4px; }
.bs-bar {
position: relative; height: 12px;
background:
repeating-linear-gradient(90deg,
rgba(0, 179, 255, 0.06) 0,
rgba(0, 179, 255, 0.06) 8px,
rgba(0, 179, 255, 0.02) 8px,
rgba(0, 179, 255, 0.02) 16px),
var(--surface);
border: 1px solid var(--border-soft);
border-radius: 100px; overflow: hidden;
margin-bottom: 12px;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
.bs-fill {
position: absolute; left: 0; top: 0; height: 100%;
width: var(--bs-w, 0%);
background: linear-gradient(90deg, var(--accent), var(--accent-neon) 60%, var(--accent-bright));
background-size: 200% 100%;
border-radius: 100px;
box-shadow: 0 0 18px rgba(0, 230, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: width 1.4s var(--ease);
animation: bsShine 5s linear infinite;
}
@keyframes bsShine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.bs-fill::after {
content: ""; position: absolute;
right: -2px; top: 50%;
transform: translate(50%, -50%);
width: 14px; height: 14px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, var(--accent-neon) 30%, transparent 70%);
filter: drop-shadow(0 0 8px var(--accent-neon));
animation: bsPulse 1.6s ease-in-out infinite;
}
@keyframes bsPulse {
0%, 100% { transform: translate(50%, -50%) scale(1); opacity: 1; }
50% { transform: translate(50%, -50%) scale(1.4); opacity: 0.7; }
}
.bs-meta {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
font-family: var(--mono); font-size: 10.5px;
color: var(--text-3); letter-spacing: 0.04em;
}
.bs-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-neon);
box-shadow: 0 0 8px var(--accent-neon);
margin-right: 6px;
animation: pulse 1.6s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════════════════
SCROLL HINT (Hero footer)
═══════════════════════════════════════════════════════════════ */
.scroll-hint {
position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
font-family: var(--mono);
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-3);
pointer-events: none;
animation: scrollHint 2s ease-in-out infinite;
}
.scroll-hint svg { color: var(--accent-bright); }
.scroll-dot { animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollHint {
0%, 100% { opacity: 0.6; transform: translateX(-50%) translateY(0); }
50% { opacity: 1; transform: translateX(-50%) translateY(4px); }
}
@keyframes scrollDot {
0% { transform: translateY(0); opacity: 1; }
80% { transform: translateY(8px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@media (max-width: 700px) { .scroll-hint { display: none; } }
/* ═══════════════════════════════════════════════════════════════
ACHIEVEMENT TOAST + KBD
═══════════════════════════════════════════════════════════════ */
.achievement-toast {
position: fixed; top: 96px; right: 24px; z-index: 9998;
display: flex; align-items: center; gap: 14px;
padding: 12px 18px 12px 14px;
background: var(--glass);
backdrop-filter: blur(14px);
border: 1.5px solid var(--accent);
border-radius: var(--r-md);
box-shadow:
0 16px 40px -8px rgba(0, 230, 255, 0.55),
0 0 0 1px rgba(0, 230, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
min-width: 240px; max-width: 320px;
transform: translateX(calc(100% + 40px));
transition: transform 0.55s var(--ease-bounce);
overflow: hidden;
}
.achievement-toast.active { transform: translateX(0); }
.at-icon {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-neon));
color: var(--text-inv);
font-size: 18px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 8px 18px -6px rgba(0, 230, 255, 0.55);
}
.at-body {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.at-title {
font-family: var(--display);
font-size: 13px; font-weight: 800;
letter-spacing: -0.01em;
color: var(--text);
}
.at-sub {
font-family: var(--mono);
font-size: 10.5px; font-weight: 500;
color: var(--text-3);
letter-spacing: 0.04em;
}
.at-shine {
position: absolute; top: 0; left: -50%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 230, 255, 0.4), transparent);
animation: atShine 2s ease-in-out;
}
@keyframes atShine { to { left: 150%; } }
@media (max-width: 480px) {
.achievement-toast { right: 12px; left: 12px; min-width: 0; max-width: none; top: 80px; }
}
.kbd-hint {
position: fixed; bottom: 18px; left: 18px; z-index: 60;
padding: 7px 12px;
background: var(--glass);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
backdrop-filter: blur(8px);
font-family: var(--mono);
font-size: 10.5px;
color: var(--text-3);
letter-spacing: 0.06em;
pointer-events: none;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.kbd-hint.visible { opacity: 0.9; transform: translateY(0); }
.kbd-hint kbd {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-bottom-width: 2px;
padding: 1px 6px;
border-radius: 3px;
color: var(--accent-bright);
font-weight: 700;
}
@media (max-width: 700px), (hover: none) { .kbd-hint { display: none; } }
.kbd-overlay {
position: fixed; inset: 0; z-index: 10002;
background: rgba(5, 13, 31, 0.82);
backdrop-filter: blur(12px);
display: none; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.25s ease;
padding: 24px;
}
.kbd-overlay.visible { display: flex; opacity: 1; }
.kbd-card {
position: relative;
max-width: 440px; width: 100%;
padding: 32px 36px;
background: var(--bg-3);
border: 1.5px solid var(--border-2);
border-radius: var(--r-lg);
box-shadow: 0 32px 80px -22px rgba(0, 0, 0, 0.7);
}
.kbd-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
background: linear-gradient(90deg, transparent, var(--accent-neon), transparent);
}
.kbd-card h3 {
font-family: var(--display);
font-size: 22px; font-weight: 800;
margin-bottom: 18px;
color: var(--text);
letter-spacing: -0.01em;
}
.kbd-card ul {
list-style: none;
display: grid; gap: 12px;
}
.kbd-card li {
display: flex; align-items: center; gap: 12px;
font-size: 13px;
color: var(--text-2);
}
.kbd-card li span { flex: 1; }
.kbd-card kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px;
padding: 4px 8px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-bottom-width: 2px;
border-radius: var(--r-sm);
font-family: var(--mono);
font-size: 11px; font-weight: 700;
color: var(--accent-bright);
}
.kbd-close {
position: absolute; top: 14px; right: 14px;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border-soft);
color: var(--text-2);
font-size: 18px;
display: flex; align-items: center; justify-content: center;
line-height: 1; cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.kbd-close:hover {
background: var(--accent);
color: var(--text-inv);
transform: scale(1.1) rotate(90deg);
}
/* ═══════════════════════════════════════════════════════════════
FOOTER VISUAL UPGRADE
═══════════════════════════════════════════════════════════════ */
.footer { padding-top: 0; }
.footer::after {
content: ""; position: absolute;
bottom: 0; left: 0; right: 0; height: 200px;
background: radial-gradient(ellipse at bottom, rgba(0, 179, 255, 0.06), transparent 70%);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
PROTOTYPE POLISH — Round 2
═══════════════════════════════════════════════════════════════ */
/* ─── Tab Bar with floating active indicator + chat badge ──── */
.proto-tabbar { position: relative; }
.proto-tab-indicator {
position: absolute;
bottom: 8px;
width: 22%; height: 3px;
background: linear-gradient(90deg, var(--accent-bright), var(--accent-neon));
border-radius: 100px;
box-shadow: 0 0 12px var(--accent-neon);
transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.ptab { position: relative; }
.ptab-badge {
position: absolute;
top: 4px; right: 18%;
min-width: 16px; height: 16px;
padding: 0 4px;
background: linear-gradient(135deg, var(--c-rose), var(--c-magenta));
color: #fff;
font-style: normal;
font-family: var(--display);
font-size: 9.5px; font-weight: 800;
letter-spacing: -0.01em;
border-radius: 100px;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--bg-3);
box-shadow: 0 0 8px rgba(255, 92, 138, 0.5);
animation: pulse 1.8s ease-in-out infinite;
}
/* Replace the old bottom-border active indicator */
.ptab.is-active { box-shadow: none; }
/* ─── Chat: Read receipts (✓✓ blue when read) ──────────────── */
.bubble-time { display: inline-flex; align-items: center; gap: 4px; }
.bubble-read {
font-style: normal;
color: var(--accent-neon);
font-weight: 700;
text-shadow: 0 0 6px rgba(0, 230, 255, 0.5);
}
/* ─── Chat: Reaction bubble (small floating heart) ──────────── */
.ph-bubble-react {
align-self: flex-start;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-top: -4px;
margin-left: 14px;
}
.bubble-react {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 50%;
font-size: 12px;
color: var(--c-rose);
filter: drop-shadow(0 4px 8px rgba(255, 92, 138, 0.3));
}
/* ─── Chat: Voice message bubble ───────────────────────────── */
.ph-bubble-voice {
align-self: flex-start;
display: inline-flex !important;
flex-direction: row !important;
align-items: center;
gap: 8px;
padding: 10px 14px !important;
background: var(--surface-2) !important;
border: 1px solid var(--border-soft);
border-top-left-radius: 4px;
}
.bubble-voice-icon {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-neon));
color: var(--text-inv);
display: inline-flex; align-items: center; justify-content: center;
font-size: 8px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 230, 255, 0.5);
}
.bubble-voice-wave {
display: inline-flex; align-items: center; gap: 2px;
height: 18px;
flex: 1;
}
.bubble-voice-wave i {
flex: 0 0 2px;
background: var(--accent-bright);
border-radius: 100px;
height: 6px;
}
.bubble-voice-wave i:nth-child(1) { height: 5px; }
.bubble-voice-wave i:nth-child(2) { height: 9px; }
.bubble-voice-wave i:nth-child(3) { height: 13px; }
.bubble-voice-wave i:nth-child(4) { height: 8px; }
.bubble-voice-wave i:nth-child(5) { height: 15px; }
.bubble-voice-wave i:nth-child(6) { height: 11px; }
.bubble-voice-wave i:nth-child(7) { height: 17px; opacity: 1; }
.bubble-voice-wave i:nth-child(n+8) { height: 7px; opacity: 0.4; background: var(--text-3); }
.bubble-voice-wave i:nth-child(9) { height: 5px; }
.bubble-voice-wave i:nth-child(10) { height: 9px; }
.bubble-voice-wave i:nth-child(11) { height: 4px; }
.bubble-voice-wave i:nth-child(12) { height: 7px; }
.bubble-voice-wave i:nth-child(13) { height: 5px; }
.bubble-voice-time {
font-family: var(--mono);
font-size: 9px; font-weight: 700;
color: var(--text-3);
letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════════════════════════════
PROTOTYPE POLISH — Round 3 (deeper, more realistic)
═══════════════════════════════════════════════════════════════ */
/* ─── Dynamic Island (iPhone 14+) ──────────────────────────── */
.phone-notch {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
width: 92px; height: 26px;
background: #000;
border-radius: 100px;
z-index: 5;
display: flex; align-items: center; justify-content: space-between;
padding: 0 6px;
}
.phone-notch::after { display: none; }
.dyn-isl-mic, .dyn-isl-cam {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #1a1f28;
}
.dyn-isl-cam {
width: 8px; height: 8px;
background: radial-gradient(circle, #2a3040 30%, #000 70%);
box-shadow: 0 0 0 1px rgba(0, 230, 255, 0.18);
}
.dyn-isl-mic {
background: #2a3040;
}
/* ─── Status Bar Icons ─────────────────────────────────────── */
.ps-time {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
margin-left: 6px;
}
.ps-icons {
align-items: center;
margin-right: 6px;
}
.ps-icon {
display: inline-block;
color: var(--text);
}
.ps-signal { width: 14px; height: 9px; }
.ps-wifi { width: 13px; height: 10px; }
.ps-bat-wrap {
display: inline-flex; align-items: center; gap: 4px;
}
.ps-bat-pct {
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 10px; font-weight: 600;
color: var(--text);
letter-spacing: -0.02em;
}
.ps-bat {
position: relative;
display: inline-block;
width: 22px; height: 11px;
border: 1.5px solid var(--text);
border-radius: 3px;
background: transparent;
padding: 1px;
}
.ps-bat::before, .ps-bat::after { display: none; }
.ps-bat::before {
content: ""; display: block !important;
position: absolute;
right: -3px; top: 3px; bottom: 3px;
width: 1.5px;
background: var(--text);
border-radius: 0 1px 1px 0;
}
.ps-bat-fill {
display: block;
width: 86%; height: 100%;
background: var(--text);
border-radius: 1px;
}
/* ─── Match Stack — second card peeks behind the first ─────── */
.match-stack {
position: relative;
}
.match-card-back {
position: absolute;
inset: 0;
transform: scale(0.94) translateY(8px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
border-radius: 14px;
overflow: hidden;
filter: blur(0.5px);
}
.match-card-back .mcb-cover { height: 100%; min-height: 200px; }
.match-card-back .mcb-cover-bg {
background:
radial-gradient(ellipse at top right, rgba(196, 79, 230, 0.4), transparent 60%),
linear-gradient(135deg, #1a0033 0%, #44007a 40%, var(--cv1, #FF334D) 80%, var(--cv2, #9C6ECC) 100%);
}
.match-card-front {
position: relative;
z-index: 1;
}
/* ─── Match Synopsis (Anime-card meta) ─────────────────────── */
.mcb-synopsis {
margin: 6px 0 0;
padding-top: 6px;
border-top: 1px dashed var(--border-soft);
font-family: var(--serif);
font-style: italic;
font-size: 11px;
line-height: 1.4;
color: var(--text-3);
}
/* ─── Chat Header — pulsing online + better action buttons ── */
.pch-avatar {
position: relative;
}
.pch-avatar-pulse {
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid var(--c-green);
animation: avatarPulse 2s ease-out infinite;
}
@keyframes avatarPulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
.pch-action {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border-soft);
color: var(--accent-bright);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.pch-action svg { display: block; }
.pch-more {
flex-direction: column;
gap: 2px;
}
.pch-more span {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--text-2);
display: block;
}
/* ─── Page Transitions: slide instead of fade ──────────────── */
.proto-page {
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
transform: translateX(40px);
}
.proto-page.is-active {
transform: translateX(0);
}
.proto-page.proto-page-leaving {
transform: translateX(-40px);
opacity: 0;
}
/* ─── Tab Bar — stronger active state ──────────────────────── */
.ptab.is-active svg {
filter: drop-shadow(0 0 8px var(--accent-neon));
transform: scale(1.08) translateY(-1px);
}
.ptab.is-active span {
font-weight: 800;
}
.ptab svg {
transition: transform 0.3s var(--ease), filter 0.3s ease;
}
/* ═══════════════════════════════════════════════════════════════
SWIPE CARD — adapted from real AnimeSwipeCard.kt
Cover-image + bottom-gradient + Airing/Score/Comment overlays
═══════════════════════════════════════════════════════════════ */
.swipe-stack {
position: relative;
margin-top: 4px;
}
.swipe-card {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--cover-grad);
box-shadow:
0 12px 32px -10px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(0, 230, 255, 0.15);
}
.swipe-card-back {
position: absolute; inset: 0;
transform: scale(0.94) translateY(10px);
opacity: 0.5;
filter: blur(0.8px);
z-index: 0;
}
.swipe-card-front { position: relative; z-index: 1; }
.swipe-cover {
position: relative;
width: 100%; height: 100%;
background: var(--cover-grad);
isolation: isolate;
}
.swipe-cover-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at top right, rgba(0, 230, 255, 0.45), transparent 55%),
radial-gradient(ellipse at bottom left, rgba(156, 110, 204, 0.3), transparent 60%);
mix-blend-mode: overlay;
}
.swipe-cover-grid {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at center, rgba(255, 255, 255, 0.18) 1px, transparent 1.4px);
background-size: 14px 14px;
mix-blend-mode: overlay;
opacity: 0.35;
}
.swipe-cover-glyph {
position: absolute; left: 50%; top: 38%;
transform: translate(-50%, -50%);
font-size: 110px;
color: rgba(255, 255, 255, 0.95);
font-weight: 800;
text-shadow:
0 0 36px rgba(0, 230, 255, 0.7),
0 12px 28px rgba(0, 0, 0, 0.55);
filter: drop-shadow(0 0 10px rgba(0, 230, 255, 0.4));
}
/* AIRING NOW — top banner across full width */
.swipe-airing {
position: absolute; top: 0; left: 0; right: 0;
padding: 5px 0;
display: flex; justify-content: center; align-items: center; gap: 8px;
font-family: var(--mono);
font-size: 9.5px; font-weight: 800;
letter-spacing: 0.18em;
color: var(--c-green);
background: linear-gradient(90deg, transparent, rgba(0, 204, 85, 0.55), transparent);
z-index: 3;
}
.swipe-airing-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 10px var(--c-green);
animation: pulse 1.6s ease-in-out infinite;
}
/* Score Pill — gold-glowing if high */
.swipe-score {
position: absolute; top: 36px; left: 12px;
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 215, 0, 0.65);
border-radius: 6px;
backdrop-filter: blur(4px);
z-index: 3;
box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
animation: scorePulse 2.2s ease-in-out infinite;
}
@keyframes scorePulse {
0%, 100% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.35); }
50% { box-shadow: 0 0 22px rgba(255, 215, 0, 0.6); }
}
.ss-star { color: var(--c-gold); font-size: 12px; }
.ss-num { color: var(--text); font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: -0.01em; }
/* Comment button — top-right */
.swipe-comment {
position: absolute; top: 36px; right: 12px;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(13, 26, 38, 0.85);
border: 1px solid rgba(0, 179, 255, 0.4);
color: var(--accent-bright);
display: flex; align-items: center; justify-content: center;
z-index: 3;
cursor: pointer;
backdrop-filter: blur(4px);
}
/* Match-% Pill — small floating right side */
.swipe-match-pct {
position: absolute; top: 80px; right: 12px;
padding: 4px 10px;
background: linear-gradient(135deg, var(--accent), var(--accent-neon));
color: var(--text-inv);
border-radius: 6px;
font-family: var(--display);
font-size: 10px; font-weight: 800;
letter-spacing: 0.04em;
box-shadow: 0 4px 12px -3px rgba(0, 230, 255, 0.6);
z-index: 3;
}
.swipe-match-pct small { font-size: 8px; opacity: 0.75; }
/* Bottom gradient with title, genres, friends-who-liked */
.swipe-bottom {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 60px 14px 12px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0.92) 100%);
z-index: 2;
}
.swipe-genres {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 8px;
}
.swipe-genres span {
padding: 2px 8px;
background: rgba(0, 179, 255, 0.18);
border: 1px solid rgba(0, 230, 255, 0.4);
border-radius: 100px;
font-family: var(--mono);
font-size: 9px; font-weight: 700;
color: var(--accent-bright);
letter-spacing: 0.06em;
backdrop-filter: blur(4px);
}
.swipe-title {
display: block;
font-family: var(--display);
font-size: 18px; font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
margin-bottom: 2px;
}
.swipe-meta {
display: flex; gap: 6px; align-items: center;
font-family: var(--mono);
font-size: 9.5px; font-weight: 600;
color: var(--text-2);
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.swipe-sep { opacity: 0.5; }
.swipe-rank {
color: var(--c-gold);
font-weight: 800;
letter-spacing: 0.12em;
}
.swipe-friends {
display: flex; align-items: center; gap: 8px;
padding-top: 8px;
border-top: 1px solid rgba(0, 230, 255, 0.18);
}
.sf-avatars {
display: inline-flex;
}
.sf-av {
display: inline-block;
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--bg-3);
margin-right: -6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.sf-text {
font-family: var(--mono);
font-size: 9.5px;
color: var(--text-3);
letter-spacing: 0.04em;
}
.sf-text b {
color: var(--accent-bright);
font-weight: 700;
letter-spacing: -0.005em;
}
/* Daily Challenge HUD — real component from MatchingScreen */
.daily-hud {
display: flex; align-items: center; gap: 10px;
margin-top: 10px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(255, 92, 71, 0.12), rgba(255, 215, 0, 0.06));
border: 1px solid rgba(255, 133, 80, 0.3);
border-radius: 12px;
position: relative; overflow: hidden;
}
.daily-hud::before {
content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
background: linear-gradient(90deg, transparent, #FF8550, transparent);
}
.dh-icon {
font-size: 20px;
filter: drop-shadow(0 0 10px rgba(255, 133, 80, 0.5));
}
.dh-info {
flex: 1; display: flex; flex-direction: column; gap: 1px;
}
.dh-info span {
font-family: var(--mono);
font-size: 8.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-3);
}
.dh-info strong {
font-family: var(--display);
font-size: 12px; font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
}
.dh-bar {
width: 50px; height: 4px;
background: rgba(255, 133, 80, 0.15);
border-radius: 100px;
overflow: hidden;
}
.dh-bar i {
display: block; height: 100%;
background: linear-gradient(90deg, #FF8550, #FFD700);
border-radius: 100px;
box-shadow: 0 0 6px rgba(255, 133, 80, 0.6);
}
/* Hide old match-card-big — replaced by swipe-card */
.match-card-big { display: none; }
/* ═══════════════════════════════════════════════════════════════
APP-AUTHENTIC PROTOTYPE — Round 4 (matches actual app screens)
Solo-Leveling-RPG aesthetic: brackets, mono-caps, cyan-glow
═══════════════════════════════════════════════════════════════ */
/* Page content scrolls behind floating tab-bar */
.proto-page {
padding: var(--ph-pad-sm) var(--ph-pad) calc(70px * var(--ph-scale)) !important;
gap: var(--ph-gap) !important;
overflow-y: auto;
scrollbar-width: none;
}
.proto-page::-webkit-scrollbar { display: none; }
.proto-page[data-page="chat"] {
padding: var(--ph-pad-sm) 0 calc(70px * var(--ph-scale)) !important;
}
/* ─── Page-Hero text needs a dark vignette behind title+sub ────── */
.page-hero-inner {
position: relative;
isolation: isolate;
}
.page-hero-inner::before {
content: "";
position: absolute;
inset: -40px -60px;
z-index: -1;
background: radial-gradient(ellipse at 35% 45%,
rgba(5, 13, 31, 0.58) 0%,
rgba(5, 13, 31, 0.38) 40%,
rgba(5, 13, 31, 0.12) 70%,
transparent 92%);
filter: blur(10px);
pointer-events: none;
}
/* ─── Founder body — glass card behind prose ──────────────────── */
.founder-v2-text {
position: relative;
isolation: isolate;
}
.founder-v2-text > .founder-v2-body {
position: relative;
padding: 18px 22px;
background: linear-gradient(180deg,
rgba(10, 20, 38, 0.62),
rgba(10, 20, 38, 0.42));
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.founder-v2-text > .founder-v2-body + .founder-v2-body { margin-top: 4px; }
.founder-v2-text > .founder-v2-h::after {
content: "";
position: absolute;
inset: -8px -16px;
z-index: -1;
background: radial-gradient(ellipse at center,
rgba(5, 13, 31, 0.5),
rgba(5, 13, 31, 0.2) 60%,
transparent 90%);
filter: blur(8px);
pointer-events: none;
}
.founder-v2-h { position: relative; isolation: isolate; }
/* ─── Roadmap rs-intro lines — soft glass-band ────────────────── */
.roadmap-story {
position: relative;
isolation: isolate;
}
.rs-intro {
padding: 14px 18px;
background: linear-gradient(180deg,
rgba(10, 20, 38, 0.58),
rgba(10, 20, 38, 0.36));
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.rs-intro.rs-active {
background: linear-gradient(180deg,
rgba(0, 179, 255, 0.10),
rgba(10, 20, 38, 0.42));
border-color: rgba(0, 230, 255, 0.18);
}
/* ─── Page-CTA-Strip text → small glass-band ──────────────────── */
.page-cta-strip .page-cta-inner {
position: relative;
isolation: isolate;
}
.page-cta-strip .page-cta-inner::before {
content: "";
position: absolute;
inset: -24px -40px;
z-index: -1;
background: radial-gradient(ellipse at center,
rgba(5, 13, 31, 0.5),
rgba(5, 13, 31, 0.22) 55%,
transparent 88%);
filter: blur(10px);
pointer-events: none;
}
/* ─── Section header (eyebrow + intro) ────────────────────────── */
.section-header {
position: relative;
isolation: isolate;
}
.section-header::before {
content: "";
position: absolute;
inset: -16px -24px;
z-index: -1;
background: radial-gradient(ellipse at 30% 50%,
rgba(5, 13, 31, 0.48),
rgba(5, 13, 31, 0.2) 55%,
transparent 88%);
filter: blur(8px);
pointer-events: none;
}
/* ─── Hero block (index.html) ─────────────────────────────────── */
.hero-content {
position: relative;
isolation: isolate;
}
.hero-content::before {
content: "";
position: absolute;
inset: -28px -36px;
z-index: -1;
background: radial-gradient(ellipse at 30% 50%,
rgba(5, 13, 31, 0.55),
rgba(5, 13, 31, 0.28) 50%,
transparent 85%);
filter: blur(10px);
pointer-events: none;
}
.hero-sub, .hero-meta-text {
position: relative;
}
/* ─── FAQ open-state body needs subtle backdrop too ───────────── */
.faq details[open] > div,
.faq details[open] > p {
position: relative;
}
/* ─── Founder fv-meta sticky card already has bg, but reinforce ── */
.founder-v2-meta {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* ─── Sticky-CTA needs solid backdrop too ─────────────────────── */
.sticky-cta {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ─── Reduced-motion: weaken backdrop intensity ───────────────── */
@media (prefers-reduced-motion: reduce) {
.page-hero-inner::before, .page-cta-inner::before,
.section-header::before, .hero-content::before {
background: rgba(5, 13, 31, 0.4);
filter: none;
}
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE OPTIMIZATION LAYER — Mac, iPad, iPhone
Canonical breakpoints:
≤479px iPhone-S (Portrait Phone)
480-767 iPhone-L (Landscape Phone / Phablet)
768-1023 iPad (Tablet Portrait)
1024-1279 iPad-Pro/Laptop (Tablet Landscape / Small Laptop)
1280-1679 Desktop (Standard Mac/Desktop)
≥1680 Mac-XL (Mac 27", iMac, MBP 16")
═══════════════════════════════════════════════════════════════ */
/* ─── Universal touch-target safety on coarse pointers ─────────── */
@media (hover: none) and (pointer: coarse) {
.nav-cta, .btn, .btn-primary, .qz-opt, .qz-share-btn, .qz-retry,
.ar-card, .ach-close, .footer-col a, .nav-links a,
.cookie-btn, button.kpi-card, .exit-btn-primary {
min-height: 44px; /* Apple HIG / Material accessibility minimum */
}
.qz-opt { padding: 16px 18px; }
/* Disable hover-only transforms on touch devices */
.ar-card:hover, .qz-opt:hover, .ach-item:hover,
.qz-share-btn:hover, .feature-card:hover { transform: none !important; }
}
/* ─── XL Mac displays (≥1680px): more breathing room ──────────── */
@media (min-width: 1680px) {
:root {
--container: 1480px;
--section-y: clamp(110px, 11vw, 180px);
}
.page-hero {
padding-top: clamp(170px, 22vh, 260px);
padding-bottom: clamp(64px, 9vh, 120px);
}
.archetype-grid { grid-template-columns: repeat(4, 1fr); max-width: 1320px; }
.archetype-quiz { max-width: 820px; padding: 40px; }
.founder-v2 { grid-template-columns: 320px 1fr; gap: 80px; }
.founder-v2-text { max-width: 760px; }
.roadmap-story { max-width: 880px; gap: 36px; }
.ph-title { letter-spacing: -0.04em; }
}
/* ─── Standard Desktop / MacBook (1280-1679px) ─────────────────── */
@media (min-width: 1280px) and (max-width: 1679px) {
.archetype-grid { grid-template-columns: repeat(4, 1fr); }
.founder-v2 { grid-template-columns: 300px 1fr; gap: 64px; }
.roadmap-story { max-width: 820px; }
}
/* ─── iPad-Pro / Laptop (1024-1279px) ──────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
:root { --container: 1080px; }
.archetype-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.founder-v2 { grid-template-columns: 260px 1fr; gap: 48px; }
.footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.nav-links { gap: 4px; }
.nav-links a { padding: 6px 10px; font-size: 13px; }
}
/* ─── iPad Portrait (768-1023px) ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
:root {
--container: 720px;
--pad: clamp(28px, 5vw, 48px);
--section-y: clamp(72px, 9vw, 110px);
}
.page-hero {
padding-top: clamp(140px, 18vh, 200px);
padding-bottom: clamp(56px, 7vh, 88px);
}
.ph-title { font-size: clamp(38px, 6.2vw, 56px); }
.ph-sub { font-size: clamp(16px, 2vw, 20px); max-width: 580px; }
/* Hide desktop main-nav, expose hamburger (existing logic via #nav-toggle) */
.nav-links { display: none; }
/* Founder: stack column-layout becomes single-col earlier */
.founder-v2 {
grid-template-columns: 1fr;
gap: 32px;
max-width: 640px;
margin: 0 auto;
}
.founder-v2-meta {
position: static;
flex-direction: row;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.fv-tags { padding-top: 0; border-top: 0; }
.founder-v2-text { max-width: 100%; }
.founder-v2-h { font-size: clamp(28px, 4.2vw, 38px); }
/* Roadmap */
.roadmap-story { max-width: 100%; gap: 26px; }
.rs-intro { font-size: clamp(17px, 2.2vw, 20px); }
/* Archetype */
.archetype-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.ar-card { padding: 18px 14px; }
/* Quiz */
.archetype-quiz { padding: 26px; max-width: 100%; }
.qz-question { font-size: 1.25em; }
.qz-result-emoji { font-size: 4em; }
.qz-result-name { font-size: 1.55em; }
/* Footer */
.footer-inner {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-col-brand { grid-column: 1 / -1; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* Cookie banner */
.cookie-banner-card { padding: 22px; }
.cookie-actions { flex-wrap: wrap; }
.cookie-btn { flex: 1 0 auto; min-width: 140px; }
/* Exit-intent */
.exit-card { width: min(420px, 90vw); padding: 28px 24px; }
/* Activity-toasts narrower */
.ach-toast { right: 14px; left: 14px; min-width: 0; }
.ach-panel-card { width: min(480px, 92vw); }
/* Tighten section gaps so iPad doesn't feel sparse */
.section { padding: var(--section-y) var(--pad); }
}
/* ─── iPhone Landscape / Large Phone (480-767px) ───────────────── */
@media (min-width: 480px) and (max-width: 767px) {
:root {
--container: 100%;
--pad: clamp(20px, 5vw, 32px);
--section-y: clamp(56px, 8vw, 88px);
}
.page-hero {
padding-top: clamp(120px, 16vh, 170px);
padding-bottom: clamp(40px, 6vh, 72px);
}
.ph-eyebrow { font-size: 10.5px; letter-spacing: 0.18em; margin-bottom: 14px; }
.ph-title { font-size: clamp(32px, 7.5vw, 44px); margin-bottom: 14px; }
.ph-sub { font-size: 15.5px; line-height: 1.55; }
.nav-links { display: none; }
/* Founder card stacks */
.founder-v2 { grid-template-columns: 1fr; gap: 28px; max-width: 100%; }
.founder-v2-meta {
position: static;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 20px;
}
.fv-avatar { width: 64px; height: 64px; flex-shrink: 0; }
.fv-name strong { font-size: 16px; }
.fv-name span { font-size: 10.5px; }
.fv-tags { padding-top: 0; border-top: 0; gap: 4px; }
.fv-tags span { padding: 3px 8px; font-size: 10px; }
.founder-v2-text { max-width: 100%; gap: 14px; }
.founder-v2-h { font-size: clamp(24px, 6vw, 32px); }
.founder-v2-body { font-size: 16px; line-height: 1.6; }
/* Roadmap */
.roadmap-story { padding-left: 26px; gap: 22px; }
.rs-intro { font-size: 17px; line-height: 1.55; }
.rs-intro::before { left: -26px; width: 14px; height: 14px; top: 8px; }
/* Archetype */
.archetype-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-card { padding: 16px 12px; gap: 6px; }
.ar-card strong { font-size: 13.5px; }
.ar-card span { font-size: 11.5px; }
.ar-emoji { font-size: 24px; }
/* Quiz */
.archetype-quiz { padding: 22px 18px; border-radius: 14px; }
.qz-question { font-size: 1.15em; margin-bottom: 18px; }
.qz-opt { padding: 13px 14px; font-size: 0.9em; gap: 12px; }
.qz-opt-marker { width: 26px; height: 26px; }
.qz-result-emoji { font-size: 3.6em; }
.qz-result-name { font-size: 1.4em; }
.qz-result-desc { font-size: 0.94em; }
.qz-share-btn { padding: 9px 14px; font-size: 0.84em; }
/* Achievement panel mobile */
.ach-panel-card { width: 100vw; max-height: 100vh; border-radius: 0; height: 100vh; }
.ach-toast { right: 10px; left: 10px; bottom: 78px; padding: 12px 14px; }
.ach-toast-title { font-size: 0.95em; }
.ach-toast-desc { font-size: 0.78em; }
/* Footer */
.footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
.footer-col-brand { grid-column: 1 / -1; }
.footer-stats { gap: 18px; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: 11px;
}
/* Sticky CTA mobile */
.sticky-cta {
bottom: 16px;
right: 16px;
padding: 12px 18px;
font-size: 13px;
}
/* Exit-overlay */
.exit-card { width: calc(100vw - 32px); padding: 24px 20px; }
/* Cookie banner */
.cookie-banner-card { padding: 20px 18px; border-radius: 14px; }
.cookie-banner-card .cookie-title { font-size: 17px; }
.cookie-actions { flex-direction: column; }
.cookie-btn { width: 100%; }
/* Social-Proof Pill */
.sp-pill { font-size: 11.5px; padding: 4px 10px; }
/* Particle-burst smaller */
.particle-burst i { width: 6px; height: 6px; }
.section { padding: var(--section-y) var(--pad); }
}
/* ─── iPhone Portrait (≤479px) ─────────────────────────────────── */
@media (max-width: 479px) {
:root {
--container: 100%;
--pad: 18px;
--section-y: clamp(48px, 11vw, 72px);
}
.page-hero {
padding-top: clamp(100px, 14vh, 140px);
padding-bottom: 40px;
}
.ph-eyebrow { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 12px; }
.ph-title {
font-size: clamp(28px, 8.5vw, 36px);
margin-bottom: 12px;
line-height: 1.12;
letter-spacing: -0.025em;
}
.ph-sub { font-size: 14.5px; line-height: 1.55; }
/* Nav: brand + cta only, links via hamburger */
.nav {
padding: 10px 16px;
}
.nav-links { display: none; }
.nav-brand span { font-size: 14px; }
.nav-cta {
padding: 8px 12px;
font-size: 12.5px;
}
.nav-cta svg { width: 12px; height: 12px; }
/* Founder full-width stack */
.founder-v2 { grid-template-columns: 1fr; gap: 24px; }
.founder-v2-meta {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 16px;
border-radius: 14px;
}
.fv-avatar { width: 56px; height: 56px; padding: 2px; }
.fv-avatar-inner { font-size: 18px; }
.fv-name strong { font-size: 15px; }
.fv-name span { font-size: 10px; }
.fv-tags { padding-top: 0; border-top: 0; gap: 4px; }
.fv-tags span { padding: 2px 8px; font-size: 9.5px; }
.founder-v2-h { font-size: clamp(22px, 7vw, 28px); }
.founder-v2-body { font-size: 15.5px; line-height: 1.6; }
/* Roadmap */
.roadmap-story { padding-left: 22px; gap: 20px; }
.rs-intro { font-size: 15.5px; line-height: 1.55; }
.rs-intro::before { left: -22px; width: 12px; height: 12px; top: 7px; }
.rs-when { font-size: 0.92em; }
/* Archetype */
.archetype-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ar-card { padding: 14px 10px; gap: 4px; }
.ar-card strong { font-size: 12.5px; }
.ar-card span { font-size: 11px; }
.ar-emoji { font-size: 22px; }
.ar-featured { grid-column: 1 / -1; }
/* Quiz */
.archetype-quiz {
padding: 18px 14px;
border-radius: 12px;
margin-bottom: 32px;
}
.qz-step-meta { font-size: 0.7em; }
.qz-question { font-size: 1.08em; margin-bottom: 16px; line-height: 1.3; }
.qz-opt {
padding: 12px;
font-size: 0.88em;
gap: 10px;
border-radius: 10px;
}
.qz-opt-marker { width: 24px; height: 24px; font-size: 0.78em; }
.qz-result-emoji { font-size: 3.2em; }
.qz-result-name { font-size: 1.28em; }
.qz-result-desc { font-size: 0.9em; line-height: 1.5; }
.qz-result-secondary { flex-direction: column; align-items: center; }
.qz-share { gap: 6px; }
.qz-share-btn { padding: 8px 12px; font-size: 0.8em; flex: 1; min-width: 0; }
.qz-share-label { font-size: 0.7em; }
.qz-actions { flex-direction: column; }
.qz-actions .qz-retry, .qz-actions .qz-cta { width: 100%; }
/* Achievement panel full-screen */
.ach-panel-card {
width: 100vw;
height: 100vh;
max-height: 100vh;
border-radius: 0;
border: 0;
}
.ach-panel-head { padding: 16px 18px 12px; }
.ach-panel-head h2 { font-size: 1.02em; }
.ach-item { padding: 8px 10px; gap: 10px; }
.ach-item .ach-emoji { font-size: 1.4em; width: 36px; }
.ach-item .ach-meta strong { font-size: 0.88em; }
.ach-item .ach-meta span { font-size: 0.74em; }
/* Achievement toasts */
.ach-toast {
right: 8px;
left: 8px;
bottom: 70px;
padding: 10px 12px;
min-width: 0;
border-radius: 12px;
}
.ach-toast-emoji { font-size: 1.7em; }
.ach-toast-title { font-size: 0.92em; }
.ach-toast-desc { font-size: 0.74em; }
.ach-toast-eyebrow { font-size: 0.58em; }
/* Footer */
.footer-inner { grid-template-columns: 1fr; gap: 22px; padding: 36px 18px 24px; }
.footer-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
text-align: center;
}
.footer-stats div { display: flex; flex-direction: column; align-items: center; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: 10.5px;
padding: 14px 18px;
}
.footer-col-brand .footer-tagline { font-size: 13px; }
/* Sticky-CTA stays compact and clear of bottom-nav-area */
.sticky-cta {
bottom: 14px;
right: 14px;
padding: 10px 16px;
font-size: 12.5px;
border-radius: 999px;
}
/* Exit-overlay */
.exit-overlay { padding: 16px; }
.exit-card {
width: calc(100vw - 28px);
padding: 22px 18px;
border-radius: 14px;
}
/* Cookie banner mobile */
.cookie-banner { padding: 12px; }
.cookie-banner-card { padding: 18px 16px; border-radius: 12px; }
.cookie-banner-card .cookie-title { font-size: 16px; }
.cookie-desc { font-size: 13px; line-height: 1.55; }
.cookie-actions { flex-direction: column; gap: 8px; }
.cookie-btn { width: 100%; padding: 11px; }
/* Social-Proof Pill */
.sp-pill {
font-size: 11px;
padding: 3px 9px;
}
/* Section padding tighter */
.section { padding: var(--section-y) var(--pad); }
/* Page-CTA strip stacks */
.page-cta-strip .page-cta-inner {
flex-direction: column;
gap: 14px;
text-align: center;
}
/* Disable F5 custom-cursors on mobile entirely (touch device) */
* { cursor: auto !important; }
}
/* ─── Landscape phone fix (short height + wide) ────────────────── */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
.page-hero { padding-top: 96px; padding-bottom: 32px; }
.preloader { display: none; } /* don't waste vertical space */
}
/* ─── iPhone Notch / Safe-area handling ────────────────────────── */
@supports (padding: max(0px)) {
.nav { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.footer-inner { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.sticky-cta {
right: max(16px, env(safe-area-inset-right));
bottom: max(14px, env(safe-area-inset-bottom));
}
.ach-toast {
right: max(8px, env(safe-area-inset-right));
bottom: max(70px, calc(70px + env(safe-area-inset-bottom)));
}
}
/* ─── Print: hide noise, preserve hierarchy ────────────────────── */
@media print {
.aurora, .global-squares, .bg-noise, .nav, .sticky-cta, .cookie-banner,
.footer, .preloader, .cursor-wrap, .ach-toast, .ach-panel, .exit-overlay {
display: none !important;
}
body { background: #fff; color: #000; }
.ph-title, .founder-v2-h, .rs-intro { color: #000; text-shadow: none; }
}
/* ─── Blog / Devlog ────────────────────────────────────────── */
.blog-rss-link {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 8px 14px;
margin-top: 18px;
background: rgba(255,140,40,.12);
border: 1px solid rgba(255,140,40,.35);
border-radius: 999px;
color: #ffb070;
font-weight: 600;
font-size: .85rem;
text-decoration: none;
transition: all .2s ease;
}
.blog-rss-link:hover { background: rgba(255,140,40,.2); border-color: rgba(255,140,40,.6); transform: translateY(-1px); }
.blog-list {
max-width: 820px;
margin: 0 auto;
display: grid;
gap: 32px;
}
.blog-post {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 32px;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.blog-post::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
background: radial-gradient(circle at 0% 0%, rgba(170,120,255,.05), transparent 60%);
pointer-events: none;
}
.bp-head {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 14px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .75rem;
color: rgba(255,255,255,.55);
text-transform: uppercase;
letter-spacing: .06em;
}
.bp-date { color: rgba(255,255,255,.7); }
.bp-cat {
padding: 3px 10px;
border-radius: 999px;
background: rgba(170,120,255,.15);
border: 1px solid rgba(170,120,255,.35);
color: #d4b8ff;
}
.bp-cat-architecture { background: rgba(74,158,255,.15); border-color: rgba(74,158,255,.35); color: #9cc5ff; }
.bp-cat-algorithm { background: rgba(255,140,40,.15); border-color: rgba(255,140,40,.35); color: #ffb070; }
.bp-cat-meta { background: rgba(82,184,136,.15); border-color: rgba(82,184,136,.35); color: #8fdaaf; }
.bp-read { margin-left: auto; }
.bp-title {
margin: 0 0 10px;
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.015em;
background: linear-gradient(180deg, #fff, rgba(255,255,255,.78));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bp-lead {
font-size: 1.05rem;
color: rgba(255,255,255,.85);
line-height: 1.55;
margin: 0 0 16px;
}
.blog-post p {
font-size: .98rem;
color: rgba(255,255,255,.78);
line-height: 1.6;
}
.blog-post code {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
padding: 1px 6px;
font-size: .85em;
color: #ffd9a0;
}
.bp-points {
margin: 10px 0 16px;
padding-left: 18px;
display: grid;
gap: 8px;
}
.bp-points li {
font-size: .96rem;
color: rgba(255,255,255,.78);
line-height: 1.55;
}
.bp-foot {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.08);
}
.bp-foot a {
color: #d4b8ff;
text-decoration: none;
font-weight: 600;
}
.bp-foot a:hover { color: #fff; text-decoration: underline; }
/* ─── Sticky Nav (after-scroll condensed) ─────────────────── */
.nav.is-sticky {
background: rgba(8,15,30,.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255,255,255,.06);
padding-top: 10px;
padding-bottom: 10px;
transition: padding .2s ease, background .25s ease;
}
.nav.is-sticky .nav-brand span { font-size: .95rem; }
/* ─── Privacy-Hub ─────────────────────────────────────────── */
.privacy-grid {
max-width: 880px;
margin: 0 auto;
display: grid;
gap: 18px;
}
.privacy-card {
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 24px;
backdrop-filter: blur(10px);
}
.privacy-card-head {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 8px;
}
.privacy-emoji { font-size: 1.6rem; }
.privacy-card h2 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
}
.privacy-card p {
font-size: .95rem;
color: rgba(255,255,255,.7);
line-height: 1.55;
margin: 0 0 14px;
}
.privacy-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.privacy-btn {
padding: 8px 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: .85rem;
font-weight: 600;
font-family: inherit;
transition: all .15s;
}
.privacy-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.privacy-btn.is-danger {
background: rgba(255,80,80,.1);
border-color: rgba(255,80,80,.3);
color: #ff9090;
}
.privacy-btn.is-danger:hover { background: rgba(255,80,80,.18); border-color: rgba(255,80,80,.5); }
.privacy-status {
display: inline-block;
padding: 2px 8px;
background: rgba(82,184,136,.18);
border: 1px solid rgba(82,184,136,.4);
border-radius: 6px;
color: #8fdaaf;
font-size: .75rem;
font-weight: 600;
margin-left: 8px;
}
.privacy-status.is-off { background: rgba(180,180,180,.15); border-color: rgba(180,180,180,.3); color: #bababa; }
/* ─── Trivia Category Filters ─────────────────────────────── */
.trivia-categories {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin: 24px 0;
}
.trivia-cat-btn {
padding: 8px 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
color: rgba(255,255,255,.7);
cursor: pointer;
font-size: .85rem;
font-weight: 600;
font-family: inherit;
transition: all .15s;
}
.trivia-cat-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.trivia-cat-btn.is-active {
background: rgba(170,120,255,.2);
border-color: rgba(170,120,255,.5);
color: #fff;
}
/* ─── Wallpaper PNG Export ────────────────────────────────── */
.wp-export-btn {
margin-top: 8px;
padding: 6px 12px;
background: rgba(170,120,255,.15);
border: 1px solid rgba(170,120,255,.4);
border-radius: 8px;
color: #d4b8ff;
cursor: pointer;
font-size: .8rem;
font-weight: 600;
font-family: inherit;
}
.wp-export-btn:hover { background: rgba(170,120,255,.25); }
.wp-format-toggle {
display: inline-flex;
gap: 4px;
padding: 2px;
background: rgba(255,255,255,.05);
border-radius: 8px;
margin-left: 8px;
}
.wp-format-toggle button {
padding: 4px 10px;
background: transparent;
border: none;
color: rgba(255,255,255,.6);
cursor: pointer;
font-size: .75rem;
font-weight: 600;
border-radius: 6px;
font-family: inherit;
}
.wp-format-toggle button.is-active {
background: rgba(255,255,255,.12);
color: #fff;
}
/* ─── Section shared typography ──────────────────────────── */
.section-title {
font-family: var(--display);
font-size: var(--fs-h2);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text);
text-align: center;
margin: 0;
max-width: 720px;
}
/* ─── How it works — 4-Step Section ─────────────────────── */
.section-how {
padding: 80px var(--pad) 40px;
}
.how-wrap {
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
.how-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
}
.how-card {
position: relative;
background: linear-gradient(135deg, var(--surface-2), rgba(5, 13, 31, 0.3));
border: 1px solid var(--border-soft);
border-radius: 18px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.how-card:hover {
transform: translateY(-3px);
border-color: var(--border-2);
}
.hc-num {
position: absolute;
top: 14px;
right: 18px;
font-family: var(--display);
font-size: 38px;
font-weight: 900;
letter-spacing: -0.04em;
color: var(--accent-bright);
opacity: 0.08;
line-height: 1;
pointer-events: none;
}
.hc-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(0, 179, 255, 0.15), rgba(0, 230, 255, 0.05));
border: 1px solid rgba(0, 179, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-bright);
flex-shrink: 0;
}
.hc-title {
font-family: var(--display);
font-size: 18px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
margin: 0;
}
.hc-desc {
font-size: var(--fs-small);
color: var(--text-3);
line-height: 1.6;
margin: 0;
}
@media (max-width: 700px) {
.how-grid { grid-template-columns: 1fr; }
.how-card { padding: 24px 20px; }
.section-how { padding: 48px var(--pad) 24px; }
.hc-num { font-size: 32px; }
}
/* ─── Anime of the Day ──────────────────────────────────── */
.section-aod {
padding: 40px var(--pad);
max-width: 1200px;
margin: 0 auto;
}
.aod-wrap { width: 100%; }
.aod-card {
position: relative;
background: linear-gradient(135deg, rgba(170,120,255,.08), rgba(74,158,255,.06));
border: 1px solid rgba(170,120,255,.25);
border-radius: 22px;
padding: 28px;
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
overflow: hidden;
}
.aod-card::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 60%;
height: 200%;
background: radial-gradient(circle, rgba(255,200,140,.15), transparent 65%);
pointer-events: none;
}
.aod-head {
display: flex;
gap: 18px;
align-items: flex-start;
margin-bottom: 14px;
position: relative;
}
.aod-emoji {
font-size: 2.6rem;
line-height: 1;
filter: drop-shadow(0 4px 12px rgba(170,120,255,.4));
}
.aod-meta { flex: 1; min-width: 0; }
.aod-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.55);
margin-bottom: 4px;
}
.aod-title {
margin: 2px 0 2px;
font-size: clamp(1.3rem, 2.6vw, 1.85rem);
font-weight: 800;
line-height: 1.15;
background: linear-gradient(180deg, #fff, rgba(255,255,255,.78));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.aod-sub {
font-size: .85rem;
color: rgba(255,255,255,.6);
font-weight: 500;
}
.aod-why {
font-size: 1rem;
line-height: 1.55;
color: rgba(255,255,255,.82);
margin: 8px 0 16px;
position: relative;
}
.aod-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
position: relative;
}
.aod-tag {
padding: 4px 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
color: rgba(255,255,255,.85);
}
.aod-foot {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-between;
align-items: center;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.08);
position: relative;
}
.aod-foot-hint {
font-size: .85rem;
color: rgba(255,255,255,.6);
}
.aod-foot-link {
font-size: .9rem;
font-weight: 700;
color: #d4b8ff;
text-decoration: none;
}
.aod-foot-link:hover { color: #fff; }
/* ─── Beta-Spots Live Delta-Badge ─────────────────────────── */
.bs-delta {
display: inline-block;
font-size: .7rem;
padding: 2px 8px;
border-radius: 999px;
background: rgba(82,184,136,.18);
border: 1px solid rgba(82,184,136,.4);
color: #8fdaaf;
font-weight: 700;
margin-left: 8px;
animation: bs-pop .35s ease-out;
}
@keyframes bs-pop {
0% { transform: scale(0.7); opacity: 0; }
60% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* ─── Storage-Quota visual ──────────────────────────────── */
.sq-list {
list-style: none;
padding: 0;
margin: 8px 0 12px;
display: grid;
gap: 6px;
}
.sq-list li {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .85rem;
padding: 6px 10px;
background: rgba(255,255,255,.03);
border-radius: 8px;
}
.sq-list code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .78rem;
color: rgba(255,255,255,.85);
}
.sq-list span {
color: rgba(255,255,255,.55);
font-weight: 600;
}
.sq-bar {
height: 8px;
background: rgba(255,255,255,.06);
border-radius: 999px;
overflow: hidden;
}
.sq-bar i {
display: block;
height: 100%;
background: linear-gradient(90deg, #aa78ff, #ff8c28);
border-radius: 999px;
transition: width .4s ease;
}
/* ─── Profile Showcase ──────────────────────────────────── */
.profile-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 24px 0;
}
.profile-card {
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 18px;
position: relative;
overflow: hidden;
}
.profile-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, var(--pc-c1, #aa78ff), var(--pc-c2, #ff8c28));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .35;
pointer-events: none;
}
.profile-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pc-c1, #aa78ff), var(--pc-c2, #ff8c28));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
margin-bottom: 12px;
}
.profile-name {
font-size: 1.05rem;
font-weight: 800;
margin: 0 0 2px;
}
.profile-archetype {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(255,255,255,.6);
margin-bottom: 10px;
}
.profile-stats {
display: flex;
gap: 14px;
margin-bottom: 10px;
}
.profile-stat { font-size: .78rem; color: rgba(255,255,255,.7); }
.profile-stat b { display: block; font-size: 1.1rem; color: #fff; font-weight: 800; }
.profile-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.profile-tag {
padding: 2px 8px;
background: rgba(170,120,255,.15);
border: 1px solid rgba(170,120,255,.3);
border-radius: 999px;
font-size: .7rem;
font-weight: 600;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.bs-delta { animation: none; }
}
@media (max-width: 700px) {
.section-aod { padding: 24px var(--pad); }
.aod-card { padding: 22px; }
.aod-head { gap: 12px; }
.aod-emoji { font-size: 2.1rem; }
}
/* ─── PERFORMANCE: Mobile aurora-off + low-power-mode ──────── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
/* Auf Mobile: nur 1 aurora-blob aktiv, andere display:none */
.aurora-blob:nth-child(n+2) { display: none; }
.aurora-blob { filter: blur(60px) !important; }
/* Global-Squares grid weniger detailliert */
.gs-grid { opacity: 0.3 !important; }
}
@media (max-width: 480px) {
/* iPhone: aurora komplett aus → erspart 3 dauerhafte composite-layers */
.aurora, .global-squares { display: none !important; }
.bg-noise { opacity: 0.04 !important; }
}
@media (prefers-reduced-motion: reduce) {
.aurora, .global-squares, .hero-particles, .hero-datastream { display: none !important; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* GPU-Optimization: alle backdrop-filters durch will-change scope-en */
.aurora-blob, .nav.is-sticky, .aod-card, .privacy-card, .blog-post {
will-change: opacity;
transform: translateZ(0);
}
/* Content-visibility: dramatically reduces rendering work for off-screen content */
.section, .blog-post, .privacy-card, .tech-card, .profile-card {
content-visibility: auto;
contain-intrinsic-size: 0 400px;
}
/* ─── PERFORMANCE: low-power-mode (set by JS on slow devices) ─── */
.low-power-mode .global-squares,
.low-power-mode .bg-noise,
.low-power-mode .hero-particles,
.low-power-mode .hero-datastream,
.low-power-mode .hero-mesh,
.low-power-mode .cursor-wrap,
.low-power-mode .cursor-trail-1,
.low-power-mode .cursor-trail-2 {
display: none !important;
}
.low-power-mode .aurora-blob { filter: blur(60px) !important; opacity: 0.3 !important; }
.low-power-mode * { transition-duration: 0.1s !important; }
/* ═══════════════════════════════════════════════════════════════
THIN-PAGES UNIFIED LAYOUT (mood, glossar, tracker, status, newsletter)
Shared design tokens — clean cards, consistent spacing
═══════════════════════════════════════════════════════════════ */
/* ─── Generic Cards (used across all thin-pages) ─── */
.section { max-width: var(--container, 1200px); margin: 0 auto; padding: 40px var(--pad); }
/* ─── Mood-Search ─── */
.mood-wrap {
max-width: 880px;
margin: 0 auto;
}
.mood-pick {
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 32px;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.mood-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 24px;
}
.mood-chip {
padding: 9px 16px;
background: rgba(255,255,255,.04);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 999px;
color: rgba(255,255,255,.78);
cursor: pointer;
font-size: .92rem;
font-weight: 600;
font-family: inherit;
transition: all .15s ease;
user-select: none;
}
.mood-chip:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.mood-chip.is-selected {
background: linear-gradient(135deg, rgba(170,120,255,.25), rgba(255,140,40,.18));
border-color: rgba(170,120,255,.5);
color: #fff;
box-shadow: 0 0 0 1px rgba(170,120,255,.3), 0 4px 14px rgba(170,120,255,.15);
}
.mood-actions { display: flex; justify-content: center; }
.mood-results {
margin-top: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 24px;
}
.mood-results-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.mood-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.mood-item {
padding: 14px 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
transition: background .15s, border-color .15s;
}
.mood-item:hover { background: rgba(255,255,255,.06); border-color: rgba(170,120,255,.3); }
.mood-item-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.mood-item-meta { font-size: .78rem; color: rgba(255,255,255,.55); font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); }
.mood-item-score {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
font-size: .75rem;
font-weight: 700;
border-radius: 6px;
background: rgba(82,184,136,.18);
border: 1px solid rgba(82,184,136,.35);
color: #8fdaaf;
}
/* ─── Glossar ─── */
.glossar-search-wrap {
max-width: 720px;
margin: 0 auto 32px;
}
.glossar-search {
width: 100%;
padding: 14px 18px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
color: #fff;
font-size: 1rem;
font-family: inherit;
transition: border-color .15s;
}
.glossar-search:focus { outline: none; border-color: rgba(170,120,255,.5); background: rgba(255,255,255,.06); }
.glossar-search::placeholder { color: rgba(255,255,255,.4); }
.glossar-az-nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
margin-top: 14px;
}
.glossar-az-btn {
padding: 5px 9px;
background: transparent;
border: 1px solid rgba(255,255,255,.08);
border-radius: 6px;
color: rgba(255,255,255,.55);
font-size: .78rem;
font-weight: 700;
font-family: var(--mono, monospace);
cursor: pointer;
transition: all .12s;
}
.glossar-az-btn:hover { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.2); }
.glossar-az-btn.is-active { background: rgba(170,120,255,.18); border-color: rgba(170,120,255,.4); color: #d4b8ff; }
.glossar-list {
max-width: 880px;
margin: 0 auto;
display: grid;
gap: 14px;
}
.glossar-item {
padding: 18px 22px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-left: 3px solid rgba(170,120,255,.4);
border-radius: 12px;
transition: background .15s, border-color .15s;
}
.glossar-item:hover { background: rgba(255,255,255,.05); border-left-color: rgba(170,120,255,.7); }
.glossar-term {
font-size: 1.1rem;
font-weight: 800;
color: #fff;
margin: 0 0 4px;
}
.glossar-term-jp {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: rgba(170,120,255,.12);
border-radius: 6px;
color: #d4b8ff;
font-size: .8rem;
font-weight: 600;
font-family: var(--mono, monospace);
}
.glossar-def {
font-size: .95rem;
line-height: 1.55;
color: rgba(255,255,255,.78);
margin: 0;
}
/* ─── Tracker ─── */
.tracker-wrap { max-width: 1100px; margin: 0 auto; }
.tracker-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 18px;
padding: 18px 22px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
margin-bottom: 22px;
}
.tracker-stats {
display: flex;
gap: 24px;
}
.trk-stat { display: flex; flex-direction: column; gap: 2px; }
.trk-stat b {
font-size: 1.5rem;
font-weight: 800;
font-family: var(--display, "Inter Tight");
color: #fff;
line-height: 1;
}
.trk-stat span {
font-size: .7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
font-family: var(--mono, monospace);
}
.tracker-filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.trk-filter {
padding: 7px 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
color: rgba(255,255,255,.65);
font-size: .82rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .12s;
}
.trk-filter:hover { background: rgba(255,255,255,.08); color: #fff; }
.trk-filter.is-active { background: rgba(170,120,255,.2); border-color: rgba(170,120,255,.45); color: #fff; }
.tracker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-bottom: 32px;
}
.trk-item {
padding: 16px 18px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.trk-item-h {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.trk-item-title {
font-weight: 700;
font-size: .98rem;
line-height: 1.25;
margin: 0;
}
.trk-item-status {
flex-shrink: 0;
padding: 2px 8px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 6px;
font-family: var(--mono, monospace);
}
.trk-status-watching { background: rgba(74,158,255,.18); color: #9cc5ff; border: 1px solid rgba(74,158,255,.35); }
.trk-status-completed { background: rgba(82,184,136,.18); color: #8fdaaf; border: 1px solid rgba(82,184,136,.35); }
.trk-status-planned { background: rgba(255,200,80,.15); color: #ffd082; border: 1px solid rgba(255,200,80,.3); }
.trk-item-progress {
display: flex;
align-items: center;
gap: 10px;
}
.trk-ep-count {
font-family: var(--mono, monospace);
font-size: .82rem;
color: rgba(255,255,255,.7);
font-weight: 600;
min-width: 60px;
}
.trk-ep-bar {
flex: 1;
height: 6px;
background: rgba(255,255,255,.06);
border-radius: 3px;
overflow: hidden;
}
.trk-ep-fill {
height: 100%;
background: linear-gradient(90deg, rgba(170,120,255,.7), rgba(255,140,40,.7));
border-radius: 3px;
transition: width .3s ease;
}
.trk-item-controls {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.trk-ctrl {
padding: 5px 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 8px;
color: rgba(255,255,255,.7);
font-size: .8rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .12s;
}
.trk-ctrl:hover { background: rgba(255,255,255,.08); color: #fff; }
.tracker-add { margin-bottom: 32px; }
.trk-add-h {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 14px;
color: rgba(255,255,255,.8);
}
.trk-add-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.trk-add-card {
padding: 12px 14px;
background: rgba(255,255,255,.025);
border: 1px dashed rgba(255,255,255,.12);
border-radius: 10px;
cursor: pointer;
transition: all .15s;
font-size: .88rem;
color: rgba(255,255,255,.75);
font-weight: 600;
}
.trk-add-card:hover { background: rgba(170,120,255,.1); border-color: rgba(170,120,255,.35); color: #fff; }
.tracker-io {
padding: 22px 24px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
}
.trk-io-h {
font-size: 1rem;
font-weight: 700;
margin: 0 0 14px;
color: rgba(255,255,255,.8);
}
.trk-io-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* ─── Empty State (used by mood, glossar, tracker, community) ─── */
.cl-empty {
text-align: center;
padding: 32px;
color: rgba(255,255,255,.5);
font-style: italic;
}
/* ─── Status Page polish ─── */
.status-grid {
max-width: 880px;
margin: 0 auto;
display: grid;
gap: 14px;
}
.status-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
}
.status-name { font-weight: 600; color: rgba(255,255,255,.85); }
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
background: rgba(82,184,136,.15);
border: 1px solid rgba(82,184,136,.35);
border-radius: 999px;
color: #8fdaaf;
font-size: .85rem;
font-weight: 700;
font-family: var(--mono, monospace);
}
.status-badge::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: #52b888;
box-shadow: 0 0 8px rgba(82,184,136,.6);
}
/* ─── Newsletter polish ─── */
.newsletter-card {
max-width: 580px;
margin: 0 auto;
padding: 36px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
text-align: center;
}
/* ─── Mobile ─── */
@media (max-width: 720px) {
.mood-pick { padding: 22px; }
.mood-chip { font-size: .85rem; padding: 7px 13px; }
.tracker-head { flex-direction: column; align-items: flex-start; padding: 16px; }
.tracker-stats { gap: 16px; }
.trk-stat b { font-size: 1.25rem; }
.glossar-search { padding: 12px 14px; }
.glossar-item { padding: 14px 16px; }
}
/* ═══════════════════════════════════════════════════════════════
COMPARE PAGE — vs MAL / AniList / Crunchyroll
═══════════════════════════════════════════════════════════════ */
.compare-intro {
max-width: 760px;
margin: 0 auto var(--section-y);
padding: 0 var(--pad);
text-align: center;
}
.compare-intro p { font-size: var(--fs-lead); }
.compare-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 calc(-1 * var(--pad));
padding: 0 var(--pad);
}
.compare-table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
font-size: 14px;
border-radius: var(--r-lg);
overflow: hidden;
}
.compare-table thead th {
padding: 16px 18px;
font-family: var(--display);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(0, 179, 255, 0.06);
border-bottom: 1px solid var(--border);
color: var(--text-3);
text-align: left;
white-space: nowrap;
}
.compare-table thead th.highlight-col {
background: rgba(0, 230, 255, 0.08);
color: var(--accent-bright);
}
.compare-table td {
padding: 13px 18px;
border-bottom: 1px solid var(--border-soft);
color: var(--text-2);
vertical-align: middle;
}
.compare-table .ct-feature {
font-weight: 600;
color: var(--text);
white-space: nowrap;
width: 170px;
}
.compare-table .ct-cat {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--text-4);
background: rgba(255,255,255,0.02);
padding: 10px 18px;
text-transform: uppercase;
}
.compare-table .highlight-col {
background: rgba(0, 230, 255, 0.03);
color: var(--text);
}
.compare-table tbody tr:hover td {
background: rgba(255,255,255,0.02);
}
.compare-table tbody tr:hover .highlight-col {
background: rgba(0, 230, 255, 0.05);
}
.ct-check {
color: var(--c-green);
font-weight: 600;
}
.ct-warn {
color: var(--text-4);
}
.ct-half {
color: var(--c-orange);
font-weight: 500;
}
.compare-footnote {
max-width: 760px;
margin: 24px auto 0;
text-align: center;
color: var(--text-4);
font-size: var(--fs-small);
}
/* Fazit */
.section-compare-fazit {
padding: var(--section-y) var(--pad);
}
.compare-fazit {
max-width: var(--container);
margin: 0 auto;
}
.fazit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 36px;
}
.fazit-card {
padding: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.fazit-card h3 {
font-family: var(--display);
font-size: var(--fs-h4);
font-weight: 800;
margin-bottom: 16px;
color: var(--text);
}
.fazit-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.fazit-card ul li {
padding-left: 20px;
position: relative;
font-size: 14px;
color: var(--text-2);
line-height: var(--lh-snug);
}
.fazit-card ul li::before {
content: "→";
position: absolute;
left: 0;
color: var(--accent-bright);
font-weight: 700;
}
@media (max-width: 720px) {
.compare-table { font-size: 13px; }
.compare-table td { padding: 10px 12px; }
.fazit-grid { grid-template-columns: 1fr; }
}