/* THE UNMADE — landing page styles. Dark, mythic-tech. Black/gray/off-white with gold accents. Mobile-first, no framework. Self-hosted fonts via @font-face so we don't depend on Google's CDN at runtime. */ :root { --bg: #0a0a0c; --bg-2: #111114; --bg-3: #16161b; --ink: #ece8df; --ink-dim: #8a857b; --line: #1a1a20; --line-2: #2a2a30; --gold: #c8a14a; --gold-soft: #b08d3d; --gold-dim: #6f5a26; --err: #c44b4b; --ok: #6fae6f; --serif: 'Cormorant Garamond', 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --mono: 'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace; } /* ---- Self-hosted-ish fonts (system stack with web fallback via @import in ) ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } /* Ensure the HTML5 `hidden` attribute wins over explicit `display` rules (e.g. the countdown chip is `inline-flex`, which otherwise overrides `hidden`). */ [hidden] { display: none !important; } body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } ::selection { background: rgba(200,161,74,0.25); color: var(--ink); } /* ---- Background layers --------------------------------------------------- */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.06; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px); } .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.7) 100%); } /* ---- Door grid backdrop behind hero ------------------------------------- */ .hero-doors { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.18; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } .hero-doors .door-cell { position: absolute; width: 4.5rem; height: 6.4rem; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%); border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; animation: drift 14s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset; } .hero-doors .door-cell::before { content: ''; position: absolute; left: 8%; right: 8%; top: 32%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .hero-doors .door-cell .num { font-family: var(--mono); font-size: 8px; letter-spacing: 0.3em; color: var(--ink-dim); } .hero-doors .door-cell .glyph { font-size: 14px; line-height: 1; color: var(--gold); font-family: var(--serif); } @keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(0.4deg); } } /* ---- Page layout --------------------------------------------------------- */ main#page { position: relative; z-index: 1; max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } /* ---- Hero ---------------------------------------------------------------- */ .hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 0 6rem; position: relative; } .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 1.25rem; } .title { font-family: var(--serif); font-size: clamp(3.6rem, 11vw, 7.5rem); letter-spacing: 0.04em; font-weight: 500; margin: 0 0 0.4rem; position: relative; display: inline-block; background: linear-gradient(180deg, #f4ecd8 0%, #c8a14a 60%, #8b6e2c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(200,161,74,0.18); } .title::after { content: ''; display: block; width: 0; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: drawLine 2.6s ease forwards; animation-delay: 0.4s; } @keyframes drawLine { to { width: min(22rem, 70%); } } .subtitle { font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem, 2vw, 1.25rem); letter-spacing: 0.32em; color: var(--ink-dim); margin: 1.4rem 0 2.5rem; text-transform: uppercase; font-weight: 400; } .lede { max-width: 32rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; color: var(--ink); margin: 0 auto 2.5rem; font-style: italic; font-weight: 400; } .lede .accent { color: var(--gold); font-style: normal; font-weight: 500; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* Countdown chip */ .countdown-chip { display: inline-flex; align-items: center; gap: 10px; margin: 1.75rem 0 0; padding: 8px 14px 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); background: rgba(20,20,24,0.6); backdrop-filter: blur(6px); } .countdown-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse-dot 1.6s ease-in-out infinite; } .countdown-chip .time { color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.18em; } @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* Marquee */ .marquee { margin: 2.5rem 0 0; width: 100%; max-width: 56rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .marquee-track { display: inline-flex; white-space: nowrap; padding: 14px 0; gap: 3rem; animation: marquee 48s linear infinite; font-family: var(--mono); font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-dim); } .marquee-track .sep { color: var(--gold); opacity: 0.8; } .marquee-track .em { color: var(--gold); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Hero taglines */ .hero-tagline { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: 0.5em; color: var(--gold); text-transform: uppercase; margin: 2rem 0 0.5rem; text-align: center; text-shadow: 0 0 24px rgba(200,161,74,0.2); } .hero-sub { font-size: 0.95rem; letter-spacing: 0.25em; color: var(--ink-dim); font-style: italic; margin: 0 0 1.5rem; text-align: center; } /* ---- Buttons ------------------------------------------------------------- */ .btn { background: transparent; color: var(--ink); border: 1px solid var(--line-2); padding: 14px 28px; font: inherit; letter-spacing: 0.25em; font-size: 12px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 220ms cubic-bezier(0.2,0.8,0.2,1); position: relative; overflow: hidden; font-family: var(--mono); } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(200,161,74,0.18), transparent); transition: left 700ms ease; } .btn:hover { border-color: var(--gold); color: var(--gold); } .btn:hover::before { left: 100%; } .btn-primary { border-color: var(--gold); color: var(--gold); } .btn-primary:hover { background: rgba(200,161,74,0.06); box-shadow: 0 0 24px rgba(200,161,74,0.12); } .btn-ghost { font-size: 11px; padding: 10px 18px; } /* ---- Section bands ------------------------------------------------------ */ .band { padding: 5rem 0; border-top: 1px solid var(--line); position: relative; } .band-inner { max-width: 48rem; margin: 0 auto; position: relative; } .section-glyph { position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 14px; font-family: var(--serif); font-size: 1.2rem; color: var(--gold); letter-spacing: 0.5em; } .band h3 { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 500; letter-spacing: 0.02em; margin: 0 0 1.5rem; } .band p { margin: 0 0 1rem; color: var(--ink); } .band em { color: var(--gold); font-style: normal; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2,0.8,0.2,1); } .reveal.in { opacity: 1; transform: translateY(0); } /* ---- Pull quote --------------------------------------------------------- */ .pullquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.55; color: var(--ink); border-left: 2px solid var(--gold); padding: 1rem 0 1rem 1.5rem; margin: 2rem 0; position: relative; } .pullquote::before { content: '"'; position: absolute; left: -0.1rem; top: -1.5rem; font-size: 4rem; color: var(--gold); opacity: 0.4; font-family: var(--serif); line-height: 1; } /* ---- Mint grid ---------------------------------------------------------- */ .mint-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2rem; } .mint-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(20,20,24,0.5)); transition: border-color 240ms ease, transform 240ms ease; } .mint-grid > div:hover { border-color: var(--gold-dim); transform: translateY(-2px); } .mint-grid .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-dim); } .mint-grid .v { font-size: 1.05rem; color: var(--ink); font-family: var(--serif); } /* File 4,321 — the unfinished card */ .file-card { margin: 2rem auto; max-width: 26rem; position: relative; border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #161616 0%, #0a0a0c 100%); aspect-ratio: 5 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; overflow: hidden; } .file-card::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; } .file-card::after { content: ''; position: absolute; left: 12%; right: 12%; top: 24%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .file-card .fc-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.4em; color: var(--ink-dim); text-transform: uppercase; } .file-card .fc-num { font-family: var(--serif); font-size: clamp(3.5rem, 9vw, 5rem); color: var(--gold); letter-spacing: 0.04em; font-weight: 500; text-shadow: 0 0 18px rgba(200,161,74,0.18); } .file-card .fc-state { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); letter-spacing: 0.04em; padding: 0 1.5rem; } .file-card .fc-foot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--gold-dim); text-transform: uppercase; } /* Contract copy block */ .contract-block { margin: 1.5rem 0 0; padding: 12px 16px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-2); } .contract-block .cb-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-dim); } .contract-block .cb-addr { font-family: var(--mono); font-size: 0.85rem; color: var(--ink); letter-spacing: 0.04em; flex: 1; text-align: left; } .contract-block button { background: transparent; border: 1px solid var(--line-2); color: var(--ink-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 6px 12px; cursor: pointer; transition: all 180ms ease; } .contract-block button:hover { border-color: var(--gold); color: var(--gold); } .contract-block button.copied { color: var(--ok); border-color: var(--ok); } /* ---- Roadmap ------------------------------------------------------------ */ .phases { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.5rem; } .phases li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.25rem; align-items: baseline; padding: 16px 18px; border: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(20,20,24,0.5)); transition: border-color 240ms ease; } .phases li:hover { border-color: var(--gold-dim); } .phase-num { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; font-weight: 500; } .phases h4 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.04em; font-family: var(--serif); } .phases p { margin: 0; } /* ---- Lore count recap --------------------------------------------------- */ .lore-count { margin: 2.5rem auto 0; padding: 1.75rem 1rem; border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); text-align: center; font-family: var(--serif); font-size: 1.15rem; line-height: 2; color: var(--ink); letter-spacing: 0.04em; max-width: 32rem; position: relative; } .lore-count::before, .lore-count::after { content: '—'; position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 12px; color: var(--gold); font-size: 1rem; letter-spacing: 0.4em; } .lore-count::after { content: '—'; top: auto; bottom: -0.85rem; } .lore-count .em { color: var(--gold); } /* ---- Footer ------------------------------------------------------------- */ .muted { color: var(--ink-dim); } .small { font-size: 0.85rem; } .foot { padding: 4rem 0 5rem; border-top: 1px solid var(--line); text-align: center; display: grid; gap: 1.5rem; justify-items: center; } .foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); } .foot a:hover { color: var(--gold); border-color: var(--gold); } .foot-rule { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 18rem; color: var(--gold); } .foot-rule .rule-line { flex: 1; height: 1px; background: var(--line-2); } .foot-rule .rule-mark { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.3em; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; } .foot-tagline { font-family: var(--serif); font-style: italic; color: var(--ink-dim); font-size: 0.95rem; letter-spacing: 0.04em; max-width: 26rem; margin: 0; } /* 𝕏 link */ .x-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; padding: 10px 16px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: all 220ms ease; } .x-link:hover { border-color: var(--gold); color: var(--gold); } .x-link .x-mark { font-size: 14px; opacity: 0.85; } .x-link .x-handle { font-weight: 500; } .x-link-square { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; transition: all 220ms ease; } .x-link-square:hover { border-color: var(--gold); color: var(--gold); } .x-link-square .x-mark { font-size: 18px; opacity: 0.9; } .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 0.5rem 0 1.25rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; } .foot-nav a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color 220ms ease, border-color 220ms ease; } .foot-nav a:hover { color: var(--gold); border-color: var(--gold); } /* ---- Back-to-top --------------------------------------------------------- */ .back-to-top { position: fixed; right: 22px; bottom: 22px; width: 42px; height: 42px; border: 1px solid var(--line-2); background: rgba(20,20,24,0.7); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 280ms ease, border-color 220ms ease, color 220ms ease; backdrop-filter: blur(6px); } .back-to-top.show { opacity: 1; pointer-events: auto; } .back-to-top:hover { border-color: var(--gold); color: var(--gold); } .back-to-top .glyph { font-family: var(--serif); font-size: 18px; } /* ---- Leaderboard (live, on landing or /leaderboard) -------------------- */ .lb-h { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.5rem; font-weight: 500; } .lb-list { list-style: none; padding: 0; margin: 0.5rem 0 0; } .lb-row { display: grid; grid-template-columns: 3.5rem 1fr 3rem auto auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; position: relative; transition: background 200ms ease; } .lb-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: center; transition: transform 220ms ease; } .lb-row:hover { background: rgba(200,161,74,0.04); } .lb-row:hover::before { transform: scaleY(1); } .lb-row.survivor { color: var(--ink); } .lb-row.unmade { opacity: 0.72; } .lb-row .lb-rank { color: var(--ink-dim); } .lb-row .lb-rank.top { color: var(--gold); } .lb-row .lb-score { color: var(--gold); } .lb-row .lb-who { color: var(--ink); display: flex; flex-direction: column; gap: 1px; font-family: var(--serif); } .lb-row .lb-x { color: var(--ink-dim); font-size: 0.7rem; letter-spacing: 0.04em; font-family: var(--mono); } .lb-row .lb-runs { color: var(--ink-dim); font-size: 0.7rem; } .lb-row .pill { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; padding: 2px 6px; border: 1px solid var(--line-2); color: var(--ink-dim); white-space: nowrap; } .lb-row .pill.survivor { color: var(--gold); border-color: var(--gold); } .lb-boundary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: center; list-style: none; padding: 0.6rem 0.5rem; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: linear-gradient(90deg, transparent, rgba(200,161,74,0.06), transparent); position: relative; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.4em; color: var(--gold); animation: linePulse 3s ease-in-out infinite; } @keyframes linePulse { 0%, 100% { background: linear-gradient(90deg, transparent, rgba(200,161,74,0.06), transparent); } 50% { background: linear-gradient(90deg, transparent, rgba(200,161,74,0.14), transparent); } } .lb-boundary::before { content: '—— THE LINE ——'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; letter-spacing: 0.4em; color: var(--gold); background: var(--bg); padding: 0 8px; } /* Skeleton loader */ .lb-skel { display: grid; grid-template-columns: 3.5rem 1fr 3rem auto auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); } .lb-skel .sk { height: 12px; background: linear-gradient(90deg, var(--line), var(--line-2), var(--line)); background-size: 200% 100%; animation: skel 1.4s linear infinite; } @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* /leaderboard dedicated page */ .lb-page { max-width: 56rem; padding-top: 5rem; } .lb-header { text-align: center; margin-bottom: 3.5rem; } .lb-title { font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: 0.04em; font-weight: 500; margin: 0.25rem 0 1.25rem; color: var(--ink); background: linear-gradient(180deg, #f4ecd8 0%, #c8a14a 60%, #8b6e2c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px rgba(200,161,74,0.14); } .lb-sub { max-width: 36rem; margin: 0 auto 2rem; font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; color: var(--ink); font-style: italic; } .lb-nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .lb-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2rem 0 2.5rem; margin-bottom: 3rem; position: relative; } .lb-toolbar { position: sticky; top: 0; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; padding: 14px 16px; background: rgba(10,10,12,0.9); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 2px; z-index: 5; } .lb-toolbar .lb-status { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; } .lb-toolbar .cd { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; color: var(--ink-dim); text-transform: uppercase; } .lb-toolbar .cd .v { color: var(--gold); font-variant-numeric: tabular-nums; } .lb-foot { text-align: center; margin-top: 1.5rem; font-style: italic; color: var(--ink-dim); font-family: var(--serif); } .foot--inline { border-top: none; padding-top: 0; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 640px) { .hero { min-height: 80vh; padding: 3rem 0 4rem; } .band { padding: 3.5rem 0; } .phases li { grid-template-columns: 2.5rem 1fr; gap: 0.75rem; padding: 12px; } .phase-num { font-size: 1.6rem; } .lb-row { grid-template-columns: 2.75rem 1fr 2.5rem auto auto; font-size: 0.78rem; gap: 0.5rem; padding: 0.55rem 0.5rem; } .lb-row .lb-x { display: none; } .lb-row .lb-pill .pill { font-size: 0.5rem; padding: 1px 4px; } .marquee-track { font-size: 10px; letter-spacing: 0.3em; gap: 2rem; } .countdown-chip { font-size: 10px; padding: 6px 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ====================================================================== VISUAL UPGRADE LAYER — aurora glow, starfield, glass panels, richer CTAs (appended; overrides where selectors collide) ====================================================================== */ /* ---- Aurora nebula backdrop ---- */ .aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(38% 30% at 22% 18%, rgba(200,161,74,0.10), transparent 70%), radial-gradient(30% 26% at 80% 12%, rgba(120,90,200,0.07), transparent 70%), radial-gradient(34% 30% at 68% 78%, rgba(200,161,74,0.06), transparent 70%), radial-gradient(26% 24% at 14% 72%, rgba(70,110,160,0.06), transparent 70%); filter: blur(46px); animation: auroraShift 26s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 50% { transform: translate3d(2%, 2%, 0) scale(1.05); } 100% { transform: translate3d(-1%, 1%, 0) scale(1); } } /* ---- Starfield over the whole page ---- */ .grain::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 22%, rgba(236,232,223,0.5), transparent 55%), radial-gradient(1px 1px at 68% 8%, rgba(236,232,223,0.4), transparent 55%), radial-gradient(1.5px 1.5px at 84% 44%, rgba(200,161,74,0.55), transparent 55%), radial-gradient(1px 1px at 34% 62%, rgba(236,232,223,0.35), transparent 55%), radial-gradient(1px 1px at 52% 34%, rgba(236,232,223,0.45), transparent 55%), radial-gradient(1.5px 1.5px at 8% 84%, rgba(200,161,74,0.4), transparent 55%), radial-gradient(1px 1px at 92% 78%, rgba(236,232,223,0.4), transparent 55%), radial-gradient(1px 1px at 44% 92%, rgba(236,232,223,0.3), transparent 55%); animation: twinkle 7s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: 0.4; } to { opacity: 1; } } /* ---- Hero title: animated shimmer sweep ---- */ .title { background: linear-gradient(100deg, #f4ecd8 0%, #c8a14a 35%, #fff6df 50%, #c8a14a 65%, #8b6e2c 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s ease-in-out infinite; text-shadow: none; filter: drop-shadow(0 0 34px rgba(200,161,74,0.22)); } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- Primary button: glow pulse + shine sweep ---- */ .btn-primary { border-color: var(--gold); color: var(--gold); background: rgba(200,161,74,0.05); animation: ctaGlow 3.2s ease-in-out infinite; } @keyframes ctaGlow { 0%, 100% { box-shadow: 0 0 14px rgba(200,161,74,0.10), inset 0 0 10px rgba(200,161,74,0.04); } 50% { box-shadow: 0 0 30px rgba(200,161,74,0.28), inset 0 0 16px rgba(200,161,74,0.09); } } .btn-primary:hover { background: rgba(200,161,74,0.12); } /* ---- Glass panels on cards & grids ---- */ .mint-grid > div, .phases li, .contract-block, .countdown-chip { background: rgba(22,22,27,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line-2); } .mint-grid > div:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 18px rgba(200,161,74,0.08); } .phases li:hover { border-color: var(--gold); box-shadow: 0 6px 26px rgba(0,0,0,0.45); } /* ---- File card: breathing glow + floating ---- */ .file-card { animation: cardFloat 9s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(200,161,74,0.06), 0 0 46px rgba(200,161,74,0.07); } @keyframes cardFloat { 0%, 100% { transform: translateY(0) rotate(-0.3deg); box-shadow: 0 0 46px rgba(200,161,74,0.05); } 50% { transform: translateY(-8px) rotate(0.3deg); box-shadow: 0 0 64px rgba(200,161,74,0.13); } } /* ---- Door cells: brighter, more alive ---- */ .hero-doors { opacity: 0.26; } .hero-doors .door-cell .glyph { text-shadow: 0 0 12px rgba(200,161,74,0.7); } /* ---- Section glyphs glow ---- */ .section-glyph { text-shadow: 0 0 16px rgba(200,161,74,0.5); } /* ---- Marquee separators glow ---- */ .marquee-track .sep { text-shadow: 0 0 8px rgba(200,161,74,0.6); } /* ---- Countdown chip: subtle border shimmer ---- */ .countdown-chip { border-color: rgba(200,161,74,0.35); } @media (prefers-reduced-motion: reduce) { .aurora, .grain::after, .title, .btn-primary, .file-card { animation: none !important; } } /* ====================================================================== FX LAYER 2 — cursor, typewriter, tilt, hero door, sound toggle, rank chip ====================================================================== */ /* ---- Custom cursor ---- */ body.fx-cursor-on, body.fx-cursor-on a, body.fx-cursor-on button { cursor: none; } .fx-cursor-dot { position: fixed; left: -10px; top: -10px; z-index: 9999; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); pointer-events: none; box-shadow: 0 0 8px rgba(200,161,74,0.8); } .fx-cursor-ring { position: fixed; left: -10px; top: -10px; z-index: 9999; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(200,161,74,0.5); pointer-events: none; transition: width 200ms ease, height 200ms ease, border-color 200ms ease; } .fx-cursor-ring.big { width: 52px; height: 52px; border-color: var(--gold); box-shadow: 0 0 14px rgba(200,161,74,0.25); } /* ---- Typewriter caret ---- */ .fx-caret { display: inline-block; width: 1px; height: 1.1em; background: var(--gold); margin-left: 2px; vertical-align: -0.15em; animation: caretBlink 0.9s steps(1) infinite; } @keyframes caretBlink { 50% { opacity: 0; } } /* ---- The Last Door (hero centerpiece) ---- */ #fx-door { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%); width: 120px; height: 190px; z-index: -1; pointer-events: auto; opacity: 0.55; } .fx-door-frame { position: absolute; inset: 0; border: 1px solid var(--gold-dim); background: #060607; box-shadow: 0 0 40px rgba(200,161,74,0.12), inset 0 0 24px rgba(0,0,0,0.9); overflow: hidden; } .fx-door-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(244,236,216,0.9), rgba(200,161,74,0.35) 45%, transparent 75%); opacity: calc(var(--open, 0) * 0.9); filter: blur(2px); transition: opacity 120ms linear; } .fx-door-panel { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(180deg, #17171c 0%, #0b0b0e 100%); border: 1px solid var(--line-2); transition: transform 300ms cubic-bezier(0.2,0.8,0.2,1); } .fx-door-panel.left { left: 0; border-right: 1px solid var(--gold-dim); transform-origin: left; } .fx-door-panel.right { right: 0; border-left: 1px solid var(--gold-dim); transform-origin: right; } /* --open drives the door panels apart; hover "peek" adds a nudge */ .fx-door-panel.left { transform: perspective(900px) rotateY(calc(var(--open, 0) * -62deg + 0deg)); } .fx-door-panel.right { transform: perspective(900px) rotateY(calc(var(--open, 0) * 62deg + 0deg)); } #fx-door.peek .fx-door-panel.left { transform: perspective(900px) rotateY(-26deg); } #fx-door.peek .fx-door-panel.right { transform: perspective(900px) rotateY(26deg); } .fx-door-glyph { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 20px; color: var(--gold); text-shadow: 0 0 14px rgba(200,161,74,0.8); opacity: calc(0.25 + var(--open, 0) * 0.75); z-index: 3; } @media (max-width: 640px) { #fx-door { width: 110px; height: 175px; opacity: 0.65; } } /* ---- Sound toggle ---- */ #fx-sound { position: fixed; left: 22px; bottom: 22px; width: 42px; height: 42px; border: 1px solid var(--line-2); background: rgba(20,20,24,0.7); color: var(--ink); font-size: 16px; cursor: pointer; z-index: 10; backdrop-filter: blur(6px); transition: border-color 220ms ease, color 220ms ease; } #fx-sound:hover, #fx-sound.on { border-color: var(--gold); color: var(--gold); } #fx-sound.on { box-shadow: 0 0 14px rgba(200,161,74,0.3); } /* ---- Last-run rank chip ---- */ .fx-last-rank { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.25rem; padding: 8px 16px; border: 1px solid var(--gold-dim); background: rgba(20,20,24,0.6); backdrop-filter: blur(6px); font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; transition: all 220ms ease; animation: chipIn 900ms cubic-bezier(0.2,0.8,0.2,1); } .fx-last-rank b { color: var(--gold); font-weight: 500; } .fx-last-rank:hover { border-color: var(--gold); color: var(--ink); } @keyframes chipIn { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .fx-caret, .fx-last-rank { animation: none !important; } } /* ====================================================================== MOBILE FIXES — door grid scatter, marquee nowrap, hero spacing ====================================================================== */ /* Marquee: force single-line scroll (was wrapping on narrow screens) */ .marquee-track { flex-wrap: nowrap; } .marquee-track > span { flex: 0 0 auto; white-space: nowrap; } /* Door grid: cells were stacking near the center line on small screens. Spread them across the full width and shrink. */ @media (max-width: 640px) { .hero-doors { opacity: 0.14; } .hero-doors .door-cell { width: 3rem; height: 4.3rem; } .hero-doors .door-cell .glyph { font-size: 11px; } /* Tighter hero so the fold shows CTAs sooner */ .hero { min-height: auto; padding: 5.5rem 0 3.5rem; } .lede { margin-bottom: 2rem; } /* Title glow can clip on small widths — soften */ .title { filter: drop-shadow(0 0 18px rgba(200,161,74,0.15)); } } /* Very narrow: drop the floating door grid entirely — the centerpiece door and aurora carry the look; scattered cells just become noise. */ @media (max-width: 380px) { .hero-doors { display: none; } } /* ====================================================================== LEADERBOARD: YOU row + empty state (v4) ====================================================================== */ /* YOU highlight — the viewer's own run gets a gold sheen + persistent bar */ .lb-row.you { background: linear-gradient(90deg, rgba(200,161,74,0.10), rgba(200,161,74,0.02) 60%, transparent); border-color: var(--gold-dim); } .lb-row.you::before { background: var(--gold); transform: scaleY(1); box-shadow: 0 0 8px rgba(200,161,74,0.5); } .lb-you-badge { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--gold); color: var(--gold); font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.25em; vertical-align: middle; } /* Empty-state card — replaces skeleton when no rows */ .lb-empty { list-style: none; display: grid; gap: 0.9rem; justify-items: center; padding: 3rem 1.5rem; border: 1px dashed var(--gold-dim); background: linear-gradient(180deg, rgba(20,20,24,0.4), transparent); text-align: center; border-radius: 2px; } .lb-empty-glyph { font-family: var(--serif); font-size: 2rem; color: var(--gold); text-shadow: 0 0 22px rgba(200,161,74,0.6); animation: pulse-dot 2.6s ease-in-out infinite; } .lb-empty-title { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--ink); margin: 0; } .lb-empty-sub { max-width: 28rem; color: var(--ink-dim); font-family: var(--serif); font-style: italic; font-size: 0.95rem; margin: 0 0 0.5rem; } /* ====================================================================== LIVE CHIP + MINI LEADERBOARD (v4) ====================================================================== */ /* Hero: N of 50 survivor slots claimed */ .hero-live { display: inline-flex; align-items: center; gap: 10px; margin: 1.25rem 0 0; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); background: rgba(20,20,24,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse-dot 1.6s ease-in-out infinite; } @media (max-width: 640px) { .hero-live { font-size: 9.5px; padding: 6px 12px; } } /* Mini-leaderboard band */ .mini-lb .mini-lb-sub { max-width: 34rem; } .mini-lb-list { margin: 1.5rem 0 0.75rem; padding: 0; border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); list-style: none; } .mini-lb-list .lb-row.mini { grid-template-columns: 3.25rem 1fr auto; gap: 0.75rem; padding: 0.85rem 0.85rem; font-size: 0.9rem; } .mini-lb-list .lb-row.mini + .lb-row.mini { border-top: 1px solid var(--line); } .mini-lb-list .lb-row.mini:last-child { border-bottom: none; } .mini-lb-list .lb-row.mini .lb-who { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.02em; } .mini-lb-list .lb-row.mini .lb-score { font-family: var(--mono); font-size: 0.95rem; } /* Medal-esque top-3 accent */ .lb-row.top-1 .lb-rank { color: #f0d179; text-shadow: 0 0 12px rgba(240,209,121,0.4); } .lb-row.top-2 .lb-rank { color: #d9dbe1; text-shadow: 0 0 10px rgba(217,219,225,0.3); } .lb-row.top-3 .lb-rank { color: #cd8848; text-shadow: 0 0 10px rgba(205,136,72,0.3); } .lb-row.top-1::before { background: linear-gradient(180deg, #f0d179, var(--gold)); transform: scaleY(1); } .lb-row.top-2::before { background: #d9dbe1; transform: scaleY(1); } .lb-row.top-3::before { background: #cd8848; transform: scaleY(1); } .mini-lb-status { text-align: center; margin: 0.5rem 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; } .mini-lb-status .mini-empty a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); text-decoration: none; } @media (max-width: 640px) { .mini-lb-list .lb-row.mini { grid-template-columns: 2.5rem 1fr auto; padding: 0.65rem 0.5rem; font-size: 0.8rem; } .mini-lb-list .lb-row.mini .lb-who { font-size: 0.9rem; } } /* ---- Mobile hardening pass 2 ---- */ html, body { overflow-x: clip; } .marquee { max-width: 100%; } @media (max-width: 640px) { /* Hide the hero centerpiece door on phones — it collides with the title. The scattered door grid + aurora carry the atmosphere instead. */ #fx-door { display: none; } /* Keep every band inside the viewport */ main#page { padding: 0 1.1rem; } .band-inner { max-width: 100%; } .lb-toolbar { padding: 12px 10px; } }