/* Theme Name: GameCodeXL Theme URI: https://gamecodexl.com Author: Quantum Hub Technologies Author URI: https://quantumhubtechnologies.com Description: Classic theme for GameCodeXL — game news, tips & guides and reviews. Dark by default with a light toggle, self-hosted fonts, zero dependencies and a focus on performance (LCP and CLS). Version: 1.2.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: gamecodexl Tags: blog, news, two-columns, custom-menu, custom-logo, featured-images, dark-mode */ /* ===== Fonts (self-hosted, swap) ===================================== */ @font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-var-latin.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-var-latin-ext.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Instrument Sans";src:url(fonts/instrument-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Instrument Sans";src:url(fonts/instrument-var-latin-ext.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Space Mono";src:url(fonts/spacemono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Space Mono";src:url(fonts/spacemono-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Space Mono";src:url(fonts/spacemono-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Space Mono";src:url(fonts/spacemono-700-latin-ext.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ==================================================================== TOKENS — ported from "Design system for Gamecodexl/tokens/*.css" Light on :root, dark on [data-theme="dark"]. Dark is the site default (the attribute is written on before the first paint). ==================================================================== */ :root{ /* --- Brand accents --- */ --green-300:oklch(0.86 0.16 152); --green-400:oklch(0.80 0.18 152); --green-500:oklch(0.74 0.19 152); --green-600:oklch(0.66 0.17 152); --green-700:oklch(0.56 0.14 152); --violet-300:oklch(0.80 0.14 292); --violet-400:oklch(0.72 0.17 292); --violet-500:oklch(0.64 0.19 292); --violet-600:oklch(0.56 0.18 292); --hot-500:oklch(0.68 0.20 12); --amber-500:oklch(0.80 0.16 78); --red-500:oklch(0.64 0.21 22); --blue-500:oklch(0.68 0.15 240); /* --- Cool neutral ramp --- */ --ink-0:#0a0d13; --ink-1:#0f131b; --ink-2:#161b26; --ink-3:#1e2532; --ink-4:#2a3242; --ink-5:#3a4459; --slate-1:#5a6479; --slate-2:#838da2; --slate-3:#aab3c6; --paper-3:#d7dce4; --paper-2:#e7eaf0; --paper-1:#f1f3f7; --paper-0:#f8f9fb; --white:#fff; /* --- Semantic: LIGHT --- */ --bg-base:var(--paper-0); --surface:var(--white); --surface-raised:var(--white); --surface-sunken:var(--paper-1); --surface-inset:var(--paper-2); --border:var(--paper-2); --border-strong:var(--paper-3); --text-strong:var(--ink-1); --text:#29303d; --text-muted:#616c81; --text-faint:var(--slate-2); --text-on-accent:var(--ink-0); --accent:var(--green-600); --accent-hover:var(--green-700); --accent-soft:color-mix(in oklch,var(--green-500) 14%,var(--white)); --accent-2:var(--violet-500); --accent-2-soft:color-mix(in oklch,var(--violet-500) 12%,var(--white)); --hot:var(--hot-500); --success:var(--green-600); --warning:color-mix(in oklch,var(--amber-500) 90%,black); --danger:var(--red-500); --info:var(--blue-500); --focus-ring:color-mix(in oklch,var(--green-500) 55%,transparent); --overlay:color-mix(in oklch,var(--ink-0) 45%,transparent); /* Accent as TEXT. The design system's light --accent (green-600) reaches only ~2.8:1 on paper, so kickers, tags and links set in it fail AA. --accent stays as authored for fills, bars and borders; small accent text uses this darkened tier instead (4.5:1+ on --bg-base, --surface and --accent-soft). In dark mode both are the same colour — nothing to correct there. */ --accent-text:oklch(0.52 0.17 152); --accent-2-text:oklch(0.54 0.19 292); /* --- Typography --- */ --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"Space Mono",ui-monospace,SFMono-Regular,monospace; --fs-display:clamp(2.6rem,1.6rem + 4vw,4.5rem); --fs-h1:clamp(2.1rem,1.5rem + 2.4vw,3.1rem); --fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.25rem); --fs-h3:1.5rem; --fs-h4:1.2rem; --fs-lead:1.18rem; --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.78rem; --fs-kicker:.72rem; --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.5; --lh-loose:1.68; --tracking-kicker:.16em; --tracking-tight:-.02em; --tracking-display:-.035em; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; /* --- Spacing & layout --- */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px; --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px; /* Card cover ratio. Wider than the stored 16:9 crop, so cards are shorter and more of them fit on screen; object-fit trims the difference. The article hero deliberately keeps 16:9. */ --cover-ratio:2/1; --container:1200px; --container-narrow:720px; --gutter:clamp(16px,4vw,40px); --header-h:68px; /* --- Effects --- */ --r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px; --shadow-sm:0 1px 2px rgba(15,19,27,.06),0 1px 3px rgba(15,19,27,.05); --shadow-md:0 4px 12px rgba(15,19,27,.08),0 2px 4px rgba(15,19,27,.05); --shadow-lg:0 16px 40px rgba(15,19,27,.12),0 4px 10px rgba(15,19,27,.06); --glow-accent:0 0 0 1px color-mix(in oklch,var(--accent) 40%,transparent),0 8px 24px color-mix(in oklch,var(--accent) 28%,transparent); --bw:1px;--bw-2:2px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.2,.9,.25,1.2); --dur-fast:120ms;--dur:200ms;--dur-slow:360ms; } [data-theme="dark"]{ --bg-base:var(--ink-0); --surface:var(--ink-1); --surface-raised:var(--ink-2); --surface-sunken:var(--ink-0); --surface-inset:var(--ink-3); --border:var(--ink-3); --border-strong:var(--ink-4); --text-strong:#f3f6fb; --text:#d3d9e4; --text-muted:var(--slate-2); --text-faint:var(--slate-1); --text-on-accent:var(--ink-0); --accent:var(--green-400); --accent-hover:var(--green-300); --accent-soft:color-mix(in oklch,var(--green-500) 18%,var(--ink-1)); --accent-2:var(--violet-400); --accent-2-soft:color-mix(in oklch,var(--violet-500) 20%,var(--ink-1)); --accent-text:var(--accent); --accent-2-text:var(--accent-2); --success:var(--green-400); --warning:var(--amber-500); --focus-ring:color-mix(in oklch,var(--green-400) 60%,transparent); --overlay:color-mix(in oklch,black 62%,transparent); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 20px 48px rgba(0,0,0,.55); --glow-accent:0 0 0 1px color-mix(in oklch,var(--accent) 50%,transparent),0 10px 30px color-mix(in oklch,var(--accent) 32%,transparent); } /* ===== Reset ========================================================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg-base);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;overflow-wrap:break-word} h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl{margin:0} img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-hover)} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} ul,ol{list-style:none;padding:0} ::selection{background:var(--accent);color:var(--ink-0)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ===== Accessibility ================================================= */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .gcxl-skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--ink-0);padding:10px 16px;font-weight:var(--fw-bold);font-size:var(--fs-sm);border-radius:0 0 var(--r-sm) 0} .gcxl-skip-link:focus{left:0;top:0} /* ===== Layout ======================================================== */ .gcxl-container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);width:100%} .gcxl-container--narrow{max-width:var(--container-narrow)} .gcxl-site{display:flex;flex-direction:column;min-height:100vh} .gcxl-main{flex:1 0 auto} /* ===== Header ======================================================== */ .gcxl-header{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--bw) solid var(--border)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gcxl-header{background:var(--surface)}} .gcxl-header__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);min-height:var(--header-h);display:flex;align-items:center;gap:var(--sp-6)} /* Wordmark */ .gcxl-wordmark{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:var(--fw-black);letter-spacing:var(--tracking-display);font-size:24px;color:var(--text-strong);line-height:1;white-space:nowrap;flex:none} .gcxl-wordmark:hover{color:var(--text-strong)} .gcxl-wordmark__code{color:var(--accent)} .gcxl-wordmark__xl{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:14px;background:var(--accent);color:var(--ink-0);padding:1px 6px;border-radius:var(--r-sm);margin-left:6px} .gcxl-wordmark__img{display:block;max-height:36px;width:auto} /* Primary navigation */ .gcxl-nav{margin-left:var(--sp-2)} .gcxl-nav__list{display:flex;gap:var(--sp-1);align-items:center} .gcxl-nav a{display:block;padding:8px 12px;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:15px;color:var(--text);transition:color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)} .gcxl-nav a:hover{color:var(--accent-text);background:var(--surface-inset)} .gcxl-nav .current-menu-item>a,.gcxl-nav .current-cat>a,.gcxl-nav .current_page_item>a,.gcxl-nav li.is-current>a{color:var(--accent-text)} .gcxl-nav ul ul{display:none} .gcxl-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)} .gcxl-header__search{width:260px} /* Icon buttons */ .gcxl-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-md);border:var(--bw) solid var(--border-strong);color:var(--text);background:transparent;transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-snap);flex:none} .gcxl-iconbtn:hover{color:var(--accent-text);border-color:var(--accent)} .gcxl-iconbtn:active{transform:scale(.94)} .gcxl-iconbtn svg{width:20px;height:20px} .gcxl-theme-toggle .gcxl-icon--sun{display:none} [data-theme="dark"] .gcxl-theme-toggle .gcxl-icon--sun{display:block} [data-theme="dark"] .gcxl-theme-toggle .gcxl-icon--moon{display:none} /* Mobile-only toggles */ .gcxl-menu-toggle,.gcxl-search-toggle{display:none} /* ===== Buttons ======================================================= */ .gcxl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);line-height:1;padding:11px 18px;border-radius:var(--r-md);border:var(--bw) solid transparent;white-space:nowrap;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-snap)} .gcxl-btn:active{transform:scale(.97)} .gcxl-btn--primary{background:var(--accent);color:var(--ink-0)} .gcxl-btn--primary:hover{background:var(--accent-hover);color:var(--ink-0);box-shadow:var(--glow-accent)} .gcxl-btn--outline{border-color:var(--border-strong);color:var(--text)} .gcxl-btn--outline:hover{border-color:var(--accent);color:var(--accent-text)} .gcxl-btn--ghost{color:var(--text);padding:8px 12px} .gcxl-btn--ghost:hover{color:var(--accent-text);background:var(--surface-inset)} .gcxl-btn--sm{font-size:var(--fs-xs);padding:8px 14px} .gcxl-btn--lg{font-size:var(--fs-body);padding:14px 24px} .gcxl-btn svg{width:16px;height:16px;flex:none} /* ===== Search ======================================================== */ .gcxl-search{display:flex;align-items:center;gap:var(--sp-2);background:var(--surface-inset);border:var(--bw) solid var(--border);border-radius:var(--r-pill);padding:0 6px 0 14px;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)} .gcxl-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)} .gcxl-search__field{flex:1;min-width:0;background:none;border:0;padding:9px 0;font-size:var(--fs-sm);color:var(--text-strong)} .gcxl-search__field::placeholder{color:var(--text-muted)} .gcxl-search__field:focus{outline:none} .gcxl-search__submit{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-pill);color:var(--text-muted);flex:none} .gcxl-search__submit:hover{color:var(--accent-text)} .gcxl-search__submit svg{width:17px;height:17px} .gcxl-searchbox-lg{max-width:420px;margin:var(--sp-6) 0 0} .gcxl-searchbox-lg .gcxl-search__field{padding:13px 0;font-size:var(--fs-body)} .gcxl-404 .gcxl-searchbox-lg,.gcxl-empty .gcxl-search{margin-left:auto;margin-right:auto} /* ===== Tag / Badge (kickers) ========================================= */ .gcxl-tag{display:inline-flex;align-items:center;font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;padding:4px 10px;border-radius:var(--r-xs);line-height:1;white-space:nowrap;color:var(--accent-text);background:var(--accent-soft);width:-moz-fit-content;width:fit-content} a.gcxl-tag:hover{filter:brightness(1.08)} .gcxl-tag--green{color:var(--accent-text);background:var(--accent-soft)} .gcxl-tag--violet{color:var(--accent-2-text);background:var(--accent-2-soft)} .gcxl-tag--neutral{color:var(--text-muted);background:var(--surface-inset)} .gcxl-tag--hot{color:var(--white);background:var(--hot)} .gcxl-tag--sm{font-size:10px;padding:3px 8px} .gcxl-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);line-height:1;color:var(--text-muted);background:color-mix(in oklch,var(--text-muted) 14%,transparent)} .gcxl-badge--hot{color:var(--ink-0);background:var(--hot)} .gcxl-badge--green{color:var(--ink-0);background:var(--success)} .gcxl-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor} /* ===== Rating ======================================================== */ .gcxl-rating{display:inline-flex;align-items:center;gap:6px} .gcxl-rating__stars{display:inline-flex;gap:2px} .gcxl-rating__star{position:relative;display:inline-block;width:16px;height:16px;line-height:1;font-size:16px;color:var(--border-strong)} .gcxl-rating__star::before{content:"\2605"} .gcxl-rating__star span{position:absolute;inset:0;overflow:hidden;color:var(--accent)} .gcxl-rating__star span::before{content:"\2605"} .gcxl-rating__value{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-strong)} .gcxl-rating--lg .gcxl-rating__star{width:22px;height:22px;font-size:22px} .gcxl-rating--lg .gcxl-rating__value{font-size:var(--fs-h4)} /* Bloco de nota no topo do review */ .gcxl-score{display:inline-flex;align-items:center;gap:var(--sp-3);flex:none} .gcxl-score__num{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:7px 12px;border-radius:var(--r-md);background:var(--accent);color:var(--ink-0);font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-h4);line-height:1} .gcxl-score__label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)} /* ===== Media / placeholder =========================================== */ .gcxl-media{position:relative;width:100%;aspect-ratio:var(--cover-ratio);overflow:hidden;background:var(--surface-inset)} .gcxl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)} .gcxl-media--16x10{aspect-ratio:16/10} .gcxl-media--16x9{aspect-ratio:16/9} .gcxl-media--3x2{aspect-ratio:var(--cover-ratio)} .gcxl-media__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,var(--surface-inset) 0 12px,var(--surface-sunken) 12px 24px)} .gcxl-media__ph::after{content:attr(data-slot);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text-muted)} .gcxl-media__flag{position:absolute;top:10px;left:10px;z-index:1} /* ===== Card ========================================================== */ .gcxl-card{position:relative;display:block;color:inherit;background:var(--surface-raised);border:var(--bw) solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)} .gcxl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);color:inherit} .gcxl-card:hover .gcxl-media img{transform:scale(1.04)} .gcxl-card:hover .gcxl-card__title{color:var(--accent-text)} .gcxl-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px} .gcxl-card__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.2rem;line-height:1.16;letter-spacing:-.015em;color:var(--text-strong);transition:color var(--dur) var(--ease-out)} .gcxl-card__excerpt{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gcxl-card__meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted)} .gcxl-card__meta .gcxl-card__author{color:var(--text-muted)} /* Horizontal card (lists / related) */ .gcxl-card--horizontal{display:flex;gap:var(--sp-4);align-items:flex-start;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible} .gcxl-card--horizontal:hover{box-shadow:none} .gcxl-card--horizontal .gcxl-card__thumb{width:128px;flex:none;border-radius:var(--r-md);overflow:hidden} .gcxl-card--horizontal .gcxl-card__body{padding:2px 0 0;gap:7px} .gcxl-card--horizontal .gcxl-card__title{font-size:var(--fs-h4);line-height:1.15;letter-spacing:-.01em} /* Feature card (hero) */ .gcxl-card--feature{position:relative;display:flex;min-height:300px;height:100%;border-radius:var(--r-lg);overflow:hidden;border:0;box-shadow:none} .gcxl-card--feature .gcxl-media{position:absolute;inset:0;aspect-ratio:auto;height:100%} .gcxl-card--feature:hover .gcxl-media img{transform:scale(1.03)} .gcxl-card--feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,13,19,.92) 8%,rgba(10,13,19,.35) 55%,transparent 85%)} .gcxl-card--feature .gcxl-card__body{position:relative;z-index:1;margin-top:auto;padding:22px;gap:10px} .gcxl-card--feature .gcxl-card__title{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);line-height:1.06;letter-spacing:-.03em;color:#fff;max-width:22ch} .gcxl-card--feature:hover .gcxl-card__title{color:#fff} .gcxl-card--feature .gcxl-card__excerpt{color:rgba(255,255,255,.82);font-size:var(--fs-body);max-width:48ch;-webkit-line-clamp:3;line-clamp:3} .gcxl-card--feature .gcxl-card__meta{color:rgba(255,255,255,.7)} .gcxl-card--feature .gcxl-card__meta .gcxl-card__author{color:rgba(255,255,255,.85)} .gcxl-card__tags{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap} /* Review card (home 3-col grid) */ .gcxl-review-card{display:block;color:inherit;background:var(--surface-raised);border:var(--bw) solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)} .gcxl-review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);color:inherit} .gcxl-review-card:hover .gcxl-media img{transform:scale(1.04)} .gcxl-review-card__body{padding:14px 16px 16px} .gcxl-review-card__cat{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-bottom:6px} .gcxl-review-card__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:17px;line-height:1.2;color:var(--text-strong);margin-bottom:8px;transition:color var(--dur) var(--ease-out)} .gcxl-review-card:hover .gcxl-review-card__title{color:var(--accent-text)} /* ===== Redeem-code chip ============================================== */ .gcxl-codechip{display:inline-flex;flex-direction:column;gap:6px;vertical-align:top;max-width:100%} .gcxl-codechip__label{font-family:var(--font-mono);font-size:var(--fs-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--text-muted)} .gcxl-codechip__box{display:inline-flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;background:var(--surface-inset);border:var(--bw) dashed var(--border-strong);border-radius:var(--r-sm);transition:border-color var(--dur) var(--ease-out);max-width:100%;flex-wrap:wrap} .gcxl-codechip__box:hover{border-color:var(--accent)} .gcxl-codechip__code{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-body);letter-spacing:.05em;color:var(--text-strong);background:none;padding:0;user-select:all;-webkit-user-select:all;word-break:break-all} .gcxl-codechip__copy{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--accent-text);padding:5px 10px;border-radius:var(--r-xs);background:transparent;transition:color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);flex:none} .gcxl-codechip__copy:hover{background:var(--accent-soft)} .gcxl-codechip__copy-done{display:none} .gcxl-codechip__copy.is-copied{color:var(--success);background:var(--accent-soft)} .gcxl-codechip__copy.is-copied .gcxl-codechip__copy-idle{display:none} .gcxl-codechip__copy.is-copied .gcxl-codechip__copy-done{display:inline} .gcxl-codechip__copy.is-copied .gcxl-codechip__copy-done::before{content:"\2713\00a0"} .gcxl-article__body .gcxl-codechip{margin-right:var(--sp-3)} /* ===== Section head ================================================== */ .gcxl-sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:var(--bw-2) solid var(--border)} .gcxl-sectionhead__kicker{font-family:var(--font-mono);font-size:var(--fs-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--accent-text);margin-bottom:6px} .gcxl-sectionhead__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h2);letter-spacing:var(--tracking-tight);color:var(--text-strong);line-height:1.1} /* ===== Home ========================================================== */ .gcxl-home{padding-top:var(--sp-6);padding-bottom:var(--sp-16)} .gcxl-hero-row{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-10)} .gcxl-hero-row__side{display:flex;flex-direction:column;gap:var(--sp-4);justify-content:space-between} /* Compact rows here, so the hero row is as short as the hero itself rather than as tall as a stack of full cards. */ .gcxl-hero-row__side .gcxl-card--horizontal .gcxl-card__thumb{width:120px} .gcxl-hero-row__side .gcxl-media--16x10{aspect-ratio:var(--cover-ratio)} .gcxl-hero-row__side .gcxl-card--horizontal .gcxl-card__title{font-size:1.05rem} .gcxl-hero-row__side .gcxl-card--horizontal+.gcxl-card--horizontal{padding-top:var(--sp-4);border-top:var(--bw) solid var(--border)} .gcxl-body-row{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-10);align-items:start} .gcxl-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .gcxl-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .gcxl-section{margin-bottom:var(--sp-12)} .gcxl-section:last-child{margin-bottom:0} /* ===== Sidebar rail ================================================== */ .gcxl-rail{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:var(--sp-5)} .gcxl-panel{background:var(--surface-raised);border:var(--bw) solid var(--border);border-radius:var(--r-lg);padding:20px} .gcxl-panel__head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)} .gcxl-panel__head svg{width:16px;height:16px;color:var(--accent-text);flex:none} .gcxl-panel__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:18px;color:var(--text-strong);line-height:1.2} .gcxl-trending{display:flex;flex-direction:column;gap:var(--sp-4)} .gcxl-trending li{display:flex;gap:var(--sp-3);align-items:flex-start} .gcxl-trending__rank{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:20px;color:var(--accent-text);line-height:1;width:34px;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums} .gcxl-trending__body{display:flex;flex-direction:column;gap:6px;min-width:0} .gcxl-trending__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:15px;line-height:1.25;color:var(--text-strong);transition:color var(--dur) var(--ease-out)} .gcxl-trending__title:hover{color:var(--accent-text)} /* Newsletter */ .gcxl-newsletter{background:var(--accent-soft);border-color:color-mix(in oklch,var(--accent) 35%,transparent)} .gcxl-newsletter__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:18px;color:var(--text-strong);line-height:1.2;margin-bottom:6px} .gcxl-newsletter__text{font-size:var(--fs-sm);color:var(--text);line-height:1.5;margin-bottom:var(--sp-4)} .gcxl-newsletter__form{display:flex;flex-direction:column;gap:var(--sp-2)} .gcxl-newsletter__field{width:100%;background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:var(--r-md);padding:11px 14px;font-size:var(--fs-sm);color:var(--text-strong)} .gcxl-newsletter__field::placeholder{color:var(--text-muted)} .gcxl-newsletter__field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)} .gcxl-newsletter__note{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--text-muted);text-align:center} /* ===== Article ======================================================= */ .gcxl-article{padding-top:var(--sp-10);padding-bottom:var(--sp-20)} .gcxl-article__head{margin-bottom:var(--sp-5)} .gcxl-article__tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-5)} .gcxl-article__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;color:var(--text-strong);margin-bottom:var(--sp-5)} .gcxl-article__meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted);padding-bottom:var(--sp-6);border-bottom:var(--bw) solid var(--border);margin-bottom:var(--sp-8)} .gcxl-article__author{color:var(--text-strong)} .gcxl-article__avatar{border-radius:50%;flex:none} .gcxl-article__meta .gcxl-score{margin-left:auto} .gcxl-article__media{border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-8)} .gcxl-article__caption{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-3);text-align:center} /* Post body */ .gcxl-article__body{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--text)} .gcxl-article__body>*+*{margin-top:1.35em} .gcxl-article__body>p:first-of-type{font-size:var(--fs-lead);line-height:1.5;color:var(--text-strong);font-weight:var(--fw-medium)} .gcxl-article__body h2{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h3);letter-spacing:var(--tracking-tight);color:var(--text-strong);line-height:1.2;margin-top:2em} .gcxl-article__body h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);color:var(--text-strong);line-height:1.25;margin-top:1.8em} .gcxl-article__body a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px} .gcxl-article__body strong{color:var(--text-strong);font-weight:var(--fw-bold)} .gcxl-article__body ul,.gcxl-article__body ol{padding-left:1.4em} .gcxl-article__body ul{list-style:disc} .gcxl-article__body ol{list-style:decimal} .gcxl-article__body li+li{margin-top:.5em} .gcxl-article__body li::marker{color:var(--accent-text)} .gcxl-article__body blockquote{border-left:3px solid var(--accent);padding:2px 0 2px var(--sp-5);color:var(--text-strong);font-size:var(--fs-lead);line-height:1.5} .gcxl-article__body img,.gcxl-article__body figure img{border-radius:var(--r-md)} .gcxl-article__body figcaption{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--sp-2);text-align:center} .gcxl-article__body code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-inset);padding:2px 6px;border-radius:var(--r-xs)} .gcxl-article__body pre{background:var(--surface-raised);border:var(--bw) solid var(--border);border-radius:var(--r-md);padding:var(--sp-5);overflow-x:auto} .gcxl-article__body pre code{background:none;padding:0} .gcxl-article__body table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .gcxl-article__body th,.gcxl-article__body td{border:var(--bw) solid var(--border);padding:10px 12px;text-align:left} .gcxl-article__body th{background:var(--surface-inset);font-family:var(--font-display);color:var(--text-strong)} /* Review final score, after the body */ .gcxl-verdict{margin-top:var(--sp-10);padding:var(--sp-6);border:var(--bw) solid color-mix(in oklch,var(--accent) 35%,transparent);border-radius:var(--r-lg);background:var(--accent-soft)} .gcxl-verdict__label{font-family:var(--font-mono);font-size:var(--fs-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-3)} .gcxl-verdict__row{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap} .gcxl-verdict__num{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h2);line-height:1;color:var(--text-strong);font-variant-numeric:tabular-nums} .gcxl-article__pages{margin-top:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-sm);display:flex;gap:var(--sp-2)} .gcxl-article__tagrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:var(--bw) solid var(--border)} .gcxl-related{margin-top:var(--sp-12);padding-top:var(--sp-8);border-top:var(--bw-2) solid var(--border)} .gcxl-related__list{display:flex;flex-direction:column;gap:var(--sp-5)} /* ===== Archive / category ============================================ */ .gcxl-archive{padding-top:var(--sp-10);padding-bottom:var(--sp-20)} .gcxl-archive__head{margin-bottom:var(--sp-8)} .gcxl-archive__kicker{font-family:var(--font-mono);font-size:var(--fs-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--accent-text);margin-bottom:10px} .gcxl-archive__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h1);letter-spacing:-.03em;color:var(--text-strong);line-height:1.05;margin-bottom:var(--sp-2)} .gcxl-archive__desc{color:var(--text-muted);font-size:var(--fs-lead);max-width:60ch;line-height:1.5} .gcxl-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6)} .gcxl-filters a{display:inline-block;padding:7px 14px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:14px;line-height:1.2;border:var(--bw) solid var(--border-strong);color:var(--text);transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)} .gcxl-filters a:hover{border-color:var(--accent);color:var(--accent-text)} .gcxl-filters a[aria-current]{background:var(--accent);border-color:transparent;color:var(--ink-0)} .gcxl-archive__layout{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-10);align-items:start} .gcxl-archive__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .gcxl-archive__layout .gcxl-archive__grid{grid-template-columns:repeat(2,1fr)} .gcxl-empty{padding:var(--sp-12) 0;text-align:center;color:var(--text-muted)} .gcxl-empty__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h2);color:var(--text-strong);margin-bottom:var(--sp-3)} /* Pagination */ .gcxl-pagination{margin-top:var(--sp-12);display:flex;justify-content:center} .gcxl-pagination .nav-links{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;justify-content:center} .gcxl-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-md);border:var(--bw) solid var(--border-strong);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)} .gcxl-pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent-text)} .gcxl-pagination .page-numbers.current{background:var(--accent);border-color:transparent;color:var(--ink-0);font-weight:var(--fw-bold)} .gcxl-pagination .page-numbers.dots{border-color:transparent} /* ===== Page / 404 ==================================================== */ .gcxl-page{padding-top:var(--sp-10);padding-bottom:var(--sp-20)} .gcxl-page__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h1);letter-spacing:-.03em;line-height:1.08;color:var(--text-strong);margin-bottom:var(--sp-8)} .gcxl-404{padding:var(--sp-24) 0;text-align:center} .gcxl-404__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h1);letter-spacing:-.03em;color:var(--text-strong);margin:var(--sp-3) 0 var(--sp-4);line-height:1.08} .gcxl-404__text{color:var(--text-muted);max-width:48ch;margin:0 auto} .gcxl-404 .gcxl-archive__kicker{margin-bottom:0} .gcxl-404__back{display:inline-block;margin-top:var(--sp-8)} /* Newsletter strip above the footer (pages without a rail) */ .gcxl-footer-newsletter{padding:var(--sp-12) 0 0} .gcxl-footer-newsletter .gcxl-newsletter{padding:var(--sp-8)} .gcxl-footer-newsletter .gcxl-newsletter__form{flex-direction:row;flex-wrap:wrap;align-items:center} .gcxl-footer-newsletter .gcxl-newsletter__field{flex:1;min-width:220px;width:auto} .gcxl-footer-newsletter .gcxl-newsletter__note{width:100%;text-align:left} @media (max-width:620px){ .gcxl-footer-newsletter .gcxl-newsletter__form{flex-direction:column;align-items:stretch} .gcxl-footer-newsletter .gcxl-newsletter__field{width:100%} } /* ===== Footer ======================================================== */ .gcxl-footer{border-top:var(--bw) solid var(--border);background:var(--surface);margin-top:var(--sp-10);flex:none} .gcxl-footer__inner{max-width:var(--container);margin:0 auto;padding:var(--sp-12) var(--gutter);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-8)} .gcxl-footer__blurb{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6;max-width:34ch;margin-top:var(--sp-3)} .gcxl-footer__col-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-4)} .gcxl-footer__list{display:flex;flex-direction:column;gap:10px} .gcxl-footer__list a{color:var(--text);font-size:var(--fs-sm)} .gcxl-footer__list a:hover{color:var(--accent-text)} .gcxl-footer__social{display:flex;gap:var(--sp-3);flex-wrap:wrap} .gcxl-footer__social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);border:var(--bw) solid var(--border);color:var(--text-muted)} .gcxl-footer__social a:hover{color:var(--accent-text);border-color:var(--accent)} .gcxl-footer__social svg{width:18px;height:18px} .gcxl-footer__bar{border-top:var(--bw) solid var(--border);padding:18px var(--gutter)} .gcxl-footer__bar-inner{max-width:var(--container);margin:0 auto;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:space-between} /* ===== Ad slots (zero CLS) =========================================== */ .gcxl-ad{margin:var(--sp-8) 0;text-align:center} .gcxl-ad__label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px} .gcxl-ad__space{display:flex;align-items:center;justify-content:center;min-height:280px;background:var(--surface-sunken);border-top:var(--bw) solid var(--border);border-bottom:var(--bw) solid var(--border);overflow:hidden} @media (min-width:900px){.gcxl-ad__space{min-height:250px}} /* ==================================================================== RESPONSIVE ==================================================================== */ @media (max-width:1000px){ .gcxl-body-row,.gcxl-archive__layout{grid-template-columns:1fr;gap:var(--sp-12)} .gcxl-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start} .gcxl-archive__layout .gcxl-archive__grid{grid-template-columns:repeat(3,1fr)} .gcxl-header__search{width:200px} } @media (max-width:860px){ .gcxl-header__inner{gap:var(--sp-3);flex-wrap:wrap} .gcxl-menu-toggle,.gcxl-search-toggle{display:inline-flex} .gcxl-nav{display:none;order:3;width:100%;margin:0 0 var(--sp-3);padding-top:var(--sp-3);border-top:var(--bw) solid var(--border)} .gcxl-nav.is-open{display:block} .gcxl-nav__list{flex-direction:column;align-items:stretch;gap:2px} .gcxl-nav a{padding:12px;font-size:16px} .gcxl-header__search{display:none;order:2;width:100%;margin-bottom:var(--sp-3)} .gcxl-header__search.is-open{display:block} .gcxl-header__cta{display:none} .gcxl-hero-row{grid-template-columns:1fr} .gcxl-card--feature{min-height:320px} .gcxl-archive__grid,.gcxl-archive__layout .gcxl-archive__grid,.gcxl-grid-3{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ :root{--header-h:60px} .gcxl-wordmark{font-size:20px} .gcxl-wordmark__xl{font-size:12px;padding:1px 5px} .gcxl-grid-2,.gcxl-grid-3,.gcxl-archive__grid,.gcxl-archive__layout .gcxl-archive__grid,.gcxl-rail{grid-template-columns:1fr} .gcxl-card--feature{min-height:280px} .gcxl-card--feature .gcxl-card__body{padding:20px} .gcxl-card--horizontal .gcxl-card__thumb{width:104px} .gcxl-sectionhead{flex-wrap:wrap;gap:var(--sp-3)} .gcxl-article__meta{gap:var(--sp-2);font-size:var(--fs-xs)} .gcxl-article__meta .gcxl-score{margin-left:0;width:100%} .gcxl-footer__inner{grid-template-columns:1fr 1fr;gap:var(--sp-8)} .gcxl-footer__brand{grid-column:1/-1} } /* ===== Block editor adjustments ====================================== */ .gcxl-article__body .alignwide{max-width:min(100%,900px);margin-left:auto;margin-right:auto} .gcxl-article__body .alignfull{max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .gcxl-article__body .aligncenter{margin-left:auto;margin-right:auto;text-align:center} .gcxl-article__body .wp-caption{max-width:100%} .gcxl-article__body .wp-block-embed__wrapper{position:relative} .gcxl-article__body .wp-block-image{margin-top:1.6em}