@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=DM+Sans:wght@400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --red: #c0392b; --red-dark: #96261f; --green: #1a6b3a; --green-light: #e8f5ee; --black: #0f0f0f; --gray-1: #333; --gray-2: #555; --gray-3: #888; --gray-4: #ccc; --gray-5: #f2f2f2; --white: #fff; --font-serif: 'Source Serif 4', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; } /* ── DARK THEME ── Si attiva con [data-theme="dark"] sul tag . Si ridefiniscono solo le variabili: il resto del CSS le eredita. */ html[data-theme="dark"] { --red: #e0584a; --red-dark: #ff7a6b; --green: #4caf7d; --green-light: #173b29; --black: #f2f2f0; --gray-1: #d8d8d6; --gray-2: #b6b6b4; --gray-3: #8d8d8b; --gray-4: #3a3a3a; --gray-5: #1e1e1e; --white: #141414; } html[data-theme="dark"] .topbar { background: #0a0a0a; } html[data-theme="dark"] .site-footer { background: #0a0a0a; } html[data-theme="dark"] .footer-top { border-bottom: 1px solid #2a2a2a; } html[data-theme="dark"] .footer-tagline { color: #8d8d8b; } html[data-theme="dark"] .footer-col-title { color: #777; } html[data-theme="dark"] .footer-col a { color: #999; } html[data-theme="dark"] .pros-col li, html[data-theme="dark"] .cons-col li { border-bottom: 1px solid rgba(255,255,255,0.06); } body { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--black); background: var(--white); transition: background 0.18s, color 0.18s; } a { color: inherit; text-decoration: none; } /* ── WRAP ── */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 52px; flex-shrink: 0; border: none; background: transparent; color: var(--gray-2); cursor: pointer; transition: color 0.12s, background 0.12s; } .theme-toggle.theme-toggle-left { border-left: 1px solid var(--gray-5); border-right: 1px solid var(--gray-5); } .theme-toggle.theme-toggle-right { border-left: 1px solid var(--gray-5); } .theme-toggle:hover { color: var(--red); background: var(--gray-5); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (max-width: 600px) { .theme-toggle { width: 44px; } .theme-toggle svg { width: 16px; height: 16px; } } /* ── TOPBAR ── */ .topbar { background: var(--black); color: #777; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; } .topbar-date { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8b8b; } .topbar-links { display: flex; gap: 24px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .topbar-links a { color: #8b8b8b; transition: color 0.1s; } .topbar-links a:hover { color: var(--white); } .topbar-right { display: flex; align-items: center; gap: 20px; } /* ── NEWSLETTER CTA (landing page) ── */ .newsletter-cta-row { max-width: 600px; margin-left: auto; margin-right: auto; } .newsletter-cta-row .more-link-cta { justify-content: center; } .newsletter-cta-row .more-link-cta-text { font-size: 16px; letter-spacing: 0.1em; } .masthead { border-bottom: 1px solid var(--gray-4); padding: 36px 0 22px; } .masthead-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; } .masthead-left { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-3); line-height: 1.9; } .masthead-center { text-align: center; } .masthead-name { font-family: var(--font-serif); font-size: clamp(40px, 6.2vw, 72px); font-weight: 600; line-height: 0.95; letter-spacing: -0.5px; color: var(--black); } .masthead-name em { font-style: normal; font-weight: 600; color: var(--red); } .masthead-name a { color: inherit; } .masthead-tagline { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--gray-3); margin-top: 10px; font-style: italic; letter-spacing: 0.02em; } .masthead-right { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-3); text-align: right; line-height: 1.9; } /* ── NAV ── */ .site-nav { border-top: 3px solid var(--black); border-bottom: 1px solid var(--gray-4); position: sticky; top: 0; background: var(--white); z-index: 50; } .site-nav-inner { display: flex; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .site-nav-inner::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .site-nav-links { display: flex; align-items: stretch; } .site-nav a { font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-2); padding: 15px 24px; border-right: 1px solid var(--gray-5); transition: color 0.12s, background 0.12s; white-space: nowrap; } .site-nav a:hover { color: var(--black); background: var(--gray-5); } .site-nav a.active { color: var(--red); } /* ── SECTION LABEL ── */ .section-label { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 24px 0 18px; display: flex; align-items: center; gap: 16px; color: var(--gray-2); } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--gray-4); } .section-label.red { color: var(--red); } .section-label.red::after { background: var(--red); opacity: 0.25; } /* ── CAT NAV ── */ .cat-nav { font-family: var(--font-sans); font-size: 14px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px 0 22px; border-bottom: 1px solid var(--gray-5); } .cat-nav-label { color: var(--gray-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; margin-right: 4px; } .cat-nav a { padding: 7px 14px; border: 1px solid var(--gray-4); border-radius: 2px; color: var(--gray-2); transition: border-color 0.1s, color 0.1s; } .cat-nav a:hover { border-color: var(--black); color: var(--black); } .tag-toggle { font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--gray-4); border-radius: 2px; color: var(--gray-2); background: var(--white); cursor: pointer; transition: border-color 0.1s, color 0.1s, background 0.1s; } .tag-toggle:hover { border-color: var(--black); color: var(--black); } .tag-toggle.active { border-color: var(--green); background: var(--green); color: var(--white); font-weight: 700; } .tag-toggle.active:hover { border-color: var(--red-dark); background: var(--red-dark); } .tag-clear { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--red); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 7px 4px; margin-left: 4px; } .tag-clear:hover { color: var(--red-dark); } /* ── STORY CARD ── */ .story-card { display: grid; grid-template-columns: 1fr 100px; gap: 28px; padding: 22px 24px; margin: 0 -24px; border-bottom: 1px solid var(--gray-4); align-items: start; border-radius: 4px; transition: background 0.12s, border-color 0.12s; position: relative; } .story-card:first-child { border-top: 1px solid var(--gray-4); } .story-card:hover { background: var(--gray-5); border-bottom-color: transparent; } .story-card:hover + .story-card { border-top-color: transparent; } .story-card-category { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; } .story-card-headline { font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin-bottom: 8px; } .story-card-headline a { color: var(--black); transition: color 0.1s; } .story-card-headline a::after { content: ''; position: absolute; inset: 0; border-radius: 4px; } .story-card:hover .story-card-headline a { color: var(--red-dark); } .story-card:hover .story-card-category { color: var(--gray-2); } .featured-card:hover .story-card-category { color: var(--gray-2); } /* keep chips and other links above the stretch overlay */ .source-row, .source-chip, .story-card-side, .secondary-sources { position: relative; z-index: 1; } .story-card-summary { font-family: var(--font-sans); font-size: 15px; color: var(--gray-2); line-height: 1.6; margin-bottom: 12px; } /* ── SOURCE CHIPS ── */ .sources-label { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-3); margin-bottom: 8px; } .source-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .source-chip { display: inline-flex; align-items: center; padding: 7px 13px; border: 1px solid var(--gray-4); border-radius: 3px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--gray-1); background: var(--white); transition: border-color 0.12s, background 0.12s, color 0.12s; cursor: pointer; } .story-card:hover .source-chip { border-color: var(--gray-3); } .source-chip:hover { border-color: var(--green); background: var(--green-light); color: var(--green); } .source-chip.paywall { color: var(--gray-3); border-style: dashed; } .source-chip.paywall:hover { border-color: var(--gray-3); background: var(--gray-5); color: var(--gray-2); } .source-chip img { height: 22px; width: auto; max-width: 90px; object-fit: contain; display: block; } /* ── FEATURED GRID (homepage top 3) ── */ .featured-grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 0; border: 1px solid var(--gray-4); margin-bottom: 8px; } .featured-card { padding: 28px; transition: background 0.12s; position: relative; } .featured-card:hover { background: var(--gray-5); } .featured-main { grid-row: 1 / 3; border-right: 1px solid var(--gray-4); display: flex; flex-direction: column; } .featured-side { border-top: 1px solid var(--gray-4); } .featured-side:first-of-type { border-top: none; border-bottom: 1px solid var(--gray-4); } .featured-headline { font-family: var(--font-serif); font-weight: 600; line-height: 1.18; letter-spacing: -0.2px; margin-bottom: 10px; } .featured-main .featured-headline { font-size: clamp(28px, 3.4vw, 40px); } .featured-side .featured-headline { font-size: 21px; } .featured-headline a { color: var(--black); transition: color 0.1s; } .featured-headline a::after { content: ''; position: absolute; inset: 0; } .featured-card:hover .featured-headline a { color: var(--red-dark); } .featured-main .story-card-summary { margin-top: 4px; margin-bottom: 18px; font-size: 16px; } .featured-meta { margin-top: auto; padding-top: 4px; } .outlet-count-inline { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--gray-3); letter-spacing: 0.02em; } .outlet-count-inline strong { color: var(--gray-2); font-weight: 700; } /* ── MORE / ALL STORIES CTA ── */ .more-link-row { padding: 28px 0 0; } .more-link-cta { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 26px; background: var(--black); border-radius: 4px; transition: background 0.14s; } .more-link-cta:hover { background: var(--red-dark); } .more-link-cta-text { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); } .more-link-cta-count { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--black); background: var(--white); border-radius: 20px; padding: 4px 12px; min-width: 28px; text-align: center; } /* ── OUTLET COUNT SIDE ── */ .story-card-side { display: flex; flex-direction: column; align-items: flex-end; padding-top: 6px; } .outlet-count { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--gray-3); text-align: right; line-height: 1.3; } .outlet-count strong { display: block; font-size: 32px; font-weight: 700; color: var(--gray-3); line-height: 1; transition: color 0.12s; } .story-card:hover .outlet-count strong { color: var(--gray-2); } .badge { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; background: var(--green); color: var(--white); padding: 3px 7px; border-radius: 2px; display: inline-block; } /* ── BACK LINK ── */ .back-link { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--gray-3); padding: 22px 0 0; margin: 0; transition: color 0.1s; } .back-link:hover { color: var(--red); } /* ── FULL STORY PAGE ── */ .story-full { max-width: 700px; padding: 28px 0 72px; } .story-full-meta { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .story-full h1 { font-family: var(--font-serif); font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; line-height: 1.15; letter-spacing: -0.3px; margin-bottom: 22px; } .story-full-summary { font-size: 19px; color: var(--gray-1); line-height: 1.7; margin-bottom: 30px; border-bottom: 1px solid var(--gray-5); padding-bottom: 30px; } .story-full-framing { background: var(--gray-5); border-left: 3px solid var(--green); padding: 16px 20px; margin-bottom: 30px; font-size: 17px; color: var(--gray-1); line-height: 1.65; } .story-full-framing strong { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; } .story-full-sources h3 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-3); margin-bottom: 14px; } .story-full-sources .source-chip { padding: 9px 16px; font-size: 15px; } .story-full-sources .source-chip img { height: 24px; max-width: 96px; } /* ── HOMEPAGE SECTIONS (temi + partiti) ── */ .sections-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 3px solid var(--black); margin-top: 36px; } .section-block { padding: 28px 40px 40px 0; } .section-block:last-child { padding-left: 40px; padding-right: 0; border-left: 1px solid var(--gray-4); } .section-block-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .section-block-title::after { content: ''; flex: 1; height: 1px; background: var(--gray-4); } .topic-cards { display: flex; flex-direction: column; } .topic-card { padding: 14px 0; border-bottom: 1px solid var(--gray-5); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .topic-card:last-child { border-bottom: none; } .topic-card-name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--black); } .topic-card-name.disabled { color: var(--gray-3); } a.topic-card-name { transition: color 0.1s; } a.topic-card-name:hover { color: var(--red-dark); } .soon-tag { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-3); border: 1px solid var(--gray-4); border-radius: 2px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; } /* ── STATIC PAGES (temi, partiti, info) ── */ .static-page { max-width: 820px; padding: 32px 0 72px; } .static-page .intro { font-size: 19px; color: var(--gray-2); line-height: 1.7; margin-bottom: 36px; border-bottom: 1px solid var(--gray-5); padding-bottom: 30px; } .static-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gray-4); border: 1px solid var(--gray-4); margin-bottom: 36px; } .static-card { background: var(--white); padding: 24px 28px; transition: background 0.12s; } .static-card:hover { background: var(--gray-5); } .static-card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin-bottom: 8px; } .static-card p { font-family: var(--font-sans); font-size: 15px; color: var(--gray-2); line-height: 1.55; } /* ── TEMI: GRIGLIA IN EVIDENZA (nucleare grande + 2 di fianco) ── */ .temi-page { max-width: 1180px; } .temi-featured-grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 0; border: 1px solid var(--gray-4); margin-bottom: 40px; } .temi-card { position: relative; padding: 28px; transition: background 0.12s; display: block; } .temi-card:hover { background: var(--gray-5); } .temi-card-main { grid-row: 1 / 3; border-right: 1px solid var(--gray-4); display: flex; flex-direction: column; justify-content: center; min-height: 320px; } .temi-card-side { border-top: 1px solid var(--gray-4); min-height: 159px; display: flex; flex-direction: column; justify-content: center; } .temi-card-side:first-of-type { border-top: none; } .temi-tag { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; display: inline-block; } .temi-card-main .temi-tag { color: var(--red); font-size: 13px; } .temi-tag.tag-magistratura { color: #6b4fbb; } .temi-tag.tag-immigrazione { color: #1a7a8a; } .temi-card-main h3 { font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.3px; margin-bottom: 12px; } .temi-card-side h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 6px; } .temi-card h3 { color: var(--black); transition: color 0.1s; } .temi-card:hover h3 { color: var(--red-dark); }.temi-card p { font-family: var(--font-sans); color: var(--gray-2); line-height: 1.55; } .temi-card-main p { font-size: 16px; } .temi-card-side p { font-size: 14.5px; } .temi-rest-list { margin-top: 8px; } .temi-rest-item { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--gray-4); align-items: center; position: relative; transition: background 0.12s; } .temi-rest-item:first-child { border-top: 1px solid var(--gray-4); } .temi-rest-item:hover { background: var(--gray-5); } .temi-rest-body { padding: 0 4px; } .temi-rest-tag { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gray-3); margin-bottom: 5px; } .temi-rest-item h4 { font-family: var(--font-serif); font-size: 21px; font-weight: 600; margin-bottom: 4px; } .temi-rest-item h4 { color: var(--black); transition: color 0.1s; } .temi-rest-item:hover h4 { color: var(--red-dark); } .temi-rest-item p { font-family: var(--font-sans); font-size: 14.5px; color: var(--gray-2); line-height: 1.5; } .temi-rest-arrow { font-family: var(--font-sans); font-size: 20px; color: var(--gray-3); padding-right: 4px; position: relative; z-index: 1; transition: color 0.12s, transform 0.12s; } .temi-rest-item:hover .temi-rest-arrow { color: var(--red); transform: translateX(3px); } @media (max-width: 900px) { .temi-featured-grid { grid-template-columns: 1fr; } .temi-card-main { grid-row: auto; border-right: none; border-bottom: 1px solid var(--gray-4); min-height: auto; } .temi-card-side { min-height: auto; } .temi-card-side:first-of-type { border-top: 1px solid var(--gray-4); } } @media (max-width: 600px) { .temi-rest-item { grid-template-columns: 1fr; gap: 6px; } .temi-rest-arrow { display: none; } } /* ── INFO PAGE SPECIFICS ── */ .info-block { margin-bottom: 36px; } .info-block h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-5); } .info-block p, .info-block li { font-size: 18px; color: var(--gray-2); line-height: 1.7; margin-bottom: 10px; } /* ── FOOTER ── */ .site-footer { background: var(--black); color: #777; margin-top: 64px; } .footer-inner { padding-top: 0; padding-bottom: 0; } .footer-top { display: grid; grid-template-columns: 1fr auto; gap: 64px; padding: 44px 0 36px; border-bottom: 1px solid #1f1f1f; } .footer-brand { } .footer-name { font-family: var(--font-serif); font-size: 32px; font-weight: 600; letter-spacing: -0.3px; color: #fff; line-height: 1; margin-bottom: 10px; } .footer-name em { font-style: normal; font-weight: 600; color: var(--red); } .footer-tagline { font-family: var(--font-sans); font-size: 14px; color: #555; font-style: italic; } .footer-cols { display: flex; gap: 52px; } .footer-col { display: flex; flex-direction: column; gap: 11px; } .footer-col-title { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #444; margin-bottom: 4px; } .footer-col a { font-family: var(--font-sans); font-size: 15px; color: #666; transition: color 0.1s; } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; padding: 18px 0; font-family: var(--font-sans); font-size: 13px; color: #444; letter-spacing: 0.04em; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .masthead-inner { grid-template-columns: 1fr; text-align: center; gap: 8px; } .masthead-left, .masthead-right { display: none; } .story-card { grid-template-columns: 1fr; gap: 14px; } .story-card-side { flex-direction: row; align-items: center; } .featured-grid { grid-template-columns: 1fr; } .featured-main { grid-row: auto; border-right: none; border-bottom: 1px solid var(--gray-4); } .featured-side:first-of-type { border-bottom: 1px solid var(--gray-4); } .sections-row { grid-template-columns: 1fr; } .section-block:last-child { border-left: none; border-top: 1px solid var(--gray-4); padding-left: 0; padding-top: 24px; } .static-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 600px) { .wrap { padding: 0 20px; } .topbar-inner { padding-top: 7px; padding-bottom: 7px; } .topbar-links { gap: 14px; } .site-nav a { padding: 11px 14px; font-size: 12px; letter-spacing: 0.07em; } .footer-cols { flex-direction: column; gap: 24px; } .footer-bottom { flex-direction: column; gap: 6px; } } /* ── SECONDARY SOURCES ── */ .secondary-sources { margin-top: 10px; } .secondary-sources-label { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-3); margin-bottom: 6px; } .source-chip.secondary { opacity: 0.65; border-style: dashed; } .source-chip.secondary:hover { opacity: 1; } /* ── SEARCH BAR ── */ .search-bar-row { display: flex; align-items: center; gap: 14px; padding: 18px 0 10px; } .story-search-input { flex: 1; max-width: 520px; font-family: var(--font-sans); font-size: 16px; color: var(--black); background: var(--white); border: 1.5px solid var(--gray-4); border-radius: 3px; padding: 10px 14px; outline: none; transition: border-color 0.12s; } .story-search-input:focus { border-color: var(--green); } .story-search-input::placeholder { color: var(--gray-3); } .search-count { font-family: var(--font-sans); font-size: 14px; color: var(--gray-3); } /* ── ACTIVE CATEGORY IN NAV ── */ .cat-nav a.active { border-color: var(--green); color: var(--green); font-weight: 700; } /* ── PROS & CONS GRID ── */ .pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; } .pros-col, .cons-col { background: var(--gray-5); border-radius: 6px; padding: 20px 24px 24px; border-top: 4px solid var(--green); } .cons-col { border-top-color: var(--red); } .pros-col h4, .cons-col h4 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .pros-col h4::before { color: var(--green); font-size: 20px; } .cons-col h4::before { color: var(--red); font-size: 20px; } .pros-col ul, .cons-col ul { list-style: none; padding: 0; margin: 0; } .pros-col li, .cons-col li { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; padding: 8px 0 8px 28px; border-bottom: 1px solid rgba(0,0,0,0.05); position: relative; color: var(--gray-1); } .pros-col li:last-child, .cons-col li:last-child { border-bottom: none; } .pros-col li::before { content: "+"; position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 700; font-size: 16px; } .cons-col li::before { content: "−"; position: absolute; left: 0; top: 8px; color: var(--red); font-weight: 700; font-size: 18px; } @media (max-width: 700px) { .pros-cons-grid { grid-template-columns: 1fr; gap: 16px; } } /* ── TIMELINE STORICA ── */ .timeline { margin: 20px 0 30px; } .timeline-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--gray-5); align-items: start; } .timeline-item:last-child { border-bottom: none; } .timeline-date { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--red); letter-spacing: 0.02em; padding-top: 2px; white-space: nowrap; } .timeline-content { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--gray-1); } .timeline-content strong { color: var(--black); font-weight: 600; } @media (max-width: 700px) { .timeline-item { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .timeline-date { font-size: 14px; color: var(--red-dark); } } /* ── NOTE A PIÈ DI PAGINA ── */ sup a { color: var(--red); font-size: 14px; font-weight: 700; text-decoration: none; transition: color 0.1s; font-family: var(--font-sans); } sup a:hover { color: var(--red-dark); text-decoration: underline; } .fonte-item { margin-bottom: 10px; padding: 8px 0 8px 0; border-bottom: 1px solid var(--gray-5); display: flex; gap: 12px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; } .fonte-item:last-child { border-bottom: none; } .fonte-num { font-weight: 700; color: var(--red); min-width: 28px; flex-shrink: 0; } .fonte-text { color: var(--gray-2); } .fonte-text strong { color: var(--black); } .fonte-text a { color: var(--green); text-decoration: underline; } .fonte-text a:hover { color: var(--red); } .back-to-text { font-size: 13px; color: var(--gray-3); text-decoration: none; margin-left: 8px; } .back-to-text:hover { color: var(--red); } /* Rende la card cliccabile con cursore pointer */ .static-card { position: relative; cursor: pointer; transition: background 0.12s; } /* L'effetto hover si applica su tutta la card */ .static-card:hover { background: var(--gray-5); } /* Il link del titolo rimane sopra l'overlay per essere cliccabile */ .static-card h3 a { position: relative; z-index: 2; } /* Overlay invisibile che copre tutta la card (solo visivo, non cliccabile) */ .static-card::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 4px; /* se hai bordi arrotondati */ pointer-events: none; /* permette ai click di passare attraverso */ } .topic-more-link-row { padding: 18px 0 0; } .topic-more-link-row .more-link-cta { justify-content: center; padding: 13px 20px; } .topic-more-link-row .more-link-cta-text { font-size: 13px; } /* ── LOGHI ALTERNATIVI PER TEMA SCURO ── Ogni source-chip può contenere due : una con classe logo-light (mostrata in tema chiaro) e una con classe logo-dark (mostrata in scuro). Se un outlet ha solo la versione chiara, va bene comunque: la regola sotto nasconde semplicemente .logo-dark quando non serve. */ .source-chip img.logo-dark { display: none; } html[data-theme="dark"] .source-chip img.logo-dark { display: block; } /* Solo gli outlet con una vera variante scura (logo-light ha un fratello logo-dark) nascondono la versione chiara in tema scuro. Gli altri, che hanno solo logo-light e nessun logo-dark, restano sempre visibili. */ html[data-theme="dark"] .source-chip:has(img.logo-dark) img.logo-light { display: none; } /* ── BOTTONE "TORNA AI TEMI" IN FONDO PAGINA ── */ .temi-back-row { padding: 36px 0 0; margin-top: 12px; border-top: 1px solid var(--gray-5); } .temi-back-row .more-link-cta { justify-content: center; } /* ── ARCHIVIO: stessa struttura di "Tutte le notizie" ── */ .archivio-year-label { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--gray-3); margin: 28px 0 6px; } /* --- Logo partiti nella lista temi-rest --- */ .partito-logo { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; margin-left: 12px; } @media (max-width: 600px) { .partito-logo { width: 48px; height: 48px; } } /* ── NEUTRAL COLS (partiti: temi centrali + posizioni internazionali) ── */ :root { --yellow: #b8860b; --yellow-light: #fdf8e8; --purple: #6b4fbb; --purple-light: #f3f0fb; } html[data-theme="dark"] { --yellow: #d4a017; --yellow-light: #2a2210; --purple: #9b7fe8; --purple-light: #1e1730; } .neutral-col { background: var(--gray-5); border-radius: 6px; padding: 20px 24px 24px; border-top: 4px solid var(--gray-4); } .neutral-a { border-top-color: var(--yellow); } .neutral-b { border-top-color: var(--purple); } .neutral-col h4 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .neutral-a h4 { color: var(--yellow); } .neutral-b h4 { color: var(--purple); } .neutral-col ul { list-style: none; padding: 0; margin: 0; } .neutral-col li { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; padding: 8px 0 8px 28px; border-bottom: 1px solid rgba(0,0,0,0.05); position: relative; color: var(--gray-1); } html[data-theme="dark"] .neutral-col li { border-bottom: 1px solid rgba(255,255,255,0.06); } .neutral-col li:last-child { border-bottom: none; } .neutral-a li::before { content: "★"; position: absolute; left: 0; top: 8px; color: var(--yellow); font-weight: 700; font-size: 14px; } .neutral-b li::before { content: "◆"; position: absolute; left: 0; top: 8px; color: var(--purple); font-weight: 700; font-size: 12px; } /* ── MOBILE FIXES ── */ @media (max-width: 600px) { /* Topbar: nascondi links in mobilissimo, mostra solo data */ .topbar-links { gap: 10px; font-size: 11px; letter-spacing: 0.04em; } .topbar-date { font-size: 11px; } /* Masthead: riduci padding */ .masthead { padding: 20px 0 14px; } /* Nav: overflow scroll se necessario */ .site-nav-inner { justify-content: flex-start; overflow-x: auto; } .site-nav-links { flex-wrap: nowrap; } .site-nav a { padding: 11px 12px; font-size: 11px; white-space: nowrap; } /* Story card: layout verticale corretto */ .story-card { padding: 16px 0; margin: 0; } .story-card-headline { font-size: 20px; } .story-card-summary { font-size: 14px; } /* Featured grid: stack verticale */ .featured-grid { border: none; } .featured-card { padding: 16px 0; border-bottom: 1px solid var(--gray-4); } .featured-main .featured-headline { font-size: clamp(22px, 6vw, 30px); } /* Static grid */ .static-grid { gap: 1px; } .static-card { padding: 18px 16px; } /* Pros/cons e neutral: stack */ .pros-cons-grid { gap: 12px; } /* Footer */ .footer-top { padding: 28px 0 24px; gap: 20px; } .footer-name { font-size: 24px; } /* Timeline */ .timeline-item { grid-template-columns: 1fr; gap: 4px; } /* Sezioni home */ .section-block { padding: 20px 0 28px; } .section-block:last-child { padding-left: 0; padding-top: 20px; } /* Wrap: garantisci non overflow */ .wrap { padding: 0 16px; max-width: 100%; overflow-x: hidden; } /* Source chips: wrap corretto */ .source-row { gap: 6px; } .source-chip { padding: 6px 10px; font-size: 13px; } .source-chip img { height: 18px; max-width: 70px; } /* Temi rest */ .temi-rest-item { padding: 14px 0; } .temi-rest-item h4 { font-size: 18px; } /* Logo partiti */ .partito-logo { width: 40px; height: 40px; } /* more-link-cta */ .more-link-cta { padding: 14px 18px; } .more-link-cta-text { font-size: 13px; } /* Static page */ .static-page { padding: 20px 0 48px; } .story-full { padding: 16px 0 48px; } } @media (max-width: 380px) { .topbar-links { display: none; } .site-nav a { padding: 10px 9px; font-size: 10px; } } @media (max-width: 600px) { .site-nav-inner { justify-content: space-between; overflow-x: visible; flex-wrap: nowrap; margin-left: -10px; } .site-nav-links { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; flex-wrap: nowrap; } .site-nav-links::-webkit-scrollbar { display: none; } } /* ── TOPBAR THEME TOGGLE (mobile + desktop) ── */ .theme-toggle-topbar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: #8b8b8b; cursor: pointer; flex-shrink: 0; padding: 0; transition: color 0.12s; } /* Hide left/right nav theme toggles — button is in topbar */ .theme-toggle-left, .theme-toggle-right { display: none; } .theme-toggle-topbar svg { width: 15px; height: 15px; display: block; } .theme-toggle-topbar .icon-sun { display: none; } .theme-toggle-topbar .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle-topbar .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle-topbar .icon-moon { display: none; } .theme-toggle-topbar:hover { color: var(--white); } @media (max-width: 600px) { /* Nav: solo i link */ .site-nav-inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .site-nav-inner::-webkit-scrollbar { display: none; } .site-nav-links { flex-wrap: nowrap; width: 100%; } .site-nav a { flex: 1; text-align: center; padding: 11px 8px; font-size: 11px; letter-spacing: 0.05em; border-right: 1px solid var(--gray-5); } .site-nav a:last-child { border-right: none; } } .topbar-right { display: flex; align-items: center; gap: 20px; }