/*
Theme Name: Gamecast Child
Theme URI: https://gamecast.it
Template: gamecast-tema
Author: Massimo
Author URI: https://gamecast.it
Description: Tema figlio di Gamecast — per personalizzazioni senza toccare il tema padre.
Version: 1.1.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gamecast-tema-child
*/
/* ══════════════════════════════════════════════════════════════
POST NAVIGATION — quando c'e' solo prev o solo next, full-width
══════════════════════════════════════════════════════════════ */
.post-navigation--solo {
grid-template-columns: 1fr !important;
}
.post-navigation--solo .post-navigation__card {
max-width: 100%;
}
.post-navigation--solo .post-navigation__card--prev {
justify-content: flex-start;
}
.post-navigation--solo .post-navigation__card--next {
justify-content: flex-end;
}
/* ══════════════════════════════════════════════════════════════
POST FAQ — blocco editoriale fine articolo (plugin gc-editor-panel)
══════════════════════════════════════════════════════════════ */
.gc-post-faq {
max-width: 760px;
margin: 48px auto 32px;
padding: 32px 36px;
border-radius: 14px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .06);
}
.gc-post-faq__header {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.gc-post-faq__kicker {
display: inline-block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .15em;
color: #e8943a;
margin-bottom: 8px;
}
.gc-post-faq__title {
font-size: 26px;
font-weight: 800;
color: var(--color-heading, #f1f5f9);
margin: 0;
letter-spacing: -.01em;
}
.gc-post-faq__list { display: flex; flex-direction: column; gap: 4px; }
.gc-post-faq__item {
border-radius: 10px;
padding: 16px 18px;
background: rgba(255, 255, 255, .02);
border: 1px solid rgba(255, 255, 255, .04);
transition: background .2s, border-color .2s;
}
.gc-post-faq__item:hover {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .08);
}
.gc-post-faq__item[open] {
background: rgba(232, 148, 58, .06);
border-color: rgba(232, 148, 58, .25);
}
.gc-post-faq__q {
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: var(--color-heading, #f1f5f9);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
line-height: 1.4;
}
.gc-post-faq__q::-webkit-details-marker { display: none; }
.gc-post-faq__q::after {
content: '+';
font-size: 22px;
font-weight: 300;
color: #e8943a;
line-height: 1;
flex-shrink: 0;
transition: transform .25s ease;
}
.gc-post-faq__item[open] .gc-post-faq__q::after {
content: '−';
transform: rotate(180deg);
}
.gc-post-faq__a {
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .06);
font-size: 15px;
color: rgba(255, 255, 255, .78);
line-height: 1.65;
}
.gc-post-faq__a p { margin: 0 0 10px; }
.gc-post-faq__a p:last-child { margin-bottom: 0; }
.gc-post-faq__a a { color: #e8943a; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Light mode FAQ */
[data-theme="light"] .gc-post-faq {
background: #ffffff;
border-color: var(--border, #e2e8f0);
box-shadow: var(--shadow-sm);
}
[data-theme="light"] .gc-post-faq__header { border-bottom-color: var(--border, #e2e8f0); }
[data-theme="light"] .gc-post-faq__title { color: #0f172a; }
[data-theme="light"] .gc-post-faq__item {
background: #f7f8fa;
border-color: var(--border-subtle, #eef0f4);
}
[data-theme="light"] .gc-post-faq__item:hover {
background: #eef0f4;
border-color: var(--border, #e2e8f0);
}
[data-theme="light"] .gc-post-faq__item[open] {
background: rgba(239,158,64, .06);
border-color: rgba(239,158,64, .22);
}
[data-theme="light"] .gc-post-faq__q { color: #0f172a; }
[data-theme="light"] .gc-post-faq__q::after { color: #ef9e40; }
[data-theme="light"] .gc-post-faq__a { color: #334155; border-top-color: var(--border, #e2e8f0); }
[data-theme="light"] .gc-post-faq__a a { color: #ef9e40; }
/* Responsive FAQ */
@media (max-width: 640px) {
.gc-post-faq { padding: 22px 20px; margin: 32px auto 24px; border-radius: 12px; }
.gc-post-faq__title { font-size: 22px; }
.gc-post-faq__q { font-size: 15px; }
.gc-post-faq__a { font-size: 14px; }
}
/* ╔══════════════════════════════════════════════════════════════╗
║ LIGHT MODE PALETTE v2 — Premium, editoriale, coerente ║
║ Override delle variabili parent con gerarchia di superfici ║
║ reale, shadow eleganti, toni caldi controllati, accenti ║
║ brand raffinati. NON bianco ospedale. ║
╚══════════════════════════════════════════════════════════════╝ */
[data-theme="light"] {
/* ── SURFACES v3 — gerarchia 3 livelli reale, toni caldi ─── */
--bg-primary: #f3f5f8; /* Base: caldo editoriale (NON bianco) */
--bg-secondary: #eef1f5; /* Surface 1: sezioni, footer, dividers */
--bg-card: #ffffff; /* Surface 2: card elevate (contrasto reale) */
--bg-elevated: #ffffff; /* Dropdown, modal, overlay */
--bg-1: #ffffff;
--bg-body: #f3f5f8;
/* ── TEXT (sistema preciso, niente grigi random) ─────────── */
--text-primary: #0f1720; /* Quasi nero: titoli, massima leggibilita' */
--text-secondary: #4b5563; /* Gray-600: corpo, deck */
--text-muted: #94a3b8; /* Slate-400: meta, byline, placeholder */
--text-h: #0f1720;
--text-meta: #94a3b8;
--color-heading: #0f1720;
--color-muted: #94a3b8;
/* ── BORDERS (3 livelli controllati) ─────────────────────── */
--border: rgba(15, 23, 32, 0.08); /* Standard card/input */
--border-subtle: rgba(15, 23, 32, 0.05); /* Section divider */
--border-strong: rgba(15, 23, 32, 0.12); /* Focus/hover */
/* ── BRAND (meno aggressivi su bianco, piu' leggibili) ──── */
--color-orange: #ef9e40; /* Era #ef9e40, troppo saturo */
--color-blue: #0891b2; /* Blu editoriale coerente */
--color-link: #ef9e40; /* Link usa orange brand */
/* ── SEZIONI (mantenute dal parent, gia' bilanciate) ────── */
--color-news: #c0392b;
--color-guide: #0891b2;
--color-retro: #7c3aed;
--color-review: #16a34a;
/* ── HEADER GLASS (piu' opaco per separazione) ──────────── */
--header-bg: rgba(247, 248, 250, 0.92);
--header-glass: rgba(255, 255, 255, 0.82);
/* ── SHADOWS (piu' leggere e multi-livello) ──────────────── */
--hp-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.04);
--hp-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.06);
--hp-shadow-main: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 2px rgba(15, 23, 32, 0.04);
--shadow-md: 0 4px 14px rgba(15, 23, 32, 0.05);
--shadow-lg: 0 8px 24px rgba(15, 23, 32, 0.06);
--shadow-xl: 0 24px 60px rgba(15, 23, 32, 0.12), 0 8px 16px rgba(15, 23, 32, 0.05);
}
/* Body coerente */
[data-theme="light"] body {
background: var(--bg-primary);
color: var(--text-primary);
}
/* Sezioni: niente border-top grigio (era invasivo, sostituito dai divider oro nei header) */
[data-theme="light"] .gc-section,
[data-theme="light"] .site-main > section {
border-top: none;
}
/* ── Override componenti child che usavano hardcoded bianchi/grigi ── */
[data-theme="light"] .gc-guide-hub .gc-guide-card,
[data-theme="light"] .gc-guide-hub .gc-today-card,
[data-theme="light"] .gc-guide-hub .gc-hof-card,
[data-theme="light"] .gc-gb-hub .gc-year-card,
[data-theme="light"] .gc-gb-hub .gc-today-card,
[data-theme="light"] .gc-gb-hub .gc-anniv-card,
[data-theme="light"] .gc-segnala-form,
[data-theme="light"] .gc-segnala-faq__item {
background: var(--bg-card);
border-color: var(--border);
box-shadow: var(--shadow-sm);
transition: box-shadow .2s, border-color .2s, transform .2s;
}
[data-theme="light"] .gc-guide-hub .gc-guide-card:hover,
[data-theme="light"] .gc-guide-hub .gc-today-card:hover,
[data-theme="light"] .gc-guide-hub .gc-hof-card:hover,
[data-theme="light"] .gc-gb-hub .gc-year-card:hover,
[data-theme="light"] .gc-gb-hub .gc-today-card:hover,
[data-theme="light"] .gc-gb-hub .gc-anniv-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
/* Dropdown + modal: shadow forti per profondita' */
[data-theme="light"] .gc-nav-rv-dropdown,
[data-theme="light"] .gc-guide-modal__box,
[data-theme="light"] .gc-tip-modal__box,
[data-theme="light"] .gc-gf-sheet__panel {
background: var(--bg-elevated);
border-color: var(--border);
box-shadow: var(--shadow-xl);
}
/* Sticky filter bar: glass piu' pulito */
[data-theme="light"] .gc-gf {
background: rgba(247, 248, 250, 0.88);
border-color: var(--border);
box-shadow: var(--shadow-sm);
}
/* Time Machine GameBack: superficie piu' elegante */
[data-theme="light"] .gc-tm {
background: var(--bg-card);
border-color: var(--border);
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .gc-tm__panel {
background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
border-right-color: var(--border-subtle);
}
/* Progress bars: colori saturi ma non sparati */
[data-theme="light"] .gc-guide-card__pfill--full { background: #16a34a; box-shadow: 0 0 8px rgba(22,163,74,.2); }
[data-theme="light"] .gc-guide-card__pfill--mid { background: #ef9e40; box-shadow: 0 0 8px rgba(239,158,64,.18); }
[data-theme="light"] .gc-guide-card__pfill--low { background: #dc2626; box-shadow: 0 0 8px rgba(220,38,38,.18); }
/* Hero sezioni: maggior contrasto titoli */
[data-theme="light"] .gc-guide-hero,
[data-theme="light"] .gc-segnala-hero,
[data-theme="light"] .gc-year-hero,
[data-theme="light"] .gc-hof-section {
border-bottom-color: var(--border);
}
/* Stats numeri: piu' peso */
[data-theme="light"] .gc-guide-hero__stat-num,
[data-theme="light"] .gc-gb-stats__num,
[data-theme="light"] .gc-tm__display-year {
color: var(--text-primary);
}
/* Sectios header/title: massima leggibilita' */
[data-theme="light"] .gc-guide-section__title,
[data-theme="light"] .gc-cat-section__title,
[data-theme="light"] .gc-anniv-header__title,
[data-theme="light"] .gc-today-header__title,
[data-theme="light"] .gc-year-section__title,
[data-theme="light"] .gc-hof-header__title {
color: var(--text-primary);
}
/* Card covers: sfondo neutro per fallback */
[data-theme="light"] .gc-guide-card__cover,
[data-theme="light"] .gc-year-card__cover,
[data-theme="light"] .gc-today-card__cover,
[data-theme="light"] .gc-hof-card__cover,
[data-theme="light"] .gc-guide-feat__cover {
background: var(--bg-secondary);
}
/* Input search/filter: sfondo bianco, border visibile */
[data-theme="light"] .gc-gf__input,
[data-theme="light"] .gc-segnala-field__input,
[data-theme="light"] .gc-segnala-field__textarea,
[data-theme="light"] .gc-tip-modal__input,
[data-theme="light"] .gc-tip-modal__source,
[data-theme="light"] .gc-tip-modal__name,
[data-theme="light"] .gc-tip-modal__email {
background: #ffffff;
border-color: var(--border);
color: var(--text-primary);
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
[data-theme="light"] .gc-gf__input:focus,
[data-theme="light"] .gc-segnala-field__input:focus,
[data-theme="light"] .gc-segnala-field__textarea:focus,
[data-theme="light"] .gc-tip-modal__input:focus {
border-color: #0891b2;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1), inset 0 1px 2px rgba(15, 23, 42, 0.02);
background: #ffffff;
}
[data-theme="light"] .gc-gf__input::placeholder,
[data-theme="light"] .gc-segnala-field__input::placeholder,
[data-theme="light"] .gc-segnala-field__textarea::placeholder {
color: #94a3b8;
}
/* Chip filtri: stati piu' puliti */
[data-theme="light"] .gc-gf__chip {
background: #ffffff;
border-color: var(--border);
color: var(--text-secondary);
box-shadow: var(--shadow-sm);
}
[data-theme="light"] .gc-gf__chip:hover {
background: #ffffff;
border-color: var(--border-strong);
color: #0891b2;
box-shadow: var(--shadow-md);
}
/* Badge stato: colori piu' saturi ma leggibili */
[data-theme="light"] .gc-guide-badge--complete {
background: rgba(22, 163, 74, .1);
color: #15803d;
box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.2);
}
[data-theme="light"] .gc-guide-badge--wip {
background: rgba(239,158,64, .1);
color: #c97e1c;
box-shadow: inset 0 0 0 1px rgba(239,158,64, 0.2);
}
/* Section dividers (border-top) */
[data-theme="light"] .gc-today-section,
[data-theme="light"] .gc-pillars-gb,
[data-theme="light"] .gc-spot-section,
[data-theme="light"] .gc-hof-section,
[data-theme="light"] .gc-guide-recent-section {
border-top-color: var(--border);
}
/* ============================================================
PRE-FOOTER
============================================================ */
.gc-prefooter {
background: #0c1322;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 48px 24px 40px;
}
.gc-prefooter__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.gc-prefooter__heading {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 16px;
}
/* ── Giochi del momento ── */
.gc-prefooter__games {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.gc-prefooter__game {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
padding: 14px 8px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.gc-prefooter__game:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(0, 173, 226, 0.2);
transform: translateY(-2px);
}
/* Imagify wrappa ![]()
in — gestiamo entrambi */
.gc-prefooter__game-img,
picture.gc-prefooter__game-img {
display: block;
width: 56px;
height: 72px;
border-radius: 6px;
margin-bottom: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
flex-shrink: 0;
overflow: hidden;
}
.gc-prefooter__game-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gc-prefooter__game-placeholder {
font-size: 32px;
line-height: 72px;
margin-bottom: 8px;
}
.gc-prefooter__game-name {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-prefooter__game-count {
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
margin-top: 2px;
}
/* ── Scopri Gamecast ── */
.gc-prefooter__articles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.gc-prefooter__article {
display: flex;
flex-direction: column;
text-decoration: none;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.gc-prefooter__article:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(0, 173, 226, 0.2);
transform: translateY(-2px);
}
.gc-prefooter__article-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
}
/* Imagify: picture + img dentro il contenitore */
.gc-prefooter__article-img picture,
.gc-prefooter__article-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gc-prefooter__article-img picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gc-prefooter__article-title {
padding: 10px 12px 12px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
FOOTER PRINCIPALE
============================================================ */
.gc-footer {
background: #0F172A;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 0;
width: 100%;
box-sizing: border-box;
}
.gc-footer__main {
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px 48px;
}
.gc-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
}
/* ── Colonna Brand ── */
.gc-footer__col--brand {
display: flex;
flex-direction: column;
gap: 16px;
}
.gc-footer__logo {
display: inline-block;
}
.gc-footer__logo-img {
height: 48px;
width: auto;
display: block;
}
.gc-footer__desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.7;
margin: 0;
max-width: 280px;
}
/* Social */
.gc-footer__social {
display: flex;
gap: 10px;
margin-top: 4px;
}
.gc-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gc-footer__social-link:hover {
background: rgba(0, 173, 226, 0.12);
border-color: rgba(0, 173, 226, 0.3);
color: #00ade2;
}
/* ── Colonne link ── */
.gc-footer__col-title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 16px;
}
.gc-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.gc-footer__links a {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color 0.15s;
line-height: 1.4;
}
.gc-footer__links a:hover {
color: #00ade2;
}
.gc-footer__email {
font-weight: 600;
color: rgba(255, 255, 255, 0.7) !important;
}
/* ============================================================
FOOTER BOTTOM (Legale)
============================================================ */
.gc-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.15);
}
.gc-footer__bottom-inner {
max-width: 1200px;
margin: 0 auto;
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.gc-footer__copy {
font-size: 12px;
color: rgba(255, 255, 255, 0.35);
margin: 0;
line-height: 1.6;
}
.gc-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 4px;
}
.gc-footer__legal a {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: color 0.15s;
}
.gc-footer__legal a:hover {
color: #00ade2;
}
.gc-footer__dot {
font-size: 10px;
color: rgba(255, 255, 255, 0.2);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.gc-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.gc-prefooter__games {
grid-template-columns: repeat(3, 1fr);
}
.gc-prefooter__articles {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.gc-prefooter {
padding: 36px 16px 32px;
}
.gc-prefooter__games {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.gc-prefooter__game-img,
picture.gc-prefooter__game-img {
width: 44px;
height: 58px;
}
.gc-prefooter__articles {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gc-footer__main {
padding: 40px 16px 32px;
}
.gc-footer__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.gc-footer__col--brand {
align-items: center;
text-align: center;
}
.gc-footer__desc {
max-width: 100%;
}
.gc-footer__social {
justify-content: center;
}
.gc-footer__bottom-inner {
padding: 16px;
}
}
@media (max-width: 480px) {
.gc-prefooter__games {
grid-template-columns: repeat(2, 1fr);
}
.gc-prefooter__articles {
grid-template-columns: 1fr;
}
}
/* ============================================================
HEADER SEARCH — z-index fix
Il parent imposta z-index:10, troppo basso quando l'header
ha backdrop-filter (nuovo stacking context). Alziamo a 200.
============================================================ */
.header-search-bar {
z-index: 200 !important;
}
/* ============================================================
LIGHT MODE — sticky nav fix
Specificità (0,3,0) > (0,2,0) del parent — override necessario
============================================================ */
[data-theme="light"] .single .gc-sticky-nav {
background: #ffffff !important;
border-top: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
/* ============================================================
LIGHT MODE — footer + prefooter
============================================================ */
[data-theme="light"] .gc-prefooter {
background: #f0f2f5;
border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-prefooter__heading {
color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .gc-prefooter__game {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-prefooter__game:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 173, 226, 0.25);
}
[data-theme="light"] .gc-prefooter__game-name {
color: #222;
}
[data-theme="light"] .gc-prefooter__game-count {
color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .gc-prefooter__article {
background: #fff;
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-prefooter__article:hover {
background: #fff;
border-color: rgba(0, 173, 226, 0.25);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-prefooter__article-title {
color: #222;
}
[data-theme="light"] .gc-footer {
background: #e8eaef;
border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-footer__desc {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .gc-footer__col-title {
color: #111;
}
[data-theme="light"] .gc-footer__links a {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .gc-footer__links a:hover {
color: #00ade2;
}
[data-theme="light"] .gc-footer__social-link {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .gc-footer__social-link:hover {
background: rgba(0, 173, 226, 0.1);
border-color: rgba(0, 173, 226, 0.3);
color: #00ade2;
}
[data-theme="light"] .gc-footer__bottom {
border-top-color: rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .gc-footer__copy {
color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .gc-footer__legal a {
color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .gc-footer__legal a:hover {
color: #00ade2;
}
[data-theme="light"] .gc-footer__dot {
color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .gc-footer__email {
color: rgba(0, 0, 0, 0.6) !important;
}
[data-theme="light"] .gc-prefooter__game-img,
[data-theme="light"] picture.gc-prefooter__game-img {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
/* ============================================================
PAGINA 404
============================================================ */
.gc-404 {
min-height: 100vh;
background: #0c1322;
}
/* ── Hero ── */
.gc-404__hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 75vh;
padding: 80px 24px 60px;
text-align: center;
}
.gc-404__inner {
max-width: 600px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* Glitch 404 */
.gc-404__glitch {
font-size: clamp(96px, 18vw, 160px);
font-weight: 900;
line-height: 1;
color: #00ade2;
letter-spacing: -0.04em;
position: relative;
text-shadow:
0 0 40px rgba(0, 173, 226, 0.4),
0 0 80px rgba(0, 173, 226, 0.15);
animation: gc404-blink 2.5s linear infinite;
}
@keyframes gc404-blink {
0%, 16%, 18%, 50%, 52%, 100% {
opacity: 1;
text-shadow: 0 0 40px rgba(0, 173, 226, 0.4), 0 0 80px rgba(0, 173, 226, 0.15);
}
17%, 51% {
opacity: 0;
text-shadow: none;
}
}
.gc-404__title {
font-size: clamp(22px, 4vw, 30px);
font-weight: 800;
color: rgba(255, 255, 255, 0.92);
margin: 0;
line-height: 1.2;
}
.gc-404__desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.7;
margin: 0;
}
/* Search */
.gc-404__search {
width: 100%;
max-width: 460px;
margin: 0 auto;
}
.gc-404__search .search-form {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
}
.gc-404__search .search-field {
flex: 1;
padding: 12px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 14px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.gc-404__search .search-field:focus {
border-color: rgba(0, 173, 226, 0.5);
background: rgba(255, 255, 255, 0.08);
}
.gc-404__search .search-field::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.gc-404__search .search-submit {
padding: 12px 20px;
border-radius: 10px;
background: #00ade2;
border: none;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
white-space: nowrap;
}
.gc-404__search .search-submit:hover {
background: #0099cc;
transform: translateY(-1px);
}
/* Back button */
.gc-404__home-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.gc-404__home-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 173, 226, 0.3);
color: #00ade2;
}
/* ── Giochi suggeriti ── */
.gc-404__games {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 40px 24px 60px;
}
.gc-404__games-inner {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.gc-404__games-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.35);
margin: 0;
}
.gc-404__games-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
}
.gc-404__game-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
border-radius: 12px;
padding: 14px 8px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
gap: 6px;
}
.gc-404__game-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(0, 173, 226, 0.2);
transform: translateY(-2px);
}
.gc-404__game-cover {
width: 56px;
height: 72px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
flex-shrink: 0;
}
.gc-404__game-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gc-404__game-name {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-404__game-count {
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
}
/* ── Responsive ── */
@media (max-width: 480px) {
.gc-404__games-grid {
grid-template-columns: repeat(2, 1fr);
}
.gc-404__search .search-form {
flex-direction: column;
}
}
/* ── Light mode ── */
[data-theme="light"] .gc-404 {
background: #f0f2f5;
}
[data-theme="light"] .gc-404__title {
color: #111;
}
[data-theme="light"] .gc-404__desc {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .gc-404__search .search-field {
background: #fff;
border-color: rgba(0, 0, 0, 0.12);
color: #111;
}
[data-theme="light"] .gc-404__search .search-field:focus {
border-color: rgba(0, 173, 226, 0.5);
background: #fff;
}
[data-theme="light"] .gc-404__search .search-field::placeholder {
color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .gc-404__home-btn {
border-color: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .gc-404__home-btn:hover {
background: rgba(0, 0, 0, 0.05);
color: #00ade2;
}
[data-theme="light"] .gc-404__games {
border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-404__game-card {
background: #fff;
border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-404__game-card:hover {
background: #fff;
border-color: rgba(0, 173, 226, 0.25);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gc-404__game-name {
color: #222;
}
[data-theme="light"] .gc-404__game-count {
color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .gc-404__games-label {
color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .gc-404__games {
border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .gc-404__glitch {
text-shadow:
0 0 30px rgba(0, 173, 226, 0.25),
0 0 60px rgba(0, 173, 226, 0.1);
}
/* =====================================================
Tabelle WordPress — stile globale
===================================================== */
/* ── Dark mode (default) ── */
.wp-block-table {
margin: 28px 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid #2a2a42;
font-family: Inter, system-ui, sans-serif;
background: #1a1a2e;
}
.wp-block-table figure { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.wp-block-table table { width: 100%; border-collapse: collapse !important; border-spacing: 0 !important; border: 0 !important; background: transparent !important; }
/* RESET totale: rimuove TUTTI i bordi default (WP, Foxiz, Gutenberg block defaults) */
.wp-block-table table,
.wp-block-table thead,
.wp-block-table tbody,
.wp-block-table tr,
.wp-block-table th,
.wp-block-table td { border: 0 !important; box-shadow: none !important; outline: 0 !important; background-clip: padding-box !important; }
.wp-block-table thead tr { background: #22223a !important; }
.wp-block-table thead th {
padding: 14px 18px !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #ffffff !important;
text-align: left !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.wp-block-table thead th:first-child { width: 38% !important; }
.wp-block-table tbody tr { transition: background .15s !important; }
/* Separatore SOLO tra righe del corpo (non sotto l'header, non in cima) */
.wp-block-table tbody tr + tr td { border-top: 1px solid #2a2a42 !important; }
.wp-block-table tbody td {
padding: 13px 18px !important;
font-size: 14px !important;
line-height: 1.5 !important;
vertical-align: top !important;
color: rgba(230, 230, 255, .88) !important;
background: transparent !important;
}
.wp-block-table tbody td:first-child { font-weight: 700 !important; color: #4fc3f7 !important; white-space: nowrap !important; }
/* Hover azzurrino — vince sui temi parent */
.wp-block-table tbody tr:hover td,
.wp-block-table tbody tr:hover { background: rgba(79, 195, 247, .12) !important; }
/* ── Light mode ── */
[data-theme="light"] .wp-block-table { background: #ffffff !important; border-color: #e5e7eb !important; }
[data-theme="light"] .wp-block-table thead tr { background: #f0f7ff !important; }
[data-theme="light"] .wp-block-table thead th { color: #1f2937 !important; }
[data-theme="light"] .wp-block-table tbody tr + tr td { border-top-color: #e5e7eb !important; }
[data-theme="light"] .wp-block-table tbody td { color: #1f2937 !important; background: transparent !important; }
[data-theme="light"] .wp-block-table tbody td:first-child { color: #1f2937 !important; font-weight: 700 !important; }
[data-theme="light"] .wp-block-table tbody tr:nth-child(even) td { background: #fafafa !important; }
[data-theme="light"] .wp-block-table tbody tr:hover td,
[data-theme="light"] .wp-block-table tbody tr:hover { background: rgb(226 152 56 / 10%) !important; }
/* ── Separatore titolo sopra la tabella (h2 nell'articolo) ── */
.entry-content h2,
.single-content h2,
.post-content h2 {
border-bottom: 2px solid #4fc3f7;
padding-bottom: 10px;
margin-bottom: 24px;
}
[data-theme="light"] .entry-content h2,
[data-theme="light"] .single-content h2,
[data-theme="light"] .post-content h2 {
border-bottom-color: #c87d2a;
}
/* =====================================================
Search dropdown risultati
===================================================== */
.gc-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #131320; border: 1px solid rgba(0, 173, 226, .2); border-radius: 10px; overflow: hidden; max-height: 380px; overflow-y: auto; z-index: 9999; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
.gc-search-dropdown__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(255, 255, 255, .07); transition: background .15s; }
.gc-search-dropdown__item:last-child { border-bottom: none; }
.gc-search-dropdown__item:hover { background: rgba(0, 173, 226, .1); }
.gc-search-dropdown__img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: block; }
.gc-search-dropdown__img--empty { display: block; width: 40px; height: 40px; border-radius: 6px; background: rgba(255, 255, 255, .1); flex-shrink: 0; }
.gc-search-dropdown__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gc-search-dropdown__name { font-size: 14px; font-weight: 600; color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-search-dropdown__count { font-size: 11px; color: #00ade2; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* ============================================================
GIOCHI DEL MOMENTO — sezione homepage premium
============================================================ */
.gc-trending-games {
background: linear-gradient(180deg, #0d0d0d 0%, #111 100%);
padding: 50px 0;
}
.gc-trending-games .gc-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ── Header sezione ── */
.gc-trending-games .gc-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-bottom: 28px;
}
.gc-trending-games .gc-section-head > div {
flex: 1;
}
.gc-trending-games .gc-section-head h2 {
font-size: 26px;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.2;
}
.gc-trending-games .gc-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
margin: 5px 0 0;
letter-spacing: 0.01em;
}
.gc-trending-games .gc-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #ef9e40;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
padding-bottom: 2px;
border-bottom: 1px solid rgba(239, 158, 64, 0.35);
transition: color 0.2s, border-color 0.2s;
margin-bottom: 2px;
}
.gc-trending-games .gc-link:hover {
color: #ffa940;
border-color: rgba(239, 158, 64, 0.65);
}
/* ── Grid ── */
.gc-trending-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
/* ── Card
Usa div, non article, per evitare override background dal tema Foxiz.
background: transparent forza la trasparenza anche in hover.
── */
.gc-game-card {
display: flex;
flex-direction: column;
background: transparent !important;
}
/* ── Thumb — aspect-ratio 3:4 = proporzioni cover IGDB ── */
.gc-game-thumb {
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
background: #1c1c1c;
text-decoration: none;
aspect-ratio: 3 / 4;
transition: box-shadow 0.3s ease;
}
.gc-game-card { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
/* Hover sconfigge eventuali bg/ombre globali ereditate dal gc-homepage-style.php */
html body.home .gc-game-card:hover {
transform: translateY(-3px) !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.gc-game-card:hover .gc-game-thumb {
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .gc-game-card:hover .gc-game-thumb {
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.gc-game-card .gc-game-meta {
background: transparent !important;
}
.gc-game-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hover image scale rimosso: era troppo invasivo e produceva effetto "scatto". */
/* ── Placeholder ── */
.gc-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e1e1e, #272727);
display: flex;
align-items: center;
justify-content: center;
color: #484848;
}
/* ── Overlay — transizione on hover ── */
.gc-game-thumb .gc-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.28) 45%,
rgba(0, 0, 0, 0.04) 100%
);
transition: background 0.35s ease;
pointer-events: none;
}
/* Overlay darkening su hover rimosso per evitare immagine "spenta" */
/* ── Score badge — gradiente + ombra ── */
.gc-score-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #f5a623, #ef9e40);
box-shadow: 0 2px 10px rgba(239, 158, 64, 0.55);
color: #000;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.02em;
padding: 4px 10px;
border-radius: 8px;
line-height: 1.4;
z-index: 2;
}
/* ── CTA — testo senza box, solo slide-up in hover ── */
.gc-hover-cta {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
text-align: center;
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
opacity: 0;
transform: translateY(5px);
transition: opacity 0.28s ease, transform 0.28s ease;
z-index: 2;
pointer-events: none;
}
.gc-game-card:hover .gc-hover-cta {
opacity: 1;
transform: translateY(0);
}
/* ── Meta — altezze fisse per griglia uniforme ── */
.gc-game-meta {
margin-top: 10px;
background: transparent !important;
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.gc-game-meta h3 {
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.4;
margin: 0 0 5px;
/* clamp fisso a 2 righe: 14px × 1.4 × 2 = 39.2px */
min-height: 40px;
max-height: 40px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gc-genre {
font-size: 11px;
color: rgba(255, 255, 255, 0.38);
display: block;
letter-spacing: 0.02em;
}
/* ═══════════════════════════════════════════════════════════════
GIOCHI DEL MOMENTO v2 — Hub-driven con spoke + micro-reason
═══════════════════════════════════════════════════════════════ */
.gc-game-card { display: flex; flex-direction: column; }
.gc-game-meta { gap: 6px; }
.gc-game-meta .gc-game-card__name {
font-size: 14.5px;
font-weight: 700;
color: var(--gc-text, #fff);
line-height: 1.25;
margin: 0;
min-height: 0;
max-height: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-game-card__name a { color: inherit; text-decoration: none; }
.gc-game-card__name a:hover { color: #d4b45a; }
html[data-theme="light"] body.home .gc-game-card__name,
html[data-theme="light"] body.home .gc-game-card__name a { color: #0f172a !important; }
html[data-theme="light"] body.home .gc-game-card__name a:hover { color: #c3860f !important; }
/* Micro-reason: badge minuscolo sopra le chip spoke (es. "Hub aggiornato oggi") */
.gc-game-card__reason {
display: inline-block;
align-self: flex-start;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: rgba(212,180,90,.10);
color: #d4b45a;
border: 1px solid rgba(212,180,90,.28);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-game-card__reason--hub-aggiornato-oggi { background: rgba(34,197,94,.10); color: #4ade80; border-color: rgba(34,197,94,.30); }
.gc-game-card__reason--uscita-vicina { background: rgba(212,180,90,.14); color: #f0d27a; border-color: rgba(212,180,90,.36); }
.gc-game-card__reason--nuove-guide { background: rgba(0,173,226,.10); color: #7dd3fc; border-color: rgba(0,173,226,.28); }
.gc-game-card__reason--recensione-online { background: rgba(157,92,224,.10); color: #c4b5fd; border-color: rgba(157,92,224,.28); }
.gc-game-card__reason--copertura-attiva { background: rgba(255,255,255,.05); color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.12); }
.gc-game-card__reason--molto-letto { background: rgba(239,68,68,.10); color: #fca5a5; border-color: rgba(239,68,68,.28); }
[data-theme="light"] .gc-game-card__reason--hub-aggiornato-oggi { color: #15803d; border-color: rgba(22,163,74,.32); }
[data-theme="light"] .gc-game-card__reason--uscita-vicina { color: #8a6a1a; border-color: rgba(195,134,15,.36); }
[data-theme="light"] .gc-game-card__reason--nuove-guide { color: #0369a1; border-color: rgba(2,132,199,.32); }
[data-theme="light"] .gc-game-card__reason--recensione-online { color: #6d28d9; border-color: rgba(124,58,237,.32); }
[data-theme="light"] .gc-game-card__reason--copertura-attiva { color: rgba(0,0,0,.55); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .gc-game-card__reason--molto-letto { color: #b91c1c; border-color: rgba(220,38,38,.32); }
/* Spokes inline — stesso linguaggio di Bibbia (5 categorie colore) */
.gc-game-card__spokes {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
}
.gc-game-card__spokes li { margin: 0; min-width: 0; max-width: 100%; }
.gc-game-spoke {
display: inline-block;
position: relative;
padding: 3px 9px 3px 20px;
border-radius: 6px;
background: transparent;
border: 1px solid rgba(212,180,90,.28);
color: rgba(255,255,255,.78);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
line-height: 1.3;
transition: background .15s, border-color .15s, color .15s;
max-width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-game-spoke::before {
content: "→";
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
/* Varianti colore (riusano la palette Bibbia) */
.gc-game-spoke--gold { border-color: rgba(212,180,90,.30); }
.gc-game-spoke--gold:hover { background: rgba(212,180,90,.12); border-color: rgba(212,180,90,.5); color: #f0d27a; }
.gc-game-spoke--gold::before { color: rgba(212,180,90,.85); }
.gc-game-spoke--red { border-color: rgba(239,68,68,.30); }
.gc-game-spoke--red:hover { background: rgba(239,68,68,.12); color: #fca5a5; }
.gc-game-spoke--red::before { color: rgba(239,68,68,.85); }
.gc-game-spoke--blue { border-color: rgba(0,173,226,.30); }
.gc-game-spoke--blue:hover { background: rgba(0,173,226,.12); color: #7dd3fc; }
.gc-game-spoke--blue::before { color: rgba(0,173,226,.85); }
.gc-game-spoke--green { border-color: rgba(34,197,94,.30); }
.gc-game-spoke--green:hover { background: rgba(34,197,94,.12); color: #86efac; }
.gc-game-spoke--green::before { color: rgba(34,197,94,.85); }
.gc-game-spoke--purple { border-color: rgba(157,92,224,.32); }
.gc-game-spoke--purple:hover { background: rgba(157,92,224,.12); color: #c4b5fd; }
.gc-game-spoke--purple::before { color: rgba(157,92,224,.85); }
/* Light mode: spoke testo dark esplicito + bg chip leggermente per leggibilità */
html[data-theme="light"] body.home .gc-game-spoke {
color: #0f172a !important;
background: rgba(255,255,255,.6) !important;
}
html[data-theme="light"] body.home .gc-game-spoke--gold { border-color: rgba(195,134,15,.34) !important; }
html[data-theme="light"] body.home .gc-game-spoke--gold:hover { background: rgba(195,134,15,.12) !important; color: #8a6a1a !important; }
html[data-theme="light"] body.home .gc-game-spoke--gold::before { color: #c3860f !important; }
html[data-theme="light"] body.home .gc-game-spoke--red { border-color: rgba(220,38,38,.34) !important; }
html[data-theme="light"] body.home .gc-game-spoke--red:hover { background: rgba(220,38,38,.10) !important; color: #b91c1c !important; }
html[data-theme="light"] body.home .gc-game-spoke--red::before { color: #dc2626 !important; }
html[data-theme="light"] body.home .gc-game-spoke--blue { border-color: rgba(2,132,199,.34) !important; }
html[data-theme="light"] body.home .gc-game-spoke--blue:hover { background: rgba(2,132,199,.10) !important; color: #0369a1 !important; }
html[data-theme="light"] body.home .gc-game-spoke--blue::before { color: #0284c7 !important; }
html[data-theme="light"] body.home .gc-game-spoke--green { border-color: rgba(22,163,74,.34) !important; }
html[data-theme="light"] body.home .gc-game-spoke--green:hover { background: rgba(22,163,74,.10) !important; color: #15803d !important; }
html[data-theme="light"] body.home .gc-game-spoke--green::before{ color: #16a34a !important; }
html[data-theme="light"] body.home .gc-game-spoke--purple { border-color: rgba(124,58,237,.34) !important; }
html[data-theme="light"] body.home .gc-game-spoke--purple:hover { background: rgba(124,58,237,.10) !important; color: #6d28d9 !important; }
html[data-theme="light"] body.home .gc-game-spoke--purple::before { color: #7c3aed !important; }
/* "+N contenuti" link minimal */
.gc-game-card__more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(212,180,90,.7);
text-decoration: none;
align-self: flex-start;
transition: gap .2s, color .15s;
}
.gc-game-card__more:hover { color: #d4b45a; gap: 6px; }
.gc-game-card__more svg { opacity: .8; }
html[data-theme="light"] body.home .gc-game-card__more {
color: #c3860f !important;
opacity: 1 !important;
}
html[data-theme="light"] body.home .gc-game-card__more:hover { color: #8a6a1a !important; }
/* Featured: prima card leggermente evidenziata */
.gc-game-card--featured .gc-game-thumb {
box-shadow:
0 18px 40px rgba(0,0,0,.42),
0 0 0 2px rgba(212,180,90,.4);
}
.gc-game-card--featured .gc-game-thumb::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(212,180,90,.2);
}
.gc-game-card--featured .gc-trend-badge {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
box-shadow: 0 6px 18px rgba(239,68,68,.45) !important;
}
/* ── Light mode ── */
[data-theme="light"] .gc-trending-games {
background: linear-gradient(180deg, #efefef 0%, #f6f6f6 100%);
}
[data-theme="light"] .gc-trending-games .gc-section-head h2 {
color: #111;
}
[data-theme="light"] .gc-trending-games .gc-subtitle {
color: rgba(0, 0, 0, 0.42);
}
[data-theme="light"] .gc-game-thumb {
background: #ddd;
}
[data-theme="light"] .gc-game-card:hover .gc-game-thumb {
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .gc-placeholder {
background: linear-gradient(135deg, #ddd, #e8e8e8);
color: #bbb;
}
[data-theme="light"] .gc-game-meta h3 {
color: #111;
}
[data-theme="light"] .gc-genre {
color: rgba(0, 0, 0, 0.42);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.gc-trending-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.gc-trending-games {
padding: 20px 0 16px;
}
.gc-trending-grid {
display: flex;
overflow-x: auto;
gap: 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
align-items: flex-start;
}
.gc-trending-grid::-webkit-scrollbar {
display: none;
}
.gc-game-card {
min-width: clamp(128px, 38vw, 160px);
max-width: clamp(128px, 38vw, 160px);
flex-shrink: 0;
scroll-snap-align: start;
}
.gc-trending-grid {
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
}
/* ── Batch 2: Touch UX fixes ──────────────────────────── */
/* Touch target menu hamburger: almeno 44x44 */
.menu-toggle,
.search-toggle,
.theme-toggle {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Fix zoom iOS su input ricerca header (min 16px) */
.header-search-bar__input,
#header-search-input {
font-size: 16px !important;
}
/* Gameback: 1 colonna su schermi stretti */
.gc-gameback {
grid-template-columns: 1fr;
}
/* GDPR banner min-width piu' stretto */
.gc-gdpr,
.cky-consent-container,
[class*="gdpr-banner"] {
min-width: 260px;
}
.gc-game-card .gc-game-meta {
flex: 0 0 auto;
overflow: hidden;
}
.gc-game-card .gc-game-thumb {
aspect-ratio: 3/4;
max-height: 200px;
}
.gc-trending-games .gc-subtitle {
display: none;
}
.gc-trending-games .gc-section-head {
align-items: center;
}
/* Radius ridotto su mobile */
.gc-trending-games,
.gc-hub-spotlight,
.gc-releases {
border-radius: 20px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
HP FEATURED BLOCK — Hero editoriale homepage (versione definitiva)
Struttura: hp-featured-block > hp-featured-wrap >
hp-featured-main (, 2 col: thumb sx + content dx)
hp-featured-grid (4 mini card)
Colori: CSS vars del parent per dark/light automatico.
Ombre e testi interni: override esplicito [data-theme="light"].
═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
HERO HOMEPAGE v3 — Editorial cinematic (no box, overlay, impact)
══════════════════════════════════════════════════════════════ */
.hp-featured-block {
padding: 24px 0 32px;
}
/* Hero principale: full bleed, no border, no shadow, immagine+testo sovrapposti */
.hp-featured-main {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
text-decoration: none;
color: inherit;
background: #0b0f14;
min-height: 520px;
transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.hp-featured-main:hover {
transform: translateY(-2px);
}
/* Thumbnail: full bleed absolute, riempie tutto */
.hp-featured-thumb {
position: absolute;
inset: 0;
aspect-ratio: auto;
z-index: 1;
}
.hp-featured-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.hp-featured-main:hover .hp-featured-thumb img {
transform: scale(1.03);
}
/* Overlay gradient: fonde l'immagine con il testo a destra */
.hp-featured-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(10, 12, 16, 0.15) 0%,
rgba(10, 12, 16, 0.55) 35%,
rgba(10, 12, 16, 0.92) 70%,
rgba(10, 12, 16, 0.98) 100%
);
z-index: 2;
pointer-events: none;
}
/* Secondo overlay dall'alto per leggibilita' meta bassa */
.hp-featured-thumb::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 12, 16, 0.35) 0%,
transparent 40%
);
z-index: 2;
pointer-events: none;
}
/* Contenuto testuale: absolute a destra, stacked flex */
.hp-featured-content {
position: relative;
z-index: 3;
max-width: 620px;
margin-left: auto;
padding: 60px 56px 52px;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 520px;
}
/* Kicker — premium editorial label */
.hp-kicker {
display: inline-flex;
align-self: flex-start;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #ef9e40;
margin-bottom: 18px;
padding-bottom: 6px;
border-bottom: 2px solid #ef9e40;
line-height: 1;
}
/* Titolo — cinematic, grande, editoriale */
.hp-featured-content h2 {
margin: 0;
font-size: clamp(28px, 4.2vw, 56px);
line-height: 1.05;
color: #ffffff;
font-weight: 800;
letter-spacing: -0.02em;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: transform .3s ease;
}
.hp-featured-main:hover .hp-featured-content h2 {
transform: translateX(4px);
}
/* Meta — byline sotto il titolo, sottile */
.hp-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 18px;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.hp-meta__sep { opacity: .5; }
/* Deck — max 2 righe, colore editoriale muted */
.hp-excerpt {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
font-weight: 400;
max-width: 520px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ══════════════════════════════════════════════════════════════
LIGHT HERO v3 — editoriale magazine, contrasto deciso
Filosofia: light = autorevole, leggibile, giornalistico
══════════════════════════════════════════════════════════════ */
[data-theme="light"] .hp-featured-main {
background: #ffffff;
border: 1px solid rgba(15, 23, 32, 0.08);
box-shadow: 0 4px 24px rgba(15, 23, 32, 0.06), 0 1px 2px rgba(15, 23, 32, 0.04);
border-radius: 14px;
overflow: hidden;
}
/* Overlay piu' soft: lascia respirare l'immagine, white a destra dove vive il testo */
[data-theme="light"] .hp-featured-thumb::after {
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.35) 35%,
rgba(255, 255, 255, 0.78) 60%,
rgba(255, 255, 255, 0.95) 85%,
rgba(255, 255, 255, 1) 100%
);
}
/* Overlay top leggero, non aggressivo */
[data-theme="light"] .hp-featured-thumb::before {
background: linear-gradient(
to top,
rgba(255, 255, 255, 0.12) 0%,
transparent 35%
);
}
/* Immagine: piu' "cinematografica", colore pieno */
[data-theme="light"] .hp-featured-thumb img {
filter: saturate(1.02) contrast(1.04);
}
/* TITOLO — autorevole, scuro deciso, niente "molle grigio" */
[data-theme="light"] .hp-featured-content h2 {
color: #0b0f14;
text-shadow: none;
font-weight: 800;
letter-spacing: -0.02em;
position: relative;
padding-bottom: 14px;
}
/* Linea sotto titolo: 40px brand cyan, dettaglio editoriale */
[data-theme="light"] .hp-featured-content h2::after {
content: "";
display: block;
width: 44px;
height: 2px;
background: #00ade2;
margin-top: 14px;
border-radius: 1px;
}
/* META — slate grigio leggibile, non "disabilitata" */
[data-theme="light"] .hp-meta {
color: #5f6b7a;
font-weight: 500;
}
[data-theme="light"] .hp-meta__sep {
color: #94a3b8;
opacity: 0.6;
}
/* DESCRIZIONE — secondaria ma decisa, non spenta */
[data-theme="light"] .hp-excerpt {
color: #2a3440;
opacity: 0.85;
font-weight: 400;
}
/* LABEL "IN VETRINA" — sharp editoriale */
[data-theme="light"] .hp-kicker {
color: #ef9e40;
opacity: 1;
border-bottom-color: #ef9e40;
font-weight: 700;
letter-spacing: 0.12em;
font-size: 11px;
}
/* CTA "Leggi l'articolo" — link forte, brand cyan */
[data-theme="light"] .hp-cta {
color: #00ade2;
border-bottom: 1px solid rgba(0, 173, 226, 0.4);
font-weight: 600;
transition: border-color 0.18s ease;
}
[data-theme="light"] .hp-featured-main:hover .hp-cta {
color: #00ade2;
border-bottom-color: #00ade2;
}
/* Mobile: overlay ribaltato (bianco dal basso per leggibilita' testo) */
@media (max-width: 768px) {
[data-theme="light"] .hp-featured-thumb::after {
background: linear-gradient(
to top,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.88) 25%,
rgba(255, 255, 255, 0.3) 60%,
transparent 100%
);
}
[data-theme="light"] .hp-featured-thumb::before {
display: none;
}
}
/* ── Grid mini card (secondarie — meno protagoniste) ── */
.hp-featured-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.hp-mini-card {
display: grid;
grid-template-columns: 150px 1fr;
background: transparent;
border: none;
border-radius: 10px;
overflow: hidden;
box-shadow: none;
transition: transform .22s ease;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 0;
padding-top: 16px;
}
.hp-mini-card:hover {
transform: translateX(4px);
}
/* Mini card light: pulite, bianche, shadow soft, contrasto deciso */
[data-theme="light"] .hp-mini-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-top: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border-radius: 12px;
padding: 14px;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
[data-theme="light"] .hp-mini-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .hp-mini-content h3 {
color: #0b0f14;
font-weight: 700;
}
[data-theme="light"] .hp-mini-kicker {
color: #ef9e40;
font-weight: 700;
letter-spacing: 0.1em;
}
[data-theme="light"] .hp-mini-deck {
color: #2a3440;
opacity: 0.85;
}
/* Thumbnail mini card (compatta) */
.hp-mini-thumb {
display: block;
overflow: hidden;
position: relative;
border-radius: 8px;
aspect-ratio: 16 / 10;
}
.hp-mini-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease;
}
.hp-mini-card:hover .hp-mini-thumb img {
transform: scale(1.04);
}
/* Contenuto mini card (denso, piu' piccolo) */
.hp-mini-content {
padding: 0 0 0 16px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hp-mini-kicker {
display: block;
margin-bottom: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: #ef9e40;
}
.hp-mini-content h3 {
margin: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
}
.hp-mini-content h3 a {
color: inherit;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .15s;
}
.hp-mini-content h3 a:hover {
color: var(--color-link);
}
/* ── Responsive hero ── */
@media (max-width: 1024px) {
.hp-featured-main { min-height: 460px; }
.hp-featured-content { padding: 48px 40px 44px; }
.hp-featured-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Mobile: immagine sopra, testo sotto con gradient bottom-up */
@media (max-width: 768px) {
.hp-featured-block { padding: 12px 0 24px; }
.hp-featured-main {
min-height: 0;
aspect-ratio: 4 / 5;
border-radius: 10px;
margin-bottom: 14px;
}
/* Overlay mobile: dal basso, stile Netflix */
.hp-featured-thumb::after {
background: linear-gradient(
to top,
rgba(10, 12, 16, 0.97) 0%,
rgba(10, 12, 16, 0.85) 25%,
rgba(10, 12, 16, 0.3) 60%,
transparent 100%
);
}
.hp-featured-thumb::before {
display: none;
}
.hp-featured-content {
position: absolute;
inset: 0;
max-width: none;
min-height: 0;
padding: 24px 22px 26px;
justify-content: flex-end;
}
.hp-kicker {
font-size: 10px;
margin-bottom: 12px;
}
.hp-featured-content h2 {
font-size: 24px;
-webkit-line-clamp: 4;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.hp-meta {
font-size: 12px;
margin-top: 12px;
}
.hp-excerpt {
font-size: 13px;
-webkit-line-clamp: 2;
margin-top: 10px;
}
.hp-cta {
margin-top: 16px;
font-size: 11px;
}
.hp-featured-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.hp-mini-card {
grid-template-columns: 120px 1fr;
}
}
@media (max-width: 480px) {
.hp-featured-main { aspect-ratio: 3 / 4; }
.hp-featured-content { padding: 20px 18px 22px; }
.hp-featured-content h2 { font-size: 22px; }
.hp-mini-card {
grid-template-columns: 100px 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════
LA BIBBIA DEI CODICI v3 — griglia uniforme editoriale
6 card uguali: cover + nome + guide count + spoke badges
═══════════════════════════════════════════════════════════════ */
.gc-section--bibbia-v2 {
padding: 40px 0 48px;
}
/* ─── Header sezione ─────────────────────────────────────────── */
.gc-bibbia__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding: 0 var(--site-gutter, 20px);
}
.gc-bibbia__header-left {
display: flex;
align-items: center;
gap: 10px;
}
.gc-bibbia__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(239, 158, 64, .15);
border: 1px solid rgba(239, 158, 64, .35);
color: #ef9e40;
flex-shrink: 0;
}
.gc-bibbia__title {
font-size: 22px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--color-heading, #f1f5f9);
margin: 0;
line-height: 1.2;
}
.gc-bibbia__link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: #ef9e40;
text-decoration: none;
opacity: .85;
transition: opacity .18s ease;
white-space: nowrap;
}
.gc-bibbia__link:hover {
opacity: 1;
}
/* ─── Grid: 6 card uniformi ──────────────────────────────────── */
.gc-bibbia__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
padding: 0 var(--site-gutter, 20px);
}
/* ─── Card ───────────────────────────────────────────────────── */
.gc-bibbia__card {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
background: #1a1f2e;
border: 1px solid rgba(255, 255, 255, .07);
transition: transform .24s cubic-bezier(.25, .46, .45, .94),
box-shadow .24s cubic-bezier(.25, .46, .45, .94),
border-color .24s ease;
}
@media (hover: hover) {
.gc-bibbia__card:hover {
transform: translateY(-5px) scale(1.015);
box-shadow: 0 20px 50px rgba(0, 0, 0, .55),
0 0 0 1px rgba(239, 158, 64, .45);
border-color: rgba(239, 158, 64, .45);
}
.gc-bibbia__card:hover .gc-bibbia__cover img {
transform: scale(1.04);
}
}
/* ─── Cover (aspect-ratio 3:4 uniforme) ──────────────────────── */
.gc-bibbia__cover {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #0d1117;
flex-shrink: 0;
}
.gc-bibbia__cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform .4s ease;
}
.gc-bibbia__cover-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1a1f2e, #0d1117);
}
.gc-bibbia__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.25) 0%, transparent 45%);
pointer-events: none;
}
/* ─── Info area (sotto la cover) ─────────────────────────────── */
.gc-bibbia__info {
padding: 10px 12px 14px;
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
}
/* ─── Nome gioco ─────────────────────────────────────────────── */
.gc-bibbia__game-name {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--color-heading, #f1f5f9);
line-height: 1.25;
letter-spacing: -.01em;
}
/* ─── Guide count micro-text ─────────────────────────────────── */
.gc-bibbia__guide-count {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--color-muted, #94a3b8);
line-height: 1.3;
letter-spacing: .01em;
}
/* ─── Spoke badges (allineati in basso via margin-top:auto) ──── */
.gc-bibbia__badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: auto;
}
.gc-bibbia__badge {
display: inline-block;
padding: 3px 9px;
border-radius: 6px;
background: rgba(239, 158, 64, .15);
border: 1px solid rgba(239, 158, 64, .35);
color: #ef9e40;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.5;
white-space: nowrap;
}
/* ─── Light mode ─────────────────────────────────────────────── */
[data-theme="light"] .gc-bibbia__card {
background: #ffffff;
border-color: rgba(0, 0, 0, .10);
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
[data-theme="light"] .gc-bibbia__game-name {
color: #1e293b;
}
[data-theme="light"] .gc-bibbia__guide-count {
color: #64748b;
}
[data-theme="light"] .gc-bibbia__badge {
background: rgba(180, 100, 10, .10);
border-color: rgba(180, 100, 10, .35);
color: #a0610a;
}
[data-theme="light"] .gc-bibbia__overlay {
background: linear-gradient(to top, rgba(0,0,0,.12) 0%, transparent 35%);
}
[data-theme="light"] .gc-bibbia__cover {
background: #e2e8f0;
}
@media (hover: hover) {
[data-theme="light"] .gc-bibbia__card:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, .12),
0 0 0 1px rgba(180, 100, 10, .40);
border-color: rgba(180, 100, 10, .40);
}
}
/* ─── Tablet: 3 colonne ─────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 641px) {
.gc-bibbia__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ─── Mobile: scroll orizzontale ─────────────────────────────── */
@media (max-width: 640px) {
.gc-bibbia__grid {
grid-template-columns: none;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding-bottom: 8px;
margin-left: calc(-1 * var(--site-gutter, 20px));
margin-right: calc(-1 * var(--site-gutter, 20px));
padding-left: var(--site-gutter, 20px);
padding-right: var(--site-gutter, 20px);
scrollbar-width: none;
}
.gc-bibbia__grid::-webkit-scrollbar { display: none; }
.gc-bibbia__card {
flex: 0 0 180px;
scroll-snap-align: start;
}
}
/* ═══════════════════════════════════════════════════════════════
FORMAT COLOR SYSTEM — codice colore per sezione editoriale
News=rosso, Guide=blu, Retro=viola, Recensioni=verde
═══════════════════════════════════════════════════════════════ */
:root {
--color-news: #e25555;
--color-guide: #00ade2;
--color-retro: #a855f7;
--color-review: #4caf82;
}
html.light-mode,
[data-theme="light"] {
--color-news: #d94444;
--color-guide: #0090bd;
--color-retro: #9333ea;
--color-review: #3d9e6f;
}
/* ── Section title left-border per format ── */
.gc-section__title--review { border-left-color: var(--color-review); }
/* ═══════════════════════════════════════════════════════════════
SECTION HEADER UNIFICATO — Pattern editoriale Gamecast
Titolo Archivo 900 dominante + divider oro tenue + accent solido
bottom-left. CTA pillola sobria outline oro. Si applica a TUTTI
gli header sezione: .gc-section__header, .gc-bibbia__header,
.gc-section-head, e il legacy .gc-review-head.
═══════════════════════════════════════════════════════════════ */
body.home .gc-section__header,
body.home .gc-bibbia__header,
body.home .gc-section-head,
body.home .gc-review-head,
body.home .gc-releases .gc-section__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 0 0 14px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(212,180,90,.22);
position: relative;
}
body.home .gc-section__header::after,
body.home .gc-bibbia__header::after,
body.home .gc-section-head::after,
body.home .gc-review-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 64px;
height: 2px;
background: #d4b45a;
border-radius: 2px;
}
/* Header-left wrapper (per Bibbia + Giochi del momento) */
body.home .gc-bibbia__header-left,
body.home .gc-section-head > div:first-child,
body.home .gc-review-head__left,
body.home .gc-releases__head-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 4px !important;
min-width: 0;
flex: 1 1 0% !important;
margin-right: auto !important;
text-align: left !important;
}
/* Titoli sezione: Archivo 900, no border-left, no padding-left categoria */
body.home .gc-section__title,
body.home .gc-bibbia__title,
body.home .gc-section-head h2,
body.home .gc-trending-games h2 {
font-family: 'Archivo', -apple-system, sans-serif !important;
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 900;
letter-spacing: -.025em;
line-height: 1;
color: #ededed;
border: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
align-self: flex-start !important;
}
body.home .gc-section__title--review,
body.home .gc-section__title--guide,
body.home .gc-section__title--retro,
body.home .gc-section__title--news {
border-left: none !important;
padding-left: 0 !important;
}
/* Sottotitolo subtle (intro sezione) — pattern uniforme */
body.home .gc-section-head .gc-subtitle,
body.home .gc-releases__intro,
body.home .gc-section__intro {
font-size: 13px;
line-height: 1.4;
color: rgba(255,255,255,.55);
margin: 4px 0 0;
font-weight: 400;
font-family: 'Inter', sans-serif !important;
letter-spacing: 0;
}
[data-theme="light"] body.home .gc-section__intro,
[data-theme="light"] body.home .gc-section-head .gc-subtitle,
[data-theme="light"] body.home .gc-releases__intro {
color: #475569;
}
/* CTA pillola sobria outline oro: comportamento uniforme */
body.home .gc-section__link,
body.home .gc-bibbia__link,
body.home .gc-section-head .gc-link,
body.home .gc-section-head a:last-child {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid rgba(212,180,90,.35);
border-radius: 999px;
background: transparent;
color: #d4b45a;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
flex-shrink: 0;
white-space: nowrap;
transition: background .18s, border-color .18s, color .18s;
}
body.home .gc-section__link:hover,
body.home .gc-bibbia__link:hover,
body.home .gc-section-head .gc-link:hover,
body.home .gc-section-head a:last-child:hover {
background: #d4b45a;
border-color: #d4b45a;
color: #111214;
}
body.home .gc-section__link svg,
body.home .gc-bibbia__link svg,
body.home .gc-review-head__link svg { transition: transform .2s; }
body.home .gc-section__link:hover svg,
body.home .gc-bibbia__link:hover svg,
body.home .gc-review-head__link:hover svg { transform: translateX(3px); }
/* Light mode coordinato */
[data-theme="light"] body.home .gc-section__header,
[data-theme="light"] body.home .gc-bibbia__header,
[data-theme="light"] body.home .gc-section-head,
[data-theme="light"] body.home .gc-review-head { border-bottom-color: rgba(195,134,15,.28); }
[data-theme="light"] body.home .gc-section__header::after,
[data-theme="light"] body.home .gc-bibbia__header::after,
[data-theme="light"] body.home .gc-section-head::after,
[data-theme="light"] body.home .gc-review-head::after { background: #c3860f; }
[data-theme="light"] body.home .gc-section__title,
[data-theme="light"] body.home .gc-bibbia__title,
[data-theme="light"] body.home .gc-section-head h2,
[data-theme="light"] body.home .gc-trending-games h2 { color: #0f172a; }
[data-theme="light"] body.home .gc-section__link,
[data-theme="light"] body.home .gc-bibbia__link,
[data-theme="light"] body.home .gc-section-head .gc-link { color: #c3860f; border-color: rgba(195,134,15,.32); }
[data-theme="light"] body.home .gc-section__link:hover,
[data-theme="light"] body.home .gc-bibbia__link:hover,
[data-theme="light"] body.home .gc-section-head .gc-link:hover { background: #c3860f; color: #fff; }
/* Nasconde l'icona SVG del header Bibbia (era il libro): non più usata col nuovo design */
body.home .gc-bibbia__icon { display: none !important; }
/* Mobile: header denso, titolo grande ma compatto, CTA con label corta */
@media (max-width: 600px) {
html body.home .gc-section__header,
html body.home .gc-bibbia__header,
html body.home .gc-section-head,
html body.home .gc-review-head {
padding: 0 0 10px !important;
margin-bottom: 16px !important;
gap: 12px !important;
align-items: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body.home .gc-section__title,
html body.home .gc-bibbia__title,
html body.home .gc-section-head h2,
html body.home .gc-trending-games h2 {
font-size: 24px !important;
line-height: 1.05 !important;
display: block !important;
-webkit-line-clamp: unset !important;
max-width: 100% !important;
}
html body.home .gc-releases__intro,
html body.home .gc-section-head .gc-subtitle { display: none !important; }
html body.home .gc-section__link,
html body.home .gc-bibbia__link,
html body.home .gc-section-head .gc-link,
html body.home .gc-section-head a:last-child {
padding: 6px 10px !important;
font-size: 9.5px !important;
gap: 4px !important;
max-width: none !important;
letter-spacing: .12em !important;
}
}
.gc-section__title--guide { border-left-color: var(--color-guide); }
.gc-section__title--retro { border-left-color: var(--color-retro); }
.gc-section__title--news { border-left-color: var(--color-news); }
/* ── Category badge colori per format ── */
.gc-card__category--review { color: var(--color-review); }
.gc-card__category--review:hover { color: var(--color-review); }
.gc-card__category--guide { color: var(--color-guide); }
.gc-card__category--guide:hover { color: var(--color-guide); }
.gc-card__category--retro { color: var(--color-retro); }
.gc-card__category--retro:hover { color: var(--color-retro); }
.gc-card__category--news { color: var(--color-news); }
.gc-card__category--news:hover { color: var(--color-news); }
/* ── Bibbia guide badges: blu invece di arancio ── */
.gc-section--guide .gc-section--bibbia .gc-card__category,
.gc-section--guide.gc-section--bibbia .gc-card__category {
background: rgba(0, 173, 226, .12);
border-color: rgba(0, 173, 226, .30);
color: var(--color-guide);
}
/* ── CTA inline nelle card ── */
.gc-card__cta {
display: inline-block;
align-self: flex-start;
margin-top: auto;
padding-top: 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-orange);
transition: color .15s;
}
.gc-card__cta--review { color: var(--color-review); }
.gc-card__cta--guide { color: var(--color-guide); }
.gc-card__cta--retro { color: var(--color-retro); }
.gc-card__cta--news { color: var(--color-news); }
/* ── Hero CTA editoriale (always on dark overlay) ── */
.hp-cta {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin-top: 22px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
color: #ffffff;
padding: 0 0 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
transition: border-color .25s ease, color .25s ease, gap .25s ease;
position: relative;
}
.hp-cta::after {
content: '→';
display: inline-block;
transition: transform .25s ease;
font-weight: 700;
}
.hp-featured-main:hover .hp-cta {
border-bottom-color: #e8943a;
color: #e8943a;
gap: 12px;
}
.hp-featured-main:hover .hp-cta::after {
transform: translateX(3px);
}
[data-theme="light"] .hp-cta,
[data-theme="light"] .hp-featured-main:hover .hp-cta { color: #ffffff; }
[data-theme="light"] .hp-featured-main:hover .hp-cta { color: #e8943a; }
/* ── Mini card deck (excerpt) ── */
.hp-mini-deck {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Gameback badge colore retro ── */
.gc-section--retro .gc-gameback-card__badge {
color: var(--color-retro);
}
/* ── Sezione review: bordo laterale per enfasi ── */
.gc-section--review .gc-card:hover {
border-color: var(--color-review);
}
.gc-section--news .gc-card__category {
color: var(--color-news);
}
/* ── Maggiore spaziatura tra sezioni ── */
.gc-section + .gc-section {
margin-top: 16px;
}
/* Logo switching ora nel parent theme SCSS */
.single .entry-content img {
margin: 0px;
}
/* ═══════════════════════════════════════════════════════════════
Homepage — Sezione Recensioni v2
Layout: 1 main featured + 3 card con badge voto
═══════════════════════════════════════════════════════════════ */
.gc-section--review { margin-bottom: 48px; }
.gc-section__title--review {
position: relative;
}
/* Griglia: 1 grande a sinistra + 3 piccole a destra */
.gc-hp-rv {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
}
.gc-hp-rv__card {
background: var(--bg-1, #1a1a1a);
border: 1px solid var(--border, #252525);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.gc-hp-rv__card:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px var(--color-link);
border-color: var(--color-link);
}
/* Main card — occupa tutta la colonna sinistra */
.gc-hp-rv__card--main {
grid-column: 1;
grid-row: 1 / 4;
}
.gc-hp-rv__card--main .gc-hp-rv__thumb { height: 320px; }
.gc-hp-rv__card--main .gc-hp-rv__thumb::after {
height: 100px;
background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.gc-hp-rv__card--main .gc-hp-rv__title {
font-size: 20px; font-weight: 800; -webkit-line-clamp: 4;
}
.gc-hp-rv__card--main .gc-hp-rv__badge {
width: 60px; height: 60px; font-size: 20px;
}
.gc-hp-rv__card--main:hover .gc-hp-rv__thumb img { transform: scale(1.06); }
/* Card secondarie — colonna destra, layout orizzontale */
.gc-hp-rv__card:not(.gc-hp-rv__card--main) {
flex-direction: row;
}
.gc-hp-rv__card:not(.gc-hp-rv__card--main) .gc-hp-rv__thumb {
width: 140px; min-width: 140px; height: auto;
}
.gc-hp-rv__card:not(.gc-hp-rv__card--main) .gc-hp-rv__title {
font-size: 14px; -webkit-line-clamp: 2;
}
.gc-hp-rv__card:not(.gc-hp-rv__card--main) .gc-hp-rv__badge {
width: 40px; height: 40px; font-size: 14px;
}
/* Thumb */
.gc-hp-rv__thumb {
position: relative; width: 100%; height: 180px;
overflow: hidden; background: var(--bg-2, #111);
flex-shrink: 0;
}
.gc-hp-rv__thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .3s ease; display: block; margin: 0 !important;
}
.gc-hp-rv__card:hover .gc-hp-rv__thumb img { transform: scale(1.04); }
.gc-hp-rv__thumb::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 50px;
background: linear-gradient(transparent, rgba(0,0,0,.45));
pointer-events: none;
}
/* Verdict badge premium — pill con GC firma */
.gc-hp-rv__verdict {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 50px;
padding: 7px 12px 5px;
border-radius: 10px;
border: 1.5px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.gc-hp-rv__verdict-val {
font-family: 'Inter', system-ui, sans-serif;
font-size: 20px;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1;
}
.gc-hp-rv__verdict-sig {
font-size: 8.5px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
line-height: 1;
margin-top: 3px;
}
/* Colori per livello — sobri */
.gc-hp-rv__verdict--high { border-color: rgba(70, 195, 215, .35); }
.gc-hp-rv__verdict--high .gc-hp-rv__verdict-val { color: #5cc8db; }
.gc-hp-rv__verdict--high .gc-hp-rv__verdict-sig { color: rgba(92, 200, 219, .50); }
.gc-hp-rv__verdict--mid { border-color: rgba(210, 175, 90, .35); }
.gc-hp-rv__verdict--mid .gc-hp-rv__verdict-val { color: #d4b45a; }
.gc-hp-rv__verdict--mid .gc-hp-rv__verdict-sig { color: rgba(212, 180, 90, .50); }
.gc-hp-rv__verdict--low { border-color: rgba(190, 80, 80, .30); }
.gc-hp-rv__verdict--low .gc-hp-rv__verdict-val { color: #c06060; }
.gc-hp-rv__verdict--low .gc-hp-rv__verdict-sig { color: rgba(192, 96, 96, .50); }
/* Main card: verdict piu grande */
.gc-hp-rv__card--main .gc-hp-rv__verdict {
min-width: 60px;
padding: 9px 14px 7px;
border-radius: 12px;
}
.gc-hp-rv__card--main .gc-hp-rv__verdict-val {
font-size: 26px;
}
.gc-hp-rv__card--main .gc-hp-rv__verdict-sig {
font-size: 9px;
}
/* Platform tags */
.gc-hp-rv__plats {
position: absolute; top: 8px; left: 8px;
display: flex; gap: 4px; flex-wrap: wrap; z-index: 2;
}
.gc-hp-rv__plat {
font-size: 9px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; padding: 2px 7px; border-radius: 3px;
background: rgba(0,0,0,.6); color: rgba(255,255,255,.85);
backdrop-filter: blur(4px);
}
/* Body */
.gc-hp-rv__body {
padding: 14px 16px 16px; flex: 1;
display: flex; flex-direction: column;
}
.gc-hp-rv__date {
font-size: 10px; color: var(--text-meta, #555);
text-transform: uppercase; letter-spacing: 0.08em;
margin: 0 0 6px; font-weight: 500;
}
.gc-hp-rv__title {
font-size: 16px; font-weight: 700; color: var(--text-h, #e8e8e8);
line-height: 1.3; margin: 0 0 6px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; transition: color .2s;
}
.gc-hp-rv__card:hover .gc-hp-rv__title { color: var(--color-link); }
.gc-hp-rv__game {
font-size: 11px; color: var(--color-link); margin-top: auto;
font-weight: 600; opacity: .8;
}
/* Responsive old */
@media (max-width: 768px) {
.gc-hp-rv { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
RECENSIONI v3 — voto-first, firma editoriale
═══════════════════════════════════════════════════════════════ */
.gc-rv {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ─── Card base (fallback non-hero) ───────────────────────── */
.gc-rv__card {
display: flex;
align-items: stretch;
border-radius: 14px;
overflow: hidden;
background: var(--bg-1, #10131a);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
transition: background .2s, border-color .2s, transform .2s;
}
.gc-rv__card:hover {
background: rgba(255,255,255,.04);
border-color: rgba(212,180,90,.22);
}
/* ═══ HERO PREMIUM CARD — thumb + body ════════════════════ */
.gc-rv__card--hero {
position: relative;
display: grid;
grid-template-columns: minmax(280px, 42%) 1fr;
min-height: 280px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, rgba(212,180,90,.04) 0%, rgba(255,255,255,.02) 100%);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.gc-rv__card--hero:hover {
border-color: rgba(212,180,90,.35);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,.32), 0 2px 8px rgba(212,180,90,.18);
}
.gc-rv__hero-thumb {
position: relative;
background: #0a0a12;
overflow: hidden;
min-height: 220px;
}
.gc-rv__hero-thumb img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.gc-rv__card--hero:hover .gc-rv__hero-thumb img { transform: scale(1.04); }
.gc-rv__hero-overlay {
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0,0,0,.10) 0%, transparent 40%, rgba(0,0,0,.55) 100%),
linear-gradient(90deg, transparent 0%, transparent 60%, rgba(10,10,18,.55) 100%);
}
/* Score badge overlay sull'immagine — più leggero, meno "scatola" */
.gc-rv__hero-score {
position: absolute;
left: 14px; bottom: 14px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 64px;
padding: 9px 12px 8px;
border-radius: 12px;
background: rgba(10,10,18,.58);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
backdrop-filter: blur(10px) saturate(1.2);
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.gc-rv__hero-score-val {
font-family: 'Inter', system-ui, sans-serif;
font-size: 28px;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1;
}
.gc-rv__hero-score-sig {
font-size: 8px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
margin-top: 5px;
opacity: .55;
color: #fff;
}
.gc-rv__hero-score.gc-rv__score--high .gc-rv__hero-score-val { color: #5cc8db; }
.gc-rv__hero-score.gc-rv__score--mid .gc-rv__hero-score-val { color: #d4b45a; }
.gc-rv__hero-score.gc-rv__score--low .gc-rv__hero-score-val { color: #c06060; }
/* Hero body — gerarchia compatta, contenuto raggruppato + foot ai piedi */
.gc-rv__hero-body {
padding: 22px 26px 20px;
display: flex; flex-direction: column; gap: 8px;
}
.gc-rv__title--hero {
font-size: clamp(21px, 1.65vw, 27px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.025em;
margin: 2px 0 0;
color: var(--color-heading, #ededed);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* "Verdetto" micro-label + excerpt premium */
.gc-rv__verdict {
margin-top: 4px;
padding-left: 12px;
border-left: 2px solid rgba(212,180,90,.55);
}
.gc-rv__verdict-label {
display: block;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
color: #d4b45a;
margin-bottom: 3px;
}
.gc-rv__deck--hero {
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,.88);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* CTA integrata sotto il verdetto, foot resta in fondo */
.gc-rv__hero-cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #d4b45a;
transition: gap .2s;
}
.gc-rv__hero-body .gc-rv__foot { margin-top: auto; padding-top: 12px; }
.gc-rv__hero-cta span { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.gc-rv__card--hero:hover .gc-rv__hero-cta span { transform: translateX(4px); }
[data-theme="light"] .gc-rv__card--hero {
background: linear-gradient(135deg, rgba(195,134,15,.05) 0%, #ffffff 100%);
border-color: rgba(0,0,0,.08);
box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .gc-rv__deck--hero { color: #475569; }
[data-theme="light"] .gc-rv__hero-cta { color: #c3860f; }
[data-theme="light"] .gc-rv__verdict { border-left-color: rgba(195,134,15,.55); }
[data-theme="light"] .gc-rv__verdict-label { color: #c3860f; }
/* ═══ LIST 3 RECENSIONI — rows compatte ═══════════════════ */
.gc-rv__list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 8px;
}
.gc-rv__list-item { margin: 0; }
.gc-rv__row {
position: relative;
display: flex; align-items: center;
gap: 11px;
padding: 7px 14px 7px 10px;
min-height: 54px;
border-radius: 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
text-decoration: none;
transition: background .18s, border-color .18s, transform .18s;
}
.gc-rv__row:hover {
background: rgba(255,255,255,.05);
border-color: rgba(212,180,90,.22);
transform: translateX(2px);
}
.gc-rv__row-score {
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
min-width: 44px; height: 40px;
padding: 0 6px;
border-radius: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
}
.gc-rv__row-score-val {
font-family: 'Inter', system-ui, sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1;
}
.gc-rv__row-score.gc-rv__score--high .gc-rv__row-score-val { color: #5cc8db; }
.gc-rv__row-score.gc-rv__score--mid .gc-rv__row-score-val { color: #d4b45a; }
.gc-rv__row-score.gc-rv__score--low .gc-rv__row-score-val { color: #c06060; }
.gc-rv__row-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
justify-content: center;
padding-right: 56px; /* spazio per il lobby badge a destra */
}
/* Lobby badge nelle row: assoluto a destra, centrato verticalmente */
.gc-rv__row .gc-lobby-count {
position: absolute;
right: 14px; top: 50%;
transform: translateY(-50%);
margin-left: 0 !important;
}
[data-theme="light"] .gc-rv__row {
background: #ffffff;
border-color: rgba(0,0,0,.07);
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
[data-theme="light"] .gc-rv__row:hover {
background: #fafbfc;
border-color: rgba(195,134,15,.22);
}
[data-theme="light"] .gc-rv__row-score {
background: rgba(0,0,0,.025);
border-color: rgba(0,0,0,.06);
}
/* ─── Score: elemento dominante ──────────────────────────── */
.gc-rv__score {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 100px;
padding: 24px 22px;
flex-shrink: 0;
background: rgba(255,255,255,.055);
}
.gc-rv__score-val {
font-family: 'Inter', system-ui, sans-serif;
font-size: 40px;
font-weight: 800;
letter-spacing: -.05em;
line-height: 1;
text-shadow: 0 1px 3px rgba(0,0,0,.20);
}
.gc-rv__score-bar {
display: block;
width: 28px;
height: 2px;
border-radius: 1px;
margin: 12px 0 10px;
opacity: .55;
}
.gc-rv__score-sig {
font-size: 7px;
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
line-height: 1;
opacity: .50;
color: inherit;
}
/* Score colori */
.gc-rv__score--high .gc-rv__score-val { color: #5cc8db; }
.gc-rv__score--high .gc-rv__score-bar { background: #5cc8db; }
.gc-rv__score--mid .gc-rv__score-val { color: #d4b45a; }
.gc-rv__score--mid .gc-rv__score-bar { background: #d4b45a; }
.gc-rv__score--low .gc-rv__score-val { color: #c06060; }
.gc-rv__score--low .gc-rv__score-bar { background: #c06060; }
/* ─── Info ───────────────────────────────────────────────── */
.gc-rv__info {
flex: 1;
min-width: 0;
padding: 16px 22px;
display: flex;
flex-direction: column;
gap: 3px;
border-left: 1px solid rgba(255,255,255,.05);
}
/* Top row: label + game */
.gc-rv__info-top {
display: flex;
align-items: center;
gap: 8px;
}
.gc-rv__label {
font-size: 8.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .18em;
color: #e8943a;
}
.gc-rv__sep {
color: var(--text-muted, #64748b);
opacity: .3;
font-size: 10px;
}
.gc-rv__game {
font-size: 10px;
font-weight: 700;
color: var(--color-link, #00ade2);
opacity: .85;
}
/* Micro deck — hook editoriale */
.gc-rv__deck {
font-size: 12px;
color: var(--text-muted, #94a3b8);
line-height: 1.4;
margin: 1px 0 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: .7;
}
.gc-rv__card--hero .gc-rv__deck {
font-size: 13px;
-webkit-line-clamp: 2;
opacity: .80;
color: var(--text-muted, #b0b8c4);
}
/* Foot: piattaforme e data su righe separate */
.gc-rv__foot {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
padding-top: 4px;
}
.gc-rv__plats {
font-size: 10px;
font-weight: 600;
color: var(--text-muted, #64748b);
}
.gc-rv__title {
font-size: 14px;
font-weight: 600;
color: var(--color-heading, #e2e8f0);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-rv__meta {
font-size: 10px;
color: var(--text-muted, #64748b);
}
.gc-rv__plats { font-weight: 600; }
.gc-rv__date {
font-size: 10px;
color: var(--text-muted, #64748b);
opacity: .6;
margin-top: auto;
}
/* (Le vecchie regole .gc-rv__card--hero sono state sostituite dal nuovo design
"premium card con thumb" più sopra. Manteniamo solo light mode + mobile sotto.) */
/* ═══ Light mode ════════════════════════════════════════════ */
[data-theme="light"] .gc-rv__card {
background: #ffffff;
border-color: rgba(0,0,0,.07);
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .gc-rv__card:hover {
background: #fafbfc;
border-color: rgba(26,122,138,.18);
box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
/* (Le vecchie regole [light] .gc-rv__card--hero sono ora gestite nel nuovo blocco hero) */
[data-theme="light"] .gc-rv__score-val {
text-shadow: none;
}
[data-theme="light"] .gc-rv__deck { color: #64748b; }
[data-theme="light"] .gc-rv__plats { color: #64748b; }
[data-theme="light"] .gc-rv__foot { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-rv__score {
background: rgba(0,0,0,.015);
}
[data-theme="light"] .gc-rv__card--hero .gc-rv__score {
background: rgba(0,0,0,.02);
}
[data-theme="light"] .gc-rv__info {
border-left-color: rgba(0,0,0,.05);
}
[data-theme="light"] .gc-rv__score-sig { color: #94a3b8; }
[data-theme="light"] .gc-rv__title { color: #1e293b; }
/* Light mode: titoli row recensioni leggibili (override globale con specificità alta) */
html[data-theme="light"] body.home .gc-rv__row-body .gc-rv__title,
html[data-theme="light"] body.home .gc-rv__row .gc-rv__title { color: #0f172a !important; }
html[data-theme="light"] body.home .gc-rv__hero-body .gc-rv__title,
html[data-theme="light"] body.home .gc-rv__title--hero { color: #0f172a !important; }
[data-theme="light"] .gc-rv__meta { color: #94a3b8; }
[data-theme="light"] .gc-rv__date { color: #94a3b8; }
[data-theme="light"] .gc-rv__game { color: #1a7a8a; }
[data-theme="light"] .gc-rv__label { color: #b33a2a; }
[data-theme="light"] .gc-rv__score--high .gc-rv__score-val { color: #1a7a8a; }
[data-theme="light"] .gc-rv__score--high .gc-rv__score-bar { background: #1a7a8a; }
[data-theme="light"] .gc-rv__score--mid .gc-rv__score-val { color: #8a6a1a; }
[data-theme="light"] .gc-rv__score--mid .gc-rv__score-bar { background: #8a6a1a; }
[data-theme="light"] .gc-rv__score--low .gc-rv__score-val { color: #983030; }
[data-theme="light"] .gc-rv__score--low .gc-rv__score-bar { background: #983030; }
/* ═══ Mobile ════════════════════════════════════════════════ */
@media (max-width: 768px) {
.gc-rv { gap: 10px; }
/* HERO mobile: thumb sopra (16:9, contenuta), body sotto compatto */
.gc-rv__card--hero {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
min-height: 0;
}
.gc-rv__hero-thumb {
aspect-ratio: 16/9;
min-height: 0;
max-height: 240px;
}
.gc-rv__hero-score {
left: 12px; bottom: 12px;
min-width: 56px;
padding: 8px 10px 7px;
border-radius: 10px;
}
.gc-rv__hero-score-val { font-size: 24px; }
.gc-rv__hero-score-sig { font-size: 7.5px; margin-top: 3px; }
.gc-rv__hero-body { padding: 14px 16px 16px; gap: 6px; }
.gc-rv__title--hero { font-size: 18.5px; -webkit-line-clamp: 3; }
.gc-rv__verdict { padding-left: 10px; margin-top: 2px; }
.gc-rv__verdict-label { font-size: 9px; letter-spacing: .18em; }
.gc-rv__deck--hero { font-size: 13.5px; -webkit-line-clamp: 2; line-height: 1.5; }
.gc-rv__hero-cta { font-size: 11px; margin-top: 4px; }
.gc-rv__hero-body .gc-rv__foot { padding-top: 8px; }
/* LIST 3 mobile: rows compatte ma leggibili */
.gc-rv__list { gap: 6px; }
.gc-rv__row {
gap: 10px;
padding: 6px 12px 6px 8px;
min-height: 50px;
border-radius: 10px;
}
.gc-rv__row-score {
min-width: 42px; height: 38px;
border-radius: 7px;
}
.gc-rv__row-score-val { font-size: 16.5px; }
.gc-rv__row-body { padding-right: 44px; gap: 1px; }
.gc-rv__row-body .gc-rv__title { font-size: 13.5px; -webkit-line-clamp: 2; }
.gc-rv__row-body .gc-rv__deck { display: none; }
.gc-rv__row .gc-lobby-count { right: 10px; }
}
@media (max-width: 480px) {
.gc-rv__hero-thumb { aspect-ratio: 16/10; max-height: 200px; }
.gc-rv__title--hero { font-size: 17px; }
.gc-rv__deck--hero { font-size: 13px; -webkit-line-clamp: 2; }
.gc-rv__hero-body { padding: 14px 16px 16px; }
}
/* ── Selezione testo globale: blu dark, arancione light ── */
::selection {
background: rgba(0, 173, 226, .3);
color: #fff;
}
::-moz-selection {
background: rgba(0, 173, 226, .3);
color: #fff;
}
[data-theme="light"] ::selection {
background: rgba(239, 158, 64, .3);
color: #1a1a1a;
}
[data-theme="light"] ::-moz-selection {
background: rgba(239, 158, 64, .3);
color: #1a1a1a;
}
/* ==========================================================================
HOMEPAGE — Layout editoriale premium
========================================================================== */
/* ══════════════════════════════════════════════════════════════════════════
ULTIME NOTIZIE — Magazine Grid Premium
3-col grid: featured (2col) + secondary (1col) + 3 standard cards
══════════════════════════════════════════════════════════════════════════ */
/* ── Grid container ──────────────────────────────────────────────────────── */
.gc-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ── FEATURED — post 1: overlay card, col 1-2 ────────────────────────────── */
.gc-news-featured {
grid-column: 1 / 3;
grid-row: 1;
position: relative;
border-radius: 12px;
overflow: hidden;
background: #111;
}
.gc-news-featured__link {
display: flex;
flex-direction: column;
justify-content: flex-end;
text-decoration: none;
color: #fff;
min-height: inherit;
}
.gc-news-featured__img {
position: absolute;
inset: 0;
z-index: 0;
}
.gc-news-featured__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .4s ease;
}
.gc-news-featured:hover .gc-news-featured__img img {
transform: scale(1.03);
}
.gc-news-featured__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding: 28px 24px;
background: linear-gradient(to top,
rgba(0,0,0,.9) 0%,
rgba(0,0,0,.55) 50%,
transparent 100%);
}
.gc-news-featured__cat {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #ef9e40;
}
.gc-news-featured__title {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-news-featured__deck {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.7);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-news-featured__time {
font-size: 12px;
color: rgba(255,255,255,.5);
}
/* ── SECONDARY — post 2: card verticale, col 3 ──────────────────────────── */
.gc-news-secondary {
grid-column: 3;
grid-row: 1;
border-radius: 12px;
overflow: hidden;
background: var(--bg-1, #1a1a1a);
border: 1px solid var(--border, #252525);
box-shadow: 0 2px 8px rgba(0,0,0,.12);
transition: transform .22s ease, box-shadow .22s ease;
}
.gc-news-secondary:hover {
transform: translateY(-4px);
box-shadow: 0 10px 32px rgba(0,0,0,.25);
}
.gc-news-secondary__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
}
.gc-news-secondary__img {
overflow: hidden;
flex-shrink: 0;
}
.gc-news-secondary__img img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.gc-news-secondary:hover .gc-news-secondary__img img {
transform: scale(1.04);
}
.gc-news-secondary__body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
flex: 1;
gap: 5px;
}
.gc-news-secondary__cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--color-news, #e25555);
}
.gc-news-secondary__title {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-news-secondary__time {
font-size: 11px;
color: rgba(255,255,255,.35);
margin-top: auto;
}
/* ── STANDARD CARDS — post 3-5: card row 2 ───────────────────────────────── */
.gc-news-card {
border-radius: 10px;
overflow: hidden;
background: var(--bg-1, #1a1a1a);
border: 1px solid var(--border, #252525);
box-shadow: 0 2px 6px rgba(0,0,0,.10);
transition: transform .22s ease, box-shadow .22s ease;
}
.gc-news-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.gc-news-card__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
}
.gc-news-card__img {
overflow: hidden;
flex-shrink: 0;
}
.gc-news-card__img img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.gc-news-card:hover .gc-news-card__img img {
transform: scale(1.04);
}
.gc-news-card__body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
flex: 1;
gap: 4px;
}
.gc-news-card__cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--color-news, #e25555);
}
.gc-news-card__title {
font-size: 14px;
font-weight: 600;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-news-card__time {
font-size: 11px;
color: rgba(255,255,255,.35);
margin-top: auto;
}
/* Post 6: nascosto desktop, visibile mobile */
.gc-news-card--sixth {
display: none;
}
/* ── Light mode ──────────────────────────────────────────────────────────── */
/* ── Light mode: sezione notizie homepage ─────────────────── */
/* Card secondaria e standard: sfondo bianco, bordo, ombre */
[data-theme="light"] .gc-news-secondary,
[data-theme="light"] .gc-news-card {
background: #ffffff;
border-color: rgba(0,0,0,.08);
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .gc-news-secondary:hover,
[data-theme="light"] .gc-news-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
/* Titoli: scuri */
[data-theme="light"] .gc-news-secondary__title,
[data-theme="light"] .gc-news-card__title,
[data-theme="light"] .gc-news-card__title a,
[data-theme="light"] .gc-news-secondary__title a {
color: #1e293b;
}
/* Date */
[data-theme="light"] .gc-news-secondary__time,
[data-theme="light"] .gc-news-card__time {
color: #94a3b8;
}
/* Category labels */
[data-theme="light"] .gc-news-secondary__cat,
[data-theme="light"] .gc-news-card__cat {
color: #c0392b;
}
/* Featured hero: overlay forte, testo SEMPRE bianco */
[data-theme="light"] .gc-news-featured { background: #111; }
[data-theme="light"] .gc-news-featured__cat { color: #ef9e40; }
[data-theme="light"] .gc-news-featured__link { color: #fff; }
[data-theme="light"] .gc-news-featured__title { color: #fff; }
[data-theme="light"] .gc-news-featured__deck { color: rgba(255,255,255,.75); }
[data-theme="light"] .gc-news-featured__time { color: rgba(255,255,255,.55); }
[data-theme="light"] .gc-news-featured__body {
background: linear-gradient(to top,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.60) 45%,
rgba(0,0,0,.15) 80%,
transparent 100%);
}
/* Recensioni verdict in light */
[data-theme="light"] .gc-hp-rv__verdict {
background: rgba(255,255,255,.80);
border-color: rgba(0,0,0,.10);
backdrop-filter: blur(8px);
}
[data-theme="light"] .gc-hp-rv__verdict--high .gc-hp-rv__verdict-val { color: #1a7a8a; }
[data-theme="light"] .gc-hp-rv__verdict--high .gc-hp-rv__verdict-sig { color: rgba(26, 122, 138, .55); }
[data-theme="light"] .gc-hp-rv__verdict--mid .gc-hp-rv__verdict-val { color: #8a6a1a; }
[data-theme="light"] .gc-hp-rv__verdict--mid .gc-hp-rv__verdict-sig { color: rgba(138, 106, 26, .55); }
[data-theme="light"] .gc-hp-rv__verdict--low .gc-hp-rv__verdict-val { color: #983030; }
[data-theme="light"] .gc-hp-rv__verdict--low .gc-hp-rv__verdict-sig { color: rgba(152, 48, 48, .55); }
/* Load-more grid */
[data-theme="light"] .gc-news-loaded-grid {
border-top-color: rgba(0,0,0,.08);
}
/* ── Desktop: featured min-height ──────────────────────────────────────── */
.gc-news-featured { min-height: 351px; }
/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.gc-news-grid { gap: 16px; }
.gc-news-featured { min-height: 280px; }
.gc-news-featured__title { font-size: 19px; }
.gc-news-featured__body { padding: 22px 20px; }
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* Grid → colonna singola, nessun residuo desktop */
.gc-news-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── Featured: full-width overlay ── */
.gc-news-featured {
grid-column: auto;
grid-row: auto;
width: 100%;
max-width: 100%;
min-height: 220px;
border-radius: 10px;
margin-bottom: 12px;
}
.gc-news-featured__link {
width: 100%;
min-height: 220px;
}
.gc-news-featured__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.gc-news-featured__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gc-news-featured__body {
padding: 16px;
}
.gc-news-featured__title {
font-size: 17px;
-webkit-line-clamp: 3;
}
.gc-news-featured__deck { display: none; }
/* ── Secondary: card orizzontale compatta ── */
.gc-news-secondary {
grid-column: auto;
grid-row: auto;
width: 100%;
max-width: 100%;
border-radius: 8px;
}
.gc-news-secondary__link {
flex-direction: row;
height: auto;
align-items: stretch;
}
.gc-news-secondary__img {
width: 120px !important;
min-width: 120px !important;
max-width: 120px !important;
height: 85px !important;
min-height: 85px !important;
max-height: 85px !important;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;
}
.gc-news-secondary__img img {
width: 120px !important;
height: 85px !important;
object-fit: cover;
display: block;
}
.gc-news-secondary__body {
padding: 10px 12px;
flex: 1;
min-width: 0;
}
.gc-news-secondary__title {
font-size: 14px;
-webkit-line-clamp: 2;
}
/* ── Standard cards: orizzontali compatte ── */
.gc-news-card {
width: 100%;
max-width: 100%;
border-radius: 8px;
}
.gc-news-card__link {
flex-direction: row;
height: auto;
align-items: stretch;
}
.gc-news-card__img {
width: 110px !important;
min-width: 110px !important;
max-width: 110px !important;
height: 78px !important;
min-height: 78px !important;
max-height: 78px !important;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;
}
.gc-news-card__img img {
width: 110px !important;
height: 78px !important;
object-fit: cover;
display: block;
}
.gc-news-card__body {
padding: 8px 12px;
flex: 1;
min-width: 0;
}
.gc-news-card__title {
font-size: 13px;
-webkit-line-clamp: 2;
}
/* Mostra il 6o post su mobile */
.gc-news-card--sixth { display: block; }
}
/* ── Load-more grid (articoli caricati via AJAX) ─────────────────────────── */
.gc-news-loaded-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.07);
}
.gc-news-loaded-card {
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.gc-news-loaded-card__thumb {
display: block;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 16/9;
background: rgba(255,255,255,.05);
}
.gc-news-loaded-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.gc-news-loaded-card:hover .gc-news-loaded-card__thumb img {
transform: scale(1.03);
}
.gc-news-loaded-card__body {
display: flex;
flex-direction: column;
gap: 3px;
}
.gc-news-loaded-card__cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--color-news, #ef9e40);
}
.gc-news-loaded-card__title {
font-size: 14px;
font-weight: 600;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-news-loaded-card__title a {
text-decoration: none;
color: inherit;
}
.gc-news-loaded-card__title a:hover {
color: var(--color-news, #ef9e40);
}
.gc-news-loaded-card__time {
font-size: 11px;
color: rgba(255,255,255,.35);
}
[data-theme="light"] .gc-news-loaded-grid {
border-top-color: rgba(0,0,0,.07);
}
[data-theme="light"] .gc-news-loaded-card__time {
color: rgba(0,0,0,.4);
}
@media (max-width: 680px) {
.gc-news-loaded-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.gc-news-loaded-card__title {
font-size: 13px;
}
}
@media (max-width: 400px) {
.gc-news-loaded-grid {
grid-template-columns: 1fr;
}
}
/* Load more button */
.gc-load-more-wrap {
margin-top: 20px;
text-align: center;
}
.gc-load-more {
padding: 10px 28px;
background: transparent;
border: 1px solid rgba(255,255,255,.18);
border-radius: 6px;
color: rgba(255,255,255,.7);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all .2s ease;
font-family: inherit;
}
.gc-load-more:hover:not(:disabled) {
border-color: var(--color-news, #ef9e40);
color: var(--color-news, #ef9e40);
}
.gc-load-more:disabled {
opacity: .5;
cursor: default;
}
/* Light mode overrides */
[data-theme="light"] .gc-news-hero__deck {
color: rgba(255,255,255,.7);
}
[data-theme="light"] .gc-news-hero__title {
color: #fff;
}
[data-theme="light"] .gc-news-hero__meta time {
color: rgba(255,255,255,.5);
}
[data-theme="light"] .gc-news-compact__time {
color: rgba(0,0,0,.4);
}
[data-theme="light"] .gc-news-compact {
border-bottom-color: rgba(0,0,0,.07);
}
[data-theme="light"] .gc-load-more {
border-color: rgba(0,0,0,.18);
color: rgba(0,0,0,.6);
}
/* Mobile: stack verticale, hero senza overlay */
@media (max-width: 680px) {
.gc-news-editorial {
grid-template-columns: 1fr;
gap: 16px;
}
.gc-news-hero {
min-height: 260px;
}
.gc-news-hero__title {
font-size: 18px;
}
.gc-news-hero__body {
padding: 20px 16px;
}
.gc-news-compact__thumb {
width: 64px;
height: 48px;
}
}
/* ── Badge trending giochi ───────────────────────────────────────────────── */
.gc-trend-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #fff;
background: #ef9e40;
line-height: 1.4;
pointer-events: none;
}
.gc-trend-badge--trending {
background: #ef4444;
}
.gc-trend-badge--in-crescita {
background: #22c55e;
}
.gc-trend-badge--pi-letto {
background: #3b82f6;
}
/* ── Sottotitolo articolo ── */
.single .entry-header .post-subtitle {
font-size: 1.2rem;
line-height: 1.2;
color: #7d7d7d;
font-weight: 400;
font-style: normal;
margin-bottom: 16px;
max-width: 640px;
}
/* ═══════════════════════════════════════════════════════════════
HOMEPAGE OVERRIDES — 14 aprile 2026
═══════════════════════════════════════════════════════════════ */
/* 1. Breaking bar — light mode trasparente */
[data-theme="light"] .gc-breaking-bar { background: transparent; }
/* 2. Radar — sfondo rimosso */
.gc-radar { padding: 40px 0; background: none !important; }
[data-theme="light"] .gc-radar { background: transparent !important; }
/* 3. Hub Spotlight */
.gc-hub-spotlight { border-radius: 50px; }
/* 4. Trending Games */
.gc-trending-games { border-radius: 50px; }
/* 5. Releases */
.gc-releases { border-radius: 50px; }
[data-theme="light"] .gc-releases { background: transparent; }
/* 6. Ranking cover */
.gc-ranking-item__cover { width: 48px; height: 64px; border-radius: 8px; object-fit: cover; }
/* ═══════════════════════════════════════════════════════════════
7. GAMEBACK — retro spotlight + filtri + griglia card
═══════════════════════════════════════════════════════════════ */
/* ─── Retro Spotlight Hero ─────────────────────────────────── */
.gc-retro-spotlight {
position: relative;
border-radius: 16px;
overflow: hidden;
margin-bottom: 24px;
min-height: 240px;
display: flex;
align-items: flex-end;
background: #0d1117;
text-decoration: none;
color: inherit;
transition: box-shadow .2s;
}
.gc-retro-spotlight:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.gc-retro-spotlight__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(2px) brightness(.45);
}
.gc-retro-spotlight__inner {
position: relative;
z-index: 1;
display: flex;
gap: 20px;
padding: 28px 24px;
align-items: flex-end;
width: 100%;
}
.gc-retro-spotlight__cover {
width: 120px;
height: 160px;
border-radius: 10px;
object-fit: cover;
border: 2px solid rgba(255,255,255,.15);
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.gc-retro-spotlight__body { flex: 1; }
.gc-retro-spotlight__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #a78bfa;
margin-bottom: 6px;
display: block;
}
.gc-retro-spotlight__title {
font-size: 22px;
font-weight: 800;
color: #fff;
line-height: 1.2;
margin: 0 0 6px;
}
.gc-retro-spotlight__meta {
font-size: 12px;
color: rgba(255,255,255,.65);
margin-bottom: 12px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.gc-retro-spotlight__mc {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
background: rgba(255,255,255,.12);
font-weight: 700;
font-size: 11px;
margin-left: 4px;
}
.gc-retro-spotlight__cta {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #a78bfa;
text-decoration: none;
transition: color .15s;
margin-top: 4px;
}
.gc-retro-spotlight:hover .gc-retro-spotlight__cta { color: #c4b5fd; }
/* ─── Gameback Filtri ──────────────────────────────────────── */
.gc-gameback-filters {
display: flex;
gap: 6px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.gc-gameback-filters__pill {
padding: 5px 14px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
color: #94a3b8;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: all .15s;
}
.gc-gameback-filters__pill:hover,
.gc-gameback-filters__pill.is-active {
background: #7c3aed;
border-color: #7c3aed;
color: #fff;
}
/* ─── Gameback Grid ────────────────────────────────────────── */
/* ─── Gameback grid: schede archivio ───────────────────────── */
.gc-gameback {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
/* ─── Scheda archivio: cover sx + dati dx ──────────────────── */
.gc-gb {
display: flex;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
transition: background .15s, border-color .15s;
align-items: flex-start;
min-height: 0;
}
.gc-gb:hover {
background: rgba(255,255,255,.04);
border-color: rgba(124,58,237,.25);
}
/* Cover: portrait compatta */
.gc-gb__cover {
width: 64px;
height: 85px;
border-radius: 5px;
overflow: hidden;
flex-shrink: 0;
background: #0a0d14;
}
.gc-gb__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Info: dati strutturati */
.gc-gb__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
/* Top row: anno + piattaforme — prima cosa che si legge */
.gc-gb__top {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.gc-gb__year {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
background: #7c3aed;
color: #fff;
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
flex-shrink: 0;
line-height: 1.3;
}
.gc-gb__plat {
display: inline-block;
padding: 2px 6px;
border-radius: 3px;
background: rgba(255,255,255,.08);
color: #94a3b8;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
line-height: 1.3;
}
.gc-gb__plat--more {
color: #64748b;
background: rgba(255,255,255,.04);
}
/* Titolo */
.gc-gb__title {
font-size: 13px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
line-height: 1.25;
margin: 1px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Developer */
.gc-gb__dev {
font-size: 11px;
color: #94a3b8;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Genere */
.gc-gb__genre {
font-size: 10px;
color: #64748b;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─── Light mode ───────────────────────────────────────────── */
[data-theme="light"] .gc-gb {
background: #fff;
border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .gc-gb:hover {
background: #f8fafc;
border-color: rgba(124,58,237,.20);
}
[data-theme="light"] .gc-gb__cover { background: #f1f5f9; }
[data-theme="light"] .gc-gb__title { color: #1e293b; }
[data-theme="light"] .gc-gb__plat { background: rgba(0,0,0,.05); color: #64748b; }
[data-theme="light"] .gc-gb__dev { color: #475569; }
[data-theme="light"] .gc-gb__genre { color: #94a3b8; }
/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
.gc-gameback { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.gc-gameback { grid-template-columns: 1fr; gap: 4px; }
.gc-gb { padding: 8px 10px; gap: 10px; }
.gc-gb__cover { width: 52px; height: 70px; }
.gc-gb__title { font-size: 12px; }
.gc-gb__plat:nth-child(n+4) { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
8. BIBBIA DEI CODICI v2 — griglia cover giochi + spoke pill
═══════════════════════════════════════════════════════════════ */
.gc-bibbia-games {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
padding: 0 var(--site-gutter, 20px);
}
.gc-bibbia-game {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
background: var(--bg-1, #1a1f2e);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gc-bibbia-game:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.35);
border-color: rgba(129,140,248,.3);
}
.gc-bibbia-game__cover {
position: relative;
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
background: #0d1117;
display: block;
}
.gc-bibbia-game__cover img {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
display: block; transition: transform .3s;
}
.gc-bibbia-game:hover .gc-bibbia-game__cover img { transform: scale(1.04); }
/* ── Badge contesto: pillola scura comune, accent solo nel pallino+bordo ── */
.gc-bibbia-badge {
position: absolute;
top: 8px; left: 8px;
display: inline-flex; align-items: center;
gap: 5px;
padding: 3px 8px 3px 7px;
font-size: 9px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
border-radius: 999px;
background: rgba(10,10,18,.66);
color: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
line-height: 1;
}
.gc-bibbia-badge::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.7);
flex-shrink: 0;
}
.gc-bibbia-badge--aggiornato_oggi { border-color: rgba(34,197,94,.55); }
.gc-bibbia-badge--aggiornato_oggi::before { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.gc-bibbia-badge--nuova_uscita { border-color: rgba(212,180,90,.55); }
.gc-bibbia-badge--nuova_uscita::before { background: #d4b45a; box-shadow: 0 0 8px rgba(212,180,90,.6); }
.gc-bibbia-badge--in_hype { border-color: rgba(239,68,68,.55); }
.gc-bibbia-badge--in_hype::before { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.6); }
.gc-bibbia-badge--hub_attivo { border-color: rgba(0,173,226,.55); }
.gc-bibbia-badge--hub_attivo::before { background: #00ade2; box-shadow: 0 0 8px rgba(0,173,226,.6); }
.gc-bibbia-badge--molto_seguito { border-color: rgba(157,92,224,.55); }
.gc-bibbia-badge--molto_seguito::before { background: #9d5ce0; box-shadow: 0 0 8px rgba(157,92,224,.6); }
.gc-bibbia-game__body {
padding: 12px 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.gc-bibbia-game__name {
font-size: 14.5px;
font-weight: 700;
color: var(--color-heading, #f1f5f9);
line-height: 1.25;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-bibbia-game__name:hover { color: #d4b45a; }
/* Lista spoke chip — inline con wrap, 2 chip per card normale.
Si dispongono in riga su desktop; vanno a capo solo se proprio non entrano. */
.gc-bibbia-game__spokes {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
.gc-bibbia-game__spokes li { margin: 0; min-width: 0; max-width: 100%; }
/* Chip base — colore default GOLD (brand). Le varianti --red/--blue/... aggiustano accent. */
.gc-bibbia-spoke {
display: inline-block;
position: relative;
padding: 3px 9px 3px 20px;
border-radius: 6px;
background: transparent;
border: 1px solid rgba(212,180,90,.28);
color: rgba(255,255,255,.82);
font-size: 10px;
font-weight: 600;
letter-spacing: .015em;
text-decoration: none;
line-height: 1.3;
transition: background .15s, border-color .15s, color .15s;
max-width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-bibbia-spoke::before {
content: "→";
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
color: rgba(212,180,90,.85);
font-size: 10.5px;
font-weight: 700;
line-height: 1;
transition: transform .2s, color .15s;
}
.gc-bibbia-spoke:hover::before { transform: translateY(-50%) translateX(2px); }
/* ── Varianti colore per categoria ── */
.gc-bibbia-spoke--gold { border-color: rgba(212,180,90,.28); }
.gc-bibbia-spoke--gold:hover {
background: rgba(212,180,90,.12);
border-color: rgba(212,180,90,.5);
color: #f0d27a;
}
.gc-bibbia-spoke--gold::before { color: rgba(212,180,90,.85); }
.gc-bibbia-spoke--gold:hover::before { color: #d4b45a; }
.gc-bibbia-spoke--red { border-color: rgba(239,68,68,.30); }
.gc-bibbia-spoke--red:hover {
background: rgba(239,68,68,.12);
border-color: rgba(239,68,68,.55);
color: #fca5a5;
}
.gc-bibbia-spoke--red::before { color: rgba(239,68,68,.85); }
.gc-bibbia-spoke--red:hover::before { color: #ef4444; }
.gc-bibbia-spoke--blue { border-color: rgba(0,173,226,.30); }
.gc-bibbia-spoke--blue:hover {
background: rgba(0,173,226,.12);
border-color: rgba(0,173,226,.55);
color: #7dd3fc;
}
.gc-bibbia-spoke--blue::before { color: rgba(0,173,226,.85); }
.gc-bibbia-spoke--blue:hover::before { color: #00ade2; }
.gc-bibbia-spoke--green { border-color: rgba(34,197,94,.30); }
.gc-bibbia-spoke--green:hover {
background: rgba(34,197,94,.12);
border-color: rgba(34,197,94,.55);
color: #86efac;
}
.gc-bibbia-spoke--green::before { color: rgba(34,197,94,.85); }
.gc-bibbia-spoke--green:hover::before { color: #22c55e; }
.gc-bibbia-spoke--purple { border-color: rgba(157,92,224,.32); }
.gc-bibbia-spoke--purple:hover {
background: rgba(157,92,224,.12);
border-color: rgba(157,92,224,.55);
color: #c4b5fd;
}
.gc-bibbia-spoke--purple::before { color: rgba(157,92,224,.85); }
.gc-bibbia-spoke--purple:hover::before { color: #9d5ce0; }
/* "+N contenuti": eyebrow muted, comunica "c'è di più" senza dominare */
.gc-bibbia-game__more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-top: 4px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(212,180,90,.7);
text-decoration: none;
align-self: flex-start;
transition: gap .2s, color .15s;
}
.gc-bibbia-game__more:hover { color: #d4b45a; gap: 6px; }
.gc-bibbia-game__more svg { opacity: .8; }
/* Light mode bibbia */
[data-theme="light"] .gc-bibbia__title { color: #1e293b; }
[data-theme="light"] .gc-bibbia-game { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .gc-bibbia-game:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); }
[data-theme="light"] .gc-bibbia-game__name { color: #1e293b; }
[data-theme="light"] .gc-bibbia-game__name:hover { color: #c3860f; }
/* Light mode: chip default neutro chiaro, varianti restano colorate */
[data-theme="light"] .gc-bibbia-spoke { color: #1e293b; }
[data-theme="light"] .gc-bibbia-spoke--gold { border-color: rgba(195,134,15,.28); }
[data-theme="light"] .gc-bibbia-spoke--gold:hover { background: rgba(195,134,15,.10); color: #8a6a1a; }
[data-theme="light"] .gc-bibbia-spoke--gold::before { color: #c3860f; }
[data-theme="light"] .gc-bibbia-spoke--red { border-color: rgba(220,38,38,.28); }
[data-theme="light"] .gc-bibbia-spoke--red:hover { background: rgba(220,38,38,.08); color: #b91c1c; }
[data-theme="light"] .gc-bibbia-spoke--red::before { color: #dc2626; }
[data-theme="light"] .gc-bibbia-spoke--blue { border-color: rgba(2,132,199,.28); }
[data-theme="light"] .gc-bibbia-spoke--blue:hover { background: rgba(2,132,199,.08); color: #0369a1; }
[data-theme="light"] .gc-bibbia-spoke--blue::before { color: #0284c7; }
[data-theme="light"] .gc-bibbia-spoke--green { border-color: rgba(22,163,74,.28); }
[data-theme="light"] .gc-bibbia-spoke--green:hover { background: rgba(22,163,74,.08); color: #15803d; }
[data-theme="light"] .gc-bibbia-spoke--green::before { color: #16a34a; }
[data-theme="light"] .gc-bibbia-spoke--purple { border-color: rgba(124,58,237,.28); }
[data-theme="light"] .gc-bibbia-spoke--purple:hover { background: rgba(124,58,237,.08); color: #6d28d9; }
[data-theme="light"] .gc-bibbia-spoke--purple::before { color: #7c3aed; }
[data-theme="light"] .gc-bibbia-game__more { color: #c3860f; }
[data-theme="light"] .gc-bibbia-game__more:hover { color: #8a6a1a; }
/* Responsive bibbia: 6 col → 3 → mobile slider orizzontale */
@media (max-width: 1100px) {
.gc-bibbia-games { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.gc-bibbia-games {
display: flex;
grid-template-columns: none;
overflow-x: auto;
gap: 10px;
padding: 0 16px 4px;
margin: 0 -16px;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gc-bibbia-games::-webkit-scrollbar { display: none; }
/* Card: si vede la 1ª intera + peek della 2ª */
.gc-bibbia-game {
flex: 0 0 64%;
max-width: 260px;
min-width: 220px;
scroll-snap-align: start;
}
/* Cover compatta: aspect 4/5 (era 3/4) + cap più stretto */
.gc-bibbia-game__cover {
aspect-ratio: 4 / 5;
max-height: 240px;
}
/* Body più compatto */
.gc-bibbia-game__body {
padding: 9px 10px 10px;
gap: 5px;
}
.gc-bibbia-game__name {
font-size: 13px;
line-height: 1.22;
-webkit-line-clamp: 2;
}
/* Spoke pills più basse, ellipsis garantita */
.gc-bibbia-game__spokes { gap: 3px; }
.gc-bibbia-spoke {
font-size: 9.5px;
padding: 2px 9px 2px 20px;
line-height: 1.25;
}
.gc-bibbia-spoke::before { left: 6px; font-size: 9.5px; }
/* "+N contenuti" più piccolo, vicino allo spoke sopra */
.gc-bibbia-game__more {
font-size: 9px;
padding-top: 2px;
gap: 3px;
}
.gc-bibbia-game__more svg { width: 9px; height: 9px; }
/* Badge ancora più discreto */
.gc-bibbia-badge {
font-size: 8.5px;
padding: 2px 7px 2px 6px;
top: 6px; left: 6px;
gap: 4px;
}
.gc-bibbia-badge::before { width: 4px; height: 4px; }
/* "Tutte le guide" CTA: cap width centrato, non full mastodontico */
.gc-bibbia__link {
max-width: 320px;
margin: 0 auto;
width: auto;
}
}
/* Phone stretto: ulteriore compressione */
@media (max-width: 380px) {
.gc-bibbia-game {
flex: 0 0 70%;
max-width: 240px;
min-width: 200px;
}
.gc-bibbia-game__cover { max-height: 210px; }
.gc-bibbia-spoke { font-size: 9px; padding: 2px 8px 2px 18px; }
.gc-bibbia-spoke::before { left: 5px; font-size: 9px; }
}
/* ═══════════════════════════════════════════════════════════════
9. GAMEBACK HUB v3 — Immersive: Cinematic hero + rich data
═══════════════════════════════════════════════════════════════ */
/* ─── Time Machine ──────────────────────────────────────────── */
.gc-tm {
display: flex;
align-items: stretch;
gap: 0;
margin-bottom: 20px;
border-radius: 14px;
overflow: hidden;
background: #0c0e16;
border: 1px solid rgba(124,58,237,.15);
box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
/* ── Pannello display (sx) ────────────────────────────────── */
.gc-tm__panel {
flex-shrink: 0;
width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 16px 18px;
background: linear-gradient(180deg, #0f1120, #0a0c16);
border-right: 1px solid rgba(124,58,237,.12);
}
.gc-tm__display {
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(124,58,237,.2);
background: #08090f;
}
.gc-tm__display-row {
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.gc-tm__display-row--dest {
background: rgba(124,58,237,.08);
}
.gc-tm__display-label {
font-size: 7px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: #475569;
}
.gc-tm__display-year {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 28px;
font-weight: 800;
color: #a78bfa;
line-height: 1.1;
text-shadow: 0 0 20px rgba(124,58,237,.4);
letter-spacing: .04em;
}
.gc-tm__display-divider {
height: 1px;
background: rgba(124,58,237,.12);
}
.gc-tm__display-row--now {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.gc-tm__display-now {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 11px;
font-weight: 600;
color: #64748b;
}
.gc-tm__display-time {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 11px;
font-weight: 700;
color: #22d3ee;
animation: gc-tm-blink 2s step-end infinite;
}
@keyframes gc-tm-blink {
50% { opacity: .4; }
}
.gc-tm__stats {
display: flex;
justify-content: space-between;
gap: 6px;
}
.gc-tm__stat {
font-size: 9px;
font-weight: 600;
color: #334155;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ── Track decadi + anni (dx) ─────────────────────────────── */
.gc-tm__track-wrap {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(124,58,237,.3) transparent;
-webkit-overflow-scrolling: touch;
padding: 12px 6px 12px 12px;
}
.gc-tm__track-wrap::-webkit-scrollbar { height: 3px; }
.gc-tm__track-wrap::-webkit-scrollbar-thumb { background: rgba(124,58,237,.35); border-radius: 2px; }
.gc-tm__track {
display: flex;
gap: 2px;
min-width: max-content;
}
/* Decade group */
.gc-tm__decade {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 8px 4px 10px;
border-left: 2px solid rgba(124,58,237,.12);
scroll-snap-align: start;
}
.gc-tm__decade:first-child { border-left: none; padding-left: 4px; }
.gc-tm__decade-label {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 9px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: .06em;
padding-left: 2px;
}
.gc-tm__decade-years {
display: flex;
gap: 4px;
}
/* Anno singolo */
.gc-tm__year {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 10px 8px;
border-radius: 8px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
text-decoration: none;
cursor: pointer;
transition: all .2s cubic-bezier(.4,0,.2,1);
position: relative;
}
.gc-tm__year-num {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 14px;
font-weight: 700;
color: #94a3b8;
line-height: 1;
letter-spacing: .02em;
}
.gc-tm__year-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #334155;
transition: all .2s;
}
.gc-tm__year-dot--lg {
width: 6px;
height: 6px;
background: #475569;
}
/* Hover */
.gc-tm__year:hover {
background: rgba(124,58,237,.12);
border-color: rgba(124,58,237,.35);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(124,58,237,.15);
}
.gc-tm__year:hover .gc-tm__year-num { color: #e9d5ff; }
.gc-tm__year:hover .gc-tm__year-dot { background: #a78bfa; box-shadow: 0 0 8px rgba(124,58,237,.5); }
/* Active */
.gc-tm__year--active {
background: linear-gradient(180deg, #7c3aed, #6d28d9);
border-color: #8b5cf6;
box-shadow: 0 0 24px rgba(124,58,237,.5), 0 0 0 2px rgba(124,58,237,.15), 0 8px 20px rgba(124,58,237,.25);
transform: translateY(-4px);
}
.gc-tm__year--active .gc-tm__year-num { color: #fff; font-weight: 800; }
.gc-tm__year--active .gc-tm__year-dot {
background: #22d3ee;
width: 6px;
height: 6px;
box-shadow: 0 0 10px rgba(34,211,238,.6);
animation: gc-tm-pulse 1.5s ease-in-out infinite;
}
@keyframes gc-tm-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(34,211,238,.4); }
50% { box-shadow: 0 0 14px rgba(34,211,238,.8); }
}
.gc-tm__year--active:hover {
background: linear-gradient(180deg, #6d28d9, #5b21b6);
box-shadow: 0 0 28px rgba(124,58,237,.6), 0 0 0 2px rgba(124,58,237,.2), 0 10px 24px rgba(124,58,237,.3);
}
/* Light mode time machine */
[data-theme="light"] .gc-tm {
background: #f8fafc;
border-color: rgba(124,58,237,.1);
box-shadow: 0 4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="light"] .gc-tm__panel {
background: linear-gradient(180deg, #f1f5f9, #e8ecf2);
border-right-color: rgba(124,58,237,.08);
}
[data-theme="light"] .gc-tm__display { background: #fff; border-color: rgba(124,58,237,.12); }
[data-theme="light"] .gc-tm__display-row--dest { background: rgba(124,58,237,.04); }
[data-theme="light"] .gc-tm__display-year { color: #7c3aed; text-shadow: none; }
[data-theme="light"] .gc-tm__display-now { color: #94a3b8; }
[data-theme="light"] .gc-tm__display-time { color: #0891b2; }
[data-theme="light"] .gc-tm__display-label { color: #94a3b8; }
[data-theme="light"] .gc-tm__stat { color: #94a3b8; }
[data-theme="light"] .gc-tm__decade { border-left-color: rgba(124,58,237,.08); }
[data-theme="light"] .gc-tm__decade-label { color: #94a3b8; }
[data-theme="light"] .gc-tm__year { background: #fff; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-tm__year-num { color: #64748b; }
[data-theme="light"] .gc-tm__year-dot { background: #cbd5e1; }
[data-theme="light"] .gc-tm__year-dot--lg { background: #94a3b8; }
[data-theme="light"] .gc-tm__year:hover {
background: rgba(124,58,237,.06);
border-color: rgba(124,58,237,.2);
box-shadow: 0 6px 20px rgba(124,58,237,.06);
}
[data-theme="light"] .gc-tm__year:hover .gc-tm__year-num { color: #6d28d9; }
[data-theme="light"] .gc-tm__year:hover .gc-tm__year-dot { background: #7c3aed; }
[data-theme="light"] .gc-tm__year--active {
background: linear-gradient(180deg, #7c3aed, #6d28d9);
border-color: #8b5cf6;
box-shadow: 0 0 24px rgba(124,58,237,.2), 0 0 0 2px rgba(124,58,237,.08);
}
[data-theme="light"] .gc-tm__year--active .gc-tm__year-num { color: #fff; }
[data-theme="light"] .gc-tm__year--active .gc-tm__year-dot { background: #22d3ee; }
/* ─── "Nel [anno] giocavamo a..." ───────────────────────────── */
.gc-year-section__title { font-size: 24px; letter-spacing: -.01em; }
.gc-year-section__count { font-size: 12px; color: #64748b; font-weight: 600; margin-left: 8px; }
/* ── HERO FEATURED (cinematografica) ────────────────────────── */
.gc-year-hero {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 0;
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
min-height: 340px;
transition: border-color .25s, box-shadow .25s;
}
.gc-year-hero:hover {
border-color: rgba(124,58,237,.35);
box-shadow: 0 12px 48px rgba(0,0,0,.3), 0 0 0 1px rgba(124,58,237,.1);
}
.gc-year-hero__cover {
position: relative;
display: block;
overflow: hidden;
background: #0a0d14;
}
.gc-year-hero__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.gc-year-hero:hover .gc-year-hero__cover img { transform: scale(1.05); }
.gc-year-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 50%, rgba(18,21,30,.6) 100%);
pointer-events: none;
}
.gc-year-hero__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px 36px;
gap: 6px;
background: linear-gradient(135deg, rgba(18,21,30,.95) 0%, rgba(18,21,30,.8) 100%);
}
.gc-year-hero__kicker {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #a78bfa;
margin-bottom: 4px;
}
.gc-year-hero__title {
font-size: 26px;
font-weight: 800;
color: #f1f5f9;
line-height: 1.15;
margin: 0;
letter-spacing: -.02em;
}
.gc-year-hero__title a { color: inherit; text-decoration: none; }
.gc-year-hero__meta {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
margin-top: 2px;
}
.gc-year-hero__dev {
font-size: 13px;
color: #64748b;
}
.gc-year-hero__cta {
display: inline-block;
margin-top: 10px;
padding: 8px 18px;
border-radius: 8px;
background: rgba(124,58,237,.15);
border: 1px solid rgba(124,58,237,.3);
font-size: 11px;
font-weight: 700;
color: #c4b5fd;
text-transform: uppercase;
letter-spacing: .04em;
transition: all .2s;
align-self: flex-start;
}
.gc-year-hero:hover .gc-year-hero__cta {
background: #7c3aed;
border-color: #7c3aed;
color: #fff;
box-shadow: 0 4px 16px rgba(124,58,237,.3);
}
/* Light mode hero */
[data-theme="light"] .gc-year-hero { background: #fff; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-year-hero:hover { box-shadow: 0 12px 48px rgba(0,0,0,.1); border-color: rgba(124,58,237,.2); }
[data-theme="light"] .gc-year-hero__overlay { background: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 100%); }
[data-theme="light"] .gc-year-hero__body { background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.9)); }
[data-theme="light"] .gc-year-hero__kicker { color: #7c3aed; }
[data-theme="light"] .gc-year-hero__title { color: #0f172a; }
[data-theme="light"] .gc-year-hero__meta { color: #64748b; }
[data-theme="light"] .gc-year-hero__dev { color: #94a3b8; }
[data-theme="light"] .gc-year-hero__cta { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); color: #7c3aed; }
[data-theme="light"] .gc-year-hero:hover .gc-year-hero__cta { background: #7c3aed; color: #fff; }
/* ── Card secondarie (pezzi di storia) ──────────────────────── */
.gc-year-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 10px;
}
.gc-year-card {
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
overflow: hidden;
transition: all .25s cubic-bezier(.4,0,.2,1);
}
.gc-year-card:hover {
border-color: rgba(124,58,237,.3);
box-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(124,58,237,.08);
transform: translateY(-4px) scale(1.02);
}
.gc-year-card__cover {
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #0a0d14;
}
.gc-year-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .25s;
}
.gc-year-card:hover .gc-year-card__cover img { transform: scale(1.06); }
.gc-year-card__no-cover {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 800;
color: #334155;
text-transform: uppercase;
}
/* Badge + hover CTA su cover */
.gc-year-card__badge {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
padding: 5px 10px;
border-radius: 6px;
background: rgba(124,58,237,.92);
color: #fff;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
text-align: center;
backdrop-filter: blur(4px);
opacity: 0;
transform: translateY(4px);
transition: opacity .2s, transform .2s;
}
.gc-year-card__hover-cta {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
padding: 5px 10px;
border-radius: 6px;
background: rgba(0,0,0,.7);
color: #e2e8f0;
font-size: 10px;
font-weight: 600;
text-align: center;
backdrop-filter: blur(4px);
opacity: 0;
transform: translateY(4px);
transition: opacity .2s, transform .2s;
}
.gc-year-card:hover .gc-year-card__badge,
.gc-year-card:hover .gc-year-card__hover-cta {
opacity: 1;
transform: translateY(0);
}
/* Badge takes priority over hover-cta */
.gc-year-card:hover .gc-year-card__badge ~ .gc-year-card__hover-cta { opacity: 0; }
.gc-year-card__info { padding: 10px 12px 12px; }
.gc-year-card__top {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 5px;
}
.gc-year-card__title {
font-size: 13px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
line-height: 1.25;
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-year-card__title a { color: inherit; text-decoration: none; }
.gc-year-card__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gc-year-card__genre { font-size: 10px; color: #7c3aed; font-weight: 600; }
.gc-year-card__dev { font-size: 10px; color: #64748b; }
.gc-year-card__dev::before { content: '\00B7'; margin-right: 6px; color: #334155; }
/* Light mode year cards */
[data-theme="light"] .gc-year-card { background: #fff; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-year-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); border-color: rgba(124,58,237,.2); }
[data-theme="light"] .gc-year-card__cover { background: #f1f5f9; }
[data-theme="light"] .gc-year-card__no-cover { color: #cbd5e1; }
[data-theme="light"] .gc-year-card__title { color: #1e293b; }
[data-theme="light"] .gc-year-card__dev { color: #94a3b8; }
/* ─── "Oggi nella storia" (prominente) ──────────────────────── */
.gc-today-section {
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid rgba(255,255,255,.04);
}
.gc-today-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.gc-today-header__left {
display: flex;
align-items: flex-start;
gap: 12px;
}
.gc-today-header__icon {
font-size: 28px;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.gc-today-header__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.gc-today-header__title {
font-size: 22px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0;
letter-spacing: -.01em;
}
.gc-today-header__sub {
font-size: 12px;
color: #64748b;
font-weight: 500;
font-style: italic;
}
.gc-today-header__date {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 15px;
font-weight: 700;
color: #7c3aed;
padding: 6px 14px;
background: rgba(124,58,237,.12);
border: 1px solid rgba(124,58,237,.2);
border-radius: 8px;
}
.gc-today-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.gc-today-card {
display: flex;
gap: 16px;
padding: 16px 18px;
border-radius: 12px;
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
transition: all .25s cubic-bezier(.4,0,.2,1);
align-items: flex-start;
}
.gc-today-card:hover {
background: rgba(255,255,255,.05);
border-color: rgba(124,58,237,.3);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.gc-today-card__cover {
width: 80px;
height: 107px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: #0a0d14;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.gc-today-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .2s;
}
.gc-today-card:hover .gc-today-card__cover img { transform: scale(1.04); }
.gc-today-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.gc-today-card__top {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.gc-today-card__title {
font-size: 15px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-today-card__meta { display: flex; gap: 6px; align-items: center; }
.gc-today-card__dev { font-size: 11px; color: #94a3b8; }
.gc-today-card__genre { font-size: 10px; color: #7c3aed; font-weight: 600; }
.gc-today-card__genre::before { content: '\00B7'; margin-right: 6px; color: #475569; }
.gc-today-card__badge {
font-size: 10px;
font-weight: 700;
color: #7c3aed;
text-transform: uppercase;
letter-spacing: .03em;
margin-top: 3px;
}
/* Light mode today */
[data-theme="light"] .gc-today-section { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-today-header__title { color: #1e293b; }
[data-theme="light"] .gc-today-header__date { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.12); }
[data-theme="light"] .gc-today-card { background: #fff; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-today-card:hover { background: #f8fafc; border-color: rgba(124,58,237,.2); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
[data-theme="light"] .gc-today-card__cover { background: #f1f5f9; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
[data-theme="light"] .gc-today-card__title { color: #1e293b; }
[data-theme="light"] .gc-today-card__dev { color: #64748b; }
[data-theme="light"] .gc-today-card__badge { color: #6d28d9; }
/* ─── Archivio articoli (database-style) ────────────────────── */
.gc-gb-article__game-info {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.gc-gb-archive .gc-card__meta span { font-size: 12px; color: #64748b; }
.gc-gb-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* ─── "Capisaldi del gaming" (editoriale) ───────────────────── */
.gc-pillars-gb { padding-top: 16px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.04); }
.gc-pillars-gb__header { display: flex; flex-direction: column; gap: 4px; }
.gc-pillars-gb__label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #a78bfa;
}
.gc-pillars-gb .gc-cat-section__title {
font-size: 24px;
letter-spacing: -.01em;
}
.gc-pillars-gb__feat {
margin-bottom: 20px;
}
.gc-pillars-gb__feat .gc-card__title--featured { font-size: 20px; }
.gc-pillars-gb__meta {
font-size: 12px;
color: #94a3b8;
margin-top: 2px;
}
.gc-pillars-gb__dev {
font-size: 12px;
color: #64748b;
}
.gc-gb__year--lg { padding: 3px 10px; font-size: 13px; }
[data-theme="light"] .gc-pillars-gb { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-pillars-gb__label { color: #7c3aed; }
[data-theme="light"] .gc-pillars-gb__meta { color: #64748b; }
[data-theme="light"] .gc-pillars-gb__dev { color: #94a3b8; }
/* ─── "Oggi X anni fa usciva..." (anniversari) ─────────────── */
.gc-anniv-section {
padding-top: 12px;
margin-top: 4px;
}
.gc-anniv-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.gc-anniv-header__left {
display: flex;
align-items: flex-start;
gap: 10px;
}
.gc-anniv-header__icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
margin-top: 1px;
}
.gc-anniv-header__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.gc-anniv-header__kicker {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #ef9e40;
}
.gc-anniv-header__title {
font-size: 18px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0;
letter-spacing: -.01em;
}
.gc-anniv-header__date {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 13px;
font-weight: 700;
color: #ef9e40;
padding: 4px 12px;
background: rgba(239,158,64,.1);
border: 1px solid rgba(239,158,64,.2);
border-radius: 8px;
}
/* Griglia anniversari: 3 card compatte in riga */
.gc-anniv-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gc-anniv-card {
display: flex;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
background: var(--bg-1, #12151e);
border: 1px solid rgba(239,158,64,.08);
text-decoration: none;
transition: all .25s cubic-bezier(.4,0,.2,1);
align-items: flex-start;
}
.gc-anniv-card:hover {
background: rgba(239,158,64,.04);
border-color: rgba(239,158,64,.25);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
/* Cover con badge "X anni fa" */
.gc-anniv-card__cover {
width: 64px;
height: 85px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
background: #0a0d14;
position: relative;
}
.gc-anniv-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .2s;
}
.gc-anniv-card:hover .gc-anniv-card__cover img { transform: scale(1.05); }
.gc-anniv-card__ago {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3px 0;
background: rgba(239,158,64,.9);
color: #fff;
font-size: 8px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
text-align: center;
line-height: 1.3;
}
/* Body */
.gc-anniv-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.gc-anniv-card__top {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.gc-anniv-card__title {
font-size: 13px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-anniv-card__dev {
font-size: 10px;
color: #64748b;
}
.gc-anniv-card__badge {
font-size: 9px;
font-weight: 700;
color: #ef9e40;
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
}
/* Light mode anniversari */
[data-theme="light"] .gc-anniv-header__title { color: #1e293b; }
[data-theme="light"] .gc-anniv-header__date { background: rgba(239,158,64,.06); border-color: rgba(239,158,64,.15); }
[data-theme="light"] .gc-anniv-card { background: #fff; border-color: rgba(239,158,64,.08); }
[data-theme="light"] .gc-anniv-card:hover { background: rgba(239,158,64,0.05); border-color: rgba(239,158,64,.2); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
[data-theme="light"] .gc-anniv-card__cover { background: #f1f5f9; }
[data-theme="light"] .gc-anniv-card__title { color: #1e293b; }
[data-theme="light"] .gc-anniv-card__dev { color: #94a3b8; }
[data-theme="light"] .gc-anniv-card__badge { color: #ef9e40; }
/* ─── Stats bar + Random button ─────────────────────────────── */
.gc-gb-stats {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
margin-bottom: 8px;
border-radius: 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.04);
}
.gc-gb-stats__counters {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.gc-gb-stats__item { display: flex; flex-direction: column; gap: 1px; }
.gc-gb-stats__num {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 20px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
line-height: 1.2;
}
.gc-gb-stats__label {
font-size: 9px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: .06em;
}
.gc-gb-stats__sep {
width: 1px;
height: 28px;
background: rgba(255,255,255,.06);
flex-shrink: 0;
}
.gc-gb-stats__random {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
border: 1px solid rgba(124,58,237,.3);
background: rgba(124,58,237,.08);
color: #c4b5fd;
cursor: pointer;
transition: all .2s;
flex-shrink: 0;
}
.gc-gb-stats__random:hover {
background: #7c3aed;
border-color: #7c3aed;
color: #fff;
box-shadow: 0 4px 16px rgba(124,58,237,.3);
transform: translateY(-1px);
}
.gc-gb-stats__random-icon { font-size: 18px; line-height: 1; }
.gc-gb-stats__random-text {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.gc-gb-stats__random-year {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 16px;
font-weight: 800;
color: #a78bfa;
min-width: 40px;
text-align: center;
}
.gc-gb-stats__random:hover .gc-gb-stats__random-year { color: #fff; }
[data-theme="light"] .gc-gb-stats { background: #f8fafc; border-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-gb-stats__num { color: #1e293b; }
[data-theme="light"] .gc-gb-stats__label { color: #94a3b8; }
[data-theme="light"] .gc-gb-stats__sep { background: rgba(0,0,0,.06); }
[data-theme="light"] .gc-gb-stats__random { background: rgba(124,58,237,.04); border-color: rgba(124,58,237,.15); color: #7c3aed; }
[data-theme="light"] .gc-gb-stats__random:hover { background: #7c3aed; color: #fff; }
[data-theme="light"] .gc-gb-stats__random-year { color: #7c3aed; }
/* ─── Gioco del giorno (Spotlight) ──────────────────────────── */
.gc-spot-section { padding-top: 12px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.04); }
.gc-spot {
display: grid;
grid-template-columns: 200px 1fr;
border-radius: 14px;
overflow: hidden;
background: var(--bg-1, #12151e);
border: 1px solid rgba(34,211,238,.1);
transition: border-color .2s, box-shadow .2s;
}
.gc-spot:hover {
border-color: rgba(34,211,238,.25);
box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.gc-spot__visual {
position: relative;
overflow: hidden;
background: #0a0d14;
}
.gc-spot__cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
transition: transform .3s;
}
.gc-spot:hover .gc-spot__cover { transform: scale(1.04); }
.gc-spot__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(20px) brightness(.4);
z-index: 0;
}
.gc-spot__overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(90deg, transparent 60%, rgba(18,21,30,.5) 100%);
}
.gc-spot__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 24px 28px;
gap: 6px;
}
.gc-spot__kicker {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #22d3ee;
}
.gc-spot__title {
font-size: 20px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
line-height: 1.2;
margin: 0;
}
.gc-spot__title a { color: inherit; text-decoration: none; }
.gc-spot__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 2px 0; }
.gc-spot__genre { font-size: 11px; color: #22d3ee; font-weight: 600; }
.gc-spot__dev { font-size: 12px; color: #64748b; }
.gc-spot__desc {
font-size: 12px;
color: #94a3b8;
line-height: 1.5;
margin: 2px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-spot__cta {
display: inline-block;
margin-top: 6px;
padding: 7px 16px;
border-radius: 8px;
background: rgba(34,211,238,.1);
border: 1px solid rgba(34,211,238,.2);
font-size: 11px;
font-weight: 700;
color: #22d3ee;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .03em;
align-self: flex-start;
transition: all .2s;
}
.gc-spot:hover .gc-spot__cta {
background: #22d3ee;
border-color: #22d3ee;
color: #0f172a;
}
[data-theme="light"] .gc-spot-section { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-spot { background: #fff; border-color: rgba(34,211,238,.08); }
[data-theme="light"] .gc-spot:hover { box-shadow: 0 8px 32px rgba(0,0,0,.06); }
[data-theme="light"] .gc-spot__kicker { color: #0891b2; }
[data-theme="light"] .gc-spot__title { color: #0f172a; }
[data-theme="light"] .gc-spot__genre { color: #0891b2; }
[data-theme="light"] .gc-spot__dev { color: #94a3b8; }
[data-theme="light"] .gc-spot__desc { color: #64748b; }
[data-theme="light"] .gc-spot__cta { background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.15); color: #0891b2; }
[data-theme="light"] .gc-spot:hover .gc-spot__cta { background: #0891b2; color: #fff; }
/* ─── Hall of Fame ──────────────────────────────────────────── */
.gc-hof-section { padding-top: 12px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.04); }
.gc-hof-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.gc-hof-header__left { display: flex; align-items: flex-start; gap: 10px; }
.gc-hof-header__icon { font-size: 26px; line-height: 1; }
.gc-hof-header__text { display: flex; flex-direction: column; gap: 2px; }
.gc-hof-header__kicker {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #ef9e40;
}
.gc-hof-header__title {
font-size: 20px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0;
}
.gc-hof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.gc-hof-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.04);
text-decoration: none;
transition: all .2s;
}
.gc-hof-card:hover {
border-color: rgba(239,158,64,.2);
background: rgba(239,158,64,.04);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.gc-hof-card__rank {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 14px;
font-weight: 800;
color: #ef9e40;
flex-shrink: 0;
width: 28px;
text-align: center;
}
.gc-hof-card__cover {
width: 44px;
height: 58px;
border-radius: 5px;
overflow: hidden;
flex-shrink: 0;
background: #0a0d14;
}
.gc-hof-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-hof-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gc-hof-card__title {
font-size: 12px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-hof-card__meta { display: flex; align-items: center; gap: 6px; }
.gc-hof-card__score {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 11px;
font-weight: 800;
color: #22c55e;
background: rgba(34,197,94,.1);
padding: 1px 6px;
border-radius: 4px;
}
.gc-hof-card__year { font-size: 10px; color: #64748b; font-weight: 600; }
.gc-hof-card__plat { font-size: 9px; color: #475569; }
[data-theme="light"] .gc-hof-section { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-hof-header__title { color: #1e293b; }
[data-theme="light"] .gc-hof-card { background: #fff; border-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-hof-card:hover { background: rgba(239,158,64,0.05); border-color: rgba(239,158,64,.15); }
[data-theme="light"] .gc-hof-card__title { color: #1e293b; }
[data-theme="light"] .gc-hof-card__score { background: rgba(34,197,94,.08); }
/* ─── Esplora per piattaforma ───────────────────────────────── */
.gc-gb-plats {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0;
overflow: hidden;
}
.gc-gb-plats__label {
flex-shrink: 0;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #475569;
}
.gc-gb-plats__track {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.gc-gb-plats__track::-webkit-scrollbar { display: none; }
.gc-gb-plats__chip {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
transition: all .2s;
}
.gc-gb-plats__chip:hover {
background: rgba(124,58,237,.1);
border-color: rgba(124,58,237,.3);
transform: translateY(-1px);
}
.gc-gb-plats__name { font-size: 12px; font-weight: 600; color: #cbd5e1; }
.gc-gb-plats__count {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
color: #475569;
background: rgba(255,255,255,.04);
padding: 1px 6px;
border-radius: 10px;
}
.gc-gb-plats__chip:hover .gc-gb-plats__name { color: #e9d5ff; }
.gc-gb-plats__chip:hover .gc-gb-plats__count { color: #a78bfa; }
[data-theme="light"] .gc-gb-plats__chip { background: #f1f5f9; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-gb-plats__chip:hover { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.15); }
[data-theme="light"] .gc-gb-plats__name { color: #475569; }
[data-theme="light"] .gc-gb-plats__count { color: #94a3b8; background: rgba(0,0,0,.04); }
[data-theme="light"] .gc-gb-plats__chip:hover .gc-gb-plats__name { color: #6d28d9; }
/* ─── Responsive GameBack Hub ───────────────────────────────── */
@media (max-width: 900px) {
.gc-gb-stats { flex-direction: column; gap: 12px; align-items: stretch; }
.gc-gb-stats__counters { justify-content: space-around; }
.gc-gb-stats__random { align-self: center; }
.gc-spot { grid-template-columns: 160px 1fr; }
.gc-hof-grid { grid-template-columns: repeat(2, 1fr); }
.gc-tm { flex-direction: column; }
.gc-tm__panel { width: 100%; flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; border-right: none; border-bottom: 1px solid rgba(124,58,237,.12); }
.gc-tm__display { flex: 1; }
.gc-tm__display-row--dest { flex-direction: row; align-items: baseline; gap: 8px; }
.gc-tm__display-year { font-size: 22px; }
.gc-tm__stats { flex-direction: column; gap: 2px; }
.gc-year-hero { grid-template-columns: 1fr 1fr; min-height: 280px; }
.gc-year-hero__body { padding: 24px; }
.gc-year-hero__title { font-size: 22px; }
.gc-year-grid { grid-template-columns: repeat(3, 1fr); }
.gc-gb-archive-grid { grid-template-columns: repeat(2, 1fr); }
.gc-today-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gc-anniv-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 640px) {
.gc-tm__panel { flex-direction: column; gap: 8px; padding: 10px 14px; }
.gc-tm__display-year { font-size: 20px; }
.gc-tm__track-wrap { padding: 10px 4px 10px 8px; }
.gc-tm__year { padding: 8px 8px 6px; }
.gc-tm__year-num { font-size: 12px; }
.gc-tm__decade { padding: 4px 6px 4px 8px; }
.gc-year-hero { grid-template-columns: 1fr; min-height: auto; }
.gc-year-hero__cover { aspect-ratio: 16 / 10; }
.gc-year-hero__overlay { background: linear-gradient(180deg, transparent 40%, rgba(18,21,30,.7) 100%); }
.gc-year-hero__body { padding: 20px; }
.gc-year-hero__title { font-size: 20px; }
.gc-year-hero__kicker { font-size: 9px; }
.gc-year-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gc-year-card__info { padding: 8px 10px 10px; }
.gc-year-card__title { font-size: 12px; }
.gc-today-header { flex-direction: column; gap: 8px; align-items: flex-start; }
.gc-today-header__title { font-size: 18px; }
.gc-today-grid { grid-template-columns: 1fr; }
.gc-today-card { padding: 14px; gap: 14px; }
.gc-today-card__cover { width: 68px; height: 91px; }
.gc-today-card__title { font-size: 14px; }
.gc-anniv-grid { grid-template-columns: 1fr; }
.gc-anniv-card { padding: 10px 12px; gap: 10px; }
.gc-anniv-card__cover { width: 56px; height: 75px; }
.gc-anniv-header__title { font-size: 16px; }
.gc-gb-stats__counters { gap: 12px; }
.gc-gb-stats__num { font-size: 16px; }
.gc-gb-stats__sep { height: 20px; }
.gc-spot { grid-template-columns: 1fr; }
.gc-spot__visual { aspect-ratio: 16 / 10; }
.gc-spot__body { padding: 18px; }
.gc-spot__title { font-size: 17px; }
.gc-hof-grid { grid-template-columns: 1fr; }
.gc-hof-card__cover { width: 38px; height: 50px; }
.gc-gb-plats { flex-direction: column; align-items: flex-start; gap: 8px; }
.gc-gb-archive-grid { grid-template-columns: 1fr; gap: 12px; }
.gc-year-section__title { font-size: 19px; }
.gc-pillars-gb .gc-cat-section__title { font-size: 20px; }
}
/* ==========================================================================
MENU — Tendina editoriale Recensioni (mega-menu v11 editoriale)
PHP: inc/gc-nav-reviews.php — markup .gc-nav-rv-*
========================================================================== */
/* contenitore */
.gc-has-dropdown { position: relative; }
/* Chevron dentro il link */
.gc-nav-rv-chevron {
display: inline-block;
margin-left: 6px;
vertical-align: middle;
opacity: .55;
transition: transform .2s ease, opacity .2s;
flex-shrink: 0;
}
.gc-has-dropdown:hover .gc-nav-rv-chevron,
.gc-has-dropdown:focus-within .gc-nav-rv-chevron {
transform: rotate(180deg);
opacity: .9;
}
.main-navigation.toggled .gc-nav-rv-chevron { display: none; }
/* Tendina */
.gc-nav-rv-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
width: 620px;
background: rgba(10, 13, 21, 0.97);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
box-shadow: 0 24px 70px rgba(0,0,0,.70), 0 4px 16px rgba(0,0,0,.35);
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease 0s, visibility .18s ease .08s, transform .18s ease 0s;
z-index: 1100;
}
@supports not (backdrop-filter: blur(1px)) {
.gc-nav-rv-dropdown { background: #0b0e16; }
}
.gc-nav-rv-dropdown::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 6px;
background: rgba(10, 13, 21, 0.97);
border-left: 1px solid rgba(255,255,255,.10);
border-top: 1px solid rgba(255,255,255,.10);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Apertura */
.gc-has-dropdown:not(.gc-dropdown-escaped):hover .gc-nav-rv-dropdown,
.gc-has-dropdown:not(.gc-dropdown-escaped):focus-within .gc-nav-rv-dropdown {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(-50%) translateY(0);
transition: opacity .15s ease 0s, visibility .15s ease 0s, transform .15s ease 0s;
}
.main-navigation.toggled .gc-nav-rv-dropdown { display: none !important; }
/* Reset parent theme */
.main-navigation .gc-nav-rv-compact-list {
display: block !important;
flex-direction: unset !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.main-navigation .gc-nav-rv-feat,
.main-navigation .gc-nav-rv-compact,
.main-navigation .gc-nav-rv-cta {
text-transform: none !important;
letter-spacing: 0 !important;
}
/* HEADER "Recensioni" */
.gc-nav-rv-header {
padding: 14px 22px 0 !important;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.gc-nav-rv-header-title {
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.38) !important;
line-height: 1 !important;
margin: 0 !important;
}
/* INNER: featured sopra + lista sotto */
.gc-nav-rv-inner {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
align-items: stretch;
}
/* FEATURED: grid 60% testo + 40% immagine */
.gc-nav-rv-feat {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
gap: 0 !important;
flex-direction: initial !important;
padding: 16px 20px 16px 22px !important;
margin: 12px 14px 10px !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 60%);
text-decoration: none !important;
overflow: hidden;
box-sizing: border-box;
transition: background .2s ease, border-color .2s ease !important;
}
.gc-nav-rv-feat:hover {
background: rgba(255,255,255,.05) !important;
border-color: rgba(255,255,255,.14) !important;
}
/* FEATURED — colonna testo (sinistra) */
.gc-nav-rv-feat-text {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: flex-start !important;
min-width: 0 !important;
padding-right: 14px !important;
gap: 0 !important;
}
.gc-nav-rv-feat-badge {
display: inline-block !important;
align-self: flex-start !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: #5cc8db !important;
background: rgba(92,200,219,.10) !important;
border: 1px solid rgba(92,200,219,.30) !important;
border-radius: 4px !important;
padding: 3px 8px !important;
line-height: 1 !important;
margin: 0 0 12px !important;
}
.gc-nav-rv-feat-headline {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 0 0 10px !important;
width: 100%;
min-width: 0;
}
.gc-nav-rv-feat-score {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
font-family: "Inter", system-ui, sans-serif !important;
font-size: 20px !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
line-height: 1 !important;
color: rgba(255,255,255,.30) !important;
background: none !important;
padding: 4px 0 0 !important;
margin: 0 !important;
text-transform: none !important;
}
.gc-nav-rv-feat-score--high { color: #5cc8db !important; }
.gc-nav-rv-feat-score--mid { color: #d4b45a !important; }
.gc-nav-rv-feat-score--low { color: #c06060 !important; }
.gc-nav-rv-feat-title {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #eaf0f6 !important;
line-height: 1.3 !important;
letter-spacing: -.01em !important;
text-transform: none !important;
margin: 0 !important;
transition: color .12s;
}
.gc-nav-rv-feat:hover .gc-nav-rv-feat-title { color: #ffffff !important; }
.gc-nav-rv-feat-meta {
font-size: 10px !important;
font-weight: 600 !important;
color: rgba(255,255,255,.42) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 100%;
margin: 0 !important;
}
/* FEATURED — colonna immagine (destra) */
.gc-nav-rv-feat-img {
position: relative !important;
border-radius: 10px !important;
overflow: hidden !important;
min-height: 130px !important;
background: rgba(255,255,255,.04);
aspect-ratio: 16 / 10;
}
.gc-nav-rv-feat-img img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transform: scale(1.02);
transition: transform .35s ease;
filter: saturate(1.05);
}
.gc-nav-rv-feat:hover .gc-nav-rv-feat-img img { transform: scale(1.06); }
.gc-nav-rv-feat-img-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to right,
rgba(10, 13, 21, 0.45) 0%,
rgba(10, 13, 21, 0.12) 45%,
rgba(10, 13, 21, 0.0) 100%
);
pointer-events: none;
}
/* LISTA COMPACT (dopo featured) */
.gc-nav-rv-list-col {
padding: 0 14px !important;
margin: 0 !important;
flex: none !important;
display: block !important;
}
.gc-nav-rv-compact-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.gc-nav-rv-compact-list li {
position: static;
display: block;
margin: 0 !important;
padding: 0 !important;
}
.gc-nav-rv-compact-list li + li {
border-top: 1px solid rgba(255,255,255,.06);
}
.gc-nav-rv-compact {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 3px !important;
padding: 10px 8px !important;
border-radius: 8px !important;
text-decoration: none !important;
transition: background .15s ease !important;
width: 100%;
box-sizing: border-box;
}
.gc-nav-rv-compact:hover { background: rgba(255,255,255,.05) !important; }
.gc-nav-rv-compact-headline {
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
width: 100%;
min-width: 0;
}
.gc-nav-rv-compact-score {
flex-shrink: 0 !important;
font-size: 13px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.45) !important;
line-height: 1 !important;
letter-spacing: -.02em !important;
margin: 0 !important;
}
.gc-nav-rv-compact-score--high { color: #5cc8db !important; }
.gc-nav-rv-compact-score--mid { color: #d4b45a !important; }
.gc-nav-rv-compact-score--low { color: #c06060 !important; }
.gc-nav-rv-compact-title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #c4ceda !important;
line-height: 1.35 !important;
text-transform: none !important;
letter-spacing: 0 !important;
transition: color .15s;
}
.gc-nav-rv-compact:hover .gc-nav-rv-compact-title { color: #eaf0f6 !important; }
.gc-nav-rv-compact-meta {
font-size: 10px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.35) !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 0 0 22px !important;
}
/* FOOTER CTA */
.gc-nav-rv-footer {
padding: 12px 22px 14px !important;
margin-top: 10px !important;
border-top: 1px solid rgba(255,255,255,.07) !important;
display: block !important;
}
.gc-nav-rv-cta {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
width: 100% !important;
padding: 2px 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
color: rgba(255,255,255,.55) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: .01em !important;
text-transform: none !important;
transition: color .2s, transform .2s ease !important;
}
.gc-nav-rv-cta:hover {
color: #5cc8db !important;
transform: translateX(2px);
background: none !important;
border: none !important;
}
.gc-nav-rv-cta svg {
flex-shrink: 0;
transition: transform .2s, opacity .2s;
opacity: .8;
}
.gc-nav-rv-cta:hover svg {
transform: translateX(3px);
opacity: 1;
}
/* LIGHT MODE */
[data-theme="light"] .gc-nav-rv-dropdown {
background: rgba(255,255,255,.98);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-color: rgba(15,23,32,.10);
box-shadow: 0 20px 60px rgba(15,23,32,.16), 0 4px 12px rgba(15,23,32,.08);
}
[data-theme="light"] .gc-nav-rv-dropdown::before {
background: rgba(255,255,255,.98);
border-left-color: rgba(15,23,32,.10);
border-top-color: rgba(15,23,32,.10);
}
[data-theme="light"] .gc-nav-rv-header-title { color: rgba(15,23,32,.42) !important; }
[data-theme="light"] .gc-nav-rv-feat {
background: linear-gradient(135deg, rgba(15,23,32,.02) 0%, transparent 60%) !important;
border-color: rgba(15,23,32,.08) !important;
}
[data-theme="light"] .gc-nav-rv-feat:hover {
background: rgba(15,23,32,.03) !important;
border-color: rgba(15,23,32,.14) !important;
}
[data-theme="light"] .gc-nav-rv-feat-badge {
color: #ef9e40 !important;
background: rgba(239,158,64,.10) !important;
border-color: rgba(239,158,64,.35) !important;
}
[data-theme="light"] .gc-nav-rv-feat-title { color: #0b0f14 !important; }
[data-theme="light"] .gc-nav-rv-feat:hover .gc-nav-rv-feat-title { color: #000 !important; }
[data-theme="light"] .gc-nav-rv-feat-score { color: rgba(15,23,32,.30) !important; }
[data-theme="light"] .gc-nav-rv-feat-score--high { color: #00ade2 !important; }
[data-theme="light"] .gc-nav-rv-feat-score--mid { color: #ef9e40 !important; }
[data-theme="light"] .gc-nav-rv-feat-score--low { color: #b03030 !important; }
[data-theme="light"] .gc-nav-rv-feat-meta { color: rgba(15,23,32,.48) !important; }
[data-theme="light"] .gc-nav-rv-feat-img { background: rgba(15,23,32,.04); }
[data-theme="light"] .gc-nav-rv-feat-img-overlay {
background: linear-gradient(
to right,
rgba(255,255,255,0.35) 0%,
rgba(255,255,255,0.08) 45%,
rgba(255,255,255,0.0) 100%
);
}
[data-theme="light"] .gc-nav-rv-compact-list li + li { border-top-color: rgba(15,23,32,.06); }
[data-theme="light"] .gc-nav-rv-compact:hover { background: rgba(15,23,32,.035) !important; }
[data-theme="light"] .gc-nav-rv-compact-title { color: #2a3440 !important; }
[data-theme="light"] .gc-nav-rv-compact:hover .gc-nav-rv-compact-title { color: #0b0f14 !important; }
[data-theme="light"] .gc-nav-rv-compact-score { color: rgba(15,23,32,.45) !important; }
[data-theme="light"] .gc-nav-rv-compact-score--high { color: #00ade2 !important; }
[data-theme="light"] .gc-nav-rv-compact-score--mid { color: #ef9e40 !important; }
[data-theme="light"] .gc-nav-rv-compact-score--low { color: #b03030 !important; }
[data-theme="light"] .gc-nav-rv-compact-meta { color: rgba(15,23,32,.42) !important; }
[data-theme="light"] .gc-nav-rv-footer { border-top-color: rgba(15,23,32,.08) !important; }
[data-theme="light"] .gc-nav-rv-cta { color: rgba(15,23,32,.55) !important; }
[data-theme="light"] .gc-nav-rv-cta:hover { color: #00ade2 !important; }
/* ═══════════════════════════════════════════════════════════════
10. GUIDE HUB — Hub navigabile giochi + spoke
═══════════════════════════════════════════════════════════════ */
/* ─── Hero ──────────────────────────────────────────────────── */
.gc-guide-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 32px 0 24px;
border-bottom: 1px solid rgba(255,255,255,.04);
margin-bottom: 20px;
}
.gc-guide-hero__text { max-width: 560px; }
.gc-guide-hero__kicker {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #22d3ee;
margin-bottom: 6px;
display: block;
}
.gc-guide-hero__title {
font-size: 28px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0 0 8px;
letter-spacing: -.02em;
}
.gc-guide-hero__desc {
font-size: 14px;
color: #94a3b8;
line-height: 1.5;
margin: 0;
}
.gc-guide-hero__stats {
display: flex;
gap: 24px;
flex-shrink: 0;
}
.gc-guide-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.gc-guide-hero__stat-num {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 22px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
}
.gc-guide-hero__stat-label {
font-size: 9px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: .06em;
}
[data-theme="light"] .gc-guide-hero { border-bottom-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-hero__kicker { color: #0891b2; }
[data-theme="light"] .gc-guide-hero__title { color: #0f172a; }
[data-theme="light"] .gc-guide-hero__desc { color: #64748b; }
[data-theme="light"] .gc-guide-hero__stat-num { color: #0f172a; }
/* ─── Filtri chip/pill ───────────────────────────────────────── */
.gc-gf {
padding: 16px 20px 14px;
margin-bottom: 12px;
position: sticky;
top: 64px;
z-index: 50;
background: rgba(15,17,24,.85);
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Search toggle + input */
.gc-gf__search-toggle {
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.06);
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .2s;
font-size: 16px;
line-height: 1;
padding: 0;
}
.gc-gf__search-toggle:hover,
.gc-gf__search-toggle--active {
background: rgba(34,211,238,.08);
border-color: rgba(34,211,238,.25);
color: #22d3ee;
}
.gc-gf__search {
position: relative;
overflow: hidden;
transition: width .25s ease, opacity .2s;
}
.gc-gf__search--hidden {
width: 0;
opacity: 0;
pointer-events: none;
}
.gc-gf__search--visible {
width: 220px;
opacity: 1;
pointer-events: auto;
}
.gc-gf__input {
width: 100%;
padding: 7px 12px;
border-radius: 8px;
border: 1px solid rgba(34,211,238,.25);
background: rgba(34,211,238,.04);
color: var(--color-heading, #e2e8f0);
font-size: 13px;
font-weight: 500;
transition: border-color .2s, background .2s;
}
.gc-gf__input:focus {
outline: none;
border-color: rgba(34,211,238,.5);
background: rgba(34,211,238,.06);
}
.gc-gf__input::placeholder { color: #475569; }
/* Desktop chip rows */
.gc-gf__desktop {
display: flex;
flex-direction: column;
gap: 8px;
}
.gc-gf__row {
display: flex;
align-items: center;
gap: 8px;
}
.gc-gf__row--main {
padding: 6px 0;
}
.gc-gf__row--type {
overflow: hidden;
min-width: 0;
}
.gc-gf__row-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #475569;
flex-shrink: 0;
min-width: 36px;
}
.gc-gf__chips { display: flex; gap: 4px; flex-wrap: nowrap; }
.gc-gf__chips--scroll {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(34,211,238,.2) transparent;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
flex: 1;
min-width: 0;
}
.gc-gf__chips--scroll::-webkit-scrollbar { height: 3px; }
.gc-gf__chips--scroll::-webkit-scrollbar-thumb { background: rgba(34,211,238,.25); border-radius: 2px; }
.gc-gf__sep {
width: 1px;
height: 22px;
background: rgba(255,255,255,.08);
flex-shrink: 0;
margin: 0 4px;
}
/* Chip */
.gc-gf__chip {
padding: 5px 12px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.04);
color: #94a3b8;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.gc-gf__chip:hover {
background: rgba(34,211,238,.08);
border-color: rgba(34,211,238,.2);
color: #22d3ee;
}
.gc-gf__chip--active {
background: #22d3ee !important;
border-color: #22d3ee !important;
color: #0f172a !important;
font-weight: 700;
}
/* Chip stato con hint colore */
.gc-gf__chip--green.gc-gf__chip--active { background: #22c55e !important; border-color: #22c55e !important; }
.gc-gf__chip--yellow.gc-gf__chip--active { background: #ef9e40 !important; border-color: #ef9e40 !important; }
.gc-gf__chip--red.gc-gf__chip--active { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
/* Active filter chips (removable) */
.gc-gf__active { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-gf__active-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 16px;
background: rgba(34,211,238,.1);
border: 1px solid rgba(34,211,238,.15);
color: #22d3ee;
font-size: 11px;
font-weight: 600;
}
.gc-gf__active-chip button {
border: none;
background: none;
color: #22d3ee;
font-size: 14px;
cursor: pointer;
padding: 0;
margin-left: 2px;
opacity: .7;
transition: opacity .15s;
}
.gc-gf__active-chip button:hover { opacity: 1; }
/* Reset button */
.gc-gf__reset {
border: none;
background: none;
color: #64748b;
font-size: 11px;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
transition: color .15s;
align-self: flex-start;
}
.gc-gf__reset:hover { color: #ef4444; }
/* Mobile buttons (hidden on desktop) */
.gc-gf__mobile { display: none; }
.gc-gf__search-mobile { display: none; }
.gc-gf__mobile-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.04);
color: #cbd5e1;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.gc-gf__mobile-btn:hover { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.2); color: #22d3ee; }
/* Bottom sheet */
.gc-gf-sheet { display: none; position: fixed; inset: 0; z-index: 9998; }
.gc-gf-sheet--open { display: flex; flex-direction: column; justify-content: flex-end; }
.gc-gf-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.gc-gf-sheet__panel {
position: relative;
background: var(--bg-1, #12151e);
border-radius: 16px 16px 0 0;
padding: 0;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 -8px 32px rgba(0,0,0,.3);
}
.gc-gf-sheet__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,.06);
position: sticky;
top: 0;
background: var(--bg-1, #12151e);
}
.gc-gf-sheet__title { font-size: 15px; font-weight: 700; color: var(--color-heading, #e2e8f0); }
.gc-gf-sheet__close {
width: 28px; height: 28px; border: none; background: rgba(255,255,255,.04); border-radius: 6px;
color: #64748b; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.gc-gf-sheet__body { padding: 16px 20px 24px; }
.gc-gf-sheet__body .gc-gf__group { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.gc-gf-sheet__body .gc-gf__chips { flex-wrap: wrap; }
.gc-gf-sheet__option {
display: block;
width: 100%;
padding: 12px 16px;
border: none;
background: none;
color: #cbd5e1;
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
border-radius: 8px;
transition: background .15s;
}
.gc-gf-sheet__option:hover { background: rgba(255,255,255,.04); }
.gc-gf-sheet__option--active { color: #22d3ee; font-weight: 700; background: rgba(34,211,238,.06); }
/* Light mode filtri */
[data-theme="light"] .gc-gf { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-gf__input { background: #fff; border-color: rgba(8,145,178,.2); color: #1e293b; }
[data-theme="light"] .gc-gf__input:focus { border-color: rgba(8,145,178,.4); background: rgba(8,145,178,.03); }
[data-theme="light"] .gc-gf__input::placeholder { color: #94a3b8; }
[data-theme="light"] .gc-gf__search-toggle { background: #f8fafc; border-color: rgba(0,0,0,.06); color: #94a3b8; }
[data-theme="light"] .gc-gf__search-toggle:hover,
[data-theme="light"] .gc-gf__search-toggle--active { background: rgba(8,145,178,.06); border-color: rgba(8,145,178,.2); color: #0891b2; }
[data-theme="light"] .gc-gf__chips--scroll::-webkit-scrollbar-thumb { background: rgba(8,145,178,.2); }
[data-theme="light"] .gc-gf__chip { background: #f1f5f9; border-color: rgba(0,0,0,.06); color: #64748b; }
[data-theme="light"] .gc-gf__chip:hover { background: rgba(8,145,178,.06); border-color: rgba(8,145,178,.15); color: #0891b2; }
[data-theme="light"] .gc-gf__chip--active { background: #0891b2 !important; border-color: #0891b2 !important; color: #fff !important; }
[data-theme="light"] .gc-gf__chip--green.gc-gf__chip--active { background: #16a34a !important; border-color: #16a34a !important; }
[data-theme="light"] .gc-gf__chip--yellow.gc-gf__chip--active { background: #ef9e40 !important; border-color: #ef9e40 !important; color: #fff !important; }
[data-theme="light"] .gc-gf__chip--red.gc-gf__chip--active { background: #dc2626 !important; border-color: #dc2626 !important; }
[data-theme="light"] .gc-gf__sep { background: rgba(0,0,0,.08); }
[data-theme="light"] .gc-gf__active-chip { background: rgba(8,145,178,.06); border-color: rgba(8,145,178,.12); color: #0891b2; }
[data-theme="light"] .gc-gf__active-chip button { color: #0891b2; }
[data-theme="light"] .gc-gf__mobile-btn { background: #f8fafc; border-color: rgba(0,0,0,.06); color: #475569; }
[data-theme="light"] .gc-gf-sheet__panel { background: #fff; }
[data-theme="light"] .gc-gf-sheet__header { background: #fff; border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-gf-sheet__title { color: #0f172a; }
[data-theme="light"] .gc-gf-sheet__option { color: #475569; }
[data-theme="light"] .gc-gf-sheet__option--active { color: #0891b2; background: rgba(8,145,178,.04); }
/* Responsive filtri */
@media (max-width: 768px) {
.gc-gf__desktop { display: none !important; }
.gc-gf__mobile { display: flex; gap: 8px; }
.gc-gf__search-mobile { display: block; }
.gc-gf { padding: 12px 14px; gap: 8px; }
/* Mobile search input inline (fisso, no toggle) */
.gc-gf__search-mobile {
position: relative;
width: 100%;
}
.gc-gf__search-mobile .gc-gf__input {
width: 100%;
padding: 9px 14px 9px 36px;
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.08);
}
.gc-gf__search-mobile::before {
content: '\1F50D';
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
pointer-events: none;
opacity: .6;
}
.gc-gf__mobile-btn { flex: 1; justify-content: center; }
/* Bottom sheet: colonna singola */
.gc-gf-sheet__body .gc-gf__row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.gc-gf-sheet__body .gc-gf__row-label { min-width: 0; margin-bottom: 2px; }
.gc-gf-sheet__body .gc-gf__chips { flex-wrap: wrap; gap: 6px; overflow: visible; }
.gc-gf-sheet__body .gc-gf__sep { display: none; }
}
[data-theme="light"] .gc-gf__search-mobile .gc-gf__input { background: #fff; border-color: rgba(0,0,0,.08); }
/* ─── Sezione header ────────────────────────────────────────── */
.gc-guide-section { margin-bottom: 32px; }
.gc-guide-section__header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 16px;
}
.gc-guide-section__title {
font-size: 18px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0;
}
.gc-guide-section__count {
font-size: 12px;
color: #64748b;
font-weight: 600;
}
/* ─── Featured label ────────────────────────────────────────── */
.gc-guide-feat-section { margin-bottom: 24px; }
.gc-guide-feat-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #22d3ee;
}
/* ─── Griglia card giochi ───────────────────────────────────── */
.gc-guide-grid { display: flex; flex-direction: column; gap: 6px; }
/* ─── Badge stato ───────────────────────────────────────────── */
.gc-guide-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1.3;
}
.gc-guide-badge--complete { background: rgba(34,197,94,.12); color: #22c55e; }
.gc-guide-badge--wip { background: rgba(239,158,64,.12); color: #ef9e40; }
.gc-guide-badge--sm { padding: 2px 6px; font-size: 8px; }
[data-theme="light"] .gc-guide-badge--complete { background: rgba(34,197,94,.08); color: #16a34a; }
[data-theme="light"] .gc-guide-badge--wip { background: rgba(239,158,64,.08); color: #ef9e40; }
/* ═══════════════════════════════════════════════════════════════
FEATURED — Layout editoriale 3 colonne
═══════════════════════════════════════════════════════════════ */
.gc-guide-card--featured {
border-color: rgba(34,211,238,.15);
background: linear-gradient(135deg, var(--bg-1, #12151e) 0%, rgba(34,211,238,.04) 100%);
}
.gc-guide-feat-layout {
display: grid;
grid-template-columns: 100px 1fr 140px;
gap: 20px;
padding: 20px 22px;
align-items: center;
}
.gc-guide-feat__cover {
width: 100px;
height: 133px;
border-radius: 8px;
overflow: hidden;
background: #0a0d14;
display: block;
box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.gc-guide-feat__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gc-guide-card--featured:hover .gc-guide-feat__cover img { transform: scale(1.04); }
.gc-guide-feat__center { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gc-guide-feat__title {
font-size: 20px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0;
line-height: 1.2;
letter-spacing: -.01em;
}
.gc-guide-feat__title a { color: inherit; text-decoration: none; }
.gc-guide-feat__meta { display: flex; gap: 5px; flex-wrap: wrap; }
.gc-guide-feat__sub { font-size: 12px; color: #64748b; }
/* Spoke pill preview nel featured */
.gc-guide-feat__spokes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gc-guide-feat__spoke-pill {
padding: 4px 12px;
border-radius: 6px;
background: rgba(34,211,238,.08);
border: 1px solid rgba(34,211,238,.15);
color: #22d3ee;
font-size: 11px;
font-weight: 600;
text-decoration: none;
transition: all .15s;
}
.gc-guide-feat__spoke-pill:hover { background: #22d3ee; color: #0f172a; }
.gc-guide-feat__spoke-more {
padding: 4px 10px;
border-radius: 6px;
background: rgba(255,255,255,.04);
color: #475569;
font-size: 11px;
font-weight: 700;
}
/* Progress grande nel featured */
.gc-guide-feat__right { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gc-guide-feat__pct {
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
font-size: 32px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
line-height: 1;
}
.gc-guide-feat__pct span { font-size: 16px; color: #475569; }
.gc-guide-feat__pbar { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.gc-guide-feat__ptext { font-size: 10px; color: #475569; font-weight: 600; }
/* Featured expand sempre visibile */
.gc-guide-card--featured .gc-guide-card__expand { display: block !important; border-top: 1px solid rgba(255,255,255,.04); }
.gc-guide-card--featured .gc-guide-card__expand[hidden] { display: block !important; }
[data-theme="light"] .gc-guide-card--featured { background: linear-gradient(135deg, #fff, rgba(8,145,178,.02)); border-color: rgba(8,145,178,.1); }
[data-theme="light"] .gc-guide-feat__title { color: #0f172a; }
[data-theme="light"] .gc-guide-feat__sub { color: #94a3b8; }
[data-theme="light"] .gc-guide-feat__cover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
[data-theme="light"] .gc-guide-feat__pct { color: #0f172a; }
[data-theme="light"] .gc-guide-feat__pbar { background: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-feat__spoke-pill { background: rgba(8,145,178,.04); border-color: rgba(8,145,178,.12); color: #0891b2; }
[data-theme="light"] .gc-guide-feat__spoke-pill:hover { background: #0891b2; color: #fff; }
/* ═══════════════════════════════════════════════════════════════
TOP + STANDARD — Card compatta con spoke preview
═══════════════════════════════════════════════════════════════ */
.gc-guide-card {
border-radius: 12px;
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.04);
overflow: hidden;
transition: all .25s;
}
.gc-guide-card:hover {
border-color: rgba(34,211,238,.12);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
transform: translateY(-1px);
}
.gc-guide-card--open {
border-color: rgba(34,211,238,.2);
box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
/* TOP variante — leggermente piu' grande */
.gc-guide-card--top .gc-guide-card__compact { padding: 12px 16px; }
.gc-guide-card--top .gc-guide-card__cover { width: 56px; height: 75px; }
.gc-guide-card--top .gc-guide-card__title { font-size: 15px; }
/* Riga compatta */
.gc-guide-card__compact {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
}
.gc-guide-card__cover {
width: 48px;
height: 64px;
border-radius: 6px;
overflow: hidden;
background: #0a0d14;
display: block;
flex-shrink: 0;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.gc-guide-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-guide-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gc-guide-card__title {
font-size: 14px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
margin: 0;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gc-guide-card__title a { color: inherit; text-decoration: none; }
.gc-guide-card__meta { display: flex; gap: 4px; flex-wrap: wrap; }
/* Spoke preview inline (sempre visibile) */
.gc-guide-card__spoke-preview { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.gc-guide-card__spoke-chip {
padding: 2px 8px;
border-radius: 4px;
background: rgba(34,197,94,.08);
color: #22c55e;
font-size: 10px;
font-weight: 600;
text-decoration: none;
transition: background .15s;
}
.gc-guide-card__spoke-chip:hover { background: rgba(34,197,94,.15); }
.gc-guide-card__spoke-chip--more {
background: rgba(255,255,255,.04);
color: #475569;
cursor: default;
}
/* Progress + badge */
.gc-guide-card__status {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 100px;
max-width: 140px;
align-items: flex-end;
}
.gc-guide-card__pbar {
width: 100%;
height: 5px;
border-radius: 3px;
background: rgba(255,255,255,.06);
overflow: hidden;
}
.gc-guide-card__pfill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.gc-guide-card__pfill--full { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.3); }
.gc-guide-card__pfill--mid { background: #ef9e40; box-shadow: 0 0 8px rgba(239,158,64,.2); }
.gc-guide-card__pfill--low { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.2); }
.gc-guide-card__ptext { font-size: 10px; color: #475569; font-weight: 600; white-space: nowrap; }
/* Toggle button */
.gc-guide-card__toggle {
border: 1px solid rgba(34,211,238,.2);
background: rgba(34,211,238,.06);
border-radius: 8px;
color: #22d3ee;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
flex-shrink: 0;
transition: all .2s;
}
.gc-guide-card__toggle-text { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gc-guide-card__toggle-icon { transition: transform .2s; }
.gc-guide-card__toggle:hover { background: rgba(34,211,238,.15); border-color: rgba(34,211,238,.35); }
.gc-guide-card--open .gc-guide-card__toggle { background: #22d3ee; color: #0f172a; border-color: #22d3ee; }
.gc-guide-card--open .gc-guide-card__toggle-icon { transform: rotate(180deg); }
/* Parte espansa */
.gc-guide-card__expand { padding: 0 14px 14px; border-top: 1px solid rgba(255,255,255,.04); }
.gc-guide-card__spokes { display: flex; gap: 16px; padding-top: 12px; flex-wrap: wrap; }
.gc-guide-card__spoke-group { min-width: 140px; }
.gc-guide-card__spoke-group-label {
display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: #475569; margin-bottom: 6px; padding-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.gc-guide-card__spoke-list { display: flex; flex-direction: column; gap: 2px; }
.gc-guide-spoke {
display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px;
font-size: 11px; font-weight: 500; text-decoration: none; transition: background .15s; line-height: 1.4;
}
.gc-guide-spoke--done { color: #22c55e; }
.gc-guide-spoke--done:hover { background: rgba(34,197,94,.06); }
.gc-guide-spoke--wip { color: #ef9e40; }
.gc-guide-spoke--miss { color: #334155; }
.gc-guide-spoke--future { color: #a78bfa; }
.gc-guide-spoke--approved { color: #ef9e40; }
.gc-guide-spoke__wip-badge {
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #ef9e40;
background: rgba(239,158,64,.12);
padding: 1px 6px;
border-radius: 3px;
margin-left: auto;
white-space: nowrap;
}
[data-theme="light"] .gc-guide-spoke--approved { color: #ef9e40; }
[data-theme="light"] .gc-guide-spoke__wip-badge { background: rgba(239,158,64,.08); color: #ef9e40; }
.gc-guide-spoke__date {
font-size: 9px;
font-weight: 700;
color: #a78bfa;
background: rgba(124,58,237,.1);
padding: 1px 6px;
border-radius: 3px;
margin-left: auto;
white-space: nowrap;
}
.gc-guide-spoke__req {
margin-left: auto;
padding: 2px 8px;
border: 1px solid rgba(239,158,64,.2);
border-radius: 4px;
background: rgba(239,158,64,.06);
color: #ef9e40;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
cursor: pointer;
transition: all .15s;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.gc-guide-spoke__req:hover { background: rgba(239,158,64,.15); border-color: rgba(239,158,64,.35); }
.gc-guide-spoke__req:disabled { opacity: .5; cursor: default; }
.gc-guide-spoke__req-count {
background: rgba(239,158,64,.2);
padding: 0 4px;
border-radius: 3px;
font-size: 9px;
min-width: 14px;
text-align: center;
}
/* Pulsante Aiuta altri giocatori */
.gc-guide-spoke { display: flex; align-items: center; gap: 6px; }
.gc-guide-spoke__main { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; flex: 1; }
.gc-guide-spoke__help {
border: 1px solid rgba(59,130,246,.2);
background: rgba(59,130,246,.06);
color: #3b82f6;
font-size: 12px;
line-height: 1;
padding: 3px 7px;
border-radius: 4px;
cursor: pointer;
transition: all .15s;
margin-left: auto;
flex-shrink: 0;
}
.gc-guide-spoke__help:hover { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.35); }
/* Lista tip sotto spoke */
.gc-guide-spoke-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.gc-guide-tips {
margin: 6px 0 4px 20px;
padding: 8px 10px;
border-left: 2px solid rgba(59,130,246,.2);
background: rgba(59,130,246,.03);
border-radius: 0 6px 6px 0;
}
.gc-guide-tips__label {
display: block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #3b82f6;
margin-bottom: 6px;
}
.gc-guide-tip {
padding: 6px 0;
border-top: 1px solid rgba(255,255,255,.04);
}
.gc-guide-tip:first-of-type { border-top: none; padding-top: 0; }
.gc-guide-tip__content {
font-size: 12px;
color: #cbd5e1;
line-height: 1.5;
margin: 0 0 4px;
}
.gc-guide-tip__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-guide-tip__tag {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: #3b82f6;
background: rgba(59,130,246,.1);
padding: 1px 6px;
border-radius: 3px;
}
.gc-guide-tip__source {
font-size: 10px;
color: #8b5cf6;
text-decoration: none;
}
.gc-guide-tip__source:hover { text-decoration: underline; }
.gc-guide-tip__vote {
margin-left: auto;
padding: 2px 8px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.04);
color: #64748b;
font-size: 10px;
border-radius: 4px;
cursor: pointer;
transition: all .15s;
}
.gc-guide-tip__vote:hover { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); color: #22c55e; }
.gc-guide-tip__vote--voted { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color: #22c55e; }
.gc-guide-tip__vote-count { font-weight: 700; margin-left: 2px; }
[data-theme="light"] .gc-guide-spoke__help { background: rgba(59,130,246,.04); border-color: rgba(59,130,246,.15); color: #2563eb; }
[data-theme="light"] .gc-guide-tips { background: rgba(59,130,246,.03); border-left-color: rgba(59,130,246,.15); }
[data-theme="light"] .gc-guide-tips__label { color: #2563eb; }
[data-theme="light"] .gc-guide-tip__content { color: #475569; }
[data-theme="light"] .gc-guide-tip { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-tip__vote { background: #f1f5f9; border-color: rgba(0,0,0,.06); color: #94a3b8; }
/* ─── Modale TIP ────────────────────────────────────────────── */
.gc-tip-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.gc-tip-modal--open { display: flex; }
.gc-tip-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.gc-tip-modal__box {
position: relative; width: 440px; max-width: 92vw; border-radius: 14px;
background: var(--bg-1, #12151e); border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden;
}
.gc-tip-modal__header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.gc-tip-modal__title { font-size: 15px; font-weight: 700; color: var(--color-heading, #e2e8f0); }
.gc-tip-modal__close {
width: 28px; height: 28px; border: none; background: rgba(255,255,255,.04);
border-radius: 6px; color: #64748b; font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.gc-tip-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.gc-tip-modal__ctx { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.gc-tip-modal__ctx strong { color: #3b82f6; }
.gc-tip-modal__input {
width: 100%; padding: 10px 12px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
color: var(--color-heading, #e2e8f0); font-size: 13px; font-family: inherit;
resize: vertical; min-height: 80px;
}
.gc-tip-modal__input:focus { outline: none; border-color: rgba(59,130,246,.4); }
.gc-tip-modal__input::placeholder { color: #475569; }
.gc-tip-modal__counter { font-size: 10px; color: #475569; text-align: right; }
.gc-tip-modal__source,
.gc-tip-modal__name,
.gc-tip-modal__email {
width: 100%; padding: 8px 12px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
color: #cbd5e1; font-size: 12px; font-family: inherit;
}
.gc-tip-modal__row { display: flex; gap: 8px; }
.gc-tip-modal__row > input { flex: 1; min-width: 0; }
.gc-tip-modal__privacy {
font-size: 10px;
color: #64748b;
margin: 2px 0 0;
font-style: italic;
}
.gc-tip-modal__source:focus { outline: none; border-color: rgba(59,130,246,.4); }
.gc-tip-modal__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gc-tip-modal__tags-label { font-size: 10px; color: #64748b; text-transform: uppercase; font-weight: 700; margin-right: 4px; }
.gc-tip-modal__tag {
padding: 4px 10px; border-radius: 12px;
border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
color: #94a3b8; font-size: 11px; cursor: pointer; transition: all .15s;
}
.gc-tip-modal__tag:hover { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); color: #3b82f6; }
.gc-tip-modal__tag--active { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }
.gc-tip-modal__msg { font-size: 12px; padding: 8px 12px; border-radius: 6px; margin: 4px 0 0; }
.gc-tip-modal__msg--ok { background: rgba(34,197,94,.1); color: #22c55e; }
.gc-tip-modal__msg--err { background: rgba(239,68,68,.1); color: #ef4444; }
.gc-tip-modal__footer {
display: flex; gap: 8px; justify-content: flex-end; padding: 0 20px 16px;
}
.gc-tip-modal__send {
padding: 8px 20px; border-radius: 8px; border: none; background: #3b82f6;
color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.gc-tip-modal__send:hover { background: #2563eb; }
.gc-tip-modal__send:disabled { opacity: .5; }
.gc-tip-modal__cancel {
padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
background: none; color: #64748b; font-size: 13px; cursor: pointer;
}
[data-theme="light"] .gc-tip-modal__box { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .gc-tip-modal__header { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-tip-modal__title { color: #0f172a; }
[data-theme="light"] .gc-tip-modal__input,
[data-theme="light"] .gc-tip-modal__source,
[data-theme="light"] .gc-tip-modal__name,
[data-theme="light"] .gc-tip-modal__email { background: #f8fafc; border-color: rgba(0,0,0,.08); color: #1e293b; }
[data-theme="light"] .gc-tip-modal__privacy { color: #94a3b8; }
[data-theme="light"] .gc-tip-modal__tag { background: #f1f5f9; border-color: rgba(0,0,0,.06); color: #64748b; }
[data-theme="light"] .gc-tip-modal__send { background: #2563eb; }
[data-theme="light"] .gc-tip-modal__cancel { border-color: rgba(0,0,0,.08); color: #94a3b8; }
.gc-guide-spoke__icon { font-size: 10px; flex-shrink: 0; width: 14px; text-align: center; }
.gc-guide-spoke__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-guide-card__cta {
display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 8px;
background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.15); color: #22d3ee;
font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase;
letter-spacing: .03em; transition: all .2s;
}
.gc-guide-card__cta:hover { background: #22d3ee; color: #0f172a; }
/* Light mode cards */
[data-theme="light"] .gc-guide-feat-label { color: #0891b2; }
[data-theme="light"] .gc-guide-card { background: #fff; border-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-card:hover { border-color: rgba(8,145,178,.1); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-card--open { border-color: rgba(8,145,178,.15); }
[data-theme="light"] .gc-guide-card__title { color: #0f172a; }
[data-theme="light"] .gc-guide-card__cover { background: #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .gc-guide-card__pbar { background: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-card__ptext { color: #94a3b8; }
[data-theme="light"] .gc-guide-card__spoke-chip { background: rgba(34,197,94,.06); color: #16a34a; }
[data-theme="light"] .gc-guide-card__spoke-chip--more { background: rgba(0,0,0,.03); color: #94a3b8; }
[data-theme="light"] .gc-guide-card__toggle { background: rgba(8,145,178,.04); border-color: rgba(8,145,178,.15); color: #0891b2; }
[data-theme="light"] .gc-guide-card__toggle:hover { background: rgba(8,145,178,.1); border-color: rgba(8,145,178,.25); }
[data-theme="light"] .gc-guide-card--open .gc-guide-card__toggle { background: #0891b2; color: #fff; border-color: #0891b2; }
[data-theme="light"] .gc-guide-card__expand { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-card__spoke-group-label { color: #94a3b8; border-bottom-color: rgba(0,0,0,.04); }
/* ── LIGHT SPOKE ROW FIX: contrasto leggibile su bianco ── */
[data-theme="light"] .gc-guide-spoke--done { color: #15803d; } /* green-700, non acido */
[data-theme="light"] .gc-guide-spoke--done:hover { background: rgba(22,163,74,.08); }
[data-theme="light"] .gc-guide-spoke--wip { color: #c97e1c; } /* amber-700 */
[data-theme="light"] .gc-guide-spoke--miss { color: #94a3b8; } /* slate-400: muted ma leggibile */
[data-theme="light"] .gc-guide-spoke--miss .gc-guide-spoke__label { color: #64748b; } /* slate-500 piu' forte per il testo */
[data-theme="light"] .gc-guide-card__spoke-group-label { color: #64748b; border-bottom-color: #e2e8f0; }
/* Header section title (quando appare in light su card bianco) */
[data-theme="light"] .gc-guide-card__spoke-group-label {
color: #475569;
font-weight: 800;
}
[data-theme="light"] .gc-guide-card__cta { background: rgba(8,145,178,.04); border-color: rgba(8,145,178,.12); color: #0891b2; }
[data-theme="light"] .gc-guide-card__cta:hover { background: #0891b2; color: #fff; }
[data-theme="light"] .gc-guide-spoke--future { color: #6d28d9; }
[data-theme="light"] .gc-guide-spoke__date {
background: rgba(124,58,237,.1);
color: #6d28d9;
border: 1px solid rgba(124,58,237,.2);
}
/* Pulsante "Richiedi" — ambra saturo leggibile su bianco */
[data-theme="light"] .gc-guide-spoke__req {
border-color: rgba(201,126,28, .35);
background: rgba(239,158,64, .18);
color: #92400e;
font-weight: 800;
}
[data-theme="light"] .gc-guide-spoke__req:hover {
background: #c97e1c;
border-color: #c97e1c;
color: #ffffff;
}
[data-theme="light"] .gc-guide-spoke__req-count {
background: rgba(201,126,28, .25);
color: #7c2d12;
}
[data-theme="light"] .gc-guide-spoke__req:hover .gc-guide-spoke__req-count {
background: rgba(255, 255, 255, .3);
color: #ffffff;
}
/* Badge "In lavorazione" */
[data-theme="light"] .gc-guide-spoke--approved { color: #c97e1c; }
[data-theme="light"] .gc-guide-spoke__wip-badge {
background: rgba(201,126,28, .1);
color: #92400e;
border: 1px solid rgba(201,126,28, .2);
font-weight: 800;
}
/* ─── Modale richiesta guida ────────────────────────────────── */
.gc-guide-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.gc-guide-modal--open { display: flex; }
.gc-guide-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.gc-guide-modal__box {
position: relative; width: 380px; max-width: 90vw; border-radius: 14px;
background: var(--bg-1, #12151e); border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden;
}
.gc-guide-modal__header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.gc-guide-modal__title { font-size: 15px; font-weight: 700; color: var(--color-heading, #e2e8f0); }
.gc-guide-modal__close {
width: 28px; height: 28px; border: none; background: rgba(255,255,255,.04);
border-radius: 6px; color: #64748b; font-size: 18px; cursor: pointer; transition: all .15s;
display: flex; align-items: center; justify-content: center;
}
.gc-guide-modal__close:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.gc-guide-modal__body { padding: 20px; }
.gc-guide-modal__info { font-size: 14px; color: #cbd5e1; line-height: 1.5; margin: 0; }
.gc-guide-modal__msg { font-size: 13px; margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; }
.gc-guide-modal__msg--ok { background: rgba(34,197,94,.1); color: #22c55e; }
.gc-guide-modal__msg--err { background: rgba(239,68,68,.1); color: #ef4444; }
.gc-guide-modal__footer {
display: flex; gap: 8px; justify-content: flex-end; padding: 0 20px 16px;
}
.gc-guide-modal__send {
padding: 8px 20px; border-radius: 8px; border: none; background: #22d3ee;
color: #0f172a; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.gc-guide-modal__send:hover { background: #06b6d4; }
.gc-guide-modal__send:disabled { opacity: .5; }
.gc-guide-modal__cancel {
padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
background: none; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer;
transition: all .15s;
}
.gc-guide-modal__cancel:hover { background: rgba(255,255,255,.04); color: #cbd5e1; }
[data-theme="light"] .gc-guide-modal__box { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 24px 64px rgba(0,0,0,.15); }
[data-theme="light"] .gc-guide-modal__header { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-guide-modal__title { color: #0f172a; }
[data-theme="light"] .gc-guide-modal__info { color: #475569; }
[data-theme="light"] .gc-guide-modal__close { background: rgba(0,0,0,.03); color: #94a3b8; }
[data-theme="light"] .gc-guide-modal__cancel { border-color: rgba(0,0,0,.08); color: #94a3b8; }
[data-theme="light"] .gc-guide-modal__send { background: #0891b2; color: #fff; }
/* ─── Load more + loading ───────────────────────────────────── */
.gc-guide-loadmore { text-align: center; padding: 20px 0; }
.gc-guide-loadmore__btn {
padding: 10px 28px;
border-radius: 10px;
border: 1px solid rgba(34,211,238,.25);
background: rgba(34,211,238,.06);
color: #22d3ee;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all .2s;
}
.gc-guide-loadmore__btn:hover {
background: #22d3ee;
color: #0f172a;
box-shadow: 0 4px 16px rgba(34,211,238,.2);
}
.gc-guide-loading { text-align: center; padding: 20px 0; color: #475569; font-size: 13px; }
[data-theme="light"] .gc-guide-loadmore__btn { background: rgba(8,145,178,.04); border-color: rgba(8,145,178,.15); color: #0891b2; }
[data-theme="light"] .gc-guide-loadmore__btn:hover { background: #0891b2; color: #fff; }
/* ─── Ultime guide ──────────────────────────────────────────── */
.gc-guide-recent-section { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.04); }
.gc-guide-recent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gc-guide-recent-card {
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.04);
text-decoration: none;
transition: all .2s;
}
.gc-guide-recent-card:hover {
border-color: rgba(34,211,238,.15);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.gc-guide-recent-card__thumb {
position: relative;
height: 120px;
overflow: hidden;
background: #0a0d14;
}
.gc-guide-recent-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gc-guide-recent-card__spoke-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 3px 8px;
border-radius: 4px;
background: rgba(34,211,238,.9);
color: #0f172a;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.gc-guide-recent-card__body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.gc-guide-recent-card__game {
font-size: 10px;
font-weight: 700;
color: #22d3ee;
text-transform: uppercase;
letter-spacing: .04em;
}
.gc-guide-recent-card__title {
font-size: 13px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-guide-recent-card__date { font-size: 10px; color: #475569; }
[data-theme="light"] .gc-guide-recent-section { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-recent-card { background: #fff; border-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-recent-card:hover { border-color: rgba(8,145,178,.12); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
[data-theme="light"] .gc-guide-recent-card__game { color: #0891b2; }
[data-theme="light"] .gc-guide-recent-card__title { color: #0f172a; }
/* ─── Responsive Guide Hub ──────────────────────────────────── */
@media (max-width: 900px) {
.gc-guide-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
.gc-guide-hero__stats { gap: 16px; }
.gc-guide-card__spokes { flex-direction: column; gap: 12px; }
.gc-guide-recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.gc-guide-hero__title { font-size: 22px; }
.gc-guide-hero__stats { flex-wrap: wrap; gap: 12px; }
.gc-guide-filters__row { flex-direction: column; }
.gc-guide-filters__search { min-width: 100%; }
.gc-guide-filters__select { width: 100%; }
/* Mobile: card compatta a 2 colonne fisse (cover + tutto il resto) */
.gc-guide-card__compact {
display: grid !important;
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
gap: 8px 10px;
padding: 10px 12px;
align-items: start;
}
/* Cover occupa tutta la colonna sx */
.gc-guide-card__cover { grid-row: 1 / 3; width: 48px; height: 64px; }
/* Info a destra in alto */
.gc-guide-card__info { grid-column: 2; grid-row: 1; gap: 4px; }
.gc-guide-card__title { font-size: 13px; white-space: nowrap; }
/* Status + toggle a destra in basso */
.gc-guide-card__status { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; gap: 6px; max-width: 100%; }
.gc-guide-card__pbar { flex: 1; }
.gc-guide-card__toggle { grid-column: 1 / -1; padding: 8px; justify-content: center; }
/* Top = same as standard on mobile */
.gc-guide-card--top .gc-guide-card__compact { padding: 10px 12px; }
.gc-guide-card--top .gc-guide-card__cover { width: 48px; height: 64px; }
.gc-guide-card--top .gc-guide-card__title { font-size: 13px; }
/* Featured mobile */
.gc-guide-feat-layout { grid-template-columns: 64px 1fr; gap: 10px; padding: 12px; }
.gc-guide-feat__cover { width: 64px; height: 85px; }
.gc-guide-feat__right { display: none; }
.gc-guide-feat__title { font-size: 16px; }
.gc-guide-feat__spokes { gap: 4px; }
.gc-guide-recent-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
11. SEGNALA UNA NOTIZIA — Pagina premium con wizard
═══════════════════════════════════════════════════════════════ */
.gc-segnala-page { max-width: 780px; margin: 0 auto; padding: 0 20px 60px; }
/* Hero */
.gc-segnala-hero {
text-align: center;
padding: 48px 0 32px;
border-bottom: 1px solid rgba(255,255,255,.04);
margin-bottom: 32px;
}
.gc-segnala-hero__kicker {
display: inline-block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
color: #22d3ee;
padding: 4px 12px;
border: 1px solid rgba(34,211,238,.3);
border-radius: 20px;
background: rgba(34,211,238,.06);
margin-bottom: 16px;
}
.gc-segnala-hero__title {
font-size: 38px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0 0 12px;
letter-spacing: -.02em;
}
.gc-segnala-hero__desc {
font-size: 15px;
color: #94a3b8;
line-height: 1.6;
max-width: 620px;
margin: 0 auto 24px;
}
.gc-segnala-hero__stats {
display: flex;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
}
.gc-segnala-hero__stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.gc-segnala-hero__stat-icon { font-size: 16px; }
/* Steps indicator */
.gc-segnala-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
}
.gc-segnala-step {
display: flex;
align-items: center;
gap: 8px;
opacity: .4;
transition: opacity .3s;
}
.gc-segnala-step--active,
.gc-segnala-step--done { opacity: 1; }
.gc-segnala-step__num {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #64748b;
transition: all .3s;
}
.gc-segnala-step--active .gc-segnala-step__num {
background: #22d3ee;
border-color: #22d3ee;
color: #0f172a;
box-shadow: 0 0 16px rgba(34,211,238,.4);
}
.gc-segnala-step--done .gc-segnala-step__num {
background: #22c55e;
border-color: #22c55e;
color: #fff;
}
.gc-segnala-step__label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #cbd5e1;
}
.gc-segnala-step__sep {
width: 40px;
height: 2px;
background: rgba(255,255,255,.08);
border-radius: 1px;
}
/* Form */
.gc-segnala-form {
background: var(--bg-1, #12151e);
border: 1px solid rgba(255,255,255,.06);
border-radius: 16px;
padding: 32px;
box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.gc-segnala-panel { display: none; }
.gc-segnala-panel--active { display: block; animation: gc-fade .3s ease; }
@keyframes gc-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.gc-segnala-panel__title {
font-size: 22px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0 0 6px;
}
.gc-segnala-panel__desc {
font-size: 13px;
color: #64748b;
margin: 0 0 24px;
}
/* Categorie grid */
.gc-segnala-cats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 24px;
}
.gc-segnala-cat {
cursor: pointer;
position: relative;
}
.gc-segnala-cat input { position: absolute; opacity: 0; pointer-events: none; }
.gc-segnala-cat__inner {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border-radius: 12px;
background: rgba(255,255,255,.03);
border: 1.5px solid rgba(255,255,255,.06);
transition: all .2s;
}
.gc-segnala-cat:hover .gc-segnala-cat__inner {
background: rgba(34,211,238,.06);
border-color: rgba(34,211,238,.3);
transform: translateY(-2px);
}
.gc-segnala-cat input:checked ~ .gc-segnala-cat__inner {
background: rgba(34,211,238,.12);
border-color: #22d3ee;
box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}
.gc-segnala-cat__icon { font-size: 24px; line-height: 1; }
.gc-segnala-cat__label {
font-size: 14px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
margin-top: 4px;
}
.gc-segnala-cat__desc {
font-size: 11px;
color: #64748b;
line-height: 1.4;
}
/* Fields */
.gc-segnala-field { margin-bottom: 20px; position: relative; }
.gc-segnala-field__label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #cbd5e1;
margin-bottom: 8px;
}
.gc-segnala-field__req { color: #ef4444; }
.gc-segnala-field__hint {
font-weight: 500;
color: #64748b;
font-size: 11px;
text-transform: none;
letter-spacing: 0;
}
.gc-segnala-field__input,
.gc-segnala-field__textarea {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
color: var(--color-heading, #e2e8f0);
font-size: 14px;
font-family: inherit;
transition: all .2s;
}
.gc-segnala-field__textarea { resize: vertical; min-height: 120px; }
.gc-segnala-field__input:focus,
.gc-segnala-field__textarea:focus {
outline: none;
border-color: rgba(34,211,238,.4);
background: rgba(34,211,238,.04);
box-shadow: 0 0 0 3px rgba(34,211,238,.1);
}
.gc-segnala-field__input::placeholder,
.gc-segnala-field__textarea::placeholder { color: #475569; }
.gc-segnala-field__counter {
display: block;
text-align: right;
font-size: 10px;
color: #475569;
margin-top: 4px;
}
.gc-segnala-field__hint-text {
display: block;
font-size: 11px;
color: #64748b;
margin-top: 6px;
line-height: 1.4;
}
/* Urgency */
.gc-segnala-urgency { display: flex; gap: 8px; flex-wrap: wrap; }
.gc-segnala-urgency__opt { cursor: pointer; flex: 1; min-width: 120px; }
.gc-segnala-urgency__opt input { position: absolute; opacity: 0; pointer-events: none; }
.gc-segnala-urgency__opt span {
display: block;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
font-size: 13px;
font-weight: 600;
color: #94a3b8;
text-align: center;
transition: all .2s;
}
.gc-segnala-urgency__opt:hover span {
background: rgba(34,211,238,.06);
border-color: rgba(34,211,238,.25);
color: #22d3ee;
}
.gc-segnala-urgency__opt input:checked ~ span {
background: rgba(34,211,238,.12);
border-color: #22d3ee;
color: #22d3ee;
font-weight: 700;
}
/* Checkbox */
.gc-segnala-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: #cbd5e1;
line-height: 1.5;
}
.gc-segnala-checkbox input {
width: 18px;
height: 18px;
accent-color: #22d3ee;
margin-top: 2px;
flex-shrink: 0;
}
.gc-segnala-checkbox a { color: #22d3ee; }
/* Nav */
.gc-segnala-nav {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.04);
}
.gc-segnala-btn {
padding: 12px 24px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
cursor: pointer;
transition: all .2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.gc-segnala-btn--primary {
background: #22d3ee;
color: #0f172a;
margin-left: auto;
}
.gc-segnala-btn--primary:hover {
background: #06b6d4;
box-shadow: 0 8px 24px rgba(34,211,238,.3);
transform: translateY(-2px);
}
.gc-segnala-btn--send {
background: linear-gradient(135deg, #22d3ee, #22c55e);
color: #0f172a;
margin-left: auto;
padding: 14px 28px;
font-size: 14px;
}
.gc-segnala-btn--send:hover {
box-shadow: 0 8px 24px rgba(34,211,238,.35);
transform: translateY(-2px);
}
.gc-segnala-btn--send:disabled { opacity: .6; cursor: wait; }
.gc-segnala-btn--ghost {
background: none;
border: 1px solid rgba(255,255,255,.1);
color: #94a3b8;
}
.gc-segnala-btn--ghost:hover {
background: rgba(255,255,255,.04);
color: #cbd5e1;
}
/* Message */
.gc-segnala-msg {
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
margin: 16px 0 0;
}
.gc-segnala-msg--err {
background: rgba(239,68,68,.1);
color: #ef4444;
border: 1px solid rgba(239,68,68,.2);
}
/* Success panel */
.gc-segnala-success {
text-align: center;
padding: 32px 16px;
}
.gc-segnala-success__icon {
font-size: 64px;
display: block;
margin-bottom: 16px;
animation: gc-bounce .6s ease;
}
@keyframes gc-bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.gc-segnala-success__title {
font-size: 32px;
font-weight: 800;
color: #22c55e;
margin: 0 0 12px;
}
.gc-segnala-success__desc {
font-size: 14px;
color: #cbd5e1;
line-height: 1.6;
margin: 0 0 24px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* FAQ */
.gc-segnala-faq { margin-top: 48px; }
.gc-segnala-faq__title {
font-size: 20px;
font-weight: 800;
color: var(--color-heading, #e2e8f0);
margin: 0 0 16px;
text-align: center;
}
.gc-segnala-faq__list { display: flex; flex-direction: column; gap: 8px; }
.gc-segnala-faq__item {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
padding: 14px 18px;
}
.gc-segnala-faq__item summary {
cursor: pointer;
font-size: 14px;
font-weight: 700;
color: var(--color-heading, #e2e8f0);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.gc-segnala-faq__item summary::-webkit-details-marker { display: none; }
.gc-segnala-faq__item summary::after { content: '+'; font-size: 20px; color: #22d3ee; }
.gc-segnala-faq__item[open] summary::after { content: '−'; }
.gc-segnala-faq__item p {
font-size: 13px;
color: #94a3b8;
line-height: 1.6;
margin: 10px 0 0;
}
/* Light mode */
[data-theme="light"] .gc-segnala-hero { border-bottom-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-segnala-hero__kicker { color: #0891b2; background: rgba(8,145,178,.06); border-color: rgba(8,145,178,.2); }
[data-theme="light"] .gc-segnala-hero__title { color: #0f172a; }
[data-theme="light"] .gc-segnala-hero__desc { color: #64748b; }
[data-theme="light"] .gc-segnala-step__num { background: #f1f5f9; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .gc-segnala-step--active .gc-segnala-step__num { background: #0891b2; border-color: #0891b2; color: #fff; }
[data-theme="light"] .gc-segnala-step__sep { background: rgba(0,0,0,.08); }
[data-theme="light"] .gc-segnala-form { background: #fff; border-color: rgba(0,0,0,.06); box-shadow: 0 8px 32px rgba(0,0,0,.06); }
[data-theme="light"] .gc-segnala-panel__title { color: #0f172a; }
[data-theme="light"] .gc-segnala-cat__inner { background: #f8fafc; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-segnala-cat__inner:hover,
[data-theme="light"] .gc-segnala-cat input:checked ~ .gc-segnala-cat__inner { background: rgba(8,145,178,.04); border-color: #0891b2; }
[data-theme="light"] .gc-segnala-cat__label { color: #0f172a; }
[data-theme="light"] .gc-segnala-field__label { color: #475569; }
[data-theme="light"] .gc-segnala-field__input,
[data-theme="light"] .gc-segnala-field__textarea { background: #f8fafc; border-color: rgba(0,0,0,.08); color: #0f172a; }
[data-theme="light"] .gc-segnala-field__input:focus,
[data-theme="light"] .gc-segnala-field__textarea:focus { background: #fff; border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.08); }
[data-theme="light"] .gc-segnala-urgency__opt span { background: #f8fafc; border-color: rgba(0,0,0,.06); color: #64748b; }
[data-theme="light"] .gc-segnala-urgency__opt input:checked ~ span { background: rgba(8,145,178,.08); border-color: #0891b2; color: #0891b2; }
[data-theme="light"] .gc-segnala-checkbox { color: #475569; }
[data-theme="light"] .gc-segnala-btn--primary { background: #0891b2; color: #fff; }
[data-theme="light"] .gc-segnala-btn--send { background: linear-gradient(135deg, #0891b2, #16a34a); color: #fff; }
[data-theme="light"] .gc-segnala-btn--ghost { border-color: rgba(0,0,0,.08); color: #64748b; }
[data-theme="light"] .gc-segnala-btn--ghost:hover { background: rgba(0,0,0,.03); color: #0f172a; }
[data-theme="light"] .gc-segnala-nav { border-top-color: rgba(0,0,0,.04); }
[data-theme="light"] .gc-segnala-success__title { color: #16a34a; }
[data-theme="light"] .gc-segnala-success__desc { color: #475569; }
[data-theme="light"] .gc-segnala-faq__title { color: #0f172a; }
[data-theme="light"] .gc-segnala-faq__item { background: #fff; border-color: rgba(0,0,0,.06); }
[data-theme="light"] .gc-segnala-faq__item summary { color: #0f172a; }
[data-theme="light"] .gc-segnala-faq__item summary::after { color: #0891b2; }
[data-theme="light"] .gc-segnala-faq__item p { color: #64748b; }
/* Responsive */
@media (max-width: 640px) {
.gc-segnala-hero__title { font-size: 28px; }
.gc-segnala-hero__stats { gap: 14px; }
.gc-segnala-form { padding: 20px; border-radius: 12px; }
.gc-segnala-cats { grid-template-columns: 1fr; }
.gc-segnala-panel__title { font-size: 18px; }
.gc-segnala-steps { gap: 4px; }
.gc-segnala-step__label { display: none; }
.gc-segnala-step__sep { width: 20px; }
.gc-segnala-urgency__opt { min-width: 100%; }
.gc-segnala-nav { flex-direction: column-reverse; }
.gc-segnala-btn { width: 100%; justify-content: center; }
}
/* ════════════════════════════════════════════════════════════════
IMAGE LIGHTBOX — overlay fullscreen
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
IMAGE LIGHTBOX — overlay fullscreen
════════════════════════════════════════════════════════════════ */
.gc-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, .92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .25s, visibility .25s;
cursor: zoom-out;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.gc-lightbox--open {
opacity: 1;
visibility: visible;
}
.gc-lightbox__img {
max-width: 92vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 16px 64px rgba(0, 0, 0, .5);
transform: scale(.95);
transition: transform .3s ease;
}
.gc-lightbox--open .gc-lightbox__img {
transform: scale(1);
}
/* Close button */
.gc-lightbox__close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: rgba(255, 255, 255, .5);
font-size: 36px;
cursor: pointer;
line-height: 1;
padding: 8px;
transition: color .15s;
z-index: 3;
}
.gc-lightbox__close:hover { color: #fff; }
/* Nav arrows */
.gc-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, .08);
border: none;
color: rgba(255, 255, 255, .7);
font-size: 36px;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
z-index: 3;
line-height: 1;
}
.gc-lightbox__nav:hover {
background: rgba(255, 255, 255, .15);
color: #fff;
}
.gc-lightbox__nav--prev { left: 20px; }
.gc-lightbox__nav--next { right: 20px; }
/* Bottom bar: counter + thumbnails strip */
.gc-lightbox__bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 20px 16px;
background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%);
z-index: 2;
}
.gc-lightbox__counter {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, .5);
letter-spacing: .05em;
}
.gc-lightbox__strip {
display: flex;
gap: 6px;
overflow-x: auto;
max-width: 90vw;
padding: 4px 0;
scrollbar-width: none;
}
.gc-lightbox__strip::-webkit-scrollbar { display: none; }
.gc-lightbox__thumb {
width: 56px;
height: 38px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
opacity: .4;
transition: opacity .15s, outline-color .15s;
flex-shrink: 0;
outline: 2px solid transparent;
}
.gc-lightbox__thumb:hover { opacity: .7; }
.gc-lightbox__thumb--active {
opacity: 1;
outline-color: #ef9e40;
}
/* ── Light mode lightbox ── */
[data-theme="light"] .gc-lightbox {
background: rgba(255, 255, 255, .96);
}
[data-theme="light"] .gc-lightbox__close { color: rgba(0, 0, 0, .35); }
[data-theme="light"] .gc-lightbox__close:hover { color: #000; }
[data-theme="light"] .gc-lightbox__nav { background: rgba(0, 0, 0, .06); color: rgba(0, 0, 0, .5); }
[data-theme="light"] .gc-lightbox__nav:hover { background: rgba(0, 0, 0, .1); color: #000; }
[data-theme="light"] .gc-lightbox__bottom { background: linear-gradient(to top, rgba(255,255,255,.8) 0%, transparent 100%); }
[data-theme="light"] .gc-lightbox__counter { color: rgba(0, 0, 0, .4); }
[data-theme="light"] .gc-lightbox__thumb { opacity: .3; }
[data-theme="light"] .gc-lightbox__thumb:hover { opacity: .6; }
[data-theme="light"] .gc-lightbox__thumb--active { opacity: 1; outline-color: #c07a18; }
[data-theme="light"] .gc-lightbox__img { box-shadow: 0 12px 48px rgba(0, 0, 0, .12); }
/* ── Mobile lightbox ── */
@media (max-width: 768px) {
.gc-lightbox__nav { width: 36px; height: 36px; font-size: 28px; }
.gc-lightbox__nav--prev { left: 10px; }
.gc-lightbox__nav--next { right: 10px; }
.gc-lightbox__thumb { width: 44px; height: 30px; }
.gc-lightbox__close { top: 10px; right: 12px; font-size: 28px; }
}
/* ============================================================
ARTICOLI CORRELATI — 4 colonne PC, 2 mobile
============================================================ */
.related-posts__grid {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.related-posts__grid {
grid-template-columns: repeat(4, 1fr);
}
.related-posts__grid .gc-card__title {
font-size: .85rem;
line-height: 1.35;
}
}
/* ============================================================
SELF-EMBED FIX — embed interni gamecast.it ridimensionati
============================================================ */
.entry-content .wp-block-embed.is-provider-gamecast-it {
max-height: 160px;
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--border);
position: relative;
background: var(--bg-card);
}
.entry-content .wp-block-embed.is-provider-gamecast-it .wp-block-embed__wrapper {
max-height: 160px;
overflow: hidden;
}
.entry-content .wp-block-embed.is-provider-gamecast-it iframe {
max-height: 160px;
border-radius: 12px;
}
/* ============================================================
FAQ PREMIUM — wp-block-details dentro entry-content
============================================================ */
.entry-content .wp-block-details {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-card);
margin-bottom: 0;
overflow: hidden;
transition: border-color .2s;
}
.entry-content .wp-block-details + .wp-block-details {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.entry-content .wp-block-details[open] {
border-color: var(--color-orange);
}
.entry-content .wp-block-details summary {
padding: 16px 20px;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
transition: background .15s;
}
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::marker { display: none; content: ""; }
.entry-content .wp-block-details summary:hover {
background: rgba(239,158,64,.06);
}
.entry-content .wp-block-details summary::after {
content: "+";
font-size: 1.35rem;
font-weight: 400;
color: var(--color-orange);
flex-shrink: 0;
transition: transform .2s;
line-height: 1;
}
.entry-content .wp-block-details[open] > summary::after {
content: "\2212";
}
.entry-content .wp-block-details[open] > summary {
border-bottom: 1px solid var(--border);
}
.entry-content .wp-block-details > *:not(summary) {
padding: 0 20px;
}
.entry-content .wp-block-details > p:first-of-type {
padding-top: 14px;
}
.entry-content .wp-block-details > p:last-of-type {
padding-bottom: 16px;
}
.entry-content .wp-block-details > p {
color: var(--text-secondary);
font-size: .925rem;
line-height: 1.7;
margin-bottom: 8px;
}
.entry-content .wp-block-details > p:last-child {
margin-bottom: 0;
}
@media (max-width: 480px) {
.entry-content .wp-block-details summary {
padding: 14px 16px;
font-size: .925rem;
}
.entry-content .wp-block-details > *:not(summary) {
padding: 0 16px;
}
}
/* ============================================================
POST NAV — Seguici su Instagram (slot vuoto next)
============================================================ */
.post-navigation__card--instagram {
flex: 1;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
border-radius: 12px;
text-decoration: none;
color: #fff;
transition: transform .15s, box-shadow .15s;
min-width: 0;
}
.post-navigation__card--instagram:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(131,58,180,.35);
color: #fff;
}
.post-navigation__card--instagram:visited { color: #fff; }
.post-navigation__ig-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: rgba(255,255,255,.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.post-navigation__ig-icon svg {
width: 22px;
height: 22px;
fill: #fff;
}
.post-navigation__ig-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.post-navigation__ig-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .85;
}
.post-navigation__ig-handle {
font-size: .95rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 480px) {
.post-navigation__card--instagram {
padding: 14px 16px;
gap: 12px;
}
.post-navigation__ig-icon {
width: 36px;
height: 36px;
border-radius: 8px;
}
.post-navigation__ig-icon svg {
width: 20px;
height: 20px;
}
}
/* ============================================================
HOMEPAGE HERO - magazine style (1 main + 2 secondary)
============================================================ */
.hp-hero {
padding: 24px 0 8px;
}
.hp-hero__wrap {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 16px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Main hero card */
.hp-hero__main {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: #0d0d0d;
}
.hp-hero__img {
position: absolute;
inset: 0;
}
.hp-hero__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.hp-hero__main:hover .hp-hero__img img {
transform: scale(1.04);
}
.hp-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0) 30%,
rgba(0,0,0,.55) 70%,
rgba(0,0,0,.92) 100%);
pointer-events: none;
}
.hp-hero__content {
position: relative;
z-index: 2;
padding: 32px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
}
.hp-hero__kicker {
display: inline-block;
padding: 4px 11px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--color-link, #00ade2);
color: #fff;
border-radius: 999px;
align-self: flex-start;
}
.hp-hero__main h2 {
margin: 0;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 900;
line-height: 1.15;
color: #fff;
letter-spacing: -0.015em;
text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.hp-hero__meta {
margin: 0;
font-size: 11.5px;
color: rgba(255,255,255,.75);
display: flex;
gap: 8px;
align-items: center;
}
.hp-hero__excerpt {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,.88);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 90%;
}
/* Secondary grid */
.hp-hero__grid {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 16px;
}
.hp-hero__card {
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: #0d0d0d;
min-height: 180px;
}
.hp-hero__card-img {
position: absolute;
inset: 0;
}
.hp-hero__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.hp-hero__card:hover .hp-hero__card-img img {
transform: scale(1.05);
}
.hp-hero__card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0) 40%,
rgba(0,0,0,.55) 75%,
rgba(0,0,0,.92) 100%);
}
.hp-hero__card-body {
position: relative;
z-index: 2;
padding: 16px 18px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
}
.hp-hero__card-kicker {
display: inline-block;
padding: 3px 9px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(0,0,0,.55);
color: #fff;
border-radius: 999px;
align-self: flex-start;
backdrop-filter: blur(4px);
}
.hp-hero__card h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hp-hero__card-meta {
font-size: 11px;
color: rgba(255,255,255,.7);
}
/* Light theme overrides */
[data-theme="light"] .hp-hero__main,
[data-theme="light"] .hp-hero__card {
background: #f5f5f5;
}
/* Responsive */
@media (max-width: 900px) {
.hp-hero__wrap {
grid-template-columns: 1fr;
}
.hp-hero__grid {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.hp-hero__main {
aspect-ratio: 16 / 11;
}
.hp-hero__content {
padding: 22px;
}
}
@media (max-width: 600px) {
.hp-hero__wrap {
padding: 0 14px;
gap: 12px;
}
.hp-hero__grid {
grid-template-columns: 1fr;
}
.hp-hero__main {
aspect-ratio: 4 / 3;
}
.hp-hero__content {
padding: 18px;
}
.hp-hero__main h2 {
font-size: 20px;
}
.hp-hero__excerpt {
font-size: 13px;
-webkit-line-clamp: 2;
}
.hp-hero__card {
min-height: 160px;
}
.hp-hero__card h3 {
font-size: 14px;
}
}
/* ============================================================
PROSSIME USCITE - griglia card con cover, countdown, status
============================================================ */
.gc-releases {
padding: 28px 20px 32px;
background: var(--bg-card, #161616);
max-width: 1280px;
margin: 24px auto;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.05);
}
.gc-releases .gc-section__header {
max-width: 1280px;
margin: 0 auto 22px;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.gc-releases__head-text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.gc-releases__intro {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,.55);
margin: 0;
max-width: 560px;
}
[data-theme="light"] .gc-releases__intro {
color: #475569;
}
@media (max-width: 600px) {
.gc-releases__intro { display: none; }
}
.gc-releases .gc-section__title {
font-size: 22px;
font-weight: 800;
color: inherit;
margin: 0;
}
.gc-releases .gc-section__link {
font-size: 13px;
font-weight: 600;
color: var(--color-link, #00ade2);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.gc-releases__strip {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px;
}
.gc-release-card {
display: flex;
flex-direction: column;
border-radius: 14px;
overflow: hidden;
background: #0d0d0d;
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
color: inherit;
transition: transform .2s, box-shadow .2s;
}
[data-theme="light"] .gc-release-card {
background: #fff;
border-color: rgba(0,0,0,.08);
}
.gc-release-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
[data-theme="light"] .gc-release-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.gc-release-card__cover {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #141414;
}
.gc-release-card__cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.gc-release-card:hover .gc-release-card__cover img {
transform: scale(1.06);
}
.gc-release-card__cover--empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: rgba(255,255,255,.15);
}
/* ── Date badge sulla cover (alto-sx): elemento dominante ── */
.gc-release-card__date-badge {
position: absolute;
top: 8px; left: 8px;
display: inline-flex;
align-items: center;
padding: 5px 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 8px;
background: rgba(10,10,18,.88);
color: #fff;
border: 1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 18px rgba(0,0,0,.45);
line-height: 1;
}
/* OGGI: rosso urgente */
.gc-release-card__date-badge--oggi {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border-color: rgba(239,68,68,.5);
color: #fff;
box-shadow: 0 6px 20px rgba(239,68,68,.35);
}
/* DOMANI: oro brand */
.gc-release-card__date-badge--domani {
background: linear-gradient(135deg, #d4b45a 0%, #c19a3d 100%);
border-color: rgba(212,180,90,.5);
color: #1a1303;
box-shadow: 0 6px 20px rgba(212,180,90,.30);
}
/* Imminent (≤14gg): oro tenue su scuro */
.gc-release-card__date-badge--imminent {
background: rgba(10,10,18,.86);
color: #f0d27a;
border-color: rgba(212,180,90,.40);
}
/* Mese: neutro scuro */
.gc-release-card__date-badge--mese {
background: rgba(10,10,18,.78);
color: rgba(255,255,255,.92);
border-color: rgba(255,255,255,.16);
}
/* TBA fallback */
.gc-release-card__date-badge--tba {
background: rgba(10,10,18,.66);
color: rgba(255,255,255,.65);
border-color: rgba(255,255,255,.12);
}
.gc-release-card__body {
padding: 12px 13px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.gc-release-card__name {
font-size: 13px;
font-weight: 700;
line-height: 1.3;
color: inherit;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.3em * 2);
}
.gc-release-card__plat {
font-size: 10.5px;
color: rgba(255,255,255,.55);
line-height: 1.3;
display: inline-flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
max-width: 100%;
}
.gc-release-card__plat-more {
font-size: 9.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: 999px;
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.7);
letter-spacing: .02em;
line-height: 1.4;
}
[data-theme="light"] .gc-release-card__plat {
color: rgba(0,0,0,.55);
}
[data-theme="light"] .gc-release-card__plat-more {
background: rgba(0,0,0,.05);
color: rgba(0,0,0,.7);
}
/* Status badge editoriale (sostituisce "Presto su Gamecast") */
.gc-release-card__status-badge {
display: inline-block;
margin-top: auto;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
align-self: flex-start;
white-space: nowrap;
}
/* Status editoriale: cosa Gamecast offre sul gioco */
.gc-release-card__status-badge--hub {
background: rgba(212,180,90,.14);
color: #f0d27a;
border: 1px solid rgba(212,180,90,.4);
}
.gc-release-card__status-badge--covered {
background: rgba(0,173,226,.14);
color: #7dd3fc;
border: 1px solid rgba(0,173,226,.32);
}
.gc-release-card__status-badge--follow {
background: rgba(157,92,224,.14);
color: #c4b5fd;
border: 1px solid rgba(157,92,224,.32);
}
.gc-release-card__status-badge--incoming {
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.10);
}
[data-theme="light"] .gc-release-card__status-badge--hub { background: rgba(195,134,15,.10); color: #8a6a1a; border-color: rgba(195,134,15,.32); }
[data-theme="light"] .gc-release-card__status-badge--covered { background: rgba(2,132,199,.10); color: #0369a1; border-color: rgba(2,132,199,.28); }
[data-theme="light"] .gc-release-card__status-badge--follow { background: rgba(124,58,237,.08); color: #6d28d9; border-color: rgba(124,58,237,.28); }
[data-theme="light"] .gc-release-card__status-badge--incoming { background: rgba(0,0,0,.04); color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.08); }
/* Responsive Prossime Uscite */
@media (max-width: 1024px) {
.gc-releases__strip {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.gc-releases__strip {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
html body.home .gc-releases { padding: 18px 0 22px; margin: 18px 10px; border-radius: 16px; }
/* Header compatto: titolo + CTA sulla stessa riga.
Specificità alta (html body.home + 2 class) per battere i global !important. */
html body.home .gc-releases .gc-section__header {
padding: 0 16px !important;
margin-bottom: 12px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}
html body.home .gc-releases .gc-section__title { font-size: 18px !important; flex: 1 1 auto !important; }
html body.home .gc-releases .gc-section__link {
flex-shrink: 0 !important;
flex: 0 0 auto !important;
margin: 0 !important;
max-width: none !important;
width: auto !important;
padding: 6px 12px !important;
font-size: 11px !important;
align-self: center !important;
}
.gc-releases__strip {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px;
-webkit-overflow-scrolling: touch;
padding: 0 16px 6px;
gap: 10px;
scrollbar-width: none;
}
.gc-releases__strip::-webkit-scrollbar { display: none; }
.gc-release-card {
flex: 0 0 150px;
min-width: 150px;
scroll-snap-align: start;
border-radius: 12px;
}
.gc-release-card__date-badge {
font-size: 9.5px;
padding: 4px 8px;
top: 6px; left: 6px;
letter-spacing: .1em;
}
.gc-release-card__body { padding: 10px 11px 12px; gap: 5px; }
.gc-release-card__name {
font-size: 12.5px;
line-height: 1.25;
min-height: calc(1.25em * 2);
}
.gc-release-card__plat { font-size: 10px; }
.gc-release-card__status-badge {
font-size: 9px;
padding: 3px 8px;
letter-spacing: .06em;
}
}
/* ============================================================
HUB SPOTLIGHT - gioco in evidenza con blurred bg
============================================================ */
.gc-hub-spotlight {
position: relative;
max-width: 1280px;
margin: 32px auto;
border-radius: 22px;
overflow: hidden;
min-height: 340px;
background: #0d0d0d;
isolation: isolate;
border: 1px solid rgba(255,255,255,.06);
}
.gc-hub-spotlight__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(28px) brightness(.5) saturate(1.15);
transform: scale(1.15);
z-index: 0;
}
.gc-hub-spotlight__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(0,0,0,.78) 0%,
rgba(0,0,0,.55) 55%,
rgba(0,0,0,.72) 100%);
z-index: 1;
}
.gc-hub-spotlight__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr 220px;
gap: 36px;
padding: 40px 44px;
align-items: center;
color: #fff;
}
.gc-hub-spotlight__cover {
flex-shrink: 0;
width: 220px;
aspect-ratio: 3 / 4;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 22px 56px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.08),
0 0 60px -10px var(--hg-accent, rgba(212,180,90,.4));
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.gc-hub-spotlight:hover .gc-hub-spotlight__cover {
transform: translateY(-3px);
box-shadow:
0 28px 64px rgba(0,0,0,.6),
0 0 0 1px rgba(255,255,255,.12),
0 0 80px -8px var(--hg-accent, rgba(212,180,90,.55));
}
.gc-hub-spotlight__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gc-hub-spotlight__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 640px;
}
.gc-hub-spotlight__eyebrow {
display: inline-block;
padding: 4px 11px;
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
background: var(--hg-accent, #00ade2);
color: #fff;
border-radius: 999px;
align-self: flex-start;
}
.gc-hub-spotlight__title {
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 900;
line-height: 1.15;
color: #fff;
margin: 0;
letter-spacing: -0.015em;
text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.gc-hub-spotlight__tagline {
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,.82);
margin: 0;
max-width: 560px;
}
.gc-hub-spotlight__meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: rgba(255,255,255,.6);
font-weight: 500;
}
.gc-hub-spotlight__meta span:not(:last-child)::after {
content: '';
margin-left: 16px;
display: inline-block;
width: 3px;
height: 3px;
background: rgba(255,255,255,.3);
border-radius: 50%;
vertical-align: middle;
transform: translateY(-2px);
}
.gc-hub-spotlight__cta {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-top: 8px;
padding: 11px 22px;
background: var(--hg-accent, #00ade2);
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
border-radius: 10px;
transition: transform .15s, box-shadow .15s, filter .15s;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.gc-hub-spotlight__cta:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.gc-hub-spotlight__cta svg {
transition: transform .2s;
}
.gc-hub-spotlight__cta:hover svg {
transform: translateX(3px);
}
/* ─── Panel "Dentro l'hub" ─── */
.gc-hub-spotlight__panel {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
padding: 20px 18px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.gc-hub-spotlight__panel-eyebrow {
display: block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: #d4b45a;
margin-bottom: 2px;
}
.gc-hub-spotlight__chips {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.gc-hub-spotlight__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .01em;
color: rgba(255,255,255,.82);
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
transition: background .18s, border-color .18s;
}
.gc-hub-spotlight__chip:hover {
background: rgba(212,180,90,.12);
border-color: rgba(212,180,90,.32);
}
.gc-hub-spotlight__chip--count {
background: rgba(212,180,90,.14);
border-color: rgba(212,180,90,.34);
color: #f0d27a;
}
.gc-hub-spotlight__chip--count strong {
font-weight: 800;
color: #d4b45a;
margin-right: 2px;
}
/* HUB SPOTLIGHT in light mode: il container resta cinematografico (overlay dark)
quindi tutti i testi/pannelli devono restare in palette dark per leggibilità.
Niente switch light: è una card "always dark" intenzionale. */
[data-theme="light"] .gc-hub-spotlight__panel {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.07);
}
[data-theme="light"] .gc-hub-spotlight__panel-eyebrow { color: #d4b45a; }
[data-theme="light"] .gc-hub-spotlight__chip {
color: rgba(255,255,255,.82);
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.08);
}
[data-theme="light"] .gc-hub-spotlight__chip:hover {
background: rgba(212,180,90,.12);
border-color: rgba(212,180,90,.32);
}
[data-theme="light"] .gc-hub-spotlight__chip--count {
background: rgba(212,180,90,.14);
border-color: rgba(212,180,90,.34);
color: #f0d27a;
}
[data-theme="light"] .gc-hub-spotlight__chip--count strong { color: #d4b45a; }
/* ── Tablet (≤960): pannello chips va sotto, layout 2 col cover|body ── */
@media (max-width: 960px) {
.gc-hub-spotlight__inner {
grid-template-columns: auto 1fr;
grid-template-areas:
"cover body"
"panel panel";
gap: 28px;
padding: 32px 32px;
align-items: start;
}
.gc-hub-spotlight__cover { grid-area: cover; width: 180px; }
.gc-hub-spotlight__body { grid-area: body; align-self: center; }
.gc-hub-spotlight__panel {
grid-area: panel;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
}
.gc-hub-spotlight__chips {
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
}
/* ── Mobile (≤768): stack verticale completo ── */
@media (max-width: 768px) {
.gc-hub-spotlight {
margin: 20px 14px;
border-radius: 16px;
min-height: 0;
}
.gc-hub-spotlight__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"cover"
"body"
"panel";
padding: 22px 20px;
gap: 18px;
}
/* Reset min-width per evitare overflow degli item con contenuto largo */
.gc-hub-spotlight__inner > * { min-width: 0; }
.gc-hub-spotlight__cover {
grid-area: cover;
width: 140px;
margin: 0 auto;
justify-self: center;
box-shadow:
0 16px 40px rgba(0,0,0,.5),
0 0 0 1px rgba(255,255,255,.08),
0 0 50px -8px var(--hg-accent, rgba(212,180,90,.4));
}
.gc-hub-spotlight__body {
grid-area: body;
text-align: center;
align-items: center;
width: 100%;
max-width: 100%;
min-width: 0;
}
.gc-hub-spotlight__eyebrow { align-self: center; }
.gc-hub-spotlight__meta { justify-content: center; }
.gc-hub-spotlight__title {
font-size: clamp(20px, 5.4vw, 26px);
max-width: 100%;
word-wrap: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.gc-hub-spotlight__tagline {
font-size: 13.5px;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.gc-hub-spotlight__meta {
max-width: 100%;
word-wrap: break-word;
}
.gc-hub-spotlight__cta {
align-self: stretch;
justify-content: center;
padding: 13px 22px;
font-size: 12.5px;
}
/* Panel: max-width 100% così chips non sforano */
.gc-hub-spotlight__panel {
grid-area: panel;
padding: 12px 14px;
background: rgba(255,255,255,.03);
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.gc-hub-spotlight__panel-eyebrow {
text-align: center;
font-size: 10px;
}
.gc-hub-spotlight__chips {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding-bottom: 2px;
margin: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%;
}
.gc-hub-spotlight__chips::-webkit-scrollbar { display: none; }
.gc-hub-spotlight__chip {
flex-shrink: 0;
font-size: 12px;
padding: 6px 11px;
white-space: nowrap;
}
}
@media (max-width: 480px) {
.gc-hub-spotlight { margin: 18px 10px; }
.gc-hub-spotlight__inner { padding: 20px 16px; }
.gc-hub-spotlight__cover { width: 120px; }
.gc-hub-spotlight__title { font-size: clamp(19px, 5.6vw, 23px); }
.gc-hub-spotlight__tagline { font-size: 13px; line-height: 1.5; }
}
/* ═══════════════════════════════════════════════════════════════
GC MOBILE POLISH — 2026-04-29
Rifinitura mobile-only: coerenza font intestazioni, news card
"a bolla", spaziature, ritmo verticale. Solo max-width queries:
nessun impatto su desktop.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* 1. Intro/sottotitolo sezione: SEMPRE nascosto su mobile per
coerenza (prima alcune sezioni lo mostravano, altre no). */
html body.home .gc-section__intro,
html body.home .gc-bibbia__header .gc-section__intro {
display: none !important;
}
/* 2. Section title — uniforma il box "Prossime uscite" che era
18px / weight 800 mentre gli altri sono Archivo 900 24px. */
html body.home .gc-releases .gc-section__title {
font-family: 'Archivo', -apple-system, sans-serif !important;
font-size: 24px !important;
font-weight: 900 !important;
letter-spacing: -.025em !important;
line-height: 1.05 !important;
}
/* 3. Ritmo verticale tra sezioni (era 16px → un po' più aria). */
.gc-section + .gc-section {
margin-top: 22px !important;
}
/* 4. NEWS — titoli "a bolla": font Archivo coerente, dimensioni
armonizzate, line-height più stretta, body distribuito. */
.gc-news-featured__title,
.gc-news-secondary__title,
.gc-news-card__title {
font-family: 'Archivo', -apple-system, sans-serif;
letter-spacing: -.01em;
}
.gc-news-featured__title {
font-size: 18px;
font-weight: 800;
line-height: 1.22;
-webkit-line-clamp: 3;
}
/* Secondary e Card: stessa scala visiva (entrambe row layout). */
.gc-news-secondary__title,
.gc-news-card__title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.28;
-webkit-line-clamp: 2;
}
/* Body distribuito: kicker in alto, time in basso, titolo
centrato → risultato "a bolla" nella card row. */
.gc-news-secondary__link,
.gc-news-card__link {
align-items: stretch;
}
.gc-news-secondary__body,
.gc-news-card__body {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 12px 10px;
min-height: 78px;
gap: 4px;
}
.gc-news-secondary__body { min-height: 85px; padding: 10px 14px; }
.gc-news-secondary__time,
.gc-news-card__time {
margin-top: auto;
font-size: 10.5px;
}
.gc-news-secondary__cat,
.gc-news-card__cat {
font-size: 9.5px;
letter-spacing: .08em;
}
/* Featured: padding più contenuto + kicker leggibile */
.gc-news-featured__body { padding: 14px 16px; gap: 6px; }
.gc-news-featured__cat { font-size: 10px; letter-spacing: .09em; }
/* 5. RECENSIONI list rows — stessa scala dei news card. */
.gc-rv__row-body .gc-rv__title {
font-family: 'Archivo', -apple-system, sans-serif;
font-size: 14px !important;
font-weight: 700;
line-height: 1.28;
letter-spacing: -.01em;
}
.gc-rv__title--hero {
font-family: 'Archivo', -apple-system, sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.22;
letter-spacing: -.015em;
}
/* 6. GIOCHI DEL MOMENTO — nome card coerente */
.gc-game-card__name,
.gc-game-card__name a {
font-family: 'Archivo', -apple-system, sans-serif;
font-size: 13.5px;
font-weight: 800;
line-height: 1.22;
letter-spacing: -.01em;
}
/* 7. BIBBIA giochi — nome coerente */
.gc-bibbia-game__name {
font-family: 'Archivo', -apple-system, sans-serif;
font-weight: 800;
letter-spacing: -.01em;
}
/* 8. RETRO spotlight — titolo coerente, eyebrow leggibile */
.gc-retro-spotlight__title {
font-family: 'Archivo', -apple-system, sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.015em;
}
.gc-retro-spotlight__eyebrow { font-size: 9.5px; letter-spacing: .14em; }
/* 9. HERO — titolo card secondarie coerente in famiglia */
.hp-hero__main h2,
.hp-hero__card h3 {
font-family: 'Archivo', -apple-system, sans-serif;
letter-spacing: -.015em;
}
/* 10. RELEASE cards — nome gioco coerente */
.gc-release-card__name {
font-family: 'Archivo', -apple-system, sans-serif;
font-weight: 800;
letter-spacing: -.005em;
}
}
/* Headers sezione: se il titolo è lungo permetti il wrap della CTA
sotto (es. "Giochi caldi, guide e codici" + "TUTTE LE GUIDE"). */
@media (max-width: 480px) {
html body.home .gc-section__header,
html body.home .gc-bibbia__header,
html body.home .gc-section-head,
html body.home .gc-review-head {
flex-wrap: wrap !important;
align-items: flex-start !important;
}
/* Header-left: prende sempre tutta la riga se il titolo non sta */
html body.home .gc-bibbia__header-left,
html body.home .gc-section-head > div:first-child,
html body.home .gc-review-head__left,
html body.home .gc-releases__head-text,
html body.home .gc-section__head-text {
flex: 1 1 100% !important;
}
/* Bibbia: forza titolo full width per non troncarsi */
html body.home .gc-bibbia__title {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
-webkit-line-clamp: unset !important;
display: block !important;
}
/* CTA pill: si auto-allinea a destra anche dopo il wrap */
html body.home .gc-section__link,
html body.home .gc-bibbia__link,
html body.home .gc-section-head .gc-link,
html body.home .gc-section-head a:last-child {
margin-left: auto !important;
}
}
/* Phone stretto: piccoli ritocchi extra */
@media (max-width: 380px) {
.gc-news-featured__title { font-size: 17px; }
.gc-news-secondary__title,
.gc-news-card__title { font-size: 14px; }
.gc-news-card__img,
.gc-news-secondary__img {
width: 104px !important;
min-width: 104px !important;
max-width: 104px !important;
}
}
/* ── /GC MOBILE POLISH ────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
GC TRENDING (Giochi del momento) — REDESIGN DARK
Override finale (alta specificità via html body.home) per dare
un look più premium con cornici chiare, accenti oro coerenti,
e meta panel sottostante alla cover invece che fluttuante.
═══════════════════════════════════════════════════════════════ */
html body.home .gc-trending-games {
background:
radial-gradient(ellipse at top left, rgba(212,180,90,.06), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(99,102,241,.05), transparent 55%),
linear-gradient(180deg, #0a0a0d 0%, #0f0f15 100%) !important;
padding: 70px 0 80px !important;
position: relative;
overflow: hidden;
}
html body.home .gc-trending-games::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px);
background-size: 100% 80px;
pointer-events: none;
opacity: .4;
}
html body.home .gc-trending-games .gc-section-head {
align-items: center;
margin-bottom: 38px !important;
position: relative;
z-index: 1;
}
html body.home .gc-trending-games .gc-section-head h2 {
font-size: 34px !important;
font-weight: 800 !important;
letter-spacing: -.015em;
line-height: 1.1 !important;
background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.78) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff !important;
position: relative;
padding-bottom: 10px;
}
html body.home .gc-trending-games .gc-section-head h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
background: linear-gradient(90deg, #d4b45a 0%, rgba(212,180,90,.2) 100%);
border-radius: 2px;
margin-top: 10px;
}
html body.home .gc-trending-games .gc-subtitle {
font-size: 14px !important;
color: rgba(255,255,255,.5) !important;
margin-top: 8px !important;
}
html body.home .gc-trending-games .gc-link {
background: rgba(212,180,90,.08);
color: #f0d27a !important;
border: 1px solid rgba(212,180,90,.4) !important;
padding: 9px 18px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
transition: all .18s !important;
}
html body.home .gc-trending-games .gc-link:hover {
background: rgba(212,180,90,.18) !important;
border-color: #d4b45a !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(212,180,90,.18);
}
/* Grid: spaziatura più generosa */
html body.home .gc-trending-grid {
gap: 22px !important;
position: relative;
z-index: 1;
}
/* ── Card: cornice unita (cover + meta panel) ── */
html body.home .gc-game-card {
background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)) !important;
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px !important;
overflow: hidden;
transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .18s, background .18s !important;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
html body.home .gc-game-card:hover {
background: linear-gradient(180deg, rgba(212,180,90,.05), rgba(255,255,255,.02)) !important;
border-color: rgba(212,180,90,.32) !important;
transform: translateY(-4px) !important;
box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(212,180,90,.08) inset !important;
}
/* Cover: aspect ratio + senza border-radius autonomo (eredita dal parent) */
html body.home .gc-game-thumb {
border-radius: 14px 14px 0 0 !important;
aspect-ratio: 3 / 4;
background: #1a1a1a;
}
/* Overlay più forte in basso per leggibilità del badge */
html body.home .gc-game-thumb .gc-overlay {
background: linear-gradient(
to top,
rgba(0,0,0,.85) 0%,
rgba(0,0,0,.5) 30%,
rgba(0,0,0,.05) 70%,
transparent 100%
) !important;
}
html body.home .gc-game-card:hover .gc-game-thumb {
box-shadow: none !important;
}
html body.home .gc-game-card:hover .gc-game-thumb img {
transform: scale(1.04);
transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
html body.home .gc-game-thumb img {
transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
/* Trend badge (IN CRESCITA): più discreto, non fluo */
html body.home .gc-trend-badge {
background: rgba(34,197,94,.18) !important;
color: #6ee7b7 !important;
border: 1px solid rgba(34,197,94,.4);
border-radius: 6px !important;
padding: 4px 9px !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* ── Meta panel: parte sotto la cover, trasparente per fondersi con la card ── */
html body.home .gc-game-card .gc-game-meta {
padding: 14px 14px 14px !important;
display: flex;
flex-direction: column;
gap: 9px;
background: transparent !important;
border-top: none !important;
}
html body.home .gc-game-card .gc-game-card__name {
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: -.005em;
margin: 0 !important;
}
html body.home .gc-game-card .gc-game-card__name a:hover {
color: #f0d27a !important;
}
/* Reason chip: più sobrio, tipografia più tight */
html body.home .gc-game-card__reason {
font-size: 9.5px !important;
letter-spacing: .1em !important;
padding: 3px 8px !important;
border-radius: 4px !important;
background: rgba(212,180,90,.10);
color: #f0d27a;
border: 1px solid rgba(212,180,90,.28);
}
/* Varianti più desaturate, leggibili in dark */
html body.home .gc-game-card__reason--hub-aggiornato-oggi { background: rgba(34,197,94,.08) !important; color: #86efac !important; border-color: rgba(34,197,94,.28) !important; }
html body.home .gc-game-card__reason--uscita-vicina { background: rgba(212,180,90,.10) !important; color: #f0d27a !important; border-color: rgba(212,180,90,.34) !important; }
html body.home .gc-game-card__reason--nuove-guide { background: rgba(99,102,241,.10) !important; color: #a5b4fc !important; border-color: rgba(99,102,241,.32) !important; }
html body.home .gc-game-card__reason--recensione-online { background: rgba(168,85,247,.10) !important; color: #d8b4fe !important; border-color: rgba(168,85,247,.30) !important; }
html body.home .gc-game-card__reason--copertura-attiva { background: rgba(255,255,255,.04) !important; color: rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.10) !important; }
html body.home .gc-game-card__reason--molto-letto { background: rgba(239,68,68,.08) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.28) !important; }
/* Spokes: tutti default oro per coerenza palette (override colori multipli) */
html body.home .gc-game-card__spokes {
gap: 5px !important;
}
html body.home .gc-game-spoke {
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.7) !important;
padding: 4px 10px 4px 22px !important;
font-size: 9.5px !important;
letter-spacing: .07em !important;
border-radius: 5px !important;
transition: all .15s !important;
}
html body.home .gc-game-spoke::before {
color: rgba(212,180,90,.7) !important;
font-size: 10px !important;
}
html body.home .gc-game-spoke:hover {
background: rgba(212,180,90,.12) !important;
border-color: rgba(212,180,90,.45) !important;
color: #f0d27a !important;
}
html body.home .gc-game-spoke:hover::before {
color: #d4b45a !important;
}
/* Mantieni accenti rosso per spoke "tier list" / "trofei" che giustamente devono spiccare */
html body.home .gc-game-spoke--red {
background: rgba(239,68,68,.08) !important;
border-color: rgba(239,68,68,.28) !important;
color: #fca5a5 !important;
}
html body.home .gc-game-spoke--red::before { color: rgba(239,68,68,.85) !important; }
html body.home .gc-game-spoke--red:hover {
background: rgba(239,68,68,.16) !important;
border-color: rgba(239,68,68,.5) !important;
color: #fda4af !important;
}
/* "+N contenuti" link: più visibile, button-like */
html body.home .gc-game-card__more {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(212,180,90,.06);
border: 1px solid rgba(212,180,90,.2);
border-radius: 6px;
color: #f0d27a !important;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none !important;
transition: all .15s;
margin-top: 2px;
align-self: flex-start;
}
html body.home .gc-game-card__more:hover {
background: rgba(212,180,90,.16);
border-color: rgba(212,180,90,.5);
color: #fff !important;
transform: translateX(2px);
}
html body.home .gc-game-card__more svg {
transition: transform .15s;
}
html body.home .gc-game-card__more:hover svg {
transform: translateX(2px);
}
/* Responsive: 2-3 colonne su tablet, 1 su mobile (mantenendo design) */
@media (max-width: 1100px) {
html body.home .gc-trending-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
html body.home .gc-trending-grid { grid-template-columns: repeat(2, 1fr) !important; }
html body.home .gc-trending-games { padding: 50px 0 !important; }
html body.home .gc-trending-games .gc-section-head h2 { font-size: 26px !important; }
}
@media (max-width: 480px) {
html body.home .gc-trending-grid { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════
LIGHT MODE — controparte chiara per tutto il blocco trending
═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] body.home .gc-trending-games {
background:
radial-gradient(ellipse at top left, rgba(212,180,90,.12), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(99,102,241,.06), transparent 55%),
linear-gradient(180deg, #fafaf7 0%, #f3f1ec 100%) !important;
}
html[data-theme="light"] body.home .gc-trending-games::before {
background-image: linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px) !important;
}
/* Header — light: solid color, no gradient trick (evita box nero residuo) */
html[data-theme="light"] body.home .gc-trending-games .gc-section-head h2 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #1a1a26 !important;
color: #1a1a26 !important;
}
html[data-theme="light"] body.home .gc-trending-games .gc-section-head h2::after {
background: linear-gradient(90deg, #c3860f 0%, rgba(195,134,15,.2) 100%) !important;
}
html[data-theme="light"] body.home .gc-trending-games .gc-subtitle {
color: rgba(0,0,0,.55) !important;
}
html[data-theme="light"] body.home .gc-trending-games .gc-link {
background: rgba(195,134,15,.10) !important;
color: #8a6a1a !important;
border-color: rgba(195,134,15,.45) !important;
}
html[data-theme="light"] body.home .gc-trending-games .gc-link:hover {
background: rgba(195,134,15,.22) !important;
border-color: #c3860f !important;
color: #5b4711 !important;
box-shadow: 0 6px 20px rgba(195,134,15,.18) !important;
}
/* Card cornice */
html[data-theme="light"] body.home .gc-game-card {
background: linear-gradient(180deg, #ffffff, rgba(250,250,247,.85)) !important;
border-color: rgba(0,0,0,.08) !important;
box-shadow: 0 2px 10px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body.home .gc-game-card:hover {
background: linear-gradient(180deg, rgba(212,180,90,.06), #ffffff) !important;
border-color: rgba(195,134,15,.4) !important;
box-shadow: 0 14px 32px rgba(15,23,42,.14), 0 0 0 1px rgba(195,134,15,.12) inset !important;
}
/* Cover stays dark for image legibility — overlay più tenue però */
html[data-theme="light"] body.home .gc-game-thumb {
background: #f0f0ee !important;
}
html[data-theme="light"] body.home .gc-game-thumb .gc-overlay {
background: linear-gradient(
to top,
rgba(0,0,0,.7) 0%,
rgba(0,0,0,.35) 35%,
transparent 75%
) !important;
}
/* Trend badge "IN CRESCITA" */
html[data-theme="light"] body.home .gc-trend-badge {
background: rgba(22,163,74,.18) !important;
color: #15803d !important;
border-color: rgba(22,163,74,.4) !important;
box-shadow: 0 2px 8px rgba(22,163,74,.18) !important;
}
/* Meta panel — trasparente anche in light, si fonde con la card */
html[data-theme="light"] body.home .gc-game-card .gc-game-meta {
background: transparent !important;
border-top: none !important;
}
html[data-theme="light"] body.home .gc-game-card .gc-game-card__name,
html[data-theme="light"] body.home .gc-game-card .gc-game-card__name a {
color: #0f172a !important;
}
html[data-theme="light"] body.home .gc-game-card .gc-game-card__name a:hover {
color: #c3860f !important;
}
/* Reason chip — controparti light più scure per leggibilità */
html[data-theme="light"] body.home .gc-game-card__reason {
background: rgba(195,134,15,.10) !important;
color: #8a6a1a !important;
border-color: rgba(195,134,15,.32) !important;
}
html[data-theme="light"] body.home .gc-game-card__reason--hub-aggiornato-oggi { background: rgba(22,163,74,.10) !important; color: #15803d !important; border-color: rgba(22,163,74,.32) !important; }
html[data-theme="light"] body.home .gc-game-card__reason--uscita-vicina { background: rgba(195,134,15,.10) !important; color: #8a6a1a !important; border-color: rgba(195,134,15,.34) !important; }
html[data-theme="light"] body.home .gc-game-card__reason--nuove-guide { background: rgba(79,70,229,.08) !important; color: #4338ca !important; border-color: rgba(79,70,229,.30) !important; }
html[data-theme="light"] body.home .gc-game-card__reason--recensione-online { background: rgba(124,58,237,.08) !important; color: #6d28d9 !important; border-color: rgba(124,58,237,.28) !important; }
html[data-theme="light"] body.home .gc-game-card__reason--copertura-attiva { background: rgba(0,0,0,.04) !important; color: rgba(0,0,0,.65) !important; border-color: rgba(0,0,0,.14) !important; }
html[data-theme="light"] body.home .gc-game-card__reason--molto-letto { background: rgba(220,38,38,.08) !important; color: #b91c1c !important; border-color: rgba(220,38,38,.28) !important; }
/* Spokes — bianchi con bordi soft per leggibilità */
html[data-theme="light"] body.home .gc-game-spoke {
background: rgba(255,255,255,.7) !important;
border-color: rgba(0,0,0,.12) !important;
color: rgba(15,23,42,.78) !important;
}
html[data-theme="light"] body.home .gc-game-spoke::before {
color: rgba(195,134,15,.85) !important;
}
html[data-theme="light"] body.home .gc-game-spoke:hover {
background: rgba(195,134,15,.10) !important;
border-color: rgba(195,134,15,.45) !important;
color: #8a6a1a !important;
}
html[data-theme="light"] body.home .gc-game-spoke:hover::before {
color: #c3860f !important;
}
/* Eccezione red anche in light */
html[data-theme="light"] body.home .gc-game-spoke--red {
background: rgba(220,38,38,.06) !important;
border-color: rgba(220,38,38,.28) !important;
color: #b91c1c !important;
}
html[data-theme="light"] body.home .gc-game-spoke--red::before { color: #dc2626 !important; }
html[data-theme="light"] body.home .gc-game-spoke--red:hover {
background: rgba(220,38,38,.14) !important;
border-color: rgba(220,38,38,.5) !important;
color: #991b1b !important;
}
/* "+N contenuti" in light */
html[data-theme="light"] body.home .gc-game-card__more {
background: rgba(195,134,15,.06) !important;
border-color: rgba(195,134,15,.25) !important;
color: #8a6a1a !important;
}
html[data-theme="light"] body.home .gc-game-card__more:hover {
background: rgba(195,134,15,.18) !important;
border-color: rgba(195,134,15,.55) !important;
color: #5b4711 !important;
}
/* ── /GC TRENDING REDESIGN ────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
GC INTERNAL LINKS — icona ↗ oro su link interni Gamecast
Target: solo .entry-content (corpo articolo) — escluso menu/nav/footer.
Esclude: link che avvolgono immagini, pulsanti embed, classi opt-out.
═══════════════════════════════════════════════════════════════ */
.entry-content a[href*="gamecast.it"]:not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]),
.entry-content a[href^="/"]:not([href^="//"]):not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]) {
color: #d4b45a;
text-decoration: none;
border-bottom: 1px dotted rgba(212,180,90,.45);
padding-bottom: 1px;
transition: color .15s, border-color .15s, background .15s;
}
.entry-content a[href*="gamecast.it"]:not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]):hover,
.entry-content a[href^="/"]:not([href^="//"]):not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]):hover {
color: #f0d27a;
border-bottom-color: #d4b45a;
background: rgba(212,180,90,.08);
}
/* Icona ↗ inline dopo il testo del link */
.entry-content a[href*="gamecast.it"]:not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"])::after,
.entry-content a[href^="/"]:not([href^="//"]):not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"])::after {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin-left: 4px;
vertical-align: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: .85;
transition: transform .15s, opacity .15s;
}
.entry-content a[href*="gamecast.it"]:not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]):hover::after,
.entry-content a[href^="/"]:not([href^="//"]):not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]):hover::after {
transform: translate(2px, -2px);
opacity: 1;
}
/* Esclusioni: link che avvolgono immagini (gallery/figure) — l'icona non ha senso lì */
.entry-content a:has(img)::after,
.entry-content a:has(figure)::after,
.entry-content figure a::after,
.entry-content .wp-block-image a::after,
.entry-content .wp-block-gallery a::after {
content: none !important;
}
.entry-content a:has(img),
.entry-content a:has(figure),
.entry-content figure a,
.entry-content .wp-block-image a,
.entry-content .wp-block-gallery a {
border-bottom: none !important;
background: transparent !important;
}
/* Light mode: oro più scuro per contrasto su sfondo chiaro */
html[data-theme="light"] .entry-content a[href*="gamecast.it"]:not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]),
html[data-theme="light"] .entry-content a[href^="/"]:not([href^="//"]):not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]) {
color: #8a6a1a;
border-bottom-color: rgba(195,134,15,.45);
}
html[data-theme="light"] .entry-content a[href*="gamecast.it"]:not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]):hover,
html[data-theme="light"] .entry-content a[href^="/"]:not([href^="//"]):not(.gc-no-link-icon):not([class*="wp-block-"]):not([role="button"]):hover {
color: #5b4711;
border-bottom-color: #c3860f;
background: rgba(195,134,15,.10);
}
/* ── /GC INTERNAL LINKS ──────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
GC NEWS — MOBILE REDESIGN AUTOREVOLE
Card .gc-news-card e .gc-news-secondary su mobile:
- Immagine SINISTRA fissa 100×100
- Titolo intero (no truncation aggressiva), max 4 righe
- Comment count sempre visibile inline
- Tipografia editoriale (Archivo + spacing migliore)
- Bordo + hover state premium
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* Container: spaziatura più generosa tra cards */
.gc-section--news .gc-news-grid {
gap: 12px !important;
}
/* Card row con bordo + shadow + hover */
.gc-news-card,
.gc-news-secondary {
background: #15151a !important;
border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.18);
transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.gc-news-card:hover,
.gc-news-card:active,
.gc-news-secondary:hover,
.gc-news-secondary:active {
transform: translateY(-2px);
border-color: rgba(212,180,90,.32) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
/* Layout: image LEFT, body RIGHT.
Forziamo row + order esplicito per battere eventuali row-reverse del tema Foxiz */
body.home .gc-news-card__link,
body.home .gc-news-secondary__link {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
text-decoration: none;
color: inherit;
direction: ltr !important;
}
body.home .gc-news-card__img,
body.home .gc-news-secondary__img { order: 0 !important; }
body.home .gc-news-card__body,
body.home .gc-news-secondary__body { order: 1 !important; }
/* Immagine sinistra: 100×100 fissa, no border-radius interno (eredita dalla card) */
.gc-news-card__img,
.gc-news-secondary__img {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
min-height: 100px !important;
align-self: stretch !important;
flex-shrink: 0 !important;
border-radius: 0 !important;
overflow: hidden;
background: #1a1a1a;
position: relative;
}
.gc-news-card__img img,
.gc-news-secondary__img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.gc-news-card:hover .gc-news-card__img img,
.gc-news-secondary:hover .gc-news-secondary__img img {
transform: scale(1.06);
}
/* Body: padding generoso, contenuti distribuiti */
.gc-news-card__body,
.gc-news-secondary__body {
padding: 12px 14px !important;
flex: 1 !important;
min-width: 0 !important;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
min-height: 100px !important;
}
/* Top row (cat + comment badge inline, ben distanziati) */
.gc-news-card__top,
.gc-news-secondary__top {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap;
}
/* Categoria: oro, più visibile */
.gc-news-card__cat,
.gc-news-secondary__cat {
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
text-transform: uppercase;
color: #d4b45a !important;
font-family: 'Archivo', -apple-system, sans-serif;
}
/* Titolo: INTERO, font Archivo, leading stretto, max 4 righe */
.gc-news-card__title,
.gc-news-secondary__title {
font-family: 'Archivo', -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.32 !important;
letter-spacing: -.005em !important;
margin: 0 !important;
color: #f5f5f5 !important;
-webkit-line-clamp: 4 !important;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Footer: time + comment count INLINE, sempre visibili */
.gc-news-card__foot,
.gc-news-secondary__foot {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 4px;
}
.gc-news-card__time,
.gc-news-secondary__time {
font-size: 11px !important;
color: rgba(255,255,255,.42) !important;
font-weight: 500;
margin: 0 !important;
}
/* Comment badge inline (separato dal time da un punto) */
.gc-news-card__top .gc-lobby-count,
.gc-news-card__top .gc-lobby-count-badge,
.gc-news-card__foot .gc-lobby-count,
.gc-news-card__foot .gc-lobby-count-badge {
display: inline-flex !important;
align-items: center;
gap: 3px;
font-size: 11px !important;
font-weight: 700;
color: #a5b4fc !important;
background: rgba(99,102,241,.12) !important;
padding: 2px 8px !important;
border-radius: 10px !important;
border: 1px solid rgba(99,102,241,.25) !important;
line-height: 1;
}
/* Featured (post 1): manteniamo image-top ma con typography migliore */
.gc-news-featured {
background: #15151a !important;
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.gc-news-featured__title {
font-family: 'Archivo', -apple-system, sans-serif !important;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.22 !important;
letter-spacing: -.015em !important;
-webkit-line-clamp: 3 !important;
color: #fff !important;
}
.gc-news-featured__cat {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: .1em !important;
color: #d4b45a !important;
}
.gc-news-featured__deck {
font-size: 13px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,.65) !important;
}
}
/* ── Light mode adattamento news mobile ─────────────────────────── */
@media (max-width: 720px) {
html[data-theme="light"] .gc-news-card,
html[data-theme="light"] .gc-news-secondary,
html[data-theme="light"] .gc-news-featured {
background: #fff !important;
border-color: rgba(15,23,42,.08) !important;
box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] .gc-news-card:hover,
html[data-theme="light"] .gc-news-secondary:hover {
border-color: rgba(195,134,15,.4) !important;
box-shadow: 0 8px 22px rgba(15,23,42,.12) !important;
}
html[data-theme="light"] .gc-news-card__cat,
html[data-theme="light"] .gc-news-secondary__cat,
html[data-theme="light"] .gc-news-featured__cat {
color: #8a6a1a !important;
}
html[data-theme="light"] .gc-news-card__title,
html[data-theme="light"] .gc-news-secondary__title,
html[data-theme="light"] .gc-news-featured__title {
color: #0f172a !important;
}
html[data-theme="light"] .gc-news-card__time,
html[data-theme="light"] .gc-news-secondary__time {
color: rgba(0,0,0,.5) !important;
}
html[data-theme="light"] .gc-news-card__top .gc-lobby-count,
html[data-theme="light"] .gc-news-card__top .gc-lobby-count-badge {
color: #4338ca !important;
background: rgba(99,102,241,.10) !important;
border-color: rgba(99,102,241,.32) !important;
}
}
/* ── /GC NEWS MOBILE REDESIGN ────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
GC NEWS — REGOLA FINALE / DEFINITIVA
⚠ SPOSTATA in inc/gc-homepage-style.php (caricato dopo style.css
nella cascade → vince sempre). Il blocco sotto è DISABILITATO via
commenti CSS. Single source of truth: gc-homepage-style.php.
═══════════════════════════════════════════════════════════════ */
/* Blocco disabilitato — single source of truth in gc-homepage-style.php
Vedi sezione "GC NEWS — REGOLA FINALE DEFINITIVA" nel file PHP.
*/
/*
/* ── FEATURED: testo sempre bianco, overlay scuro garantito ── */
body.home .gc-news-featured {
border-radius: 12px;
overflow: hidden;
background: #0f0f15;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 4px 14px rgba(0,0,0,.3);
transition: border-color .18s, box-shadow .18s, transform .18s;
}
body.home .gc-news-featured:hover {
transform: translateY(-2px);
border-color: rgba(212,180,90,.32);
box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
body.home .gc-news-featured__body {
background: linear-gradient(to top,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.65) 45%,
rgba(0,0,0,.18) 80%,
transparent 100%) !important;
padding: 28px 24px !important;
}
/* Testo featured: SEMPRE bianco/oro, indipendente dal tema */
body.home .gc-news-featured__cat,
html[data-theme="light"] body.home .gc-news-featured__cat {
color: #f0d27a !important;
font-weight: 800;
letter-spacing: .09em;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.home .gc-news-featured__title,
html[data-theme="light"] body.home .gc-news-featured__title {
color: #fff !important;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
body.home .gc-news-featured__deck,
html[data-theme="light"] body.home .gc-news-featured__deck {
color: rgba(255,255,255,.85) !important;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.home .gc-news-featured__time,
html[data-theme="light"] body.home .gc-news-featured__time {
color: rgba(255,255,255,.65) !important;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* ── SECONDARY + CARD: row layout, cambia bg per tema ── */
/* DARK */
html:not([data-theme="light"]) body.home .gc-news-secondary,
html:not([data-theme="light"]) body.home .gc-news-card {
background: #15151a !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
html:not([data-theme="light"]) body.home .gc-news-secondary__cat,
html:not([data-theme="light"]) body.home .gc-news-card__cat {
color: #d4b45a !important;
font-weight: 800;
letter-spacing: .1em;
}
html:not([data-theme="light"]) body.home .gc-news-secondary__title,
html:not([data-theme="light"]) body.home .gc-news-card__title {
color: #f5f5f5 !important;
}
html:not([data-theme="light"]) body.home .gc-news-secondary__time,
html:not([data-theme="light"]) body.home .gc-news-card__time {
color: rgba(255,255,255,.45) !important;
}
html:not([data-theme="light"]) body.home .gc-news-secondary:hover,
html:not([data-theme="light"]) body.home .gc-news-card:hover {
border-color: rgba(212,180,90,.32) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
/* LIGHT */
html[data-theme="light"] body.home .gc-news-secondary,
html[data-theme="light"] body.home .gc-news-card {
background: #fff !important;
border: 1px solid rgba(15,23,42,.10) !important;
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
html[data-theme="light"] body.home .gc-news-secondary__cat,
html[data-theme="light"] body.home .gc-news-card__cat {
color: #8a6a1a !important;
font-weight: 800;
letter-spacing: .1em;
}
html[data-theme="light"] body.home .gc-news-secondary__title,
html[data-theme="light"] body.home .gc-news-card__title {
color: #0f172a !important;
}
html[data-theme="light"] body.home .gc-news-secondary__title a,
html[data-theme="light"] body.home .gc-news-card__title a {
color: inherit !important;
}
html[data-theme="light"] body.home .gc-news-secondary__time,
html[data-theme="light"] body.home .gc-news-card__time {
color: rgba(15,23,42,.5) !important;
}
html[data-theme="light"] body.home .gc-news-secondary:hover,
html[data-theme="light"] body.home .gc-news-card:hover {
border-color: rgba(195,134,15,.4) !important;
box-shadow: 0 8px 22px rgba(15,23,42,.12);
}
/* Lobby count badge — coerente nei due temi */
html:not([data-theme="light"]) body.home .gc-news-card .gc-lobby-count,
html:not([data-theme="light"]) body.home .gc-news-card .gc-lobby-count-badge,
html:not([data-theme="light"]) body.home .gc-news-secondary .gc-lobby-count,
html:not([data-theme="light"]) body.home .gc-news-secondary .gc-lobby-count-badge {
background: rgba(99,102,241,.14) !important;
color: #a5b4fc !important;
border: 1px solid rgba(99,102,241,.32) !important;
}
html[data-theme="light"] body.home .gc-news-card .gc-lobby-count,
html[data-theme="light"] body.home .gc-news-card .gc-lobby-count-badge,
html[data-theme="light"] body.home .gc-news-secondary .gc-lobby-count,
html[data-theme="light"] body.home .gc-news-secondary .gc-lobby-count-badge {
background: rgba(99,102,241,.10) !important;
color: #4338ca !important;
border: 1px solid rgba(99,102,241,.32) !important;
}
/* ── /GC NEWS REGOLA FINALE ───────────────────────────────────── */
/* ===============================================================
GCOBJ HUB CTA - premium card (restyle 2026-05-01)
Layout: trophy icon left + text left-aligned, NO arrow, NO underline.
Tema: blu in dark, arancio (theme gold) in light.
=============================================================== */
/* HARD reset underline / theme overrides - massima specificita' */
html body .gcobj-hub-cta__link,
html body .gcobj-hub-cta__link:hover,
html body .gcobj-hub-cta__link:focus,
html body .gcobj-hub-cta__link:focus-visible,
html body .gcobj-hub-cta__link:visited,
html body .gcobj-hub-cta__link span,
html body .gcobj-hub-cta__link strong,
html body.single .entry-content a.gcobj-hub-cta__link,
html body.single .entry-content a.gcobj-hub-cta__link:hover,
html body.single .entry-content a.gcobj-hub-cta__link:focus,
html body.single .entry-content a.gcobj-hub-cta__link span,
html body.single .entry-content a.gcobj-hub-cta__link strong,
html body.single-post .entry-content a.gcobj-hub-cta__link,
html body.single-post .entry-content a.gcobj-hub-cta__link:hover,
html body.single-post .entry-content a.gcobj-hub-cta__link:focus,
html body.single-post .entry-content a.gcobj-hub-cta__link span,
html body.single-post .entry-content a.gcobj-hub-cta__link strong,
html[data-theme="dark"] body.single .entry-content a.gcobj-hub-cta__link,
html[data-theme="dark"] body.single .entry-content a.gcobj-hub-cta__link span,
html[data-theme="dark"] body.single .entry-content a.gcobj-hub-cta__link strong,
html[data-theme="dark"] body.single-post .entry-content a.gcobj-hub-cta__link,
html[data-theme="dark"] body.single-post .entry-content a.gcobj-hub-cta__link span,
html[data-theme="dark"] body.single-post .entry-content a.gcobj-hub-cta__link strong,
html[data-theme="light"] body.single .entry-content a.gcobj-hub-cta__link,
html[data-theme="light"] body.single .entry-content a.gcobj-hub-cta__link span,
html[data-theme="light"] body.single .entry-content a.gcobj-hub-cta__link strong,
html[data-theme="light"] body.single-post .entry-content a.gcobj-hub-cta__link,
html[data-theme="light"] body.single-post .entry-content a.gcobj-hub-cta__link span,
html[data-theme="light"] body.single-post .entry-content a.gcobj-hub-cta__link strong,
html[data-theme="dark"] body.single .entry-content a.gcobj-hub-cta__link[href^="http"],
html[data-theme="dark"] body.single .entry-content a.gcobj-hub-cta__link[href^="https"],
html[data-theme="light"] body.single .entry-content a.gcobj-hub-cta__link[href^="http"],
html[data-theme="light"] body.single .entry-content a.gcobj-hub-cta__link[href^="https"] {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-thickness: 0 !important;
text-decoration-color: transparent !important;
-webkit-text-decoration: none !important;
border-bottom: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Nascondi arrow se presente in vecchi articoli con cache */
html body .gcobj-hub-cta__arrow { display: none !important; }
/* Nascondi l'icona ↗ "external link" del tema padre sulle card CTA correlate
2026-05-02: estesa a gc-cluster-box (Hub completo, Walkthrough, ecc) */
html body .gcobj-hub-cta a.gcobj-hub-cta__link::after,
html body .gcobj-hub-cta a.gcobj-hub-cta__link::before,
html body.single .entry-content a.gcobj-hub-cta__link::after,
html body.single .entry-content a.gcobj-hub-cta__link::before,
html body.single-post .entry-content a.gcobj-hub-cta__link::after,
html body.single-post .entry-content a.gcobj-hub-cta__link::before,
html body .gc-cluster-box a.gc-cluster-box__pillar::after,
html body .gc-cluster-box a.gc-cluster-box__pillar::before,
html body.single .entry-content a.gc-cluster-box__pillar::after,
html body.single .entry-content a.gc-cluster-box__pillar::before,
html body.single-post .entry-content a.gc-cluster-box__pillar::after,
html body.single-post .entry-content a.gc-cluster-box__pillar::before,
html body .gc-cluster-box a.gc-cluster-box__row::after,
html body .gc-cluster-box a.gc-cluster-box__row::before,
html body.single .entry-content a.gc-cluster-box__row::after,
html body.single .entry-content a.gc-cluster-box__row::before,
html body.single-post .entry-content a.gc-cluster-box__row::after,
html body.single-post .entry-content a.gc-cluster-box__row::before {
content: none !important;
display: none !important;
background: none !important;
-webkit-mask: none !important;
mask: none !important;
width: 0 !important;
height: 0 !important;
}
/* 2026-05-02: hide external-link arrow ↗ + underline su TUTTE le classi
delle card hub/cluster/correlate (gc-hub-box, gc-cluster-box, gcb, ecc).
Rule "catch-all" via attribute selector, alta specificità. */
html body.single .entry-content a[class*="gc-hub-box"]::after,
html body.single .entry-content a[class*="gc-hub-box"]::before,
html body.single-post .entry-content a[class*="gc-hub-box"]::after,
html body.single-post .entry-content a[class*="gc-hub-box"]::before,
html body.single .entry-content a[class*="gc-cluster-box"]::after,
html body.single .entry-content a[class*="gc-cluster-box"]::before,
html body.single-post .entry-content a[class*="gc-cluster-box"]::after,
html body.single-post .entry-content a[class*="gc-cluster-box"]::before,
html body.single .entry-content a[class*="gcb__"]::after,
html body.single .entry-content a[class*="gcb__"]::before,
html body.single-post .entry-content a[class*="gcb__"]::after,
html body.single-post .entry-content a[class*="gcb__"]::before {
content: none !important;
display: none !important;
background: none !important;
-webkit-mask: none !important;
mask: none !important;
width: 0 !important;
height: 0 !important;
}
/* No underline su tutte le card hub/cluster/codes — copre tutte le varianti */
html body.single .entry-content a[class*="gc-hub-box"],
html body.single .entry-content a[class*="gc-hub-box"]:hover,
html body.single .entry-content a[class*="gc-hub-box"]:focus,
html body.single-post .entry-content a[class*="gc-hub-box"],
html body.single-post .entry-content a[class*="gc-hub-box"]:hover,
html body.single .entry-content a[class*="gc-cluster-box"],
html body.single .entry-content a[class*="gc-cluster-box"]:hover,
html body.single-post .entry-content a[class*="gc-cluster-box"],
html body.single-post .entry-content a[class*="gc-cluster-box"]:hover,
html body.single .entry-content a[class*="gcb__"],
html body.single .entry-content a[class*="gcb__"]:hover,
html body.single-post .entry-content a[class*="gcb__"],
html body.single-post .entry-content a[class*="gcb__"]:hover,
html[data-theme="dark"] body.single .entry-content a[class*="gc-hub-box"],
html[data-theme="dark"] body.single .entry-content a[class*="gc-cluster-box"],
html[data-theme="dark"] body.single .entry-content a[class*="gcb__"],
html[data-theme="light"] body.single .entry-content a[class*="gc-hub-box"],
html[data-theme="light"] body.single .entry-content a[class*="gc-cluster-box"],
html[data-theme="light"] body.single .entry-content a[class*="gcb__"] {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-thickness: 0 !important;
-webkit-text-decoration: none !important;
border-bottom: none !important;
background-image: none !important;
}
/* Underline rimosso dai link cluster-box */
html body .gc-cluster-box a.gc-cluster-box__pillar,
html body .gc-cluster-box a.gc-cluster-box__pillar:hover,
html body .gc-cluster-box a.gc-cluster-box__pillar:focus,
html body.single .entry-content a.gc-cluster-box__pillar,
html body.single .entry-content a.gc-cluster-box__pillar:hover,
html body.single-post .entry-content a.gc-cluster-box__pillar,
html body.single-post .entry-content a.gc-cluster-box__pillar:hover,
html body .gc-cluster-box a.gc-cluster-box__row,
html body .gc-cluster-box a.gc-cluster-box__row:hover,
html body.single .entry-content a.gc-cluster-box__row,
html body.single .entry-content a.gc-cluster-box__row:hover,
html body.single-post .entry-content a.gc-cluster-box__row,
html body.single-post .entry-content a.gc-cluster-box__row:hover,
html[data-theme="dark"] body.single .entry-content a.gc-cluster-box__pillar,
html[data-theme="dark"] body.single .entry-content a.gc-cluster-box__pillar:hover,
html[data-theme="light"] body.single .entry-content a.gc-cluster-box__pillar,
html[data-theme="light"] body.single .entry-content a.gc-cluster-box__pillar:hover,
html[data-theme="dark"] body.single .entry-content a.gc-cluster-box__row,
html[data-theme="light"] body.single .entry-content a.gc-cluster-box__row {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-thickness: 0 !important;
-webkit-text-decoration: none !important;
border-bottom: none !important;
background-image: none !important;
}
/* 2026-05-02: armonizza il padding delle row card cluster ("Walkthrough completo")
- Più respiro top/bottom
- Hover lift sottile
- Bordi soft tra le righe */
html body .gc-cluster-box .gc-cluster-box__row,
html body.single .entry-content a.gc-cluster-box__row,
html body.single-post .entry-content a.gc-cluster-box__row {
padding: 16px 18px !important;
gap: 14px !important;
border-radius: 8px !important;
transition: background .15s, transform .15s !important;
}
html body .gc-cluster-box .gc-cluster-box__row:hover {
transform: translateX(2px);
}
html body .gc-cluster-box .gc-cluster-box__rows {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 0;
}
html body .gc-cluster-box .gc-cluster-box__row-body {
gap: 4px !important;
}
html body .gc-cluster-box .gc-cluster-box__item-label {
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
opacity: .85;
}
html body .gc-cluster-box .gc-cluster-box__row-title {
font-size: 13px !important;
line-height: 1.4 !important;
margin-top: 2px !important;
}
/* Container card */
html body .gcobj-hub-cta {
margin: 28px 0 !important;
width: 100% !important;
}
html body a.gcobj-hub-cta__link {
display: flex !important;
align-items: center !important;
gap: 18px !important;
padding: 20px 24px !important;
border-radius: 14px !important;
transition: transform .2s, border-color .2s, box-shadow .2s, background .2s !important;
overflow: hidden !important;
position: relative !important;
cursor: pointer !important;
}
/* Icon trophy box */
html body .gcobj-hub-cta__icon {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
border-radius: 12px !important;
font-size: 26px !important;
line-height: 1 !important;
transition: transform .2s !important;
}
html body a.gcobj-hub-cta__link:hover .gcobj-hub-cta__icon {
transform: scale(1.05) rotate(-3deg) !important;
}
/* Text block - LEFT aligned */
html body .gcobj-hub-cta__text {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 4px !important;
}
html body .gcobj-hub-cta__eyebrow {
display: block !important;
text-align: left !important;
font-size: 10.5px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
line-height: 1.2 !important;
margin: 0 0 2px !important;
}
html body .gcobj-hub-cta__link strong,
html body .gcobj-hub-cta__title {
display: block !important;
text-align: left !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
}
html body .gcobj-hub-cta__sub {
display: block !important;
text-align: left !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
margin: 0 !important;
}
/* DARK theme - accent BLUE */
html[data-theme="dark"] body a.gcobj-hub-cta__link,
html:not([data-theme="light"]) body a.gcobj-hub-cta__link {
background: linear-gradient(135deg, rgba(15,23,42,.96) 0%, rgba(30,41,59,.92) 100%) !important;
border: 1px solid rgba(99,102,241,.22) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] body a.gcobj-hub-cta__link:hover,
html:not([data-theme="light"]) body a.gcobj-hub-cta__link:hover {
border-color: rgba(99,102,241,.55) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 14px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,.2) inset !important;
transform: translateY(-2px) !important;
}
html[data-theme="dark"] body .gcobj-hub-cta__icon,
html:not([data-theme="light"]) body .gcobj-hub-cta__icon {
background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(168,85,247,.18)) !important;
border: 1px solid rgba(99,102,241,.4) !important;
box-shadow: 0 4px 14px rgba(99,102,241,.18) !important;
}
html[data-theme="dark"] body .gcobj-hub-cta__eyebrow,
html:not([data-theme="light"]) body .gcobj-hub-cta__eyebrow {
color: #818cf8 !important;
}
html[data-theme="dark"] body .gcobj-hub-cta__link strong,
html[data-theme="dark"] body .gcobj-hub-cta__title,
html:not([data-theme="light"]) body .gcobj-hub-cta__link strong,
html:not([data-theme="light"]) body .gcobj-hub-cta__title {
color: #f8fafc !important;
}
html[data-theme="dark"] body .gcobj-hub-cta__sub,
html:not([data-theme="light"]) body .gcobj-hub-cta__sub {
color: rgba(226,232,240,.65) !important;
}
/* LIGHT theme - accent ORANGE/GOLD */
html[data-theme="light"] body a.gcobj-hub-cta__link {
background: linear-gradient(135deg, #ffffff 0%, #fffbf2 100%) !important;
border: 1px solid rgba(195,134,15,.28) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 20px rgba(15,23,42,0.06) !important;
}
html[data-theme="light"] body a.gcobj-hub-cta__link:hover {
border-color: rgba(195,134,15,.6) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px rgba(15,23,42,0.12), 0 0 0 1px rgba(195,134,15,.18) inset !important;
transform: translateY(-2px) !important;
}
html[data-theme="light"] body .gcobj-hub-cta__icon {
background: linear-gradient(135deg, rgba(251,146,60,.18), rgba(234,179,8,.14)) !important;
border: 1px solid rgba(195,134,15,.35) !important;
box-shadow: 0 4px 14px rgba(195,134,15,.16) !important;
}
html[data-theme="light"] body .gcobj-hub-cta__eyebrow {
color: #c3860f !important;
}
html[data-theme="light"] body .gcobj-hub-cta__link strong,
html[data-theme="light"] body .gcobj-hub-cta__title {
color: #0f172a !important;
}
html[data-theme="light"] body .gcobj-hub-cta__sub {
color: rgba(15,23,42,.62) !important;
}
/* Mobile */
@media (max-width: 540px) {
html body a.gcobj-hub-cta__link { padding: 16px 18px !important; gap: 14px !important; }
html body .gcobj-hub-cta__icon { width: 48px !important; height: 48px !important; font-size: 22px !important; }
html body .gcobj-hub-cta__link strong,
html body .gcobj-hub-cta__title { font-size: 16px !important; }
html body .gcobj-hub-cta__sub { font-size: 12px !important; }
}
html body .gcobj-hub-cta__link strong {
text-align: center !important;
display: block !important;
}
/* ═══════════════════════════════════════════════════════════════════════
GC AFFILIATE CTA v6 (2026-05-14) — cover portrait + brand buttons + no logo
Box art verticale 3:4, bottoni con palette store brand-coerente, no SVG.
═══════════════════════════════════════════════════════════════════════ */
.gc-aff-cta {
--gc-aff-bg: #ffffff;
--gc-aff-border: #e5e7eb;
--gc-aff-title: #0f172a;
--gc-aff-tagline: #64748b;
--gc-aff-disclosure: #94a3b8;
--gc-aff-accent: #ef9e40;
--gc-aff-btn-bg: #ef9e40;
--gc-aff-btn-bg-hover: #d97706;
--gc-aff-btn-text: #0f172a;
margin: 32px auto;
max-width: 720px;
background: var(--gc-aff-bg);
border: 1px solid var(--gc-aff-border);
border-radius: 14px;
padding: 18px 22px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
font-family: inherit;
position: relative;
overflow: hidden;
}
.gc-aff-cta::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--gc-aff-accent);
}
.gc-aff-cta__inner {
display: flex;
align-items: center;
gap: 18px;
}
/* ─── Cover portrait 3:4 (box art gioco) ─── */
.gc-aff-cta__icon,
.entry-content .gc-aff-cta .gc-aff-cta__icon {
flex: 0 0 84px !important;
width: 84px !important;
height: 112px !important;
min-width: 84px !important;
min-height: 112px !important;
max-width: 84px !important;
max-height: 112px !important;
border-radius: 8px;
overflow: hidden;
background: #0f172a;
display: block;
position: relative;
}
.gc-aff-cta__icon img,
.entry-content .gc-aff-cta .gc-aff-cta__icon img {
width: 84px !important;
height: 112px !important;
min-width: 84px !important;
min-height: 112px !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.gc-aff-cta__body {
flex: 1 1 auto;
min-width: 0;
}
.gc-aff-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gc-aff-accent);
margin-bottom: 6px;
}
.gc-aff-cta__eyebrow::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.gc-aff-cta__title {
font-size: 18px;
font-weight: 800;
line-height: 1.25;
color: var(--gc-aff-title);
margin: 0 0 4px;
}
.gc-aff-cta__tagline {
font-size: 13px;
line-height: 1.4;
color: var(--gc-aff-tagline);
margin: 0;
}
/* ─── Bottone (no logo SVG, solo testo + freccia) ─── */
.gc-aff-cta__btn,
.entry-content .gc-aff-cta__btn,
.entry-content a.gc-aff-cta__btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gc-aff-btn-bg);
color: var(--gc-aff-btn-text);
padding: 11px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.2;
text-decoration: none;
border: none;
transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
white-space: nowrap;
box-shadow: 0 2px 10px rgba(239, 158, 64, .25);
}
.gc-aff-cta__btn:hover {
background: var(--gc-aff-btn-bg-hover);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(239, 158, 64, .35);
text-decoration: none;
}
.gc-aff-cta__btn:active { transform: translateY(0); }
.gc-aff-cta__btn::after,
.entry-content a.gc-aff-cta__btn::after {
display: none !important;
content: none !important;
background: none !important;
}
/* Nasconde eventuale logo SVG residuo nel bottone */
.gc-aff-cta__btn-logo,
.gc-aff-cta__btn svg {
display: none !important;
}
.gc-aff-cta__disclosure {
font-size: 11px;
line-height: 1.4;
color: var(--gc-aff-disclosure);
margin: 12px 0 0;
padding-left: 4px;
}
/* ─── Varianti store: solo accent bar laterale + eyebrow color, bottone uniforme brand orange ─── */
.gc-aff-cta[data-store="ig"] { --gc-aff-accent: #fcd116; }
.gc-aff-cta[data-store="ig"] .gc-aff-cta__eyebrow { color: #b45309; }
.gc-aff-cta[data-store="am"] { --gc-aff-accent: #ef9e40; }
.gc-aff-cta[data-store="am"] .gc-aff-cta__eyebrow { color: #b45309; }
.gc-aff-cta[data-store="en"] { --gc-aff-accent: #fa6602; }
.gc-aff-cta[data-store="en"] .gc-aff-cta__eyebrow { color: #c2410c; }
.gc-aff-cta[data-store="cd"] { --gc-aff-accent: #4f46e5; }
.gc-aff-cta[data-store="cd"] .gc-aff-cta__eyebrow { color: #4338ca; }
/* ─── Dark theme ─── */
html[data-theme="dark"] .gc-aff-cta {
--gc-aff-bg: #0f172a;
--gc-aff-border: rgba(255, 255, 255, .08);
--gc-aff-title: #f1f5f9;
--gc-aff-tagline: #94a3b8;
--gc-aff-disclosure: #64748b;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .gc-aff-cta__icon { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .gc-aff-cta[data-store="ig"] .gc-aff-cta__eyebrow { color: #fcd116; }
html[data-theme="dark"] .gc-aff-cta[data-store="am"] .gc-aff-cta__eyebrow { color: #fbbf24; }
html[data-theme="dark"] .gc-aff-cta[data-store="en"] .gc-aff-cta__eyebrow { color: #fb923c; }
html[data-theme="dark"] .gc-aff-cta[data-store="cd"] .gc-aff-cta__eyebrow { color: #a5b4fc; }
/* === Override priorità: vince su :visited gold del tema (inline !important) === */
html body.single .entry-content a.gc-aff-cta__btn[href],
html body.single .entry-content a.gc-aff-cta__btn[href]:link,
html body.single .entry-content a.gc-aff-cta__btn[href]:visited,
html body.single .entry-content a.gc-aff-cta__btn[href]:hover,
html body.single .entry-content a.gc-aff-cta__btn[href] *,
html body.single-post .entry-content a.gc-aff-cta__btn[href],
html body.single-post .entry-content a.gc-aff-cta__btn[href]:link,
html body.single-post .entry-content a.gc-aff-cta__btn[href]:visited,
html body.single-post .entry-content a.gc-aff-cta__btn[href]:hover,
html body.single-post .entry-content a.gc-aff-cta__btn[href] * {
color: var(--gc-aff-btn-text) !important;
background-color: var(--gc-aff-btn-bg) !important;
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
text-shadow: none !important;
}
html body.single .entry-content a.gc-aff-cta__btn[href]:hover,
html body.single-post .entry-content a.gc-aff-cta__btn[href]:hover {
background-color: var(--gc-aff-btn-bg-hover) !important;
}
/* ─── Responsive ─── */
@media (max-width: 640px) {
.gc-aff-cta { padding: 16px 18px; margin: 24px auto; }
.gc-aff-cta__inner { flex-wrap: wrap; gap: 14px; }
.gc-aff-cta__icon,
.entry-content .gc-aff-cta .gc-aff-cta__icon {
flex: 0 0 68px !important;
width: 68px !important;
height: 90px !important;
min-width: 68px !important;
min-height: 90px !important;
max-width: 68px !important;
max-height: 90px !important;
}
.gc-aff-cta__icon img,
.entry-content .gc-aff-cta .gc-aff-cta__icon img {
width: 68px !important;
height: 90px !important;
min-width: 68px !important;
min-height: 90px !important;
}
.gc-aff-cta__body { flex: 1 1 calc(100% - 80px); }
.gc-aff-cta__title { font-size: 16px; }
.gc-aff-cta__btn,
.entry-content a.gc-aff-cta__btn { width: 100%; justify-content: center; flex-basis: 100%; padding: 12px 18px; }
}