/* ========================================================================== DOGECAT — comic / halftone / 3D-perspective stylesheet ========================================================================== */ :root{ --ink:#120b08; --red:#e01b13; --red-deep:#9c0d08; --orange:#f7941e; --gold:#ffcf4d; --cream:#fdeec9; --paper:#f6e7c5; --shadow: 10px 10px 0 var(--ink); --shadow-sm: 6px 6px 0 var(--ink); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:hidden; overflow-x:clip; /* `clip` keeps overflow-y `visible` — `hidden` would turn the page into a scroll container */ } /* NOTE: perspective lives on .deep / .stair, never on . A perspective on would make it the containing block for the position:fixed background stack, which then adds real scroll height. */ body{ margin:0; background:#180705; color:var(--ink); font-family:'Nunito', system-ui, sans-serif; font-weight:700; overflow-x:hidden; overflow-x:clip; } .font-comic{ font-family:'Bangers', cursive; letter-spacing:.03em; } .font-pop { font-family:'Luckiest Guy', cursive; letter-spacing:.02em; } /* ------------------------------------------------------------------ * * FIXED BACKGROUND STACK — image + halftone + speed burst * ------------------------------------------------------------------ */ .bg-stack{ position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; } .bg-photo{ position:absolute; inset:-4%; background-image:url('2.png'); background-size:cover; background-position:center; filter:saturate(1.15) contrast(1.05) blur(2px); opacity:.34; transform:scale(1.06); } .bg-tint{ position:absolute; inset:0; background: radial-gradient(circle at 50% 18%, rgba(247,148,30,.42), transparent 55%), linear-gradient(180deg, rgba(20,4,3,.82) 0%, rgba(120,10,8,.78) 45%, rgba(16,4,3,.92) 100%); } /* comic speed-burst rays radiating from top center */ .bg-rays{ position:absolute; inset:-30% -30%; background:repeating-conic-gradient( from 0deg at 50% 22%, rgba(255,255,255,.055) 0deg 2.4deg, rgba(0,0,0,0) 2.4deg 7deg ); mix-blend-mode:screen; animation:spinRays 90s linear infinite; } @keyframes spinRays{ to{ transform:rotate(360deg); } } /* halftone dots */ .bg-dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(0,0,0,.42) 1.4px, transparent 1.5px); background-size:9px 9px; opacity:.5; } /* paper grain / vignette */ .bg-vig{ position:absolute; inset:0; box-shadow:inset 0 0 260px 70px rgba(0,0,0,.75); } /* ------------------------------------------------------------------ * * COMIC PRIMITIVES * ------------------------------------------------------------------ */ .panel{ position:relative; background:var(--paper); border:5px solid var(--ink); border-radius:6px; box-shadow:var(--shadow); } .panel::after{ /* halftone texture inside every panel */ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(0,0,0,.16) 1.1px, transparent 1.2px); background-size:7px 7px; pointer-events:none; border-radius:2px; mix-blend-mode:multiply; opacity:.55; } .ink-line{ border:5px solid var(--ink); } .stroke-ink{ -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; } /* extruded 3D comic title */ .title-3d{ color:var(--gold); -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; text-shadow: 3px 3px 0 var(--red-deep), 6px 6px 0 var(--red-deep), 9px 9px 0 var(--ink), 12px 12px 0 rgba(0,0,0,.35); } .title-3d-sm{ color:var(--cream); -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:4px 5px 0 var(--red-deep), 7px 8px 0 var(--ink); } /* speech bubble */ .bubble{ position:relative; background:#fff; border:5px solid var(--ink); border-radius:26px; box-shadow:var(--shadow-sm); padding:1.25rem 1.5rem; } .bubble::before, .bubble::after{ content:''; position:absolute; bottom:-30px; left:44px; border:16px solid transparent; border-top-color:var(--ink); border-bottom:0; } .bubble::after{ bottom:-21px; left:49px; border-width:12px; border-top-color:#fff; } /* caption box (comic narration strip) */ .caption{ background:var(--gold); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-family:'Bangers', cursive; letter-spacing:.05em; } /* jagged burst badge */ .burst{ background:var(--gold); border:4px solid var(--ink); clip-path:polygon( 50% 0%,60% 12%,73% 5%,76% 20%,90% 18%,86% 32%,100% 38%,89% 49%, 100% 62%,86% 68%,90% 82%,76% 80%,73% 95%,60% 88%,50% 100%,40% 88%, 27% 95%,24% 80%,10% 82%,14% 68%,0% 62%,11% 49%,0% 38%,14% 32%, 10% 18%,24% 20%,27% 5%,40% 12% ); } /* comic buttons */ .btn-comic{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Luckiest Guy', cursive; letter-spacing:.04em; border:4px solid var(--ink); border-radius:999px; padding:.85rem 1.7rem; box-shadow:6px 6px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; text-decoration:none; white-space:nowrap; } .btn-comic:hover{ transform:translate(3px,3px) rotate(-1deg); box-shadow:3px 3px 0 var(--ink); filter:saturate(1.15); } .btn-comic:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); } .btn-gold{ background:linear-gradient(180deg,#ffe27a,#f7a41e); color:var(--ink); } .btn-red { background:linear-gradient(180deg,#ff4c3f,#c1120c); color:#fff; } .btn-cream{ background:var(--cream); color:var(--ink); } .btn-ink { background:var(--ink); color:var(--gold); } /* ------------------------------------------------------------------ * * 3D PERSPECTIVE PANELS * ------------------------------------------------------------------ */ /* Per-group perspective — the parent of any tilted element carries it. */ .deep, .stair{ perspective:1400px; perspective-origin:50% 40%; } /* Tilts publish their pose through --tilt so the scroll-reveal below can compose with them instead of fighting over the `transform` property. */ .tilt-l{ --tilt:rotateY(14deg) rotateX(4deg) rotateZ(-2deg); } .tilt-r{ --tilt:rotateY(-14deg) rotateX(4deg) rotateZ(2deg); } .tilt-c{ --tilt:rotateX(6deg) scale(1.04); z-index:3; } .tilt-l,.tilt-r,.tilt-c{ transform:var(--tilt); transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease; } .tilt-l:hover,.tilt-r:hover,.tilt-c:hover{ --tilt:rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.07) translateZ(60px); box-shadow:18px 18px 0 var(--ink); z-index:9; } /* stair-step perspective row for How To Buy */ .stair > *{ transform:var(--tilt); transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease; } .stair > *:nth-child(1){ --tilt:rotateY(18deg) translateZ(-40px) translateY(0); } .stair > *:nth-child(2){ --tilt:rotateY(9deg) translateZ(-10px) translateY(28px); } .stair > *:nth-child(3){ --tilt:rotateY(-9deg) translateZ(-10px) translateY(56px); } .stair > *:nth-child(4){ --tilt:rotateY(-18deg) translateZ(-40px) translateY(84px); } .stair > *:hover{ --tilt:rotateY(0) translateZ(70px) translateY(0) scale(1.03); box-shadow:16px 16px 0 var(--ink); z-index:9; } /* ------------------------------------------------------------------ * * SCROLL REVEAL (perspective drop-in) * — declared after the tilts so it wins the `transform` cascade, then * folds the element's own --tilt pose back in. * ------------------------------------------------------------------ */ .rise{ opacity:0; transform:translateY(70px) rotateX(28deg) var(--tilt,); transform-origin:50% 100%; transition:opacity .7s ease, transform .55s cubic-bezier(.16,.9,.3,1); } .rise.in{ opacity:1; transform:var(--tilt, none); } .rise.d1{ transition-delay:.10s } .rise.d2{ transition-delay:.20s } .rise.d3{ transition-delay:.30s } .rise.d4{ transition-delay:.40s } /* ------------------------------------------------------------------ * * MARQUEE TICKER * ------------------------------------------------------------------ */ .ticker{ background:var(--gold); border-top:5px solid var(--ink); border-bottom:5px solid var(--ink); overflow:hidden; } .ticker-track{ display:flex; width:max-content; animation:slide 26s linear infinite; } .ticker-track span{ font-family:'Bangers', cursive; font-size:1.65rem; letter-spacing:.08em; padding:.55rem 1.4rem; color:var(--ink); white-space:nowrap; } @keyframes slide{ to{ transform:translateX(-50%); } } .ticker:hover .ticker-track{ animation-play-state:paused; } /* ------------------------------------------------------------------ * * MISC * ------------------------------------------------------------------ */ .float{ animation:bob 5.5s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-20px) rotate(1.5deg);} } .wobble{ animation:wob 7s ease-in-out infinite; } @keyframes wob{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} } .edge-torn{ height:34px; background:var(--ink); clip-path:polygon(0 0,4% 60%,9% 10%,15% 70%,21% 15%,27% 66%,33% 8%,39% 72%,45% 18%,52% 68%,58% 10%,64% 74%,70% 20%,76% 62%,82% 6%,88% 70%,94% 16%,100% 60%,100% 0); } .ca-box{ background:var(--ink); color:var(--gold); border:4px solid var(--ink); font-family:ui-monospace, 'SFMono-Regular', Menlo, monospace; font-weight:700; word-break:break-all; } /* dexscreener frame */ .screen{ background:#0b0b0f; border:6px solid var(--ink); box-shadow:16px 16px 0 var(--ink); overflow:hidden; } .screen iframe{ width:100%; height:100%; border:0; display:block; } .nav-link{ font-family:'Bangers', cursive; font-size:1.25rem; letter-spacing:.06em; color:var(--cream); text-decoration:none; padding:.15rem .2rem; transition:color .15s ease, transform .15s ease; } .nav-link:hover{ color:var(--gold); transform:rotate(-3deg) scale(1.08); } /* mobile tweaks */ @media (max-width:1023px){ .tilt-l,.tilt-r,.tilt-c,.stair > *{ --tilt: ; } .tilt-l:hover,.tilt-r:hover,.tilt-c:hover,.stair > *:hover{ --tilt:scale(1.02); } .deep,.stair{ perspective:none; } :root{ --shadow:7px 7px 0 var(--ink); } }