/* ================================ RELEASE PAGE (BIG TIMER) ================================ */ #confetti{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } /* If you want NO scrolling on release page only: add in release HTML */ body.releasePage{ overflow: hidden; } /* Full screen background */ .bgFull{ overscroll-behavior: none; pointer-events: none; position: fixed; inset: 0; z-index: 0; background: url('../assets/background.png') center/cover no-repeat; filter: saturate(1.05) contrast(1.05); transform: scale(1.02); } .bgFull::after{ content:""; position:absolute; inset:0; background: radial-gradient(900px 500px at 50% 10%, rgba(0,0,0,.15), rgba(0,0,0,.55) 60%, rgba(0,0,0,.72)), linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55)); } /* page wrap */ .releaseWrap{ position: relative; z-index: 2; min-height: 100vh; display: grid; place-items: center; padding: 28px 0; } .releaseCard{ width: min(1100px, 94vw); border-radius: var(--r); border: 1px solid rgb(183, 146, 60); background: linear-gradient(180deg, rgb(0, 0, 0), rgb(0, 0, 0)); box-shadow: var(--shadow); padding: clamp(16px, 3vw, 26px); position: relative; overflow: hidden; transform: translateZ(0); } /* Card background image */ .releaseCard::before{ content:""; position:absolute; inset:0; background: url('../assets/background.png') center/cover no-repeat; opacity: .0; filter: saturate(1.05) contrast(1.05); transform: scale(1.02); pointer-events:none; } .releaseCard::after{ content:""; position:absolute; inset:0; background: radial-gradient(900px 420px at 50% 10%, rgba(0,0,0,.08), rgba(0,0,0,.35) 55%, rgba(0,0,0,.55)), linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.44)); pointer-events:none; } .releaseCard > *{ position:relative; z-index:1; } .releaseTop{ display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom: 16px; opacity: .88; } .releaseTop img{ height: 40px; width:auto; display:block; filter: drop-shadow(0 6px 18px rgba(215,192,138,.25)); } .releaseMicro{ font-size: 40px; letter-spacing: .28em; font-weight: 900; color: rgba(255,255,255,.62); text-transform: uppercase; } /* BIG timer */ .bigTimer{ display:flex; align-items:flex-end; justify-content:center; gap: clamp(10px, 2vw, 18px); padding: clamp(16px, 3vw, 26px); width: 100%; box-sizing: border-box; border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); box-shadow: 0 18px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter: blur(12px); flex-wrap: nowrap; } .bigTimer__block{ display:grid; justify-items:center; gap: 10px; min-width: clamp(68px, 11vw, 150px); } .bigTimer__num{ font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-size: clamp(56px, 10vw, 150px); text-shadow: 0 0 30px rgba(255,255,255,.06); } /* Gold gradient text (countdown) */ .bigTimer__num{ background: linear-gradient( 180deg, #fff4c2 0%, #f1d58a 18%, #d4b25f 38%, #b7923c 55%, #f6e7b2 72%, #cfa44a 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 24px rgba(215,192,138,.20); } .bigTimer__lab{ font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.55); transform: translateY(-2px); } .bigTimer__sep{ font-size: clamp(34px, 6vw, 96px); line-height: 1; margin: 0 clamp(2px, .5vw, 6px); opacity: .55; transform: translateY(-10%); text-shadow: 0 0 22px rgba(255,255,255,.05); } /* tiny tick pulse */ .bigTimer.tick{ animation: tick .18s ease-out; } @keyframes tick{ from{ transform: scale(1.012); filter: brightness(1.08); } to{ transform: scale(1); filter: brightness(1); } } /* actions */ .releaseActions{ margin-top: 16px; display:flex; justify-content:center; gap: 12px; flex-wrap: wrap; align-items:center; } .fadeOut{ animation: fadeOut .55s ease forwards; } @keyframes fadeOut{ to{ opacity:0; transform: translateY(10px); filter: blur(8px); } } /* ✅ MOBILE FIXES: text fits + timer stays inside the box */ @media (max-width: 520px){ .releaseTop{ margin-bottom: 12px; } .releaseMicro{ font-size: 16px; letter-spacing: .22em; text-align:center; line-height: 1.25; padding: 0 8px; } /* ✅ 2x2 square grid timer */ .bigTimer{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; align-items: stretch; } .bigTimer__block{ min-width: 0; width: 100%; padding: 12px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); } .bigTimer__num{ font-size: clamp(40px, 12vw, 64px); } .bigTimer__lab{ font-size: 10px; letter-spacing: .22em; } /* ✅ hide colons on mobile */ .bigTimer__sep--hideOnMobile{ display: none !important; } /* center countdown in middle on mobile */ .releaseWrap{ display: flex; align-items: center; justify-content: center; } .releaseCard{ display: flex; flex-direction: column; justify-content: center; } .releaseActions{ margin-top: 18px; } } @media (max-width: 360px){ .bigTimer__sep{ display:none; } }