/* ============================================================ FloofenKompfen — styles Themeable via [data-theme] on ; tokens below. ============================================================ */ /* ---------- Themes ---------- */ :root, :root[data-theme="boardroom"] { --bg: #111017; --bg-elev: #1b1a23; --surface: #211f2b; --text: #f3efe6; --text-muted: #9a94a6; --accent: #f5b14c; --accent-strong: #e8912b; --accent-contrast: #1a1206; --line: rgba(245, 177, 76, 0.16); --glow: rgba(245, 177, 76, 0.14); --nav-glass: rgba(20, 19, 27, 0.72); --shadow: 0 24px 60px rgba(0, 0, 0, 0.45); --tint-a: #26212e; --tint-b: #2b2130; --tint-c: #1f2430; --tint-d: #2e2620; --tint-e: #202b28; --tint-f: #2b2026; --tint-g: #232030; --logo-chip-bg: #17151e; color-scheme: dark; } :root[data-theme="daylight"] { --bg: #faf5ea; --bg-elev: #ffffff; --surface: #fdfaf3; --text: #2b2418; --text-muted: #7d735f; --accent: #d98a1f; --accent-strong: #b56d0a; --accent-contrast: #fff8ec; --line: rgba(181, 109, 10, 0.22); --glow: rgba(217, 138, 31, 0.16); --nav-glass: rgba(255, 252, 244, 0.78); --shadow: 0 24px 50px rgba(120, 90, 30, 0.16); --tint-a: #f6ead2; --tint-b: #f0e3e0; --tint-c: #e2ecdf; --tint-d: #f4e5c8; --tint-e: #e0ebe8; --tint-f: #f0e0d2; --tint-g: #e8e4f0; --logo-chip-bg: #221c12; color-scheme: light; } :root[data-theme="synthwave"] { --bg: #16102b; --bg-elev: #201640; --surface: #261a4a; --text: #f4ecff; --text-muted: #a292c8; --accent: #ff5fa2; --accent-strong: #ff2e88; --accent-contrast: #2b0618; --line: rgba(255, 95, 162, 0.22); --glow: rgba(122, 92, 255, 0.22); --nav-glass: rgba(24, 16, 48, 0.72); --shadow: 0 24px 60px rgba(10, 4, 30, 0.6); --tint-a: #2c1a52; --tint-b: #38175a; --tint-c: #1c2260; --tint-d: #401a4e; --tint-e: #1c2a58; --tint-f: #34164a; --tint-g: #252060; --logo-chip-bg: #120b24; color-scheme: dark; } :root[data-theme="terminal"] { --bg: #060b06; --bg-elev: #0b130b; --surface: #0e180e; --text: #c8f7c0; --text-muted: #6da366; --accent: #4af626; --accent-strong: #2fd90b; --accent-contrast: #04170a; --line: rgba(74, 246, 38, 0.2); --glow: rgba(74, 246, 38, 0.1); --nav-glass: rgba(6, 14, 6, 0.8); --shadow: 0 24px 60px rgba(0, 0, 0, 0.6); --tint-a: #0d1a0d; --tint-b: #101f0d; --tint-c: #0a1c12; --tint-d: #12200a; --tint-e: #0a1e18; --tint-f: #101c08; --tint-g: #0c1c10; --logo-chip-bg: #030903; color-scheme: dark; } :root[data-theme="bubblegum"] { --bg: #fff0f6; --bg-elev: #ffffff; --surface: #fff7fb; --text: #43203a; --text-muted: #a06e92; --accent: #e5399b; --accent-strong: #c9137d; --accent-contrast: #fff2f9; --line: rgba(201, 19, 125, 0.2); --glow: rgba(229, 57, 155, 0.14); --nav-glass: rgba(255, 246, 251, 0.8); --shadow: 0 24px 50px rgba(180, 60, 130, 0.18); --tint-a: #ffe0ef; --tint-b: #ffe6da; --tint-c: #e4e9ff; --tint-d: #ffdce6; --tint-e: #dff2ec; --tint-f: #f3e2ff; --tint-g: #ffeeda; --logo-chip-bg: #3a1230; color-scheme: light; } :root[data-theme="abyss"] { --bg: #0b1622; --bg-elev: #101f30; --surface: #142639; --text: #e4f0f6; --text-muted: #8aa3b5; --accent: #3fd3c4; --accent-strong: #17b3a3; --accent-contrast: #04211d; --line: rgba(63, 211, 196, 0.2); --glow: rgba(63, 211, 196, 0.12); --nav-glass: rgba(10, 22, 34, 0.76); --shadow: 0 24px 60px rgba(2, 8, 14, 0.6); --tint-a: #12283c; --tint-b: #0f2e3c; --tint-c: #16233f; --tint-d: #103430; --tint-e: #1a2a44; --tint-f: #0f3038; --tint-g: #182640; --logo-chip-bg: #071018; color-scheme: dark; } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { font-family: "Unbounded", "Archivo", sans-serif; line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; } h2 { font-size: clamp(1.6rem, 4.2vw, 2.8rem); font-weight: 800; } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .bg-glow { position: fixed; inset: -20% -10% auto; height: 70vh; background: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 65%); pointer-events: none; z-index: 0; } /* scroll-driven flowing background: painted above the body ground, below all normal-flow content (footer, cards, million band) */ .bg-flow { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; } main { position: relative; z-index: 1; } section { padding: clamp(4rem, 9vw, 7.5rem) clamp(1.1rem, 5vw, 4rem); } .eyebrow { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--accent); margin-bottom: 1rem; } .section-head { max-width: 60rem; margin: 0 auto 3rem; text-align: center; } .section-sub { color: var(--text-muted); max-width: 42rem; margin: 0 auto; } .subtle { color: var(--text-muted); font-weight: 400; font-size: 0.7em; } .fineprint, .stats-fineprint, .cta-fineprint, .footer-fineprint { font-family: "Space Mono", monospace; font-size: 0.72rem; color: var(--text-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: "Unbounded", sans-serif; font-size: 0.82rem; font-weight: 600; padding: 0.72em 1.5em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-lg { font-size: 0.92rem; padding: 0.9em 1.8em; } .btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 24px var(--glow); } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { border-color: var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-invert { background: var(--accent-contrast); color: var(--accent); } .btn-outline-invert { border-color: var(--accent-contrast); color: var(--accent-contrast); } /* ---------- Nav ---------- */ .nav-shell { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 0.9rem 1rem; z-index: 100; transition: transform 0.35s ease; } .nav-shell.nav-hidden { transform: translateY(-120%); } .nav-pill { display: flex; align-items: center; gap: 1.2rem; width: min(100%, 68rem); padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-radius: 999px; background: var(--nav-glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); transition: background 0.3s ease; } .nav-brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .nav-logo-chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--logo-chip-bg); overflow: hidden; border: 1px solid var(--line); } .nav-logo-chip img { width: 30px; height: 30px; object-fit: contain; } .nav-brand-name { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.02em; } .nav-brand-name em { font-style: normal; color: var(--accent); } .nav-links { display: flex; gap: 0.2rem; list-style: none; margin: 0 auto; padding: 0; } .nav-links a { display: block; padding: 0.45em 0.85em; border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--text-muted); transition: color 0.15s ease, background 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--line); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .btn-nav { font-size: 0.74rem; padding: 0.65em 1.2em; } /* theme picker */ .theme-picker { position: relative; } .theme-btn { display: flex; align-items: center; gap: 0.45rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.5em 0.95em; color: var(--text); font-family: "Archivo", sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease; } .theme-btn:hover { border-color: var(--accent); } .theme-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--line); } .theme-menu { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 11rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 10; } .theme-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .theme-menu li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5em 0.75em; border-radius: 10px; font-size: 0.85rem; font-weight: 500; cursor: pointer; } .theme-menu li:hover { background: var(--line); } .theme-menu li[aria-selected="true"] { color: var(--accent); font-weight: 700; } .swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(128,128,128,0.4); flex-shrink: 0; } .sw-boardroom { background: linear-gradient(135deg, #111017 50%, #f5b14c 50%); } .sw-daylight { background: linear-gradient(135deg, #faf5ea 50%, #d98a1f 50%); } .sw-synthwave { background: linear-gradient(135deg, #16102b 50%, #ff5fa2 50%); } .sw-terminal { background: linear-gradient(135deg, #060b06 50%, #4af626 50%); } .sw-bubblegum { background: linear-gradient(135deg, #fff0f6 50%, #e5399b 50%); } .sw-abyss { background: linear-gradient(135deg, #0b1622 50%, #3fd3c4 50%); } /* burger + mobile menu */ .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.6rem; } .nav-burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; background: var(--bg); z-index: 90; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .mobile-menu.open { opacity: 1; visibility: visible; } .mobile-menu nav { display: flex; flex-direction: column; gap: 1.4rem; text-align: center; } .mobile-menu a { font-family: "Unbounded", sans-serif; font-size: 1.4rem; font-weight: 600; } .mobile-menu a:not(.btn):hover { color: var(--accent); } /* ---------- Hero ---------- */ .hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 7rem; position: relative; } .hero-inner { max-width: 62rem; } .hero-title { font-size: clamp(2.2rem, 8vw, 5.2rem); font-weight: 800; margin: 0 0 1.2rem; } .hero-line { display: block; overflow: hidden; } .hero-line > span { display: block; transform: translateY(110%); animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .hero-line:nth-child(2) > span { animation-delay: 0.12s; } .hero-line:nth-child(3) > span { animation-delay: 0.24s; } .hero-line-accent > span { color: var(--accent); } @keyframes hero-rise { to { transform: translateY(0); } } .hero-sub { max-width: 40rem; margin: 0 auto 2rem; color: var(--text-muted); font-size: clamp(0.95rem, 2vw, 1.1rem); } .hero-ctas { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } /* monogram animation */ .monogram-stage { position: relative; width: clamp(160px, 26vw, 230px); margin: 3.5rem auto 0; } .monogram-tile { position: relative; border-radius: 28px; background: var(--logo-chip-bg); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 12%; animation: bob 5s ease-in-out infinite; overflow: hidden; will-change: transform; } .monogram-img { width: 100%; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35)); } .monogram-beam { position: absolute; top: -30%; bottom: -30%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent); transform: rotate(8deg); animation: beam-sweep 4.5s ease-in-out infinite; } @keyframes beam-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } } .monogram-shadow { width: 62%; height: 14px; margin: 16px auto 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.35), transparent 70%); animation: shadow-pulse 5s ease-in-out infinite; } @keyframes shadow-pulse { 0%, 100% { transform: scaleX(1); opacity: 0.8; } 50% { transform: scaleX(0.78); opacity: 0.45; } } .monogram-orbit { position: absolute; inset: -18%; animation: orbit-spin 14s linear infinite; pointer-events: none; } @keyframes orbit-spin { to { transform: rotate(360deg); } } .orbit-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .orbit-spark.s1 { top: 0; left: 50%; } .orbit-spark.s2 { bottom: 8%; left: 12%; width: 7px; height: 7px; opacity: 0.8; } .orbit-spark.s3 { top: 30%; right: 4%; width: 5px; height: 5px; opacity: 0.6; } .scroll-cue { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: "Space Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } .scroll-cue-line { width: 1px; height: 44px; background: linear-gradient(var(--accent), transparent); animation: cue-drop 1.6s ease-in-out infinite; transform-origin: top; } @keyframes cue-drop { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ---------- Vision (cinematic scroll-scrubbed) ---------- */ .vision { position: relative; padding: 0; } .vision-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .vision-eyebrow { position: absolute; top: 13vh; left: 0; right: 0; text-align: center; font-family: "Space Mono", monospace; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); z-index: 3; } .vision-ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96vw; text-align: center; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: clamp(3.4rem, 15vw, 12rem); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); opacity: 0.05; pointer-events: none; z-index: 1; user-select: none; transition: opacity 0.35s ease; } .vision-lines { position: relative; width: min(92vw, 60rem); height: 48vh; z-index: 2; } .vline { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4vw; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: clamp(1.9rem, 6.5vw, 4.6rem); line-height: 1.12; letter-spacing: -0.01em; opacity: 0; will-change: transform, opacity, filter; } .vline.vpunch { background: linear-gradient(120deg, var(--accent), var(--accent-strong), var(--accent)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: punch-shine 4s linear infinite; } @keyframes punch-shine { to { background-position: 200% center; } } .vision-scrollcue { position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; font-family: "Space Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); z-index: 3; transition: opacity 0.4s ease; } .vision-rail { position: absolute; right: max(3vw, 1.4rem); top: 28vh; bottom: 28vh; width: 3px; border-radius: 3px; background: var(--line); overflow: hidden; z-index: 3; } .vision-rail-fill { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; } .vision-credit { text-align: center; font-family: "Space Mono", monospace; font-size: 0.72rem; color: var(--text-muted); padding: 0 1.2rem 4rem; margin: 0; } /* reduced-motion / no-JS fallback: plain readable stack */ .vision.is-static { padding: clamp(4rem, 9vw, 7.5rem) 1.2rem; } .vision.is-static .vision-pin { position: static; height: auto; display: block; text-align: center; } .vision.is-static .vision-ghost, .vision.is-static .vision-rail, .vision.is-static .vision-scrollcue { display: none; } .vision.is-static .vision-eyebrow { position: static; display: block; margin-bottom: 2rem; } .vision.is-static .vision-lines { height: auto; width: min(92vw, 46rem); margin: 0 auto; } .vision.is-static .vline { position: static; inset: auto; opacity: 1; margin: 0 0 0.6em; font-size: clamp(1.2rem, 3.5vw, 1.8rem); } /* ---------- Stats ---------- */ .stats { text-align: center; padding-top: 2rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; max-width: 62rem; margin: 0 auto 1.5rem; } .stat { padding: 1.8rem 1rem; border-radius: 20px; background: var(--bg-elev); border: 1px solid var(--line); } .stat-num { display: block; font-family: "Unbounded", sans-serif; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .stat-infinity i { font-style: normal; font-size: 0.5em; } .stat-label { font-family: "Space Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* ---------- Marquee ---------- */ .marquee-section { padding-left: 0; padding-right: 0; overflow: hidden; } .marquee-section .section-head { padding: 0 1.5rem; } .marquee { display: flex; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee + .marquee { border-top: none; } .marquee-track { display: flex; align-items: center; gap: 2.2rem; flex-shrink: 0; padding-right: 2.2rem; animation: marquee-scroll 36s linear infinite; font-family: "Unbounded", sans-serif; font-size: clamp(0.95rem, 2.4vw, 1.35rem); font-weight: 600; white-space: nowrap; } .marquee-track i { color: var(--accent); font-style: normal; font-size: 0.8em; } .marquee-reverse .marquee-track { animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { to { transform: translateX(-100%); } } /* ---------- Stacking pipeline ---------- */ .stack-wrap { max-width: 62rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; } .stack-card { position: sticky; top: 7rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; min-height: 21rem; border-radius: 28px; border: 1px solid var(--line); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow); overflow: hidden; transform-origin: center top; will-change: transform; transition: filter 0.3s ease; } .stack-card[data-tint="a"] { background: var(--tint-a); } .stack-card[data-tint="b"] { background: var(--tint-b); } .stack-card[data-tint="c"] { background: var(--tint-c); } .stack-card[data-tint="d"] { background: var(--tint-d); } .stack-card[data-tint="e"] { background: var(--tint-e); } .stack-card[data-tint="f"] { background: var(--tint-f); } .stack-card[data-tint="g"] { background: var(--tint-g); } .stack-index { font-family: "Space Mono", monospace; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.15em; display: block; margin-bottom: 0.8rem; } .badge { display: inline-block; font-family: "Space Mono", monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35em 0.9em; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); margin-bottom: 1rem; } .stack-card h3 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); } .stack-card p { max-width: 34rem; } .stack-card .fineprint { margin-bottom: 0; } .stack-card-art { display: flex; align-items: center; justify-content: center; } .art-glyph { font-size: clamp(4rem, 10vw, 7.5rem); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.3)); animation: bob 6s ease-in-out infinite; } /* ---------- Catalog grid ---------- */ .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; max-width: 72rem; margin: 0 auto; } .cat-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .cat-card:hover { transform: translateY(-6px) rotate(-0.5deg); border-color: var(--accent); box-shadow: 0 16px 40px var(--glow); } .cat-card h4 { font-size: 1.02rem; color: var(--accent); } .cat-card p { font-size: 0.9rem; color: var(--text-muted); margin: 0; } /* ---------- Process steps ---------- */ .steps { list-style: none; max-width: 46rem; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .step { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.6rem 1.8rem; border-radius: 20px; background: var(--bg-elev); border: 1px solid var(--line); } .step-num { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--accent); line-height: 1.2; flex-shrink: 0; } .step h3 { font-size: 1.1rem; margin-bottom: 0.3em; } .step p { margin: 0; color: var(--text-muted); font-size: 0.95rem; } /* ---------- Praise ---------- */ .praise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; max-width: 72rem; margin: 0 auto; } .quote { margin: 0; padding: 1.8rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; } .quote blockquote { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.55; } .quote blockquote::before { content: "“"; color: var(--accent); font-family: "Unbounded", sans-serif; } .quote figcaption { font-family: "Space Mono", monospace; font-size: 0.72rem; color: var(--text-muted); margin-top: auto; } /* ---------- About / CTA ---------- */ .about { text-align: center; } .about-inner { max-width: 46rem; margin: 0 auto 4rem; } .about-wordmark { width: min(420px, 80%); margin: 0 auto 2rem; background: var(--logo-chip-bg); border-radius: 24px; border: 1px solid var(--line); padding: 0.8rem 1.4rem; } .about-copy { color: var(--text-muted); font-size: 1.05rem; } .about-copy strong { color: var(--text); } .cta-band { max-width: 62rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem); border-radius: 32px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-contrast); box-shadow: 0 30px 80px var(--glow); } .cta-band h2 { color: inherit; } .cta-band > p { max-width: 36rem; margin: 0 auto 1.6rem; font-weight: 500; } .cta-fineprint { color: inherit; opacity: 0.75; margin: 1.4rem 0 0; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding: 3.5rem clamp(1.1rem, 5vw, 4rem) 2rem; background: var(--bg-elev); } .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; max-width: 68rem; margin: 0 auto 2.5rem; } .footer-brand p { color: var(--text-muted); font-size: 0.9rem; max-width: 16rem; } .footer-chip { margin-bottom: 1rem; } .footer-col { display: flex; flex-direction: column; gap: 0.55rem; } .footer-col h5 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; } .footer-col a { font-size: 0.88rem; color: var(--text-muted); } .footer-col a:hover { color: var(--text); } .footer-bottom { max-width: 68rem; margin: 0 auto; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); } .footer-bottom p { margin: 0; } /* ---------- Ball pit ---------- */ .everywhere { text-align: center; } .pit-wrap { position: relative; max-width: 68rem; margin: 0 auto 1.2rem; height: clamp(380px, 60vh, 560px); border-radius: 28px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; } #ballPit { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; } #ballPit.grabbing { cursor: grabbing; } .pit-hint { position: absolute; top: 1.1rem; right: 1.3rem; font-family: "Space Mono", monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; } /* ---------- Fixing Society drag shelf ---------- */ .society { padding-left: 0; padding-right: 0; overflow: hidden; } .society .section-head { padding: 0 1.5rem; } .shelf { overflow-x: auto; scrollbar-width: none; cursor: grab; padding: 1.2rem 0 1.6rem; } .shelf::-webkit-scrollbar { display: none; } .shelf.grabbing { cursor: grabbing; } .shelf-track { display: flex; gap: 1.1rem; width: max-content; padding: 0 clamp(1.1rem, 5vw, 4rem); } .shelf-card { width: 17rem; flex-shrink: 0; border-radius: 20px; border: 1px solid var(--line); padding: 1.5rem; background: var(--bg-elev); transform: rotate(var(--tilt, 0deg)); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; user-select: none; -webkit-user-select: none; } .shelf-card:nth-child(odd) { --tilt: -1.1deg; } .shelf-card:nth-child(even) { --tilt: 1.1deg; } .shelf-card:hover { transform: rotate(0deg) translateY(-8px); border-color: var(--accent); box-shadow: 0 16px 40px var(--glow); } .shelf-card[data-tint="a"] { background: var(--tint-a); } .shelf-card[data-tint="b"] { background: var(--tint-b); } .shelf-card[data-tint="c"] { background: var(--tint-c); } .shelf-card[data-tint="d"] { background: var(--tint-d); } .shelf-card[data-tint="e"] { background: var(--tint-e); } .shelf-card[data-tint="f"] { background: var(--tint-f); } .shelf-card[data-tint="g"] { background: var(--tint-g); } .shelf-index { display: block; font-family: "Space Mono", monospace; font-size: 0.75rem; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.7rem; } .shelf-card h4 { font-size: 1.02rem; } .shelf-card p { font-size: 0.9rem; color: var(--text-muted); } .shelf-card p:not(.fineprint) { color: var(--text); } .shelf-card .fineprint { margin-bottom: 0; } .shelf-cue { text-align: center; font-family: "Space Mono", monospace; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); } /* ---------- Architecture diagram ---------- */ .arch { max-width: 62rem; margin: 4.5rem auto 0; text-align: center; } .arch-title { font-size: 1.25rem; margin-bottom: 0.2em; } .arch-sub { font-family: "Space Mono", monospace; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 1.6rem; } .arch-scroll { overflow-x: auto; } .arch-svg { width: 100%; min-width: 720px; height: auto; display: block; } .arch .node rect { fill: var(--bg-elev); stroke: var(--line); stroke-width: 1.5; } .arch .node text { fill: var(--text); font-family: "Archivo", sans-serif; font-size: 15px; font-weight: 600; } .arch .node text.sub { fill: var(--text-muted); font-family: "Space Mono", monospace; font-size: 10px; font-weight: 400; } .arch .loop-label { fill: var(--text-muted); font-family: "Space Mono", monospace; font-size: 11px; } .arch .arrow-head { fill: var(--accent); } .arch .wire { stroke: var(--accent); stroke-width: 2; fill: none; opacity: 0.55; stroke-dasharray: 1400; stroke-dashoffset: 1400; } .arch .node { opacity: 0; transform: translateY(12px); transform-box: fill-box; transform-origin: center; } .arch .dot { fill: var(--accent); opacity: 0; transition: opacity 0.5s ease 1.6s; } .arch.in-view .wire { animation: wire-draw 1.3s ease forwards; } .arch.in-view .w2, .arch.in-view .w3, .arch.in-view .w4 { animation-delay: 0.25s; } .arch.in-view .w5, .arch.in-view .w6, .arch.in-view .w7 { animation-delay: 0.55s; } .arch.in-view .w8 { animation-delay: 0.85s; } .arch.in-view .loop { animation-delay: 1.1s; } .arch.in-view .node { animation: node-pop 0.5s ease forwards; } .arch.in-view .n2 { animation-delay: 0.2s; } .arch.in-view .n3, .arch.in-view .n4, .arch.in-view .n5 { animation-delay: 0.45s; } .arch.in-view .n6 { animation-delay: 0.75s; } .arch.in-view .n7 { animation-delay: 0.95s; } .arch.in-view .dot { opacity: 1; } @keyframes wire-draw { to { stroke-dashoffset: 0; } } @keyframes node-pop { to { opacity: 1; transform: translateY(0); } } /* ---------- Crush the competition ---------- */ .crush-toolbar { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; } .tool-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.55em 1.1em; color: var(--text); font-family: "Archivo", sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .tool-btn span { font-size: 1.15rem; } .tool-btn:hover { transform: translateY(-2px); border-color: var(--accent); } .tool-btn.active { border-color: var(--accent); background: var(--line); color: var(--accent); } .arena { position: relative; max-width: 68rem; margin: 0 auto 1.2rem; min-height: 380px; border-radius: 28px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; padding: 3rem 2rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; cursor: none; } .rival { width: 13rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; text-align: center; transition: transform 0.3s ease, opacity 0.35s ease, filter 0.35s ease; user-select: none; -webkit-user-select: none; } .rival h4 { margin: 0 0 0.15em; font-size: 0.95rem; } .rival p { margin: 0; font-family: "Space Mono", monospace; font-size: 0.68rem; color: var(--text-muted); } .rival.dead-flat { transform: scaleY(0.12) rotate(1.5deg); filter: grayscale(1); opacity: 0.5; } .rival.dead-smash { transform: scale(0.05) rotate(25deg); opacity: 0; } .rival.dead-sued { transform: rotateX(68deg) scale(0.92); opacity: 0.55; filter: sepia(0.35); position: relative; } .rival.dead-sued::after { content: "CEASE & DESIST"; position: absolute; top: 32%; left: 50%; transform: translateX(-50%) rotate(-9deg); font-family: "Space Mono", monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--accent-strong); border: 2px solid var(--accent-strong); background: var(--bg-elev); padding: 2px 7px; border-radius: 4px; } .crush-cursor { position: absolute; font-size: 2.3rem; pointer-events: none; transform: translate(-50%, -60%); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); z-index: 6; opacity: 0; transition: opacity 0.15s ease; } .crush-cursor.show { opacity: 1; } .crush-cursor.swing { animation: hammer-swing 0.32s ease; } @keyframes hammer-swing { 35% { transform: translate(-50%, -60%) rotate(-70deg) scale(1.15); } 100% { transform: translate(-50%, -60%) rotate(0deg); } } .shard { position: absolute; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 5; animation: shard-fly 0.75s ease-out forwards; } @keyframes shard-fly { 50% { transform: translate(calc(var(--dx) * 0.5), var(--dy)) rotate(calc(var(--rot) * 0.5)); opacity: 1; } 100% { transform: translate(var(--dx), 260px) rotate(var(--rot)); opacity: 0; } } .boom { position: absolute; font-size: 2.8rem; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; animation: boom-pop 0.5s ease-out forwards; } @keyframes boom-pop { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } .note { position: absolute; font-size: 1.3rem; pointer-events: none; z-index: 5; animation: note-float 1s ease-out forwards; } @keyframes note-float { to { transform: translate(var(--dx), -90px) rotate(var(--rot)); opacity: 0; } } .paper { position: absolute; font-size: 1.4rem; pointer-events: none; z-index: 5; animation: paper-fall 0.55s ease-in forwards; } @keyframes paper-fall { from { transform: translateY(-70px) rotate(-20deg); opacity: 1; } to { transform: translateY(20px) rotate(15deg); opacity: 0; } } .piano { position: absolute; top: -90px; font-size: 3.2rem; transform: translate(-50%, 0); pointer-events: none; z-index: 5; animation: piano-fall 0.55s cubic-bezier(0.5, 0, 1, 1) forwards; } @keyframes piano-fall { to { top: var(--fy); } } .truck { position: absolute; left: -100px; font-size: 3.6rem; transform: translate(-50%, -50%) scaleX(-1); pointer-events: none; z-index: 5; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)); } .crush-status { display: flex; gap: 1.2rem; align-items: center; justify-content: center; flex-wrap: wrap; font-family: "Space Mono", monospace; font-size: 0.78rem; color: var(--text-muted); } /* ---------- Million customers transition ---------- */ .million { height: 400vh; padding: 0; } .million-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; padding: 0 1.2rem; background: #f5b14c; color: #221303; } .million-eyebrow { font-family: "Space Mono", monospace; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 0; opacity: 0.75; } .million-num { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 10vw, 7rem); line-height: 1.1; font-variant-numeric: tabular-nums; will-change: transform; } .million-num.is-infinite { font-size: clamp(3.4rem, 15vw, 10rem); letter-spacing: -0.02em; } .million-approx { font-family: "Space Mono", monospace; font-size: clamp(1rem, 3vw, 1.7rem); font-weight: 700; margin: 0.2rem 0 0; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .million-approx.show { opacity: 0.85; transform: translateY(0); } .million-label { font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 600; margin: 0.4rem 0 0; } .million-fine { position: absolute; bottom: 2rem; left: 0; right: 0; font-family: "Space Mono", monospace; font-size: 0.7rem; opacity: 0.6; margin: 0; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translate(var(--rx, 0px), var(--ry, 36px)) scale(var(--rsc, 1)) rotate(0.001deg); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--reveal-delay, 0s); } .reveal.in-view { opacity: 1; transform: translate(0, 0) scale(1); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav-links { display: none; } .btn-nav { display: none; } .theme-btn-label { display: none; } .nav-burger { display: flex; } .stack-card { grid-template-columns: 1fr; min-height: 0; top: 5.5rem; } .stack-card-art { justify-content: flex-start; } .art-glyph { font-size: 3.4rem; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .stats-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .step { flex-direction: column; gap: 0.6rem; } .hero { padding-top: 6rem; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .hero-line > span { transform: none; animation: none; } }