git / moonbite-network / moonbite-site/styles.css · raw
/* ============================================================ MoonBite ($MBITE) — styles.css Palette is strict. Every value derives from the 4 tokens. ============================================================ */:root{ --void:#07070B; --moonmilk:#F2EDE4; --cheddar:#FFC94A; --bite:#FF3D2E; --milk-dim: rgba(242,237,228,.55); --milk-faint: rgba(242,237,228,.12); --f-display:"Bricolage Grotesque", system-ui, sans-serif; --f-serif:"Instrument Serif", Georgia, serif; --f-mono:"Space Mono", ui-monospace, monospace; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px; --ease-expo:cubic-bezier(.16,1,.3,1);}*{box-sizing:border-box;margin:0;padding:0}html{scrollbar-color:var(--cheddar) var(--void)}html,body{background:var(--void);color:var(--moonmilk)}body{ font-family:var(--f-mono); overflow-x:hidden; -webkit-font-smoothing:antialiased; cursor:none; min-height:100vh;}@media (pointer:coarse){ body{cursor:auto} }::selection{background:var(--cheddar);color:var(--void)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--void)}::-webkit-scrollbar-thumb{background:var(--cheddar);border-radius:8px}a{color:inherit;text-decoration:none}em{font-style:normal}/* ---------- eyebrow labels ---------- */.eyebrow{ position:absolute; top:var(--s4); left:var(--s4); font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cheddar); z-index:6;}@media (max-width:640px){ .eyebrow{top:var(--s3); left:var(--s3); font-size:10px} }/* ---------- grain + vignette + stars ---------- */.grain{ position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.1s steps(4) infinite;}@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-6%,3%)} 50%{transform:translate(4%,-5%)} 75%{transform:translate(-3%,6%)} 100%{transform:translate(5%,-2%)}}.vignette{ position:fixed; inset:0; z-index:58; pointer-events:none; background:radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);}.stars{position:fixed; inset:0; z-index:1; pointer-events:none}.crumbs{position:fixed; inset:0; z-index:5; pointer-events:none}/* stacking model: stars(1) < word-back(2) < moon(3) < crumbs/content(5) < header(40) *//* ---------- custom cursor ---------- */.cursor{ position:fixed; top:0; left:0; width:40px; height:40px; z-index:70; transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:difference; transition:transform .12s var(--ease-expo);}.cursor svg{width:100%;height:100%;overflow:visible}.cursor .dot{fill:var(--moonmilk);transition:opacity .15s}.cursor .jaw{fill:none;stroke:var(--bite);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .15s, transform .18s var(--ease-expo)}.cursor.hot .dot{opacity:0}.cursor.hot .jaw{opacity:1}.cursor.hot .jaw-top{transform:translateY(3px)}.cursor.hot .jaw-bot{transform:translateY(-3px)}.cursor.bite .jaw-top{transform:translateY(7px)}.cursor.bite .jaw-bot{transform:translateY(-7px)}@media (pointer:coarse){ .cursor{display:none} }/* ---------- sound toggle ---------- */.sound-toggle{ position:fixed; bottom:var(--s3); right:var(--s3); z-index:65; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--milk-dim); background:transparent; border:1px solid var(--milk-faint); padding:8px 14px; border-radius:999px; cursor:none; transition:.2s;}.sound-toggle:hover,.sound-toggle:focus-visible{color:var(--cheddar);border-color:var(--cheddar)}@media (pointer:coarse){ .sound-toggle{cursor:pointer} }/* ================= PRELOADER ================= */.preloader{ position:fixed; inset:0; z-index:100; background:var(--void); display:grid; place-items:center; overflow:hidden;}.pre-curtain{position:absolute; top:0; width:50%; height:100%; background:var(--void); z-index:2}.pre-curtain-l{left:0} .pre-curtain-r{right:0}.pre-core{position:relative; z-index:1; display:grid; place-items:center; gap:var(--s3)}.pre-moon{filter:drop-shadow(0 0 40px rgba(255,201,74,.25))}.pre-count{font-family:var(--f-display); font-weight:800; font-size:clamp(40px,8vw,88px); line-height:1; color:var(--moonmilk)}.pre-pct{color:var(--cheddar); font-size:.5em; vertical-align:super; margin-left:4px}.pre-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.3em; color:var(--milk-dim); text-transform:uppercase}body.loaded .preloader{display:none}/* ================= FIXED MOON STAGE ================= */.moon-stage{ position:fixed; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none; opacity:0; /* revealed after preloader */}.moon-shaker{will-change:transform}.moon-svg{ width:min(78vmin,760px); height:min(78vmin,760px); filter:drop-shadow(0 0 60px rgba(255,201,74,.14));}.bite-edge{filter:drop-shadow(0 0 10px var(--bite))}/* ================= HEAD ================= */.site-head{ position:fixed; top:0; left:0; width:100%; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:var(--s3) var(--s4); mix-blend-mode:difference;}.brandmark{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:13px; letter-spacing:.2em}.head-nav{display:flex; gap:var(--s3); font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--milk-dim)}.head-nav a:hover{color:var(--cheddar)}@media (max-width:640px){ .head-nav{display:none} .site-head{padding:var(--s2) var(--s3)} }/* ================= HERO ================= */main{position:relative}section{position:relative}.hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--s6) var(--s3) var(--s4);}.hero-lockup{position:relative; width:100%}.wordmark{ font-family:var(--f-display); font-weight:800; line-height:.82; letter-spacing:-.03em; font-size:clamp(84px,16vw,320px); display:flex; flex-direction:column; align-items:center;}.wordmark .word{display:block}.word-back{color:var(--moonmilk); position:relative; z-index:2}.word-front{color:var(--moonmilk); position:relative; z-index:5; mix-blend-mode:normal}/* moon sits between the two words: raise front word above the fixed moon (z2) */.hero .word-front{z-index:5}.hero .word-back{opacity:.96}.hero-sub{ margin-top:var(--s3); font-family:var(--f-mono); font-size:clamp(11px,1.4vw,14px); letter-spacing:.28em; color:var(--cheddar); z-index:6; position:relative;}.scrollcue{ position:absolute; bottom:var(--s5); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; color:var(--milk-dim); z-index:6;}.scrollcue i{width:1px; height:34px; background:linear-gradient(var(--cheddar),transparent); animation:cue 1.8s var(--ease-expo) infinite}@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}/* marquee */.marquee{position:absolute; bottom:0; left:0; width:100%; overflow:hidden; border-top:1px solid var(--milk-faint); padding:14px 0; z-index:6; background:linear-gradient(transparent, rgba(7,7,11,.6))}.marquee-track{display:flex; width:max-content; will-change:transform}.marquee-track span{font-family:var(--f-display); font-weight:700; font-size:clamp(16px,2vw,26px); letter-spacing:.02em; color:var(--moonmilk); white-space:nowrap}/* ================= STORY ================= */.story{padding:var(--s7) 0; display:flex; flex-direction:column; gap:38vh; z-index:5}.beat{width:min(560px,84vw); padding:0 var(--s4)}.beat-l{align-self:flex-start; text-align:left}.beat-r{align-self:flex-end; text-align:right}.beat-line{font-family:var(--f-display); font-weight:800; line-height:.98; letter-spacing:-.02em; font-size:clamp(40px,6.4vw,104px)}.beat-line em{font-family:var(--f-serif); font-style:italic; color:var(--cheddar); font-weight:400}.beat-line .ln{display:block; overflow:hidden}/* ================= TOKENOMICS ================= */.tokenomics{min-height:100svh; display:grid; place-items:center; padding:var(--s7) var(--s3); z-index:5}.tk-inner{width:min(640px,92vw); margin-left:auto; margin-right:6vw}@media (max-width:900px){ .tk-inner{margin:0 auto} }.tk-title{font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(40px,6vw,78px); line-height:.95}.tk-note{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--milk-dim); margin-top:var(--s2); margin-bottom:var(--s4)}.tk-note em{color:var(--cheddar)}.tk-list{list-style:none; display:flex; flex-direction:column}.tk-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--milk-faint); opacity:.4; transition:opacity .5s var(--ease-expo);}.tk-row:last-child{border-bottom:1px solid var(--milk-faint)}.tk-row.lit{opacity:1}.tk-k{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--milk-dim)}.tk-row.lit .tk-k{color:var(--moonmilk)}.tk-v{font-family:var(--f-mono); font-weight:700; font-size:clamp(15px,2vw,20px); text-align:right; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:10px; justify-content:flex-end}.tk-row.lit .tk-v .count{color:var(--cheddar)}.tk-burn{color:var(--cheddar)}.ph{color:var(--bite); font-weight:400; font-size:.7em; opacity:.85}.tk-note-inline{color:var(--milk-dim); font-weight:400; font-size:.62em; letter-spacing:.04em; opacity:.85}.ico-flame,.ico-lock{vertical-align:middle}/* ================= ROADMAP ================= */.roadmap{position:relative; z-index:5}.rm-pin{height:100svh; overflow:hidden; display:flex; flex-direction:column}.rm-head{display:flex; align-items:center; justify-content:space-between; padding:var(--s5) var(--s4) var(--s3)}.rm-head .eyebrow{position:static}.rm-progress svg{display:block}.rm-track{display:flex; height:100%; align-items:center; will-change:transform; padding:0 8vw; gap:6vw}.rm-panel{ flex:0 0 auto; width:min(560px,80vw); padding:var(--s5); border:1px solid var(--milk-faint); border-radius:2px; background:linear-gradient(160deg, rgba(255,201,74,.03), transparent);}.rm-num{font-family:var(--f-mono); font-size:13px; letter-spacing:.3em; color:var(--cheddar)}.rm-name{font-family:var(--f-display); font-weight:800; font-size:clamp(48px,7vw,96px); letter-spacing:-.02em; line-height:.92; margin:var(--s2) 0 var(--s4)}.rm-panel ul{list-style:none; display:flex; flex-direction:column; gap:14px}.rm-panel li{font-family:var(--f-mono); font-size:14px; line-height:1.5; color:var(--milk-dim); padding-left:22px; position:relative}.rm-panel li::before{content:"◦"; position:absolute; left:0; color:var(--cheddar)}.rm-final .rm-name{color:var(--cheddar)}/* ================= BUY ================= */.buy{min-height:100svh; padding:var(--s7) var(--s4); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width:1100px; margin:0 auto; z-index:5}.buy-title{font-family:var(--f-display); font-weight:800; font-size:clamp(44px,7vw,96px); letter-spacing:-.02em; margin-bottom:var(--s5)}.steps{list-style:none; display:flex; flex-direction:column; gap:var(--s3); width:100%; margin-bottom:var(--s5)}.step{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--milk-faint); clip-path:inset(0 100% 0 0); }.step.in{clip-path:inset(0 0 0 0)}.step-n{font-family:var(--f-display); font-weight:800; font-size:clamp(40px,5vw,64px); color:transparent; -webkit-text-stroke:1.5px var(--milk-dim); text-stroke:1.5px var(--milk-dim); line-height:1}.step h3{font-family:var(--f-display); font-weight:700; font-size:clamp(22px,3vw,34px); letter-spacing:-.01em}.step p{font-family:var(--f-mono); font-size:13px; color:var(--milk-dim); margin-top:6px}.cta{ display:inline-block; font-family:var(--f-display); font-weight:800; font-size:clamp(20px,2.6vw,30px); letter-spacing:.02em; color:var(--void); background:var(--bite); padding:18px 42px; border-radius:2px; will-change:transform; transition:transform .25s var(--ease-expo), box-shadow .25s; box-shadow:0 0 0 rgba(255,61,46,0);}.cta:hover{box-shadow:0 12px 50px rgba(255,61,46,.4)}.contract{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap; border:1px solid var(--milk-faint); padding:12px 16px; border-radius:2px; max-width:100%}.contract-label{font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--cheddar)}.contract code{font-family:var(--f-mono); font-size:13px; color:var(--moonmilk); word-break:break-all}.contract code .nibbled{color:var(--bite)}.copy-btn{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--void); background:var(--cheddar); border:0; padding:8px 14px; border-radius:2px; cursor:none}.copy-btn.copied{background:var(--moonmilk)}@media (pointer:coarse){ .copy-btn{cursor:pointer} }/* ================= FOOTER ================= */.footer{padding:var(--s7) var(--s4) var(--s5); text-align:center; position:relative; z-index:5}.payoff{display:flex; flex-direction:column; align-items:center; gap:var(--s3); margin-bottom:var(--s6)}.crescent-logo{cursor:none}@media (pointer:coarse){ .crescent-logo{cursor:pointer} }.payoff-line{font-family:var(--f-display); font-weight:800; font-size:clamp(30px,5vw,64px); line-height:1; letter-spacing:-.02em}.payoff-line em{font-family:var(--f-serif); font-style:italic; color:var(--cheddar); font-weight:400}.mega-links{display:flex; flex-direction:column; border-top:1px solid var(--milk-faint)}.mega-links a{ display:flex; align-items:center; justify-content:space-between; font-family:var(--f-display); font-weight:800; font-size:clamp(34px,6vw,88px); letter-spacing:-.02em; padding:var(--s3) var(--s2); border-bottom:1px solid var(--milk-faint); color:var(--moonmilk); transition:color .3s, background .3s, transform .3s var(--ease-expo);}.mega-links a i{font-size:.5em; color:var(--cheddar)}.mega-links a:hover{background:var(--cheddar); color:var(--void); transform:skewX(-6deg)}.mega-links a:hover i{color:var(--void)}.legal{font-family:var(--f-mono); font-size:11px; line-height:1.7; color:var(--milk-dim); max-width:640px; margin:var(--s6) auto var(--s3)}.copy-year{font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--milk-faint)}/* focus-visible */:focus-visible{outline:2px solid var(--cheddar); outline-offset:4px; border-radius:2px}/* ============================================================ REDUCED MOTION — static, readable, final crescent ============================================================ */@media (prefers-reduced-motion:reduce){ .grain{animation:none} .scrollcue i{animation:none} .marquee-track{transform:none !important; flex-wrap:wrap; justify-content:center} .moon-stage{opacity:1} .sound-toggle{display:none} .tk-row{opacity:1} .step{clip-path:none} .rm-pin{height:auto; overflow:visible} .rm-track{flex-wrap:wrap; transform:none !important; height:auto; gap:var(--s4); padding:var(--s4) var(--s3)} .rm-panel{width:100%; max-width:560px; margin:0 auto} .preloader{display:none}}/* ============================================================ RESPONSIVE ============================================================ */@media (max-width:640px){ .story{gap:26vh; padding:var(--s6) 0} .beat{width:92vw; padding:0 var(--s3)} .buy{padding:var(--s6) var(--s3)} .step{gap:var(--s3)} .mega-links a{padding:var(--s3) var(--s1)} .site-head{mix-blend-mode:difference}}