@font-face { font-family: 'Graskia'; src: url('../fonts/graskia.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Coolvetica'; src: url('../fonts/coolvetica.ttf') format('truetype'); font-weight: 400; font-display: swap; } :root { --teal: #054E57; --blue: #2049F7; --lime: #CDF12B; --white: #FFFFFF; --teal-deep: #033238; --ink: #04262b; --glass: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.16); --max-w: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Coolvetica', 'Arial Narrow', sans-serif; color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; background: radial-gradient(115% 95% at 6% 10%, var(--lime) 0%, transparent 58%), radial-gradient(85% 65% at 96% 4%, var(--blue) 0%, transparent 48%), linear-gradient(165deg, var(--teal-deep) 0%, var(--teal) 55%, #0c6a4f 100%); background-size: 220% 220%, 220% 220%, 100% 100%; background-position: 0% 0%, 100% 0%, 0 0; animation: auroraShift 34s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { background-position: 0% 0%, 100% 0%, 0 0; } 50% { background-position: 18% 14%, 82% 16%, 0 0; } 100% { background-position: 4% 22%, 92% 4%, 0 0; } } h1, h2, h3, .display { font-family: 'Graskia', 'Arial Black', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; } a { color: inherit; } /* .bg-decor is no longer used — background now lives on so it always fully covers the page, including mobile browsers that collapse their toolbar (position:fixed elements can lag behind that resize). */ /* ---------- topbar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 5vw, 56px); } .logo { height: clamp(34px, 4.5vw, 54px); width: auto; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.15)); } /* ---------- hero ---------- */ main { position: relative; z-index: 1; } .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(90px, 12vh, 140px) 20px 60px; } .eyebrow { font-family: 'Coolvetica', sans-serif; text-transform: uppercase; letter-spacing: 0.35em; font-size: clamp(12px, 1.4vw, 15px); color: var(--white); margin: 0 0 10px; opacity: 0.75; animation: riseIn 0.7s ease both; } .hero-title { font-size: clamp(40px, 8.6vw, 108px); line-height: 0.98; color: var(--white); text-shadow: none; animation: riseIn 0.8s ease both 0.05s; } .countdown { margin-top: clamp(28px, 5vh, 52px); display: flex; align-items: center; gap: clamp(6px, 1.6vw, 18px); animation: riseIn 0.8s ease both 0.15s; } .cd-cell { display: flex; flex-direction: column; align-items: center; min-width: clamp(64px, 9vw, 120px); background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); border-radius: clamp(16px, 2vw, 26px); padding: clamp(10px, 2vw, 20px) clamp(6px, 1.4vw, 14px); } .cd-num { font-family: 'Graskia', sans-serif; font-size: clamp(30px, 6.4vw, 76px); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; } .cd-label { margin-top: 6px; font-size: clamp(10px, 1.1vw, 13px); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.75; } .cd-sep { font-family: 'Graskia', sans-serif; font-size: clamp(24px, 4vw, 48px); color: var(--white); opacity: 0.4; transform: translateY(-6px); } .countdown-until { margin: 14px 0 0; opacity: 0.7; font-size: clamp(13px, 1.3vw, 16px); text-transform: uppercase; letter-spacing: 0.2em; } .progress-wrap { width: min(560px, 88vw); margin-top: clamp(36px, 6vh, 64px); animation: riseIn 0.8s ease both 0.25s; } .progress-head { display: flex; justify-content: space-between; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; margin-bottom: 8px; } #progress-percent { color: var(--white); font-family: 'Graskia', sans-serif; letter-spacing: 0; } .progress-track { height: 14px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid var(--glass-border); overflow: hidden; } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--lime)); transition: width 1.2s cubic-bezier(.16,1,.3,1); } .scroll-cue { margin-top: clamp(40px, 7vh, 70px); width: 30px; height: 46px; border-radius: 20px; border: 2px solid rgba(255,255,255,0.5); background: transparent; cursor: pointer; position: relative; animation: riseIn 0.8s ease both 0.35s; } .scroll-cue span { position: absolute; top: 8px; left: 50%; width: 5px; height: 9px; margin-left: -2.5px; border-radius: 3px; background: var(--lime); animation: scrollDot 1.8s ease-in-out infinite; } @keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(14px); opacity: 0; } 61% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ---------- timeline ---------- */ .timeline { position: relative; padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 56px) clamp(100px, 14vh, 160px); max-width: var(--max-w); margin: 0 auto; } .timeline-title { font-size: clamp(30px, 5vw, 54px); text-align: center; } .timeline-sub { text-align: center; opacity: 0.6; margin: 10px 0 clamp(40px, 7vh, 70px); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; } .timeline-list { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.6vw, 28px) clamp(12px, 2.4vw, 24px); max-width: 900px; margin: 0 auto; } .bubble { --rot: 0deg; --float: 0px; position: relative; display: inline-flex; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); border-radius: 999px; padding: 14px 26px; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.3; white-space: normal; overflow-wrap: anywhere; word-break: break-word; max-width: min(340px, 78vw); text-align: center; opacity: 0; transform: rotate(var(--rot)) translateY(calc(var(--float) + 26px)); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.16,1,.3,1), background 0.3s ease; } .bubble.visible { opacity: 1; transform: rotate(var(--rot)) translateY(var(--float)); } .bubble:hover { background: rgba(255,255,255,0.15); } .bubble-slot { display: inline-flex; transition: transform 0.25s cubic-bezier(.22,1,.36,1); will-change: transform; } .timeline-footer { text-align: center; margin: clamp(40px, 6vh, 64px) 0 0; font-family: 'Graskia', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(15px, 2vw, 20px); color: var(--white); opacity: 0.8; } .timeline-empty { text-align: center; opacity: 0.6; padding: 20px; } /* ---------- UP button + modal ---------- */ .up-btn { flex: 0 0 auto; font-family: 'Coolvetica', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(11px, 1.3vw, 13px); color: var(--teal-deep); background: var(--lime); border: none; border-radius: 999px; padding: clamp(10px, 1.6vw, 13px) clamp(16px, 2.4vw, 22px); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .up-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.32); } .modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(3, 24, 27, 0.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop[hidden] { display: none; } .modal { background: var(--teal-deep); border: 1px solid var(--glass-border); border-radius: 22px; padding: 32px 28px; max-width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .modal h3 { font-size: 22px; color: var(--lime); margin-bottom: 12px; } .modal p { opacity: 0.85; margin: 0 0 22px; line-height: 1.5; } .modal-close { font-family: 'Coolvetica', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; background: var(--lime); color: var(--teal-deep); border: none; border-radius: 999px; padding: 11px 26px; cursor: pointer; font-size: 13px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- mobile: make the countdown the hero ---------- */ @media (max-width: 640px) { .hero { padding: clamp(80px, 11vh, 110px) 16px 40px; } .hero-title { font-size: 12vw; } .countdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; } .cd-sep { display: none; } .cd-cell { min-width: 0; width: 100%; padding: 18px 8px; border-radius: 22px; } .cd-num { font-size: 15vw; } .cd-label { font-size: 11px; } .progress-wrap { width: 100%; max-width: 420px; } .bubble { font-size: 15px; padding: 12px 20px; } }