/* ============================================================ CNCFiles Minimal — Main CSS Ultra-clean dark industrial design ============================================================ */ /* Google Fonts loaded async in via functions.php — not here to avoid render blocking */ /* ── VARIABLES ─────────────────────────────────────────────── */ :root { --bg: #0a0b0e; --bg2: #0f1117; --surf: #151820; --surf2: #1a1f2e; --border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.10); --accent: #22c55e; --accent2: #16a34a; --adim: rgba(34,197,94,0.10); --text: #d8dce8; --text2: #8892a4; --text3: #555f72; --white: #ffffff; --red: #ef4444; --gold: #f59e0b; --fh: 'Rajdhani', sans-serif; --fb: 'Inter', sans-serif; --r: 8px; --r2: 12px; --max: 1200px; --hh: 58px; --trans: 0.18s ease; } /* ── RESET ──────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg)!important;color:var(--text);font-family:var(--fb);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased} /* Force dark background on all WP archive body classes */ body.tag,body.category,body.archive,body.search{background:var(--bg)!important} img{max-width:100%;height:auto;display:block} /* CLS fix: prevent layout shift when images have explicit width+height attributes */ img[width][height]{height:auto} a{color:var(--accent);text-decoration:none;transition:color var(--trans)} a:hover{color:var(--white)} ul{list-style:none} input,button,select,textarea{font-family:var(--fb)} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:var(--bg2)} ::-webkit-scrollbar-thumb{background:var(--surf2);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--accent)} /* ── CONTAINER ──────────────────────────────────────────────── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 18px} /* ============================================================ HEADER ============================================================ */ #hdr{ position:sticky;top:0;z-index:900; height:var(--hh); background:rgba(10,11,14,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); display:flex;align-items:center; } .hdr-in{ display:flex;align-items:center;gap:16px; width:100%;max-width:var(--max);margin:0 auto;padding:0 18px; } /* Logo */ .logo{display:flex;align-items:center;gap:9px;flex-shrink:0} .logo-mark{ width:30px;height:30px;background:var(--accent);border-radius:5px; display:flex;align-items:center;justify-content:center; font-family:var(--fh);font-weight:700;font-size:11px;color:#000;letter-spacing:.5px; } .logo-name{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--white);letter-spacing:.3px} .logo-name span{color:var(--accent)} /* Header search */ .hdr-srch{flex:1;max-width:460px} .hdr-srch form{ display:flex;background:var(--surf); border:1px solid var(--border2);border-radius:6px;overflow:hidden; transition:border-color var(--trans),box-shadow var(--trans); } .hdr-srch form:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--adim)} .hdr-srch input{ flex:1;background:transparent;border:none;outline:none; color:var(--text);font-size:13px;padding:9px 13px; } .hdr-srch input::placeholder{color:var(--text3)} .hdr-srch button{ background:var(--accent);color:#000;border:none; padding:0 14px;cursor:pointer;font-size:13px;font-family:var(--fh);font-weight:700; transition:background var(--trans); } .hdr-srch button:hover{background:var(--accent2)} /* Nav */ .hdr-nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0} .hdr-nav a{ color:var(--text2);font-size:13px;font-weight:500; padding:6px 10px;border-radius:5px;white-space:nowrap; transition:all var(--trans); } .hdr-nav a:hover{color:var(--white);background:var(--surf)} .hdr-nav .nav-cta{ background:var(--accent);color:#000!important; font-family:var(--fh);font-weight:700;padding:6px 14px;margin-left:6px; } .hdr-nav .nav-cta:hover{background:var(--accent2)} /* Mobile */ .mob-toggle{ display:none;margin-left:auto;background:none; border:1px solid var(--border2);color:var(--text); padding:7px 9px;border-radius:5px;cursor:pointer;font-size:16px; } /* Format pills strip */ .fmt-strip{ background:var(--bg2);border-bottom:1px solid var(--border); overflow-x:auto;scrollbar-width:none; } .fmt-strip::-webkit-scrollbar{display:none} .fmt-strip-in{ display:flex;align-items:center;gap:2px; max-width:var(--max);margin:0 auto;padding:7px 18px; white-space:nowrap; } .fpill{ display:inline-block;padding:3px 11px;border-radius:4px; font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:.4px; color:var(--text3);border:1px solid transparent; transition:all var(--trans); } .fpill:hover{color:var(--text2);background:var(--surf)} .fpill.active{color:var(--accent);background:var(--adim);border-color:rgba(34,197,94,0.18)} /* ============================================================ HERO — minimal ============================================================ */ .hero{ background:var(--bg2);border-bottom:1px solid var(--border); padding:36px 18px 32px;text-align:center; } .hero h1{ font-family:var(--fh);font-size:clamp(22px,4vw,38px); font-weight:700;color:var(--white);margin-bottom:6px; letter-spacing:-.2px;line-height:1.15; } .hero h1 span{color:var(--accent)} .hero p{color:var(--text3);font-size:13px;margin-bottom:18px} .hero-search{ display:flex;max-width:500px;margin:0 auto 16px; background:var(--surf);border:1px solid var(--border2); border-radius:7px;overflow:hidden; transition:border-color var(--trans),box-shadow var(--trans); } .hero-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--adim)} .hero-search input{ flex:1;background:transparent;border:none;outline:none; color:var(--text);font-size:14px;padding:12px 15px; } .hero-search input::placeholder{color:var(--text3)} .hero-search button{ background:var(--accent);color:#000;border:none; padding:0 20px;font-family:var(--fh);font-size:14px;font-weight:700; letter-spacing:.3px;cursor:pointer;transition:background var(--trans); } .hero-search button:hover{background:var(--accent2)} .hero-stats{ display:flex;justify-content:center;gap:20px;flex-wrap:wrap; font-size:12px;color:var(--text3); } .hero-stats strong{color:var(--text2);font-family:var(--fh);font-size:13px} /* ============================================================ LAYOUT ============================================================ */ #content{padding:24px 0 56px} .layout{ max-width:var(--max);margin:0 auto;padding:0 18px; display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start; } .layout.full{grid-template-columns:1fr} /* ── SECTION HEADER ─────────────────────────────────────────── */ .sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap} .sec-title{ font-family:var(--fh);font-size:16px;font-weight:700;color:var(--white); display:flex;align-items:center;gap:7px; } .sec-title::before{content:'';display:inline-block;width:3px;height:16px;background:var(--accent);border-radius:2px} .sec-more{ font-size:12px;color:var(--text3); border:1px solid var(--border);padding:4px 10px;border-radius:14px; transition:all var(--trans); } .sec-more:hover{border-color:var(--accent);color:var(--accent)} /* ── FILTER BAR ─────────────────────────────────────────────── */ .filter-bar{display:flex;align-items:center;gap:7px;margin-bottom:14px;flex-wrap:wrap;min-height:36px} .f-label{font-size:12px;color:var(--text3)} .f-btn{ padding:4px 12px;border-radius:14px;border:1px solid var(--border); background:transparent;color:var(--text2);font-size:12px;font-family:var(--fb); cursor:pointer;transition:all var(--trans); } .f-btn:hover,.f-btn.on{background:var(--adim);border-color:rgba(34,197,94,0.25);color:var(--accent)} .f-sort{ margin-left:auto;padding:5px 10px;background:var(--surf); border:1px solid var(--border);border-radius:5px; color:var(--text2);font-size:12px;cursor:pointer;outline:none; } .view-btns{display:flex;gap:4px} .v-btn{ width:28px;height:28px;border-radius:5px;border:1px solid var(--border); background:transparent;color:var(--text3);font-size:14px;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all var(--trans); } .v-btn.on,.v-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--adim)} /* ============================================================ FILE CARDS ============================================================ */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px} .grid.list-view{grid-template-columns:1fr} .card{ background:var(--surf);border:1px solid var(--border); border-radius:var(--r2);overflow:hidden; transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans); position:relative;display:flex;flex-direction:column; } .card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.45);border-color:rgba(34,197,94,.2)} /* thumb */ .card-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surf2);contain-intrinsic-size:1px 380px;content-visibility:auto} .card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block} .card:hover .card-thumb img{transform:scale(1.05)} .card-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;opacity:.15} /* clickable image link */ .card-img-link{display:block;width:100%;height:100%;cursor:pointer} .card-img-link:hover{opacity:1} /* badges */ .badge-fmt{ position:absolute;top:7px;left:7px; background:rgba(0,0,0,.72);backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.12); color:var(--accent);font-family:var(--fh);font-size:9px;font-weight:700; letter-spacing:.8px;padding:2px 6px;border-radius:3px;text-transform:uppercase; } .badge-free{ position:absolute;top:7px;right:7px; background:var(--accent);color:#000; font-family:var(--fh);font-size:9px;font-weight:700; letter-spacing:.8px;padding:2px 6px;border-radius:3px; } /* hover overlay */ .card-ov{ position:absolute;inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(10,11,14,.88) 100%); opacity:0;transition:opacity var(--trans); display:flex;align-items:flex-end;padding:10px; } .card:hover .card-ov{opacity:1} .card-dl{ width:100%;background:var(--accent);color:#000; font-family:var(--fh);font-size:12px;font-weight:700; text-align:center;padding:7px;border-radius:5px; display:block;letter-spacing:.3px; transition:background var(--trans); } .card-dl:hover{background:var(--accent2);color:#000} /* body */ .card-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:5px} .card-title{ font-family:var(--fh);font-size:13px;font-weight:600;color:var(--text); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3; } .card-title a{color:inherit} .card-title a:hover{color:var(--accent)} .card-meta{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:auto} .card-fmts{display:flex;gap:3px} .fmt-tag{ background:var(--surf2);border:1px solid var(--border); font-family:var(--fh);font-size:9px;font-weight:700;letter-spacing:.5px; color:var(--text3);padding:1px 5px;border-radius:3px; } /* view details button in card */ .card-view-btn{ width:100%;background:var(--surf2);color:var(--text2); font-family:var(--fh);font-size:11px;font-weight:600; text-align:center;padding:7px 8px;border-radius:5px; display:flex;align-items:center;justify-content:center;gap:5px; letter-spacing:.3px;transition:all var(--trans);margin-top:6px; border:1px solid var(--border); } .card-view-btn:hover{background:var(--adim);color:var(--accent);border-color:rgba(34,197,94,.25);transform:translateY(-1px)} /* list view */ .grid.list-view .card{flex-direction:row;max-height:none;min-height:88px} .grid.list-view .card-thumb{aspect-ratio:unset;width:88px;height:88px;flex-shrink:0;contain-intrinsic-size:unset} .grid.list-view .card-ov{display:none} .grid.list-view .card-body{padding:9px 12px;flex-direction:row;flex-wrap:wrap;align-items:center} .grid.list-view .card-title{flex:1;min-width:200px} .grid.list-view .card-meta{margin-top:0;margin-left:auto} .grid.list-view .card-view-btn{margin-top:0;width:auto;padding:6px 12px;flex-shrink:0} /* ============================================================ SIDEBAR ============================================================ */ .sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--hh) + 14px)} .widget{background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden} .widget-title{ font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:1.8px; text-transform:uppercase;color:var(--text2); padding:11px 14px;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:6px; } .widget-title::before{content:'';width:2px;height:11px;background:var(--accent);border-radius:2px} .widget-body{padding:12px 14px} /* popular list */ .pop-list{display:flex;flex-direction:column} .pop-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border)} .pop-item:last-child{border-bottom:none} .pop-thumb{width:44px;height:44px;border-radius:5px;object-fit:cover;flex-shrink:0;background:var(--surf2)} .pop-info{flex:1;min-width:0} .pop-name{font-size:12px;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3} .pop-name a{color:inherit} .pop-name a:hover{color:var(--accent)} .pop-ct{font-size:10px;color:var(--text3);margin-top:2px} /* cat list */ .cat-list{display:flex;flex-direction:column;gap:1px} .cat-item a{ display:flex;align-items:center;justify-content:space-between; color:var(--text2);font-size:12px;padding:6px 7px;border-radius:5px; transition:all var(--trans); } .cat-item a:hover{background:var(--surf2);color:var(--accent);padding-left:11px} .cat-ct{ background:var(--surf2);border:1px solid var(--border); font-size:10px;padding:1px 6px;border-radius:10px;color:var(--text3); } /* format grid */ .fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px} .fmt-pill{ background:var(--surf2);border:1px solid var(--border);border-radius:5px; text-align:center;padding:7px 4px; font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.4px; color:var(--text2);transition:all var(--trans); } .fmt-pill:hover{background:var(--adim);border-color:rgba(34,197,94,.25);color:var(--accent)} /* banner */ .banner-w{ background:linear-gradient(135deg,#0f1923,#182436); border:1px solid rgba(34,197,94,.15);border-radius:var(--r2);padding:16px;text-align:center; } .banner-w h3{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--white);margin-bottom:4px} .banner-w p{font-size:11px;color:var(--text2);margin-bottom:10px} .banner-btn{ display:inline-block;background:var(--accent);color:#000; font-family:var(--fh);font-size:12px;font-weight:700; padding:7px 18px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px; transition:background var(--trans); } .banner-btn:hover{background:var(--accent2);color:#000} /* ============================================================ SINGLE POST ============================================================ */ .single-wrap{max-width:var(--max);margin:0 auto;padding:20px 18px 56px;display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start} /* breadcrumb */ .breadcrumb{font-size:11px;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;gap:5px;flex-wrap:wrap} .breadcrumb a{color:var(--text3)} .breadcrumb a:hover{color:var(--accent)} /* post header */ .post-cats{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px} .post-cat{ background:var(--adim);border:1px solid rgba(34,197,94,.25); color:var(--accent);font-size:10px;font-weight:600;letter-spacing:1px; text-transform:uppercase;padding:2px 8px;border-radius:10px; } .post-title{ font-family:var(--fh);font-size:clamp(20px,3vw,32px);font-weight:700; color:var(--white);line-height:1.15;letter-spacing:-.2px;margin-bottom:10px; } .post-meta{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-size:12px;color:var(--text3); padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:16px; } /* featured image */ /* ── 3axis-style main image + thumb gallery ── */ .main-image{margin-bottom:20px} .panel-main{border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);background:var(--surf);margin-bottom:10px;position:relative} .panel-main img{width:100%;height:auto;display:block;object-fit:contain;max-height:500px} .panel-main a{display:block} .panel-main figcaption{font-size:12px;color:var(--text3);padding:8px 12px;border-top:1px solid var(--border);text-align:center} .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:100%} .thumbs img{width:100%;height:70px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border-color .2s,opacity .2s} .thumbs img:hover{border-color:var(--accent);opacity:1!important} .thumbs img.active{border-color:var(--accent);opacity:.5} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .fade-in{animation:fadeIn .4s ease-in forwards} /* legacy */ .post-img{border-radius:var(--r2);overflow:hidden;margin-bottom:16px;border:1px solid var(--border);background:var(--surf)} .post-img img{width:100%;object-fit:cover} .post-img figcaption{ padding:10px 14px;background:rgba(0,0,0,0.3); font-size:13px;color:var(--text3);font-style:italic; border-top:1px solid var(--border) } .img-context{ font-size:14px;line-height:1.6;color:var(--text2); margin-bottom:18px;padding:12px 16px; background:var(--adim);border-left:3px solid var(--accent); border-radius:4px } /* download box */ .dl-box{ background:var(--surf);border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:var(--r2);padding:16px;margin-bottom:18px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; } .dl-info h3{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--white);margin-bottom:5px} .dl-fmts{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px} .dl-fmt{ background:var(--surf2);border:1px solid var(--border); font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.8px; color:var(--accent);padding:2px 8px;border-radius:3px; } .dl-note{font-size:11px;color:var(--text3)} .dl-btn{ display:inline-flex;align-items:center;gap:8px; background:var(--accent);color:#000!important; font-family:var(--fh);font-size:14px;font-weight:700; text-transform:uppercase;letter-spacing:.4px; padding:11px 22px;border-radius:7px;white-space:nowrap; transition:background var(--trans),transform var(--trans),box-shadow var(--trans); box-shadow:0 4px 16px rgba(34,197,94,.28); } .dl-btn:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 22px rgba(34,197,94,.4);color:#000!important} /* specs */ .specs{background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:18px} .specs-hdr{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surf2)} .spec-row{display:flex;border-bottom:1px solid var(--border)} .spec-row:last-child{border-bottom:none} .spec-k{width:100px;flex-shrink:0;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;padding:8px 14px;background:var(--surf2);border-right:1px solid var(--border)} .spec-v{flex:1;font-size:12px;color:var(--text);padding:8px 14px;display:flex;align-items:center;gap:5px;flex-wrap:wrap} /* post content */ .post-content{font-size:14px;color:var(--text);line-height:1.72;margin-bottom:18px} .post-content h2,.post-content h3{font-family:var(--fh);font-weight:700;color:var(--white);margin:20px 0 8px} .post-content h2{font-size:20px} .post-content h3{font-size:16px} .post-content p{margin-bottom:12px} .post-content a{color:var(--accent);border-bottom:1px solid rgba(34,197,94,.25)} .post-content ul{list-style:disc;padding-left:18px;margin-bottom:12px} /* gallery */ .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px;margin-bottom:18px} .gal-item{aspect-ratio:1;overflow:hidden;border-radius:6px;border:1px solid var(--border);display:block} .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .gal-item:hover img{transform:scale(1.08)} /* how-to steps */ .steps{display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .step{display:flex;gap:12px;align-items:flex-start} .step-n{ min-width:26px;height:26px;background:var(--accent);color:#000; font-family:var(--fh);font-size:13px;font-weight:700; border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; } .step-t{font-size:13px;color:var(--text);line-height:1.5} .step-t strong{color:var(--white)} /* tags */ .post-tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:18px;font-size:12px} .post-tags strong{color:var(--text3)} .post-tags .tag{ background:var(--surf2);border:1px solid var(--border);color:var(--text2); font-size:11px;padding:2px 9px;border-radius:10px; transition:all var(--trans); } .post-tags .tag:hover{background:var(--adim);border-color:rgba(34,197,94,.25);color:var(--accent)} /* related */ .related{margin-top:36px;padding-top:28px;border-top:1px solid var(--border)} .related-title{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--white);margin-bottom:14px} /* single sidebar */ .s-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--hh) + 14px)} .sdl-widget{background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);padding:16px} .sdl-title{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--white);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)} .sdl-btn{ display:block;text-align:center;background:var(--accent);color:#000!important; font-family:var(--fh);font-size:14px;font-weight:700;text-transform:uppercase; padding:11px;border-radius:7px;margin-bottom:12px; transition:background var(--trans),transform var(--trans); box-shadow:0 4px 16px rgba(34,197,94,.25); } .sdl-btn:hover{background:var(--accent2);transform:translateY(-1px);color:#000!important} .sdl-list{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text3)} /* share buttons */ .share-btns{display:flex;flex-direction:column;gap:6px} .share-btn{ display:block;text-align:center;padding:8px;border-radius:6px; font-size:12px;font-weight:600;color:#fff!important; transition:filter var(--trans); } .share-btn:hover{filter:brightness(1.12)} .share-btn.fb{background:#1877f2} .share-btn.pin{background:#e60023} .share-btn.tw{background:#1da1f2} /* file info */ .finfo{display:flex;flex-direction:column;gap:6px;font-size:12px} .finfo-row{display:flex;justify-content:space-between} .finfo-row span:first-child{color:var(--text3)} /* ============================================================ ARCHIVE / SEARCH ============================================================ */ .arch-hdr{ background:var(--surf);border:1px solid var(--border);border-radius:var(--r2); padding:16px 20px;margin-bottom:18px; } .arch-title{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--white);margin-bottom:2px} .arch-desc{font-size:13px;color:var(--text3)} .arch-count{ display:inline-block;margin-top:6px; background:var(--adim);color:var(--accent);border:1px solid rgba(34,197,94,.25); font-size:11px;font-weight:600;padding:2px 9px;border-radius:10px; } /* pagination */ .pagination{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:28px;flex-wrap:wrap} .pager{ min-width:34px;height:34px;display:flex;align-items:center;justify-content:center; background:var(--surf);border:1px solid var(--border);border-radius:5px; color:var(--text2);font-size:13px;transition:all var(--trans);padding:0 8px; } .pager:hover{border-color:var(--accent);color:var(--accent);background:var(--adim)} .pager.cur{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700} /* no results */ .no-res{text-align:center;padding:56px 20px;color:var(--text3)} .no-res h2{font-family:var(--fh);font-size:22px;color:var(--text2);margin-bottom:6px} /* ============================================================ AI SEO NOTICE (inline in post editor) ============================================================ */ .seo-notice{ background:var(--surf2);border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin-bottom:16px;font-size:13px; } .seo-notice strong{color:var(--white)} /* ============================================================ FOOTER ============================================================ */ #ftr{background:var(--bg2);border-top:1px solid var(--border);padding:40px 18px 0} .ftr-fmts{ max-width:var(--max);margin:0 auto;padding-bottom:14px;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--text3); } .ftr-fmts a{ background:var(--surf);border:1px solid var(--border);color:var(--text3); font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.4px; padding:2px 8px;border-radius:3px;transition:all var(--trans); } .ftr-fmts a:hover{color:var(--accent);border-color:rgba(34,197,94,.3)} .ftr-grid{ max-width:var(--max);margin:0 auto; display:grid;grid-template-columns:260px 1fr 1fr 1fr;gap:36px; padding:28px 0 32px;border-bottom:1px solid var(--border); } .ftr-brand .logo-name{font-size:18px;margin-bottom:8px;display:block} .ftr-desc{font-size:12px;color:var(--text3);line-height:1.6;margin-bottom:14px} .ftr-social{display:flex;gap:7px} .soc-icon{ width:30px;height:30px;background:var(--surf);border:1px solid var(--border); border-radius:5px;display:flex;align-items:center;justify-content:center; color:var(--text3);font-size:12px;transition:all var(--trans); } .soc-icon:hover{background:var(--adim);border-color:var(--accent);color:var(--accent)} .ftr-col-t{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);margin-bottom:12px} .ftr-links{display:flex;flex-direction:column;gap:7px} .ftr-links a{font-size:12px;color:var(--text3);transition:color var(--trans)} .ftr-links a:hover{color:var(--accent)} .ftr-bottom{ max-width:var(--max);margin:0 auto;padding:14px 0; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px; font-size:11px;color:var(--text3); } .ftr-btm-links{display:flex;gap:14px} .ftr-btm-links a{color:var(--text3)} .ftr-btm-links a:hover{color:var(--accent)} /* back to top */ #btt{ position:fixed;bottom:20px;right:20px;z-index:500; width:36px;height:36px;border-radius:50%; background:var(--accent);color:#000;border:none;cursor:pointer; font-size:16px;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .3s,transform .2s; box-shadow:0 4px 14px rgba(34,197,94,.35); } #btt.show{opacity:1;pointer-events:auto} #btt:hover{transform:translateY(-2px)} /* ============================================================ UTILITIES & ANIMATIONS ============================================================ */ @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .anim{animation:fadeUp .4s ease both} .anim-1{animation-delay:.08s} .anim-2{animation-delay:.16s} /* WP alignment */ .alignleft{float:left;margin:0 16px 10px 0} .alignright{float:right;margin:0 0 10px 16px} .aligncenter{margin:0 auto 10px;display:block} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .ftr-grid{grid-template-columns:1fr 1fr} .layout{grid-template-columns:1fr 230px} .single-wrap{grid-template-columns:1fr 240px} } @media(max-width:768px){ :root{--hh:52px} .layout,.single-wrap{grid-template-columns:1fr} .sidebar,.s-sidebar{display:none} .hdr-srch,.hdr-nav{display:none} .mob-toggle{display:flex} .hdr-nav.open{ display:flex;flex-direction:column;position:fixed; top:var(--hh);left:0;right:0; background:var(--bg2);border-bottom:1px solid var(--border); padding:14px 18px;z-index:888;gap:2px; } .ftr-grid{grid-template-columns:1fr 1fr;gap:20px} .ftr-brand{grid-column:1/-1} .grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px} .hero{padding:26px 18px 22px} .dl-box{flex-direction:column} } @media(max-width:480px){ .grid{grid-template-columns:repeat(2,1fr);gap:8px} .ftr-grid{grid-template-columns:1fr} .ftr-bottom{flex-direction:column;text-align:center} } /* ============================================================ CATEGORY HERO VARIANT hero--cat: same look as homepage hero but adapted for archives ============================================================ */ .hero--cat { text-align: center; } .hero-cat-icon { font-size: 3rem; line-height: 1; margin-bottom: 10px; } .hero--cat h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); } .sec-count { font-size: .85rem; font-weight: 400; color: var(--muted); margin-left: 8px; vertical-align: middle; } /* ============================================================ TAG HERO VARIANT (hero--tag) Identical to hero--cat, accent colour shifted to teal ============================================================ */ .hero--tag { text-align: center; } .hero--tag h1 span { /* tag name gets the accent colour, rest is white */ color: var(--accent); } /* ============================================================ SINGLE POST — image+sidebar aligned grid breadcrumb/title/meta stay full-width above the grid ============================================================ */ .single-wrap--full { display: block; /* override the 2-col grid */ max-width: var(--max); margin: 0 auto; padding: 20px 18px 56px; } /* Two-col grid: image+content | sidebar */ .post-body-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; margin-top: 18px; } .post-body-main { min-width: 0; } .post-body-sidebar { position: sticky; top: calc(var(--hh) + 14px); display: flex; flex-direction: column; gap: 16px; } /* Keep old .s-sidebar styles working inside new context */ .post-body-sidebar .sdl-widget { /* inherits from .sdl-widget */ } @media (max-width: 768px) { .post-body-grid { grid-template-columns: 1fr; } .post-body-sidebar { position: static; display: none; /* matches existing mobile sidebar hide */ } } @media (max-width: 1024px) { .post-body-grid { grid-template-columns: 1fr 240px; } }