/* Self-hosted variable fonts (latin subset) */ @font-face { font-family: "Syne"; src: url("fonts/syne.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { --bg: #04050a; --text: #eef0f7; --muted: #8a8fa3; --accent: #c7a6ff; --accent-2: #9ecbff; --line: rgba(255, 255, 255, 0.1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } /* `hidden` must win over display: flex/grid set on the same element */ [hidden] { display: none !important; } body { font-family: "Inter", system-ui, sans-serif; font-weight: 300; color: var(--text); /* background lives on so the fixed starfield stays visible */ overflow-x: hidden; -webkit-font-smoothing: antialiased; } #stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; } section { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 1.5rem; text-align: center; } .eyebrow { font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; } /* 1. Hero */ .address { max-width: 60ch; margin-bottom: 1.75rem; font-size: clamp(1rem, 2.2vw, 1.35rem); font-style: italic; line-height: 1.5; color: var(--muted); } /* Brushed silver: a cool vertical metal gradient, plus a narrow sheen that glides across now and then (driven by --sheen-x from script.js). */ .hero-title { --silver: linear-gradient(180deg, #f6f7fa 0%, #d4d7e0 34%, #9296a6 50%, #c3c6d1 64%, #eef0f4 100%); --sheen: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%); --sheen-w: 3.2em; --sheen-x: -4em; font-family: "Syne", sans-serif; font-weight: 800; /* Always fits the screen with a margin: the word is about 8.1em wide */ font-size: min(9rem, calc((100vw - 2.5rem) / 8.3)); line-height: 1; white-space: nowrap; letter-spacing: -0.03em; color: #d4d7e0; } /* Before the letters are split (and without animations): silver on the whole title */ .hero-title:not(.split) { background-image: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; } /* After splitting, every letter paints its own part: the silver runs top to bottom in each letter, the sheen is offset by the letter's position (--offset). */ .hero-title .char { --offset: 0px; display: inline-block; padding-block: 0.08em; margin-block: -0.08em; background-image: var(--sheen), var(--silver); background-size: var(--sheen-w) 100%, 100% 100%; background-repeat: no-repeat; background-position: calc(var(--sheen-x) - var(--offset)) 0, 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform, opacity; } .scroll-hint { position: absolute; bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); } .scroll-hint i { width: 1px; height: 48px; background: linear-gradient(var(--text), transparent); animation: drip 2s ease-in-out infinite; transform-origin: top; } @keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* 2. Statements */ .statements { height: 100vh; height: 100svh; } /* Stacked on top of each other inside the pinned section. Centred explicitly: Safari places absolutely positioned flex children differently than Chrome. */ .statement { position: absolute; left: 1.5rem; right: 1.5rem; margin-inline: auto; max-width: 18ch; font-family: "Syne", sans-serif; font-weight: 500; font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.1; opacity: 0; } .statement em { font-style: normal; background: linear-gradient(90deg, var(--accent-2), var(--accent), #ffd6a0); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 3. Mystery */ .mystery { height: 100vh; height: 100svh; overflow: hidden; } /* Spotlight cone from above, centred with margin:auto so GSAP can own transform */ .beam { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: min(80vw, 620px); height: 76%; filter: blur(12px); /* applied after the clip below, so the edges stay soft */ -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); transform-origin: top center; mix-blend-mode: screen; } .beam::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(215, 200, 255, 0.18) 60%, rgba(199, 166, 255, 0.08)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); } /* Slow drifting haze, softly masked to the lower part of the beam */ .haze { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: min(80vw, 620px); height: 76%; -webkit-mask-image: radial-gradient(ellipse 38% 45% at 50% 68%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 38% 45% at 50% 68%, #000 30%, transparent 100%); mix-blend-mode: screen; } .haze span { position: absolute; width: 60%; aspect-ratio: 2 / 1; border-radius: 50%; background: radial-gradient(ellipse, rgba(235, 225, 255, 0.35), transparent 65%); filter: blur(20px); animation: drift 14s ease-in-out infinite; } .haze span:nth-child(1) { left: 10%; top: 60%; } .haze span:nth-child(2) { left: 40%; top: 45%; animation-delay: -4s; animation-duration: 18s; } .haze span:nth-child(3) { left: 20%; top: 30%; animation-delay: -9s; animation-duration: 16s; } .haze span:nth-child(4) { left: 35%; top: 70%; animation-delay: -2s; animation-duration: 20s; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; } 50% { transform: translate(15%, -25%) scale(1.3); opacity: 1; } } /* Pool of light on the floor */ .floor-light { position: absolute; bottom: 20%; left: 0; right: 0; margin: 0 auto; width: min(90vw, 700px); height: 16vh; background: radial-gradient(ellipse at center, rgba(230, 220, 255, 0.35), rgba(199, 166, 255, 0.08) 45%, transparent 70%); filter: blur(10px); } .product { position: absolute; bottom: 22%; left: 0; right: 0; display: flex; justify-content: center; } .product svg { width: min(38vw, 230px); height: auto; overflow: visible; } .mystery-caption { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 9vh; font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--muted); opacity: 0; } .mystery-caption span { color: var(--text); font-weight: 500; } /* 4. Hints */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1000px; } .card { text-align: left; padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); backdrop-filter: blur(8px); } .card-num { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--accent); } .card h3 { font-family: "Syne", sans-serif; font-size: 1.6rem; font-weight: 700; margin: 1rem 0 0.75rem; } .card p { color: var(--muted); line-height: 1.6; } .redacted { color: var(--text); letter-spacing: -0.1em; opacity: 0.85; } /* 5. Reveal */ .reveal { height: 100vh; height: 100svh; overflow: hidden; } .brand { font-family: "Syne", sans-serif; font-weight: 800; font-size: clamp(2rem, 8vw, 7rem); line-height: 1; text-transform: uppercase; white-space: nowrap; background: linear-gradient(180deg, #fff 30%, #9aa3c7); -webkit-background-clip: text; background-clip: text; color: transparent; } .coming { margin-top: 1.5rem; font-size: clamp(0.9rem, 2vw, 1.1rem); letter-spacing: 0.5em; text-transform: uppercase; color: var(--muted); } /* 6. Waitlist */ .waitlist h2 { font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; } .waitlist-content > p { color: var(--muted); margin-bottom: 2.5rem; } .waitlist-form { width: 100%; max-width: 480px; } .waitlist-field { display: flex; gap: 0.5rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); } .waitlist-field input { flex: 1; min-width: 0; padding: 0.9rem 1.2rem; font: inherit; color: var(--text); background: transparent; border: none; outline: none; } .waitlist-field input::placeholder { color: var(--muted); } .waitlist-form button { padding: 0.9rem 1.6rem; font: inherit; font-weight: 500; color: var(--bg); background: linear-gradient(90deg, var(--accent-2), var(--accent)); border: none; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; } .waitlist-form button:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(199, 166, 255, 0.45); } .waitlist-form button:disabled { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; } .waitlist-field:focus-within { border-color: rgba(199, 166, 255, 0.5); } .consent { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1rem; padding: 0 0.5rem; text-align: left; font-size: 0.8rem; line-height: 1.5; color: var(--muted); cursor: pointer; } /* Own checkbox, so it can be highlighted reliably when it was forgotten */ .consent input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin: 0.1rem 0 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 5px; background: rgba(255, 255, 255, 0.03) center / 80% no-repeat; cursor: pointer; transition: border-color 0.2s, box-shadow 0.3s, background-color 0.2s; } .consent input:checked { border-color: transparent; background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2304050a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--accent-2), var(--accent)); background-size: 80%, 100%; } .consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Forgotten checkbox / invalid email: a soft rosé glow and a short "no" nudge */ .consent.invalid { color: #f1d5dc; animation: nudge 0.45s ease-in-out; } .consent.invalid input { border-color: #ff9db0; box-shadow: 0 0 0 4px rgba(255, 120, 150, 0.16), 0 0 18px rgba(255, 120, 150, 0.4); } .waitlist-field.invalid { border-color: rgba(255, 157, 176, 0.7); box-shadow: 0 0 0 4px rgba(255, 120, 150, 0.1), 0 0 24px rgba(255, 120, 150, 0.18); animation: nudge 0.45s ease-in-out; } @keyframes nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .form-message { min-height: 1.5em; margin-top: 1.25rem; color: var(--accent); } .form-message.error { color: #ffb3c1; } /* After a successful signup the message is only announced, the success view speaks visually */ .form-message.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .waitlist-content { display: flex; flex-direction: column; align-items: center; width: 100%; } .waitlist-success { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .success-mark { width: 76px; height: 76px; overflow: visible; filter: drop-shadow(0 0 14px rgba(199, 166, 255, 0.35)); } .success-ring, .success-check { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; } .success-ring { stroke: url(#ring-silver); stroke-width: 1.2; } .success-check { stroke: #f6f7fa; stroke-width: 2.2; } .success-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; background: linear-gradient(180deg, #f6f7fa 0%, #d4d7e0 34%, #9296a6 50%, #c3c6d1 64%, #eef0f4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .success-text { max-width: 34ch; color: var(--muted); line-height: 1.6; } footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem 1.5rem; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); } @media (max-width: 520px) { .waitlist-field { flex-direction: column; border-radius: 20px; } } @media (prefers-reduced-motion: reduce) { .consent.invalid, .waitlist-field.invalid { animation: none; } } /* Without JS or with reduced motion: show everything statically */ .no-anim .statements, .no-anim .reveal { height: auto; } .no-anim .statement { position: static; opacity: 1; margin: 1.5rem auto; } .no-anim .haze span { animation: none; } .no-anim .mystery-caption { opacity: 1; }