/* 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; } .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; } .upcoming-wrap{ margin-bottom:36px; } .upcoming-rail{ display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; } .upcoming-card{ flex:none; width:200px; display:flex; flex-direction:column; gap:9px; } .upcoming-cover{ aspect-ratio:3/4; border-radius:10px; background-size:cover; background-position:center; background-color:var(--ink-raised); } .upcoming-card h5{ font-family:var(--display); font-weight:700; font-size:.9rem; line-height:1.3; color:var(--paper); } .plat-row{ display:flex; flex-wrap:wrap; gap:5px; } .upcoming-date{ font-family:var(--body); font-size:.8rem; font-style:italic; color:var(--paper-faint); } .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; 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 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; } .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-plats{ font-family:var(--body); font-size:.78rem; font-style:italic; color:var(--paper-faint); } .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-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; } .avatar{ width:52px; height:52px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:1.05rem; flex:none; overflow:hidden; } .avatar img{ width:100%; height:100%; object-fit:cover; } .author-row{ display:flex; gap:14px; align-items:center; margin-bottom:14px; } .author-row h5{ font-family:var(--display); font-weight:800; font-size:.95rem; color:var(--paper); margin-bottom:3px; } .author-row span{ font-family:var(--body); font-style:italic; font-size:.85rem; color:var(--paper-faint); } .scale-list{ display:flex; flex-direction:column; gap:12px; } .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; } /* ========================================================= 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; } }