/* ════════════════════════════════════════════════════════
DIARI COMUNITAT — CSS NET I DEFINITIU
Paleta: #1a1a1a negre tinta · #f5f1e8 beige crema · #b8262b vermell
#5a5550 gris text · #d4cfc2 linia divisoria
════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* ─ VARIABLES ───────────────────────────────────────── */
:root {
--ink:#1a1a1a;
--cream:#f5f1e8;
--red:#b8262b;
/* Roig per a FONS amb text blanc (botons, etiquetes). En mode fosc el
--red s'aclarix perquè es llija com a text sobre fosc, però com a fons
amb text blanc perdria contrast: per això és un token a banda. */
--red-fill:#b8262b;
--grey:#5a5550;
--div:#d4cfc2;
--light:#e8e3d6;
--body-dark:#3a3530;
/* Superfícies: --paper per a targetes/llistes sobre el fons crema,
--surface per a bandes/caixes suaus. Úniques 2 variants permeses. */
--paper:#ffffff;
--surface:#faf9f5;
--serif: "Playfair Display","Georgia","Times New Roman",serif;
--body: "Source Serif Pro","Georgia","Times New Roman",serif;
--sans: "Inter","Helvetica Neue","Arial",sans-serif;
--mono: "JetBrains Mono","Courier New",monospace;
--pad: 48px;
--w: 1280px;
}
/* ─ MODE FOSC (#4) — redefinició de variables ────────── */
html.dc-dark {
--ink:#e8e3d6;
--cream:#16140f;
--red:#ec6b66;
--red-fill:#b8262b;
--grey:#a8a098;
--div:#332f28;
--light:#211e18;
--body-dark:#cfc8ba;
--paper:#211e18;
--surface:#1c1914;
}
html.dc-dark body { background:#16140f; }
/* Fons blancs hardcoded més comuns → foscos al mode nit */
html.dc-dark .modal-box,
html.dc-dark #my-town-host > div,
html.dc-dark #weekly-poll-host > div,
html.dc-dark select,
html.dc-dark input,
html.dc-dark textarea { background:#211e18 !important; color:var(--ink) !important; }
html.dc-dark img { filter:brightness(.92) contrast(1.02); }
html.dc-dark .masthead, html.dc-dark .top-bar { background:#16140f; }
.dc-dark-toggle { cursor:pointer; }
/* ─ RESET I BASE ─────────────────────────────────── */
html { font-size:16px; scroll-behavior:smooth; }
body {
background: var(--cream);
color: var(--ink);
font-family: var(--body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button, input { font-family:var(--sans); }
/* ─ PROGRESS BAR ───────────────────────────────── */
#progress-bar {
position:fixed; top:0; left:0; right:0; height:3px;
z-index:200; background:rgba(26,26,26,.07); pointer-events:none;
}
#progress-fill { height:100%; width:0; background:var(--red); transition:width .15s linear; }
/* ─ TOP UTILITY BAR ────────────────────────────── */
.top-bar {
border-bottom:1px solid var(--div);
padding:8px var(--pad);
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
font-family:var(--sans); font-size:11px; letter-spacing:.08em;
text-transform:uppercase; color:var(--grey);
}
.top-bar-left { display:flex; gap:20px; align-items:center; justify-self:start; }
/* Silueta CV al costat del títol "Diari Comunitat" */
.cv-silhouette {
display:inline-block; vertical-align:middle;
height:0.85em; width:auto;
margin-right:0.35em; margin-top:-0.25em;
color:var(--ink);
filter: drop-shadow(0 1px 2px rgba(0,0,0,.06));
}
.masthead-name span { vertical-align:middle; }
.top-bar-center {
justify-self:center; display:inline-flex; align-items:baseline; gap:8px;
font-weight:600; color:var(--ink); letter-spacing:.10em;
}
.top-bar-center .city {
font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.top-bar-center .temp {
color:var(--red); font-variant-numeric:tabular-nums; font-weight:700;
font-size:1.05em;
}
.top-bar-center .cond {
font-size:.92em; color:var(--grey); font-weight:500;
letter-spacing:.06em; text-transform:lowercase;
}
.top-bar-center .cond:not(:empty)::before { content:'· '; color:var(--grey); }
.top-bar-right { display:flex; gap:16px; align-items:center; justify-self:end; }
.lang-btn { cursor:pointer; transition:opacity .15s; }
.lang-btn:not(.active) { color:var(--grey); }
.lang-btn.active { font-weight:700; color:var(--ink); }
/* ─ LIVE RADAR ─────────────────────────────────── */
@keyframes radarPulse { 0%{transform:scale(1);opacity:.9} 70%{transform:scale(2.8);opacity:0} 100%{transform:scale(1);opacity:0} }
@keyframes radarPulse2 { 0%{transform:scale(1);opacity:.7} 70%{transform:scale(2);opacity:0} 100%{transform:scale(1);opacity:0} }
.live-radar { position:relative; display:inline-flex; align-items:center; gap:8px; }
.live-radar-dot { position:relative; width:8px; height:8px; flex-shrink:0; }
.live-radar-core { position:absolute; inset:0; border-radius:50%; background:var(--red); }
.live-radar-ring { position:absolute; inset:0; border-radius:50%; background:var(--red); animation:radarPulse 2s ease-out infinite; }
.live-radar-ring:nth-child(3) { animation:radarPulse 2s ease-out .7s infinite; }
.live-radar-label { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.live-dot { color:var(--red); font-size:11px; }
/* ─ MASTHEAD ───────────────────────────────────── */
.masthead {
text-align:center; padding:32px var(--pad) 20px;
border-bottom:3px double var(--ink); position:relative;
}
.masthead-ornament {
position:absolute; top:50%; transform:translateY(-30%);
font-family:var(--body); font-size:11px; line-height:1.5;
letter-spacing:.04em; color:var(--grey); max-width:150px;
}
.masthead-ornament-right { right:var(--pad); text-align:right; }
.masthead-ornament strong { display:block; font-family:var(--sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.masthead-name {
font-family:var(--serif);
font-size:clamp(48px,7vw,86px);
font-weight:900; letter-spacing:-.02em; line-height:1;
cursor:pointer;
color: var(--ink);
}
.masthead-tagline {
font-family:var(--body); font-style:italic;
font-size:17px; color:var(--grey); margin-top:6px; letter-spacing:.02em;
}
/* ─ NAV PRINCIPAL ────────────────────────────── */
.main-nav {
padding:10px var(--pad); border-bottom:1px solid var(--ink);
display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap;
font-family:var(--sans); font-size:12px; letter-spacing:.14em;
text-transform:uppercase; font-weight:600;
}
.nav-item {
cursor:pointer; padding:4px 0;
border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap;
}
.nav-item:hover, .nav-item.active { color:var(--red); border-bottom-color:var(--red); }
/* .sr-only s'usava (etiqueta del butlletí i altres) però NO estava
definida: el navegador la pintava i "Correu electrònic" queia dins de la
casella. Patró estàndard: invisible a la vista, llegible per a lectors
de pantalla. */
.dc-hp { position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Marge lateral en mòbil per als blocs de la portada que no en portaven.
#home-main no té padding en mòbil (les targetes van a tota l'amplada i
cadascuna posa el seu), i estos cinc no el posaven: títols i taules
quedaven enganxats a la vora (x=0, mesurat en un Pixel 7). */
@media (max-width: 768px) {
#dc-daypart-banner, #opinion-section, .cv-half-row, #cv-standings, .category-view-header {
padding-left:16px !important; padding-right:16px !important;
}
}
/* Pregunta al diari en mòbil: etiqueta a dalt i camp a tota l'amplada
(abans el text d'exemple es tallava i el botó queia sol a sota). */
@media (max-width: 600px) {
.dc-ask-form label { flex-basis:100%; }
.dc-ask-form input { flex:1 1 auto; }
}
/* La vista de secció comença AMAGADA. Depenia que algun JS la tancara, i a
la portada no ho feia ningú: davall de tot eixia "Actualitat · Totes les
notícies" buit, just abans del peu. Totes les vistes que l'usen l'obrin
amb display='block' explícit (comprovat), així que açò no en trenca cap. */
#category-view { display:none; }
.main-nav { flex-wrap:nowrap; }
.nav-more { position:relative; }
.nav-more > summary { list-style:none; cursor:pointer; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-more > summary::-webkit-details-marker { display:none; }
.nav-more > summary::after { content:" ▾"; font-size:10px; }
.nav-more > summary:hover, .nav-more[open] > summary { color:var(--red); }
.nav-more-list { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); z-index:60;
background:var(--paper,#fff); border:1px solid var(--ink); padding:8px 0; min-width:210px;
display:flex; flex-direction:column; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.nav-more-list .nav-item { padding:9px 18px; border-bottom:0; letter-spacing:.1em; }
.nav-more-list .nav-item:hover { background:var(--cream); }
@media (max-width: 1180px) { .main-nav { gap:18px; letter-spacing:.1em; } }
.nav-search { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-search input {
border:none; border-bottom:1px solid var(--div); background:none;
font-family:var(--sans); font-size:12px; padding:4px 0; width:160px;
outline:none; color:var(--ink); transition:border-color .15s;
}
.nav-search input:focus { border-bottom-color:var(--ink); }
.nav-search input::placeholder { color:var(--grey); opacity:.7; }
/* ─ ÚLTIMA HORA — marquesina contínua ─────────────────────
Els titulars desfilen en horitzontal sense parar, com als grans
diaris. Es pausa en passar el ratolí per damunt i cada titular és
clicable. Amb prefers-reduced-motion queda estàtic (accessibilitat). */
.ticker-wrap {
background:var(--ink); color:var(--cream);
padding:8px var(--pad); display:flex; align-items:center; gap:16px;
font-family:var(--sans); font-size:13px; overflow:hidden;
}
.ticker-label {
background:var(--red-fill); color:#fff;
padding:3px 12px; font-size:11px; letter-spacing:.16em; font-weight:700;
text-transform:uppercase; flex-shrink:0;
}
.ticker-track {
overflow:hidden; flex:1; position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.ticker-content {
display:inline-flex; align-items:center; white-space:nowrap;
will-change:transform;
animation: dc-ticker var(--ticker-dur,45s) linear infinite;
}
.ticker-wrap:hover .ticker-content { animation-play-state:paused; }
.ticker-item { display:inline-flex; align-items:center; cursor:pointer; }
.ticker-item:hover .ticker-headline { text-decoration:underline; text-underline-offset:3px; }
.ticker-cat { opacity:.8; font-weight:700; text-transform:uppercase; font-size:.85em; letter-spacing:.08em; margin-right:7px; }
.ticker-sep { opacity:.35; margin:0 22px; }
@keyframes dc-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* ─ CONTAINER ────────────────────────────────── */
.page-wrap { max-width:var(--w); margin:0 auto; padding:0 var(--pad); }
/* ─ HERO ──────────────────────────────────────── */
.hero-section {
display:grid; grid-template-columns:1fr 380px; gap:40px;
padding:36px 0 28px; border-bottom:1px solid var(--div);
}
/* S7: Card tipogràfica per a story principal del dia (estil semafor.com).
S'activa quan el hero porta classe .hero-flagship (article featured i recent). */
.hero-section.hero-flagship {
display:block;
padding:48px 0 36px;
background:linear-gradient(180deg, transparent 0%, rgba(184,38,43,.04) 100%);
}
.hero-flagship .hero-aside { display:none; }
.hero-flagship .hero-main { max-width:none; }
.hero-flagship .hero-category {
font-size:12px; letter-spacing:.22em; margin-bottom:18px;
display:inline-block; padding:5px 14px; background:var(--red-fill); color:#fff;
border-radius:0;
}
.hero-flagship .hero-title {
font-size:clamp(40px, 6vw, 78px);
line-height:1.02; letter-spacing:-0.025em;
margin:14px 0 18px;
font-weight:900;
}
.hero-flagship .hero-subtitle {
font-size:clamp(17px, 1.7vw, 22px);
line-height:1.45; max-width:820px;
margin-bottom:26px; color:var(--ink);
}
.hero-flagship .hero-image-wrap {
aspect-ratio:16/9;
height:auto;
max-height:none;
margin-bottom:22px;
}
/* Hereda les regles base d'auto-adapt del .hero-image-wrap */
.hero-flagship .hero-body { column-count:2; column-gap:48px; max-width:none; }
@media (max-width: 768px) {
.hero-flagship .hero-body { column-count:1; }
.hero-flagship .hero-title { font-size:clamp(28px, 8vw, 44px); }
}
/* Estils dels blocs Semaform (visibles a la lectura d'article) */
.sf-block { margin: 24px 0; padding: 18px 22px 18px 26px; border-left: 4px solid var(--div); background: rgba(0,0,0,.015); }
.sf-block h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; color: var(--ink); }
.sf-block p, .sf-block ul { font-size: 17px; line-height: 1.6; }
.sf-news { border-left-color: #1d5fb8; }
.sf-view { border-left-color: #b8262b; background: rgba(184,38,43,.04); }
.sf-other { border-left-color: #c2750b; background: rgba(194,117,11,.04); }
.sf-facts { border-left-color: #0f7a3f; background: rgba(15,122,63,.04); }
.sf-bottom { border-left-color: var(--ink); background: var(--ink); color:var(--cream); padding: 22px 26px; }
.sf-bottom h2 { color: #fff; }
.sf-bottom p { font-size: 19px; font-weight: 500; }
.hero-main { overflow:hidden; min-width:0; }
.hero-category {
font-family:var(--sans); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:12px;
}
.hero-title {
font-family:var(--serif); font-size:clamp(36px,4vw,58px);
font-weight:900; line-height:1.02; letter-spacing:-.015em; margin-bottom:16px;
}
.hero-title a { transition:color .2s ease; display:block; }
.hero-title:hover a { color:var(--red); }
.hero-subtitle {
font-family:var(--body); font-size:18px; font-style:italic;
color:var(--body-dark); line-height:1.45; margin-bottom:22px;
}
.hero-image-wrap {
/* display:block és OBLIGATORI: el contenidor és un , i un és en
línia per defecte — i els elements en línia IGNOREN amplada, alçada,
aspect-ratio i max-height. Sense això (27/09) la foto agafava l'alçada
de tota la columna (1.140 px), quedava centrada amb un forat a dalt i
la capa borrosa de fons traient el cap per l'esquerra. */
display:block;
position:relative; overflow:hidden; border:1px solid var(--ink);
margin-bottom:14px; background:var(--light);
width:100%; aspect-ratio:16/9;
/* Sense sostre d'alçada: la foto principal ocupa la columna en 16:9, com
a qualsevol diari de referència. El sostre de 171 px la deixava en una
tira mínima davall d'un titular de tres línies. */
max-height:none;
}
/* Capa de fons borrosa per a quan la foto no té ratio 16:9. Mostra el
blur de la pròpia foto darrere, així mai es veuen barres negres lletges. */
.hero-image-wrap::before {
content:""; position:absolute; inset:-20px;
background-image:var(--hero-bg-img, none);
background-size:cover; background-position:center;
filter:blur(24px) brightness(.65) saturate(1.2);
z-index:0;
}
.hero-image-wrap img {
position:relative; z-index:1;
width:100%; height:100%;
/* CONTAIN per defecte: NO retalla ni amplia — la foto es veu sencera, sense
"zoom". L'espai sobrant del marc el cobreix un blur de la pròpia foto
(--hero-bg-img, posat per JS) perquè mai es vegen barres grises i quede
una portada polida. Així evitem alhora el "miniatura sobre gris" i el
"ultraenfocada" del cover. */
object-fit:contain; object-position:center;
display:block; transition:transform .4s ease;
/* Render hints: smooth interpolation per a UPSCALING (Safari/iOS
interpreta -webkit-optimize-contrast com "nearest-neighbor"-ish
que pixela a l'agrandar — el traguem). Auto + high-quality és el
mode bicúbic suau que tots els navegadors moderns suporten. */
image-rendering: auto;
image-rendering: high-quality;
-ms-interpolation-mode: bicubic;
}
/* Només per a fotos clarament apaïsades (panoràmiques) que JS marca: cover
perquè omplin del tot sense quasi retallar. */
.hero-image-wrap.hero-cover img { object-fit:cover; object-position:center 40%; }
.hero-image-wrap.hero-cover::before { display:none; }
.hero-image-wrap:hover img { transform:scale(1.02); }
.hero-caption { font-family:var(--sans); font-size:11px; color:var(--grey); font-style:italic; margin-bottom:20px; }
.hero-body {
font-family:var(--body); font-size:16px; line-height:1.65;
color:var(--ink);
overflow:hidden; /* clearfix per al drop-cap float */
}
.hero-body p { margin:0 0 14px; }
.hero-body p::after { content:""; display:table; clear:both; }
.hero-body p:first-child::first-letter {
float:left; font-family:var(--serif); font-size:68px;
line-height:.82; font-weight:900; padding-right:6px; padding-top:4px;
color:var(--ink);
}
.hero-meta {
font-family:var(--sans); font-size:12px; color:var(--grey);
display:flex; align-items:center; gap:12px; margin-top:16px;
padding-top:12px; border-top:1px solid var(--div);
}
.author-avatar-sm {
width:32px; height:32px; border-radius:50%;
background:var(--ink); color:var(--cream);
display:flex; align-items:center; justify-content:center;
font-family:var(--serif); font-size:13px; font-weight:700;
overflow:hidden; flex-shrink:0;
}
.author-avatar-sm img { width:100%; height:100%; object-fit:cover; }
.read-more-link {
display:inline-flex; align-items:center; gap:8px;
font-family:var(--sans); font-size:12px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase;
color:var(--cream); background:var(--ink);
padding:11px 18px; border-radius:2px;
margin-top:18px; cursor:pointer;
border:1px solid var(--ink);
transition:gap .2s ease, background .2s ease, transform .12s ease;
}
.read-more-link::after {
content:"→"; font-size:14px; transition:transform .2s ease;
}
.read-more-link:hover {
gap:12px; background:var(--red); border-color:var(--red);
}
.read-more-link:hover::after { transform:translateX(2px); }
.read-more-link:active { transform:translateY(1px); }
/* ─ ASIDE HERO ────────────────────────────────── */
.aside-section-title {
font-family:var(--sans); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; font-weight:700; color:var(--grey);
margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--ink);
}
.aside-article {
display:grid; grid-template-columns:80px 1fr; gap:14px;
padding:14px 0; border-bottom:1px solid var(--div); cursor:pointer;
}
.aside-article:hover .aside-title { color:var(--red); }
.aside-thumb { overflow:hidden; border:1px solid var(--div); background:var(--light); width:88px; aspect-ratio:4/3; flex-shrink:0; }
.aside-thumb img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.aside-cat { font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--red); margin-bottom:4px; }
.aside-title { font-family:var(--serif); font-size:15px; font-weight:700; line-height:1.2; margin-bottom:4px; transition:color .15s; }
.aside-time { font-family:var(--sans); font-size:11px; color:var(--grey); }
/* ─ PULL QUOTE ───────────────────────────────── */
.pull-quote { margin:24px 0; padding:20px 0; border-top:3px double var(--ink); border-bottom:3px double var(--ink); }
.pull-quote-text { font-family:var(--serif); font-size:26px; font-weight:400; font-style:italic; line-height:1.25; letter-spacing:-.01em; }
.pull-quote-attr { font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-top:10px; }
/* (CSS de .stats-box i .hero-summary eliminat: les funcions
buildStatsBox/buildHeroSummary que les feien servir s'han tret.) */
/* ─ SECTION HEADERS ────────────────────────────── */
.section-header { display:flex; align-items:baseline; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:10px; margin:36px 0 22px; }
.section-title { font-family:var(--serif); font-size:28px; font-weight:900; margin:0; }
.section-sub { font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.section-link { font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); font-weight:700; margin-left:auto; cursor:pointer; border-bottom:1px solid transparent; transition:border-color .15s; }
.section-link:hover { border-bottom-color:var(--red); }
/* ─ GRID 3 COLUMNES ────────────────────────────── */
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-bottom:1px solid var(--div); margin-bottom:36px; }
/* ─ LO MÉS LLEGIT (hero-aside) ──────────────────────────── */
.most-read-title { display:flex; align-items:center; }
.most-read-list {
display:flex; flex-direction:column;
border-bottom:1px solid var(--div); padding-bottom:16px; margin-bottom:8px;
}
.most-read-item {
display:grid; grid-template-columns:32px 1fr; gap:12px;
padding:12px 0; cursor:pointer;
border-bottom:1px solid var(--div);
transition:background .15s;
text-decoration:none; color:inherit;
}
.most-read-item:last-child { border-bottom:none; }
.most-read-item:hover { background:rgba(184,38,43,.03); }
.most-read-num {
font-family:var(--serif); font-size:28px;
font-weight:800; color:var(--ink); line-height:1;
}
.most-read-item:nth-child(1) .most-read-num { font-size:32px; }
.most-read-cat {
font-family:var(--sans); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; font-weight:700; color:var(--grey);
margin-bottom:4px;
}
.most-read-headline {
font-family:var(--serif); font-size:14px; font-weight:600;
line-height:1.25; color:var(--ink); margin:0;
letter-spacing:-0.005em;
}
.most-read-item:hover .most-read-headline { color:var(--red); }
/* ─ TOP MUNICIPIS PROPERS A VALÈNCIA ─────────────────────── */
.cv-munis {
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--div);
padding: 36px 0;
margin-bottom: 36px;
background: var(--surface);
}
.cv-munis-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--paper);
border: 1px solid var(--div);
border-radius: 2px;
overflow: hidden;
}
@media (max-width: 1024px) { .cv-munis-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .cv-munis-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cv-munis-list { grid-template-columns: 1fr; } }
.cv-muni-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--div);
border-right: 1px solid var(--div);
align-items: center;
font-size: 13px;
cursor: pointer;
transition: background .15s;
text-decoration: none;
color: inherit;
}
.cv-muni-row:hover { background: var(--surface); }
.cv-muni-row:hover .cv-muni-name { color: var(--red); }
.cv-muni-rank {
font-family: var(--serif); font-size: 16px;
font-weight: 700; color: var(--grey); line-height: 1; text-align: center;
}
.cv-muni-row:nth-child(-n+10) .cv-muni-rank { color: var(--ink); }
.cv-muni-name {
font-family: var(--serif); font-weight: 700; font-size: 14px;
letter-spacing: -0.01em; line-height: 1.2;
}
.cv-muni-meta {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: var(--grey); text-align: right; white-space: nowrap;
}
/* ─ TOP EMPRESES VALENCIANES PER FACTURACIÓ ─────────────── */
/* Layout 50/50: Top empreses + Radiografia rotator
* UX/UI: vora superior única i fina (no la doble del fix anterior),
* gap generós entre columnes, sense gradients ni padding interior excessiu.
*/
.cv-half-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 40px;
border-top: 1px solid var(--ink);
padding: 28px 0 20px;
margin-bottom: 36px;
}
@media (max-width: 900px) {
.cv-half-row { grid-template-columns: 1fr; gap: 28px; padding: 22px 0 16px; }
}
.cv-half { min-width: 0; }
/* Sense vora vertical entre columnes — el gap ja separa visualment */
@media (max-width: 900px) {
.cv-half + .cv-half { padding-top: 24px; border-top: 1px solid var(--div); }
}
.cv-half-head { margin-bottom: 14px; }
.cv-half-head .cv-eyebrow {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--red, #b8262b); font-weight: 700; margin-bottom: 6px;
}
.cv-half-head .cv-title {
font-family: var(--serif); font-size: clamp(18px, 2vw, 22px);
font-weight: 800; line-height: 1.2; margin: 0 0 4px;
letter-spacing: -0.01em;
}
.cv-half-head .cv-sub {
font-size: 12px; color: var(--grey); line-height: 1.45;
margin: 0; max-width: 56ch;
}
.cv-half-foot {
margin-top: 10px; font-size: 11px; color: var(--grey);
font-family: 'JetBrains Mono', monospace; text-align: right;
letter-spacing: .04em;
}
.cv-title-sm { font-size: clamp(16px, 1.7vw, 19px) !important; }
.cv-more-sm { font-size: 12px; }
/* Override: cv-companies dins cv-half (mata el border-top/bottom/gradient/padding
* heretats de la versió standalone). Visualment integrada al layout 50/50. */
.cv-half.cv-companies {
border: none;
padding: 0;
margin: 0;
background: transparent;
}
/* Llista d'empreses dins cv-half — més compacta a desktop */
.cv-half .cv-companies-list {
border: 1px solid var(--div);
border-radius: 2px;
background: var(--paper);
overflow: hidden;
}
.cv-half .cv-comp-row {
grid-template-columns: 36px 1fr 100px 56px;
gap: 10px;
padding: 9px 12px;
}
.cv-half .cv-comp-row > .cv-comp-employees,
.cv-half .cv-comp-row > .cv-comp-trend {
display: none; /* a desktop dins el 50/50 ocultem aquestes per estalviar espai */
}
.cv-half .cv-comp-rank {
font-size: 22px;
}
.cv-half .cv-comp-row:nth-child(1) .cv-comp-rank { font-size: 26px; }
.cv-half .cv-comp-name { font-size: 14px; margin-bottom: 1px; }
.cv-half .cv-comp-meta { font-size: 11px; gap: 6px; }
.cv-half .cv-comp-sector { font-size: 11px; padding: 1px 6px; }
.cv-half .cv-comp-revenue { font-size: 14px; }
.cv-half .cv-comp-show-more {
font-size: 11px; padding: 10px;
}
@media (max-width: 700px) {
/* A mòbil tornem a mostrar els elements amagats perquè la columna ja és full-width */
.cv-half .cv-comp-row {
grid-template-columns: 32px 1fr auto;
}
.cv-half .cv-comp-revenue { font-size: 13px; }
}
/* Rotator de dades — una targeta gran amb el KPI actual + dots de navegació */
.cv-rotator {
background: var(--surface);
border: 1px solid var(--div);
padding: 24px 22px 18px;
border-radius: 2px;
position: relative;
min-height: 200px;
display: flex; flex-direction: column; justify-content: space-between;
overflow: hidden;
}
.cv-rot-card {
flex: 1;
display: flex; flex-direction: column; justify-content: center;
text-align: center;
animation: cvRotIn .35s var(--ease-out, ease) both;
}
@keyframes cvRotIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.cv-rot-eyebrow {
font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
color: var(--red); font-weight: 700; margin-bottom: 8px;
}
.cv-rot-value {
font-family: var(--serif, Georgia, serif);
font-size: clamp(38px, 5vw, 56px);
font-weight: 900; line-height: 1; margin-bottom: 6px;
color: var(--ink);
}
.cv-rot-label {
font-size: 13px; color: var(--ink); font-weight: 600;
margin-bottom: 4px;
}
.cv-rot-trend {
font-size: 11px; color: var(--grey);
font-family: 'JetBrains Mono', monospace;
}
.cv-rot-trend.up { color: #15803d; }
html.dc-dark .cv-rot-trend.up { color: #4ade80; }
.cv-rot-trend.down { color: var(--red); }
.cv-rot-source {
font-size: 11px; color: var(--grey);
margin-top: 10px;
font-family: 'JetBrains Mono', monospace;
}
.cv-rot-dots {
display: flex; justify-content: center; gap: 5px; margin-top: 14px;
}
.cv-rot-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--div); cursor: pointer;
transition: background .2s, width .2s;
}
.cv-rot-dot.active { background: var(--ink); width: 18px; border-radius: 3px; }
.cv-companies {
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--div);
padding: 36px 0;
margin-bottom: 36px;
background: var(--surface);
}
.cv-companies-list {
display: flex; flex-direction: column;
background: var(--paper); border: 1px solid var(--div);
border-radius: 2px; overflow: hidden;
}
.cv-comp-row {
display: grid;
grid-template-columns: 50px 1fr 140px 130px 100px;
align-items: center; gap: 16px;
padding: 14px 18px; border-bottom: 1px solid var(--div);
cursor: default;
transition: background .15s;
}
.cv-comp-row:last-child { border-bottom: none; }
.cv-comp-row:hover { background: var(--surface); }
.cv-comp-rank {
font-family: var(--serif); font-size: 32px;
font-weight: 800; color: var(--ink); line-height: 1;
text-align: center;
}
.cv-comp-row:nth-child(1) .cv-comp-rank { font-size: 38px; }
.cv-comp-row:nth-child(-n+3) .cv-comp-rank { color: var(--ink); }
.cv-comp-row:nth-child(n+4) .cv-comp-rank { color: var(--grey); }
.cv-comp-info { min-width: 0; }
.cv-comp-name {
font-family: var(--serif); font-size: 17px; font-weight: 700;
line-height: 1.2; color: var(--ink); margin: 0 0 3px 0;
letter-spacing: -0.01em;
}
.cv-comp-meta {
font-family: var(--sans); font-size: 11px; color: var(--grey);
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.cv-comp-sector {
display: inline-block;
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--red);
background: rgba(184,38,43,.08); padding: 2px 7px; border-radius: 2px;
}
.cv-comp-revenue {
font-family: var(--serif); font-size: 19px; font-weight: 700;
color: var(--ink); text-align: right;
font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.cv-comp-employees {
font-family: var(--sans); font-size: 12px; color: var(--body-dark);
text-align: right; font-variant-numeric: tabular-nums;
}
.cv-comp-trend {
font-family: var(--sans); font-size: 11px; font-weight: 600;
text-align: right;
}
.cv-comp-trend.up { color: var(--success, #16a34a); }
.cv-comp-trend.down { color: var(--red); }
.cv-comp-trend.flat { color: var(--grey); }
/* Top 5 empreses per defecte (mòbil + desktop). El botó "Veure totes" expandeix. */
.cv-comp-row:nth-child(n+6) { display: none; }
.cv-companies-list.show-all .cv-comp-row { display: grid; }
.cv-comp-show-more {
display: block; text-align: center; padding: 14px;
background: var(--light); border: none; border-top: 1px solid var(--div);
width: 100%; cursor: pointer; font-family: var(--sans);
font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--red);
}
.cv-comp-show-more:hover { background: rgba(184,38,43,.05); }
@media (max-width: 768px) {
.cv-comp-row {
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
gap: 4px 12px;
padding: 14px;
}
.cv-comp-rank { grid-row: 1 / 3; font-size: 26px; }
.cv-comp-info { grid-column: 2; }
.cv-comp-revenue,
.cv-comp-employees,
.cv-comp-trend {
grid-column: 2; text-align: left; font-size: 13px;
display: inline-block; margin-right: 14px;
}
.cv-comp-revenue { font-size: 16px; font-weight: 700; }
}
/* MÒBIL · ranking innovació limitat a 5 + dades CV stack vertical */
@media (max-width: 768px) {
.ir-grid .ir-card:nth-child(n+6) { display: none; }
/* Lo més llegit: a mòbil, 5 max també (era 5 ja) */
.most-read-list .most-read-item:nth-child(n+6) { display: none; }
}
/* ─ DADES DE LA COMUNITAT — radiografia ────────────────── */
.cv-data {
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--div);
padding: 36px 0;
margin-bottom: 36px;
}
.cv-head { max-width: 720px; margin-bottom: 24px; }
.cv-eyebrow {
font-family: var(--sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--red); margin-bottom: 8px;
}
.cv-title {
font-family: var(--serif); font-size: clamp(24px, 3vw, 36px);
font-weight: 800; letter-spacing: -0.02em;
margin: 0 0 8px 0; color: var(--ink);
}
.cv-sub {
font-family: var(--body); font-size: 14px; line-height: 1.5;
color: var(--body-dark); margin: 0;
}
.cv-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.cv-card {
padding: 18px 20px; background: var(--paper);
border: 1px solid var(--div); border-left: 3px solid var(--red);
border-radius: 2px;
}
.cv-cat {
font-family: var(--sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--grey); margin-bottom: 8px;
}
.cv-value {
font-family: var(--serif); font-size: clamp(28px, 3vw, 36px);
font-weight: 800; line-height: 1; letter-spacing: -0.02em;
color: var(--ink); font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.cv-label {
font-family: var(--body); font-size: 13px; line-height: 1.35;
color: var(--body-dark); margin-bottom: 8px;
}
.cv-delta {
font-family: var(--sans); font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
}
.cv-delta.up { color: var(--success, #16a34a); }
.cv-delta.down { color: var(--red); }
.cv-delta.flat { color: var(--grey); }
.cv-source {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: var(--grey); margin-top: 8px; padding-top: 8px;
border-top: 1px solid var(--div);
}
.cv-more {
font-family: var(--sans); font-size: 13px; font-weight: 600;
color: var(--red); text-decoration: none;
border-bottom: 2px solid transparent; padding-bottom: 2px;
transition: border-color .15s;
}
.cv-more:hover { border-bottom-color: var(--red); }
@media (max-width: 768px) {
.cv-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cv-card { padding: 14px 16px; }
}
@media (max-width: 480px) {
.cv-grid { grid-template-columns: 1fr; }
}
/* ─ RANKING D'INNOVACIÓ ──────────────────────────────────── */
.innovation-ranking {
background: var(--surface);
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--div);
padding: 36px 0;
margin-bottom: 36px;
}
.ir-head { max-width: 720px; margin-bottom: 24px; }
.ir-eyebrow {
font-family: var(--sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--red); margin-bottom: 8px;
}
.ir-title {
font-family: var(--serif); font-size: clamp(24px, 3vw, 36px);
font-weight: 800; letter-spacing: -0.02em;
margin: 0 0 8px 0; color: var(--ink);
}
.ir-sub {
font-family: var(--body); font-size: 14px; line-height: 1.5;
color: var(--body-dark); margin: 0;
}
.ir-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.ir-card {
display: flex; gap: 14px; padding: 16px 18px;
background: var(--paper); border: 1px solid var(--div);
border-radius: 2px; cursor: pointer;
transition: border-color .15s;
text-decoration: none; color: inherit;
}
.ir-card:hover { border-color: var(--ink); }
.ir-rank {
font-family: var(--serif); font-size: 32px;
font-weight: 800; color: var(--ink); line-height: 1; flex-shrink: 0;
min-width: 36px;
}
.ir-card:nth-child(1) .ir-rank { font-size: 40px; }
.ir-body { min-width: 0; flex: 1; }
.ir-name {
font-family: var(--serif); font-size: 16px; font-weight: 700;
line-height: 1.2; color: var(--ink); margin: 0 0 4px 0;
}
.ir-card:hover .ir-name { color: var(--red); }
.ir-domain {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: var(--grey); margin-bottom: 6px;
}
.ir-stats {
display: flex; gap: 10px; align-items: center;
font-family: var(--sans); font-size: 11px; color: var(--grey);
margin-top: 4px;
}
.ir-stats strong { color: var(--ink); font-weight: 700; font-size: 13px; }
.ir-cat {
display: inline-block;
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--red);
background: rgba(184,38,43,.08); padding: 2px 7px; border-radius: 2px;
}
.ir-trend {
font-size: 11px; color: var(--grey);
}
.ir-trend.up { color: #16a34a; font-weight: 600; }
@media (max-width: 768px) {
.ir-grid { grid-template-columns: 1fr; gap: 12px; }
.ir-card { padding: 14px; }
.ir-rank { font-size: 28px; min-width: 30px; }
.ir-card:nth-child(1) .ir-rank { font-size: 32px; }
}
.col-article {
padding:0 28px 28px; border-right:1px solid var(--div); cursor:pointer;
}
.col-article:first-child { padding-left:0; }
.col-article:last-child { border-right:none; padding-right:0; }
.col-img { overflow:hidden; border:1px solid var(--div); margin-bottom:14px; background:var(--light); width:100%; aspect-ratio:16/9; }
.col-img img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .3s; }
.col-cat { font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--red); margin-bottom:8px; }
.col-title { font-family:var(--serif); font-size:22px; font-weight:700; line-height:1.15; margin-bottom:10px; letter-spacing:-.01em; transition:color .2s, text-decoration .15s; cursor:pointer; }
.col-article:hover .col-title,
.col-title:hover { color:var(--red); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.col-summary { font-family:var(--body); font-size:13.5px; line-height:1.55; color:var(--body-dark); margin-bottom:12px; }
.col-time { font-family:var(--sans); font-size:11px; color:var(--grey); display:flex; justify-content:space-between; align-items:center; }
/* ─ GRID 4 COLUMNES ────────────────────────────── */
.four-col { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-bottom:1px solid var(--div); padding-bottom:32px; margin-bottom:32px; }
.mini-article { cursor:pointer; padding:10px 8px; border-radius:2px; transition:background .15s ease; }
.mini-article:hover { background:rgba(184,38,43,.04); }
.mini-cat { font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--red); margin-bottom:6px; }
.mini-title { font-family:var(--serif); font-size:16px; font-weight:700; line-height:1.2; margin-bottom:6px; transition:color .15s, text-decoration .15s; cursor:pointer; }
.mini-article:hover .mini-title,
.mini-title:hover { color:var(--red); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.mini-time { font-family:var(--sans); font-size:11px; color:var(--grey); }
/* ─ CATEGORIA — vista dedicada (densitat + estil periodístic clàssic) ─ */
.cat-section { display:none; }
body.cat-mode .cat-section { display:block; }
body.cat-mode #hero-section,
body.cat-mode #three-col-section,
body.cat-mode #four-col-section,
body.cat-mode #section-divider-1,
body.cat-mode #dc-river,
body.cat-mode #dc-latest { display:none; }
/* ─ PORTADA LLARGA (30/10) ─────────────────────────────────────
A l'estil del New York Times: després de la capçalera, un bloc per
secció i, al final, "Últimes notícies" que va carregant en baixar.
Abans la portada s'acabava en unes 20 peces i el lector se n'anava. */
#dc-river { display:flex; flex-direction:column; }
.riv-block { border-top:1px solid var(--ink); padding:18px 0 26px; }
.riv-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 16px; }
.riv-title { font-family:var(--serif); font-weight:900; font-size:26px; line-height:1; color:var(--ink); }
.riv-title:hover { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.riv-all { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); white-space:nowrap; }
.riv-all:hover { color:var(--ink); }
.riv-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:0; }
.riv-grid > * { min-width:0; padding:0 20px; border-left:1px solid var(--div); }
.riv-grid > *:first-child { padding-left:0; border-left:0; }
.riv-grid > *:last-child { padding-right:0; }
.riv-img { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--light); margin:0 0 10px; }
.riv-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.riv-block a:hover .riv-img img { transform:scale(1.02); }
.riv-cat { font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:0 0 5px; }
.riv-lead h3 { font-family:var(--serif); font-weight:700; font-size:24px; line-height:1.15; margin:0 0 8px; text-wrap:balance; }
.riv-lead p { font-family:var(--body); font-size:15.5px; line-height:1.5; color:var(--body-dark); margin:0 0 8px; }
.riv-mid article + article { margin-top:16px; padding-top:16px; border-top:1px solid var(--div); }
.riv-mid h4, .riv-list h4 { font-family:var(--serif); font-weight:700; font-size:17px; line-height:1.25; margin:0 0 6px; text-wrap:balance; }
.riv-list { list-style:none; margin:0; padding:0; }
.riv-list li + li { margin-top:14px; padding-top:14px; border-top:1px solid var(--div); }
.riv-meta { font-family:var(--sans); font-size:11.5px; color:var(--grey); }
.riv-block h3 a:hover, .riv-block h4 a:hover, .lat-item h4 a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
#dc-latest { border-top:3px double var(--ink); margin-top:8px; padding-top:18px; }
#dc-latest .riv-head { margin-bottom:6px; }
.lat-list { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.lat-item { display:grid; grid-template-columns:150px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--div); align-items:start; }
.lat-item .riv-img { margin:0; }
.lat-item h4 { font-family:var(--serif); font-weight:700; font-size:18px; line-height:1.25; margin:0 0 6px; text-wrap:balance; }
.lat-item p { font-family:var(--body); font-size:14.5px; line-height:1.45; color:var(--body-dark); margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lat-more { display:flex; justify-content:center; padding:22px 0 8px; }
.lat-more button, .lat-more a { font-family:var(--sans); font-size:14px; font-weight:700; padding:12px 26px; background:var(--ink); color:var(--cream); border:0; cursor:pointer; }
.lat-more button:hover, .lat-more a:hover { opacity:.88; }
.lat-more button:focus-visible, .riv-block a:focus-visible, .lat-item a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:900px){
.riv-grid { grid-template-columns:1fr 1fr; }
.riv-grid > .riv-lead { grid-column:1 / -1; padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid var(--div); }
.riv-grid > .riv-mid { padding-left:0; border-left:0; }
.lat-list { grid-template-columns:1fr; }
}
@media (max-width:600px){
#dc-river, #dc-latest { padding-left:16px; padding-right:16px; }
.riv-grid { grid-template-columns:1fr; }
.riv-grid > * { padding:0; border-left:0; }
.riv-grid > .riv-list { margin-top:14px; padding-top:14px; border-top:1px solid var(--div); }
.riv-title { font-size:22px; }
.lat-item { grid-template-columns:1fr 104px; }
.lat-item > a { order:2; }
/* Les dues peces del mig, compactes: foto menuda a la dreta. */
.riv-mid article { display:grid; grid-template-columns:1fr 104px; gap:12px; align-items:start; }
.riv-mid article > a { order:2; }
.riv-mid .riv-img { margin:0; }
}
@media (prefers-reduced-motion:reduce){ .riv-img img { transition:none; } }
/* ─ CATEGORIA · format El País Deportes ─────────────────────
Layout amb 4 columnes a la part superior:
[HERO 50%] [DESTACAT 1 25%] [DESTACAT 2 25%] [OPINIÓ sidebar]
Després: grid de 4 cols compactes. Després: llista densa.
Tipografia editorial seria + kickers tracked accent. */
.cat-header {
border-bottom:2px solid var(--ink);
padding-bottom:14px; margin-bottom:28px;
display:flex; justify-content:space-between; align-items:flex-end;
flex-wrap:wrap; gap:12px;
}
.cat-header h1 {
font-family:var(--serif); font-size:clamp(28px,4vw,40px);
font-weight:900; letter-spacing:-0.02em; margin:0;
color:var(--ink);
}
.cat-header .cat-meta {
font-family:var(--sans); font-size:11px; color:var(--grey);
letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
/* Top section — 3 columnes + sidebar opinió */
.cat-top {
display:grid;
grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
gap:28px;
padding-bottom:28px;
border-bottom:1px solid var(--div);
margin-bottom:28px;
}
/* Banda de classificacions a la secció Esports — entre cat-top i cat-grid */
.cat-standings-band {
margin: 0 0 36px;
padding: 22px 0 30px;
border-top: 1px solid var(--div);
border-bottom: 1px solid var(--div);
}
.cat-standings-head {
display:flex; justify-content:space-between; align-items:flex-end;
gap:14px; margin-bottom:18px; flex-wrap:wrap;
}
.cat-standings-eyebrow {
font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--red); font-weight:700; margin-bottom:4px;
}
.cat-standings-title {
font-family: Georgia, serif; font-size:clamp(22px, 2.6vw, 30px);
margin:0; line-height:1.1; font-weight:700;
}
.cat-standings-cta {
font-size:13px; color:var(--ink); font-weight:600; text-decoration:none;
border-bottom:1px solid var(--ink); padding-bottom:1px; white-space:nowrap;
}
.cat-standings-cta:hover { color:var(--red); border-color:var(--red); }
.cat-standings-grid {
display:grid; gap:16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.cat-standings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cat-standings-grid { grid-template-columns: 1fr; }
.cat-standings-band { padding:18px 0 22px; margin-bottom:24px; }
}
@media (max-width:1100px) {
.cat-top { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); }
.cat-opinion { display:none; }
}
@media (max-width:768px) {
.cat-top { grid-template-columns: 1fr; gap:24px; }
}
/* HERO — col 1, imatge mitjana + text */
.cat-hero { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.cat-hero-img {
aspect-ratio:16/9; overflow:hidden; margin-bottom:14px;
background:var(--light);
max-height:clamp(200px, 28vh, 320px);
}
@media (max-width:768px) { .cat-hero-img { max-height:clamp(180px, 26vh, 240px); } }
.cat-hero-img img {
width:100%; height:100%; object-fit:cover; object-position:center;
transition:transform .4s ease; image-rendering:high-quality;
}
.cat-hero:hover .cat-hero-img img { transform:scale(1.02); }
.cat-hero-kicker {
font-family:var(--sans); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; font-weight:700; color:var(--red);
margin-bottom:8px;
}
.cat-hero-title {
font-family:var(--serif); font-size:clamp(22px,2.4vw,32px);
font-weight:800; line-height:1.12; letter-spacing:-0.018em;
margin:0 0 10px 0; color:var(--ink);
}
.cat-hero:hover .cat-hero-title { color:var(--red); }
.cat-hero-summary {
font-family:var(--body); font-size:14px; line-height:1.5;
color:var(--body-dark); margin:0 0 8px 0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.cat-hero-meta { font-family:var(--sans); font-size:11px; color:var(--grey); }
/* DESTACATS columna — 2 destacats secundaris en cols 2 i 3 */
.cat-featured-card {
display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.cat-featured-img {
aspect-ratio:16/9; overflow:hidden; margin-bottom:10px;
background:var(--light);
max-height:clamp(120px, 18vh, 170px);
}
.cat-featured-img img {
width:100%; height:100%; object-fit:cover;
transition:transform .3s ease; image-rendering:high-quality;
}
.cat-featured-kicker {
font-family:var(--sans); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; font-weight:700; color:var(--red);
margin-bottom:6px;
}
.cat-featured-title {
font-family:var(--serif); font-size:17px; font-weight:700;
line-height:1.22; letter-spacing:-0.01em;
margin:0 0 6px 0; color:var(--ink);
}
.cat-featured-card:hover .cat-featured-title { color:var(--red); }
.cat-featured-summary {
font-family:var(--body); font-size:12.5px; line-height:1.45;
color:var(--body-dark); margin:0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* OPINIÓ sidebar — col 4, només text amb separadors */
.cat-opinion {
display:flex; flex-direction:column;
border-left:1px solid var(--div); padding-left:24px;
}
.cat-opinion-head {
font-family:var(--serif); font-style:italic; font-size:22px;
font-weight:700; margin:0 0 14px 0;
color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:8px;
}
.cat-opinion-item {
padding:12px 0; border-bottom:1px solid var(--div);
text-decoration:none; color:inherit; display:block;
}
.cat-opinion-item:last-child { border-bottom:none; }
.cat-opinion-item:hover { background:rgba(184,38,43,.03); }
.cat-opinion-title {
font-family:var(--serif); font-style:italic; font-size:15px;
font-weight:600; line-height:1.3; margin:0 0 6px 0; color:var(--ink);
}
.cat-opinion-item:hover .cat-opinion-title { color:var(--red); }
.cat-opinion-meta {
font-family:var(--sans); font-size:11px; letter-spacing:.06em;
color:var(--grey); text-transform:uppercase; font-weight:600;
}
/* GRID — 4 columnes compactes amb foto mitjana */
.cat-grid {
display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
padding-bottom:28px; margin-bottom:28px;
border-bottom:1px solid var(--div);
}
@media (max-width:1024px) { .cat-grid { grid-template-columns:repeat(3, 1fr); gap:20px; } }
@media (max-width:768px) { .cat-grid { grid-template-columns:repeat(2, 1fr); gap:18px; } }
@media (max-width:480px) { .cat-grid { grid-template-columns:1fr; } }
.cat-grid-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.cat-grid-img {
aspect-ratio:16/9; overflow:hidden; margin-bottom:10px;
background:var(--light);
max-height:clamp(110px, 14vh, 160px);
}
@media (max-width:480px) { .cat-grid-img { max-height:clamp(140px, 22vh, 200px); } }
.cat-grid-img img {
width:100%; height:100%; object-fit:cover;
transition:transform .3s ease; image-rendering:high-quality;
}
.cat-grid-kicker {
font-family:var(--sans); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; font-weight:700; color:var(--red);
margin-bottom:6px;
}
.cat-grid-title {
font-family:var(--serif); font-size:15px; font-weight:700;
line-height:1.25; letter-spacing:-0.005em;
margin:0 0 6px 0; color:var(--ink);
}
.cat-grid-card:hover .cat-grid-title { color:var(--red); }
.cat-grid-summary {
font-family:var(--body); font-size:12.5px; line-height:1.45;
color:var(--body-dark); margin:0 0 6px 0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cat-grid-meta {
font-family:var(--sans); font-size:11px; color:var(--grey);
margin-top:auto;
}
/* LLISTA densa — articles antics amb thumbnail compacte */
.cat-list { display:flex; flex-direction:column; gap:0; }
.cat-row {
display:grid; grid-template-columns:108px 1fr; gap:14px;
padding:14px 0; cursor:pointer;
border-bottom:1px solid var(--div);
transition:background .15s ease;
}
.cat-row:hover { background:rgba(184,38,43,.03); }
.cat-row-img {
width:108px; height:72px; overflow:hidden;
background:var(--light); flex-shrink:0;
}
.cat-row-img img {
width:100%; height:100%; object-fit:cover;
transition:transform .25s ease; image-rendering:high-quality;
}
.cat-row-text { min-width:0; display:flex; flex-direction:column; }
.cat-row-cat {
font-family:var(--sans); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; font-weight:700; color:var(--red);
margin-bottom:5px;
}
.cat-row-title {
font-family:var(--serif); font-size:16px; font-weight:700;
line-height:1.22; letter-spacing:-0.005em;
margin:0 0 5px 0; color:var(--ink);
}
.cat-row:hover .cat-row-title { color:var(--red); }
.cat-row-summary {
font-family:var(--body); font-size:12.5px; line-height:1.45;
color:var(--body-dark); margin:0 0 6px 0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cat-row-meta {
font-family:var(--sans); font-size:11px; color:var(--grey);
margin-top:auto; display:flex; gap:8px; align-items:center;
}
@media (max-width:480px) {
.cat-row { grid-template-columns:88px 1fr; gap:10px; padding:12px 0; }
.cat-row-img { width:88px; height:58px; }
.cat-row-title { font-size:14.5px; }
.cat-row-summary { display:none; }
}
/* ─ OPINIÓ ───────────────────────────────────── */
.opinion-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.opinion-item { display:grid; grid-template-columns:56px 1fr; gap:16px; padding:18px 28px; border-bottom:1px solid var(--light); cursor:pointer; transition:background .15s; }
.opinion-item:nth-child(odd) { border-right:1px solid var(--div); padding-left:0; }
.opinion-item:nth-child(even) { padding-right:0; }
.opinion-item:hover { background:rgba(184,38,43,.03); }
.opinion-avatar { width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:16px; font-weight:700; font-style:italic; overflow:hidden; flex-shrink:0; }
.opinion-avatar img { width:100%; height:100%; object-fit:cover; }
.opinion-title { font-family:var(--serif); font-size:19px; font-weight:700; font-style:italic; line-height:1.2; margin-bottom:5px; transition:color .15s; }
.opinion-item:hover .opinion-title { color:var(--red); }
.opinion-author { font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
/* ─ NEWSLETTER ───────────────────────────────── */
.newsletter-box { background:var(--ink); color:var(--cream); padding:36px 40px; margin:40px 0; }
.newsletter-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; max-width:var(--w); margin:0 auto; }
.newsletter-kicker { font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.7; margin-bottom:12px; }
.newsletter-title { font-family:var(--serif); font-size:32px; font-weight:700; font-style:italic; line-height:1.1; margin-bottom:14px; }
.newsletter-desc { font-family:var(--body); font-size:14px; line-height:1.6; opacity:.85; }
.newsletter-sub { font-family:var(--sans); font-size:11px; opacity:.8; margin-top:10px; }
.newsletter-form { display:flex; border:1px solid var(--cream); margin-top:20px; }
.newsletter-input {
flex:1; background:transparent; border:none; padding:14px 16px;
color:var(--cream); font-family:var(--sans); font-size:13px; outline:none;
}
.newsletter-input::placeholder { color:rgba(245,241,232,.5); }
/* Override dins el modal: la modal-box té fons crema clar, però l'input té
* color crema també → text invisible. Forcem text fosc + placeholder gris. */
.modal-box .newsletter-input { color: var(--ink); border:1px solid var(--ink); }
.modal-box .newsletter-input::placeholder { color: rgba(26,26,26,.4); }
.modal-box .newsletter-form { border-color: var(--ink); }
.newsletter-btn {
background:var(--red-fill); color:#fff; border:none; padding:14px 22px;
font-family:var(--sans); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; font-weight:700; cursor:pointer; transition:background .15s; white-space:nowrap;
}
.newsletter-btn:hover { background:#9a1a20; }
.newsletter-msg { font-family:var(--sans); font-size:12px; margin-top:10px; min-height:18px; color:rgba(245,241,232,.8); }
/* ─ ARTICLE COMPLET ────────────────────────────── */
#article-view { display:none; }
.article-full-wrap { max-width:860px; margin:0 auto; padding:40px var(--pad); }
.back-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sans); font-size: 12px;
letter-spacing: .06em; font-weight: 600;
color: var(--ink); cursor: pointer;
margin-bottom: 28px;
padding: 8px 14px 8px 10px;
background: var(--light);
border: 1px solid var(--div);
border-radius: 2px;
transition: background .15s, border-color .15s, transform .12s, color .15s;
}
.back-btn:hover {
background: var(--paper); border-color: var(--ink);
color: var(--red); transform: translateX(-2px);
}
.back-btn:active { transform: translateX(-1px) scale(.98); }
.back-btn::before {
content: ''; width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center;
flex-shrink: 0; transition: transform .15s;
}
.back-btn:hover::before { transform: translateX(-2px); }
@media (max-width: 768px) {
.back-btn {
position: sticky; top: 12px; z-index: 50;
background: rgba(255,255,255,.95);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
}
.article-full-cat { font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:12px; }
.article-full-title { font-family:var(--serif); font-size:clamp(32px,4vw,52px); font-weight:900; line-height:1.05; margin-bottom:18px; letter-spacing:-.015em; }
.article-full-subtitle { font-family:var(--body); font-size:20px; font-style:italic; color:var(--body-dark); line-height:1.45; margin-bottom:22px; border-bottom:1px solid var(--div); padding-bottom:22px; }
.article-full-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--sans); font-size:12px; color:var(--grey); margin-bottom:28px; }
.article-full-image { width:100%; aspect-ratio:16/9; max-height:480px; overflow:hidden; border:1px solid var(--div); margin-bottom:10px; background:var(--light); }
/* Imatge vertical: sencera, sobre ella mateixa desenfocada (15/10). */
.article-full-image.is-portrait { position:relative; aspect-ratio:4/5; max-height:78vh; }
.article-full-image.is-portrait::before { content:''; position:absolute; inset:-24px; background:var(--bg) center/cover no-repeat; filter:blur(22px) brightness(.55); }
.article-full-image.is-portrait > img { position:relative; object-fit:contain !important; }
.article-full-image img {
width:100%; height:100%; object-fit:cover; object-position:center; display:block;
image-rendering: auto;
image-rendering: high-quality;
-ms-interpolation-mode: bicubic;
}
@media (max-width: 768px) { .article-full-image { aspect-ratio:4/3; max-height:none; } }
/* Figures inline dins el cos d'article (boost visual cada 4 peces) */
.article-inline-figure { margin: 28px 0 !important; padding: 0; }
/* Vídeos dins de la notícia (30/10): només reproductors oficials, vegeu safeHTML. */
figure.dc-video { margin: 28px auto !important; max-width: 640px; }
.dc-video-frame { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:10px; background:#000; }
.dc-video--vertical { max-width: 400px !important; }
.dc-video--vertical .dc-video-frame { aspect-ratio:auto; height:min(780px, 88vh); background:#fff; }
.dc-video--spotify .dc-video-frame { aspect-ratio:auto; height:352px; background:transparent; }
figure.dc-video figcaption { margin-top:8px; font-size:12px; opacity:.75; text-align:center; }
.article-inline-figure img {
width:100%; height:auto; display:block;
border:1px solid var(--div); background:var(--light);
aspect-ratio:16/9; object-fit:cover;
max-height:420px;
}
.article-inline-figure figcaption {
font-family:var(--sans); font-size:11px; color:var(--grey);
font-style:italic; margin-top:6px; line-height:1.4;
}
@media (max-width: 768px) {
.article-inline-figure img { aspect-ratio:4/3; max-height:none; }
}
.article-full-caption { font-family:var(--sans); font-size:11px; color:var(--grey); font-style:italic; margin-bottom:28px; }
.article-full-body { font-family:var(--body); font-size:17px; line-height:1.75; color:var(--ink); }
.article-full-body p { margin:0 0 20px; }
.article-full-body h2 { font-family:var(--serif); font-size:26px; font-weight:700; margin:32px 0 14px; line-height:1.2; }
.article-full-body h3 { font-family:var(--serif); font-size:20px; font-weight:700; margin:24px 0 10px; font-style:italic; }
.article-full-body img {
display:block; width:100%; max-width:100%; height:auto;
max-height:560px; object-fit:cover; object-position:center;
border:1px solid var(--div); margin:20px 0;
aspect-ratio:auto;
}
@media (max-width:768px){
.article-full-body img { max-height:none; aspect-ratio:16/9; object-fit:cover; }
}
.article-full-body blockquote { border-left:3px solid var(--red); padding-left:20px; margin:24px 0; font-style:italic; color:var(--body-dark); }
.article-full-body ul, .article-full-body ol { padding-left:24px; margin:0 0 20px; }
/* Vetada categòrica de la "boleta blanca" (○) i altres marcadors típics
de contingut autogenerat per IA. Forcem disc (●) negre sòlid sempre,
inclús si el HTML fa servir style="list-style-type:circle". */
.article-full-body ul,
.article-full-body ul ul,
.article-full-body ul ul ul,
.hero-body ul,
.hero-body ul ul,
.sf-block ul,
.article-faq ul,
.article-faq ul ul,
.article-practical-info ul,
.article-practical-info ul ul {
list-style-type: disc !important;
}
.article-full-body ol,
.hero-body ol,
.sf-block ol { list-style-type: decimal !important; }
.article-full-body li { margin-bottom:8px; }
/* Si la IA escapa amb "○ text" literal o "- text" al començament, els
netegem visualment afegint padding al li i amagant símbols repetits. */
.article-full-body li::marker,
.hero-body li::marker { color: var(--ink, #1a1a1a); }
.article-drop-cap p:first-child::first-letter { font-family:var(--serif); font-size:4.5em; font-weight:900; float:left; line-height:.82; margin-right:6px; margin-top:4px; color:var(--ink); }
.article-full-body p { overflow:hidden; }
.article-full-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; padding-top:20px; border-top:1px solid var(--div); }
.tag-pill { font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:4px 10px; border:1px solid var(--div); color:var(--grey); cursor:pointer; transition:all .15s; }
.tag-pill:hover { border-color:var(--red); color:var(--red); }
/* ─ INFORMACIÓ PRÀCTICA ──────────────────────── */
.article-practical-info { margin-top:32px; padding:20px 22px; border:2px solid var(--ink); background:var(--surface); }
.article-practical-info h3 { font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink); margin:0 0 12px 0; }
.article-practical-info dl { margin:0; display:grid; grid-template-columns:140px 1fr; gap:8px 16px; font-family:var(--sans); font-size:13px; }
.article-practical-info dt { font-weight:700; color:var(--grey); }
.article-practical-info dd { margin:0; color:var(--ink); }
.article-practical-info dd a { color:var(--red); text-decoration:underline; }
@media (max-width:540px) { .article-practical-info dl { grid-template-columns:1fr; gap:2px 0; } .article-practical-info dt { margin-top:8px; } }
/* ─ FAQ ───────────────────────────────────────── */
.article-faq { margin-top:32px; }
.article-faq h3 { font-family:var(--serif); font-size:24px; font-weight:700; margin:0 0 16px 0; }
.article-faq details { border-bottom:1px solid var(--div); padding:14px 0; }
.article-faq summary { font-family:var(--serif); font-size:17px; font-weight:600; cursor:pointer; list-style:none; position:relative; padding-right:28px; }
.article-faq summary::-webkit-details-marker { display:none; }
.article-faq summary::after { content:'+'; position:absolute; right:6px; top:0; font-size:24px; color:var(--red); transition:transform .2s; }
.article-faq details[open] summary::after { content:'−'; }
.article-faq p { font-family:var(--body); font-size:15px; line-height:1.65; margin:10px 0 0 0; color:var(--body-dark); }
/* ─ FONTS DE L'ARTICLE ─────────────────────────── */
/* Pioneer #3 — Distintiu "Així s'ha escrit" (transparència) */
.dc-trust-badge {
margin-top:24px; padding:18px 22px;
border:1px solid var(--ink);
background:var(--paper);
font-family:var(--sans);
}
.dc-trust-badge h3 {
font-family:var(--sans);
font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.14em;
color:var(--ink); margin:0 0 14px 0;
padding-bottom:8px; border-bottom:1px solid var(--div);
display:flex; align-items:center; gap:8px;
}
.dc-trust-badge h3::before { content:'◆'; color:var(--red); }
.dc-trust-grid {
display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}
.dc-trust-item {
font-size:11px; color:var(--grey);
text-transform:uppercase; letter-spacing:.06em;
font-weight:600;
}
.dc-trust-item strong {
display:block;
font-size:14px; color:var(--ink);
font-weight:700; letter-spacing:0;
text-transform:none; margin-top:3px;
}
.dc-trust-foot {
margin-top:14px; padding-top:10px;
border-top:1px solid var(--div);
font-size:11px; color:var(--grey); line-height:1.5;
}
/* Pioneer #1 — botó TTS al header de l'article */
.dc-tts-bar {
display:flex; align-items:center; gap:10px;
margin:14px 0;
padding:10px 14px;
border:1px solid var(--div);
background:var(--surface);
font-family:var(--sans);
font-size:12px;
}
.dc-tts-btn {
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px;
background:var(--ink); color:var(--cream);
border:0; border-radius:3px;
font-family:var(--sans); font-size:12px;
font-weight:600; cursor:pointer;
transition:background .15s;
}
.dc-tts-btn:hover { background:var(--red); }
.dc-tts-btn:disabled { opacity:.5; cursor:wait; }
.dc-tts-btn::before {
content:'▶'; font-size:11px;
}
.dc-tts-btn.playing::before { content:'⏸'; }
.dc-tts-status { color:var(--grey); font-size:11px; }
/* Pioneer #6 — LIVE updates timeline pinned al header */
.dc-live-timeline {
margin:18px 0;
border-left:3px solid var(--red);
background:linear-gradient(90deg, rgba(184,38,43,.05), transparent 80%);
padding:14px 16px 14px 18px;
}
.dc-live-timeline-head {
display:flex; align-items:center; gap:10px;
font-family:var(--sans); font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.1em;
color:var(--red); margin-bottom:10px;
}
.dc-live-timeline-head .live-dot {
display:inline-block; width:8px; height:8px;
background:var(--red); border-radius:50%;
animation:dc-pulse 1.5s ease-in-out infinite;
}
@keyframes dc-pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.dc-live-update {
border-top:1px dashed var(--div);
padding:10px 0;
font-family:var(--body); font-size:14px; line-height:1.5;
}
.dc-live-update:first-of-type { border-top:0; padding-top:4px; }
.dc-live-update-time {
font-family:var(--mono,monospace); font-size:11px;
color:var(--grey); font-weight:700;
margin-right:8px;
}
.article-sources { margin-top:32px; padding:20px 22px; border:1px solid var(--div); background:var(--surface); }
.article-sources-title { font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--grey); margin:0 0 12px 0; }
.article-sources-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.article-sources-list li { font-family:var(--sans); font-size:13px; line-height:1.45; }
.article-sources-list a { color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color .15s; }
.article-sources-list a:hover { color:var(--red); }
.article-sources-domain { color:var(--grey); font-size:11px; }
/* ─ SOCIAL SHARE ──────────────────────────────── */
.share-bar { display:flex; align-items:center; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--div); flex-wrap:wrap; }
.share-label { font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--grey); }
.share-btn { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.06em; padding:6px 12px; border:1px solid var(--div); color:var(--grey); transition:all .15s; cursor:pointer; background:none; text-decoration:none; display:inline-block; }
.share-btn:hover { border-color:var(--red); color:var(--red); }
.share-copy-btn.copied { border-color:var(--ink); color:var(--ink); }
/* ─ ARTICLES RELACIONATS ────────────────────────── */
.related-section { margin-top:40px; padding-top:28px; border-top:2px solid var(--ink); }
.related-title { font-family:var(--serif); font-size:22px; font-weight:900; margin-bottom:20px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card { cursor:pointer; }
.related-card:hover .related-h3 { color:var(--red); }
.related-img { overflow:hidden; border:1px solid var(--div); margin-bottom:10px; background:var(--light); width:100%; aspect-ratio:16/9; }
.related-img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .3s; display:block; }
.related-cat { font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--red); margin-bottom:6px; }
.related-h3 { font-family:var(--serif); font-size:16px; font-weight:700; line-height:1.2; margin-bottom:4px; transition:color .15s; }
.related-time { font-family:var(--sans); font-size:11px; color:var(--grey); }
/* ─ BOOKMARK ─────────────────────────────────── */
@keyframes starPop { 0%{transform:scale(1)} 40%{transform:scale(1.45) rotate(-15deg)} 70%{transform:scale(.88) rotate(8deg)} 100%{transform:scale(1) rotate(0)} }
.bookmark-btn { background:none; border:none; cursor:pointer; padding:4px; line-height:0; color:var(--grey); transition:color .2s; }
.bookmark-btn:hover { color:var(--red); }
.bookmark-btn svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; transition:fill .25s,stroke .25s; }
.bookmark-btn.saved { color:var(--red); }
.bookmark-btn.saved svg { fill:var(--red); stroke:var(--red); animation:starPop .45s cubic-bezier(.22,1,.36,1) forwards; }
/* ─ DUOTONE + WIPE ─────────────────────────────── */
.duotone-wrap { position:relative; display:block; overflow:hidden; }
.duotone-wrap img { transition:transform .4s ease; }
.duotone-wrap:hover img { transform:scale(1.02); }
/* (grayscale eliminat — totes les imatges van en color) */
.img-wipe-wrap { position:relative; overflow:hidden; }
@keyframes wipeOut { 0%{transform:translateX(0%)} 100%{transform:translateX(101%)} }
.img-wipe-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#1a1a1a 0%,#b8262b 100%); transform:translateX(0%); transition:transform .8s cubic-bezier(.77,0,.175,1); pointer-events:none; z-index:2; }
.img-wipe-wrap.wipe-done::after { transform:translateX(101%); }
.hero-image-wrap.img-wipe-wrap::after { transition:transform 1.1s cubic-bezier(.77,0,.175,1); }
/* ─ REVEAL TIPOGRÀFIC ──────────────────────────── */
@keyframes wordReveal { 0%{opacity:0;filter:blur(8px);transform:translateY(8px) scale(.97)} 100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)} }
.hero-title-word { display:inline-block; opacity:0; animation:wordReveal .55s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes titleReveal { 0%{opacity:0;filter:blur(12px);letter-spacing:.4em;transform:translateY(6px)} 60%{opacity:.9;filter:blur(1px)} 100%{opacity:1;filter:blur(0);transform:translateY(0)} }
.reveal-title { opacity:0; animation:titleReveal .9s cubic-bezier(.22,1,.36,1) forwards; }
.reveal-title.revealed { opacity:1; animation:none; }
/* ─ MODALS ─────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding:16px; -webkit-overflow-scrolling:touch; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--cream); max-width:560px; width:100%; max-height:92vh; overflow-y:auto; padding:32px; border-top:4px solid var(--red); position:relative; border-radius:2px; }
.modal-close { position:absolute; top:12px; right:16px; font-family:var(--sans); font-size:24px; cursor:pointer; color:var(--grey); background:none; border:none; line-height:1; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { color:var(--ink); }
@media(max-width:480px){ .modal-box { padding:24px 20px 20px; } }
/* ─ LOADING SKELETONS ──────────────────────────── */
@keyframes skel { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.skel { background:linear-gradient(90deg,var(--light) 25%,var(--div) 50%,var(--light) 75%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:2px; }
/* Skeleton del COS de l'article. La portada ja no descarrega els cossos
(estalvi de ~500 KB), així que en obrir una peça pot haver-hi un instant
sense text: en compte d'un buit o d'un spinner, dibuixem les línies que
ocuparà el text. Mateixa mètrica que .article-full-body perquè quan
arribe el contingut real no salte res. */
.body-skel { margin:0; }
.body-skel span { display:block; height:1.05em; margin:0 0 .62em; border-radius:3px;
background:linear-gradient(90deg,var(--light) 25%,var(--div) 50%,var(--light) 75%);
background-size:400% 100%; animation:skel 1.4s ease infinite; }
.body-skel span:nth-child(4n) { width:88%; }
.body-skel span:nth-child(4n+1) { width:97%; }
.body-skel span:nth-child(4n+2) { width:92%; }
.body-skel span:nth-child(4n+3) { width:63%; margin-bottom:1.5em; }
/* Respecta qui ha demanat menys moviment: sense shimmer, només el bloc. */
@media (prefers-reduced-motion: reduce) {
.skel, .body-skel span { animation:none; }
}
/* ─ FOOTER ──────────────────────────────────────── */
.site-footer { border-top:3px double var(--ink); padding:32px var(--pad) 40px; text-align:center; background:var(--cream); }
.footer-name { font-family:var(--serif); font-size:26px; font-weight:900; letter-spacing:.02em; cursor:pointer; }
.footer-tagline { font-family:var(--body); font-style:italic; font-size:12px; color:var(--grey); margin-top:6px; }
.footer-links { display:flex; justify-content:center; gap:24px; margin-top:20px; flex-wrap:wrap; font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); }
.footer-links a:hover { color:var(--red); }
.footer-copy { font-family:var(--body); font-style:italic; font-size:11px; color:var(--grey); margin-top:16px; }
.empty-state { text-align:center; padding:60px 20px; color:var(--grey); font-family:var(--body); font-style:italic; font-size:18px; }
.empty-state-icon { font-size:48px; margin-bottom:16px; opacity:.4; }
/* ─ FILTRES ─────────────────────────────────────── */
.filter-btn { font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:10px 18px; border:none; background:none; cursor:pointer; color:var(--grey); border-bottom:2px solid transparent; white-space:nowrap; transition:all .15s; }
.filter-btn:hover, .filter-btn.active { color:var(--red); border-bottom-color:var(--red); }
/* ─ RESPONSIVE MÒBIL (basat en mobile-newspaper.jsx) ─────── */
@media(max-width:1100px){
:root{--pad:28px}
.hero-section{grid-template-columns:1fr;gap:0}
.hero-aside{border-top:1px solid var(--div);padding-top:20px;margin-top:20px}
.three-col{grid-template-columns:1fr 1fr;gap:0}
.col-article:nth-child(2){border-right:none;padding-right:0}
.col-article:nth-child(3){grid-column:1/-1;border-right:none;border-top:1px solid var(--div);padding:24px 0 0}
.four-col{grid-template-columns:1fr 1fr;gap:16px}
.opinion-grid{grid-template-columns:1fr}
.opinion-item:nth-child(odd){border-right:none;padding-left:0}
.newsletter-inner{grid-template-columns:1fr;gap:24px}
.related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
:root{--pad:16px;--w:100%}
body{font-size:15px}
.page-wrap{padding:0 var(--pad)}
.top-bar{padding:6px var(--pad);font-size:11px;letter-spacing:.06em;grid-template-columns:1fr auto 1fr;gap:6px}
.top-bar-left>span:nth-child(2),.top-bar-left>span:nth-child(3),.top-bar-left>span:nth-child(4){display:none}
.top-bar-center .cond{display:none}
.masthead{padding:14px var(--pad) 10px}
.masthead-name{font-size:32px}
.masthead-tagline{font-size:11px;margin-top:2px}
.masthead-ornament{display:none}
.main-nav{justify-content:flex-start;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;padding:0}
.main-nav::-webkit-scrollbar{display:none}
.nav-item{padding:10px 14px;font-size:11px;letter-spacing:.12em;flex-shrink:0;border-bottom:2px solid transparent}
.nav-item.active{border-bottom-color:var(--red);color:var(--red)}
.nav-search{display:none}
.ticker-wrap{padding:6px 0;font-size:11px}
.ticker-label{margin-left:var(--pad)}
.hero-section{grid-template-columns:1fr;padding:16px 0 12px}
.hero-category{font-size:11px;margin-bottom:8px}
.hero-title{font-size:clamp(22px,6vw,28px);margin-bottom:10px}
.hero-subtitle{font-size:14px;margin-bottom:12px}
.hero-body{column-count:1;font-size:15px;line-height:1.6;margin-top:14px}
.drop-cap-letter{font-size:52px}
.hero-meta{margin-top:12px;padding-top:10px;font-size:11px}
.hero-aside{border-top:1px solid var(--div);padding:16px 0 0;margin-top:0}
.aside-section-title{font-size:11px;margin-bottom:10px}
.aside-article{grid-template-columns:88px 1fr;gap:10px;padding:10px 0}
.aside-title{font-size:14px}
.section-header{margin:20px 0 14px}
.section-title{font-size:22px}
.three-col{grid-template-columns:1fr;gap:0;border-bottom:none;margin-bottom:0}
.col-article{padding:16px 0;border-right:none!important;border-bottom:1px solid var(--div);margin-right:0!important}
.col-article:last-child{display:block;border-bottom:none}
.col-title{font-size:20px}
.col-summary{font-size:13px}
.four-col{grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--div);padding-bottom:16px;margin-bottom:16px}
.mini-article{padding:10px 8px}
.mini-title{font-size:14px}
.opinion-grid{grid-template-columns:1fr}
.opinion-item{padding:14px 0}
.opinion-item:nth-child(odd){border-right:none;padding-left:0}
.opinion-title{font-size:16px}
.newsletter-box{padding:24px var(--pad)}
.newsletter-inner{grid-template-columns:1fr;gap:20px}
.newsletter-title{font-size:22px}
.newsletter-form{flex-direction:column}
.newsletter-input,.newsletter-btn{padding:12px 14px}
.article-full-wrap{padding:20px var(--pad)}
.article-full-title{font-size:clamp(24px,7vw,36px)}
.article-full-subtitle{font-size:16px}
.article-full-body{font-size:16px;line-height:1.7}
.site-footer{padding:24px var(--pad) 32px}
.footer-links{gap:14px;font-size:11px}
.related-grid{grid-template-columns:1fr;gap:16px}
}
/* ═══════════════════════════════════════════════════════════
MOBILE WSJ-STYLE — Capçalera fixa + drawer + feed vertical
Inspirat en l'app WSJ iOS: header negre amb hamburger + logo,
feed de cards verticals amb imatge gran, càtegoria en vermell
i titular serif. Es mostra <769px, ocult a desktop.
═══════════════════════════════════════════════════════════ */
#m-header, #m-drawer, #m-drawer-backdrop { display:none; }
/* ─ BARRA NEGRA FIXA (ordinador) ─────────────────────────────
30/10: a l'estil de la barra fixa de The Times, però amb la
identitat del diari: negre tinta, crema i Playfair, sense roig.
Menú i cerca a l'esquerra, la marca al centre, accions a la dreta.
Es queda dalt mentre es baixa; la capçalera gran continua davall. */
#d-bar { display:none; }
@media (min-width:769px){
#d-bar {
--bar:#141414; --bar-ink:#f5f1e8; --bar-line:rgba(245,241,232,.16);
display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
position:sticky; top:0; z-index:120; height:58px;
background:var(--bar); color:var(--bar-ink);
font-family:var(--sans);
}
html.dc-dark #d-bar { --bar:#0b0a08; border-bottom:1px solid var(--bar-line); }
.d-bar-side { display:flex; align-items:stretch; min-width:0; }
.d-bar-side.right { justify-content:flex-end; }
.d-bar-btn {
width:62px; flex:none; background:transparent; border:0; border-right:1px solid var(--bar-line);
color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .15s;
}
.d-bar-btn:hover, .d-bar-link:hover, .d-bar-lang button:hover { background:rgba(245,241,232,.08); }
.d-bar-btn svg { width:22px; height:22px; }
#d-logo {
align-self:center; display:flex; align-items:center; gap:10px; padding:0 24px;
font-family:var(--serif); font-weight:900; font-size:25px; letter-spacing:-.01em; line-height:1;
color:var(--bar-ink); white-space:nowrap;
}
.d-bar-lang { display:flex; align-items:center; gap:2px; padding:0 14px; border-left:1px solid var(--bar-line); }
#d-bar .d-bar-lang button {
flex:none; background:transparent; border:0; color:rgba(245,241,232,.6); cursor:pointer;
font:700 12px/1 var(--sans); letter-spacing:.12em; padding:8px 8px;
}
#d-bar .d-bar-lang button.active { color:var(--bar-ink); box-shadow:inset 0 -2px 0 var(--bar-ink); }
.d-bar-link {
display:flex; align-items:center; padding:0 20px; border-left:1px solid var(--bar-line);
font-size:14px; font-weight:600; color:var(--bar-ink); white-space:nowrap;
}
.d-bar-cta {
align-self:center; flex:none; margin:0 12px 0 14px; height:42px; padding:0 22px;
background:var(--bar-ink); color:#141414; border:0; cursor:pointer;
font:700 14px/1 var(--sans); letter-spacing:.01em; transition:background .15s;
}
.d-bar-cta:hover { background:#fff; }
/* En baixar i perdre de vista la línia de seccions, les seccions pugen a
la barra negra, com a The Times (30/10). Les que no caben s'amaguen. */
#d-secs { display:none; }
body.dbar-secs #d-bar { grid-template-columns:auto auto minmax(0,1fr) auto; }
body.dbar-secs #d-logo { font-size:20px; padding:0 18px 0 16px; }
body.dbar-secs #d-secs { display:flex; flex-wrap:wrap; justify-content:center; height:58px; overflow:hidden; min-width:0; }
body.dbar-secs .d-bar-link { display:none; }
.d-sec { display:flex; align-items:center; height:58px; padding:0 11px; font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(245,241,232,.72); white-space:nowrap; }
.d-sec:hover, .d-sec.active { color:var(--bar-ink); box-shadow:inset 0 -2px 0 var(--bar-ink); }
#d-bar :focus-visible { outline:2px solid var(--bar-ink); outline-offset:-4px; }
/* Amb la barra fixa, la franja d'utilitats ja no ha de fer de sostre. */
#d-bar ~ .top-bar { border-top:0; }
/* L'idioma ja és a la barra negra: no el repetim a la franja d'utilitats. */
.top-bar-right .lang-btn { display:none; }
body.dc-reading-mode #d-bar { display:none; }
}
@media (min-width:769px) and (max-width:1100px){
.d-bar-link { display:none; }
#d-logo { font-size:21px; padding:0 12px; }
}
@media(max-width:768px){
/* Header mòbil sticky */
#m-header {
display:flex; align-items:center; justify-content:space-between;
position:sticky; top:0; z-index:100;
height:54px; padding:0 12px;
background:var(--cream); color:var(--ink);
border-bottom:1px solid var(--ink);
}
#m-burger, #m-search {
background:transparent; border:0; padding:8px; cursor:pointer;
color:var(--ink); min-width:44px; min-height:44px;
display:flex; align-items:center; justify-content:center;
}
#m-burger { flex-direction:column; gap:4px; }
#m-burger span {
display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
transition:transform .25s ease, opacity .25s ease;
}
#m-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#m-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#m-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
#m-logo {
font-family:var(--serif); font-weight:900; font-size:18px;
letter-spacing:-.01em; color:var(--ink); text-decoration:none;
flex:1; text-align:center;
}
}
/* Drawer slide-in d'esquerra. Fora de la media query: des del 30/10
també l'obri el botó de menú de la barra negra d'ordinador. */
#m-drawer-backdrop {
display:block; position:fixed; inset:0; background:rgba(0,0,0,0);
z-index:99; pointer-events:none; transition:background .25s ease;
}
#m-drawer-backdrop.open { background:rgba(0,0,0,.5); pointer-events:auto; }
#m-drawer {
display:flex; flex-direction:column;
position:fixed; top:0; left:0; bottom:0; width:min(82vw,340px);
background:var(--paper); z-index:101; transform:translateX(-100%);
transition:transform .28s cubic-bezier(.22,1,.36,1);
overflow-y:auto;
}
/* L'ombra només amb el calaix obert: tancat, fora de pantalla, es veia al marge. */
#m-drawer.open { transform:translateX(0); box-shadow:0 0 32px rgba(0,0,0,.2); }
#m-drawer-head {
display:flex; align-items:center; justify-content:space-between;
padding:18px 20px; border-bottom:1px solid var(--div);
}
#m-drawer-title {
font-family:var(--sans); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--grey); font-weight:700;
}
#m-drawer-close {
background:transparent; border:0; font-size:28px; line-height:1;
color:var(--ink); cursor:pointer; padding:6px 10px;
min-width:44px; min-height:44px;
}
#m-drawer-nav {
display:flex; flex-direction:column;
padding:10px 0; flex:1;
}
#m-drawer-nav a {
display:block; padding:14px 22px;
font-family:var(--serif); font-size:18px; font-weight:700;
color:var(--ink); text-decoration:none;
border-bottom:1px solid rgba(0,0,0,.04);
}
#m-drawer-nav a.active { color:var(--red); }
#m-drawer-nav a:active { background:rgba(184,38,43,.06); }
#m-drawer-foot {
border-top:1px solid var(--div);
padding:14px 20px 20px;
display:flex; flex-direction:column; gap:10px;
}
#m-drawer-foot a {
font-family:var(--sans); font-size:13px;
color:var(--ink); text-decoration:none;
padding:8px 0;
}
#m-drawer-foot a:active { color:var(--red); }
#m-drawer-langs { display:flex; gap:6px; margin-top:8px; }
.m-lang {
flex:1; padding:8px; background:var(--paper); border:1px solid var(--div);
font-family:var(--sans); font-size:11px; letter-spacing:.12em;
font-weight:700; cursor:pointer; color:var(--grey);
}
.m-lang.active { background:var(--ink); color:var(--cream); border-color:var(--ink); }
@media(max-width:768px){
/* Amaga la capçalera desktop al mòbil — el drawer ja conté tot */
.top-bar, .masthead, .main-nav { display:none !important; }
/* Ticker amagat (massa visualment ocupat al mòbil) */
.ticker-wrap { display:none !important; }
/* ═════ FEED VERTICAL ESTIL WSJ ═════ */
.page-wrap { padding:0; }
.hero-section, #three-col-section, #four-col-section, .opinion-section,
.four-col, .three-col, .opinion-grid {
display:block !important;
grid-template-columns:none !important;
border:0 !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
}
/* Cada article = card unificada */
.hero-main, .col-article, .aside-article, .mini-article, .opinion-item {
display:block !important;
padding:18px 18px 16px !important;
border:0 !important;
border-bottom:1px solid var(--div) !important;
margin:0 !important;
background:var(--surface);
}
.hero-main { padding:8px 18px 18px !important; }
.hero-aside { display:none !important; }
/* Categoria en pastilla vermella tipus WSJ */
.col-cat, .hero-category, .opinion-cat, .aside-section-title {
display:inline-block !important;
font-family:var(--sans) !important; font-size:11px !important;
letter-spacing:.18em !important; text-transform:uppercase !important;
font-weight:800 !important; color:var(--red) !important;
margin:0 0 8px 0 !important; padding:0 !important; border:0 !important;
}
/* Imatges 16:9 grans i sempre primer */
.hero-image-wrap, .col-img, .aside-thumb {
width:100% !important; aspect-ratio:16/9 !important; height:auto !important;
margin:0 0 12px 0 !important; border:0 !important; border-radius:0 !important;
}
.aside-thumb img, .col-img img {
width:100% !important; height:100% !important; object-fit:cover !important;
}
/* Hero al mòbil: mateixa política que a desktop — contain (foto sencera,
sense zoom); la guarda universal de baix ja ho força. */
.hero-image-wrap img { width:100% !important; height:100% !important; }
/* WSJ no posa thumbs petits laterals — convertim els .aside-article en cards verticals plenes */
.aside-article {
grid-template-columns:none !important; grid-template-areas:none !important;
}
.aside-article > .aside-thumb { order:-1; }
/* Tipografia WSJ-mobile: titulars grans, serif, 22-26px */
.hero-title, .col-title, .aside-title, .mini-title, .opinion-title {
font-family:var(--serif) !important;
font-size:23px !important; line-height:1.18 !important;
font-weight:700 !important; letter-spacing:-.01em !important;
margin:0 0 8px 0 !important;
color:var(--ink) !important;
}
.hero-title { font-size:28px !important; line-height:1.12 !important; font-weight:900 !important; }
.hero-title a { display:block !important; }
/* Subtítol/excerpt 1 sola línia secundària, gris */
.hero-subtitle, .col-summary, .aside-excerpt, .mini-summary {
font-family:var(--body) !important; font-size:14px !important;
line-height:1.45 !important; color:var(--body-dark, #444) !important;
margin:0 0 10px 0 !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
/* Hero body (drop-cap, columnes) DESACTIVAT al mòbil — el lector farà clic per llegir */
.hero-body, .hero-caption { display:none !important; }
.hero-meta {
display:flex !important; align-items:center !important; gap:8px !important;
font-family:var(--sans) !important; font-size:11px !important;
color:var(--grey) !important; margin:8px 0 0 0 !important; padding:0 !important;
border:0 !important;
}
.hero-meta .author-avatar-sm { width:22px; height:22px; flex-shrink:0; }
/* Mobile: el botó "Llegir article complet" sí que el volem visible
(és l'únic CTA explícit cap a l'article complet). */
.read-more-link { display:inline-flex !important; padding:10px 16px !important; font-size:11px !important; }
/* Byline / metadades estandarditzades a totes les cards */
.col-author, .aside-author {
font-family:var(--sans) !important; font-size:11px !important;
color:var(--grey) !important; margin:8px 0 0 0 !important;
}
/* Newsletter compacta i centrada */
.newsletter-box { padding:32px 20px !important; margin:0 !important; }
.newsletter-title { font-size:24px !important; }
/* Footer minimal */
.site-footer { padding:24px 18px !important; }
/* Primer card té un padding-top més generós (separa del header) */
#hero-section { padding-top:6px !important; }
/* Article-view: capçalera neta, sense ticker, sense lateral */
#article-view .article-full-wrap { padding:18px 18px 32px !important; }
.article-full-cat {
color:var(--red) !important; font-size:11px !important;
letter-spacing:.18em !important; font-weight:800 !important;
}
.article-full-title { font-size:28px !important; line-height:1.15 !important; font-weight:900 !important; }
.article-full-subtitle { font-size:17px !important; padding-bottom:16px !important; margin-bottom:18px !important; }
/* Botó "tornar" i bookmark només visible si cal — ja existent */
.back-btn { padding:10px 14px !important; font-size:13px !important; }
/* No cosmètic-decoratiu sobrant */
.masthead-ornament, .live-radar, .live-dot { display:none !important; }
}
@media(max-width:480px){
:root{--pad:14px}
#m-logo { font-size:16px; }
.hero-title { font-size:25px !important; }
.col-title, .aside-title, .mini-title, .opinion-title { font-size:21px !important; }
.article-full-title { font-size:24px !important; }
.article-full-body { font-size:16px !important; }
}
/* ═══════════════════════════════════════════════════════════
GUARDA UNIVERSAL D'IMATGES
Cap ![]()
dins una targeta o contenidor d'article pot
trencar el layout. Si una imatge nova es renderitza fora
d'un wrapper conegut, igualment es manté dins els límits.
═══════════════════════════════════════════════════════════ */
.col-img > img,
.aside-thumb > img,
.related-img > img,
.article-full-image > img {
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
}
/* HERO: MAI forcem cover — el marc del hero és més apaïsat que 16:9 (el
max-height el retalla) i cover hi AMPLIA la foto brutalment ("ultra zoom").
Contain = la foto es veu SENCERA a la seua mida; el blur de fons cobreix
els laterals. Només .hero-cover (panoràmiques marcades per JS) fa cover. */
.hero-image-wrap > img {
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center !important;
display:block !important;
}
.hero-image-wrap.hero-cover > img { object-fit:cover !important; }
/* Prevenir desbordament d'imatges del cos de l'article (HTML lliure) */
.article-full-body img,
.hero-body img {
max-width:100% !important;
height:auto !important;
object-fit:cover;
}
@media(hover:none){
}
@media(prefers-reduced-motion:reduce){
.ticker-content,.hero-image-wrap img,.live-radar-ring,.hero-title-word,.img-wipe-wrap::after{animation:none!important;transition:none!important}
.masthead-name{-webkit-text-fill-color:var(--ink)!important;background-image:none!important}
}
/* ── AUTOR MINIATURA ────────────────────────────────────── */
.aside-author {
display:flex; align-items:center; gap:6px;
font-family:var(--sans); font-size:11px; color:var(--grey);
margin-top:4px; flex-wrap:wrap;
}
.aside-sep { color:var(--div); }
.aside-av {
width:18px; height:18px; border-radius:50%;
background:var(--ink); color:var(--cream);
display:flex; align-items:center; justify-content:center;
overflow:hidden; flex-shrink:0; font-size:7px; font-weight:700;
}
.col-author {
display:flex; align-items:center; gap:7px; flex-wrap:wrap;
font-family:var(--sans); font-size:11px; color:var(--grey); margin-top:2px;
}
.col-av {
width:20px; height:20px; border-radius:50%;
background:var(--ink); color:var(--cream);
display:flex; align-items:center; justify-content:center;
overflow:hidden; flex-shrink:0;
}
.col-av img { width:100%; height:100%; object-fit:cover; display:block; }
.col-av-initials { font-size:7px; font-weight:700; }
.col-author-name { font-weight:600; color:var(--ink); }
/* ── SKELETON MIN-HEIGHT (evitar layout shifts) ─────────── */
/* Sense min-height: l'alçada la marquen les peces del skeleton, que ara
repliquen la caixa real. Forçar 680px feia que el hero encongira en
arribar el contingut i empenyera amunt tota la portada. */
.hero-skeleton { min-height:0; }
#three-col-section:empty, #four-col-section:empty { min-height:200px; }
#aside-articles:empty { min-height:240px; }
/* ── ESTAT BUIT (quan no hi ha articles o falla la càrrega) ──── */
.hero-empty-state {
text-align:center; padding:80px 24px; min-height:680px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
color:var(--grey);
}
.hero-empty-icon { font-size:64px; margin-bottom:24px; opacity:.5; }
.hero-empty-state h2 {
font-family:var(--serif); font-size:28px; font-weight:700;
color:var(--ink); margin-bottom:12px; max-width:560px;
}
.hero-empty-state p { font-size:15px; margin-bottom:24px; max-width:480px; }
.hero-empty-retry {
background:var(--red-fill); color:#fff; border:none; padding:12px 24px;
font-family:var(--sans); font-size:13px; font-weight:600;
letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
transition:background .15s;
}
.hero-empty-retry:hover { background:#9a1a20; }
.aside-empty {
font-family:var(--sans); font-size:13px; color:var(--grey);
padding:20px 0; text-align:center;
}
/* Mode fosc desactivat aposta: la identitat editorial del Diari Comunitat
és sempre beige crema (#f5f1e8) + tinta negra + accent vermell. Mantenim
els mateixos colors independentment del prefers-color-scheme del SO. */
.skip-link{position:absolute;top:-40px;left:0;background:var(--red-fill);color:#fff;padding:6px 14px;font-family:var(--f-sans);font-size:12px;z-index:9999;transition:top .15s}.skip-link:focus{top:0}
/* ── FORMULARI SER REDACTOR (typeform-style) ─────────── */
#redactor-form-view { min-height:100vh; background:var(--cream); padding:40px 20px 80px; }
.rf-container { max-width:640px; margin:0 auto; }
.rf-header { margin-bottom:36px; text-align:center; }
.rf-title { font-family:var(--serif); font-size:clamp(28px,5vw,44px); font-weight:900; letter-spacing:-.02em; line-height:1.1; margin-bottom:8px; }
.rf-sub { font-family:var(--body); font-style:italic; color:var(--grey); font-size:16px; margin-bottom:28px; }
.rf-progress { width:100%; height:3px; background:var(--div); border-radius:2px; overflow:hidden; }
.rf-progress-bar { height:100%; width:10%; background:var(--ink); transition:width .35s cubic-bezier(.22,1,.36,1); }
#rf-form { background:var(--paper); border:1px solid var(--ink); padding:36px 32px; min-height:340px; position:relative; }
.rf-step { display:none; animation:rfFadeIn .35s ease-out; }
.rf-step.active { display:block; }
@keyframes rfFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.rf-num { display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.rf-label { display:block; font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.3; margin-bottom:18px; color:var(--ink); }
#rf-form input, #rf-form textarea, #rf-form select {
width:100%; padding:14px 16px; border:none; border-bottom:2px solid var(--ink);
background:transparent; font-family:var(--body); font-size:18px; color:var(--ink);
outline:none; transition:border-color .15s;
}
#rf-form input:focus, #rf-form textarea:focus, #rf-form select:focus { border-bottom-color:var(--red); }
#rf-form textarea { resize:vertical; min-height:90px; line-height:1.5; }
.rf-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.rf-actions button { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.06em; padding:12px 22px; border:1px solid var(--ink); background:var(--cream); color:var(--ink); cursor:pointer; transition:background .15s; }
.rf-actions button.rf-next, .rf-actions button.rf-submit, .rf-actions button.np-next { background:var(--ink); color:var(--cream); }
.rf-actions button:hover { opacity:.9; }
.rf-actions button.rf-prev, .rf-actions button.np-prev { background:transparent; }
.rf-back-home { display:inline-block; padding:12px 22px; border:1px solid var(--ink); color:var(--ink); font-family:var(--sans); font-size:12px; letter-spacing:.06em; text-decoration:none; }
@media (max-width: 640px) {
#rf-form, #np-form { padding:24px 20px; }
.rf-label { font-size:18px; }
#rf-form input, #rf-form textarea, #rf-form select,
#np-form input, #np-form textarea, #np-form select { font-size:16px; }
}
/* Envia'ns una notícia (21/10; 31/10: una sola pantalla). */
#press-form-view { min-height:100vh; background:var(--cream); padding:40px 20px 80px; }
.np-container { max-width:720px; }
.np-eyebrow { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.np-modes { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 24px; text-align:left; }
@media (max-width: 900px) { .np-modes { grid-template-columns:1fr 1fr; } }
.np-mode { position:relative; cursor:pointer; }
.np-mode input { position:absolute; opacity:0; inset:0; }
.np-mode span { display:block; padding:14px 16px; border:1px solid var(--div); background:var(--paper); transition:border-color .15s, box-shadow .15s; }
.np-mode strong { display:block; font-family:var(--sans); font-size:14px; color:var(--ink); }
.np-mode small { display:block; font-family:var(--sans); font-size:12px; color:var(--grey); margin-top:2px; }
.np-mode input:checked + span { border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); background:var(--light); }
.np-mode input:checked + span strong::after { content:" ✓"; }
.np-mode input:focus-visible + span { outline:2px solid var(--red); outline-offset:2px; }
.np-steps { display:flex; gap:6px; list-style:none; padding:0; margin:0; counter-reset:np; }
.np-steps li { flex:1; counter-increment:np; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); padding-top:8px; border-top:3px solid var(--div); text-align:left; }
.np-steps li::before { content:counter(np) " · "; }
.np-steps li.active, .np-steps li.done { color:var(--ink); border-top-color:var(--ink); }
#np-form { background:var(--paper); border:1px solid var(--ink); padding:32px 32px 28px; position:relative; }
.np-step { display:none; animation:rfFadeIn .35s ease-out; }
.np-step.active { display:grid; gap:22px; }
.np-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.np-field label { display:block; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:6px; line-height:1.3; }
.np-field label em, .np-check em { font-family:var(--sans); font-style:normal; font-size:11px; font-weight:600; color:var(--grey); letter-spacing:.04em; }
#np-form input:not([type=checkbox]):not([type=radio]), #np-form textarea, #np-form select {
width:100%; padding:10px 2px; border:none; border-bottom:2px solid var(--ink);
background:transparent; font-family:var(--body); font-size:17px; color:var(--ink); outline:none; transition:border-color .15s;
}
#np-form input:focus, #np-form textarea:focus, #np-form select:focus { border-bottom-color:var(--red); }
#np-form textarea { resize:vertical; min-height:64px; line-height:1.5; }
#np-form .np-invalid { border-bottom-color:var(--red) !important; background:color-mix(in srgb, var(--red) 6%, transparent) !important; }
.np-intro { margin:0; font-family:var(--body); font-style:italic; color:var(--grey); font-size:15px; }
/* Conversió (30/10): xips en lloc de calendaris, contacte preferit,
esborrany desat i un botó d'enviar que es veu. */
.np-label { display:block; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:8px; line-height:1.3; }
.np-label em { font-family:var(--sans); font-style:normal; font-size:11px; font-weight:600; color:var(--grey); letter-spacing:.04em; }
.np-hint { margin:6px 0 0; font-family:var(--sans); font-size:12.5px; color:var(--grey); line-height:1.45; }
.np-chips { display:flex; flex-wrap:wrap; gap:8px; }
.np-chip { position:relative; cursor:pointer; }
.np-chip input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.np-chip span { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--ink); border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); background:var(--paper); transition:background .15s,color .15s; }
.np-chip input:checked + span { background:var(--ink); color:var(--cream); }
.np-chip input:focus-visible + span { outline:2px solid var(--ink); outline-offset:2px; }
.np-when-more { display:grid; grid-template-columns:auto 1fr auto 1fr; align-items:center; gap:8px 12px; margin-top:12px; }
.np-when-more[hidden] { display:none; }
.np-sub { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--grey); }
.np-draft { margin:0 0 18px; padding:10px 14px; background:var(--light); font-family:var(--sans); font-size:13px; color:var(--ink); display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; }
.np-draft[hidden] { display:none; }
.np-draft button { background:none; border:0; padding:0; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; color:var(--ink); }
.np-fallback { margin:10px 0 0; font-family:var(--sans); font-size:13px; color:var(--ink); }
.np-fallback[hidden] { display:none; }
.np-fallback a { font-weight:700; color:var(--ink); text-underline-offset:3px; }
#np-form .rf-submit { font-size:15px; padding:15px 30px; }
.np-success-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 22px; }
.np-success-actions button { font-family:var(--sans); font-size:14px; font-weight:700; padding:13px 22px; border:1px solid var(--ink); cursor:pointer; background:transparent; color:var(--ink); }
.np-success-actions .np-again { background:var(--ink); color:var(--cream); }
@media (max-width:600px){
#np-form { padding:22px 16px 20px; }
#np-form .rf-actions { justify-content:stretch; }
#np-form .rf-submit { width:100%; padding:17px 20px; font-size:16px; }
.np-when-more { grid-template-columns:auto 1fr; }
.np-chip span { min-height:44px; }
}
.np-drop { border:2px dashed var(--ink); padding:22px 16px; text-align:center; cursor:pointer; background:var(--cream); transition:background .15s; }
.np-drop strong { display:block; font-family:var(--sans); font-size:14px; color:var(--ink); }
.np-drop small { display:block; font-family:var(--sans); font-size:12px; color:var(--grey); margin-top:4px; }
.np-drop.drag-on, .np-drop:hover { background:var(--light); }
.np-drop:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.np-thumbs { list-style:none; padding:0; margin:10px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.np-thumbs:empty { display:none; }
.np-thumbs li { position:relative; aspect-ratio:1; background:var(--light); border:1px solid var(--div); overflow:hidden; }
.np-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.np-thumbs .np-st { position:absolute; left:0; right:0; bottom:0; padding:3px 6px; font-family:var(--sans); font-size:10px; font-weight:700; background:rgba(0,0,0,.6); color:#fff; }
.np-thumbs .np-st.err { background:var(--red-fill, #b8262b); }
.np-thumbs button { position:absolute; top:4px; right:4px; width:26px; height:26px; border:none; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:15px; line-height:1; cursor:pointer; }
.np-photo-extra { margin-top:12px; display:grid; gap:8px; }
.np-photo-extra[hidden] { display:none; }
.np-photo-extra > label:first-child { font-family:var(--serif); font-size:15px; font-weight:600; }
.np-field label.np-check { font-family:var(--sans); font-size:13px; font-weight:400; margin:0; }
.np-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:28px 0; padding:18px 22px; border:1px solid var(--ink); border-left:5px solid var(--red); background:var(--paper); }
.np-band p { margin:0; flex:1 1 320px; font-family:var(--body); font-size:16px; line-height:1.45; color:var(--ink); }
.np-band a { font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.04em; padding:11px 18px; background:var(--ink); color:var(--cream); text-decoration:none; white-space:nowrap; }
.np-band a:hover { opacity:.9; }
.np-band a:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.np-check { display:flex; gap:10px; align-items:flex-start; font-family:var(--sans); font-size:13px; line-height:1.45; color:var(--body-dark, var(--ink)); cursor:pointer; }
.np-check input { margin-top:2px; width:18px; height:18px; flex:none; accent-color:var(--ink); }
.np-check a { color:var(--red); }
.np-error { margin:16px 0 0; font-family:var(--sans); font-size:13px; color:var(--red); font-weight:600; }
.np-error[hidden] { display:none; }
#np-form .rf-actions { margin-top:4px; }
/* Qui envia (31/10): particular, o una organització (empresa, club o institució). */
#press-form-view[data-mode="particular"] .np-only-premsa, #press-form-view:not([data-mode="particular"]) .np-only-veina { display:none !important; }
/* Una sola pantalla (31/10): el que cal, a la vista; la resta, plegat. */
#press-form-view .np-steps, #press-form-view .np-next, #press-form-view .np-prev { display:none !important; }
#press-form-view .np-step { display:grid; gap:22px; }
#press-form-view .np-step[data-step="2"] { display:none; }
#press-form-view.np-more-open .np-step[data-step="2"] { display:grid; padding:20px 0 4px; }
#press-form-view .np-step[data-step="3"] { margin-top:26px; padding-top:24px; border-top:1px solid var(--div); }
.np-more { display:flex; align-items:center; gap:10px; width:100%; margin:26px 0 0; padding:14px 16px; border:1px dashed var(--ink); background:var(--cream); font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; text-align:left; }
.np-more small { display:block; font-weight:400; font-size:12px; color:var(--grey); margin-top:2px; }
.np-more .np-more-ic { font-size:20px; line-height:1; width:22px; text-align:center; }
.np-more:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.np-club-list { position:absolute; left:0; right:0; top:100%; z-index:30; list-style:none; margin:2px 0 0; padding:4px 0; background:var(--paper); border:1px solid var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:320px; overflow:auto; }
.np-club-list[hidden] { display:none; }
.np-club-list li { padding:9px 12px; font-family:var(--sans); font-size:14px; cursor:pointer; }
.np-club-list li small { color:var(--grey); font-size:12px; margin-left:4px; }
.np-club-list li:hover, .np-club-list li.on { background:var(--light); }
.np-club-list li.np-club-other { cursor:default; font-size:12px; color:var(--grey); border-top:1px solid var(--div); }
.np-club-list li.np-club-other:hover { background:transparent; }
.np-review-note { margin:12px 0 0; font-family:var(--sans); font-size:12px; color:var(--grey); text-align:center; }
@media (max-width: 640px) {
#np-form { padding:22px 18px; }
.np-row { grid-template-columns:1fr; }
.np-modes { grid-template-columns:1fr 1fr; }
.np-thumbs { grid-template-columns:repeat(2,1fr); }
#np-form input:not([type=checkbox]):not([type=radio]), #np-form textarea, #np-form select { font-size:16px; }
}
@media (prefers-reduced-motion: reduce) { .np-step { animation:none; } }
.rf-counter { font-family:var(--sans); font-size:11px; color:var(--grey); margin-top:6px; letter-spacing:.04em; }
.rf-counter.over { color:var(--red); font-weight:700; }
/* ── /oratge — capçalera editorial minimal + summary destacat ── */
.oratge-header { margin: 18px 0 28px; }
.oratge-eyebrow {
font-family: var(--sans);
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
color: var(--red, #b8262b); font-weight: 700;
margin-bottom: 8px;
display: inline-flex; align-items: center; gap: 8px;
}
.oratge-eyebrow::before {
content: ''; width: 6px; height: 6px; border-radius: 99px;
background: var(--red, #b8262b);
animation: oratge-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes oratge-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.85); }
}
.oratge-title {
font-family: Georgia, "Source Serif 4", serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 600; letter-spacing: -.02em;
line-height: 1; margin: 0 0 10px;
}
.oratge-lede {
font-family: Georgia, "Source Serif 4", serif;
color: var(--grey, #666); font-size: 16px; line-height: 1.5;
max-width: 580px; margin: 0;
}
.oratge-aemet-link {
color: var(--ink, #111); text-decoration: none;
border-bottom: 1px solid currentColor;
transition: color .15s ease;
}
.oratge-aemet-link:hover { color: var(--red, #b8262b); }
/* Summary card — quan tenim dades meteo, mostrem un resum editorial */
.oratge-summary {
position: relative;
background: var(--surface);
border: 1px solid var(--border, #e5e5e0);
border-radius: 2px;
padding: 28px 32px;
margin: 0 0 28px;
overflow: hidden;
display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
animation: oratge-fade-up .35s cubic-bezier(.22,1,.36,1);
}
.oratge-summary::before {
content: ''; position: absolute; top: 0; left: 0; bottom: 0;
width: 3px; background: linear-gradient(180deg, var(--red, #b8262b) 0%, transparent 100%);
}
@keyframes oratge-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.oratge-summary-icon {
font-size: 64px; line-height: 1; flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
.oratge-summary-body { min-width: 0; }
.oratge-summary-place {
font-family: var(--sans);
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--grey, #666); font-weight: 700; margin-bottom: 6px;
}
.oratge-summary-text {
font-family: Georgia, "Source Serif 4", serif;
font-size: 19px; line-height: 1.45; color: var(--ink, #111);
margin: 0 0 10px; font-weight: 400;
letter-spacing: -.005em;
}
.oratge-summary-text strong {
color: var(--red, #b8262b); font-weight: 600;
}
.oratge-summary-meta {
display: flex; gap: 20px; flex-wrap: wrap;
font-family: var(--sans); font-size: 12px; color: var(--grey, #666);
}
.oratge-summary-meta span {
display: inline-flex; align-items: center; gap: 5px;
}
.oratge-summary-meta strong { color: var(--ink, #111); font-weight: 600; }
@media (max-width: 600px) {
.oratge-summary { padding: 22px; gap: 18px; grid-template-columns: 1fr; text-align: center; }
.oratge-summary-meta { justify-content: center; }
}
.oratge-chip {
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.oratge-chip:hover { background: var(--ink, #111) !important; color: #fff !important; border-color: var(--ink, #111) !important; transform: translateY(-1px); }
/* ═══════════════════════════════════════════════════════════════
PATCH MÒBIL — auditoria 2026-05
─────────────────────────────────────────────────────────────
Fixes per:
· Touch targets <44px (WCAG)
· Nav categories scroll-cue
· Taules classificacions tallades
· Topbar squeeze <380px
· Hero/FAQ typography <480px
· Sidebar layout 480-768px
· Focus-visible per accessibility
═══════════════════════════════════════════════════════════════ */
/* WCAG: touch targets ≥44×44px en pantalles tàctils */
@media (max-width: 768px) {
.nav-item {
min-height: 44px;
padding: 12px 16px;
display: inline-flex;
align-items: center;
}
.tag-pill,
.share-btn,
.lang-btn,
.lb,
.filter-btn {
min-height: 44px;
padding: 10px 14px;
display: inline-flex;
align-items: center;
}
.lang-toggle .lang-btn { gap: 4px; }
}
/* Scroll cue: indicador visual que el menú de categories és scrollable */
@media (max-width: 768px) {
.main-nav { position: relative; }
.main-nav::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 36px;
background: linear-gradient(to left, var(--paper, #f6f2ea), transparent);
pointer-events: none;
z-index: 5;
}
}
/* Topbar molt petit: amaga separadors i info no essencial */
@media (max-width: 480px) {
.top-bar-center { display: none; }
.top-bar-right { gap: 4px; font-size: 11px; }
.top-bar-left > span:nth-child(2),
.top-bar-left > span:nth-child(3) { display: none; }
}
/* Hero: tipografia adaptada a viewport molt petit */
@media (max-width: 480px) {
.hero-title { font-size: clamp(24px, 6vw, 32px) !important; }
.hero-subtitle { font-size: 15px; }
.hero-body p:first-child::first-letter {
font-size: 42px;
padding-right: 4px;
line-height: 1;
}
.hero-category { font-size: 11px; letter-spacing: .14em; }
}
/* Article: tipografia i layout en pantalles petites */
@media (max-width: 480px) {
.article-full-title { font-size: clamp(22px, 6vw, 28px); }
.article-full-subtitle { font-size: 14px; line-height: 1.5; }
.article-full-body { font-size: 15px; line-height: 1.75; }
.article-full-image { aspect-ratio: 16/9; max-height: 220px; }
.article-faq summary {
font-size: 15px;
padding-right: 22px;
line-height: 1.4;
}
.article-practical-info dl {
grid-template-columns: 1fr !important;
gap: 4px;
}
.article-practical-info dt { font-weight: 700; }
}
/* Sidebar: col·lapse correcte entre 480-768px */
@media (max-width: 768px) {
.aside-article {
grid-template-columns: 80px 1fr;
gap: 12px;
}
}
@media (max-width: 480px) {
.aside-article {
grid-template-columns: 1fr;
gap: 10px;
}
.aside-thumb {
aspect-ratio: 16/9;
width: 100%;
height: auto;
}
}
/* Grids: cv-grid + cv-munis-list amb millors breakpoints */
@media (max-width: 600px) {
.cv-grid { grid-template-columns: 1fr; gap: 12px; }
.cv-munis-list { grid-template-columns: 1fr; }
}
/* Taules classificacions: scroll horitzontal AMB cue visual */
@media (max-width: 768px) {
.dc-standings-table-wrap,
.standings-mini,
.cat-standings-grid {
overflow-x: auto;
position: relative;
-webkit-overflow-scrolling: touch;
}
.dc-standings-table-wrap::after,
.standings-mini::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 28px;
background: linear-gradient(to left, var(--paper, #fff), transparent);
pointer-events: none;
}
.dc-standings-table {
font-size: 12px;
min-width: 380px;
}
.dc-standings-table th,
.dc-standings-table td { padding: 4px 5px; }
}
/* Oratge chips: wrap + espai en mòbil */
@media (max-width: 480px) {
.oratge-chip {
font-size: 12px;
padding: 8px 12px;
margin: 4px 3px;
}
.oratge-summary {
padding: 20px 18px;
gap: 16px;
grid-template-columns: 1fr !important;
text-align: center;
}
.oratge-summary-icon { font-size: 52px; }
.oratge-summary-text { font-size: 16px; }
.oratge-summary-meta { justify-content: center; font-size: 11px; }
}
/* Footer compacte en mòbil */
@media (max-width: 480px) {
.footer-links { gap: 12px; font-size: 11px; flex-wrap: wrap; }
.footer-copy { font-size: 11px; line-height: 1.4; }
}
/* Focus-visible per a tots els elements interactius — WCAG 2.4.7 */
.nav-item:focus-visible,
.tag-pill:focus-visible,
.share-btn:focus-visible,
.lang-btn:focus-visible,
.lb:focus-visible,
.read-more-link:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--red, #b8262b);
outline-offset: 2px;
border-radius: 4px;
}
/* Active nav-item: aria-current ja al markup, afegim style */
.nav-item.active { font-weight: 700; }
.nav-item.active::after {
content: '';
position: absolute;
bottom: 0; left: 12px; right: 12px;
height: 2px;
background: var(--red, #b8262b);
}
.nav-item { position: relative; }
/* Drop-cap: garantir que no trenca quan el primer paràgraf és curt */
@media (max-width: 480px) {
.hero-body { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
}
/* Masthead: més compacte en mòbil */
@media (max-width: 480px) {
.masthead { padding: 10px var(--pad, 16px) 8px; }
.masthead-name { font-size: 22px; line-height: 1.1; }
.cv-silhouette { height: 0.7em; margin-right: 0.25em; }
}
/* Newsletter modal: max-width segur */
@media (max-width: 768px) {
.modal-box,
.newsletter-modal {
max-width: min(100%, 420px);
margin: 0 16px;
}
}
/* ── COLUMNA DE LECTURA ÒPTIMA (estil NYT) ─────────────────
El text de l'article es limita a 680px (60-75 caràcters per línia)
centrat; les imatges i figures poden ocupar tota l'amplada (860px).
Va al final del CSS perquè guanye la cascada sobre els marges previs. */
.article-full-cat, .article-full-title, .article-full-subtitle,
.article-full-meta, .article-full-caption, .article-full-body,
.article-full-tags, .share-bar, .article-faq, .article-practical-info,
.article-sources, .dc-trust-badge, .dc-tts-bar, .dc-live-timeline, .dc-claus {
max-width:680px; margin-left:auto; margin-right:auto;
}
/* ── MENÚ "EINES" (top-bar) ────────────────────────────────
Condensa les 6 eines en un desplegable: la capçalera respira i
les eines segueixen a un clic, amb nom + descripció. */
.dc-tools-wrap { position:relative; display:inline-flex; }
.dc-tools-trigger { background:none; border:0; padding:0; text-transform:uppercase; letter-spacing:.08em; }
.dc-tools-dd {
display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:500;
min-width:250px; background:var(--paper); border:1px solid var(--ink);
border-radius:2px; box-shadow:0 10px 28px rgba(26,26,26,.14); padding:6px 0;
text-transform:none; letter-spacing:0;
}
.dc-tools-dd.open { display:block; }
.dc-tools-dd button, .dc-tools-dd a.dc-tools-link {
text-decoration:none;
display:flex; align-items:center; gap:11px; width:100%; text-align:left;
background:none; border:0; cursor:pointer; padding:9px 16px;
font-family:var(--sans); color:var(--ink);
}
.dc-tools-dd button:hover, .dc-tools-dd a.dc-tools-link:hover { background:var(--surface); }
.dc-tools-dd button:hover strong, .dc-tools-dd a.dc-tools-link:hover strong { color:var(--red); }
.dc-tools-dd button .dc-ic, .dc-tools-dd a.dc-tools-link .dc-ic { width:16px; height:16px; }
.dc-tools-dd button strong, .dc-tools-dd a.dc-tools-link strong { display:block; font-size:13px; font-weight:600; }
.dc-tools-dd button small, .dc-tools-dd a.dc-tools-link small { display:block; font-size:11px; color:var(--grey); font-weight:400; margin-top:1px; }
/* ── FOOTER-MAPA (periòdic de primera divisió) ───────────── */
.footer-grid {
display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
max-width:var(--w); margin:28px auto 0; text-align:left;
padding-top:24px; border-top:1px solid var(--div);
}
.footer-col h3 {
font-family:var(--sans); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; font-weight:700; color:var(--ink);
margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--ink);
}
.footer-col a {
display:block; font-family:var(--sans); font-size:13px; color:var(--grey);
padding:4px 0; text-decoration:none; text-transform:none; letter-spacing:0;
}
.footer-col a:hover { color:var(--red); }
.footer-bottom {
margin-top:28px; padding-top:16px; border-top:1px solid var(--div);
font-family:var(--sans); font-size:11px; color:var(--grey);
display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
}
@media (max-width:768px){
.footer-grid { grid-template-columns:1fr 1fr; gap:22px; }
}