/* ============================================================ Gruppo Puglia Grotte — foglio di stile Ricostruito a partire dalla palette e dalla tipografia REALI del tema WordPress in uso (Twenty Thirteen, style.css v4.2), non da una direzione grafica inventata. Fonte: style.css di Twenty Thirteen fornito dall'utente. Non riprodotto: Genericons (icone dei meta, richiede il font a parte, non incluso in style.css), eventuale immagine di intestazione scelta da Customizer, eventuale CSS aggiuntivo applicato da Aspetto → Personalizza → CSS aggiuntivo o da un child theme (non presenti nel file fornito). Se esistono, condividili per rifinire ulteriormente questi token. ============================================================ */ /* ---------- Design tokens (valori presi da style.css originale) ---------- */ /* Tema chiaro/scuro/automatico: i token qui sotto sono i valori CHIARI (default, :root nudo). I valori SCURI sono ridichiarati più sotto in due blocchi — @media (prefers-color-scheme: dark) guardato da :not([data-theme="light"]) (segue il sistema quando non c'è una scelta esplicita, o quando la scelta esplicita è "dark") e :root[data-theme="dark"] senza media query (copre "dark" esplicito con sistema chiaro, caso che la sola media query non può raggiungere) — così l'attributo data-theme su , impostato da static/js/theme.js, vince in entrambe le direzioni. "auto" = nessun attributo: nessun JS necessario, la media query basta. Alcuni token qui sotto sono usati SOLO sulle fasce sempre scure (hero header, footer) e restano quindi invarianti rispetto al tema: non vanno ridichiarati nei blocchi dark (vedi commenti puntuali più sotto). */ :root { /* Palette autunnale di Twenty Thirteen */ --color-bg: #FFFFFF; /* .site background-color */ --color-border: #F2F2F2; /* .site border-left/right */ --color-cream: #F7F5E7; /* .navbar, .widget, .no-comments */ --color-cream-deep: #E8E5CE; /* .site-footer background-color */ --color-maroon-900: #220E10; /* SOLO hero header + footer bg (invariante, vedi --color-nav-accent per nav/submenu) */ --color-ink: #141412; /* body */ --color-muted: #686758; /* .site-footer color, .form-allowed-tags */ --color-link: #CA3C08; /* a */ --color-link-visited: #AC0404; /* a:visited */ --color-link-hover: #EA9629; /* a:hover, a:active — già chiaro/vibrante, leggibile su entrambi gli sfondi: invariante rispetto al tema */ --color-accent: #BC360A; /* .entry-meta a, current-menu-item */ --color-submenu-hover: #DB572F; /* ul.nav-menu ul a:hover — invariante, il box del sottomenu è comunque sempre scuro */ --color-footer-link: #E6402A; /* .site-footer .widget a — invariante, il footer resta sempre scuro nei due temi */ --color-band-text: #F7F5E7; /* testo su fasce sempre scure (.site-footer__grid): invariante, NON è lo stesso token di --color-cream (che invece cambia col tema) */ /* Nav/sottomenu: hover, voce corrente e sfondo sottomenu. Token dedicato (non --color-maroon-900, condiviso con l'hero/footer sempre scuri) così in dark mode può schiarire per restare visibile sopra una navbar ormai scura anch'essa, invece di confondersi con lo sfondo. */ --color-nav-accent: #220E10; /* Sfondo delle "schede" laterali (era rgba hardcoded, stesso valore di --color-cream): token dedicato per poter avere una variante scura. */ --color-scheda-bg: rgba(247, 245, 231, 0.7); color-scheme: light; /* Tipografia (dal file originale) */ --font-display: Bitter, Georgia, serif; /* h1–h6, site-title */ --font-body: "Source Sans 3", "Source Sans Pro", Helvetica, sans-serif; /* html, button, input… */ /* Scala tipografica: stessi px del tema originale, in rem su base 16px */ --size-h1: 3rem; /* 48px */ --size-h2: 1.875rem; /* 30px */ --size-h3: 1.375rem; /* 22px */ --size-h4: 1.25rem; /* 20px */ --size-h5: 1.125rem; /* 18px */ --size-h6: 1rem; /* 16px */ --size-site-title: 3.75rem; /* 60px, .site-title */ --size-tagline: 1.5rem; /* 24px, .site-description */ --size-small: 0.875rem; /* 14px, .entry-meta / .widget */ /* Misure di impaginazione (dal file originale) */ --site-max: 100rem; /* 1600px, .site */ --header-max: 67.5rem; /* 1080px, .home-link / .main-navigation */ --content-max: 65rem; /* 1040px, larghezza con sidebar */ --measure: 37.75rem;/* 604px, colonna di lettura .entry-content senza sidebar */ --sidebar-w: 18.75rem;/* 300px, .widget-area */ --header-h: 14.375rem; /* 230px — altezza reale di cropped-sfondo1.jpg, identica al min-height di .site-header .home-link nel file originale: non è un caso, è la stessa immagine. */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 3.75rem; } /* ---------- Tema scuro: segue il sistema quando non c'è una scelta esplicita (nessun data-theme, o data-theme="dark"), a meno che l'utente non abbia scelto esplicitamente "light" (:not([data-theme="light"])). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #1B1512; --color-border: #382D25; --color-cream: #241D18; --color-cream-deep: #150F0C; --color-ink: #EDE8DD; --color-muted: #B3A794; --color-link: #FF7A45; --color-link-visited: #FF6B6B; --color-accent: #FF7A45; --color-nav-accent: #5A2420; --color-scheda-bg: rgba(36, 29, 24, 0.7); color-scheme: dark; } /* Testo nero (o comunque scuro) fissato inline da HTML d'epoca (pandoc su sorgenti Dreamweaver del 1999-2014, markup.goldmark.renderer.unsafe = true): senza questa regola resterebbe illeggibile su una pagina ormai scura. Esclude i link (:not(a):not(a *)) per non rompere il colore dei link nel prosa; !important è l'unico modo di battere uno style="" inline. */ :root:not([data-theme="light"]) .prose [style*="color:"]:not(a):not(a *) { color: var(--color-ink) !important; } } /* Scelta esplicita "dark" con sistema chiaro: la sola media query sopra non può raggiungere questo caso, va ripetuta senza guardia di sistema. */ :root[data-theme="dark"] { --color-bg: #1B1512; --color-border: #382D25; --color-cream: #241D18; --color-cream-deep: #150F0C; --color-ink: #EDE8DD; --color-muted: #B3A794; --color-link: #FF7A45; --color-link-visited: #FF6B6B; --color-accent: #FF7A45; --color-nav-accent: #5A2420; --color-scheda-bg: rgba(36, 29, 24, 0.7); color-scheme: dark; } :root[data-theme="dark"] .prose [style*="color:"]:not(a):not(a *) { color: var(--color-ink) !important; } /* ---------- Reset di base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; } /* height: auto è essenziale: moltissime immagini delle pagine storiche migrate hanno width/height fissi nell'HTML sorgente (scansioni/foto d'epoca). Senza, max-width:100% da solo restringe la larghezza su schermi stretti ma lascia l'altezza al valore fisso dell'attributo, deformando la foto invece di scalarla in proporzione. */ img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--color-link); text-decoration: none; } a:visited { color: var(--color-link-visited); } a:hover, a:active { color: var(--color-link-hover); text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .mono { font-family: var(--font-body); } /* il tema originale non usa un monospazio */ .skip-link { position: absolute; left: -999px; top: 0; /* maroon-900, non --color-accent: invariante rispetto al tema, così il testo bianco resta leggibile anche quando --color-accent si schiarisce in dark mode (dove scenderebbe sotto contrasto accettabile). */ background: var(--color-maroon-900); color: #fff; padding: var(--space-1) var(--space-2); z-index: 100; } .skip-link:focus { left: var(--space-2); top: var(--space-2); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-3); } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-2); clear: both; } h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); } h3 { font-size: var(--size-h3); } .page-title { font-size: var(--size-h1); margin-top: var(--space-1); } .lede { color: var(--color-muted); font-size: var(--size-tagline); font-weight: 300; font-style: italic; margin-bottom: var(--space-4); } /* ---------- Site: la "tela" bianca con bordi sottili, come .site ---------- */ .site { max-width: var(--site-max); margin-inline: auto; background: var(--color-bg); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); } /* ---------- Header ---------- */ /* .site-header è solo un contenitore: l'immagine (cropped-sfondo1.jpg, 1600×230, passata via la custom property --header-image) e l'altezza fissa stanno sul blocco "hero" qui sotto, separato dalla barra di navigazione. Prima erano sullo stesso elemento flex di .navbar: due elementi in un flex-container "row" senza width esplicita finiscono affiancati invece che impilati, ed è per questo che il menu appariva spostato a destra invece che come barra orizzontale sotto l'header. */ .site-header { position: relative; } .site-header__hero { position: relative; background-color: var(--color-maroon-900); /* colore di attesa prima che l'immagine carichi */ background-image: var(--header-image); background-size: cover; background-position: center; min-height: var(--header-h); display: flex; align-items: center; /* nel tema originale il blocco titolo è vicino al centro verticale dell'immagine (padding-top: 58px su un box di 230px), non incollato al bordo inferiore */ } /* Leggera sfumatura per garantire contrasto al testo su qualunque zona della foto (il tema originale, per confronto, delega questo compito alla scelta dell'immagine stessa da parte di chi personalizza l'header). */ .site-header__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%); } .site-header__row { position: relative; z-index: 1; width: 100%; max-width: var(--header-max); margin-inline: auto; padding: var(--space-3); /* simmetrico: prima il top era più largo per compensare l'allineamento in basso, non più necessario ora che il blocco è centrato */ } /* header_textcolor reale da theme_mods_twentythirteen nel DB WordPress: #f4f3bc (crema chiaro), non bianco come nell'ipotesi iniziale. */ .site-header__brand { color: #f4f3bc; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-2); } .site-header__logo { grid-column: 1; grid-row: 1 / span 2; width: 4.5rem; height: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); } .site-header__name { grid-column: 2; grid-row: 1; display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--size-site-title); line-height: 1; color: #f4f3bc; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .site-header__claim { grid-column: 2; grid-row: 2; display: block; font: 300 italic var(--size-tagline) var(--font-body); color: #f4f3bc; text-shadow: 0 1px 4px rgba(0,0,0,0.6); margin-top: var(--space-1); } /* Barra di navigazione color crema, come .navbar/.nav-menu */ /* position: relative solo per ancorare .theme-toggle (posizionato assoluto, vedi sotto): non tocca il flusso di .nav-toggle/.nav-main. */ .navbar { background: var(--color-cream); position: relative; } .nav-main { max-width: var(--header-max); margin-inline: auto; padding-inline: var(--space-3); /* Riserva lo spazio di .theme-toggle sul lato destro: sopra la soglia hamburger (860px) .nav-main > ul resta comunque flex-wrap, quindi con poche centinaia di px in meno del necessario per una riga sola l'ultima voce può andare a finire proprio sotto il pulsante tema. Il pulsante occupa right:var(--space-2) (16px) + width:2.25rem (36px) = 52px = 3.25rem: qui va tenuto STRETTAMENTE superiore, non uguale, altrimenti margine zero e un elemento di menu in più (hugo.toml è la fonte del menu) torna a finirci sotto. */ padding-right: 4rem; } /* Attenzione: questo selettore, senza il combinatore diretto ">", si applica anche a .sub-menu (è un