/* ========================================================================== RETRO POP — bold-outline blog template Everything you would normally want to change lives in the :root block. ========================================================================== */ @font-face{font-family:'Display';src:url(fonts/RubikMonoOne.woff2) format('woff2');font-display:block} @font-face{font-family:'Body';font-weight:500;src:url(fonts/SpaceGrotesk-500.woff2) format('woff2');font-display:block} @font-face{font-family:'Body';font-weight:700;src:url(fonts/SpaceGrotesk-700.woff2) format('woff2');font-display:block} :root{ /* --- palette (six lines change the whole site) --- */ --bg:#ef7ce6; /* the page behind everything */ --bar:#38c6ea; /* title bars */ --panel:#f9f2d9; /* cards and panels */ --ink:#2d1b8a; /* outlines + text */ --a1:#ffd23f; /* accent 1 */ --a2:#ff5a2b; /* accent 2 */ --bartext:#2d1b8a; /* title-bar text (make it light if you pick a dark bar) */ --bw:5px; /* outline weight */ --sh:10px; /* hard-shadow offset */ } /* the other five colourways — etc. */ html[data-theme="mint"]{--bg:#7fe3c4;--bar:#ff7a9e;--panel:#fdf8e6;--ink:#14405a;--a1:#ffd23f;--a2:#5b5be8} html[data-theme="lemon"]{--bg:#ffe14d;--bar:#ff5a2b;--panel:#fffbe8;--ink:#2d1b8a;--a1:#38c6ea;--a2:#ff5ec7;--bartext:#fffbe8} html[data-theme="grape"]{--bg:#7b6cf6;--bar:#ffd23f;--panel:#f4f0ff;--ink:#1e1150;--a1:#ff5ec7;--a2:#38e6c0} html[data-theme="tangerine"]{--bg:#ff8a3d;--bar:#ffe14d;--panel:#fff4e0;--ink:#2d1b8a;--a1:#38c6ea;--a2:#ff5ec7} html[data-theme="cherry"]{--bg:#ff5f6d;--bar:#2fd4c8;--panel:#fff2f0;--ink:#3a1030;--a1:#ffd23f;--a2:#ff9ec4} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* the grid lives on so the floating shapes can sit behind the content */ html{background: linear-gradient(0deg,rgba(255,255,255,.22) 2px,transparent 2px) 0 0/44px 44px, linear-gradient(90deg,rgba(255,255,255,.22) 2px,transparent 2px) 0 0/44px 44px, var(--bg)} body{font-family:'Body',system-ui,sans-serif;font-weight:500;font-size:18px;line-height:1.5;color:var(--ink); min-height:100vh;padding:30px 20px 40px;background:transparent} img{max-width:100%;display:block} a{color:var(--ink)} .wrap{max-width:1120px;margin:0 auto;position:relative;z-index:1} /* ---------- the window frame ---------- */ .win{background:var(--panel);border:var(--bw) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink); margin-bottom:30px} .win-bar{display:flex;align-items:center;gap:12px;background:var(--bar);border-bottom:var(--bw) solid var(--ink); padding:12px 14px} .win-bar .dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--ink);flex:0 0 auto} .win-bar .dot.d1{background:var(--a1)}.win-bar .dot.d2{background:var(--a2)} .win-bar h2,.win-bar .t{flex:1;font-family:'Display';font-size:15px;color:var(--bartext);letter-spacing:.5px; text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .win-bar .x{width:30px;height:26px;background:var(--panel);border:3px solid var(--ink);display:grid; place-items:center;font-family:'Display';font-size:12px;color:var(--a2);flex:0 0 auto} .win-body{padding:26px} /* ---------- masthead ---------- */ .mast{text-align:center;padding:40px 26px} .mast h1{font-family:'Display';font-size:clamp(30px,6vw,60px);line-height:1.25;color:var(--panel)} /* every letter takes the next colour in the rotation — set in pop.js */ .mast h1 span{display:inline-block; text-shadow:6px 6px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink), -2px 2px 0 var(--ink),2px 2px 0 var(--ink)} .mast h1 span:nth-child(odd){transform:rotate(-3deg)} .mast h1 span:nth-child(even){transform:rotate(3deg)} .mast h1 .c1{color:var(--a1)} .mast h1 .c2{color:var(--bar)} .mast h1 .c3{color:var(--a2)} .mast h1 .c4{color:var(--panel)} .mast .tag{font-weight:700;font-size:19px;margin-top:20px} .nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px} .nav a{font-family:'Display';font-size:12px;text-decoration:none;background:var(--a1); border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:11px 14px} .nav a:hover{background:var(--bar)} .nav a:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)} .nav a[aria-current="page"]{background:var(--a2);color:var(--panel)} /* ---------- ticker ---------- */ .ticker{overflow:hidden;background:var(--ink);color:var(--panel);border:var(--bw) solid var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink);margin-bottom:30px;padding:11px 0} .ticker span{display:inline-block;white-space:nowrap;padding-left:100%;font-family:'Display';font-size:12px; animation:roll 26s linear infinite} @keyframes roll{to{transform:translateX(-100%)}} /* ---------- layout ---------- */ .cols{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start} main{flex:1 1 560px;min-width:0} aside{flex:0 1 300px;min-width:0} /* ---------- posts ---------- */ .post{display:flex;gap:22px;padding:24px;border-bottom:4px dashed rgba(45,27,138,.28)} .post:last-child{border-bottom:0} .post .thumb{flex:0 0 116px;height:116px;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink); background:var(--a1);display:grid;place-items:center;padding:16px} .post .thumb svg{width:100%;height:100%;display:block} .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font-weight:700;font-size:14px} .meta .cat{font-family:'Display';font-size:10px;background:var(--bar);border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);padding:5px 8px} h2.title{font-family:'Display';font-size:24px;line-height:1.35;margin-bottom:14px} h3.title{font-family:'Display';font-size:17px;line-height:1.45;margin-bottom:12px} .title a{text-decoration:none} .title a:hover{color:var(--a2)} .excerpt{font-size:18px} .more{display:inline-block;margin-top:16px;font-family:'Display';font-size:11px;text-decoration:none; background:var(--a2);color:var(--panel);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink); padding:11px 14px} .more:hover{background:var(--bar);color:var(--ink)} .more:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)} /* ---------- sidebar bits ---------- */ .rows a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;text-decoration:none;font-weight:700; border-bottom:3px dotted rgba(45,27,138,.35)} .rows a:last-child{border-bottom:0} .rows a span{font-weight:500;opacity:.75} .rows a:hover{color:var(--a2)} .chips{display:flex;flex-wrap:wrap;gap:10px} .chips a{font-family:'Display';font-size:10px;text-decoration:none;background:var(--panel); border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:9px 11px} .chips a:hover,.chips a.is-on{background:var(--a1)} .hits{display:flex;gap:5px;justify-content:center} .hits b{font-family:'Display';font-size:16px;background:var(--ink);color:var(--panel);padding:9px 7px} .stack>*+*{margin-top:16px} /* ---------- search + filter ---------- */ .search{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px} .search input{flex:1 1 220px;font-family:'Body';font-weight:700;font-size:17px;padding:12px 14px; background:#fff;border:4px solid var(--ink);color:var(--ink)} .search input:focus{outline:none;box-shadow:5px 5px 0 var(--ink)} .empty{font-weight:700;padding:20px 0} /* ---------- shape gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px} .gal-item{background:var(--panel);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px 12px 12px; cursor:pointer;display:grid;justify-items:center;gap:12px;font:inherit;color:inherit} .gal-item:hover{background:var(--a1)} .gal-item .art{width:84px;height:84px} .gal-item .art svg{width:100%;height:100%;display:block} .gal-item b{font-family:'Display';font-size:9px;letter-spacing:.5px} .lightbox{position:fixed;inset:0;background:rgba(45,27,138,.86);display:none;place-items:center;z-index:40;padding:20px} .lightbox.is-open{display:grid} .lb-in{background:var(--panel);border:var(--bw) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink); padding:34px;text-align:center;max-width:460px;width:100%} .lb-art{width:min(60vw,260px);height:min(60vw,260px);margin:0 auto 22px} .lb-art svg{width:100%;height:100%;display:block} .lb-name{font-family:'Display';font-size:15px;display:block;margin-bottom:22px} .lb-close{font-family:'Display';font-size:11px;background:var(--a2);color:var(--panel);border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink);padding:12px 16px;cursor:pointer} /* ---------- article ---------- */ .progress{position:fixed;left:0;top:0;height:8px;background:var(--a2);border-bottom:3px solid var(--ink);width:0;z-index:30} .article p{margin-bottom:18px} .article h3{font-family:'Display';font-size:16px;line-height:1.5;margin:28px 0 14px} .article blockquote{background:var(--a1);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink); padding:18px 20px;margin:24px 0;font-weight:700} .article ul{margin:0 0 18px 24px} .article li{margin-bottom:8px} .article code{font-family:ui-monospace,monospace;background:#fff;border:3px solid var(--ink);padding:1px 6px} /* ---------- about / links / contact ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px} .stat{background:var(--bar);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px;text-align:center} .stat b{display:block;font-family:'Display';font-size:24px;margin-bottom:8px} .stat span{font-weight:700;font-size:14px} .step{display:flex;gap:18px;margin-bottom:20px} .step b{font-family:'Display';font-size:14px;flex:0 0 76px} .faq details{border-bottom:3px dashed rgba(45,27,138,.3);padding:16px 0} .faq details:last-child{border-bottom:0} .faq summary{font-family:'Display';font-size:12px;line-height:1.6;cursor:pointer} .faq p{margin-top:12px} .buttons88{display:flex;flex-wrap:wrap;gap:14px} .b88{width:88px;height:31px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center; font-family:'Display';font-size:7px;text-align:center;line-height:1.6;background:var(--a1);text-decoration:none} .b88:hover{background:var(--bar)} form.pop{display:grid;gap:16px} form.pop label{font-family:'Display';font-size:10px} form.pop input,form.pop textarea{font-family:'Body';font-weight:700;font-size:17px;padding:12px 14px;background:#fff; border:4px solid var(--ink);color:var(--ink);width:100%} form.pop textarea{min-height:130px;resize:vertical} form.pop input:focus,form.pop textarea:focus{outline:none;box-shadow:5px 5px 0 var(--ink)} form.pop button{font-family:'Display';font-size:12px;background:var(--a1);border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink);padding:14px 18px;cursor:pointer;justify-self:start;color:var(--ink)} form.pop button:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)} .note{font-weight:700;font-size:15px} .gb{border-bottom:3px dotted rgba(45,27,138,.35);padding:16px 0} .gb:last-child{border-bottom:0} .gb b{font-family:'Display';font-size:11px;background:var(--a1);border:3px solid var(--ink);padding:5px 8px; display:inline-block;margin-bottom:10px} /* ---------- palette switcher ---------- */ .swatches{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px} .swatches button{width:44px;height:30px;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer; padding:0;display:flex;overflow:hidden} .swatches button i{flex:1} .swatches button[aria-pressed="true"]{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)} /* ---------- floating shapes ---------- */ .deco{position:fixed;inset:0;pointer-events:none;z-index:0} .deco span{position:absolute;display:block;width:66px;height:66px} .deco .f2{width:54px;height:54px}.deco .f3{width:58px;height:58px} .deco .f4{width:44px;height:44px}.deco .f5{width:40px;height:40px} .deco svg{display:block;width:100%;height:100%} .deco .f1{left:2%;top:16%}.deco .f2{right:3%;top:9%}.deco .f3{left:6%;bottom:12%} .deco .f4{right:5%;bottom:18%}.deco .f5{left:44%;top:3%} @keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(7deg)}} .deco span{animation:bob 5s ease-in-out infinite} .deco .f2{animation-delay:-1.4s}.deco .f3{animation-delay:-2.6s} .deco .f4{animation-delay:-3.4s}.deco .f5{animation-delay:-4.1s} body.nodeco .deco{display:none} /* ---------- footer ---------- */ .foot{text-align:center;font-weight:700;padding:26px 20px} .foot .credits{font-family:'Display';font-size:10px;line-height:2.1;margin-bottom:14px} @media(max-width:720px){ body{padding:14px 10px 26px} .win-body{padding:18px} .post{flex-direction:column;padding:18px} .post .thumb{flex:none;width:100%;height:130px} aside{flex:1 1 100%} .deco{display:none} }