/* ============================================================ WorldLens — Shared Styles ============================================================ */ /* Google Fonts — loaded via tags in each HTML to avoid render-blocking @import */ /* ============================================================ CSS Custom Properties — Dark Mode (default) ============================================================ */ :root { /* Background */ --color-bg: #0D0D0D; --color-card: #1A1A1A; /* Borders */ --color-border: #2A2A2A; /* Accent */ --color-gold: #E8A838; --color-gold-deep: #C17D20; /* Text */ --color-white: #FFFFFF; --color-body: #E0D5C5; --color-muted: #A0A0A0; --color-text-light: #1A1A1A; /* Semantic aliases — dark mode */ --color-surface: var(--color-bg); --color-on-surface: var(--color-body); --color-on-surface-muted: var(--color-muted); --color-card-surface: var(--color-card); /* Typography */ --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-weight-body: 300; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; --space-2xl: 8rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* Transitions */ --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1); --transition-base: 0.35s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Grain overlay opacity */ --grain-opacity: 0.04; /* Gold glow */ --glow-gold: 0 0 80px rgba(232, 168, 56, 0.15); --glow-gold-strong: 0 0 120px rgba(232, 168, 56, 0.25); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; width: 100%; } body { background-color: var(--color-surface); color: var(--color-on-surface); font-family: var(--font-body); font-weight: var(--font-weight-body); line-height: 1.7; min-height: 100vh; transition: background-color var(--transition-slow), color var(--transition-slow); position: relative; overflow-x: hidden; width: 100%; } /* ============================================================ Grain Texture Overlay ============================================================ */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; color: var(--color-white); letter-spacing: -0.01em; } p { color: var(--color-on-surface); } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } /* ============================================================ Logo ============================================================ */ .logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; color: var(--color-white); letter-spacing: -0.01em; text-decoration: none; transition: opacity var(--transition-fast); } .logo:hover { opacity: 0.85; } .logo .logo-lens { color: var(--color-gold); } /* ============================================================ Navigation — Fixed, 72px, always blurred ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 72px; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-xl); background-color: rgba(13, 13, 13, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Three nav regions */ .nav-left, .nav-right { display: flex; align-items: center; gap: var(--space-md); } .nav-center { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); } /* Center links */ .nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; } .nav-links a { font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--color-muted); letter-spacing: 0.07em; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; } .nav-links a:hover { color: var(--color-on-surface); } .nav-links a.active { color: var(--color-gold); border-bottom-color: var(--color-gold); } /* Coming Soon badge */ .nav-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(232, 168, 56, 0.35); background: rgba(232, 168, 56, 0.08); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); white-space: nowrap; } /* Hamburger button */ .nav-hamburger { display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; transition: border-color var(--transition-fast); flex-shrink: 0; } .nav-hamburger:hover { border-color: var(--color-gold); } .nav-hamburger span { display: block; width: 18px; height: 1.5px; background: var(--color-on-surface); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); transform-origin: center; } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============================================================ Mobile Menu — full-width dropdown ============================================================ */ .nav-mobile-menu { display: none; /* revealed as flex via media query */ position: fixed; top: 72px; left: 0; right: 0; z-index: 199; background-color: rgba(13, 13, 13, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); padding: var(--space-md) var(--space-lg) var(--space-xl); flex-direction: column; gap: var(--space-md); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .nav-mobile-menu.open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: all; } .nav-mobile-links { list-style: none; display: flex; flex-direction: column; } .nav-mobile-links li { border-bottom: 1px solid var(--color-border); } .nav-mobile-links li:first-child { border-top: 1px solid var(--color-border); } .nav-mobile-links a { display: block; padding: 0.9rem 0; font-size: 0.9375rem; font-family: var(--font-body); font-weight: 300; color: var(--color-on-surface); letter-spacing: 0.02em; transition: color var(--transition-fast), padding-left var(--transition-fast); } .nav-mobile-links a:hover { color: var(--color-gold); padding-left: 6px; } .nav-mobile-links a.active { color: var(--color-gold); } .nav-mobile-actions { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); flex-wrap: wrap; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.65rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0px); } .btn-primary { background-color: var(--color-gold); color: #0D0D0D; border-color: var(--color-gold); } .btn-primary:hover { background-color: var(--color-gold-deep); border-color: var(--color-gold-deep); color: #0D0D0D; box-shadow: 0 0 24px rgba(232, 168, 56, 0.3); } .btn-ghost { background: transparent; color: var(--color-on-surface); border-color: var(--color-border); } .btn-ghost:hover { border-color: var(--color-gold); color: var(--color-gold); } .btn-lg { font-size: 0.875rem; padding: 0.9rem 2.25rem; } /* ============================================================ Layout Utilities ============================================================ */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-xl); } .container-narrow { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: var(--space-xl); } .section { padding-block: var(--space-2xl); } /* Push page content below fixed nav */ main { padding-top: 72px; } /* ============================================================ Cards ============================================================ */ .card { background-color: var(--color-card-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); transition: border-color var(--transition-base); } .card:hover { border-color: rgba(232, 168, 56, 0.3); } /* ============================================================ Gold Divider ============================================================ */ .gold-divider { width: 48px; height: 2px; background: linear-gradient(90deg, var(--color-gold), transparent); margin-block: var(--space-md); } /* ============================================================ Footer ============================================================ */ .site-footer { position: relative; border-top: 1px solid var(--color-border); margin-top: var(--space-2xl); } /* Thin gold line overlaid on the border-top */ .site-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--color-gold-deep) 25%, var(--color-gold) 50%, var(--color-gold-deep) 75%, transparent 100% ); } .footer-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-xl); } .footer-links { display: flex; gap: 1.75rem; list-style: none; flex-wrap: wrap; align-items: center; } .footer-links a { font-size: 0.8125rem; color: var(--color-muted); letter-spacing: 0.02em; transition: color 0.25s ease, opacity 0.25s ease; } .footer-links a:hover { color: var(--color-gold); } .footer-domain { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-muted); letter-spacing: 0.02em; } .footer-bottom { border-top: 1px solid var(--color-border); padding-block: var(--space-md); text-align: center; } .footer-copy { font-size: 0.75rem; color: var(--color-muted); letter-spacing: 0.03em; } /* ============================================================ Scroll Reveal ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].revealed { opacity: 1; transform: translateY(0); } [data-reveal][data-delay="1"] { transition-delay: 0.08s; } [data-reveal][data-delay="2"] { transition-delay: 0.16s; } [data-reveal][data-delay="3"] { transition-delay: 0.24s; } [data-reveal][data-delay="4"] { transition-delay: 0.32s; } /* ============================================================ Responsive ============================================================ */ /* Hide Coming Soon badge at medium widths to prevent overlap with centered nav links */ @media (max-width: 1050px) { .nav-right .nav-badge { display: none; } } @media (max-width: 768px) { .container, .container-narrow { padding-inline: 24px; } .site-nav { padding-inline: 24px; } /* Hide center links and right-side badge+CTA+toggle; show hamburger */ .nav-center { display: none; } .nav-right .nav-badge, .nav-right .btn { display: none; } .nav-hamburger { display: flex; } /* Show mobile menu container */ .nav-mobile-menu { display: flex; } .section { padding-block: var(--space-xl); } .footer-main { flex-direction: column; align-items: center; text-align: center; padding-block: var(--space-lg); } .footer-links { justify-content: center; gap: 1.25rem; } } @media (max-width: 480px) { .nav-badge { display: none; /* too cramped in mobile menu on very small screens — keep btn only */ } .nav-mobile-actions .nav-badge { display: inline-flex; /* restore inside mobile menu */ } } /* ============================================================ Form — shake animation + feedback messages ============================================================ */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } @keyframes fadeInMsg { from { opacity: 0; } to { opacity: 1; } } /* Shake animation only — border state handled separately via .input-error */ .input-shake { animation: shake 0.4s ease; } /* Bottom border turns red on validation error — sides/top unchanged */ .form-row input.input-error { border-bottom-color: #E8544A; } /* Validation messages — always appear below .form-row, never inside it */ .form-validation-msg, .form-success-msg, .form-error-msg { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 300; line-height: 1.5; margin-top: 0.5rem; opacity: 0; animation: fadeInMsg 0.2s ease forwards; } .form-validation-msg { color: #E8544A; letter-spacing: 0.02em; } .form-success-msg { color: #E8A838; letter-spacing: 0.02em; } .form-error-msg { color: var(--color-muted); } /* Already-on-waitlist message — replaces form for returning visitors */ .waitlist-already { font-family: var(--font-body); font-size: 0.95rem; font-weight: 300; color: var(--color-gold); background: rgba(232, 168, 56, 0.08); border: 1px solid rgba(232, 168, 56, 0.25); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; text-align: center; max-width: 560px; line-height: 1.6; } /* Submit button spinner */ @keyframes btn-spin { to { transform: rotate(360deg); } } .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(13, 13, 13, 0.3); border-top-color: #0D0D0D; border-radius: 50%; animation: btn-spin 0.6s linear infinite; vertical-align: middle; margin-right: 4px; } /* Privacy note under waitlist form */ .waitlist-privacy { font-family: var(--font-body); font-size: 0.7rem; font-weight: 300; color: var(--color-muted); line-height: 1.5; margin-top: 0.5rem; letter-spacing: 0.01em; } .waitlist-privacy a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; } .waitlist-privacy a:hover { color: var(--color-gold-deep); } /* ============================================================ Waitlist reward badge ============================================================ */ .waitlist-reward { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(232, 168, 56, 0.08); border: 1px solid rgba(232, 168, 56, 0.25); border-radius: 100px; padding: 8px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 300; color: #E8A838; width: fit-content; margin: 0.75rem auto 0.5rem; } .waitlist-reward-icon { font-size: 10px; flex-shrink: 0; } /* Inside a waitlist form — left-aligned, tighter */ .waitlist-form .waitlist-reward { justify-content: flex-start; margin: 10px 0 10px; font-size: 12px; padding: 6px 14px; } /* ============================================================ Referral screen — shown after successful form submission ============================================================ */ @keyframes draw-circle { from { stroke-dashoffset: 176; } to { stroke-dashoffset: 0; } } @keyframes draw-check { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } } .referral-screen { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 560px; margin: 0 auto; text-align: center; padding: 0.5rem 0; } .referral-check { position: relative; width: 64px; height: 64px; margin: 0 auto; } .referral-check::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; background: radial-gradient(circle, rgba(232, 168, 56, 0.14) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .referral-check svg { width: 100%; height: 100%; } .check-circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw-circle 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards; } .check-mark { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw-check 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; } .referral-headline { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 300; color: var(--color-white); margin: 20px 0 0.4rem; } .referral-sub { font-family: var(--font-body); font-size: 0.95rem; font-weight: 300; color: var(--color-muted); margin: 0; } .referral-number { color: var(--color-gold); font-weight: 400; } .referral-reward { display: inline-flex; margin: 24px auto; font-size: 14px; } .referral-share { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 480px; margin: 0 auto; } .referral-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 400; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: opacity 0.2s ease, transform 0.2s ease; } .referral-btn:hover { opacity: 0.88; transform: translateY(-1px); } .referral-btn svg { position: absolute; left: 20px; width: 18px; height: 18px; } .referral-btn-x { background: #000; color: #fff; border-color: rgba(255, 255, 255, 0.1); } .referral-btn-wa { background: #25D366; color: #fff; } .referral-btn-copy { background: transparent; color: var(--color-gold); border-color: rgba(232, 168, 56, 0.4); } .referral-btn-copy:hover { border-color: var(--color-gold); } .referral-note { font-family: var(--font-body); font-size: 12px; font-weight: 300; color: var(--color-muted); line-height: 1.6; max-width: 400px; margin: 20px auto 0; } /* Visually hidden — accessible to screen readers but invisible */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }