/* static-page.css — il "chrome" delle pagine standalone di StaticPageRenderer.js. Compagno di lib/vendor/rich.css: quello veste l'ARTICOLO (.rich-doc + i 5 temi), questo tutto cio' che sta intorno (testata, main, sidebar, piede, slot pubblicitari) e le PAGINE ELENCO (sezione in fondo). SI DEPLOYA UNA VOLTA PER SITO, a /assets/static-page.css, e le pagine lo REFERENZIANO. Non si cuoce inline: un blocco condiviso si paga N volte in storage e ogni sua modifica riscrive N oggetti = N operazioni classe A (la voce che fattura, $4,50 a blocchi interi da 1M). E' il meccanismo che ha prodotto 148 GB su R2 col roster di 19.527 citta' in ogni pagina. NON definisce colori propri: legge le variabili che il tema per-sito (.theme-a … .theme-e di rich.css) mette sull', piu' --accent inline. Ogni var(--accent|--surf|--ink|--muted| --line|--fd|--fb) porta SEMPRE un ripiego valido (tema A): mai un colore "rotto", mai la stringa `undefined`. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* NIENTE tipografia sul : font e interlinea del corpo li detta GeneratePress (`body,…{font-family:-apple-system,…;font-size:17px;line-height:1.5}`, main.min.css). Fino al 01/09/2026 qui c'era `font-family:var(--fb,Georgia,serif)`+`line-height:1.6`: ULTIMO foglio della catena, vinceva sul tema e mandava in SERIF l'INTERO sito (testata, menu, elenchi, piede) mentre un GeneratePress vero e' sans di sistema — la differenza piu' visibile fra i nostri siti e i siti madre. Il serif del testo lungo NON va rimesso qui: lo mette rich.css sull'ARTICOLO (`.rich-doc{font-family:var(--fb)}`), il solo posto dove serve. `margin:0` resta: ripiego identico al tema, utile se generatepress.css non arriva (404 gia' visto). */ /* ── PONTE tema-per-sito → variabili di GeneratePress ──────────── GeneratePress disegna schede, testata, sidebar, piede e form con le SUE variabili (schede `--base-3` #fff su fondo `--base-2` #f7f8f9). Fino al 01/09/2026 qui c'era `body{background:var(--surf,#fff)}` che, ultimo della catena, schiacciava il fondo pagina sul bianco delle schede — i riquadri sparivano; e toglierlo non basta, il fondo resterebbe chiaro sui temi SCURI (theme-c). Quindi non si sceglie un colore qui: si REINDIRIZZANO le variabili di GeneratePress su quelle del tema che rich.css mette sull'. `:root.theme-X` (0,2,0) batte il `:root` (0,1,0) del customizer per SPECIFICITA': la riparazione non dipende dall'ordine dei fogli, dichiarato altrove (SHARED_STYLESHEETS). */ :root.theme-a, :root.theme-b, :root.theme-c, :root.theme-d, :root.theme-e { --base-3: var(--surf, #fff); /* superficie delle SCHEDE */ --contrast: var(--ink, #16202B); /* testo primario */ --contrast-2: var(--muted, #5A6B7B);/* meta, didascalie */ --base: var(--line, #DDE4EA); /* bordi e filetti */ } /* Fondo PAGINA. I temi a e d non ne hanno uno proprio: restano sul grigio di GeneratePress (`:root{--base-2:#f7f8f9}`). b, c ed e ce l'hanno gia' (rich.css sull'): qui si RIPETE quel valore, e `tests/visual/palette-cascade.test.mjs` lo riconfronta con rich.css, cosi' una divergenza futura diventa rossa. theme-c e' il caso scuro. */ :root.theme-b { --base-2: #FBF7F1; } :root.theme-c { --base-2: #0E1B1E; } :root.theme-e { --base-2: #FAF8FF; } body { margin: 0; background: var(--base-2, #f7f8f9); color: var(--ink, #16202B); } /* ── header ──────────── */ .site-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; max-width: 1160px; margin: 0 auto; padding: 18px 22px; border-bottom: 1px solid var(--line, #DDE4EA); } .site-brand { font-family: var(--fd, system-ui, sans-serif); font-size: 1.18rem; font-weight: 700; color: var(--accent, #2C6E8F); text-decoration: none; letter-spacing: -0.01em; } .site-nav { display: flex; flex-wrap: wrap; gap: 18px; } .site-nav a { font-family: var(--fd, system-ui, sans-serif); font-size: 0.94rem; color: var(--muted, #5A6B7B); text-decoration: none; } .site-nav a:hover { color: var(--accent, #2C6E8F); text-decoration: underline; text-underline-offset: 3px; } /* ── layout ──────────── */ /* `div.page`: `page` e' anche una classe del GP — vedi `.post` qui sotto. */ div.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1160px; margin: 0 auto; padding: 30px 22px 56px; } @media (min-width: 1000px) { div.page { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .post-sidebar { position: sticky; top: 24px; } } .post { min-width: 0; } /* `:not(.entry-title)`: `post` e' anche una classe GP, e senza l'esclusione questo blocco rubava al titolo dell'articolo carattere, corpo, interlinea e crenatura. */ .post h1:not(.entry-title) { font-family: var(--fd, system-ui, sans-serif); font-size: clamp(1.7rem, 1.15rem + 2vw, 2.6rem); line-height: 1.15; margin: 0 0 12px; text-wrap: balance; letter-spacing: -0.015em; } .post-cat { font-family: var(--fd, system-ui, sans-serif); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent, #2C6E8F); margin: 0 0 18px; } .post-hero { margin: 0 0 26px; } .post-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; } .post-body > :first-child { margin-top: 0; } /* ── slot pubblicitari ──────────── Riservano spazio verticale prima che il widget carichi: senza min-height ogni unita' AdsKeeper spinge il testo verso il basso a caricamento avvenuto (layout shift), che e' un difetto di Core Web Vitals pagato su OGNI pagina della rete. */ .ad-slot { margin: 26px 0; min-height: 120px; } .ad-slot--sidebar { margin: 0; min-height: 250px; } .ad-slot--before-content { margin-top: 0; } .post-sidebar { min-width: 0; } /* ── footer ──────────── */ .site-foot { border-top: 1px solid var(--line, #DDE4EA); padding: 26px 22px 40px; } .site-foot p { max-width: 1160px; margin: 0 auto; font-family: var(--fd, system-ui, sans-serif); font-size: 0.86rem; color: var(--muted, #5A6B7B); } /* ── MENU: la tendina si apre anche SENZA JavaScript e da TASTIERA ──────────── La testata sta su UNA riga per costruzione: GeneratePressShell.capPrimaryNav tiene al massimo PRIMARY_NAV_MAX_TOP_LEVEL (5) voci di primo livello e raccoglie tutte le altre sotto una tendina. Qui NON si nasconde niente (niente nowrap, niente overflow:hidden sulla barra): il CSS si limita a rendere quella tendina raggiungibile e alta il giusto. GeneratePress rivela il sotto-menu su `li:hover>ul` e su `.sfHover`, che il suo JS mette al TOCCO (main.min.css). Due strade che il TABULATORE non percorre: chi naviga da tastiera mette a fuoco «More» e non vede nulla — le voci in tendina sarebbero pagine del sito senza alcun percorso. `:focus-within` ripete la STESSA rivelazione con le stesse cinque dichiarazioni del tema, quindi non c'e' un secondo stato da tenere allineato. E' anche il motivo per cui la voce di raccolta porta `href="#"`: un `` senza href non prende fuoco e questa regola non scatterebbe mai. Senza JS, su schermo largo, la tendina funziona lo stesso. */ .main-navigation:not(.toggled) ul li:focus-within > ul { left: auto; opacity: 1; transition-delay: 0s; pointer-events: auto; height: auto; overflow: visible; } .main-navigation:not(.toggled) ul ul li:focus-within > ul { left: 100%; top: 0; } /* La tendina di RACCOLTA e' l'unica che puo' portare decine di voci (una per categoria oltre il tetto, e le categorie crescono a ogni articolo). Senza limite diventerebbe piu' alta dello schermo e le ultime voci resterebbero fuori portata: si SCORRE dentro la tendina, non si nasconde nulla. I 200px fissi del tema tagliano etichette come «Sauces & Condiments», e su schermo stretto una tendina larga uscirebbe dalla pagina: da qui min-width + max-width. Le due regole aperte hanno specificita' 0,4,3 perche' devono battere lo `overflow:visible` che il tema applica sull'aperto (0,3,3): a parita' persa, il max-height non scatterebbe. */ .main-navigation .sub-menu.nav-overflow-menu { width: auto; min-width: 220px; max-width: 92vw; } .main-navigation:not(.toggled) ul li:hover > .nav-overflow-menu, .main-navigation:not(.toggled) ul li:focus-within > .nav-overflow-menu { max-height: 70vh; overflow-y: auto; overflow-x: hidden; } /* ── accessibilita' ──────────── */ :where(a):focus-visible, :where(button):focus-visible, :where(summary):focus-visible { outline: 2px solid var(--accent, #2C6E8F); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ════════════ PAGINE ELENCO — home, archivio, indice, autore, 404, about/contatti. Cio' che rich.css fa per il TESTO dell'articolo, questa sezione lo fa per gli ELENCHI. Due gusci le producono (leggi le sorgenti, non ridefinirle qui): 1) EdgeSiteSurfaces.renderListingPage -> STESSO guscio dell'articolo (.post.rich-doc): qui h2/p/a/.lead sono GIA' vestiti da rich.css, e questa sezione veste solo cio' che rich.css non conosce — le LISTE di link (buildLinkListHtml -> .archive-list|.home-recent| .home-categories|.home-authors|.notfound-recent|.article-index-list), la .pagination e i paragrafi di richiamo (all-articles-link, feed-link, archive-back, about-*, contact-*). 2) EdgeSitePages.pageShell -> guscio NUDO,
senza .rich-doc (indice /recipes/, pagina autore): la STESSA themeForSite gira anche qui, quindi --accent/--surf/ --ink/--muted/--line/--fd ereditano da . Qui si veste TUTTO: h1/h2 diretti, .post-grid/.post-card, .pager, .empty-state, .author-avatar/.author-bio. La regola per dentro .post-card resta pronta e innocua finche' l'elemento manca. */ /* Il guscio NUDO (indice, autore) non ha `.post-sidebar`: senza questa riga i suoi figli diretti (h1, liste, griglia di card) si spargerebbero sulle due colonne pensate per articolo+sidebar invece di impilarsi in una colonna sola. Un `.page` CON sidebar (articolo) non e' toccato — la regola scatta solo in assenza di `.post-sidebar`. */ @media (min-width: 1000px) { .page:not(:has(.post-sidebar)) { grid-template-columns: minmax(0, 1fr); } } /* Titoli diretti del guscio nudo: nel guscio .rich-doc l'h1/h2 sono gia' vestiti da `.post h1` e `.rich-doc h2` — qui il selettore `.page > h1` prende SOLO l'h1 che EdgeSitePages.pageShell mette come figlio diretto di
. */ div.page > h1 { font-family: var(--fd, system-ui, sans-serif); font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; letter-spacing: -0.015em; color: var(--ink, #16202B); } div.page > h2 { font-family: var(--fd, system-ui, sans-serif); font-size: 1.3rem; font-weight: 700; margin: 1.5em 0 0.6em; color: var(--accent, #2C6E8F); } /* ── liste-schede: archive-list, home-recent, home-categories, home-authors, notfound-recent, article-index-list (l'indice /recipes/ SENZA guscio GP, EdgeSiteSurfaces ~riga 1529) ── Stessa struttura HTML per tutte (buildLinkListHtml):
  • titolo — estratto
    • , testo semplice dopo