/* ========================================================================== ARCADE CABINET — a blog that lives inside a coin-op machine Everything you would normally want to change lives in the :root block. Six cabinet colours are below it: and so on. ========================================================================== */ @font-face{font-family:'Pixel';src:url(fonts/PressStart2P.woff2) format('woff2');font-display:block} @font-face{font-family:'Term';src:url(fonts/VT323.woff2) format('woff2');font-display:block} :root{ /* --- CORAL: the default cabinet. Swap these lines to repaint the site --- */ --room:#1b1b1f; /* the arcade room behind the cabinet */ --cab:#ef5b3c; /* cabinet body */ --cabdark:#c9422a; /* cabinet shadow side + control deck */ --bezel:#4c4785; /* the panel around the tube */ --screen:#2b2148; /* the tube itself */ --panel:#372a5c; /* cards drawn on the screen */ --line:#5b4a94; /* card borders */ --ink:#fdf6e3; /* body text */ --dim:#b8a8d8; /* quiet text */ --a1:#ffc63c; /* accent 1 — scores, headings */ --a2:#ff7a3d; /* accent 2 — links, 1UP */ --a3:#5be0a8; /* accent 3 — tags, ok states */ --radius:12px; --shadow:0 8px 0 rgba(0,0,0,.26); } html[data-cab="blueberry"]{--room:#141a2e;--cab:#3d6fe0;--cabdark:#2b4fae;--bezel:#2f3a6b;--screen:#161d3d; --panel:#1f2a55;--line:#3d4d8f;--ink:#eaf2ff;--dim:#a8b8e0;--a1:#ffd84d;--a2:#63d7ff;--a3:#63ffc2} html[data-cab="lime"]{--room:#12210f;--cab:#7ec93f;--cabdark:#5da12c;--bezel:#2f4a35;--screen:#132a1c; --panel:#1b3a26;--line:#3a6b46;--ink:#f2ffe6;--dim:#b3d8a8;--a1:#ffe14d;--a2:#ff9b3d;--a3:#7de3ff} html[data-cab="bubblegum"]{--room:#2a0f24;--cab:#ff6fae;--cabdark:#d94b8b;--bezel:#5a3070;--screen:#2c1445; --panel:#3a1c58;--line:#6a3f8f;--ink:#fff0fa;--dim:#e0b0d4;--a1:#ffe14d;--a2:#7de3ff;--a3:#c98aff} html[data-cab="sunburst"]{--room:#241505;--cab:#ffb02e;--cabdark:#d98a15;--bezel:#5a3a2a;--screen:#301c14; --panel:#40261a;--line:#6e4630;--ink:#fff6e0;--dim:#e5c39a;--a1:#ffe14d;--a2:#ff5d3d;--a3:#7de3a8} html[data-cab="midnight"]{--room:#0c0c10;--cab:#2f3140;--cabdark:#1f212c;--bezel:#15161f;--screen:#0d0f18; --panel:#171926;--line:#2e3145;--ink:#d8f5ff;--dim:#93a4bb;--a1:#4de2ff;--a2:#ff4d8d;--a3:#7dffb0} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* the arcade carpet — a pattern, not a picture, so it never loads slowly */ html{background: radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cab) 22%,transparent) 0 3px,transparent 4px) 0 0/54px 54px, radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--a1) 16%,transparent) 0 2px,transparent 3px) 27px 27px/54px 54px, repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 26px), var(--room)} body{font-family:'Term',ui-monospace,monospace;font-size:21px;line-height:1.35;color:var(--ink); min-height:100vh;padding:26px 20px 40px;overflow-x:hidden} img{max-width:100%;display:block} a{color:var(--a2);text-decoration:none} a:hover{color:var(--a1)} /* ========================================================================== THE CABINET ========================================================================== */ .cab{max-width:1140px;margin:0 auto;background:var(--cab);border-radius:34px;padding:20px 20px 0; box-shadow:inset 0 -16px 0 rgba(0,0,0,.16),0 26px 60px rgba(0,0,0,.5)} /* the lit sign on top of every real cabinet */ .marqueebox{position:relative;border-radius:16px;margin-bottom:18px;padding:26px 30px 24px;text-align:center; background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 94%,var(--a1)),color-mix(in srgb,var(--a1) 70%,#fff)); box-shadow:inset 0 0 0 5px var(--cabdark),0 6px 0 rgba(0,0,0,.22),0 0 60px color-mix(in srgb,var(--a1) 40%,transparent)} .marqueebox h1{font-family:'Pixel',monospace;font-size:clamp(17px,4.4vw,38px);line-height:1.5;letter-spacing:2px; color:var(--cabdark);text-shadow:3px 3px 0 color-mix(in srgb,var(--cab) 60%,#fff)} .marqueebox h1 a{color:inherit} .marqueebox .tag{font-size:19px;letter-spacing:1px;margin-top:10px;color:color-mix(in srgb,var(--cabdark) 80%,#000)} /* the bulbs around the sign */ .bulbs{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between} .bulbs.top{top:9px}.bulbs.bot{bottom:9px} .bulbs i{width:9px;height:9px;border-radius:50%;background:var(--cab); box-shadow:0 0 8px color-mix(in srgb,var(--cab) 70%,transparent);animation:bulb 1.6s steps(1) infinite} @keyframes bulb{0%,49%{opacity:1}50%,100%{opacity:.28}} /* the recessed cabinet front, drawn with one conic gradient */ .bezel{position:relative;border-radius:10px;padding:26px 22px; background:conic-gradient(from 45deg at 50% 50%, color-mix(in srgb,var(--bezel) 78%,#000) 0 25%, color-mix(in srgb,var(--bezel) 88%,#000) 0 50%, color-mix(in srgb,var(--bezel) 100%,#fff 12%) 0 75%, color-mix(in srgb,var(--bezel) 90%,#fff 4%) 0)} /* the tube */ .crt{position:relative;border-radius:56px/34px;overflow:hidden;padding:22px 30px 30px;background: radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.10),transparent 55%), radial-gradient(90% 60% at 50% 110%,rgba(0,0,0,.35),transparent 60%),var(--screen); box-shadow:inset 0 0 46px rgba(0,0,0,.5),0 0 0 3px rgba(0,0,0,.25)} .crt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;background: linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 78px, linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/92px 100%} .crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit; box-shadow:inset 0 0 70px 22px rgba(0,0,0,.42)} /* scanlines + glass glare. Delete this line in the HTML for a flat screen. */ .glass{position:absolute;inset:0;pointer-events:none;z-index:5;background: radial-gradient(58% 34% at 26% 6%,rgba(255,255,255,.08),transparent 70%), repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 4px); animation:flick 5.2s steps(1) infinite} @keyframes flick{0%,92%,100%{opacity:1}94%{opacity:.86}96%{opacity:1}98%{opacity:.9}} .inner{position:relative;z-index:3} /* ========================================================================== HUD + MENU (the top of the screen) ========================================================================== */ .hud{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-family:'Pixel',monospace;font-size:10px; line-height:1.9;padding-bottom:14px;border-bottom:2px solid var(--line);margin-bottom:16px} .hud .p1{color:var(--a2)} .hud .p1 b{font-weight:400;color:var(--ink);margin-left:8px} .hud .coin{color:var(--a1);animation:blink 1.1s steps(1) infinite} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} .hud .spacer{flex:1} .hud .cabs{display:flex;gap:6px} .hud .cabs button{width:20px;height:24px;border:2px solid rgba(255,255,255,.45);border-radius:5px 5px 3px 3px; background:var(--c);cursor:pointer;padding:0} .hud .cabs button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)} .nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:'Pixel',monospace;font-size:11px;padding:4px 0 14px} .nav a{color:var(--ink);padding:6px 2px} .nav a::before{content:"▶";color:var(--a2);opacity:0;margin-right:8px} .nav a:hover::before,.nav a[aria-current="page"]::before{opacity:1} .nav a[aria-current="page"]{color:var(--a1)} .ticker{overflow:hidden;border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:8px 0; margin-bottom:24px;font-family:'Pixel',monospace;font-size:9px;color:var(--a3)} .ticker span{display:inline-block;white-space:nowrap;padding-left:100%;animation:roll 26s linear infinite} @keyframes roll{to{transform:translateX(-100%)}} /* ========================================================================== LAYOUT + PANELS ========================================================================== */ .cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start} main{flex:1 1 560px;min-width:0} aside{flex:0 1 296px;min-width:0} .panel{background:var(--panel);border:3px solid var(--line);border-radius:var(--radius);margin-bottom:22px; box-shadow:var(--shadow)} .panel-bar{display:flex;align-items:center;gap:10px;font-family:'Pixel',monospace;font-size:10px; background:var(--a1);color:color-mix(in srgb,var(--screen) 80%,#000);padding:10px 12px;border-radius:8px 8px 0 0} .panel-bar .lamp{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.55} .panel-body{padding:20px} /* the attract screen at the top of the home page */ .attract{text-align:center;padding:34px 20px 30px} .attract .big{font-family:'Pixel',monospace;font-size:clamp(15px,3.6vw,26px);line-height:1.7;color:var(--a1); text-shadow:0 0 18px color-mix(in srgb,var(--a1) 45%,transparent)} .attract p{color:var(--dim);margin:16px auto 22px;max-width:52ch} .start{display:inline-block;font-family:'Pixel',monospace;font-size:12px;padding:16px 22px;border-radius:10px; background:var(--a2);color:color-mix(in srgb,var(--screen) 85%,#000);box-shadow:0 6px 0 rgba(0,0,0,.42)} .start:hover{background:var(--a1);color:color-mix(in srgb,var(--screen) 85%,#000)} .start:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.42)} .blinker{animation:blink 1.2s steps(1) infinite} /* ========================================================================== POSTS ========================================================================== */ .post{display:flex;gap:18px;padding:20px;border-bottom:2px dashed var(--line)} .post:last-child{border-bottom:0} .post .thumb{flex:0 0 104px;height:104px;border-radius:10px;display:grid;place-items:center; background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 45%,var(--screen)),var(--screen)); border:3px solid var(--line)} .meta{font-family:'Pixel',monospace;font-size:9px;color:var(--a1);display:flex;flex-wrap:wrap;align-items:center; gap:8px;margin-bottom:10px;line-height:1.9} .meta .dot{width:5px;height:5px;background:var(--dim);display:inline-block} h2.title,h3.title{font-family:'Pixel',monospace;line-height:1.65;margin-bottom:10px} h2.title{font-size:16px}h3.title{font-size:13px} .title a{color:var(--ink)} .title a:hover{color:var(--a2)} .excerpt{color:var(--dim)} .more{display:inline-block;margin-top:12px;font-family:'Pixel',monospace;font-size:10px;color:var(--a3)} .more::after{content:" ▶"} /* ========================================================================== SIDE WIDGETS ========================================================================== */ .widget{background:var(--panel);border:3px solid var(--line);border-radius:var(--radius);margin-bottom:20px; box-shadow:var(--shadow);overflow:hidden} .widget h4{font-family:'Pixel',monospace;font-size:10px;padding:10px 12px;background:var(--a2); color:color-mix(in srgb,var(--screen) 85%,#000)} .widget .body{padding:16px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips a{font-family:'Pixel',monospace;font-size:9px;color:var(--ink);border:2px solid var(--line); border-radius:20px;padding:8px 10px} .chips a:hover,.chips a.is-on{border-color:var(--a1);color:var(--a1)} .score{display:flex;justify-content:space-between;gap:10px;font-family:'Pixel',monospace;font-size:10px; color:var(--a1);padding:9px 0;border-bottom:2px dotted var(--line);line-height:1.8} .score:last-child{border-bottom:0} .score b{font-weight:400;color:var(--ink)} .hits{display:flex;gap:4px;justify-content:center} .hits b{font-family:'Pixel',monospace;font-size:13px;font-weight:400;color:var(--a3);padding:8px 6px;border-radius:4px; background:color-mix(in srgb,var(--screen) 82%,#000)} .lives{font-family:'Pixel',monospace;font-size:12px;color:var(--a2);text-align:center;letter-spacing:5px;margin-top:14px} /* ========================================================================== SINGLE POST ========================================================================== */ .progress{position:fixed;left:0;top:0;height:6px;width:0;background:var(--a2);z-index:30} .article{padding:24px 26px} .article p{margin-bottom:18px} .article h3{font-family:'Pixel',monospace;font-size:12px;color:var(--a1);margin:26px 0 12px;line-height:1.7} .article blockquote{border-left:5px solid var(--a2);padding:6px 0 6px 18px;margin:22px 0;color:var(--dim)} .article ul{margin:0 0 18px 22px;color:var(--dim)} .article code{font-family:'Term',monospace;background:color-mix(in srgb,var(--screen) 82%,#000);color:var(--a3); padding:2px 7px;border-radius:5px} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} /* ========================================================================== SEARCH · GALLERY · CABINET SELECT ========================================================================== */ .search{display:flex;flex-wrap:wrap;gap:12px;padding:18px 20px} .search input{flex:1 1 220px;font-family:'Term',monospace;font-size:20px;padding:12px 14px;border-radius:8px; background:color-mix(in srgb,var(--screen) 82%,#000);border:3px solid var(--line);color:var(--ink)} .search input:focus{outline:none;border-color:var(--a1)} .empty{padding:24px 20px;color:var(--dim)} .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;padding:20px} .gal-item{background:color-mix(in srgb,var(--screen) 82%,#000);border:3px solid var(--line);border-radius:10px; padding:18px 10px 12px;cursor:pointer;display:grid;justify-items:center;gap:12px;color:inherit} .gal-item:hover{border-color:var(--a1)} .gal-item span{width:72px;height:72px;color:var(--a3);--sprite2:var(--ink)} .gal-item b{font-family:'Pixel',monospace;font-size:8px;color:var(--dim);letter-spacing:1px} .lightbox{position:fixed;inset:0;z-index:50;background:rgba(6,4,12,.9);display:none;place-items:center} .lightbox.is-open{display:grid} .lb-art{display:block;width:min(58vw,320px);height:min(58vw,320px);margin:0 auto 20px;color:var(--a2);--sprite2:var(--ink)} .lb-name{font-family:'Pixel',monospace;font-size:13px;color:var(--a1);display:block;margin-bottom:20px;text-align:center} .lb-close{font-family:'Pixel',monospace;font-size:10px;padding:12px 16px;border:0;border-radius:8px;cursor:pointer; background:var(--a2);color:color-mix(in srgb,var(--screen) 85%,#000);display:block;margin:0 auto} /* the six little cabinets on the gallery page — click one to repaint the site */ .lineup{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:18px;padding:20px} .mini{border:0;background:none;cursor:pointer;display:grid;justify-items:center;gap:10px;padding:0} /* every part is a span, so each one needs display:block or the cabinet collapses */ .mini .body{display:block;width:100%;max-width:130px;border-radius:14px 14px 6px 6px;padding:9px 9px 0; background:var(--mc);box-shadow:inset 0 -8px 0 rgba(0,0,0,.16)} .mini .sign{display:block;height:15px;border-radius:5px;background:var(--m1);margin-bottom:7px} .mini .tube{display:block;height:66px;border-radius:18px/12px;background:var(--ms); box-shadow:inset 0 0 0 5px var(--mb),inset 0 0 18px rgba(0,0,0,.55)} .mini .rowdeck{height:22px;margin:6px -9px 0;border-radius:0 0 6px 6px;background:var(--md); display:flex;align-items:center;justify-content:center;gap:5px} .mini .rowdeck i{width:8px;height:8px;border-radius:50%;background:var(--m1)} .mini b{font-family:'Pixel',monospace;font-size:8px;color:var(--dim);letter-spacing:1px} .mini:hover b,.mini[aria-pressed="true"] b{color:var(--a1)} .mini[aria-pressed="true"] .body{box-shadow:0 0 0 3px var(--a1)} /* ========================================================================== ABOUT · LINKS · CONTACT ========================================================================== */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;padding:20px} .stat{background:color-mix(in srgb,var(--screen) 82%,#000);border:3px solid var(--line);border-radius:10px; padding:16px;text-align:center} .stat b{display:block;font-family:'Pixel',monospace;font-size:18px;color:var(--a1);margin-bottom:8px} .stat span{color:var(--dim);font-size:17px} .steps{padding:20px} .step{display:flex;gap:16px;margin-bottom:18px} .step:last-child{margin-bottom:0} .step b{font-family:'Pixel',monospace;font-size:12px;color:var(--a2);flex:0 0 62px;line-height:1.7} .faq{padding:4px 20px 20px} .faq details{border-bottom:2px dotted var(--line);padding:14px 0} .faq details:last-child{border-bottom:0} .faq summary{font-family:'Pixel',monospace;font-size:11px;color:var(--a1);cursor:pointer;line-height:1.7} .faq p{margin-top:12px;color:var(--dim)} .buttons88{display:flex;flex-wrap:wrap;gap:12px;padding:20px} .b88{width:88px;height:31px;border:2px solid var(--line);border-radius:3px;display:grid;place-items:center; font-family:'Pixel',monospace;font-size:7px;line-height:1.6;text-align:center;color:var(--a3); background:color-mix(in srgb,var(--screen) 82%,#000)} .b88:hover{border-color:var(--a1)} .rows{padding:8px 20px 20px} .rows a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;color:var(--ink); border-bottom:2px dotted var(--line)} .rows a:last-child{border-bottom:0} .rows a span{color:var(--dim);font-size:18px} .rows a:hover{color:var(--a1)} form.arcade{padding:20px;display:grid;gap:14px} form.arcade input,form.arcade textarea{font-family:'Term',monospace;font-size:20px;padding:12px 14px;width:100%; border-radius:8px;background:color-mix(in srgb,var(--screen) 82%,#000);border:3px solid var(--line);color:var(--ink)} form.arcade textarea{min-height:130px;resize:vertical} form.arcade input:focus,form.arcade textarea:focus{outline:none;border-color:var(--a1)} form.arcade button{font-family:'Pixel',monospace;font-size:11px;padding:14px 18px;border:0;border-radius:10px; cursor:pointer;justify-self:start;background:var(--a1);color:color-mix(in srgb,var(--screen) 85%,#000); box-shadow:0 5px 0 rgba(0,0,0,.4)} form.arcade button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.4)} .note{font-family:'Pixel',monospace;font-size:9px;color:var(--a3);line-height:1.9} .gb{border-bottom:2px dotted var(--line);padding:14px 0} .gb:last-child{border-bottom:0} .gb b{font-family:'Pixel',monospace;font-size:10px;color:var(--a2)} .gb p{color:var(--dim);margin-top:8px} /* ========================================================================== THE CONTROL DECK — the footer is the panel you would rest your hands on ========================================================================== */ .deck{position:relative;margin:0 -20px;padding:22px 26px 26px;border-radius:0 0 34px 34px;background:var(--cabdark); box-shadow:inset 0 7px 0 rgba(255,255,255,.10);display:flex;flex-wrap:wrap;align-items:center;gap:22px} .stick{position:relative;width:120px;height:86px;flex:0 0 120px} .stick .base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:104px;height:26px;border-radius:50%; background:radial-gradient(60% 100% at 50% 30%,var(--a1),color-mix(in srgb,var(--a1) 55%,#000)); box-shadow:0 4px 0 rgba(0,0,0,.22)} .stick .arm{position:absolute;left:50%;bottom:14px;width:52px;height:82px;margin-left:-26px; transform-origin:bottom center;transition:transform .22s steps(3)} .stick .shaft{position:absolute;left:50%;bottom:0;margin-left:-8px;width:16px;height:56px;border-radius:8px; background:linear-gradient(90deg,#5a57d8,#9d9bff 45%,#6f6cf0)} .stick .ball{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%; background:radial-gradient(38% 34% at 34% 28%,#fff,#efe9e0 55%,#c9c1b6);box-shadow:0 3px 0 rgba(0,0,0,.2)} .stick.left .arm{transform:rotate(-16deg)} .stick.right .arm{transform:rotate(16deg)} .deck .pad{display:flex;align-items:flex-end;gap:16px;flex:0 0 auto} .deck .btn{width:56px;height:26px;border-radius:50%;position:relative;border:0;cursor:pointer;padding:0; background:color-mix(in srgb,var(--bc) 55%,#000);transition:transform .1s steps(2)} .deck .btn::after{content:"";position:absolute;left:0;right:0;top:-9px;height:26px;border-radius:50%; background:radial-gradient(60% 100% at 40% 25%,color-mix(in srgb,var(--bc) 70%,#fff),var(--bc))} .deck .btn.b1{--bc:#3aa0e8}.deck .btn.b2{--bc:#ffd84d;width:50px}.deck .btn.b3{--bc:#ff5d5d;width:46px} .deck .btn:active,.deck .btn.hit{transform:translateY(6px)} .deck .plate{flex:1 1 240px;min-width:0;font-family:'Pixel',monospace;font-size:9px;line-height:2.1; color:color-mix(in srgb,var(--ink) 88%,var(--cabdark));text-align:right} .deck .plate a{color:var(--ink)} .deck .plate a:hover{color:var(--a1)} .slot{flex:0 0 auto;width:96px;border:0;cursor:pointer;padding:0;background:none;text-align:center; font-family:'Pixel',monospace;font-size:7px;color:color-mix(in srgb,var(--ink) 80%,var(--cabdark));line-height:1.8} .slot i{display:block;height:34px;border-radius:6px;margin-bottom:7px;background:color-mix(in srgb,var(--cabdark) 55%,#000); box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--cabdark) 80%,#fff)} .slot i::before{content:"";display:block;width:8px;height:22px;margin:6px auto;border-radius:4px;background:#0a0a0d} .slot:hover{color:var(--a1)} /* ========================================================================== SPRITES + SMALL SCREENS ========================================================================== */ [data-sprite]{display:block;width:100%;height:100%;color:var(--a1);--sprite2:var(--ink)} .post .thumb [data-sprite]{width:62px;height:62px;color:var(--a1)} @media(max-width:760px){ body{padding:12px 8px 26px} .cab{padding:12px 12px 0;border-radius:24px} .crt{padding:18px 16px 24px;border-radius:34px/22px} .bezel{padding:14px 12px} .post{flex-direction:column} .post .thumb{flex:none;width:100%;height:118px} aside{flex:1 1 100%} .deck{margin:0 -12px;padding:18px 16px 20px;justify-content:center;border-radius:0 0 24px 24px} .deck .plate{text-align:center;flex:1 1 100%;order:9} }