Category: Website Optimization

@import url(‘https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap’);
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100vw;font-family:’Inter’,sans-serif !important}
body.archive{background:#fff;color:#0F172A}
.archive .site-header,.archive header.site-header,.archive .site-footer,.archive footer.site-footer,.archive .page-header,.archive .page-title,.archive .entry-meta,.archive .entry-footer,.archive .post-thumbnail,.archive .nav-links,.archive .comments-area,.archive #respond{display:none !important}
.archive #content,.archive .site-main,.archive main{padding:0 !important;margin:0 !important;max-width:none !important;width:100%}
.archive .archive-description{margin:0 !important;padding:0 !important}
.archive-description .tqd-arch-hero{position:relative;padding:120px 24px 100px;text-align:center;background:#020617;color:#fff;overflow:hidden;isolation:isolate;margin:0}
.archive-description .tqd-arch-hero::before{content:”;position:absolute;inset:-20%;background:radial-gradient(45% 60% at 25% 30%,rgba(0,200,150,0.45),transparent 70%),radial-gradient(40% 55% at 75% 30%,rgba(167,139,250,0.55),transparent 70%),radial-gradient(35% 50% at 50% 90%,rgba(244,114,182,0.35),transparent 70%);filter:blur(60px);z-index:-1;animation:tqd-float 20s ease-in-out infinite alternate}
.archive-description .tqd-arch-hero::after{content:”;position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:60px 60px;z-index:-1;mask:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 70%)}
@keyframes tqd-float{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-2%,0) scale(1.08)}}
.archive-description .tqd-arch-hero .inner{max-width:780px;margin:0 auto}
.archive-description .tqd-arch-hero .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(0,200,150,0.12);border:1px solid rgba(0,200,150,0.3);color:#00C896;border-radius:999px;font-family:’JetBrains Mono’,monospace;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:28px;backdrop-filter:blur(10px)}
.archive-description .tqd-arch-hero .pill::before{content:”;width:6px;height:6px;border-radius:50%;background:#00C896;box-shadow:0 0 10px #00C896}
.archive-description .tqd-arch-hero h1{font-family:’Space Grotesk’,sans-serif !important;font-weight:700 !important;font-size:clamp(36px,6vw,72px) !important;line-height:1 !important;letter-spacing:-0.04em !important;margin:0 0 20px !important;color:#fff !important}
.archive-description .tqd-arch-hero .grad{background:linear-gradient(135deg,#00C896 0%,#A78BFA 50%,#F472B6 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.archive-description .tqd-arch-hero p{font-family:’Inter’,sans-serif !important;font-size:clamp(16px,1.4vw,20px) !important;line-height:1.5 !important;color:rgba(255,255,255,0.75) !important;max-width:640px;margin:0 auto !important}
/* post list = card grid */
.archive .site-main > *:not(.archive-description),.archive .site-main > .hentry,.archive .site-main > article{display:none}
.archive .archive-description ~ *{display:revert}
.archive .site-main{padding:80px 32px !important;max-width:1240px !important;margin:0 auto !important}
.archive .archive-description{margin-bottom:0 !important}
.archive .archive-description + *,.archive .site-main > article,.archive .site-main > .post,.archive .site-main > .hentry{display:block}
.archive-description{padding:0 !important;background:none !important}
/* try card-style transformation */
.archive .site-main{display:block}
.archive .post,.archive article.hentry{margin:0 !important;padding:36px !important;border-radius:24px !important;background:#fff !important;border:1px solid #e2e8f0 !important;transition:all .35s ease;display:flex;flex-direction:column}
.archive .site-main > article + article,.archive .site-main > .hentry + .hentry{margin-top:24px !important}
.archive .post:hover,.archive article.hentry:hover{transform:translateY(-4px);box-shadow:0 24px 48px -16px rgba(15,23,42,0.15);border-color:rgba(0,200,150,0.4)}
.archive .entry-title{display:block !important;font-family:’Space Grotesk’,sans-serif !important;font-weight:700 !important;font-size:24px !important;line-height:1.25 !important;letter-spacing:-0.02em !important;color:#0F172A !important;margin:0 0 12px !important}
.archive .entry-title a{color:#0F172A !important;text-decoration:none !important;background:none !important}
.archive .entry-title a:hover{color:#00C896 !important}
.archive .entry-content,.archive .entry-summary{font-size:15px !important;line-height:1.6 !important;color:#64748b !important;margin:0 !important}
.archive .entry-content p,.archive .entry-summary p{margin:0 !important;color:#64748b !important}
.archive .entry-content > p:first-of-type::first-letter{font-size:inherit !important;float:none !important;background:none !important;-webkit-text-fill-color:inherit !important;color:inherit !important;margin:0 !important}
.archive .more-link,.archive a.more-link{display:inline-flex !important;margin-top:16px !important;padding:8px 18px !important;background:linear-gradient(135deg,#00C896,#34d399) !important;color:#020617 !important;border-radius:999px !important;font-size:13px !important;font-weight:600 !important;text-decoration:none !important;border:0 !important}
/* hide pagination ugly */
.archive .pagination,.archive nav.navigation{margin-top:48px !important;text-align:center}
.archive .pagination a,.archive .pagination .current,.archive .page-numbers{display:inline-block;padding:10px 16px;margin:0 4px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569 !important;font-family:’JetBrains Mono’,monospace;font-size:13px;text-decoration:none}
.archive .pagination .current,.archive .page-numbers.current{background:#00C896 !important;color:#020617 !important;border-color:#00C896}
/* nav bar inject would be ideal but no place to put it via term desc — links only */
.tqd-arch-back{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:10px 20px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);color:#fff;text-decoration:none;font-size:13px;font-weight:500;font-family:’Inter’,sans-serif}
.tqd-arch-back:hover{background:rgba(255,255,255,0.12);color:#fff}

Website Optimization
Faster sites. Higher CRO. insights.
Speed, UX, and conversion-optimization insights for landing pages and full websites.
← All articles