/* === Reset === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* === Variables === */ :root { --color-bg: #ffffff; --color-text: #000000; --color-accent: #000000; --color-muted: rgba(0, 0, 0, 0.5); --color-subtle: rgba(0, 0, 0, 0.3); --color-border: rgba(0, 0, 0, 0.15); --font-serif: 'DM Serif Display', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* === Base === */ html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* === Version switcher (F&F voting — remove before launch) === */ .version-switcher { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border: 1px solid var(--color-border); border-radius: 9999px; padding: 0.4rem 0.75rem; z-index: 10000; font-family: var(--font-mono); } .vs-label { font-size: 0.625rem; color: var(--color-subtle); text-transform: uppercase; letter-spacing: 0.05em; } .vs-btn { width: 1.6rem; height: 1.6rem; border-radius: 9999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; } .vs-btn:hover { border-color: rgba(0, 0, 0, 0.4); } .vs-btn.active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } .vs-name { font-size: 0.625rem; color: var(--color-subtle); letter-spacing: 0.02em; min-width: 6.5rem; } /* === Grain overlay === */ .grain::after { content: ""; position: fixed; inset: 0; opacity: 0.02; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); z-index: 9999; } /* === Page === */ .page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 2rem; } /* === Hero === */ .hero { display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; padding: 4rem 0 2rem; } .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 560px; width: 100%; } .hero-wordmark { display: flex; justify-content: center; margin-bottom: -1.5rem; } .hero-logo-img { width: clamp(280px, 58vw, 460px); height: auto; } .hero-headline { font-family: var(--font-serif); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text); } /* Per-version headline font (set on by the switcher) */ /* V1 = plain Times (the clean serif look) */ body.v-1 .hero-headline, body.v-1 .why-lead { font-family: 'Times New Roman', Times, serif; font-weight: 400; letter-spacing: -0.02em; } body.v-1 .hero-headline { font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1.1; } /* V2 = Switzer (Aeonik-feel grotesque) */ body.v-2 .hero-headline, body.v-2 .why-lead { font-family: 'Switzer', sans-serif; font-weight: 600; letter-spacing: -0.03em; } /* V3 = Space Grotesk (technical/editorial) */ body.v-3 .hero-headline, body.v-3 .why-lead { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.03em; } .hero-sub { font-family: var(--font-sans); font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--color-muted); margin-top: 1.25rem; max-width: 440px; } /* === Form === */ .hero-form-wrapper { margin-top: 2.5rem; width: 100%; max-width: 400px; } .hero-form { display: flex; gap: 0.75rem; width: 100%; } .hero-form input { flex: 1; background: transparent; border: 1px solid var(--color-border); border-radius: 9999px; padding: 0.875rem 1.25rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 400; color: var(--color-text); outline: none; transition: border-color 0.3s ease; } .hero-form input::placeholder { color: var(--color-subtle); } .hero-form input:focus { border-color: rgba(0, 0, 0, 0.4); } .hero-form button { background: var(--color-accent); color: var(--color-bg); border: none; border-radius: 9999px; padding: 0.875rem 1.5rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: transform 0.2s ease, opacity 0.2s ease; } .hero-form button:hover { transform: scale(1.02); opacity: 0.85; } .hero-form button:active { transform: scale(0.98); } .hero-microcopy { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; color: var(--color-subtle); margin-top: 0.875rem; text-transform: uppercase; letter-spacing: 0.12em; } /* === Confirmation state === */ .hero-confirmation { margin-top: 2.5rem; } .confirmation-text { font-family: var(--font-serif); font-size: 1.75rem; color: var(--color-text); } .confirmation-sub { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--color-muted); margin-top: 0.875rem; max-width: 400px; } /* === Details (stats row) === */ .details { width: 100%; max-width: 560px; padding: 3rem 0; border-top: 1px solid var(--color-border); } .details-grid { display: flex; justify-content: center; gap: 3rem; } .detail-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .detail-number { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text); } .detail-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; color: var(--color-muted); text-transform: lowercase; } /* === Why / founder === */ .why { width: 100%; max-width: 560px; padding: 3rem 0 1rem; border-top: 1px solid var(--color-border); text-align: center; } .why-lead { font-family: var(--font-serif); font-size: clamp(1.25rem, 3.5vw, 1.5rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-text); } .why-body { font-family: var(--font-sans); font-size: 1rem; font-weight: 300; line-height: 1.65; color: var(--color-muted); margin-top: 1.25rem; max-width: 460px; margin-left: auto; margin-right: auto; } .why-close { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--color-text); margin-top: 1.25rem; } /* === Context === */ .context { padding: 1.5rem 0 3rem; } .context-text { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 300; color: var(--color-subtle); text-align: center; letter-spacing: 0.01em; } /* === Bottom bar === */ .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 1.25rem; z-index: 100; } .footer-link { display: flex; align-items: center; gap: 0.5rem; color: var(--color-subtle); text-decoration: none; font-family: var(--font-mono); font-size: 0.75rem; transition: color 0.2s ease; } .footer-link:hover { color: var(--color-text); } /* === Animations === */ .animate-in { opacity: 0; transform: translateY(12px); animation: fadeIn 0.8s ease-out forwards; animation-delay: var(--delay, 0s); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* === Responsive === */ @media (max-width: 480px) { .page { padding: 1.5rem; } .hero { padding: 3rem 0 1.5rem; } .hero-form { flex-direction: column; gap: 0.75rem; } .hero-form button { width: 100%; padding: 1rem; } .details-grid { gap: 2rem; } .detail-number { font-size: 1.25rem; } }