/* Fuji. Border-led, hard offset shadows, flat, one deep green. Light and dark themes via . No colour literals in this file: every colour is a var() from tokens.css. */ :root{ color-scheme: light; --r-micro:4px; --r-std:8px; --ease-out:cubic-bezier(.2,.7,.2,1); } [data-theme="dark"]{color-scheme:dark} *{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px} body{ background:var(--paper); color:var(--ink); font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; font-size:17px; line-height:1.6; display:flex; flex-direction:column; min-height:100vh; -webkit-font-smoothing:antialiased; } .wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} code,pre,.mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .is-inert{cursor:default} .gap{color:var(--faint)} .gap-note{color:var(--faint)} time{font-variant-numeric:tabular-nums} /* ---------- header ---------- */ .site-head{background:var(--paper);position:relative;z-index:30} .nav{border-bottom:2px solid var(--edge);background:var(--paper)} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px} .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:-.03em} .brand:hover{text-decoration:none} .brand-logo{ width:38px;height:38px;flex:0 0 auto;display:block; border:2px solid var(--edge);border-radius:var(--r-micro); background:var(--paper);object-fit:contain; } .nav-links{display:flex;gap:20px;align-items:center} .nav-links a,.nav-links .nav-cta{color:var(--muted);font-size:15px;font-weight:500;min-height:44px;display:inline-flex;align-items:center} .nav-links a:hover{color:var(--ink);text-decoration:none} .nav-links .nav-cta{ color:var(--accent);font-weight:600; border:2px solid var(--accent);border-radius:var(--r-micro); padding:0 12px;min-height:44px;line-height:1.2; } .nav-links a.nav-cta:hover{background:var(--accent);color:var(--on-accent);text-decoration:none} .nav-links .nav-cta.is-inert{color:var(--faint);border-color:var(--line)} .nav-right{display:flex;align-items:center;gap:8px} /* ---------- theme toggle + social ---------- */ .theme-toggle,.social{ width:44px;height:44px;flex:0 0 auto; border:2px solid var(--edge);border-radius:var(--r-micro); background:var(--paper);color:var(--ink);cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background .12s ease,color .12s ease; } .theme-toggle:hover,.social:hover{background:var(--butter);text-decoration:none} .theme-toggle .ic{width:18px;height:18px;display:block} .social .ic{width:20px;height:20px;display:block} .theme-toggle .ic-sun{display:none} [data-theme="dark"] .theme-toggle .ic-sun{display:block} [data-theme="dark"] .theme-toggle .ic-moon{display:none} .social.is-inert{color:var(--faint);border-color:var(--line);cursor:default} .social.is-inert:hover{background:var(--paper)} .social:not(.is-inert):hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .logo-dark{display:none} [data-theme="dark"] .logo-light{display:none} [data-theme="dark"] .logo-dark{display:block} /* ---------- contract slot ---------- */ .ca-bar{background:var(--sand);border-bottom:2px solid var(--edge)} .ca-in{display:flex;align-items:center;gap:16px;min-height:72px;padding-top:10px;padding-bottom:10px} .ca-k{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);flex:0 0 auto} .ca-slot{ flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:14px; font-size:clamp(17px,2.4vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.25; color:var(--ink);text-align:left; border:2px solid var(--edge);border-radius:var(--r-std);background:var(--paper);padding:10px 14px; } .ca{overflow-wrap:anywhere} button.ca-slot{cursor:pointer;font-family:'Geist Mono',ui-monospace,monospace;box-shadow:3px 3px 0 0 var(--shadow);transition:transform .1s ease,box-shadow .1s ease,background-color .12s ease} button.ca-slot:hover{background:var(--butter);transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--shadow)} button.ca-slot:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--shadow)} button.ca-slot:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ca-act{ flex:0 0 auto;font-family:'Geist Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; border:2px solid var(--edge);border-radius:var(--r-micro);padding:4px 10px;background:var(--accent);color:var(--on-accent);border-color:var(--accent); min-width:78px;text-align:center; } button.ca-slot.copied .ca-act{background:var(--ink);border-color:var(--ink);color:var(--paper)} .ca-slot.is-inert{color:var(--faint);border-style:dashed;border-color:var(--line);font-size:clamp(15px,2.2vw,20px)} .main{flex:1;padding-top:44px;padding-bottom:64px} /* ---------- ticker ---------- */ .ticker{border-bottom:2px solid var(--edge);background:var(--ticker-bg);overflow:hidden} .ticker-track{display:inline-flex;white-space:nowrap;animation:roll 60s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker-item{ display:inline-flex;align-items:center;gap:8px;padding:8px 16px; border-right:1px solid color-mix(in srgb,var(--ticker-ink) 14%,transparent);color:var(--ticker-ink); font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.04em; } .ti-sym{font-weight:700;letter-spacing:.12em;color:var(--ticker-ink)} .ti-price{color:var(--ticker-dim);font-variant-numeric:tabular-nums} .ti-note{color:var(--ticker-dim);letter-spacing:.08em} .ticker-item.ticker-brand{background:var(--accent-lift);border-right-color:transparent} .ticker-item.ticker-brand .ti-sym,.ticker-item.ticker-brand .ti-note{color:var(--on-accent)} /* ---------- hero ---------- */ .hero{display:flex;flex-direction:column;align-items:center;text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink);background:var(--sand); border:2px solid var(--edge);border-radius:var(--r-micro); padding:5px 12px;margin-bottom:8px; } h1{margin:0;font-size:clamp(40px,7.5vw,68px);line-height:1;font-weight:800;letter-spacing:-.05em} h1 .dot{color:var(--accent)} h2{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.03em} .lede{margin:20px auto 0;max-width:38em;font-size:17px;color:var(--muted)} .hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center} .section{margin-top:56px} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;text-align:left} .section-head .sub{font-size:14px;color:var(--muted)} /* ---------- buttons ---------- */ .btn{ font-family:inherit;font-size:16px;font-weight:600;line-height:1;cursor:pointer; border-radius:var(--r-micro);padding:0 22px;height:46px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap; border:2px solid var(--edge);background:var(--paper);color:var(--ink); transition:transform .1s ease,background-color .12s ease,box-shadow .1s ease; } .btn:hover{text-decoration:none} .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--edge);min-width:150px;box-shadow:3px 3px 0 0 var(--shadow);position:relative;overflow:hidden} a.btn-primary:hover,button.btn-primary:not([disabled]):hover{background:var(--accent-lift);transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--shadow)} a.btn-primary:active,button.btn-primary:not([disabled]):active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--shadow)} .btn-primary[disabled],.btn-primary.is-inert{background:var(--faint);border-color:var(--faint);color:var(--paper);cursor:not-allowed;transform:none;box-shadow:2px 2px 0 0 var(--line)} .btn-primary::after{ content:"";position:absolute;top:0;left:-130%;width:55%;height:100%; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--on-accent) 30%,transparent),transparent); transform:skewX(-18deg);transition:left .55s ease;pointer-events:none; } .btn-primary:not([disabled]):not(.is-inert):hover::after{left:150%} .btn-ghost{background:var(--surface);color:var(--ink);font-weight:500} .btn-ghost:hover{background:var(--butter)} .btn-lg{height:52px;font-size:17px;padding:0 30px} /* ---------- panels ---------- */ .panel{ position:relative;border:2px solid var(--edge);border-radius:var(--r-std);background:var(--surface); padding:24px;box-shadow:6px 6px 0 0 var(--shadow);text-align:left; } .panel-flat{box-shadow:none} .grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start} /* ---------- stats ---------- */ .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px;width:100%} .stat{border:2px solid var(--edge);border-radius:var(--r-std);padding:12px 10px;background:var(--paper);text-align:center} .stat .k{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .stat .k.sub{margin-top:2px} .stat .v{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums} .stat .gap-note{letter-spacing:.14em} /* ---------- notice ---------- */ .notice{border:2px solid var(--edge);border-radius:var(--r-std);padding:12px 14px;background:var(--sand);text-align:left;font-size:14px} .notice.warn{border-color:var(--accent)} /* ---------- steps ---------- */ .steps{counter-reset:s;list-style:none;padding:0;margin:0;text-align:left} .steps li{counter-increment:s;position:relative;padding:10px 0 10px 40px;border-bottom:1px dashed var(--line)} .steps li:last-child{border-bottom:0} .steps li::before{ content:counter(s);position:absolute;left:0;top:10px;width:26px;height:26px; border:2px solid var(--edge);border-radius:var(--r-micro);display:flex;align-items:center;justify-content:center; font-family:'Geist Mono',monospace;font-size:12px;font-weight:600; } .steps strong{font-size:15px} .steps p{margin:2px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5} /* ---------- collection ---------- */ .cta{text-align:center} .cta h2{margin-bottom:14px} .nft-grid{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:28px;align-items:center} .nft-stage{display:flex;flex-direction:column;align-items:center;gap:18px} .nft-art{ position:relative;width:100%;max-width:440px;aspect-ratio:1/1; border:2px solid var(--edge);border-radius:var(--r-std);overflow:hidden;background:var(--paper); box-shadow:6px 6px 0 0 var(--shadow); } .nft-layer{position:absolute;inset:0;width:100%;height:100%;padding:8%;object-fit:contain;user-select:none;pointer-events:none} [data-theme="dark"] .nft-layer.logo-dark{display:block} .nft-traits{display:flex;flex-direction:column;gap:0;min-width:0} .nft-trait{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px} .nft-trait:last-child{border-bottom:0} .nft-trait-k{color:var(--muted);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:3px;flex:0 0 auto} .nft-trait-v{font-weight:600;color:var(--ink);text-align:right;display:inline-flex;align-items:center;gap:8px} .sw{display:inline-block;width:14px;height:14px;border:2px solid var(--edge);border-radius:var(--r-micro)} .sw-ink{background:var(--ink)} .sw-accent{background:var(--accent)} .sw-sand{background:var(--sand)} /* ---------- footer ---------- */ .foot{border-top:2px solid var(--edge);background:var(--paper);margin-top:auto} .foot-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 0 8px;text-align:center} .foot-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:800;font-size:22px;letter-spacing:-.03em} .foot-brand:hover{text-decoration:none} .foot-brand .brand-logo{width:34px;height:34px} .foot-tag{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .foot-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .foot-links a{font-size:14px;font-weight:500;color:var(--muted);padding:0 6px;min-height:44px;display:inline-flex;align-items:center;position:relative;transition:color .15s ease} .foot-links a:hover{color:var(--accent);text-decoration:none} .foot-sep{color:var(--line);user-select:none} .foot-rule{width:64px;height:2px;background:var(--accent);margin:6px 0 0} .foot-legal{font-size:12px;color:var(--muted);text-align:center;max-width:56em;margin:0 auto;padding:0 24px 8px;line-height:1.65} .foot-legal p{margin:0 0 10px} .foot-legal strong{color:var(--ink);font-weight:600} .foot-copy{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--muted);text-align:center;padding:0 24px 26px} /* ---------- toast ---------- */ .toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100; background:var(--ink);color:var(--paper);font-size:14px;font-weight:500;padding:12px 20px; border:2px solid var(--edge);border-radius:var(--r-micro);box-shadow:3px 3px 0 0 var(--accent); max-width:92vw;text-align:center; } /* ---------- motion ---------- */ ::selection{background:var(--accent);color:var(--on-accent)} .nav-links a:not(.nav-cta){position:relative;transition:color .15s ease} .nav-links a:not(.nav-cta)::after{ content:"";position:absolute;left:0;bottom:6px;width:0;height:2px;background:var(--accent); transition:width .18s ease; } .nav-links a:not(.nav-cta):hover::after{width:100%} .foot-links a::after{content:"";position:absolute;left:6px;bottom:8px;width:0;height:2px;background:var(--accent);transition:width .18s ease} .foot-links a:hover::after{width:calc(100% - 12px)} .stat{transition:transform .15s ease,box-shadow .15s ease} .stat:hover{transform:translateY(-3px);box-shadow:3px 6px 0 0 var(--shadow)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 2.2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.22}} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .hero>*{animation:rise .55s var(--ease-out) both} .hero>*:nth-child(1){animation-delay:.02s} .hero>*:nth-child(2){animation-delay:.10s} .hero>*:nth-child(3){animation-delay:.18s} .hero>*:nth-child(4){animation-delay:.26s} .section-head h2{position:relative;padding-left:14px} .section-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:22px;background:var(--accent)} /* ---------- premium: rhythm, hierarchy, entrance, hover ---------- */ :root{--glow:color-mix(in srgb,var(--accent) 38%,transparent);--dur:.28s} h1{line-height:.98;letter-spacing:-.055em;text-wrap:balance} h2{line-height:1.15;letter-spacing:-.035em;text-wrap:balance} p,.lede,.notice,.steps p{text-wrap:pretty} .lede{line-height:1.55;max-width:36em} .hero-cta{margin-top:28px} .statrow{margin-top:32px} .section{margin-top:64px} .section-head{margin-bottom:20px} .steps li{padding-top:12px;padding-bottom:12px} .steps li::before{top:12px} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .hero>.statrow{animation:none} .statrow>.stat{animation:rise .55s var(--ease-out) both} .statrow>.stat:nth-child(1){animation-delay:.34s} .statrow>.stat:nth-child(2){animation-delay:.40s} .statrow>.stat:nth-child(3){animation-delay:.46s} .statrow>.stat:nth-child(4){animation-delay:.52s} .btn,.panel,.notice,.nft-art,.stat,.theme-toggle,.social{ transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color .15s ease,color .15s ease,border-color .15s ease; } .js-reveal [data-reveal],.js-reveal [data-reveal-group]>*{ opacity:0;transform:translateY(18px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out); transition-delay:var(--d,0s); } .js-reveal [data-reveal-group]>*{transition-delay:calc(var(--i,0) * 70ms)} .js-reveal [data-reveal].is-in,.js-reveal [data-reveal-group].is-in>*{opacity:1;transform:none} .js-reveal [data-reveal].is-done,.js-reveal [data-reveal-group].is-done>*{ transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color .15s ease,border-color .15s ease; transition-delay:0s; } @media (hover:hover){ .stat:hover{transform:translateY(-4px);box-shadow:3px 8px 0 0 var(--shadow),0 14px 28px -14px var(--glow)} .panel:hover,.notice:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px var(--glow)} .nft-art:hover{transform:translateY(-3px);box-shadow:6px 9px 0 0 var(--shadow),0 18px 36px -14px var(--glow)} a.btn-primary:hover,button.btn-primary:not([disabled]):hover{box-shadow:4px 4px 0 0 var(--shadow),0 10px 26px -8px var(--glow)} .btn-ghost:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px var(--glow)} button.ca-slot:hover{box-shadow:4px 4px 0 0 var(--shadow),0 12px 28px -12px var(--glow)} .theme-toggle:hover,.social:not(.is-inert):hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px var(--glow)} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} [data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important} .ticker{overflow-x:auto} } /* ---------- responsive ---------- */ @media(min-width:901px){ .site-head{position:sticky;top:0} } @media(max-width:900px){ .grid-2{grid-template-columns:1fr} .statrow{grid-template-columns:repeat(2,1fr)} .nft-grid{grid-template-columns:1fr} .nft-stage{width:100%;max-width:100%} .nft-art{width:100%;max-width:100%} } @media(max-width:600px){ .nav-in{height:auto;padding-top:10px;padding-bottom:10px;gap:8px 12px;flex-wrap:wrap} .brand{order:1} .nav-right{order:2;margin-left:auto} .nav-links{order:3;width:100%;justify-content:center;gap:14px;font-size:14px} .ca-in{flex-direction:column;align-items:stretch;gap:8px} .main{padding-top:28px} .statrow{gap:8px} .hero h1{word-break:break-word} .section-head{flex-direction:column;align-items:flex-start;gap:8px} }