/* BUBO launch site — extends bubo-ds.css (tokens + base components). Registers: Stamp (touch), Tablet (read), Night Desk (verify). */ /* ---------- one amber ---------- */ /* The brand has one signature colour: --gold-500, the one the artwork already uses. --amber-500 is collapsed onto it (was #FAB606, ΔE 10 apart — a lost bet). */ :root { --amber-500:#F0AF2B; --amber-35:rgba(240,175,43,.35); --amber-glow:rgba(240,175,43,.12); } /* ---------- base ---------- */ ::selection { background:var(--amber-500); color:var(--umber-900); } body { font-family:var(--font-ui); overflow-x:hidden; } img { max-width:100%; height:auto; } main { display:block; } figure { margin:0; } /* UA default 1em 40px put every figure 80px inside its own grid column */ section { scroll-margin-top:72px; } .wrap { padding-top:0; } /* DS .wrap carries 96px for doc pages; sections own their rhythm here */ [hidden] { display:none !important; } /* measure: ch over-counts ~1.34× on this face (66ch delivered 87 chars) — cap in px instead */ .lead { max-width:640px; } .h2 { text-wrap:balance; } /* two-tone focus ring: amber-on-amber was 1.00:1 on every primary CTA */ :focus-visible { outline:2px solid var(--night-950) !important; outline-offset:2px; box-shadow:0 0 0 4px var(--cream-100); } /* anchor-buttons: on buttons the DS base a:hover link color would override the stamp text color on hover — pin it back. Same story for border-bottom-color: a:hover repaints the bottom edge gold — pin each class's own border color. */ a.btn-stamp:hover, a.btn-stamp.gold:hover { color:var(--umber-900); border-bottom-color:var(--umber-900); } a.btn-outline:hover { border-bottom-color:var(--cream-100); } a.btn-tablet:hover { border-bottom-color:var(--amber-500); } /* stamp buttons go flat: no offset shadow at rest/hover, no press slide (.small included — the DS re-declares the shadow on the size variant) */ .btn-stamp, .btn-stamp.small, .btn-stamp:active { box-shadow:none; } .btn-stamp:active { transform:translateY(1px); filter:brightness(.93); } /* press feedback without a shadow */ /* flex-center all buttons: .btn-stamp.small's min-height left text riding high, and inline-block baseline math sits ~1px low elsewhere */ .btn-stamp, .btn-outline, .btn-ghost, .btn-tablet { display:inline-flex; align-items:center; justify-content:center; } ::-webkit-scrollbar { width:12px; } ::-webkit-scrollbar-track { background:var(--night-950); } ::-webkit-scrollbar-thumb { background:var(--night-600); border-radius:6px; border:3px solid var(--night-950); } ::-webkit-scrollbar-thumb:hover { background:var(--night-line); } .skip-link { position:fixed; top:-60px; left:16px; z-index:200; background:var(--amber-500); color:var(--umber-900); font-weight:700; padding:12px 18px; border-radius:var(--r-pill); transition:top var(--base) var(--ease); border-bottom:none; } .skip-link:focus { top:12px; color:var(--umber-900); } .text-amber { color:var(--amber-500); } .text-cream { color:var(--cream-100); } .rule-gold { width:64px; height:1px; background:var(--gold-rule); margin:22px 0; } .section-head { max-width:760px; margin-bottom:56px; } .eyebrow { display:block; margin-bottom:16px; font-weight:500; } /* Cinzel 400 was silently resolving to 500 — choose it */ /* reveal on scroll — gated behind html.js so a dead script can never blank the page */ .rv { opacity:1; transform:none; } html.js .rv { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s); } html.js .rv.in { opacity:1; transform:none; } /* phase machine: [data-phase="prelaunch"|"countdown"|"live"] on , driven by CONFIG in site.js */ html[data-phase="prelaunch"] .only-live, html[data-phase="countdown"] .only-live { display:none !important; } html[data-phase="live"] .only-pre { display:none !important; } html[data-phase="prelaunch"] .days-cell { display:none; } html[data-phase="prelaunch"] .oracle-grid { grid-template-columns:repeat(2,1fr); } /* ---------- nav ---------- */ .nav { position:fixed; inset:0 0 auto; z-index:100; border-bottom:2px solid transparent; transition:background var(--base) var(--ease), border-color var(--base) var(--ease); } .nav.scrolled { background:rgba(21,1,40,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--night-600); } .nav-inner { max-width:1280px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:20px; } .nav-brand { order:1; display:flex; align-items:center; gap:11px; border-bottom:none; padding:5px 0; } .nav-brand img { display:block; } .nav-word { font-family:var(--font-display); font-weight:900; font-size:16px; letter-spacing:.18em; color:var(--cream-100); } .nav-links { order:2; display:flex; gap:6px; margin-left:auto; } .nav-links .navpill { border-color:transparent; padding:10px 14px; } .nav-right { order:3; display:flex; align-items:center; gap:12px; margin-left:8px; } .session-pill { display:none; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--mist-dim); border:2px solid var(--night-line); border-radius:var(--r-pill); padding:8px 13px; white-space:nowrap; } .session-pill.live { color:var(--up); border-color:var(--up-line); } .session-dot { width:7px; height:7px; border-radius:50%; background:var(--mist-dim); } .session-pill.live .session-dot { background:var(--up); animation:pulse 1.6s var(--ease) infinite; } @keyframes pulse { 50% { opacity:.25; } } @media (min-width:1000px) { .session-pill { display:flex; } } .menu-session { display:none; margin:6px 0 0; font-size:11px; letter-spacing:.12em; color:var(--mist-dim); text-align:center; } .nav-burger { order:4; display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:2px solid var(--night-line); border-radius:10px; padding:11px 10px; min-width:44px; min-height:44px; align-items:center; cursor:pointer; } .nav-burger span { display:block; width:20px; height:2px; background:var(--cream-100); transition:transform var(--base) var(--ease), opacity var(--base) var(--ease); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } @media (max-width:920px) { .nav-links { position:fixed; top:66px; left:12px; right:12px; display:none; flex-direction:column; gap:8px; background:var(--night-900); border:2px solid var(--night-line); border-radius:var(--r-card); padding:16px; box-shadow:var(--stamp); } .nav-links.open { display:flex; } .nav-links .navpill { text-align:center; padding:13px; } .nav-links .menu-session { display:block; } .nav-burger { display:flex; } .nav-buy { display:none; } } /* ---------- hero ---------- */ .hero-sec { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:120px 0 64px; } .hero-stars { position:absolute; inset:0; width:100%; height:100%; } .hero-glow { position:absolute; right:-10%; top:50%; width:min(62vw,860px); aspect-ratio:1; transform:translateY(-50%); background:radial-gradient(circle, var(--amber-glow) 0%, rgba(240,175,43,.045) 38%, transparent 68%); pointer-events:none; } .hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; width:100%; } .hero-chip { border-color:var(--amber-35); color:var(--gold-300); letter-spacing:.12em; } .hero-title { font-size:clamp(44px, 6.2vw, 74px); font-weight:900; line-height:1.02; color:var(--cream-100); margin:26px 0 24px; text-shadow:0 0 60px var(--amber-glow); text-wrap:balance; } .hero-title em { font-style:normal; color:var(--amber-500); } .hero-copy .lead { font-size:19px; } .hero-copy .lead strong { font-weight:700; } .hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:34px 0 22px; } .ca-row { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-bottom:22px; } .ca-chip { display:inline-flex; align-items:center; font-size:12.5px; color:var(--mist); background:var(--night-700); border:2px solid var(--night-line); border-radius:14px; padding:12px 16px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ca-chip.ready { color:var(--gold-300); border-color:var(--amber-35); } .countdown { display:flex; gap:10px; align-items:center; margin:0 0 22px; flex-wrap:wrap; } .cd-cell { display:flex; flex-direction:column; align-items:center; background:var(--night-900); border:2px solid var(--night-line); border-radius:12px; padding:10px 14px; min-width:64px; } .cd-cell b { font-size:22px; font-weight:700; color:var(--amber-500); font-style:normal; } .cd-cell i { font-size:9.5px; letter-spacing:.14em; color:var(--mist-dim); font-style:normal; margin-top:3px; } .cd-label { font-size:11px; letter-spacing:.14em; color:var(--mist-dim); } .cd-tba { display:inline-block; font-size:11.5px; letter-spacing:.14em; color:var(--mist-dim); border:2px dashed var(--night-line); border-radius:12px; padding:12px 18px; margin:0 0 22px; } .trust-strip { display:inline-block; font-size:12.5px; letter-spacing:.08em; color:var(--gold-300); border-bottom-color:var(--amber-35); } .trust-strip:hover { color:var(--gold-300); border-bottom-color:var(--gold-300); } .hero-stage { position:relative; display:flex; flex-direction:column; align-items:center; perspective:900px; } .owl-tilt { position:relative; width:min(100%, 470px); transform-style:preserve-3d; cursor:pointer; border-radius:24px; animation:owl-bob 5.2s ease-in-out infinite; } @keyframes owl-bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-12px); } } .owl-img { display:block; width:100%; height:auto; filter:drop-shadow(0 24px 50px rgba(0,0,0,.45)); } .owl-blink { position:absolute; inset:0; opacity:0; pointer-events:none; } /* cut, not crossfade — the 90ms fade left the mascot 25% translucent */ .owl-tilt.blinking .owl-blink { opacity:1; } .owl-tilt.blinking .owl-img-base { opacity:0; } /* blink/swivel frames replace, not overlay */ .owl-caption { margin-top:20px; font-size:11.5px; letter-spacing:.1em; color:var(--mist-dim); text-align:center; } /* the coin rides the owl container so it never detaches at any width; spin carries a mirrored back face so the far half-cycle no longer shows a flipped laurel */ .hero-coin-float { position:absolute; z-index:2; top:-30px; right:-10px; width:clamp(80px, 9vw, 132px); transform-style:preserve-3d; animation:coin-bob 4.6s ease-in-out infinite; } @keyframes coin-bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-14px); } } .hero-coin-spin { position:relative; width:100%; aspect-ratio:1; transform-style:preserve-3d; animation:coin-spin var(--coin-flip) infinite; } @keyframes coin-spin { from { transform:rotateY(0); } to { transform:rotateY(360deg); } } .hero-coin-face { position:absolute; inset:0; width:100%; height:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden; filter:drop-shadow(0 14px 28px rgba(0,0,0,.5)); } .hero-coin-back { transform:rotateY(180deg) scaleX(-1); } /* ---------- ticker ---------- */ .ticker { overflow:hidden; border-top:2px solid var(--night-line); border-bottom:2px solid var(--night-line); background:var(--night-925); } .ticker-track { display:flex; align-items:center; gap:34px; width:max-content; padding:13px 0; font-size:12.5px; letter-spacing:.08em; color:var(--mist-dim); white-space:nowrap; animation:ticker 42s linear infinite; } .ticker:hover .ticker-track { animation-play-state:paused; } .ticker-track i { color:var(--amber-500); font-style:normal; font-size:10px; } @keyframes ticker { to { transform:translateX(-50%); } } /* ---------- tablet sections (museum register) ---------- */ .tablet-section { background:var(--night-925); border-bottom:1px solid var(--gold-rule); padding:96px 0; } .tablet-section .h2 { font-weight:700; letter-spacing:.01em; } .lore-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; } .lore-grid .lead { margin-bottom:20px; } .lore-grid .btn-tablet { margin-top:14px; } .plate { border:1px solid var(--gold-rule); background:var(--night-925); min-width:0; } .plate-img { padding:34px; border-bottom:1px solid var(--gold-rule); overflow:hidden; background:radial-gradient(circle at 50% 46%, var(--amber-glow), transparent 62%); } .plate-img img { display:block; width:100%; animation:coin-slow 26s linear infinite; } @keyframes coin-slow { to { transform:rotate(360deg); } } .plate figcaption { padding:24px 26px 28px; display:flex; flex-direction:column; gap:8px; } .plate-name { font-size:19px; font-weight:700; color:var(--cream-100); } .plate-note { font-size:13.5px; line-height:1.6; color:var(--mist); } /* the record — timeline */ .record-section { background:var(--night-950); } .timeline { position:relative; max-width:980px; margin:0; padding:10px 0 0; } .tl-spine { position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--night-600); transform:translateX(-50%); } .tl-fill { width:100%; height:0%; background:linear-gradient(var(--gold-300), var(--amber-500)); box-shadow:0 0 12px rgba(240,175,43,.5); } .tl-entry { position:relative; width:50%; padding:0 52px 64px 0; } .tl-entry:nth-of-type(even) { margin-left:auto; padding:0 0 64px 52px; } .tl-dot { position:absolute; top:8px; right:-8px; width:14px; height:14px; border-radius:50%; background:var(--night-950); border:2px solid var(--gold-500); z-index:1; } .tl-entry:nth-of-type(even) .tl-dot { right:auto; left:-8px; } .tl-dot-coin { width:44px; height:44px; right:-22px; border:none; background:none; top:-4px; } .tl-entry:nth-of-type(even) .tl-dot-coin { left:-22px; } .tl-dot-coin img { display:block; animation:pulse-coin 2.2s var(--ease) infinite; } @keyframes pulse-coin { 50% { transform:scale(1.14); filter:drop-shadow(0 0 14px rgba(240,175,43,.65)); } } .tl-card { background:var(--night-925); border:1px solid var(--gold-rule); padding:28px 30px 30px; transition:border-color var(--base) var(--ease), background var(--base) var(--ease); } .tl-card:hover { border-color:var(--amber-500); background:var(--night-900); } .tl-year { display:block; font-size:32px; font-weight:900; color:var(--amber-500); line-height:1; } .tl-place { display:block; font-size:10.5px; letter-spacing:.14em; color:var(--mist-dim); margin:8px 0 14px; } .tl-card .h3 { margin-bottom:10px; } .tl-card p { font-size:14.5px; line-height:1.65; color:var(--mist); margin:0 0 12px; } .tl-verdict { color:var(--gold-300) !important; font-size:13px !important; margin-bottom:0 !important; padding-left:2ch; text-indent:-2ch; } /* wrapped lines hang clear of the > prompt */ .tl-now .tl-card { border:2px solid var(--amber-500); background:var(--night-900); box-shadow:0 0 40px rgba(240,175,43,.1); } .tl-more { margin-top:8px; display:flex; flex-direction:column; align-items:center; gap:14px; } .tl-more-note { font-size:12px; letter-spacing:.06em; color:var(--mist-dim); margin:0; text-align:center; } /* ---------- prophecy (gold field) ---------- */ .prophecy-section { background:linear-gradient(165deg, var(--gold-300) 0%, var(--gold-500) 52%, #DF9A10 100%); padding:96px 0; text-align:center; } .prophecy-wrap { display:flex; flex-direction:column; align-items:center; } .prophecy-section .eyebrow { color:var(--umber-900); } .prophecy-line { font-size:clamp(34px, 9.2vw, 88px); font-weight:900; line-height:1.06; color:var(--umber-900); margin:0; white-space:nowrap; } .prophecy-dark { color:var(--night-950); } .prophecy-sub { margin:30px auto 54px; text-align:center; color:rgba(61,35,2,.88); } /* night desk — one shared implementation for the oracle + covenant panels */ .oracle { width:100%; max-width:900px; border:2px solid var(--umber-900); border-radius:6px; overflow:hidden; text-align:left; } .oracle-bar, .desk-bar { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--amber-500); color:var(--umber-900); font-size:11.5px; font-weight:700; letter-spacing:.1em; padding:11px 18px; } .oracle-grid, .desk-grid, .market-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--night-line); } .oracle-stat, .desk-cell { background:var(--night-900); display:flex; flex-direction:column; } .oracle-stat { padding:24px 24px 22px; gap:9px; } .oracle-num { font-size:38px; font-weight:700; color:var(--cream-100); line-height:1; } .oracle-unit { font-size:14px; color:var(--mist-dim); margin-left:6px; } .oracle-note { font-size:12.5px; color:var(--mist-dim); } #oracle-num { color:var(--down); } /* ---------- stamp sections (market register) ---------- */ .stamp-section { background:var(--night-950); padding:96px 0; } /* sticker sheet: chat-optimised die-cut stickers were never meant for night cards — parchment is the medium */ .pack-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .pack-card { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--parchment); border:2px solid rgba(61,35,2,.28); border-radius:var(--r-card); padding:26px 18px 22px; cursor:pointer; text-align:center; font-family:var(--font-ui); transition:transform var(--tap) var(--ease), box-shadow var(--tap) var(--ease), border-color var(--base) var(--ease); } .pack-card:hover { transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--gold-500); border-color:var(--umber-900); } .pack-card:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--gold-500); } .pack-card img { width:min(76%,180px); transition:transform var(--base) var(--ease); } .pack-card:hover img { transform:scale(1.07) rotate(-2deg); } .pack-name { font-size:17px; font-weight:700; color:var(--umber-900); margin-top:12px; } .pack-note { font-size:11px; letter-spacing:.06em; color:#8A6A2A; } .pack-actions { margin-top:28px; display:flex; justify-content:center; } .pack-canon { margin-top:20px; font-size:12px; letter-spacing:.06em; color:var(--mist-dim); text-align:center; } /* night desk (covenant) */ .desk-section { background:var(--night-925); padding:96px 0; border-bottom:1px solid var(--gold-rule); } .desk { border:2px solid var(--amber-500); border-radius:6px; overflow:hidden; } .desk-cell { padding:20px 22px; gap:8px; } .desk-k { font-size:10.5px; letter-spacing:.14em; color:var(--mist-dim); } .desk-v { font-size:19px; font-weight:700; color:var(--cream-100); } .desk-up { color:var(--up); } /* the two best facts on the page are not warnings */ .desk-links { display:flex; flex-wrap:wrap; background:var(--night-925); border-bottom:2px solid var(--night-line); } .desk-links a { flex:1 1 auto; text-align:center; padding:14px 10px; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--gold-300); border-bottom:none; border-right:1px solid var(--night-600); } .desk-links a:last-child { border-right:none; } .desk-links a:hover { color:var(--umber-900); background:var(--amber-500); } .market-grid { border-top:2px solid var(--night-line); } .desk-foot { background:var(--night-925); border-top:2px solid var(--night-line); padding:22px 24px 24px; display:flex; flex-direction:column; gap:16px; } .ca-line { display:flex; gap:0; align-items:stretch; max-width:640px; } .ca-line .ca-chip { flex:1; border-radius:6px; } html[data-phase="live"] .ca-line .ca-chip { border-radius:6px 0 0 6px; border-right:none; } .desk-copy { background:var(--night-700); color:var(--amber-500); border:2px solid var(--night-line); border-radius:0 6px 6px 0; font-size:12px; font-weight:700; letter-spacing:.1em; padding:0 20px; min-height:46px; cursor:pointer; transition:background var(--base) var(--ease); } .desk-copy:hover:not(:disabled) { background:var(--night-line); } .desk-copy:disabled { opacity:.45; cursor:not-allowed; } .desk-note { font-size:13px; line-height:1.7; color:var(--mist-dim); margin:0; max-width:640px; } .desk-note b { color:var(--gold-300); } .chart-wrap { margin-top:36px; } .chart-wrap iframe { display:block; width:100%; height:460px; border:2px solid var(--amber-500); border-radius:6px; background:var(--night-900); } .chart-note { margin:10px 0 0; font-size:11px; letter-spacing:.12em; color:var(--mist-dim); text-align:right; } /* parliament */ .rank-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px; } .rank-card { padding:28px 26px; } .rank-card p { font-size:14.5px; line-height:1.65; color:var(--mist); margin:12px 0 0; } .rituals { max-width:720px; margin-bottom:44px; } .ritual-list { list-style:none; margin:18px 0 0; padding:0; } .ritual-list li { padding:13px 0; border-top:1px solid var(--night-600); font-size:15px; color:var(--mist); display:flex; gap:16px; align-items:baseline; } .ritual-list li:last-child { border-bottom:1px solid var(--night-600); } .ritual-list b { color:var(--amber-500); font-size:12px; letter-spacing:.1em; min-width:64px; } .social-cta { display:flex; gap:14px; flex-wrap:wrap; } /* ---------- nemesis (night interlude — the day-yellow was a fossil of the old keyed artwork) ---------- */ .nemesis-section { background:var(--night-950); border-top:1px solid var(--gold-rule); padding:96px 0; } .nemesis-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } .nemesis-line { font-size:clamp(26px, 3vw, 38px); font-weight:900; line-height:1.25; color:var(--gold-300); margin:30px 0; } .nemesis-img { display:flex; justify-content:center; } .nemesis-img img { width:min(100%, 420px); filter:drop-shadow(0 18px 40px rgba(0,0,0,.45)); } /* how to buy */ .buy-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; } .buy-steps { display:flex; flex-direction:column; gap:16px; } .buy-step { display:flex; gap:22px; padding:24px 26px; align-items:flex-start; } .buy-step p { font-size:14.5px; line-height:1.65; color:var(--mist); margin:8px 0 0; } .buy-step b { color:var(--gold-300); } .buy-num { flex:0 0 56px; width:56px; height:56px; display:grid; place-items:center; font-size:24px; font-weight:900; color:var(--umber-900); background:var(--amber-500); border:2px solid var(--umber-900); border-radius:50%; } .buy-cta { margin-top:8px; } .fee-note { font-size:12px; line-height:1.7; letter-spacing:.04em; color:var(--mist-dim); margin:4px 0 0; max-width:640px; } .owlet-panel { display:flex; flex-direction:column; gap:14px; } .speech { background:var(--night-900); border:2px solid var(--night-line); border-radius:var(--r-card); padding:20px 22px; position:relative; } .speech::after { content:""; position:absolute; bottom:-12px; left:56px; width:20px; height:20px; background:var(--night-900); border-right:2px solid var(--night-line); border-bottom:2px solid var(--night-line); transform:rotate(45deg); } .speech-q { font-size:15.5px; color:var(--cream-100); margin:0 0 8px; } .speech-a { font-size:13px; color:var(--gold-300); margin:0; } .owlet-frame { background:#27083E; border:2px solid var(--night-line); border-radius:var(--r-card); overflow:hidden; } .owlet-frame img { display:block; width:100%; } /* ---------- footer ---------- */ .footer { background:var(--night-925); border-top:1px solid var(--gold-rule); } .peek-strip { background:#24024A; height:clamp(140px, 21vw, 300px); overflow:hidden; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--gold-rule); } .peek-strip img { width:clamp(280px, 42vw, 600px); display:block; } /* height:width locked at 1:2 — one composition at every width */ .footer-grid { display:grid; grid-template-columns:1fr auto 1.2fr; gap:56px; padding-top:72px; padding-bottom:72px; } .footer-hoot { font-family:var(--font-data); font-size:40px; font-weight:700; color:var(--amber-500); margin:0 0 10px; } .footer-tag { font-size:14px; color:var(--mist); margin:0 0 26px; } .footer-social { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .footer-links { display:flex; flex-direction:column; gap:2px; } .footer-links .label { margin-bottom:8px; } .footer-links a { display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--mist); border-bottom:none; } .footer-links a:hover { color:var(--cream-100); } .footer-legal { display:flex; flex-direction:column; gap:18px; } .tetra-note { display:flex; gap:16px; align-items:center; background:var(--night-900); border:2px solid var(--night-line); border-radius:var(--r-card); padding:14px 18px; } .tetra-frame { flex:0 0 72px; width:72px; height:72px; border-radius:14px; overflow:hidden; background:#290C44; } .tetra-frame img { width:100%; height:100%; object-fit:cover; } .tetra-note p { font-size:13px; line-height:1.6; color:var(--mist); margin:0; } .tetra-note b { color:var(--cream-100); } .legal-label { padding-top:18px; border-top:1px solid var(--night-600); } .legal-text { font-size:12.5px; line-height:1.7; color:var(--mist); margin:0; max-width:640px; } .legal-mono { font-size:10.5px; letter-spacing:.08em; color:var(--mist-dim); margin:0; line-height:1.8; } .legal-domain { color:var(--gold-300); } /* ---------- sticky mobile action bar ---------- */ .action-bar { position:fixed; left:0; right:0; bottom:0; z-index:140; display:none; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(21,1,40,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:2px solid var(--night-600); transform:translateY(110%); transition:transform var(--base) var(--ease); } .action-bar.show { transform:translateY(0); } .action-bar .btn-stamp, .action-bar .btn-outline { flex:1; min-height:52px; white-space:nowrap; font-size:14px; padding-left:10px; padding-right:10px; } @media (max-width:920px) { .action-bar { display:flex; } body { padding-bottom:0; } /* bar overlays; toast clears it */ .toast { bottom:96px; } } /* ---------- toast ---------- */ .toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 80px); z-index:150; background:var(--amber-500); color:var(--umber-900); font-size:14px; font-weight:700; letter-spacing:.08em; padding:12px 26px; border-radius:var(--r-pill); border:2px solid var(--umber-900); opacity:0; transition:transform var(--base) var(--ease), opacity var(--base) var(--ease); pointer-events:none; } .toast.show { transform:translate(-50%, 0); opacity:1; } /* ---------- lightbox ---------- */ .lightbox { position:fixed; inset:0; z-index:160; background:var(--scrim); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:grid; place-items:center; padding:24px; } .lightbox[hidden] { display:none; } .lightbox-card { background:var(--night-900); border:2px solid var(--night-line); border-radius:var(--r-card); box-shadow:0 24px 70px rgba(0,0,0,.55); max-width:420px; width:100%; padding:28px; animation:lb-in var(--base) var(--ease); } @keyframes lb-in { from { transform:translateY(16px) scale(.97); opacity:0; } } .lightbox-card img { display:block; width:100%; } .lightbox-meta { display:flex; flex-direction:column; gap:16px; margin-top:18px; } .lightbox-meta .cz { font-size:20px; font-weight:700; color:var(--cream-100); } .lightbox-actions { display:flex; gap:10px; flex-wrap:wrap; } /* inside the modal the hard offset stamp-shadow reads as a stray bar — go flat */ .lightbox-actions .btn-stamp { box-shadow:none; } .lightbox-actions .btn-stamp:active { box-shadow:none; transform:translateY(1px); } /* ---------- responsive ---------- */ @media (max-width:1100px) { .hero-grid { grid-template-columns:1fr; gap:30px; } .hero-sec { padding-top:104px; min-height:0; } .hero-stage { order:-1; } .owl-tilt { width:min(72vw, 380px); } .owl-caption { font-size:10.5px; } /* stays visible — it's the only hint on touch devices */ .hero-coin-float { top:-16px; right:-4px; } .lore-grid, .nemesis-grid, .buy-grid { grid-template-columns:1fr; } .pack-grid { grid-template-columns:repeat(2,1fr); } .rank-grid, .desk-grid, .oracle-grid, .market-grid { grid-template-columns:repeat(2,1fr); } .owlet-panel { max-width:480px; } .footer-grid { grid-template-columns:1fr; gap:40px; } .tablet-section, .stamp-section, .desk-section, .prophecy-section, .nemesis-section { padding:72px 0; } .tl-spine { left:8px; } .tl-entry, .tl-entry:nth-of-type(even) { width:100%; padding:0 0 48px 40px; margin:0; } .tl-dot, .tl-entry:nth-of-type(even) .tl-dot { left:2px; right:auto; } .tl-dot-coin, .tl-entry:nth-of-type(even) .tl-dot-coin { left:-13px; right:auto; } .tl-card p { max-width:64ch; } } @media (max-width:720px) { .hero-title { font-size:clamp(34px, 11vw, 56px); } .pack-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .rank-grid, .desk-grid, .oracle-grid, .market-grid { grid-template-columns:1fr; } html[data-phase="prelaunch"] .oracle-grid { grid-template-columns:1fr; } .hero-cta .btn-stamp.large { width:100%; text-align:center; } .prophecy-line { font-size:clamp(34px, 9.2vw, 54px); } .buy-step { flex-direction:column; gap:14px; } .chart-wrap iframe { height:340px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html.js .rv { opacity:1; transform:none; transition:none; } .ticker-track, .owl-tilt, .hero-coin-float, .hero-coin-spin, .plate-img img, .tl-dot-coin img, .session-pill.live .session-dot { animation:none !important; } .owl-blink { display:none; } .hero-glow { display:none; } }