/*
Theme Name: Chronicles of RPG
Theme URI: https://chroniclesofrpg.com
Author: Jérémy
Description: Custom theme for Chronicles of RPG — an independent outlet covering RPGs, Western and Japanese alike. "Scored Verdict" direction: Archivo masthead, Newsreader body copy, a single blue accent, and a numeric score tile (/10) for reviews.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: chronicles-of-rpg
*/
/* =========================================================
1. TOKENS
========================================================= */
:root{
--void: #0d1117;
--void-deep: #080a0e;
--ink: #161b24;
--ink-raised: #1e2531;
--hairline: #262c38;
--paper: #eef0f4;
--paper-dim: #9aa1ad;
--paper-faint: #5b6371;
--accent: #3c59e0;
--accent-bright: #6a84ec;
--accent-dim: #172142;
--highlight: #eef0f4;
--highlight-text: #0d1117;
--display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--body: 'Newsreader', Georgia, 'Times New Roman', serif;
color-scheme: dark;
}
/* Light mode: toggled by adding data-theme="light" on (see nav.js). */
:root[data-theme="light"]{
--void: #f4f5f8;
--void-deep: #e8eaef;
--ink: #ffffff;
--ink-raised: #eef0f4;
--hairline: #dde1e8;
--paper: #12151c;
--paper-dim: #4b5462;
--paper-faint: #7b8492;
--accent: #3c59e0;
--accent-bright: #2c46c4;
--accent-dim: #e4e9fc;
--highlight: #12151c;
--highlight-text: #ffffff;
color-scheme: light;
}
/* =========================================================
2. RESET / BASE
========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ color-scheme: dark; }
body{
background: var(--void);
color: var(--paper);
font-family: var(--body);
margin:0;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ font-family: var(--display); font-weight:800; text-wrap: balance; margin:0; letter-spacing:-.01em; }
::selection{ background: var(--accent); color:#fff; }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
/* Backstop: Jetpack's automatic Related Posts is disabled in functions.php, but
hide its markup here too in case that filter ever stops applying. */
#jp-relatedposts, .jp-relatedposts{ display:none !important; }
/* Same backstop for Jetpack's default Like + Sharing buttons, replaced by
the theme's own .share-box (see single.php / single-review.php). */
#jp-post-flair, .sharedaddy, .likes-widget-container{ display:none !important; }
.container{ max-width:1280px; margin:0 auto; padding:0 28px; }
/* =========================================================
3. HEADER / NAV
========================================================= */
.site-header{
display:flex; align-items:center; gap:32px;
padding: 0 32px; height: 88px;
background: linear-gradient(180deg, var(--ink) 0%, var(--void-deep) 100%);
border-bottom: 1px solid var(--hairline);
position: sticky; top:0; z-index:20;
}
.brand{ display:flex; align-items:center; gap:12px; font-family: var(--display); font-weight:900; font-size:1.4rem; color: var(--paper); text-transform:uppercase; letter-spacing:.01em; }
.brand .mark-logo{ width:40px; height:40px; flex:none; display:block; }
.brand img.custom-logo{ height:38px; width:auto; }
.site-nav{ display:flex; gap:6px; margin-right:auto; }
.site-nav ul{ display:flex; gap:6px; }
.site-nav a{
display:flex; align-items:center; gap:7px;
font-family: var(--display); font-weight:700; font-size:.92rem; letter-spacing:.02em; text-transform:uppercase;
color: var(--paper-dim); padding: 12px 18px; border-radius:8px;
}
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a{
color: var(--paper); background: var(--ink-raised); box-shadow: inset 0 -2px 0 var(--accent);
}
.header-tools{ display:flex; gap:16px; align-items:center; color: var(--paper-dim); font-family:var(--display); font-size:.82rem; font-weight:700; text-transform:uppercase; }
.header-tools .lang{ border:1px solid var(--hairline); border-radius:5px; padding:6px 8px; }
.search-toggle{ background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.search-toggle:hover, .search-toggle[aria-expanded="true"]{ color: var(--paper); }
.theme-toggle, .profile-link{
display:flex; align-items:center; justify-content:center; width:38px; height:38px;
border-radius:8px; border:1px solid var(--hairline); color: var(--paper-dim);
background:none; cursor:pointer; text-decoration:none; padding:0;
}
.theme-toggle:hover, .profile-link:hover{ color: var(--paper); border-color: var(--paper-dim); }
.theme-toggle svg, .profile-link svg{ width:19px; height:19px; fill:currentColor; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
.site-search-form{ position:absolute; top:100%; right:32px; margin-top:1px; background:var(--ink); border:1px solid var(--hairline); border-radius:0 0 10px 10px; padding:14px; box-shadow:0 12px 24px rgba(0,0,0,.35); z-index:19; }
.site-search-form[hidden]{ display:none; }
.site-search-form input[type="search"]{ width:260px; max-width:60vw; background:var(--ink-raised); border:1px solid var(--hairline); border-radius:8px; padding:9px 12px; color:var(--paper); font-family:var(--body); font-size:.95rem; }
.site-search-form input[type="search"]::placeholder{ color:var(--paper-faint); }
.site-search-form input[type="search"]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.menu-toggle{ display:none; background:none; border:1px solid var(--hairline); border-radius:8px; color:var(--paper); padding:8px 10px; font-family:var(--display); font-weight:700; }
/* =========================================================
4. FOOTER
========================================================= */
.site-footer{
padding: 48px 28px 32px; background: var(--void-deep); border-top:1px solid var(--hairline);
display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
}
.site-footer .fmark{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--paper); font-size:1.5rem; letter-spacing:.03em; }
.footer-social{ display:flex; gap:12px; }
.footer-social .social-icon{
display:flex; align-items:center; justify-content:center; width:38px; height:38px;
border-radius:8px; background: var(--ink-raised); border:1px solid var(--hairline);
color: var(--paper-dim); transition: background .2s ease, color .2s ease;
}
.footer-social .social-icon:hover{ background: var(--accent); color:#fff; }
.footer-social .social-icon svg{ width:18px; height:18px; fill:currentColor; }
.footer-menu{ display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; font-family:var(--body); }
.footer-menu li{ display:flex; align-items:center; }
.footer-menu li:not(:last-child)::after{ content:"|"; color: var(--hairline); margin:0 12px; }
.footer-menu a{ color: var(--paper-dim); font-size:.88rem; text-decoration:none; }
.footer-menu a:hover{ color: var(--accent-bright); }
.footer-copy{ font-family:var(--body); font-size:.82rem; color: var(--paper-faint); margin:0; }
/* =========================================================
5. COMPOSANTS PARTAGÉS (pills, boutons, score)
========================================================= */
.pill{
font-family: var(--display); font-weight:700; font-size: .64rem; letter-spacing:.05em; text-transform:uppercase;
padding: 6px 11px; border-radius:6px; display:inline-flex; align-items:center; gap:5px;
white-space:nowrap; background: var(--ink-raised); color: var(--paper-dim); border:1px solid var(--hairline);
}
.pill.coeur{ background: var(--highlight); color: var(--highlight-text); border-color: var(--highlight); }
.pill.venir{ background: var(--accent-dim); color: var(--accent-bright); border-color: var(--accent); }
.pill.plat{ background: var(--ink-raised); color: var(--paper-dim); border-color: var(--hairline); }
.btn{
font-family: var(--display); font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.02em;
border-radius:8px; padding:11px 22px; display:inline-flex; align-items:center; gap:8px;
border:1px solid transparent; background: var(--accent); color:#fff; cursor:pointer;
}
.btn:hover{ background: var(--accent-bright); color:#fff; }
.btn.ghost{ background:transparent; border-color: var(--hairline); color: var(--paper-dim); }
.score-tile{
display:inline-flex; align-items:center; justify-content:center; flex:none;
background: var(--accent); color:#fff; font-family: var(--display); font-weight:900;
border-radius:6px; line-height:1;
}
.score-tile.sm{ width:34px; height:34px; font-size:.82rem; }
.score-tile.md{ width:44px; height:44px; font-size:1rem; }
.score-tile.lg{ width:64px; height:64px; font-size:1.35rem; border-radius:10px; }
.meta{ display:flex; align-items:center; gap:10px; font-family:var(--body); font-size:.85rem; color: var(--paper-faint); flex-wrap:wrap; }
.meta .byline{ color: var(--accent-bright); font-weight:600; font-style:italic; }
.meta .dot{ opacity:.5; }
/* =========================================================
6. ACCUEIL (front-page.php)
========================================================= */
.home-body{ padding: 30px 28px 10px; max-width:1280px; margin:0 auto; }
.home-head{ margin-bottom:30px; }
.home-head h1{ font-size:1.9rem; margin-bottom:10px; }
.home-head .lede{ font-family:var(--body); font-style:italic; color:var(--paper-dim); font-size:1.15rem; line-height:1.6; max-width:68ch; margin:0; }
.hero-card{ display:grid; gap:18px; margin-bottom:34px; }
.hero-image{
aspect-ratio: 21/9; border-radius:10px; position:relative; overflow:hidden;
background: linear-gradient(135deg, #141a26 0%, var(--accent-dim) 55%, var(--void-deep) 100%);
background-size:cover; background-position:center;
display:flex; align-items:flex-end; padding:22px;
}
.hero-image .tag-float{ position:absolute; top:18px; left:18px; }
.hero-text h2{ font-size: 2.05rem; line-height:1.15; margin-bottom:12px; }
.hero-text h2 a{ color:inherit; }
.hero-text .dek{ font-family:var(--body); font-style:italic; color: var(--paper-dim); font-size:1.1rem; max-width:70ch; line-height:1.6; margin-bottom:14px; }
.section-head{ display:flex; align-items:baseline; gap:14px; margin: 6px 0 16px; }
.section-head h3{ font-size:1.05rem; color: var(--paper); text-transform:uppercase; letter-spacing:.02em; }
.section-head .rule{ flex:1; height:1px; background: var(--hairline); }
.section-head .eyebrow{ font-family:var(--display); font-weight:800; font-size:.64rem; color:var(--paper-faint); letter-spacing:.1em; text-transform:uppercase; }
.section-head .see-all{ font-family:var(--display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; color:var(--accent-bright); white-space:nowrap; text-decoration:none; }
.spotlight-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-bottom:36px; }
.spot-card{ display:flex; flex-direction:column; gap:10px; }
.spot-image{ aspect-ratio:16/10; border-radius:8px; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.spot-image .tag-float{ position:absolute; top:10px; left:10px; }
.spot-card h4{ font-size:.98rem; line-height:1.35; color:var(--paper); }
.spot-card h4 a{ color:inherit; }
/* Deep Chronicles preview, at the bottom of the homepage: one big banner
card for the Cover Story (or latest feature), smaller cards for the rest. */
.deep-feature-wrap{ margin-bottom:10px; }
.deep-feature{ display:block; margin-bottom:24px; }
.deep-feature-image{
display:flex; align-items:flex-end; position:relative; aspect-ratio:21/9; border-radius:14px; overflow:hidden;
background-size:cover; background-position:center; background-color:var(--ink-raised); padding:26px;
box-shadow:0 20px 40px rgba(0,0,0,.4); transition: transform .3s ease;
}
.deep-feature:hover .deep-feature-image{ transform: translateY(-2px); }
.deep-feature-image::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(13,17,23,.92) 100%); pointer-events:none; }
.deep-feature-image .tag-float{ position:absolute; top:20px; left:20px; z-index:2; }
.deep-feature-image h4{ position:relative; z-index:2; font-size:1.9rem; line-height:1.2; color:#fff; margin:0; max-width:80%; }
.deep-feature .meta{ margin-top:14px; }
.deep-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom:36px; }
.deep-card{ display:flex; flex-direction:column; gap:10px; }
.deep-card-image{ aspect-ratio:4/3; border-radius:8px; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.deep-card-image .tag-float{ position:absolute; top:10px; left:10px; }
.deep-card h4{ font-size:.98rem; line-height:1.35; color:var(--paper); }
.deep-card h4 a{ color:inherit; }
.deep-grid--side{ grid-template-columns: repeat(3,1fr); margin-bottom:0; }
@media (max-width:900px){
.deep-grid{ grid-template-columns: 1fr 1fr; }
.deep-grid--side{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
.deep-grid{ grid-template-columns: 1fr; }
.deep-grid--side{ grid-template-columns: 1fr; }
.deep-feature-image{ aspect-ratio:16/9; padding:18px; }
.deep-feature-image h4{ font-size:1.4rem; max-width:100%; }
}
.upcoming-wrap{ margin-bottom:36px; }
.upcoming-rail{ display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; }
/* Generic horizontal-scroll rail with prev/next buttons instead of a
visible scrollbar — see cor-rail-scroll.js for the click behavior. */
.rail-scroll-wrap{ position:relative; }
.rail-scroll{ scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.rail-scroll::-webkit-scrollbar{ display:none; height:0; }
.rail-scroll-wrap::before, .rail-scroll-wrap::after{
content:""; position:absolute; top:0; bottom:6px; width:44px; pointer-events:none; z-index:2;
}
.rail-scroll-wrap::before{ left:0; background:linear-gradient(90deg, var(--void) 0%, transparent 100%); }
.rail-scroll-wrap::after{ right:0; background:linear-gradient(270deg, var(--void) 0%, transparent 100%); }
.rail-nav{
position:absolute; top:calc(50% - 3px); transform:translateY(-50%); z-index:3;
width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--ink); border:1px solid var(--hairline); color:var(--paper);
cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.4); transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.rail-nav svg{ width:18px; height:18px; }
.rail-nav:hover{ background:var(--accent); border-color:var(--accent); }
.rail-nav.is-disabled{ opacity:0; pointer-events:none; }
.rail-prev{ left:6px; }
.rail-next{ right:6px; }
/* On the "Coming Up" rail, cards carry a release-date/platforms block
below the cover — centering on the whole card would sit the arrows too
low. Re-center them on the cover image itself instead: cards are a
fixed 200px wide with a 2:3 cover, so its height never varies. */
.upcoming-wrap .rail-nav{ top:calc(200px * 3 / 2 / 2); }
@media (max-width:640px){
.rail-nav{ display:none; }
.rail-scroll-wrap::before, .rail-scroll-wrap::after{ display:none; }
}
/* Same card design as the /games/ grid (.game-card) — portrait cover,
title captioned over a bottom gradient, status badge in the corner. */
.upcoming-card{ flex:none; width:200px; display:flex; flex-direction:column; gap:8px; }
.upcoming-card .upcoming-cover{
display:flex; align-items:flex-end; position:relative; aspect-ratio:2/3; border-radius:18px; overflow:hidden;
background-size:cover; background-position:center; background-color:var(--ink-raised);
transition: transform .25s ease, box-shadow .25s ease;
}
.upcoming-card .upcoming-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(13,17,23,.94) 100%); pointer-events:none; }
.upcoming-card .upcoming-cover .tag-float{ position:absolute; top:8px; left:8px; z-index:2; }
.upcoming-card .upcoming-cover h5{ position:relative; z-index:2; padding:10px; margin:0; font-family:var(--display); font-weight:800; font-size:.86rem; line-height:1.25; color:#fff; }
.upcoming-card:hover .upcoming-cover{ transform: translateY(-4px) scale(1.035); box-shadow: 0 14px 28px rgba(0,0,0,.5); }
.upcoming-meta{ display:flex; flex-direction:column; gap:2px; padding:0 2px; }
.upcoming-card .plat-row{ margin-top:2px; }
.plat-row{ display:flex; flex-wrap:wrap; gap:5px; }
.upcoming-date{ font-family:var(--display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--paper-dim); }
.rails{ display:grid; grid-template-columns: 1fr 1fr; gap:34px; padding-bottom:36px; }
.rail-item{ display:flex; gap:14px; padding: 14px 0; border-bottom:1px solid var(--hairline); align-items:center; }
.rail-item:last-child{ border-bottom:none; }
.rail-thumb{ width:96px; height:72px; border-radius:8px; flex:none; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.rail-info{ flex:1; }
.rail-info h5{ font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--paper); margin-bottom:6px; line-height:1.3; }
.rail-info h5 a{ color:inherit; }
/* =========================================================
7. FICHE TEST (single-test.php)
========================================================= */
.article-hero{ position:relative; aspect-ratio: 21/8; overflow:hidden; background-size:cover; background-position:center;
max-width:1800px; margin:0 auto;
background-image: linear-gradient(140deg, #141a26 0%, var(--accent-dim) 60%, var(--void-deep) 100%); }
.article-hero .breadcrumb{ position:absolute; top:16px; left:28px; font-family:var(--display); font-weight:700; font-size:.78rem; color: rgba(238,240,244,.65); text-transform:uppercase; letter-spacing:.03em; }
.article-wrap{ display:grid; grid-template-columns: 1fr 300px; gap:40px; padding: 32px 28px 44px; max-width:1280px; margin:0 auto; }
.article-main h1{ font-size:1.95rem; line-height:1.2; margin-bottom:16px; }
.verdict{
display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:64ch;
background: var(--ink); border:1px solid var(--hairline); border-radius:10px; padding:16px 20px; margin:20px 0 24px;
}
.verdict .score-label{ font-family:var(--display); font-weight:800; font-size:.7rem; color:var(--paper-faint); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.verdict .score-summary{ font-family:var(--body); font-style:italic; color:var(--paper-dim); font-size:.92rem; }
.article-body p, .article-body li{ font-family:var(--body); font-size:1.15rem; line-height:1.7; color: var(--paper); margin: 0 0 1.1em; max-width: 64ch; }
.article-body h2, .article-body h3{ font-size:1.5rem; line-height:1.25; margin: 1.8em 0 .7em; }
.article-body h2:first-child, .article-body h3:first-child{ margin-top:0; }
.article-body img{ border-radius:10px; margin: 1.4em 0; }
.article-body > *:first-child::first-letter{
font-family: var(--display); font-weight:900; font-size: 3.2rem; float:left; line-height:.85; padding: 5px 10px 0 0; color: var(--accent-bright);
}
.article-body blockquote{
border-left: 3px solid var(--accent); margin: 24px 0; padding: 4px 0 4px 20px;
font-family: var(--body); font-size:1.3rem; font-style:italic; color: var(--accent-bright); max-width:56ch;
}
.sidebar-box{ background: var(--ink); border:1px solid var(--hairline); border-radius:10px; padding:18px; margin-bottom:18px; }
.sidebar-box h4{ font-family:var(--display); font-weight:800; font-size:.78rem; letter-spacing:.06em; color: var(--paper-faint); text-transform:uppercase; margin-bottom:14px; }
.related-item{ display:flex; gap:12px; margin-bottom:14px; align-items:center; }
.related-thumb{ width:64px; height:64px; border-radius:8px; flex:none; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.related-item h5{ font-family:var(--display); font-weight:700; font-size:.85rem; line-height:1.3; }
.related-item h5 a{ color:inherit; }
/* =========================================================
7b. SINGLE GAME (single-game.php)
========================================================= */
.game-hero{ display:grid; grid-template-columns: 240px 1fr; gap:32px; align-items:center; }
.game-hero .game-cover{
aspect-ratio:3/4; border-radius:10px; background-size:cover; background-position:center; background-color:var(--ink-raised);
background-image: linear-gradient(150deg,#141a26,#1c2740 65%,#080a0e);
}
.game-head{ padding-top:0; }
.game-tags{ display:flex; gap:8px; margin-bottom:14px; }
.game-head h1{ font-size:1.95rem; line-height:1.2; margin-bottom:24px; }
.game-top{ display:grid; grid-template-columns: 1fr 300px; gap:40px; padding: 32px 28px 44px; max-width:1280px; margin:0 auto; align-items:start; }
.game-left{ display:flex; flex-direction:column; gap:32px; }
.game-news{ padding: 0 28px 56px; max-width:1280px; margin:0 auto; }
.news-list{ border-top:1px solid var(--hairline); }
.news-row{ display:flex; align-items:center; gap:16px; padding:14px 4px; border-bottom:1px solid var(--hairline); text-decoration:none; color:inherit; transition:background .15s; }
.news-row:hover{ background: var(--ink); }
.news-row:hover .news-row-title{ color: var(--accent-bright); }
.news-row .thumb-img{ width:72px; height:48px; border-radius:6px; background-size:cover; background-position:center; flex:none; }
.news-row-title{ font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--paper); flex:1; line-height:1.35; }
.news-row .pill{ flex:none; }
.game-main{ background: var(--ink); border:1px solid var(--hairline); border-radius:10px; padding:26px 28px; }
.game-main p{ font-family:var(--body); font-size:1.1rem; line-height:1.7; color: var(--paper); margin: 0 0 1.1em; max-width: 64ch; }
.game-main p:last-child{ margin-bottom:0; }
.game-main h2, .game-main h3{ font-size:1.4rem; line-height:1.25; margin: 1.6em 0 .6em; }
.game-main h2:first-child, .game-main h3:first-child{ margin-top:0; }
.spec-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); font-family:var(--body); font-size:.88rem; }
.spec-row:last-child{ border-bottom:none; }
.spec-row span:first-child{ color: var(--paper-faint); }
.spec-row span:last-child{ color: var(--paper); text-align:right; font-weight:600; }
.game-promo{ display:flex; flex-direction:column; gap:12px; text-decoration:none; }
.game-promo-cover{ display:flex; align-items:flex-end; position:relative; aspect-ratio:2/3; border-radius:14px; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); transition: transform .25s ease, box-shadow .25s ease; }
.game-promo:hover .game-promo-cover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 26px rgba(0,0,0,.5); }
.game-promo-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(13,17,23,.94) 100%); pointer-events:none; }
.game-promo-cover h5{ position:relative; z-index:2; padding:12px; margin:0; font-family:var(--display); font-weight:800; font-size:.94rem; line-height:1.25; color:#fff; }
.game-promo-cta{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--display); font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; padding:11px 16px; border-radius:8px; background:var(--accent); color:#fff; transition: background .2s ease; }
.game-promo:hover .game-promo-cta{ background: var(--accent-bright); }
/* =========================================================
8. ARCHIVES (archive-test.php / archive-game.php / home.php)
========================================================= */
.cat-head{ padding: 30px 28px 0; max-width:1280px; margin:0 auto; }
.cat-head h1{ font-size:1.85rem; margin-bottom:8px; }
.cat-head p{ font-family:var(--body); font-style:italic; color: var(--paper-dim); max-width:60ch; margin-bottom:20px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--hairline); margin-bottom:26px; }
.filter-chip{
font-family: var(--display); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.02em;
padding:8px 16px; border-radius:8px; border:1px solid var(--hairline); color: var(--paper-dim);
}
.filter-chip.is-active, .filter-chip:hover{ background: var(--accent-dim); border-color: var(--accent); color: var(--paper); }
.cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; padding: 0 28px 40px; max-width:1280px; margin:0 auto; }
.grid-head{ padding: 8px 28px 0; max-width:1280px; margin:0 auto; }
.review-feature-wrap{ padding: 8px 28px 0; max-width:1280px; margin:0 auto; }
.review-feature{ display:grid; grid-template-columns: 420px 1fr; gap:32px; padding:24px; background:var(--ink); border:1px solid var(--hairline); border-radius:12px; }
.review-feature .feature-image{ display:block; aspect-ratio:16/10; border-radius:8px; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.review-feature .feature-image .tag-float{ position:absolute; top:12px; left:12px; }
.review-feature .feature-image .score-float{ position:absolute; bottom:12px; right:12px; }
.review-feature .feature-body{ display:flex; flex-direction:column; justify-content:center; }
.review-feature h2{ font-family:var(--display); font-weight:900; font-size:1.6rem; line-height:1.2; margin:0 0 12px; }
.review-feature h2 a{ color:inherit; }
.review-feature .excerpt{ font-family:var(--body); font-size:1.02rem; line-height:1.65; color:var(--paper-dim); margin:0 0 16px; max-width:60ch; }
.review-list{ display:flex; flex-direction:column; max-width:1280px; margin:0 auto; padding:0 28px 40px; }
.review-row{ display:flex; align-items:center; gap:24px; padding:22px 0; border-bottom:1px solid var(--hairline); text-decoration:none; }
.review-row:first-child{ padding-top:4px; }
.review-row:last-child{ border-bottom:none; }
.review-thumb{ flex:none; width:220px; aspect-ratio:16/10; border-radius:8px; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.review-thumb .tag-float{ position:absolute; top:10px; left:10px; }
.review-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.review-body h3{ font-family:var(--display); font-weight:800; font-size:1.15rem; line-height:1.3; color:var(--paper); margin:0; }
.review-body .excerpt{ font-family:var(--body); font-style:italic; color:var(--paper-dim); margin:0; font-size:.92rem; line-height:1.55; max-width:62ch; }
.review-score{ flex:none; }
.news-wrap{ padding: 0 28px 40px; max-width:1280px; margin:0 auto; }
.news-feature{ display:grid; grid-template-columns: 420px 1fr; gap:32px; padding:24px; background:var(--ink); border:1px solid var(--hairline); border-radius:12px; margin-bottom:40px; }
.news-feature .feature-image{ display:block; aspect-ratio:16/10; border-radius:8px; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.news-feature .feature-image .tag-float{ position:absolute; top:12px; left:12px; }
.news-feature .feature-body{ display:flex; flex-direction:column; justify-content:center; }
.news-feature h2{ font-family:var(--display); font-weight:900; font-size:1.6rem; line-height:1.2; margin:0 0 12px; }
.news-feature h2 a{ color:inherit; }
.news-feature .excerpt{ font-family:var(--body); font-size:1.02rem; line-height:1.65; color:var(--paper-dim); margin:0 0 16px; max-width:60ch; }
.cat-card{ display:flex; flex-direction:column; gap:11px; }
.cat-image{ aspect-ratio:4/3; border-radius:8px; position:relative; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); }
.cat-image .tag-float{ position:absolute; top:10px; left:10px; }
.cat-image .score-float{ position:absolute; bottom:10px; right:10px; }
.cat-card h4{ font-size:1rem; line-height:1.35; }
.cat-card .plat-row{ margin-top:-3px; }
.cat-card h4 a{ color:inherit; }
.game-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:18px; padding: 0 28px 40px; max-width:1280px; margin:0 auto; }
.game-card{ display:flex; flex-direction:column; gap:8px; }
.game-card .game-cover{ display:flex; align-items:flex-end; position:relative; aspect-ratio:2/3; border-radius:18px; overflow:hidden; background-size:cover; background-position:center; background-color:var(--ink-raised); transition: transform .25s ease, box-shadow .25s ease; }
.game-card .game-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(13,17,23,.94) 100%); pointer-events:none; }
.game-card .game-cover .tag-float{ position:absolute; top:8px; left:8px; z-index:2; }
.game-card .game-cover h4{ position:relative; z-index:2; padding:10px; margin:0; font-family:var(--display); font-weight:800; font-size:.86rem; line-height:1.25; color:#fff; }
.game-card:hover .game-cover{ transform: translateY(-4px) scale(1.035); box-shadow: 0 14px 28px rgba(0,0,0,.5); }
.game-meta{ display:flex; flex-direction:column; gap:2px; padding:0 2px; }
.game-release{ font-family:var(--display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--paper-dim); }
.game-card .plat-row{ margin-top:2px; }
.pagination{ display:flex; justify-content:center; gap:8px; padding: 20px 0 36px; }
.pagination a, .pagination span{
min-width:36px; height:36px; padding:0 10px; border-radius:8px; display:grid; place-items:center;
font-family: var(--display); font-weight:800; font-size:.78rem; border:1px solid var(--hairline); color: var(--paper-faint);
}
.pagination .current{ background: var(--accent); color:#fff; border-color: var(--accent); }
/* =========================================================
9. À PROPOS (template-about.php)
========================================================= */
.about-hero{ padding: 34px 28px 0; max-width:1280px; margin:0 auto; }
.about-hero h1{ font-size:1.9rem; margin-bottom:14px; }
.about-hero .lede{ font-family:var(--body); font-style:italic; font-size:1.18rem; color:var(--paper-dim); max-width:68ch; line-height:1.6; margin-bottom:8px; }
.about-wrap{ display:grid; grid-template-columns:1fr 320px; gap:40px; padding:24px 28px 50px; max-width:1280px; margin:0 auto; }
.about-wrap-single{ display:block; max-width:760px; }
.about-main p{ font-family:var(--body); font-size:1.08rem; line-height:1.75; color:var(--paper); margin:0 0 1.1em; max-width:64ch; }
.about-main h2{ font-size:1.35rem; margin:1.6em 0 .6em; }
.about-main h2:first-child{ margin-top:0; }
.scale-list{ display:flex; flex-direction:column; gap:12px; }
.scale-list-main{ max-width:64ch; margin:0 0 1.4em; padding:16px 18px; background:var(--ink); border:1px solid var(--hairline); border-radius:10px; }
.scale-item{ display:flex; align-items:center; gap:12px; }
.scale-item .desc{ font-family:var(--body); font-size:.86rem; color:var(--paper-dim); line-height:1.4; }
.scale-tile{ width:44px; height:34px; border-radius:6px; display:grid; place-items:center; flex:none; font-family:var(--display); font-weight:800; font-size:.68rem; color:#fff; background:var(--accent); }
/* =========================================================
9b. SHARE (replaces Jetpack's default Like + Sharing buttons —
see functions.php — with a box matching the comments area below)
========================================================= */
.share-box-wrap{ max-width:1280px; padding: 0 28px; margin: 0 auto 28px; }
.share-box{ max-width:64ch; background:var(--ink); border:1px solid var(--hairline); border-radius:10px; padding:20px; }
.share-box h4{ font-size:1.05rem; margin-bottom:14px; }
.share-buttons{ display:flex; flex-wrap:wrap; gap:10px; }
.share-btn{
display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:.8rem;
text-transform:uppercase; letter-spacing:.02em; padding:10px 16px; border-radius:8px;
background:var(--ink-raised); border:1px solid var(--hairline); color:var(--paper-dim);
cursor:pointer; text-decoration:none;
}
.share-btn:hover{ color:var(--paper); border-color:var(--paper-dim); }
.share-btn svg{ width:16px; height:16px; fill:currentColor; }
.share-btn.is-copied{ color:var(--accent-bright); border-color:var(--accent); }
/* =========================================================
10. COMMENTAIRES
========================================================= */
.comments-area{ max-width:1280px; padding: 0 28px 50px; margin:0 auto; }
.comments-area > *{ max-width:64ch; }
.comments-title{ font-size:1.15rem; margin-bottom:18px; }
.comment-list{ margin:0 0 24px; }
.comment-list li{ list-style:none; }
.comment-list .comment-body{ background:var(--ink); border:1px solid var(--hairline); border-radius:10px; padding:16px 18px; margin-bottom:14px; }
.comment-list .comment-author{ font-family:var(--display); font-weight:700; font-size:.88rem; color:var(--paper); }
.comment-list .comment-author img{ border-radius:6px; margin-right:8px; vertical-align:middle; }
.comment-list .comment-metadata{ font-family:var(--body); font-size:.78rem; color:var(--paper-faint); margin-bottom:8px; }
.comment-list p{ font-family:var(--body); color:var(--paper); line-height:1.6; margin:0; }
.comment-list .children{ margin-left:26px; }
.comment-respond{ background:var(--ink); border:1px solid var(--hairline); border-radius:10px; padding:20px; }
.comment-reply-title{ font-size:1.05rem; margin-bottom:14px; }
.comment-form label{ display:block; font-family:var(--display); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--paper-dim); margin-bottom:6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
width:100%; background:var(--void); border:1px solid var(--hairline); border-radius:8px; color:var(--paper);
font-family:var(--body); font-size:.95rem; padding:10px 12px; margin-bottom:14px;
}
.no-comments{ font-family:var(--body); color:var(--paper-faint); font-style:italic; }
/* Custom comment markup (cor_comment_callback in inc/user-features.php)
replaces the plain .comment-author/.comment-metadata layout above. */
.comments-sort{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.comments-sort .comments-title{ margin-bottom:0; }
.comments-sort select{
background:var(--ink); border:1px solid var(--hairline); color:var(--paper-dim); padding:8px 12px;
border-radius:7px; font-family:var(--display); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.comment-list .comment-body{ padding:16px 18px; }
.comment-item{ display:flex; gap:14px; }
.comment-item.staff{ background:rgba(60,89,224,.08); margin:-16px -18px; padding:16px 18px; border-radius:10px; }
.avatar-frame{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none; background:var(--ink-raised); }
.avatar-frame img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-frame-lg{ width:88px; height:88px; border:3px solid var(--ink-raised); }
.comment-main{ min-width:0; flex:1; }
.comment-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.comment-top b{ font-family:var(--display); font-weight:700; font-size:.88rem; color:var(--paper); }
.comment-top .time{ font-size:.78rem; color:var(--paper-faint); }
.comment-top .time a{ color:inherit; }
.badge{
display:inline-flex; align-items:center; gap:5px; font-family:var(--display); font-weight:700; font-size:.66rem;
text-transform:uppercase; letter-spacing:.03em; padding:4px 9px; border-radius:20px; background:var(--ink-raised);
border:1px solid var(--hairline); color:var(--gold, #e0b23c);
}
.badge.staff-badge{ background:var(--accent); border-color:var(--accent); color:#fff; }
.comment-text{ font-family:var(--body); color:var(--paper); line-height:1.6; margin:0 0 10px; }
.comment-actions{ display:flex; align-items:center; gap:16px; }
.comment-actions a{ font-family:var(--display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; color:var(--paper-faint); }
.comment-actions a:hover{ color:var(--paper); }
.comment-list .children{ margin:14px 0 0 40px; list-style:none; padding:0; }
/* Like buttons: game pages + comments (see inc/user-features.php + cor-likes.js) */
.like-btn, .comment-like{
display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:.78rem;
text-transform:uppercase; letter-spacing:.02em; padding:10px 16px; border-radius:20px; background:var(--ink-raised);
border:1px solid var(--hairline); color:var(--paper-dim); cursor:pointer;
}
.comment-like{ padding:6px 12px; font-size:.72rem; border-radius:16px; }
.like-btn svg, .comment-like svg{ width:15px; height:15px; fill:currentColor; }
.like-btn.liked, .comment-like.liked{ background:rgba(224,60,90,.15); border-color:#e03c5a; color:#ff6d8a; }
.like-btn:disabled, .comment-like:disabled{ opacity:.6; cursor:default; }
/* =========================================================
12. ACCOUNTS — register / login / edit profile / public profile
========================================================= */
.auth-wrap{ display:flex; justify-content:center; padding:50px 28px 70px; }
.auth-card{ width:100%; max-width:420px; background:var(--ink); border:1px solid var(--hairline); border-radius:12px; padding:36px; }
.auth-card h2{ font-size:1.2rem; margin-bottom:6px; }
.auth-card .sub{ font-family:var(--body); color:var(--paper-dim); font-size:.85rem; margin:0 0 26px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--display); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--paper-faint); margin-bottom:6px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"]{
width:100%; padding:11px 14px; border-radius:7px; border:1px solid var(--hairline); background:var(--void); color:var(--paper); font-family:var(--body); font-size:.9rem;
}
.field .hint{ font-family:var(--body); font-size:.75rem; color:var(--paper-faint); margin-top:5px; }
.auth-card .btn{ width:100%; justify-content:center; margin-top:8px; }
.auth-switch{ text-align:center; font-family:var(--body); font-size:.85rem; color:var(--paper-dim); margin-top:18px; line-height:2; }
.auth-switch a{ color:var(--accent-bright); font-weight:600; }
.checkbox-row{ display:flex; align-items:flex-start; gap:8px; font-family:var(--body); font-size:.8rem; color:var(--paper-dim); margin:14px 0 4px; }
.form-errors{ background:rgba(224,60,90,.12); border:1px solid #e03c5a; border-radius:8px; padding:12px 16px; margin-bottom:18px; }
.form-errors p{ font-family:var(--body); font-size:.85rem; color:#ff8fa3; margin:0; }
.form-errors p + p{ margin-top:6px; }
.form-success{ background:rgba(60,89,224,.12); border:1px solid var(--accent); border-radius:8px; padding:12px 16px; margin-bottom:18px; font-family:var(--body); font-size:.88rem; color:var(--accent-bright); }
.profile-hero{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--hairline); margin-bottom:20px; }
.profile-name{ font-size:1.4rem; margin-bottom:4px; }
.profile-sub{ font-family:var(--body); color:var(--paper-dim); font-size:.88rem; font-style:italic; }
.profile-badges{ display:flex; gap:8px; margin-top:10px; }
.stat-row{ display:flex; gap:20px; margin-left:auto; }
.stat{ text-align:center; }
.stat b{ display:block; font-family:var(--display); font-size:1.3rem; }
.stat span{ display:block; font-size:.66rem; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.liked-game{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline); }
.liked-game:last-child{ border-bottom:none; }
.liked-game .cover{ width:40px; height:52px; border-radius:5px; flex:none; background-size:cover; background-position:center; }
.liked-game h5{ font-size:.9rem; margin:0; }
.comment-mini{ font-family:var(--body); font-size:.9rem; color:var(--paper-dim); padding:10px 0; border-bottom:1px solid var(--hairline); }
.comment-mini:last-child{ border-bottom:none; }
.comment-mini a{ color:var(--paper); font-weight:600; }
.edit-grid{ display:grid; grid-template-columns: 240px 1fr; gap:28px; }
.avatar-edit{ text-align:center; padding:24px; }
.avatar-edit .avatar-frame-lg{ margin:0 auto; }
.bio{ width:100%; min-height:90px; padding:12px 14px; border-radius:7px; border:1px solid var(--hairline); background:var(--void); color:var(--paper); font-family:var(--body); font-size:.9rem; resize:vertical; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--hairline); }
.toggle-row:last-of-type{ border-bottom:none; }
.toggle-row h5{ font-size:.88rem; margin-bottom:3px; }
.toggle-row p{ font-family:var(--body); font-size:.78rem; color:var(--paper-faint); margin:0; }
.switch-label{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.switch-checkbox{ position:absolute; opacity:0; width:0; height:0; }
.switch{ position:absolute; inset:0; border-radius:20px; background:var(--hairline); transition:background .15s; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; }
.switch-checkbox:checked + .switch{ background:var(--accent); }
.switch-checkbox:checked + .switch::after{ left:21px; }
/* =========================================================
13. RESPONSIVE (accounts)
========================================================= */
@media (max-width: 700px){
.edit-grid{ grid-template-columns:1fr; }
.profile-hero{ flex-direction:column; align-items:flex-start; }
.stat-row{ margin-left:0; }
}
/* =========================================================
11. RESPONSIVE
========================================================= */
@media (max-width: 900px){
.article-wrap, .about-wrap, .game-hero, .game-top{ grid-template-columns:1fr; }
.rails{ grid-template-columns:1fr; }
.spotlight-grid, .cat-grid{ grid-template-columns: 1fr 1fr; }
.news-feature, .review-feature{ grid-template-columns:1fr; }
.review-thumb{ width:160px; }
.game-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px){
.site-nav{ display:none; }
.site-nav.is-open{
display:flex; flex-direction:column; position:absolute; top:88px; left:0; right:0;
background: var(--ink); border-bottom:1px solid var(--hairline); padding:10px 16px; gap:2px; z-index:30;
}
.menu-toggle{ display:inline-block; margin-left:auto; }
.spotlight-grid, .cat-grid{ grid-template-columns: 1fr; }
.footer-menu li:not(:last-child)::after{ margin:0 8px; }
.hero-text h2{ font-size:1.5rem; }
.news-row .thumb-img{ width:56px; height:40px; }
.review-row{ flex-wrap:wrap; gap:14px; }
.review-thumb{ width:100%; aspect-ratio:16/9; }
.game-grid{ grid-template-columns: repeat(2,1fr); gap:12px; }
}
/* =========================================================
14. SEO — real ![]()
covers
---------------------------------------------------------
cor_cover_image() (inc/template-tags.php) prints a real ![]()
as the first child of every cover wrapper below,
instead of a CSS background-image — visible to Google Images and screen
readers, and lazy-loaded natively. This single rule makes that ![]()
fill its wrapper exactly like the old background-image did; the wrapper
itself keeps its aspect-ratio/border-radius from its own existing rule
above. Wrappers that didn't already have position:relative get it here
so the absolutely-positioned ![]()
has something to size against.
========================================================= */
.cat-image, .game-cover, .thumb-img, .rail-thumb, .review-thumb, .spot-image,
.upcoming-cover, .article-hero, .related-thumb, .game-promo-cover,
.feature-image, .hero-image, .liked-game .cover,
.cover-story-image, .feature-thumb, .deep-card-image, .deep-feature-image{
position:relative;
}
.cor-cover-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center; display:block;
}
/* =========================================================
15b. DEEP CHRONICLES (template-deep-chronicles.php)
---------------------------------------------------------
Long-form/feature hub in the spirit of GameInformer's Features page:
one big "Cover Story" banner with a subtle lift on hover, then a
scannable vertical list whose rows react on hover (tinted background,
a light zoom on the photo, the title picking up the accent color, and
an arrow that slides into view) to make it read as clickable.
========================================================= */
.deep-wrap{ max-width:880px; margin:0 auto; padding:24px 28px 50px; }
.a-kicker{ font-family:var(--display); font-weight:800; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:10px; }
.cover-story{ margin-bottom:8px; }
.cover-story-image{
aspect-ratio:21/9; border-radius:14px; overflow:hidden;
background-size:cover; background-position:center; background-color:var(--ink-raised);
background-image: linear-gradient(150deg,#141a26,#1c2740 65%,#080a0e);
display:flex; align-items:flex-end; padding:24px; margin-bottom:20px;
box-shadow:0 20px 40px rgba(0,0,0,.45); transition: transform .3s ease;
}
.cover-story:hover .cover-story-image{ transform: translateY(-2px); }
.cover-story-image .tag-float{ position:absolute; top:20px; left:20px; }
.cover-story-text h2{ font-size:2.15rem; line-height:1.15; margin-bottom:14px; }
.cover-story-text h2 a{ color:inherit; }
.cover-story-text .dek{ font-family:var(--body); font-style:italic; color:var(--paper-dim); font-size:1.12rem; line-height:1.6; margin-bottom:16px; max-width:70ch; }
.cover-story-text .meta{ margin-bottom:4px; }
.byline-avatar{ width:22px; height:22px; border-radius:50%; flex:none; }
.cover-cta{
display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700;
font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--accent-bright); margin-top:8px;
}
.cover-cta svg{ width:14px; height:14px; transition:transform .2s ease; }
.cover-story:hover .cover-cta svg{ transform:translateX(4px); }
/* All Deep Chronicles tags (Interview, Retrospective, Opinion, Deep Dive,
Preview, Exclusive Chronicle…) get the same solid, bold pill treatment as
Cover Chronicle — just a lighter shade of the same accent blue, so they
read with equal weight but are still clearly a different tag at a glance. */
.feature-tag{ background:var(--accent-bright); color:#fff; border-color:var(--accent-bright); }
/* Cover Chronicle stays the one pill in the darker, richer accent — the
"this is THE big one" label that outranks the tags above it. */
.feature-tag--cover-story{ background:var(--accent); color:#fff; border-color:var(--accent); }
.feature-list{ display:flex; flex-direction:column; margin-bottom:10px; }
.feature-row{
display:flex; gap:22px; padding:24px 14px; margin:0 -14px; border-bottom:1px solid var(--hairline);
align-items:flex-start; border-radius:10px; transition:background .2s ease; position:relative;
}
.feature-row:last-child{ border-bottom:none; }
.feature-row:hover{ background:var(--ink); }
.feature-thumb{
flex:none; width:200px; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
background-size:cover; background-position:center; background-color:var(--ink-raised);
background-image: linear-gradient(150deg,#141a26,#1e2531 65%,#080a0e);
transition: transform .3s ease;
}
.feature-row:hover .feature-thumb{ transform: scale(1.03); }
.feature-body{ flex:1; min-width:0; }
.feature-body h3{ font-family:var(--display); font-weight:800; font-size:1.22rem; line-height:1.3; margin:10px 0 8px; color:var(--paper); transition:color .2s ease; }
.feature-body h3 a{ color:inherit; }
.feature-row:hover .feature-body h3{ color:var(--accent-bright); }
.feature-body .excerpt{ font-family:var(--body); font-size:.96rem; line-height:1.6; color:var(--paper-dim); margin:0 0 10px; max-width:60ch; }
.feature-arrow{
position:absolute; right:14px; top:50%; width:22px; height:22px; color:var(--accent-bright);
transform:translateY(-50%) translateX(-6px); opacity:0; transition: all .2s ease; pointer-events:none;
}
.feature-row:hover .feature-arrow{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:640px){
.feature-row{ flex-direction:column; gap:14px; padding:20px 0; margin:0; }
.feature-thumb{ width:100%; aspect-ratio:16/9; }
.feature-arrow{ display:none; }
.cover-story-text h2{ font-size:1.6rem; }
}
/* =========================================================
15. COOKIE NOTICE
========================================================= */
.cookie-notice{
position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
max-width:520px; margin:0 auto;
display:flex; flex-wrap:wrap; align-items:center; gap:14px;
background:var(--ink); border:1px solid var(--hairline); border-radius:10px;
padding:14px 16px; box-shadow:0 14px 30px rgba(0,0,0,.45);
}
/* Same specificity as the browser's own [hidden]{display:none} rule, but
loaded later, so without this the banner never actually hides once its
`hidden` attribute is set (dismiss button, or repeat visits). */
.cookie-notice[hidden]{ display:none; }
.cookie-notice p{
flex:1 1 240px; margin:0; font-family:var(--body); font-size:.86rem; line-height:1.45; color:var(--paper-dim);
}
.cookie-notice .btn{ flex:none; }
@media (max-width:480px){
.cookie-notice{ flex-direction:column; align-items:stretch; text-align:center; }
}