/* ========================================================= BIZARRE DOCKYARD // WEEKLY BIZARRE Concept 11 — the Dockyard homepage in the hashhog manga style. Self-contained: ported design tokens + components from static/hashhog/hashhog.css, generative SVG sigils, no images. ========================================================= */ /* ---- PALETTES (data-palette on ) ---- */ :root{ --paper:#f6e8c5; --paper-2:#f3c6d9; --paper-3:#b8e3ff; --ink:#1a0a2e; --ink-2:#2b1450; --ink-3:#3d1f70; --accent:#ff2bd0; --accent-2:#00e5ff; --accent-3:#ffe14d; --accent-4:#7c3aed; --accent-5:#22c55e; --muted:#5a3e7a; --border:rgba(26,10,46,.18); --shadow:6px 6px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink); --radial:radial-gradient(var(--ink) 1px, transparent 1.4px); } [data-palette="sunset-strike"]{--paper:#ffd9b8;--paper-2:#ffb3c1;--paper-3:#c7a0ff;--ink:#2d0e4e;--ink-2:#4a1574;--ink-3:#6a2ea3;--accent:#ff5a3c;--accent-2:#ffe14d;--accent-3:#00e5ff;--accent-4:#ff2bd0;--accent-5:#22c55e;--muted:#6a2a4a;} [data-palette="stand-aurora"]{--paper:#1b0740;--paper-2:#3a0b6a;--paper-3:#0a1b4a;--ink:#ffe14d;--ink-2:#f3c6d9;--ink-3:#b8e3ff;--accent:#ff2bd0;--accent-2:#00e5ff;--accent-3:#a2ff3a;--accent-4:#ffa30a;--accent-5:#22c55e;--muted:#b8a4e8;--border:rgba(255,225,77,.25);--shadow:6px 6px 0 #ff2bd0;--shadow-sm:3px 3px 0 #ff2bd0;} [data-palette="neon"]{--paper:#050010;--paper-2:#0c0625;--paper-3:#140a35;--ink:#ffe5ff;--ink-2:#f0d6ff;--ink-3:#c9a8ff;--accent:#ff2bd0;--accent-2:#00ffd1;--accent-3:#ffe14d;--accent-4:#9b5cff;--accent-5:#39ff88;--muted:#8868aa;--border:rgba(255,229,255,.2);--shadow:6px 6px 0 #ff2bd0;--shadow-sm:3px 3px 0 #ff2bd0;} [data-palette="ink-red"]{--paper:#f3eee4;--paper-2:#e8e0d0;--paper-3:#d8cdb7;--ink:#0a0908;--ink-2:#1a1716;--ink-3:#2c2623;--accent:#c4201c;--accent-2:#00aacc;--accent-3:#ffd23f;--accent-4:#7a2e8a;--accent-5:#2f8f4f;--muted:#6a5c49;} [data-intensity="subtle"]{--shadow:3px 3px 0 var(--ink);--shadow-sm:2px 2px 0 var(--ink);} /* ---- BASE ---- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body.hh{ font-family:'Zilla Slab',Georgia,serif; font-weight:600; background:var(--paper); color:var(--ink); overflow-x:hidden; cursor:default; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-image: radial-gradient(circle at 0% 0%, color-mix(in oklab,var(--paper-2) 60%,transparent), transparent 50%), radial-gradient(circle at 100% 30%, color-mix(in oklab,var(--paper-3) 60%,transparent), transparent 55%), radial-gradient(circle at 20% 100%, color-mix(in oklab,var(--accent-3) 35%,transparent), transparent 60%); background-attachment:fixed; } .hh a{color:inherit;text-decoration:none} .hh button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} body.hh::before{ /* grain */ content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.06;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } [data-grain="false"] body.hh::before{display:none} /* ---- TYPE ---- */ .hh .display{font-family:'Bungee',sans-serif;letter-spacing:.02em} .hh .display-shade{font-family:'Bungee Shade',sans-serif} .hh .holler{font-family:'Rubik Mono One',sans-serif;letter-spacing:.04em} .hh .mono{font-family:'JetBrains Mono',ui-monospace,monospace} .hh h1,.hh h2,.hh h3,.hh h4{margin:0;font-family:'Bungee',sans-serif;font-weight:400;letter-spacing:.01em} /* ---- LAYOUT ---- */ .hh .container{width:min(1240px,calc(100% - 48px));margin-inline:auto} .hh .section{padding:60px 0;position:relative} /* ---- PANEL ---- */ .hh .panel{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);position:relative} .hh .panel-sm{box-shadow:var(--shadow-sm)} .hh .panel-tilt-l{transform:rotate(-1.1deg)}.hh .panel-tilt-r{transform:rotate(1.1deg)} .hh .panel-holo{background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 15%,var(--paper)) 0%,color-mix(in oklab,var(--accent-2) 15%,var(--paper)) 35%,color-mix(in oklab,var(--accent-3) 20%,var(--paper)) 70%,color-mix(in oklab,var(--accent-4) 15%,var(--paper)) 100%)} /* ---- HALFTONE ---- */ .hh .halftone{background-image:var(--radial);background-size:8px 8px} .hh .halftone-lg{background-image:var(--radial);background-size:14px 14px} [data-halftone="false"] .halftone,[data-halftone="false"] .halftone-lg{background-image:none!important} /* ---- SPEEDLINES ---- */ .hh .speedlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 3px,var(--ink) 3px 4px,transparent 4px 24px);-webkit-mask:radial-gradient(ellipse at center,transparent 10%,black 60%);mask:radial-gradient(ellipse at center,transparent 10%,black 60%);opacity:0;transition:opacity .2s} .hh .speedlines-radial{background:repeating-conic-gradient(from 0deg at 50% 50%,var(--ink) 0 .4deg,transparent .4deg 4deg);-webkit-mask:radial-gradient(circle,transparent 20%,black 45%,transparent 80%);mask:radial-gradient(circle,transparent 20%,black 45%,transparent 80%)} .hh .group:hover>.speedlines,.hh .speedlines-always{opacity:1} [data-speedlines="false"] .speedlines{display:none} .hh .skew-hover{transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s} .hh .skew-hover:hover{transform:translate(-3px,-3px) rotate(-.6deg) skew(-1deg,-1deg);box-shadow:10px 10px 0 var(--ink)} /* ---- BUTTONS ---- */ .hh .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Bungee',sans-serif;font-size:14px;padding:13px 20px;background:linear-gradient(120deg,var(--accent),var(--accent-4));color:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--accent-3);transition:transform .15s,box-shadow .15s;letter-spacing:.05em;text-transform:uppercase} .hh .btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent-2)} .hh .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent-2)} .hh .btn-ghost{background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--ink)} .hh .btn-ghost:hover{box-shadow:8px 8px 0 var(--accent)} /* ---- ONOMATOPOEIA ---- */ .hh .onom{font-family:'Rubik Mono One',sans-serif;font-style:italic;letter-spacing:.02em;color:var(--paper);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--accent),7px 7px 0 var(--ink);line-height:.9;display:inline-block;transform-origin:center} .hh .onom-sm{-webkit-text-stroke:1px var(--ink);text-shadow:2px 2px 0 var(--accent),4px 4px 0 var(--ink)} .hh .onom-burst{animation:onom-in .5s cubic-bezier(.2,.8,.3,1.2) both} @keyframes onom-in{0%{transform:scale(.3) rotate(-18deg);opacity:0}60%{transform:scale(1.1) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-5deg);opacity:1}} [data-onomatopoeia="false"] .onom,[data-onomatopoeia="false"] .onom-burst{display:none!important} /* ---- RIBBON / STICKER ---- */ .hh .ribbon{font-family:'Bungee',sans-serif;background:linear-gradient(95deg,var(--accent),var(--accent-4));color:var(--paper);padding:6px 14px;display:inline-block;transform:rotate(-2deg);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);letter-spacing:.05em;text-transform:uppercase;font-size:12px} .hh .ribbon-gold{background:var(--accent-3);color:var(--ink)} .hh .ribbon-cyan{background:var(--accent-2);color:var(--ink)} .hh .ribbon-violet{background:var(--accent-4);color:var(--paper)} .hh .sticker{display:inline-block;background:var(--accent-3);color:var(--ink);padding:4px 10px;font-family:'Bungee',sans-serif;font-size:11px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg)} /* ---- NAV ---- */ .hh .nav{position:sticky;top:0;z-index:500;background:var(--ink);color:var(--paper);border-bottom:4px solid var(--accent)} .hh .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px;flex-wrap:wrap} .hh .logo{font-family:'Bungee',sans-serif;font-size:20px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px} .hh .logo .logo-mark{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--accent);color:var(--paper);border:2px solid var(--paper);transform:rotate(-6deg);font-family:'Rubik Mono One',sans-serif;font-size:17px} .hh .nav .navrow{display:flex;flex-wrap:wrap;align-items:center;gap:2px} .hh .nav a.navlink{font-family:'Bungee',sans-serif;font-size:11.5px;padding:7px 11px;border:2px solid transparent;transition:all .15s;text-transform:uppercase;letter-spacing:.05em} .hh .nav a.navlink:hover{border-color:var(--accent);background:var(--accent);color:var(--paper);transform:rotate(-1deg)} .hh .navtool{font-family:'JetBrains Mono',monospace;font-size:11px;border:2px solid var(--paper);padding:6px 10px;text-transform:uppercase;letter-spacing:.08em;transition:.15s;background:transparent;color:var(--paper)} .hh .navtool:hover{background:var(--accent-3);color:var(--ink);border-color:var(--accent-3)} /* ---- STATUS STRIP ---- */ .hh .statusbar{background:var(--ink);color:var(--paper-3);border-bottom:3px solid var(--accent-2)} .hh .statusbar .inner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:7px 0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase} .hh .statusbar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 12px var(--accent-3);animation:pulse 1.4s infinite} @keyframes pulse{50%{opacity:.25}} .hh .statusbar .sep{color:var(--accent)} .hh .statusbar .right{margin-left:auto;display:flex;gap:14px;align-items:center} .hh .blink::after{content:"▌";color:var(--accent-3);animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}} /* ---- HERO ---- */ .hh .hero{position:relative;overflow:hidden;border-bottom:4px solid var(--ink);background: radial-gradient(circle at 85% 25%, color-mix(in oklab,var(--accent-2) 30%,transparent), transparent 45%), var(--paper)} .hh .hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center;padding:54px 24px 64px} @media(max-width:880px){.hh .hero .container{grid-template-columns:1fr;padding:40px 24px 48px}} .hh .diag-burst{position:absolute;inset:-20% -10%;background:repeating-conic-gradient(from 10deg at 72% 32%,var(--ink) 0 1deg,transparent 1deg 6deg);-webkit-mask:radial-gradient(circle at 72% 32%,black 0,black 16%,transparent 44%);mask:radial-gradient(circle at 72% 32%,black 0,black 16%,transparent 44%);opacity:.5;pointer-events:none;z-index:1} .hh .eyebrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px} .hh .title{font-family:'Bungee',sans-serif;font-size:clamp(50px,9vw,128px);line-height:.86;letter-spacing:-.01em;margin:0} .hh .title .stroke{-webkit-text-stroke:3px var(--ink);-webkit-text-fill-color:transparent;color:transparent} .hh .title .crimson{color:var(--accent);text-shadow:6px 6px 0 var(--ink),12px 12px 0 var(--accent-3)} .hh .rainbow-text{background:linear-gradient(92deg,var(--accent) 0%,var(--accent-4) 20%,var(--accent-2) 40%,var(--accent-5) 60%,var(--accent-3) 80%,var(--accent) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--ink);animation:holo 6s linear infinite} @keyframes holo{to{background-position:220% 0}} .hh .subtitle{font-size:19px;line-height:1.5;font-style:italic;font-weight:700;max-width:60ch;margin:22px 0 0;color:var(--ink-2)} .hh .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .hh .stat-stickers{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .hh .stat-stickers .ss{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow-sm);padding:8px 14px;text-align:center} .hh .stat-stickers .ss b{display:block;font-family:'Bungee',sans-serif;font-size:22px;color:var(--accent)} .hh .stat-stickers .ss span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .hh .hero-emblem{position:relative;display:flex;align-items:center;justify-content:center} .hh .hero-emblem .frame{position:relative;width:min(360px,86%);aspect-ratio:1/1;border:4px solid var(--ink);background:var(--paper-2);box-shadow:10px 10px 0 var(--ink);overflow:hidden} .hh .hero-emblem .frame svg{display:block;width:100%;height:100%} .hh .hero-emblem .onom-float{position:absolute;font-size:46px} /* channel tags */ .hh .chips{display:flex;flex-wrap:wrap;gap:10px} .hh .chip{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border:2px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);display:inline-flex;align-items:center;gap:8px;transition:.15s} .hh .chip b{width:10px;height:10px;border-radius:50%;background:var(--c);border:1px solid var(--ink)} .hh .chip:hover{transform:translateY(-2px) rotate(-1deg);background:var(--c);color:var(--paper);box-shadow:3px 3px 0 var(--ink)} /* ---- TICKER ---- */ .hh .tickers{border-block:3px solid var(--ink);background:var(--paper);overflow:hidden} .hh .ticker{display:flex;align-items:center;overflow:hidden;border-bottom:2px solid var(--ink)} .hh .ticker:last-child{border-bottom:0} .hh .ticker .lbl{flex:none;font-family:'Bungee',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:var(--accent);padding:9px 14px;border-right:3px solid var(--ink)} .hh .ticker:last-child .lbl{background:var(--accent-4)} .hh .track{display:flex;gap:38px;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:var(--ink-2);padding:9px 0 9px 38px;letter-spacing:.02em} .hh .t1{animation:scroll 32s linear infinite}.hh .t2{animation:scroll 36s linear infinite reverse} .hh .track b{color:var(--accent);margin-right:8px} .hh .ticker:last-child .track b{color:var(--accent-4)} @keyframes scroll{to{transform:translateX(-50%)}} /* ---- SECTION HEADING ---- */ .hh .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;flex-wrap:wrap} .hh .sec-head h2{font-family:'Bungee',sans-serif;font-size:clamp(30px,4.4vw,46px)} /* ---- FEATURED / COVER STORY ---- */ .hh .feature{display:grid;grid-template-columns:1fr 1fr;min-height:420px} @media(max-width:820px){.hh .feature{grid-template-columns:1fr}} .hh .feature .left{padding:34px;border-right:3px solid var(--ink);background:var(--paper-2);position:relative} @media(max-width:820px){.hh .feature .left{border-right:0;border-bottom:3px solid var(--ink)}} .hh .feature h3{font-family:'Bungee',sans-serif;font-size:clamp(34px,5vw,58px);line-height:.92;margin:18px 0 6px} .hh .feature .codename{font-family:'Bungee',sans-serif;font-size:15px;color:var(--accent);margin-bottom:14px} .hh .feature p{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:52ch;margin:0 0 18px} .hh .feature .right{position:relative;background:var(--paper)} .hh .feature .right .sig{position:absolute;inset:0} .hh .feature .right .sig svg{width:100%;height:100%;display:block} /* ---- CARD GRID (spirit cards) ---- */ .hh .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px} .hh .spirit-card{position:relative;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .hh a.spirit-card:hover{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--ink)} .hh .spirit-card .portrait{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--ink);background:var(--paper-2)} .hh .spirit-card .portrait svg{display:block;width:100%;height:100%} .hh .spirit-card .codename-strip{position:absolute;top:12px;left:-6px;font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:4px 12px 4px 16px;transform:rotate(-2deg);z-index:3} .hh .spirit-card .lang-tag{position:absolute;top:12px;right:12px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;background:var(--paper);color:var(--ink);padding:3px 8px;border:2px solid var(--ink);z-index:3;text-transform:uppercase;letter-spacing:.06em} .hh .spirit-card .cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1} .hh .spirit-card .cno{font-family:'Bungee',sans-serif;font-size:12px;color:var(--c,var(--accent))} .hh .spirit-card h3{font-family:'Bungee',sans-serif;font-size:23px;line-height:1} .hh .spirit-card .user-tagline{font-size:13.5px;color:var(--muted);font-style:italic;font-weight:700} .hh .spirit-card .sum{font-size:14.5px;color:var(--ink-2);line-height:1.45;flex:1;margin:2px 0 0} .hh .spirit-card .cgo{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--accent));border-top:2px dashed var(--border);padding-top:10px} .hh .spirit-card.soon{opacity:.96} .hh .spirit-card .stamp-soon{position:absolute;top:14px;right:14px;z-index:4;font-family:'Bungee',sans-serif;font-size:12px;color:var(--accent);border:3px double var(--accent);border-radius:50%;width:74px;height:74px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:.95;transform:rotate(-12deg);background:color-mix(in oklab,var(--paper) 80%,transparent);box-shadow:0 0 0 4px var(--paper)} /* ---- SIDE PANELS (status / signal / control) ---- */ .hh .sidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px} @media(max-width:820px){.hh .sidegrid{grid-template-columns:1fr}} .hh .pane{border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow-sm);padding:18px 20px} .hh .pane .ph{font-family:'Bungee',sans-serif;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-4);margin:0 0 14px;display:flex;align-items:center;gap:8px} .hh .kv{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:12.5px;padding:7px 0;border-bottom:2px dashed var(--border);color:var(--ink-2)} .hh .kv:last-child{border:0}.hh .kv span:last-child{color:var(--ink);font-weight:700} .hh .eq{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:6px} .hh .eq i{flex:1;background:linear-gradient(180deg,var(--accent-3),var(--accent));border:2px solid var(--ink);animation:eq 1.2s ease-in-out infinite;transform-origin:bottom} .hh .eq i:nth-child(2){animation-delay:.15s}.hh .eq i:nth-child(3){animation-delay:.3s}.hh .eq i:nth-child(4){animation-delay:.05s}.hh .eq i:nth-child(5){animation-delay:.22s}.hh .eq i:nth-child(6){animation-delay:.36s}.hh .eq i:nth-child(7){animation-delay:.12s}.hh .eq i:nth-child(8){animation-delay:.28s} @keyframes eq{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}} .hh .ctl-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--ink);color:var(--paper);font-family:'Bungee',sans-serif;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:12px 14px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--accent);transition:.15s;margin-bottom:10px} .hh .ctl-btn:hover{box-shadow:5px 5px 0 var(--accent-2);transform:translate(-1px,-1px)} .hh .ctl-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);line-height:1.6;margin:6px 0 0} /* ---- REVEAL ---- */ .hh .reveal{opacity:0;transform:translateY(16px);transition:all .6s cubic-bezier(.2,.8,.3,1)} .hh .reveal.in{opacity:1;transform:none} /* ---- CURSOR AURA ---- */ .hh .aura{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:multiply;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 50%,transparent) 0%,color-mix(in oklab,var(--accent-2) 28%,transparent) 35%,transparent 70%);transform:translate(-50%,-50%) scale(.9);transition:transform .12s cubic-bezier(.2,.9,.3,1.2),opacity .2s;opacity:.85} [data-palette="neon"] .hh .aura,[data-palette="stand-aurora"] .hh .aura{mix-blend-mode:screen} [data-cursor-aura="false"] .aura{display:none} /* ---- FOOTER ---- */ .hh footer.foot{background:var(--ink);color:var(--paper);padding:54px 0 40px;border-top:6px solid var(--accent);position:relative;overflow:hidden;margin-top:48px} .hh footer.foot .container{position:relative;z-index:2} .hh footer.foot .frow{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em} .hh footer.foot a{color:var(--paper-3)}.hh footer.foot a:hover{color:var(--accent-3)} .hh footer .mini{font-family:'JetBrains Mono',monospace;font-size:12px;opacity:.7} .hh footer .biglogo{font-family:'Bungee Shade',sans-serif;font-size:clamp(40px,9vw,96px);line-height:.9;color:var(--paper);opacity:.16;position:absolute;right:18px;bottom:-12px;z-index:1;pointer-events:none;white-space:nowrap} @media(prefers-reduced-motion:reduce){*{animation:none!important}}