/* ========================================================================== KITSU / Vlad's Dog 1. Tokens 2. Base 3. Motion system 4. Chrome (topbar, cursor, progress, menu, toast) 5. Cover 6. Marquee 7. Brief 8. Receipts 9. Identity scan 10. Market room 10b. Arcade 11. Chain file 12. Comparison ladder 13. Storybook 14. Finale 15. Footer 16. Breakpoints: 1080 / 860 / 560 ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root{ --ink:#11150f; --paper:#efe8d6; --paper2:#e3dac3; --green:#1eb56c; --green-dark:#123d29; --green-neon:#9df7a8; --gold:#c49b39; --gold-hi:#f2d16b; --red:#b84a37; --night:#0d1711; --night-2:#132018; --night-line:#2c4034; --night-line-2:#45604d; --night-text:#a8baa9; --line:rgba(17,21,15,.19); --sans:'Manrope',sans-serif; --display:'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif; --mono:'DM Mono',monospace; --pad:clamp(18px,5.2vw,92px); --gutter:max(var(--pad),calc((100% - var(--maxw)) / 2)); --pad-y:clamp(72px,9vw,128px); --maxw:1440px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); } /* 2. Base ------------------------------------------------------------------ */ *{box-sizing:border-box} /* Clipping lives on only: putting it on too would turn the body into a scroll container and break the sticky topbar. The hidden/clip pair is a fallback ordering, since Safari only learned overflow:clip in 16. */ html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip} body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans)} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit;color:inherit} h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0} ::selection{background:var(--green);color:#fff} :focus-visible{outline:2px solid var(--green);outline-offset:3px} section{scroll-margin-top:90px} .page-grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")} .eyebrow{font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px} .section-pad{padding:0 var(--gutter)} /* 3. Motion system --------------------------------------------------------- */ /* Everything below is gated on .js-anim: without it (script.js missing or broken) content renders in its final state instead of staying invisible. */ .js-anim [data-reveal]{opacity:0;transition:opacity .85s var(--ease-out) var(--d,0s),transform .85s var(--ease-out) var(--d,0s)} .js-anim [data-reveal="up"]{transform:translate3d(0,34px,0)} .js-anim [data-reveal="left"]{transform:translate3d(-38px,0,0)} .js-anim [data-reveal="right"]{transform:translate3d(38px,0,0)} .js-anim [data-reveal="scale"]{transform:scale(.92)} .js-anim [data-reveal="pop"]{transform:translate3d(0,20px,0) rotate(-9deg) scale(.94)} [data-reveal]{transform:var(--rest,none)} [data-reveal].in{opacity:1;transform:var(--rest,none)} .split-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em .03em .18em 0;margin:-.16em -.03em -.18em 0} .js-anim .split-word>i{display:inline-block;font-style:inherit;transform:translate3d(0,130%,0);transition:transform 1s var(--ease-out) var(--wd,0s)} .split.in .split-word>i{transform:none} .title-line{--nudge:0em;display:block;overflow:hidden;padding:.16em .1em .05em;margin:-.16em -.1em -.05em;margin-left:calc(-.1em + var(--nudge))} .title-line>i{display:block;font-style:normal} .js-anim .title-line>i{transform:translate3d(0,115%,0);transition:transform 1.15s var(--ease-out) var(--d,0s)} .ready .cover-title .title-line>i,.finale-copy h2.in .title-line>i{transform:none} @keyframes blink{50%{opacity:.28}} @keyframes signal{50%{transform:scaleY(.35);opacity:.32}} @keyframes slowspin{to{transform:rotate(360deg)}} @keyframes float{50%{transform:translate3d(0,-14px,0)}} @keyframes marquee{to{transform:translate3d(-50%,0,0)}} @keyframes sweep{0%{transform:translateY(-100%)}60%,100%{transform:translateY(600%)}} @keyframes pulse-ring{0%{transform:scale(.85);opacity:.55}70%,100%{transform:scale(1.6);opacity:0}} /* 4. Chrome ---------------------------------------------------------------- */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none} .scroll-progress i{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear} .cursor-dot{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--green);z-index:100;pointer-events:none;mix-blend-mode:multiply;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s,width .25s var(--ease-out),height .25s var(--ease-out),background .25s} body.has-pointer .cursor-dot{opacity:1} .cursor-dot.is-big{width:44px;height:44px;background:rgba(30,181,108,.32)} .topbar{position:sticky;top:0;height:82px;display:grid;grid-template-columns:auto 1fr auto auto;gap:28px;align-items:center;padding:0 var(--gutter);border-bottom:1px solid var(--ink);z-index:70;background:rgba(239,232,214,.88);backdrop-filter:blur(14px);transition:transform .45s var(--ease-out),box-shadow .3s} .topbar.is-hidden{transform:translateY(-101%)} .topbar.is-stuck{box-shadow:0 10px 30px rgba(17,21,15,.07)} .wordmark{display:flex;align-items:center;gap:9px;font-weight:800;font-size:26px;letter-spacing:-.06em} .wordmark-logo{display:block;width:38px;height:38px;flex:none} .wordmark-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(70,52,8,.28));transition:transform .6s var(--ease-out)} .wordmark:hover .wordmark-logo img{transform:rotate(-16deg) scale(1.08)} .case-id{font:500 11px/1 var(--mono);letter-spacing:.08em;color:rgba(17,21,15,.6)} .case-id b{color:var(--ink)} .desktop-nav{display:flex;gap:26px;font-size:13px;font-weight:700} .desktop-nav a{position:relative;padding:4px 0} .desktop-nav a:after{content:"";height:2px;position:absolute;left:0;right:100%;bottom:-4px;background:var(--green);transition:right .35s var(--ease-out)} .desktop-nav a:hover:after,.desktop-nav a.active:after{right:0} .topbar-actions{display:flex;align-items:center;gap:8px} .icon-btn{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid rgba(17,21,15,.28);border-radius:50%;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease-out)} .icon-btn svg{width:14px;height:14px;fill:currentColor} .icon-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)} .menu-button{display:none;width:42px;height:42px;background:none;border:1px solid var(--ink);border-radius:50%;cursor:pointer;transition:background .25s,transform .25s} .menu-button:hover{background:rgba(17,21,15,.06)} .menu-button span{display:block;width:16px;height:1px;background:var(--ink);margin:5px auto;transition:transform .3s var(--ease-out)} .mobile-menu{position:fixed;inset:0;background:var(--night);color:#edf4de;z-index:80;display:flex;flex-direction:column;padding:18px max(18px,env(safe-area-inset-left)) max(26px,env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);visibility:hidden} .mobile-menu.open{clip-path:inset(0 0 0 0);visibility:visible} .mobile-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--night-line-2)} .mobile-head .wordmark{color:#edf4de;font-size:21px} .mobile-head .wordmark-logo{width:32px;height:32px} .mobile-menu nav{flex:1;display:flex;flex-direction:column;justify-content:center} .mobile-menu nav a{font:700 clamp(34px,9vw,60px)/1.05 var(--display);letter-spacing:-.03em;border-bottom:1px solid var(--night-line-2);padding:14px 0;opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .25s} .mobile-menu nav a:hover{color:var(--green-neon)} .mobile-menu.open nav a{opacity:1;transform:none} .mobile-menu.open nav a:nth-child(1){transition-delay:.18s} .mobile-menu.open nav a:nth-child(2){transition-delay:.24s} .mobile-menu.open nav a:nth-child(3){transition-delay:.3s} .mobile-menu.open nav a:nth-child(4){transition-delay:.36s} .mobile-foot{display:flex;flex-wrap:wrap;gap:12px 22px;padding-top:20px;opacity:0;transition:opacity .5s var(--ease-out) .44s} .mobile-menu.open .mobile-foot{opacity:1} .mobile-foot a{font:500 10px/1 var(--mono);letter-spacing:.1em;border-bottom:1px solid;padding-bottom:5px;transition:color .25s} .mobile-foot a:hover{color:var(--green-neon)} .mobile-close{width:46px;height:46px;flex:none;border:1px solid #8ba38e;border-radius:50%;background:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .25s,transform .35s var(--ease-out)} .mobile-close:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)} .toast{position:fixed;z-index:110;left:50%;bottom:24px;transform:translate(-50%,22px);background:#10150f;color:#fff;padding:12px 18px;font:500 10px/1 var(--mono);letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease-out)} .toast.show{opacity:1;transform:translate(-50%,0)} /* Buttons */ .action{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:1px solid var(--ink);font-size:12px;font-weight:800;letter-spacing:.01em;overflow:hidden;isolation:isolate;transition:color .3s var(--ease-soft),border-color .3s,transform .35s var(--ease-out)} .action>span{position:relative;z-index:2} .action:before{content:"";position:absolute;inset:0;z-index:1;background:var(--green-dark);transform:translateY(101%);transition:transform .45s var(--ease-out)} .action:hover:before{transform:none} .action.primary{background:var(--ink);color:var(--paper)} .action.ghost:hover{color:var(--paper);border-color:var(--green-dark)} /* 5. Cover ----------------------------------------------------------------- */ .cover{position:relative;overflow:hidden;border-bottom:1px solid var(--ink);padding:clamp(18px,3.2vh,50px) var(--pad) clamp(20px,3.2vh,44px);isolation:isolate} .cover:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(120deg,transparent 0 62%,rgba(30,181,108,.09) 62%),radial-gradient(circle at 72% 46%,rgba(196,155,57,.17),transparent 26%)} .cover-index{position:absolute;left:16px;top:20%;bottom:16%;display:flex;flex-direction:column;justify-content:space-between;font:500 9px/1.2 var(--mono);letter-spacing:.14em;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.5} .cover-inner{width:100%;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:min(70vh,720px)} .cover-left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.2vh,30px);min-width:0} .cover-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;min-width:0} .cover-title{font-weight:800;letter-spacing:-.085em;line-height:.78;font-size:clamp(64px,min(13vw,19vh),198px);color:#191e15;margin:0} .title-line-b{--nudge:.065em} .cover-title.flush .title-line{--nudge:0em} .title-line-c{color:var(--green-dark)} .hero-medallion{position:relative;margin:0;width:min(100%,540px,62vh);aspect-ratio:1;align-self:center} .medallion-inner{position:absolute;inset:0;will-change:transform} .medallion-inner picture,.medallion-inner img{width:100%;height:100%} .medallion-inner img{object-fit:contain;filter:saturate(.94) contrast(1.03) drop-shadow(0 40px 60px rgba(70,52,8,.24));animation:float 7s ease-in-out infinite} .medallion-shadow{position:absolute;width:70%;height:12%;left:15%;bottom:2%;background:rgba(48,35,5,.26);filter:blur(26px);border-radius:50%;animation:float 7s ease-in-out infinite reverse} .hero-medallion figcaption{position:absolute;right:2%;bottom:8%;z-index:4;padding:10px 14px;background:var(--paper);border:1px solid var(--ink);font:500 9px/1.3 var(--mono);letter-spacing:.12em;transform:rotate(4deg);box-shadow:6px 6px 0 var(--green)} .hero-medallion figcaption strong{font-size:14px;display:block;margin-top:3px} .cover-note{font:600 12px/1.45 var(--mono);text-transform:uppercase} .note-a{--rest:rotate(-3deg);position:relative;align-self:flex-start;max-width:320px;background:#fcf3b5;padding:18px 22px;box-shadow:8px 9px 0 rgba(17,21,15,.12);border:1px solid rgba(17,21,15,.22)} .note-a .pin{position:absolute;width:11px;height:11px;background:var(--red);border-radius:50%;top:8px;right:10px;box-shadow:1px 2px 0 rgba(0,0,0,.25)} .note-a b{font-size:17px} .note-b{--rest:rotate(1.6deg);position:relative;width:min(272px,100%);margin-right:clamp(0px,1.6vw,22px);padding:13px 16px 14px;background:rgba(255,255,255,.55);border:1px solid var(--ink);box-shadow:6px 6px 0 rgba(17,21,15,.09);text-align:left} .note-b span{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.15em;opacity:.62;margin-bottom:8px} .note-b span:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(30,181,108,.16);animation:blink 1.6s infinite} .note-b b{font:500 15px/1.35 var(--display);letter-spacing:-.01em;text-transform:none;display:block} .cover-actions{display:flex;flex-wrap:wrap;gap:10px} .cover-contract{width:min(430px,100%);border-top:1px solid var(--ink);padding-top:9px} .cover-contract-label{font:500 8px/1 var(--mono);letter-spacing:.16em} .copy-ca{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 0 0;border:0;background:none;cursor:pointer;text-align:left;transition:opacity .25s,color .25s} .copy-ca:hover{color:var(--green-dark)} .copy-ca code{font:500 clamp(12px,1.15vw,17px)/1.3 var(--mono);word-break:break-all} .copy-ca svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--ease-out)} .copy-ca:hover svg{transform:translate(2px,-2px)} .scroll-cue{display:inline-flex;align-items:center;gap:12px;margin:clamp(18px,3vw,34px) auto 0 0;font:500 8px/1 var(--mono);letter-spacing:.14em} .scroll-cue i{width:48px;height:1px;background:var(--ink);position:relative;transition:width .4s var(--ease-out)} .scroll-cue:hover i{width:74px} .scroll-cue i:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid;border-bottom:1px solid;transform:rotate(-45deg)} /* 6. Marquee --------------------------------------------------------------- */ .marquee{overflow:hidden;background:var(--green-dark);color:var(--green-neon);border-bottom:1px solid var(--ink);padding:13px 0} .marquee-track{display:flex;width:max-content;animation:marquee var(--dur,34s) linear infinite} .marquee-group{flex:none;font:500 11px/1 var(--mono);letter-spacing:.22em;white-space:nowrap;padding-right:24px} .marquee-track b{color:var(--green);margin:0 14px;font-size:8px;vertical-align:middle} /* 7. Brief ----------------------------------------------------------------- */ .brief{display:grid;grid-template-columns:90px minmax(0,1.18fr) minmax(300px,.98fr);gap:38px;padding:var(--pad-y) var(--gutter);border-bottom:1px solid var(--ink)} .brief-number{font:700 clamp(48px,5.4vw,74px)/.8 var(--display);letter-spacing:-.04em;color:var(--green);align-self:start} .brief h2,.receipts h2,.scan-copy h2,.chain-left h2,.comparison-head h2,.storybook-cover h2{font:700 clamp(38px,5.2vw,80px)/.98 var(--display);letter-spacing:-.045em;margin:0} .brief-copy{padding-top:52px;min-width:0} .brief-copy p{font-size:16px;line-height:1.78;margin:0 0 22px;color:rgba(17,21,15,.78)} .brief-copy p:first-child{font:600 clamp(19px,1.8vw,25px)/1.42 var(--display);letter-spacing:-.022em;color:var(--ink);margin-bottom:24px} .brief-copy strong{font-weight:700;box-shadow:inset 0 -.4em 0 rgba(157,247,168,.6);padding:0 2px} .meme-bio{grid-column:2/4;margin:28px 0 0 12%;border-left:4px solid var(--green);padding:16px 26px;background:rgba(255,255,255,.28)} .meme-bio span{font:500 8px/1 var(--mono);letter-spacing:.13em} .meme-bio p{font:500 clamp(20px,2.5vw,32px)/1.28 var(--display);letter-spacing:-.025em;margin:10px 0 0} /* 8. Receipts -------------------------------------------------------------- */ .receipts{background:#d9d0ba;border-bottom:1px solid var(--ink);padding:var(--pad-y) 0} .section-intro{max-width:620px;font-size:15px;line-height:1.7;margin-top:20px} .evidence-wall{width:min(1240px,100% - clamp(24px,6vw,60px));margin:clamp(46px,6vw,74px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,44px);align-items:start} .evidence{position:relative;display:flex;flex-direction:column;background:#f6f0e0;border:1px solid rgba(17,21,15,.16);box-shadow:0 2px 0 rgba(17,21,15,.05);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s} .evidence:hover{transform:translateY(-4px);border-color:rgba(17,21,15,.34);box-shadow:0 18px 34px rgba(17,21,15,.11)} .evidence-meta{display:flex;justify-content:space-between;gap:10px;padding:14px clamp(18px,2vw,26px);border-bottom:1px solid rgba(17,21,15,.14);font:500 8px/1 var(--mono);letter-spacing:.14em;opacity:.66} /* Screenshot slot. Drops out entirely when the file is missing (see script). */ .evidence-shot{position:relative;display:block;height:clamp(360px,44vw,600px);padding:12px;overflow:hidden;background:#12161a;border-bottom:1px solid rgba(17,21,15,.14)} .evidence-shot img{width:100%;height:100%;object-fit:contain;transition:filter .4s} .evidence:hover .evidence-shot img{filter:brightness(1.07)} .evidence-shot-tag{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;background:rgba(17,21,15,.86);color:var(--paper);font:500 8px/1 var(--mono);letter-spacing:.14em;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease-out)} .evidence-shot-tag i{font-style:normal} .evidence:hover .evidence-shot-tag{opacity:1;transform:none} .evidence.no-shot .evidence-shot{display:none} .evidence-body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px) clamp(20px,2.2vw,26px)} .evidence h3{font-size:clamp(21px,2vw,26px);letter-spacing:-.03em;line-height:1.12;margin:0 0 16px;font-weight:700} .evidence blockquote{margin:0 0 16px;padding-left:16px;border-left:2px solid var(--green);font:600 clamp(16px,1.55vw,19px)/1.4 var(--display);letter-spacing:-.015em} .evidence .big-quote{font-size:clamp(20px,2.2vw,25px)} .evidence blockquote strong{font-style:normal;font-family:var(--mono);font-size:.8em;letter-spacing:.08em} .evidence-body p{font-size:14px;line-height:1.7;margin:0 0 20px;color:rgba(17,21,15,.78)} .evidence-notes{list-style:none;margin:0 0 24px;padding:18px 0 0;display:grid;gap:16px;border-top:1px dashed rgba(17,21,15,.28)} .evidence-notes li{display:grid;gap:8px;padding-left:15px;border-left:3px solid var(--green)} .evidence-notes b{justify-self:start;padding:4px 8px;background:rgba(157,247,168,.45);color:var(--green-dark);font:600 9px/1 var(--mono);letter-spacing:.18em} .evidence-notes span{font:600 clamp(15px,1.35vw,18px)/1.45 var(--display);letter-spacing:-.015em;color:var(--ink)} .evidence-notes strong{font-weight:700;box-shadow:inset 0 -.42em 0 rgba(157,247,168,.55)} .evidence-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.06em;padding-bottom:4px;border-bottom:1px solid rgba(17,21,15,.35);transition:color .25s,border-color .25s,gap .3s var(--ease-out)} .evidence-link:hover{color:var(--green-dark);border-color:var(--green);gap:11px} /* 9. Identity scan --------------------------------------------------------- */ .identity-scan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(40px,6vw,80px);padding:calc(var(--pad-y) + 20px) var(--gutter) var(--pad-y);position:relative;background:var(--paper);border-bottom:1px solid var(--ink);overflow:hidden} .scan-ruler{position:absolute;left:0;right:0;top:44px;height:18px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 20px);opacity:.16} .scan-copy p:last-child{max-width:580px;line-height:1.75;font-size:15px;margin-top:22px} .collar-demo{width:min(100%,318px);justify-self:center;margin:0} .collar-card{position:relative;background:#fffdf6;border:1px solid rgba(17,21,15,.55);padding:10px;box-shadow:13px 15px 0 rgba(17,21,15,.08);rotate:-1.2deg;transition:rotate .5s var(--ease-out),box-shadow .5s var(--ease-out)} .collar-card:hover{rotate:0deg;box-shadow:18px 20px 0 rgba(17,21,15,.1)} .collar-card:after{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;width:78px;height:19px;background:rgba(157,247,168,.5);border:1px solid rgba(17,21,15,.22);rotate:-2.4deg} .collar-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 2px 9px;font:500 8px/1 var(--mono);letter-spacing:.16em;opacity:.72} .collar-card-head span{display:inline-flex;align-items:center;gap:6px} .collar-stage{position:relative;aspect-ratio:157/340;overflow:hidden;background:linear-gradient(158deg,#f4eddb,#e4dabf);border:1px solid rgba(17,21,15,.2)} .collar-stage:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,253,246,.5);mix-blend-mode:normal;pointer-events:none} .collar-stage img{display:block;width:100%;height:100%;object-fit:cover} .collar-card-foot{margin:0;padding:11px 2px 2px;border-top:1px dashed rgba(17,21,15,.3);display:grid;gap:5px} .collar-card-foot b{font:700 14px/1.25 var(--display);letter-spacing:-.02em} .collar-card-foot span{font:500 8px/1.4 var(--mono);letter-spacing:.14em;opacity:.6} /* 10. Arcade -------------------------------------------------------------- */ .arcade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;gap:clamp(36px,5vw,80px);padding:var(--pad-y) var(--gutter);background:var(--night);color:#dbf8df;border-bottom:1px solid var(--night-line)} .arcade .eyebrow{color:#7fa187} .arcade h2{font:700 clamp(38px,5.2vw,80px)/.98 var(--display);letter-spacing:-.045em;margin:0} .arcade-copy>p{max-width:520px;font-size:15px;line-height:1.75;color:#bdcfbd;margin-top:20px} .arcade-keys{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .arcade-keys li{display:flex;align-items:center;gap:8px;font:500 10px/1.5 var(--mono);letter-spacing:.1em;color:#a5bfa9} .arcade-keys span,.arcade-keys kbd{display:inline-block;padding:5px 9px;border:1px solid var(--night-line-2);border-radius:5px;font:inherit;letter-spacing:.12em;color:#e2eee2} .action.arcade-full{margin-top:30px;background:var(--green-neon);color:var(--night);border-color:var(--green-neon)} .action.arcade-full:before{background:#fff} .action.arcade-full:hover{color:var(--night)} .arcade-full i{font-style:normal} .arcade-cabinet{width:min(100%,460px);justify-self:center;border:1px solid var(--night-line-2);background:#0a120d;box-shadow:0 30px 60px rgba(0,0,0,.42)} .arcade-bezel{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--night-line-2);font:500 8px/1 var(--mono);letter-spacing:.15em;color:#7fa187} .arcade-live{display:flex;align-items:center;gap:7px;color:var(--green-neon)} .arcade-live i{width:6px;height:6px;border-radius:50%;background:var(--green-neon);box-shadow:0 0 10px var(--green-neon);animation:blink 1.4s infinite} .arcade-screen{position:relative;aspect-ratio:480/830;background:#0a0a0a} .arcade-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* 11. Chain file ----------------------------------------------------------- */ .chain-file{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,5vw,80px);padding:var(--pad-y) var(--gutter);border-bottom:1px solid var(--ink)} .chain-left>p{max-width:650px;line-height:1.75;font-size:15px;margin-top:22px} .chain-left dl{margin:45px 0 0;border-top:1px solid} .chain-left dl div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;border-bottom:1px solid;padding:15px 0;transition:background .3s} .chain-left dl div:hover{background:rgba(255,255,255,.3)} .chain-left dt{font:500 8px/1.4 var(--mono);letter-spacing:.14em} .chain-left dd{margin:0;font:500 12px/1.5 var(--mono);overflow-wrap:anywhere} .wallet-note{--rest:rotate(1.2deg);align-self:start;background:#f1d65f;padding:clamp(22px,2.6vw,30px);box-shadow:14px 15px 0 rgba(17,21,15,.08);border:1px solid var(--ink)} .wallet-label{font:500 8px/1 var(--mono);letter-spacing:.12em} .wallet-note h3{font:700 clamp(27px,3.1vw,36px)/1.05 var(--display);letter-spacing:-.035em;margin:20px 0 12px} .wallet-note p{font-size:14px;line-height:1.7} .wallet-source{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:600 9px/1 var(--mono);letter-spacing:.1em;border-bottom:1px solid rgba(17,21,15,.35);padding-bottom:4px;transition:color .25s,border-color .25s,gap .3s var(--ease-out)} .wallet-source:hover{color:var(--green-dark);border-color:var(--green-dark);gap:11px} .wallet-ids{margin:22px 0 0;display:grid;gap:8px} .wallet-ids div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline} .wallet-ids dt{font:500 8px/1.5 var(--mono);letter-spacing:.14em;opacity:.62} .wallet-ids dd{margin:0;font:500 11px/1.5 var(--mono);overflow-wrap:anywhere} .wallet-ids a{border-bottom:1px solid rgba(17,21,15,.35);transition:border-color .25s,color .25s} .wallet-ids a:hover{color:var(--green-dark);border-color:var(--green-dark)} .wallet-tx{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px} .wallet-tx li{background:rgba(17,21,15,.05);border:1px solid rgba(17,21,15,.16);padding:13px 15px} .wallet-tx-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px} .wallet-tx-head b{display:inline-block;padding:3px 7px;background:var(--green-dark);color:var(--green-neon);font:600 8px/1.4 var(--mono);letter-spacing:.14em} .wallet-tx li.out .wallet-tx-head b{background:var(--red);color:#fff} .wallet-tx-head time{font:500 8px/1.4 var(--mono);letter-spacing:.1em;opacity:.6} .wallet-tx strong{display:block;font:600 17px/1.2 var(--mono);letter-spacing:-.02em} .wallet-tx li>span{display:block;margin-top:5px;font:500 9px/1.5 var(--mono);letter-spacing:.04em;opacity:.62;overflow-wrap:anywhere} .wallet-tx a{display:inline-block;margin-top:10px;font:600 9px/1 var(--mono);letter-spacing:.08em;border-bottom:1px solid rgba(17,21,15,.35);padding-bottom:3px;transition:color .25s,border-color .25s,transform .3s var(--ease-out)} .wallet-tx a:hover{color:var(--green-dark);border-color:var(--green-dark);transform:translateX(3px)} .caution{margin-top:25px;border-top:1px dashed;padding-top:14px;font:500 9px/1.55 var(--mono)} /* 12. Comparison ladder ---------------------------------------------------- */ .comparison-file{position:relative;overflow:hidden;padding:var(--pad-y) var(--gutter);background:#1b402d;color:#edf4de;border-bottom:1px solid #0d2418} .comparison-file:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 12%,rgba(157,247,168,.11),transparent 42%),linear-gradient(rgba(157,247,168,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(157,247,168,.022) 1px,transparent 1px);background-size:auto,52px 52px,52px 52px} .comparison-head{position:relative;max-width:850px} .comparison-head p:last-child{max-width:650px;color:#bdcfbd;line-height:1.7;font-size:15px;margin-top:20px} .ladder{--cols:58px minmax(132px,.8fr) minmax(0,2.6fr) clamp(108px,11vw,150px);--rowgap:clamp(14px,2vw,28px);position:relative;margin:clamp(46px,6vw,82px) 0 0} .ladder-scale{display:grid;grid-template-columns:var(--cols);gap:var(--rowgap);align-items:end;margin-bottom:14px} .ladder-scale-label{grid-column:1/3;font:500 8px/1 var(--mono);letter-spacing:.15em;color:#8fae94} .ladder-ticks{grid-column:3;display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid rgba(145,176,149,.3)} .ladder-ticks i{position:relative;font:500 8px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:#8fae94} .ladder-ticks i:after{content:"";position:absolute;left:0;bottom:-10px;width:1px;height:6px;background:rgba(145,176,149,.4)} .ladder-ticks i:last-child:after{left:auto;right:0} .ladder-item{position:relative;display:grid;grid-template-columns:var(--cols);gap:var(--rowgap);align-items:center;padding:clamp(15px,1.7vw,21px) 0;border-top:1px solid rgba(145,176,149,.2)} .ladder-item>*{position:relative;z-index:1} .ladder-rank{display:flex;align-items:center;gap:7px;font:500 10px/1 var(--mono);letter-spacing:.14em;color:#8fae94} .ladder-id b{display:block;font:500 clamp(13px,1.25vw,15px)/1 var(--mono);letter-spacing:.09em} .ladder-id small{display:block;margin-top:8px;font:400 12px/1.4 var(--mono);color:#a5bfa9} .ladder-bar{position:relative;height:clamp(28px,3.2vw,42px);background:rgba(145,176,149,.09);border:1px solid rgba(145,176,149,.16);background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(145,176,149,.16) calc(25% - 1px) 25%)} .ladder-bar>i{display:block;height:100%;width:var(--fill);min-width:4px;background:linear-gradient(90deg,#2c7a4f,#6fe08f 70%,var(--green-neon));transition:width 1.4s var(--ease-out) var(--d,0s)} .js-anim .ladder-bar>i{width:0} .js-anim .ladder.in .ladder-bar>i{width:var(--fill)} .ladder-item strong{font:700 clamp(28px,3.2vw,44px)/.9 var(--display);letter-spacing:-.04em;color:var(--green-neon);text-align:right;letter-spacing:-.02em} .ladder-item:nth-of-type(2){--d:.1s} .ladder-item:nth-of-type(3){--d:.2s} .ladder-item:nth-of-type(4){--d:.3s} .ladder-item:nth-of-type(5){--d:.42s} .ladder-item.kitsu{color:#143522;border-top-color:transparent} .ladder-item.kitsu:before{content:"";position:absolute;inset:0 calc(-1 * clamp(14px,1.8vw,26px));z-index:0;background:#edf4de;box-shadow:0 22px 44px rgba(4,20,11,.28)} .kitsu .ladder-rank{color:#1a9e61} .kitsu .ladder-id small{color:#4d6958} .kitsu .ladder-bar{background:rgba(20,53,34,.07);border-color:rgba(20,53,34,.14);background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(20,53,34,.12) calc(25% - 1px) 25%)} .kitsu .ladder-bar>i{min-width:9px;background:linear-gradient(90deg,#0f7a48,#2fd07f);box-shadow:0 0 20px rgba(18,138,82,.7),2px 0 0 rgba(20,53,34,.35)} .kitsu .ladder-bar em{position:absolute;top:50%;left:calc(var(--fill) + 14px);translate:0 -50%;font:500 8px/1 var(--mono);font-style:normal;letter-spacing:.15em;color:#5b7a66;white-space:nowrap;transition:opacity .5s ease .9s} .js-anim .kitsu .ladder-bar em{opacity:0} .js-anim .ladder.in .kitsu .ladder-bar em{opacity:1} .kitsu strong{color:#1a9e61} .live-dot{width:6px;height:6px;border-radius:50%;background:#1a9e61;box-shadow:0 0 0 3px rgba(26,158,97,.18);animation:blink 1.4s infinite} /* 13. Storybook ------------------------------------------------------------ */ .storybook{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);border-bottom:1px solid var(--ink)} .storybook-cover{background:var(--gold);color:#17150c;padding:clamp(56px,7vw,90px) clamp(26px,4.4vw,72px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center} .storybook-cover:before{content:"";position:absolute;inset:16px;border:2px solid rgba(17,21,15,.55);pointer-events:none} .storybook-cover>span{font:500 8px/1 var(--mono);letter-spacing:.15em} .storybook-cover h2{margin:clamp(28px,4vw,54px) 0 24px;font-size:clamp(52px,7vw,110px)} .storybook-cover p{max-width:500px;font-size:15px;line-height:1.7} .storybook-seal{position:absolute;right:34px;bottom:40px;width:98px;height:98px;border:2px solid;border-radius:50%;display:grid;place-items:center;text-align:center;font:600 12px/1.2 var(--mono);rotate:-10deg;animation:float 8s ease-in-out infinite} .story-form{padding:clamp(40px,5vw,64px) clamp(20px,4.4vw,72px);background:#f4eedf} .form-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:2px solid;padding-bottom:12px;margin-bottom:32px;font:500 8px/1.4 var(--mono);letter-spacing:.12em} .story-form label{display:block;margin-bottom:23px} .story-form label>span{display:block;font:500 9px/1 var(--mono);letter-spacing:.08em;margin-bottom:9px} .story-form em{font-style:normal;opacity:.55} .story-form input,.story-form textarea{width:100%;border:0;border-bottom:1px solid;background:transparent;padding:10px 2px 12px;outline:none;border-radius:0;font-size:16px;color:var(--ink);transition:border-color .3s,box-shadow .3s} .story-form input:focus,.story-form textarea:focus{border-color:var(--green);box-shadow:0 2px 0 var(--green)} .story-form textarea{min-height:150px;resize:vertical;line-height:1.6} .form-bottom{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-top:30px} .consent{display:flex!important;gap:10px;align-items:flex-start;max-width:430px;margin:0!important} .consent input{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--green);box-shadow:none!important} .consent span{font:500 10px/1.5 var(--mono)!important;margin:0!important;letter-spacing:0!important} .form-bottom button{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--ink);background:var(--ink);color:#fff;min-height:52px;padding:0 22px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .35s var(--ease-out)} .form-bottom button>span{position:relative;z-index:2;white-space:nowrap} .form-bottom button:before{content:"";position:absolute;inset:0;z-index:1;background:var(--green-dark);transform:translateY(101%);transition:transform .45s var(--ease-out)} .form-bottom button:hover:before{transform:none} .form-bottom button[disabled]{opacity:.6;cursor:progress} .form-status{min-height:20px;font:500 10px/1.6 var(--mono);margin:18px 0 0} .form-status a{text-decoration:underline;text-underline-offset:3px} .hp{position:absolute!important;left:-9999px!important;opacity:0!important} /* 14. Finale --------------------------------------------------------------- */ .finale{position:relative;overflow:hidden;background:var(--night);color:#eef5df;display:grid;place-items:center;text-align:center;padding:clamp(80px,11vw,140px) var(--pad)} .finale:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(157,247,168,.12),transparent 36%),linear-gradient(rgba(157,247,168,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(157,247,168,.025) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px} .finale-coin{position:absolute;width:min(64vw,700px);opacity:.14;filter:grayscale(1) contrast(1.25);animation:slowspin 40s linear infinite} .finale-copy{position:relative;z-index:2;max-width:min(100%,1000px)} .finale-copy>span{font:500 8px/1 var(--mono);letter-spacing:.17em} .finale-copy h2{font:700 clamp(42px,8.4vw,138px)/.86 var(--sans);letter-spacing:-.07em;margin:clamp(24px,3vw,34px) 0 clamp(30px,4vw,44px)} .finale-copy h2 .serif{font-family:var(--display);font-weight:700;color:var(--green-neon);letter-spacing:-.055em} .finale-actions{display:flex;justify-content:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap} .finale-actions a{font:500 11px/1 var(--mono);border-bottom:1px solid;padding-bottom:5px;transition:color .25s,transform .3s var(--ease-out)} .finale-actions a:hover{color:var(--green-neon);transform:translateY(-3px)} /* 15. Footer --------------------------------------------------------------- */ .site-footer{background:var(--night);color:var(--night-text);border-top:1px solid var(--night-line);padding:clamp(52px,6vw,80px) var(--gutter) clamp(26px,3vw,34px)} .footer-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.72fr) minmax(0,.82fr) minmax(0,1.3fr);gap:clamp(28px,3.4vw,52px);padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--night-line)} .footer-brand .wordmark{color:#edf4de;font-size:24px;margin-bottom:18px} .footer-brand .wordmark-logo{width:34px;height:34px} .footer-brand p{font-size:13px;line-height:1.7;max-width:340px} .footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .footer-social a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--night-line-2);border-radius:999px;font:500 10px/1 var(--mono);letter-spacing:.06em;color:#cfe0cf;transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease-out)} .footer-social a:hover{color:var(--night);background:var(--green-neon);border-color:var(--green-neon);transform:translateY(-2px)} .footer-social svg{width:13px;height:13px;fill:currentColor} .footer-col h4{font:500 8px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7fa187;margin:0 0 20px} .footer-col>a{display:block;font-size:13px;font-weight:600;color:#cfe0cf;padding:7px 0;width:fit-content;position:relative;transition:color .25s,transform .3s var(--ease-out)} .footer-col>a:hover{color:var(--green-neon);transform:translateX(4px)} .footer-facts dl{margin:0} .footer-facts dl div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(69,96,77,.5)} .footer-facts dt{font:500 10px/1.4 var(--mono);letter-spacing:.06em;color:#7fa187} .footer-facts dd{margin:0;font:500 11px/1.4 var(--mono);color:#e2eee2;text-align:right} .footer-contract .copy-ca{align-items:flex-start;color:#e2eee2;border:1px solid var(--night-line-2);padding:14px;transition:border-color .3s,background .3s} .footer-contract .copy-ca:hover{color:var(--green-neon);border-color:var(--green-neon);background:rgba(157,247,168,.05)} .footer-contract .copy-ca code{font-size:10px;line-height:1.6;letter-spacing:-.01em} .footer-hint{margin-top:12px;font:500 9px/1.5 var(--mono);letter-spacing:.06em;color:#7fa187} .footer-bottom{max-width:var(--maxw);margin:0 auto;padding-top:clamp(22px,2.6vw,30px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .footer-disclaimer{max-width:680px;font-size:11px;line-height:1.65;color:#7f9483} .footer-legal{display:flex;align-items:center;gap:22px;font:500 9px/1 var(--mono);letter-spacing:.1em;color:#7f9483} .lw-credit{display:flex;align-items:center;gap:9px;color:#edf4de;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:0;white-space:nowrap;transition:color .25s,transform .3s var(--ease-out)} .lw-credit:hover{color:var(--green-neon);transform:translateY(-2px)} .lw-credit svg{width:17px;height:17px;fill:currentColor} /* 16. Breakpoints ---------------------------------------------------------- */ /* Short viewports: laptops and half-height windows. Height, not width, is the constraint here, so the hero compresses instead of running past the fold. */ @media (min-width:1081px) and (max-height:880px){ .cover{padding-top:clamp(18px,2.6vh,40px);padding-bottom:clamp(18px,2.6vh,40px)} .cover-inner{min-height:0;gap:clamp(20px,3vw,52px)} .cover-left{gap:clamp(12px,1.8vh,26px)} .cover-title{font-size:min(13vw,17.4vh)} .hero-medallion{width:min(100%,540px,56vh)} .note-a{padding:13px 17px;font-size:11px} .note-a b{font-size:15px} .action{min-height:46px} .scroll-cue{margin-top:clamp(8px,1.6vh,26px)} .hero-medallion figcaption{padding:8px 11px} } @media (max-width:1080px){ .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px} .case-id,.desktop-nav{display:none} .menu-button{display:grid;place-items:center;flex:none} .cover-index{display:none} .cover-inner{display:flex;flex-direction:column;align-items:stretch;gap:clamp(18px,3vw,26px);min-height:0} .cover-left,.cover-right{display:contents} .cover-title{order:1;font-size:clamp(66px,15.4vw,150px)} .hero-medallion{order:2;width:min(62vw,400px);align-self:center;margin-top:6px} .note-a{order:3;align-self:flex-start} .note-b{--rest:none;order:4;width:100%;max-width:none;margin-right:0} .cover-actions{order:5} .cover-contract{order:6;width:100%;max-width:520px} .scroll-cue{display:none} .brief{grid-template-columns:70px minmax(0,1fr);gap:26px 32px} .brief-copy{grid-column:2;padding-top:0} .meme-bio{grid-column:2;margin-left:0} .evidence-wall{grid-template-columns:minmax(0,1fr);gap:26px;width:min(680px,100% - 36px)} .identity-scan{grid-template-columns:minmax(0,1fr);gap:44px} .scan-ruler{display:none} .arcade{grid-template-columns:minmax(0,1fr);gap:38px} .arcade-cabinet{justify-self:stretch;width:min(100%,440px);margin:0 auto} .chain-file{grid-template-columns:minmax(0,1fr)} .wallet-note{--rest:none;max-width:640px} .ladder{--cols:46px minmax(112px,.9fr) minmax(0,2fr) clamp(92px,13vw,128px);--rowgap:16px} .ladder-id small{margin-top:6px;font-size:11px} .storybook{grid-template-columns:minmax(0,1fr)} .storybook-cover{min-height:420px} .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px} .footer-brand{grid-column:1/-1} } @media (max-width:860px){ /* Sideways reveal offsets push elements past the right edge on narrow screens, which reads as a horizontal scroll. Send them upward instead. */ .js-anim [data-reveal="left"],.js-anim [data-reveal="right"]{transform:translate3d(0,28px,0)} .cover{padding-top:26px} .cover-title{font-size:clamp(62px,17.5vw,132px);letter-spacing:-.075em} .hero-medallion{width:min(80vw,360px)} .hero-medallion figcaption{right:0;bottom:6%} .note-a{--rest:none;max-width:none;width:100%} .brief{grid-template-columns:minmax(0,1fr)} .brief-copy,.meme-bio{grid-column:auto} .meme-bio{margin-top:6px;padding:14px 18px} .evidence-wall{width:min(100% - 28px,620px)} .evidence-shot{height:clamp(340px,95vw,470px)} .chain-left dl div{grid-template-columns:96px minmax(0,1fr)} .ladder-scale{display:none} .ladder-item{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rank id" "val val" "bar bar";gap:12px 14px;padding:20px 0} .ladder-rank{grid-area:rank;align-self:start;padding-top:3px} .ladder-id{grid-area:id} .ladder-item strong{grid-area:val;text-align:left;line-height:1;font-size:clamp(34px,10vw,48px)} .ladder-bar{grid-area:bar;height:26px} .ladder-item.kitsu{padding-bottom:40px} .kitsu .ladder-bar em{left:0;top:calc(100% + 10px);translate:none;opacity:1;transition:none} .form-bottom{flex-direction:column;align-items:stretch;gap:16px} .form-bottom button{width:100%} .storybook-seal{right:22px;bottom:26px;width:82px;height:82px;font-size:10px} .footer-top{grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:34px} .footer-brand{grid-column:auto} .footer-brand p{max-width:none} .footer-bottom{flex-direction:column;align-items:flex-start;gap:18px} .footer-legal{flex-direction:row;justify-content:space-between;width:100%;gap:16px} } @media (max-width:560px){ .topbar{height:66px;gap:10px} .topbar-actions{gap:6px} .icon-btn{width:34px;height:34px} .icon-btn svg{width:12px;height:12px} .menu-button{width:38px;height:38px} .arcade-keys li{font-size:9px} .wordmark{font-size:21px} .cover{padding-bottom:34px} .cover-title{font-size:clamp(56px,20vw,110px)} .hero-medallion{width:min(94vw,380px)} .cover-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr)} .action{width:100%} .hero-medallion figcaption{padding:8px 11px;font-size:8px} .hero-medallion figcaption strong{font-size:12px} .marquee-group{font-size:10px;letter-spacing:.18em} .brief-number{font-size:46px} .evidence-shot-tag{opacity:1;transform:none} .collar-card{box-shadow:9px 11px 0 rgba(17,21,15,.08)} .ladder-item{gap:10px 12px;padding:18px 0} .ladder-id small{font-size:10.5px} .footer-social a{flex:1 1 auto;justify-content:center} .footer-legal{flex-direction:column;align-items:flex-start;gap:14px} } /* Landscape tablets and phones under 1080: stacking makes the hero absurdly tall, so rebuild the two column layout scaled to the available height. */ @media (max-width:1080px) and (min-width:680px) and (orientation:landscape){ .cover-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(18px,3vw,40px)} .cover-left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,2vh,20px)} .cover-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px} .cover-title{order:0;font-size:min(12vw,17.5vh)} .note-b{order:0;width:min(250px,100%);--rest:rotate(1.6deg)} .hero-medallion{order:1;width:min(100%,54vh);margin-top:0} .note-a{order:0;align-self:flex-start;width:auto;max-width:320px;--rest:rotate(-3deg);padding:12px 16px;font-size:11px} .note-a b{font-size:14px} .cover-actions{order:0;width:auto;display:flex;flex-wrap:wrap} .action{width:auto} .cover-contract{order:0;width:min(420px,100%)} } @media (max-width:1080px) and (orientation:landscape) and (max-height:440px){ .cover-left{gap:8px} .cover-right{gap:8px} .hero-medallion{width:min(100%,46vh)} .note-a{padding:9px 13px;font-size:10px} .note-a b{font-size:12px} .action{min-height:42px;font-size:11px} .cover-contract{padding-top:6px} } /* Landscape phones: the overlay menu must never outgrow the screen. */ @media (max-height:520px){ .mobile-menu{padding-top:14px} .mobile-menu nav{flex:1;justify-content:center;overflow-y:auto} .mobile-menu nav a{font-size:clamp(22px,6vh,34px);padding:9px 0} .mobile-foot{padding-top:12px} .mobile-head{padding-bottom:10px} .mobile-close{width:40px;height:40px;font-size:21px} } /* Settled state, declared last on purpose: the breakpoint variants above redefine the pre-animation transform at equal specificity, so this has to come after them or revealed elements stay stuck in their offset position. */ html [data-reveal].in{opacity:1;transform:var(--rest,none)} html .split.in .split-word>i{transform:none} html .ready .cover-title .title-line>i,html .finale-copy h2.in .title-line>i{transform:none} /* Motion preferences ------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1!important;transform:none!important} .split-word>i,.title-line>i{transform:none!important} .ladder-bar>i{width:var(--fill)} .kitsu .ladder-bar em{opacity:1} } /* ========================================================================== 17. Restyle layer — same Robinhood green/paper palette, new structure Editorial serif headlines, rule-heavy chrome, square edges. ========================================================================== */ :root{ --stripe:linear-gradient(90deg,var(--green) 0 34%,var(--gold-hi) 34% 67%,var(--ink) 67% 100%); --maxw:1320px; --display:'Source Serif 4',Georgia,'Times New Roman',serif; --sans:'Public Sans','Helvetica Neue',Arial,sans-serif; --mono:'Roboto Mono',ui-monospace,monospace; } .page-grain{opacity:.035} h1,h2,h3,.cover-title,.brief-lede,.finale-copy h2{font-family:var(--display);font-weight:600;letter-spacing:-.012em} h1,.cover-title{letter-spacing:-.02em} .eyebrow{font-size:10px;letter-spacing:.2em;padding-left:10px;border-left:3px solid var(--green)} .icon-btn,.menu-button,.mobile-close,.footer-social a,.arcade-keys span,.arcade-keys kbd{border-radius:2px} button,.btn,a.btn,[class*="-btn"]:not(.icon-btn){border-radius:2px} .topbar{height:88px;border-bottom:3px solid var(--green-dark);background:rgba(239,232,214,.94);backdrop-filter:blur(10px)} .topbar:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--stripe)} .wordmark{font-family:var(--display);font-weight:700;letter-spacing:-.03em} .case-id{text-transform:uppercase;font-size:10px;letter-spacing:.14em} .desktop-nav{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase} main > section{border-top:1px solid var(--line)} main > section:first-child{border-top:0} .marquee,.marquee-track{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase} .receipt,.receipt-card,.brief-card,.scan-card,.ladder-row,.chain-row{border-radius:2px} .footer{position:relative} .footer:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--stripe);z-index:2} /* ========================================================================== 17. CASHCAT-INSPIRED THEME LAYER Dark near-black canvas, acid-lime accent, Geist / Geist Mono typography, soft-rounded dark cards, lime hero + ticker panels. ========================================================================== */ :root{ --ink:#f4f6f3; --paper:#0c0e10; --paper2:#121316; --lime:#ccff00; --lime-dim:#a8d400; --green:#ccff00; --green-neon:#ccff00; --green-dark:#1a1c16; --gold:#ccff00; --night:#0a0a0a; --night-2:#121316; --night-line:rgba(255,255,255,.08); --night-line-2:rgba(255,255,255,.12); --night-text:#9aa3a8; --line:rgba(255,255,255,.09); --card:#121316; --card-line:rgba(255,255,255,.09); --sans:'Geist','Helvetica Neue',Arial,sans-serif; --display:'Geist','Helvetica Neue',Arial,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; } html,body{background:var(--paper);color:var(--ink)} ::selection{background:var(--lime);color:#0a0a0a} :focus-visible{outline:2px solid var(--lime)} .page-grain{opacity:.03} .scroll-progress i{background:var(--lime)} .cursor-dot{mix-blend-mode:normal;background:var(--lime)} .cursor-dot.is-big{background:rgba(204,255,0,.25)} /* Chrome ------------------------------------------------------------------- */ .topbar{background:rgba(12,14,16,.82);border-bottom:1px solid var(--night-line);height:76px} .topbar.is-stuck{box-shadow:0 12px 30px rgba(0,0,0,.5)} .wordmark{letter-spacing:-.045em;font-weight:800} .case-id{color:var(--night-text)} .case-id b{color:var(--lime)} .desktop-nav{gap:30px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase} .desktop-nav a:after{background:var(--lime)} .desktop-nav a:hover{color:var(--lime)} .icon-btn{border-color:var(--night-line-2)} .icon-btn:hover{background:var(--lime);color:#0a0a0a;border-color:var(--lime)} .mobile-menu{background:#0a0a0a;color:var(--ink)} .toast{background:var(--lime);color:#0a0a0a;border-radius:999px} .action{border-radius:999px;border-color:var(--night-line-2);font:600 12px/1 var(--sans);letter-spacing:.01em;min-height:50px;padding:0 26px} .action:before{background:var(--lime)} .action.primary{background:var(--lime);color:#0a0a0a;border-color:var(--lime)} .action.primary:before{background:#fff} .action.primary:hover{color:#0a0a0a} .action.ghost{color:inherit} .action.ghost:hover{color:#0a0a0a;border-color:var(--lime)} /* Hero: full lime panel ---------------------------------------------------- */ .cover{background:var(--lime);color:#0a0a0a;border-bottom:0;padding-block:clamp(34px,6vh,74px)} .cover:before{display:none} .cover-index{color:rgba(10,10,10,.55);opacity:1} .cover-inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;min-height:min(62vh,660px)} .cover-left,.cover-right{align-items:center;text-align:center} .cover-right{order:-1} .cover-title{color:#0a0a0a;font-weight:800;letter-spacing:-.05em;line-height:.9;font-size:clamp(58px,min(10vw,15vh),150px)} .title-line{--nudge:0em} .title-line-c{color:#0a0a0a} .hero-medallion{width:min(100%,300px,34vh)} .medallion-inner img{filter:none;animation:float 7s ease-in-out infinite} .medallion-shadow{display:none} .hero-medallion figcaption{position:static;transform:none;box-shadow:none;background:#0a0a0a;color:var(--lime);border:0;border-radius:999px;padding:8px 16px;margin-top:12px;letter-spacing:.14em;text-align:center} .hero-medallion figcaption strong{color:#fff} .cover-note{border-radius:14px} .note-a{--rest:none;background:rgba(10,10,10,.06);border:1px solid rgba(10,10,10,.18);box-shadow:none;text-align:center;max-width:360px} .note-a .pin{display:none} .note-b{--rest:none;background:#0a0a0a;color:var(--ink);border:0;box-shadow:none;text-align:center;padding:14px 20px} .note-b span{justify-content:center;opacity:.7} .note-b span:before{background:var(--lime);box-shadow:0 0 0 3px rgba(204,255,0,.18)} .cover-actions{justify-content:center} .cover-contract{width:min(560px,100%);border:1px solid rgba(10,10,10,.2);border-radius:999px;padding:10px 20px;background:rgba(10,10,10,.05);text-align:left} .cover-contract-label{opacity:.6} .cover-contract .copy-ca{padding-top:2px} .copy-ca:hover{color:#0a0a0a;opacity:.7} .scroll-cue{margin-inline:auto;color:rgba(10,10,10,.7)} .scroll-cue i{background:#0a0a0a} /* Ticker ------------------------------------------------------------------- */ .marquee{background:var(--lime);color:#0a0a0a;border-top:1px solid rgba(10,10,10,.15);border-bottom:0;padding:14px 0} .marquee-group{letter-spacing:.16em;font-size:12px} .marquee-track b{color:#0a0a0a;opacity:.5} /* Shared section language -------------------------------------------------- */ section{scroll-margin-top:84px} .brief,.identity-scan,.receipts,.chain-file,.comparison,.storybook{border-bottom:1px solid var(--night-line);background:var(--paper);color:var(--ink)} .eyebrow{color:var(--night-text)} .brief h2,.receipts h2,.scan-copy h2,.chain-left h2,.comparison-head h2,.storybook-cover h2,.arcade h2{font-weight:800;letter-spacing:-.035em;color:var(--lime);text-transform:uppercase} .brief-number{color:var(--lime)} .brief-copy p,.chain-left>p,.scan-copy p:last-child,.section-intro{color:#c9d2da} .brief-copy p:first-child{color:var(--ink)} .brief-copy strong,.evidence-notes strong{box-shadow:none;color:var(--lime)} .meme-bio{background:var(--card);border:1px solid var(--card-line);border-left:3px solid var(--lime);border-radius:14px;margin-left:0} .meme-bio span{color:var(--night-text)} /* Receipts ---------------------------------------------------------------- */ .receipts{background:var(--paper)} .evidence{background:var(--card);border:1px solid var(--card-line);border-radius:16px;overflow:hidden;box-shadow:none} .evidence:hover{border-color:rgba(204,255,0,.35);box-shadow:0 20px 40px rgba(0,0,0,.5)} .evidence-meta{border-bottom-color:var(--night-line);color:var(--night-text);opacity:1} .evidence-shot{background:#0a0a0a;border-bottom-color:var(--night-line)} .evidence-shot-tag{background:var(--lime);color:#0a0a0a;border-radius:999px} .evidence-notes b{background:rgba(204,255,0,.14);color:var(--lime);border-radius:999px;padding:5px 10px} .evidence-notes span{color:var(--ink)} .evidence-link{border-color:var(--night-line-2);color:var(--night-text)} .evidence-link:hover{color:var(--lime);border-color:var(--lime)} /* Identity scan ----------------------------------------------------------- */ .scan-ruler{background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 20px);opacity:.1} .collar-card{background:var(--card);border:1px solid var(--card-line);border-radius:16px;box-shadow:none;rotate:none} .collar-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.5);border-color:rgba(204,255,0,.3)} .collar-card:after{display:none} .collar-card-head{color:var(--night-text);opacity:1} .collar-stage{background:#0a0a0a;border:0;border-radius:10px} .collar-card-foot{border-top:1px solid var(--night-line)} .collar-card-foot b{color:var(--lime)} .collar-card-foot span{color:var(--night-text);opacity:1} /* Comparables ------------------------------------------------------------- */ .comparison{background:var(--paper)} .ladder-item{border-top-color:var(--night-line)} .ladder-rank{color:var(--lime)} .ladder-bar{border-radius:999px;overflow:hidden} .ladder-bar>i{background:linear-gradient(90deg,var(--lime-dim),var(--lime));box-shadow:none} .ladder-item.kitsu{color:#0a0a0a} .ladder-item.kitsu:before{background:var(--lime);border-radius:18px;inset:0 calc(-1 * clamp(10px,1.4vw,20px));box-shadow:none} .kitsu .ladder-rank,.kitsu strong{color:#0a0a0a} .kitsu .ladder-bar{background:rgba(10,10,10,.1);border-color:rgba(10,10,10,.2);background-image:none} .kitsu .ladder-bar>i{background:#0a0a0a} .kitsu .ladder-bar em{color:rgba(10,10,10,.6)} .kitsu .ladder-id small{color:rgba(10,10,10,.6)} .live-dot{background:var(--lime);box-shadow:0 0 0 3px rgba(204,255,0,.18)} /* Finale ------------------------------------------------------------------ */ .finale{background:var(--lime);color:#0a0a0a} .finale:before{display:none} .finale-coin{opacity:.16;filter:none;animation:slowspin 60s linear infinite} .finale-copy h2{font-family:var(--sans);font-weight:800;letter-spacing:-.045em;line-height:.92} .finale-copy h2 .serif{font-family:var(--sans);color:#0a0a0a} .finale-actions a{border:1px solid rgba(10,10,10,.25);border-radius:999px;padding:12px 20px;background:#0a0a0a;color:var(--lime)} .finale-actions a:hover{color:#0a0a0a;background:#fff} /* Footer ------------------------------------------------------------------ */ .site-footer{background:#0a0a0a;border-top:1px solid var(--night-line);color:var(--night-text)} .footer-top{border-bottom-color:var(--night-line)} .footer-brand .wordmark{color:var(--ink)} .footer-social a{border-color:var(--night-line-2);border-radius:999px} .footer-social a:hover{background:var(--lime);color:#0a0a0a;border-color:var(--lime)} .footer-col h4{color:var(--night-text)} .footer-col>a:hover{color:var(--lime)} .footer-facts dl div{border-bottom-color:var(--night-line)} .footer-facts dt{color:var(--night-text)} .footer-facts dd{color:var(--ink)} .footer-contract .copy-ca{border-radius:14px;border-color:var(--night-line-2);color:var(--ink)} .footer-contract .copy-ca:hover{color:var(--lime);border-color:var(--lime);background:rgba(204,255,0,.05)} .footer-hint{color:var(--night-text)} /* Hero medallion flow fix (static stacking under the lime panel) */ .hero-medallion{display:flex;flex-direction:column;align-items:center;aspect-ratio:auto} .medallion-inner{position:static;inset:auto;width:100%;aspect-ratio:1} .hero-medallion figcaption{display:inline-flex;gap:8px;align-items:baseline} .hero-medallion figcaption strong{display:inline;margin:0;font-size:11px;letter-spacing:.1em} .cover-inner{gap:clamp(18px,2.4vw,30px)} .cover-left{gap:clamp(14px,1.8vh,24px)}