/* ========================================================================== PRESS START — retro arcade blog template Everything you would normally want to change lives in the :root block. ========================================================================== */ @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{ /* --- palette (swap these six lines and the whole site changes) --- */ --frame:#2196f3; /* the blue cabinet frame */ --sky-top:#7a1470; /* top of the sky */ --sky-bottom:#150726; /* bottom of the sky */ --panel:#241041; /* cards + panels */ --panel-line:#5b3fa8; /* card borders */ --grid:#5ec8ff; /* perspective grid lines */ --hot:#ff4d8d; /* hot pink accent */ --warm:#ffb443; /* orange accent */ --cream:#ffeccf; /* body text */ --dim:#b79ee0; /* quiet text */ --shadow:0 10px 0 rgba(0,0,0,.28); --radius:14px; } /* alternate palettes — or "cyber" */ html[data-theme="sunset"]{--frame:#ff8a3d;--sky-top:#8c1b3f;--sky-bottom:#1d0a1a;--panel:#33132c; --panel-line:#a84f6d;--grid:#ffb443;--hot:#ff5d6c;--warm:#ffd84d;--dim:#e5aab5} html[data-theme="cyber"]{--frame:#2ee6a8;--sky-top:#0d4f63;--sky-bottom:#04121f;--panel:#0d2233; --panel-line:#2b6f8c;--grid:#2ee6a8;--hot:#4de2ff;--warm:#c6ff5e;--dim:#8fd4e0} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{background:var(--sky-bottom)} body{font-family:'Term',ui-monospace,monospace;font-size:21px;line-height:1.35;color:var(--cream); min-height:100vh;padding:22px;overflow-x:hidden} img{max-width:100%;display:block} a{color:var(--grid);text-decoration:none} a:hover{color:var(--warm)} /* ---------- the arcade cabinet frame ---------- */ .shell{max-width:1120px;margin:0 auto;background:var(--frame);border-radius:30px;padding:18px; box-shadow:0 24px 60px rgba(0,0,0,.55)} .screen{position:relative;border-radius:8px;overflow:hidden; background:linear-gradient(180deg,#2a0d3f,var(--sky-bottom) 40%)} /* the marquee: the arcade screen at the top of every page */ .marquee{position:relative;overflow:hidden;border-radius:12px;padding:64px 22px 72px;margin-bottom:22px; background:linear-gradient(180deg,var(--sky-top) 0%,#1a0a2e 78%)} .sky{position:absolute;inset:0;pointer-events:none;overflow:hidden} .sky .grid{position:absolute;left:0;right:0;height:44%;opacity:.5} .sky .grid svg{width:100%;height:100%;display:block} .sky .grid.floor{bottom:0; -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)} .sky .grid.roof{top:0;transform:scaleY(-1); -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)} .sky::after{content:"";position:absolute;left:0;right:0;top:50%;height:44%;transform:translateY(-50%); background:radial-gradient(60% 100% at 50% 50%,rgba(255,122,209,.28),transparent 70%)} .sky i{position:absolute;width:3px;height:3px;background:#fff;opacity:.85;animation:tw 3.4s steps(2) infinite} @keyframes tw{0%,100%{opacity:.85}50%{opacity:.2}} .scan{position:absolute;inset:0;pointer-events:none;z-index:6; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px)} .inner{position:relative;z-index:3;padding:26px 30px 34px} /* ---------- top bar ---------- */ .hud{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-family:'Pixel',monospace;font-size:10px; color:var(--warm);border-bottom:2px solid var(--panel-line);padding-bottom:14px;margin-bottom:22px} .hud .coin{color:var(--hot);animation:blink 1.1s steps(1) infinite} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} .hud .spacer{flex:1} .hud .swatches{display:flex;gap:6px} .hud .swatches button{width:22px;height:22px;border:2px solid rgba(255,255,255,.5);border-radius:4px;cursor:pointer; background:var(--c);padding:0} .hud .swatches button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)} /* ---------- brand + nav ---------- */ .brand{position:relative;z-index:2;text-align:center} .brand h1{font-family:'Pixel',monospace;font-size:clamp(20px,5.2vw,46px);line-height:1.5;letter-spacing:2px; background:linear-gradient(180deg,#8fd2ff 0%,#ff7ad1 38%,var(--warm) 68%,#fff3d6 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))} .brand .tag{font-size:20px;color:var(--dim);margin-top:12px;letter-spacing:1px} .nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:20px 0 4px; font-family:'Pixel',monospace;font-size:11px} .nav a{color:var(--cream);padding:8px 6px;position:relative} .nav a::before{content:"▶";color:var(--hot);opacity:0;margin-right:7px} .nav a:hover::before,.nav a[aria-current="page"]::before{opacity:1} .nav a[aria-current="page"]{color:var(--warm)} /* ---------- hero / marquee ---------- */ .hero{margin:26px 0 30px;text-align:center} .hero .start{display:inline-block;font-family:'Pixel',monospace;font-size:13px;color:#160a25; background:var(--warm);padding:16px 22px;border-radius:10px;box-shadow:0 6px 0 rgba(0,0,0,.4)} .hero .start:hover{background:var(--hot);color:#fff} .hero .blinker{animation:blink 1.2s steps(1) infinite} .ticker{overflow:hidden;border-top:2px solid var(--panel-line);border-bottom:2px solid var(--panel-line); padding:9px 0;margin:22px 0;font-family:'Pixel',monospace;font-size:10px;color:var(--grid)} .ticker span{display:inline-block;white-space:nowrap;padding-left:100%;animation:roll 24s linear infinite} @keyframes roll{to{transform:translateX(-100%)}} /* ---------- layout ---------- */ .cols{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start} main{flex:1 1 560px;min-width:0} aside{flex:0 1 300px;min-width:0} /* ---------- panels ---------- */ .panel{background:var(--panel);border:3px solid var(--panel-line);border-radius:var(--radius);margin-bottom:24px; box-shadow:var(--shadow)} .panel-bar{display:flex;align-items:center;gap:10px;font-family:'Pixel',monospace;font-size:10px;color:#160a25; background:var(--grid);padding:10px 12px;border-radius:10px 10px 0 0} .panel-bar .lamp{width:10px;height:10px;border-radius:50%;background:#160a25;opacity:.6} .panel-body{padding:20px} /* ---------- posts ---------- */ .post{display:flex;gap:18px;padding:20px;border-bottom:2px dashed var(--panel-line)} .post:last-child{border-bottom:0} .post .thumb{flex:0 0 108px;height:108px;border-radius:10px;display:grid;place-items:center;font-size:44px; background:linear-gradient(180deg,var(--hot),var(--panel));border:3px solid var(--panel-line)} .meta{font-family:'Pixel',monospace;font-size:9px;color:var(--warm);display:flex;flex-wrap:wrap; align-items:center;gap:8px;margin-bottom:10px} .meta .dot{width:5px;height:5px;background:var(--dim);display:inline-block} h2.title,h3.title{font-family:'Pixel',monospace;line-height:1.6;margin-bottom:10px} h3.title{font-size:14px} h2.title{font-size:17px} .title a{color:var(--cream)} .title a:hover{color:var(--hot)} .excerpt{color:var(--dim)} .more{display:inline-block;margin-top:12px;font-family:'Pixel',monospace;font-size:10px;color:var(--grid)} .more::after{content:" ▶"} /* ---------- side widgets ---------- */ .widget{background:var(--panel);border:3px solid var(--panel-line);border-radius:var(--radius);margin-bottom:22px; box-shadow:var(--shadow);overflow:hidden} .widget h4{font-family:'Pixel',monospace;font-size:10px;background:var(--hot);color:#160a25;padding:10px 12px} .widget .body{padding:16px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips a{font-family:'Pixel',monospace;font-size:9px;color:var(--cream);border:2px solid var(--panel-line); border-radius:20px;padding:8px 10px} .chips a:hover{border-color:var(--warm);color:var(--warm)} .score{font-family:'Pixel',monospace;font-size:11px;color:var(--warm);display:flex;justify-content:space-between; padding:8px 0;border-bottom:2px dotted var(--panel-line)} .score:last-child{border-bottom:0} .hits{display:flex;gap:4px;justify-content:center;margin-top:6px} .hits b{font-family:'Pixel',monospace;font-size:13px;color:var(--grid);background:#0e0620;padding:8px 6px; border-radius:4px;font-weight:400} .lives{font-family:'Pixel',monospace;font-size:12px;color:var(--hot);text-align:center;letter-spacing:4px} /* ---------- single post ---------- */ .progress{position:fixed;left:0;top:0;height:6px;background:var(--hot);width:0;z-index:20} .article{padding:26px 30px} .article p{margin-bottom:18px;color:var(--cream)} .article h3{font-family:'Pixel',monospace;font-size:13px;color:var(--warm);margin:26px 0 12px;line-height:1.6} .article blockquote{border-left:5px solid var(--hot);padding:8px 0 8px 18px;margin:22px 0;color:var(--dim)} .article ul{margin:0 0 18px 22px;color:var(--dim)} .article code{font-family:'Term',monospace;background:#0e0620;color:var(--grid);padding:2px 7px;border-radius:5px} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} /* ---------- sprites ---------- */ [data-sprite]{display:block;width:100%;height:100%;color:var(--hot);--sprite2:#fff} .post .thumb [data-sprite]{width:64px;height:64px;color:var(--warm);--sprite2:#fff} /* ---------- search + chips ---------- */ .search{display:flex;gap:12px;flex-wrap:wrap;padding:18px 20px} .search input{flex:1 1 220px;font-family:'Term',monospace;font-size:20px;padding:12px 14px;border-radius:8px; background:#0e0620;border:3px solid var(--panel-line);color:var(--cream)} .search input:focus{outline:none;border-color:var(--warm)} .chips a.is-on{border-color:var(--warm);color:var(--warm)} .empty{padding:26px 20px;color:var(--dim)} /* ---------- gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;padding:20px} .gal-item{background:#0e0620;border:3px solid var(--panel-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(--warm)} .gal-item span{width:74px;height:74px;color:var(--grid);--sprite2:#fff} .gal-item b{font-family:'Pixel',monospace;font-size:8px;color:var(--dim);letter-spacing:1px} .lightbox{position:fixed;inset:0;background:rgba(8,3,18,.9);display:none;place-items:center;z-index:40} .lightbox.is-open{display:grid} .lb-in{text-align:center} .lb-art{display:block;width:min(58vw,340px);height:min(58vw,340px);margin:0 auto 22px;color:var(--hot);--sprite2:#fff} .lb-name{font-family:'Pixel',monospace;font-size:14px;color:var(--warm);display:block;margin-bottom:20px} .lb-close{font-family:'Pixel',monospace;font-size:10px;padding:12px 16px;border:0;border-radius:8px;cursor:pointer; background:var(--hot);color:#160a25} /* ---------- about / links / contact bits ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;padding:20px} .stat{background:#0e0620;border:3px solid var(--panel-line);border-radius:10px;padding:16px;text-align:center} .stat b{display:block;font-family:'Pixel',monospace;font-size:20px;color:var(--warm);margin-bottom:8px} .stat span{font-size:17px;color:var(--dim)} .steps{padding:20px} .step{display:flex;gap:16px;margin-bottom:18px} .step b{font-family:'Pixel',monospace;font-size:13px;color:var(--hot);flex:0 0 62px} .faq{padding:4px 20px 20px} .faq details{border-bottom:2px dotted var(--panel-line);padding:14px 0} .faq summary{font-family:'Pixel',monospace;font-size:11px;color:var(--warm);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(--panel-line);border-radius:3px;display:grid;place-items:center; font-family:'Pixel',monospace;font-size:7px;text-align:center;line-height:1.6;background:#0e0620;color:var(--grid)} .b88:hover{border-color:var(--warm)} .rows{padding:8px 20px 20px} .rows a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:2px dotted var(--panel-line); color:var(--cream)} .rows a span{color:var(--dim);font-size:18px} .rows a:hover{color:var(--warm)} form.arcade{padding:20px;display:grid;gap:14px} form.arcade input,form.arcade textarea{font-family:'Term',monospace;font-size:20px;padding:12px 14px;border-radius:8px; background:#0e0620;border:3px solid var(--panel-line);color:var(--cream);width:100%} form.arcade textarea{min-height:130px;resize:vertical} form.arcade input:focus,form.arcade textarea:focus{outline:none;border-color:var(--warm)} form.arcade button{font-family:'Pixel',monospace;font-size:11px;padding:14px 18px;border:0;border-radius:10px; cursor:pointer;background:var(--warm);color:#160a25;box-shadow:0 5px 0 rgba(0,0,0,.4);justify-self:start} 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(--grid);line-height:1.8} .gb{border-bottom:2px dotted var(--panel-line);padding:14px 0} .gb b{font-family:'Pixel',monospace;font-size:10px;color:var(--hot)} .gb p{color:var(--dim);margin-top:8px} /* ---------- footer ---------- */ .foot{margin-top:30px;padding-top:20px;border-top:2px solid var(--panel-line);text-align:center;color:var(--dim); font-size:19px} .foot .credits{font-family:'Pixel',monospace;font-size:9px;color:var(--warm);margin-bottom:12px;line-height:2} /* ---------- small screens ---------- */ @media(max-width:720px){ body{padding:10px} .shell{padding:10px;border-radius:20px} .inner{padding:18px 16px 26px} .post{flex-direction:column;gap:12px} .post .thumb{flex:none;width:100%;height:120px} aside{flex:1 1 100%} }