/* * Intestazione: fissa in cima, cambia colore mentre si scorre. * Il colore di partenza è uguale allo sfondo scuro dell'hero della * home, quindi all'apertura pagina sembra trasparente. La classe * "is-scrolled" la aggiunge assets/js/header-scroll.js. */ .site-header, .site-footer, .site-main { /* WordPress mette un margine tra i blocchi principali della * pagina per conto suo, quando non gli dici il contrario: qui lo * togliamo, così le sezioni decidono da sole i propri distacchi * (vedi più sotto) e intestazione/piè di pagina restano a * contatto con quello che hanno sopra e sotto. */ margin: 0; } .site-header { position: sticky; top: 0; z-index: 20; background-color: var(--wp--preset--color--neutral); border-bottom: 1px solid var(--wp--preset--color--muted); padding: 20px; transition: background-color 220ms ease, border-color 220ms ease; } @media (min-width: 761px) { .site-header { padding: 30px 60px; } } /* * Solo sulla home l'intestazione parte nera: sotto c'è l'hero nero e si * confonde con quello sfondo, sembrando trasparente finché non si * scorre di 8 pixel (vedi assets/js/header-scroll.js). WordPress * aggiunge da solo la classe "home" al della pagina impostata * come pagina iniziale, quindi non serve altro per riconoscerla. * * Su tutte le altre pagine sotto l'intestazione c'è subito lo sfondo * chiaro del sito: lì l'intestazione resta bianca fin dall'inizio, * cioè la regola qui sopra si applica senza eccezioni. */ body.home .site-header:not(.is-scrolled) { background-color: var(--wp--preset--color--ink); border-bottom-color: rgba(255, 253, 253, 0.14); } .site-header .wp-block-navigation-item .wp-block-navigation-item__content { color: var(--wp--preset--color--tertiary); font-size: var(--wp--preset--font-size--body-sm); font-weight: var(--wp--custom--font-weight--bold); letter-spacing: 0.06em; text-transform: uppercase; transition: color 120ms ease; } body.home .site-header:not(.is-scrolled) .wp-block-navigation-item .wp-block-navigation-item__content { color: #D6D8D6; } .site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--wp--preset--color--secondary); border-bottom: 2px solid var(--wp--preset--color--primary); } body.home .site-header:not(.is-scrolled) .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--wp--preset--color--neutral); } .site-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary) !important; } /* * Logo e menu sulla stessa riga, centrati fra loro, con il menu spinto * a destra. Nel file dell'intestazione (parts/header.html) questo * comportamento è già scritto come attributo del blocco ("layout": * {"type":"flex","justifyContent":"space-between"}): WordPress lo * traduce da solo in uno stile quando la pagina è un modello a * blocchi vero e proprio. single.php, essendo un template PHP * classico, richiama lo stesso blocco con block_template_part(): in * quel percorso quello stile dinamico non viene generato (non è un * problema del blocco, sparisce silenziosamente). Lo scrivo quindi qui * a mano, così funziona in entrambi i casi: è ridondante sulle pagine * a blocchi (dove funzionava già), necessario sull'articolo singolo. */ .site-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* * Il blocco di navigazione ha una sua riga flessibile interna (dove * stanno le singole voci), separata da quella di "site-header-row": * anche questa va centrata, altrimenti le voci restano allineate in * alto rispetto al logo. Si nota soprattutto con lo sfondo chiaro * (dopo lo scroll), perché lì il disallineamento è più visibile. */ .site-header .wp-block-navigation, .site-header .wp-block-navigation__responsive-container, .site-header .wp-block-navigation__responsive-container-content, .site-header .wp-block-navigation__container { align-items: center; } /* * Due file di logo, non uno: "positivo" (scuro, per lo sfondo chiaro * dell'intestazione bianca) e "negativo" (chiaro, per lo sfondo nero * dell'intestazione in cima alla home). Sono due blocchi immagine * distinti, sovrapposti nello stesso punto: quello sbagliato per lo * stato attuale resta semplicemente nascosto (display:none), con lo * stesso identico selettore già usato più sopra per il colore del * menu, in modo che i due cambino sempre insieme. */ .site-header .site-logo { display: flex; align-items: center; max-height: 44px; } .site-header .site-logo .wp-block-image { margin: 0; max-height: 44px; } .site-header .site-logo img { max-height: 44px; width: auto; height: auto; display: block; } .site-header .site-logo .logo-negativo { display: none; } body.home .site-header:not(.is-scrolled) .site-logo .logo-positivo { display: none; } body.home .site-header:not(.is-scrolled) .site-logo .logo-negativo { display: block; } /* * Piè di pagina: fascia grigio chiaro, campo di ricerca a pillola. */ .site-footer { background-color: var(--wp--preset--color--surface); padding: 40px 20px 30px; } @media (min-width: 761px) { .site-footer { padding: 60px 60px 30px; } } /* * Stessa correzione della riga dell'intestazione, qui applicata al * gruppo interno del piè di pagina (ricerca, divisorio, copyright): * lo stile dinamico che WordPress genera dall'attributo del blocco * ("layout": colonna verticale, centrato) non arriva quando la pagina * passa da un template PHP classico (single.php) invece che da un * modello a blocchi. Per poterla scrivere qui a mano ho aggiunto la * classe "site-footer-inner" al gruppo, in parts/footer.html. */ .site-footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--lg); width: 100%; } .site-search { max-width: 560px; width: 100%; margin-inline: auto; } .site-search .wp-block-search__inside-wrapper { border-radius: 9999px; border-color: var(--wp--preset--color--muted); } /* * Il campo di testo si porta dietro un suo bordo squadrato di * fabbrica, che spunta da dentro il contenitore arrotondato. Lo * tolgo: la forma la decide solo il contenitore. */ .site-search .wp-block-search__input { border: none; background: transparent; box-shadow: none; } .site-search .wp-block-search__button { border: none; border-radius: 9999px; background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--secondary); } .site-search .wp-block-search__button:hover { background-color: #C2C91B; } .site-footer-divider { max-width: 560px; margin-inline: auto; border-color: var(--wp--preset--color--muted); } .site-footer-meta { text-align: center; color: var(--wp--preset--color--tertiary); } .site-footer-meta a { color: var(--wp--preset--color--tertiary); } .site-footer-meta a:hover { color: var(--wp--preset--color--primary); } /* * Home page (contenuto della pagina "Chi sono"). * Il padding orizzontale e la larghezza massima (1240px, in * theme.json) sono gli stessi valori usati nel file di Claude Design: * senza, il testo arriva fino al bordo dello schermo ed è quello che * dava la sensazione di sezioni "confuse". */ .home-book, .home-blog, .home-about, .home-learning, .home-cta { padding: 60px 20px; } @media (min-width: 761px) { .home-book, .home-blog, .home-about, .home-learning, .home-cta { padding: 120px 60px; } } /* * Hero: niente più padding sulla sezione. Il nero di sfondo deve * arrivare fino al bordo dello schermo e fino al bordo della foto, * quindi lo spazio attorno al testo lo gestisce solo la colonna del * testo (".home-hero-text"), non la sezione. */ .home-hero .wp-block-columns { gap: 0; } .home-hero-text { padding: 60px 20px 40px; } @media (min-width: 761px) { .home-hero-text { padding: 120px 60px; } } /* * Foto dell'hero: riempie tutta l'altezza della sua colonna (misura * fissa sui desktop, dove sta a fianco del testo) e sfuma nel nero di * sfondo con un gradiente. Da telefono la foto si impila sotto al * testo, quindi la sfumatura cambia direzione: dall'alto (dove tocca * il testo sopra di lei) invece che da sinistra. */ .home-hero-photo { position: relative; overflow: hidden; } .home-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 30%); pointer-events: none; } .home-hero-photo .home-portrait { margin: 0; } .home-hero-photo .home-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; /* A filo con lo sfondo nero della sezione: niente angoli arrotondati * (a differenza delle altre immagini, che invece li hanno). */ border-radius: 0; } @media (max-width: 760px) { .home-hero-photo { max-width: 520px; margin-inline: auto; } } @media (min-width: 761px) { /* * La colonna del testo, con titolo e tre paragrafi, è quasi sempre * più alta di 620px: senza queste due regole la foto restava alta * solo 620px e centrata dentro una colonna più alta, con dello * sfondo nero sopra e sotto, non distinguibile a occhio dal resto * dello sfondo ma percepibile come un "riquadro" per via degli * angoli e del bordo dell'immagine. "align-self: stretch" fa sì * che la colonna della foto prenda sempre la stessa altezza della * riga (cioè della colonna di testo, se è la più alta); "height: * 100%" a cascata fa sì che il gruppo e la foto riempiano quella * altezza, invece di fermarsi al minimo di 620px. */ .home-hero-photo-col { align-self: stretch; } .home-hero-photo { height: 100%; min-height: 620px; } .home-hero-photo::after { background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 38%); } .home-hero-photo .home-portrait, .home-hero-photo .home-portrait img { height: 100%; } .home-hero-photo .home-portrait img { aspect-ratio: auto; object-position: center 18%; } } .home-portrait img, .home-book-cover img { border-radius: var(--wp--custom--rounded--lg); } .home-book-cover img { border-radius: var(--wp--custom--rounded--md); } /* * Blog: griglia di quattro card affiancate, due per riga sui tablet, * una colonna sui telefoni. */ .home-blog-list .wp-block-post-template { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; list-style: none; margin: 0; padding: 0; } .home-blog-list .wp-block-post-template > li { list-style: none; margin: 0; } @media (max-width: 900px) { .home-blog-list .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .home-blog-list .wp-block-post-template { grid-template-columns: 1fr; } } .home-blog-card { display: flex; flex-direction: column; gap: 16px; } /* * L'immagine ingrandisce leggermente al passaggio del mouse: il * ritaglio (overflow: hidden) sta sul contenitore, non sull'immagine, * altrimenti lo zoom sporgerebbe fuori dagli angoli arrotondati. */ .home-blog-thumb { display: block; overflow: hidden; border-radius: var(--wp--custom--rounded--md); } .home-blog-thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; transition: transform 260ms ease; } .home-blog-card:hover .home-blog-thumb img { transform: scale(1.05); } .home-blog-title a { color: var(--wp--preset--color--secondary); } .home-blog-readmore { display: inline-block; transition: transform 200ms ease, color 120ms ease; } .home-blog-card:hover .home-blog-title a, .home-blog-card:hover .home-blog-readmore { color: var(--wp--preset--color--primary); } .home-blog-card:hover .home-blog-readmore { /* La freccia dentro al testo del link si sposta con lui: non serve * isolarla in un elemento a parte. */ transform: translateX(4px); } /* Timeline "chi sono in breve": una riga sopra ogni voce, lime per * quella in corso, grigio chiaro per le altre. */ .home-timeline-item { padding-top: var(--wp--preset--spacing--md); border-top: 1px solid var(--wp--preset--color--muted); } .home-timeline-item-current { border-top: 2px solid var(--wp--preset--color--primary); } /* Griglia delle certificazioni: schede con bordo sottile, niente ombre. */ .home-cert-grid { flex-wrap: wrap; } .home-cert-card { background-color: var(--wp--preset--color--neutral); border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--rounded--lg); padding: var(--wp--preset--spacing--sm); flex: 1 1 260px; } .home-cert-card > * { margin: 0 0 6px; } .home-cert-card > *:last-child { margin-bottom: 0; } /* * Il badge o l'immagine del certificato: dimensioni fisse, così le * card restano allineate anche se le immagini originali hanno forme * diverse (badge quadrati, certificati orizzontali). "contain" evita * di ritagliarle. */ .home-cert-image { width: 56px; } .home-cert-image img { width: 100%; height: 100%; } /* * Pulsanti: schiariscono e si sollevano leggermente al passaggio del * mouse. Il colore è lo stesso già usato per il pulsante di ricerca * nel piè di pagina, per coerenza. */ .wp-block-button .wp-block-button__link { transition: background-color 160ms ease, transform 160ms ease; } .wp-block-button .wp-block-button__link:hover { background-color: #C2C91B; transform: translateY(-2px); } /* * Elenco puntato con quadratini color accento, come nel mockup di * Claude Design (sezione "Il libro"), al posto del pallino di * fabbrica del browser. */ .home-list-square { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); } .home-list-square li { position: relative; padding-left: 24px; } .home-list-square li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background-color: var(--wp--preset--color--primary); border-radius: var(--wp--custom--rounded--sm); } /* * Divisorio fra "Chi sono in breve" e "Formazione continua": sta in * fondo alla prima sezione (non in cima alla seconda), così * "Formazione continua" mantiene lo stesso respiro sopra al titolo * di tutte le altre sezioni, e solo "Chi sono in breve" si stacca di * meno dal filo che la chiude. */ .home-about { padding-bottom: 0; } .home-about-inner { padding-bottom: 60px; border-bottom: 1px solid var(--wp--preset--color--muted); } @media (min-width: 761px) { .home-about { padding-bottom: 0; } } /* * Dissolvenza delle sezioni allo scroll. La classe "gmr-reveal" la * aggiunge solo assets/js/scroll-reveal.js, a runtime: se quello * script non parte, questa regola non si applica mai a niente, e le * sezioni restano visibili come sono scritte nella pagina. */ .gmr-reveal { opacity: 0; transform: translateY(40px); transition: opacity 800ms ease, transform 800ms ease; } .gmr-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .gmr-reveal { opacity: 1; transform: none; transition: none; } } /* * L'hero è già visibile appena si apre la pagina: non aspetta lo * scroll come le altre sezioni. Testo e ritratto entrano in * sequenza, uno dopo l'altro, con puro CSS (nessuno script deve * "accorgersi" che la pagina è pronta: l'animazione parte da sola). */ @keyframes gmr-hero-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .home-hero-text > * { opacity: 0; animation: gmr-hero-in 700ms ease forwards; } .home-hero-text > *:nth-child(1) { animation-delay: 120ms; } .home-hero-text > *:nth-child(2) { animation-delay: 260ms; } .home-hero-text > *:nth-child(3) { animation-delay: 380ms; } .home-hero-text > *:nth-child(4) { animation-delay: 500ms; } .home-hero-text > *:nth-child(5) { animation-delay: 620ms; } .home-hero .wp-block-columns > .wp-block-column + .wp-block-column { opacity: 0; animation: gmr-hero-in 800ms ease forwards; animation-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .home-hero-text > *, .home-hero .wp-block-columns > .wp-block-column + .wp-block-column { opacity: 1; animation: none; } } /* * La parola evidenziata del titolo si sottolinea al passaggio del * mouse su tutto l'h1, non solo su di lei. */ .home-hero-highlight { position: relative; } .home-hero-highlight::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background-color: currentColor; transition: right 280ms ease; } .home-hero h1:hover .home-hero-highlight::after { right: 0; } @media (prefers-reduced-motion: reduce) { .home-hero-highlight::after { transition: none; } } /* * Sezione di contatto (CTA): sfondo lime, tutto centrato in colonna * invece che testo e pulsante affiancati. Il pulsante ha un colore * diverso da tutti gli altri pulsanti del sito (nero invece di lime), * perché qui sta sopra a uno sfondo lime e il pulsante lime standard * sparirebbe. */ .home-cta-inner.is-layout-constrained { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; } .home-cta-button .wp-block-button__link { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--primary); height: 52px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; } .home-cta-button .wp-block-button__link:hover { background-color: var(--wp--preset--color--secondary); } /* * Pagina "Circoli Virtuosi" (modello templates/home.html), pagina * "Bibliografia" (modello templates/page-bibliografia.html) e pagina * "Contatti" (modello templates/page-contatti.html): stessa larghezza * e stesso ritmo verticale delle sezioni della home. La sezione di * introduzione (".blog-intro") è riusata identica su tutte e tre, * testo a parte: stesso titolo, stesso paragrafo con lo stesso * accorgimento sull'allineamento (vedi il commento più sotto), stesso * separatore. */ .blog-intro, .blog-list-section, .book-grid-section, .contact-columns-section, .legal-page { padding: 60px 20px; } @media (min-width: 761px) { .blog-intro, .blog-list-section, .book-grid-section, .contact-columns-section, .legal-page { padding: 120px 60px; } } /* * Pagine Cookie e Privacy (modelli templates/page-cookie.html e * templates/page-privacy.html): testo lungo diviso in sezioni. Più * respiro sopra ogni titolo di sezione, altrimenti con lo spazio di * default di WordPress (24px per qualunque blocco) i titoli * sembrerebbero attaccati al testo della sezione precedente. */ .legal-page h2 { margin-top: var(--wp--preset--spacing--xl); } .legal-page ul { display: flex; flex-direction: column; gap: 10px; } .blog-intro { padding-bottom: 0; } /* * Ho capito solo ora la vera causa del rientro, dopo aver visto gli * screenshot degli strumenti sviluppatore: il blocco .blog-intro-text * (il gruppo che contiene i due paragrafi) NON deve essere toccato, va * lasciato libero di allinearsi da solo alla stessa colonna del titolo * (lo fa già, di default, perché è un "figlio" della sezione * .blog-intro, che è "constrained": WordPress centra automaticamente * ogni figlio diretto a una larghezza massima comune, la stessa * larghezza di colonna che usa il titolo sopra di lui). * * Il problema era che la mia correzione precedente forzava a zero il * margine di QUEL gruppo intero, staccandolo dalla colonna centrata e * incollandolo al bordo fisico della sezione, molto più a sinistra del * titolo (il rientro "al contrario" che hai visto nell'ultimo * screenshot). * * La vera esigenza è più stretta: solo il TESTO dei paragrafi deve * essere più stretto (900px, per essere comodo da leggere), ma * allineato a sinistra DENTRO la colonna già ben posizionata, non * ricentrato per conto suo. Per questo la regola qui sotto non tocca * più .blog-intro-text, ma i paragrafi al suo interno: restano dentro * la colonna corretta (quella del titolo) e semplicemente si fermano * prima a destra, senza nessuna centratura propria. */ .blog-intro-text > p { max-width: 900px; margin-right: auto; } .blog-intro-divider { margin-top: 40px; border-style: dotted; border-color: var(--wp--preset--color--primary); border-width: 0 0 2px; opacity: 1; } /* * Filtri per categoria: pulsanti senza cornice, quello attivo si * distingue con il sottosegno lime e il grassetto. Li aggiorna * assets/js/blog-filter.js quando si clicca, non c'è ricaricamento * di pagina. */ .blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-bottom: 50px; } .blog-filter-btn { border: none; background: transparent; cursor: pointer; padding: 4px 0 8px; font-family: Raleway, sans-serif; font-size: 17px; font-weight: var(--wp--custom--font-weight--regular); color: var(--wp--preset--color--tertiary); border-bottom: 2px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .blog-filter-btn:hover { color: var(--wp--preset--color--secondary); } .blog-filter-btn.is-active { font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--secondary); border-bottom-color: var(--wp--preset--color--primary); } .blog-load-more { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 40px; margin-top: 20px; border-top: 1px solid var(--wp--preset--color--muted); } .blog-counter { margin: 0; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--tertiary); } .blog-empty { padding: 60px 0; text-align: center; font-size: var(--wp--preset--font-size--body-lg); color: var(--wp--preset--color--tertiary); } /* * Pagina "Bibliografia" (modello templates/page-bibliografia.html): * stessa griglia a card della sezione blog, ma con le copertine dei * libri (verticali, rapporto 2:3, la stessa misura già usata nella * sezione "Il libro" della home) al posto delle foto in evidenza degli * articoli (orizzontali, 4:3). Nessun filtro per categoria, nessun * "carica altri": sono solo 23 titoli, entrano tutti in una griglia * sola. */ .book-grid-list .wp-block-post-template { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; list-style: none; margin: 0; padding: 0; } .book-grid-list .wp-block-post-template > li { list-style: none; margin: 0; } @media (max-width: 900px) { .book-grid-list .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .book-grid-list .wp-block-post-template { grid-template-columns: 1fr; } } .book-grid-card { display: flex; flex-direction: column; gap: 16px; } .book-grid-thumb { display: block; overflow: hidden; border-radius: var(--wp--custom--rounded--md); } .book-grid-thumb img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; height: auto; transition: transform 260ms ease; } .book-grid-card:hover .book-grid-thumb img { transform: scale(1.05); } .book-grid-title a { color: var(--wp--preset--color--secondary); } .book-grid-readmore { display: inline-block; transition: transform 200ms ease, color 120ms ease; } .book-grid-card:hover .book-grid-title a, .book-grid-card:hover .book-grid-readmore { color: var(--wp--preset--color--primary); } .book-grid-card:hover .book-grid-readmore { transform: translateX(4px); } /* * Pagina "Contatti" (modello templates/page-contatti.html): modulo a * sinistra, profili social a destra. Il modulo lo gestisce * assets/js/contact-form.js, senza ricaricare la pagina. */ .contact-form-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; } .contact-form-field label { font-weight: var(--wp--custom--font-weight--bold); font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--secondary); } .contact-form-field input, .contact-form-field textarea { font-family: Raleway, sans-serif; font-size: var(--wp--preset--font-size--body-md); color: var(--wp--preset--color--secondary); background-color: var(--wp--preset--color--neutral); border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--rounded--md); padding: 12px 16px; } .contact-form-field input:focus, .contact-form-field textarea:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; } .contact-form-field textarea { resize: vertical; min-height: 140px; } /* * Campo anti-spam: invisibile e non raggiungibile da tastiera per una * persona vera (posizionato fuori dallo schermo, non con * "display:none", che alcuni programmi automatici sanno riconoscere ed * evitare). Se arriva compilato, il messaggio non viene spedito (vedi * functions.php). */ .contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form-submit { margin-top: 8px; } .contact-form-feedback { margin: 16px 0 0; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--tertiary); } .contact-form-feedback.is-errore { color: #B3261E; } .contact-social-col { display: flex; flex-direction: column; gap: 20px; } .contact-social-links.wp-block-social-links { gap: 12px; } .contact-social-links .wp-social-link { background-color: transparent !important; border: 1px solid var(--wp--preset--color--muted); } /* * WordPress dà di suo un colore all'icona di ogni social (di solito * bianco, pensato per stare sopra lo sfondo colorato del social * stesso, che qui abbiamo tolto): senza "!important" la nostra icona * scura restava bianca su sfondo bianco, cioè invisibile pur essendo * presente nella pagina. */ .contact-social-links .wp-social-link svg { fill: var(--wp--preset--color--secondary) !important; } .contact-social-links .wp-social-link:hover { border-color: var(--wp--preset--color--primary); } .contact-social-links .wp-social-link:hover svg { fill: var(--wp--preset--color--primary) !important; } /* * Articolo singolo (single.php). A differenza delle altre pagine, qui * il markup non lo genera WordPress da un modello a blocchi: lo scrive * a mano il template PHP, per la logica che serve (indice condizionale, * riquadro "in sintesi" condizionale, breadcrumb senza "Blog"). Le * classi seguono comunque lo stesso schema "nome-sezione-elemento" già * usato altrove nel tema, e lo stesso punto di rottura a 761px, tranne * dove specificato. */ .post-hero { position: relative; width: 100%; aspect-ratio: 4 / 3; background-color: var(--wp--preset--color--secondary); overflow: hidden; } @media (min-width: 761px) { .post-hero { aspect-ratio: 21 / 9; } } .post-hero img { display: block; width: 100%; height: 100%; object-fit: cover; } /* * Sfumatura scura fissa sulla parte bassa della foto, indipendente da * cosa c'è nella foto: senza, il titolo in sovraimpressione sarebbe * leggibile su certe foto e no su altre. Il colore riprende * "secondary" (#1C2321) invece di un nero neutro, per restare coerente * con la palette del tema. */ .post-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 35, 33, 0.88) 0%, rgba(28, 35, 33, 0.45) 45%, rgba(28, 35, 33, 0) 75%); pointer-events: none; } .post-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px 20px; } @media (min-width: 761px) { .post-hero-overlay { padding: 0 60px 50px; } } /* Stessi elementi di ".post-title-section" (breadcrumb e titolo), ma * qui sopra una foto invece che su sfondo bianco: colori chiari invece * che scuri. La barretta lime sotto ai link del breadcrumb resta * uguale, si vede bene anche sulla sfumatura scura. */ .post-hero-overlay .post-breadcrumb, .post-hero-overlay .post-breadcrumb a { color: rgba(255, 255, 255, 0.85); } .post-hero-overlay .post-breadcrumb a:hover { color: var(--wp--preset--color--primary); } .post-hero-overlay .post-title { color: var(--wp--preset--color--neutral); } .post-title-section { padding: 40px 20px 0; } @media (min-width: 761px) { .post-title-section { padding: 60px 60px 0; } } .post-title-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .post-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--wp--preset--font-size--label-sm); font-weight: var(--wp--custom--font-weight--bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--tertiary); } .post-breadcrumb a { /* Il tema imposta il sottolineato su tutti i link del sito (vedi * "elements.link" in theme.json): qui lo tolgo, perché la barretta * lime sotto già fa da sottolineatura, e le due insieme sembravano * un doppio segno (uno lime, uno nero). */ text-decoration: none; color: var(--wp--preset--color--tertiary); border-bottom: 2px solid var(--wp--preset--color--primary); padding-bottom: 2px; } .post-breadcrumb a:hover { color: var(--wp--preset--color--primary); } .post-title { margin: 0; max-width: 1000px; font-size: clamp(34px, 4vw, 60px); font-weight: var(--wp--custom--font-weight--black); line-height: 1.04; letter-spacing: -0.5px; color: var(--wp--preset--color--secondary); } /* * Riquadro "in sintesi" più indice dei contenuti: due colonne quando * ci sono entrambi (single.php aggiunge "post-boxes-single" quando ce * n'è solo uno, e in quel caso resta una sola colonna piena anche da * desktop). */ .post-boxes-section { padding: 30px 20px 0; } @media (min-width: 761px) { .post-boxes-section { padding: 50px 60px 0; } } .post-boxes-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; } @media (min-width: 761px) { .post-boxes-inner:not(.post-boxes-single) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } } .post-box-label { margin: 0 0 16px; font-size: var(--wp--preset--font-size--label-sm); font-weight: var(--wp--custom--font-weight--bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--tertiary); } .post-summary { background-color: var(--wp--preset--color--surface); border-radius: var(--wp--custom--rounded--lg); padding: 30px; } /* ":not(.post-box-label)" perché altrimenti questa regola, più * specifica (una classe più un tipo di elemento, contro la sola * classe di ".post-box-label"), vince e azzera lo spazio che * ".post-box-label" mette sotto l'etichetta "In sintesi" (anche lei * un

, essendo l'unico paragrafo di questo riquadro oltre al * testo). */ .post-summary p:not(.post-box-label) { margin: 0; font-size: var(--wp--preset--font-size--body-lg); font-weight: var(--wp--custom--font-weight--regular); line-height: 28px; color: var(--wp--preset--color--secondary); } .post-toc { background-color: var(--wp--preset--color--neutral); border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--rounded--lg); padding: 30px; } /* Nel mockup l'etichetta e l'elenco sono staccati di 20px in questo * riquadro, contro i 16px del riquadro "in sintesi" (dove il distacco * arriva dal margine di ".post-box-label", condiviso fra i due). */ .post-toc .post-box-label { margin-bottom: 20px; } .post-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .post-toc li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; } .post-toc-num { font-size: 14px; font-weight: var(--wp--custom--font-weight--black); color: var(--wp--preset--color--primary); } .post-toc a { text-decoration: none; font-size: 16px; font-weight: var(--wp--custom--font-weight--bold); line-height: 24px; color: var(--wp--preset--color--secondary); } .post-toc a:hover { color: var(--wp--preset--color--primary); } /* * Corpo dell'articolo. Il primo paragrafo (quello che resta dopo aver * tolto l'eventuale "in sintesi") fa da testo di apertura, più grande * e più scuro degli altri: lo stesso trattamento del mockup di Claude * Design. */ .post-body { padding: 40px 20px 60px; } @media (min-width: 761px) { .post-body { padding: 70px 60px 60px; } } .post-body-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .post-body-inner p { margin: 0; font-size: var(--wp--preset--font-size--body-lg); font-weight: var(--wp--custom--font-weight--regular); line-height: 29px; color: var(--wp--preset--color--tertiary); } .post-body-inner h2 { margin: 36px 0 0; font-size: clamp(26px, 3vw, 40px); font-weight: var(--wp--custom--font-weight--black); line-height: 1.12; letter-spacing: -0.3px; color: var(--wp--preset--color--secondary); } /* h3 e h4 non avevano nessuna regola propria: prendevano il margine * predefinito del browser (che cresce con la dimensione del testo), * sommato ai 24px che ".post-body-inner" mette già fra un blocco e * l'altro. Risultato: uno spazio doppio, sopra e sotto. Lo tolgo e * lascio che sia lo spazio del contenitore, uguale ovunque nel corpo, * a separare il titolo dal paragrafo successivo. */ .post-body-inner h3, .post-body-inner h4 { margin: 0; font-weight: var(--wp--custom--font-weight--black); color: var(--wp--preset--color--secondary); } .post-body-inner strong, .post-body-inner b { font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--secondary); } /* Elenchi: stesso quadratino lime già usato nella home (sezione "Il libro"). */ .post-body-inner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .post-body-inner ul li { position: relative; padding-left: 24px; /* Senza questa riga il testo eredita la dimensione generale della * pagina (body-md) invece di quella del corpo articolo (body-lg), * risultando più piccolo dei paragrafi. Trovato durante le prove * sui casi limite, fase cinque. */ font-size: var(--wp--preset--font-size--body-lg); } .post-body-inner ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background-color: var(--wp--preset--color--primary); border-radius: var(--wp--custom--rounded--sm); } .post-body-inner img { max-width: 100%; height: auto; border-radius: var(--wp--custom--rounded--md); } /* * Citazioni (blocco nativo "Cita"): sia quelle vere, con autore * (usate negli articoli esistenti), sia quella presa dal testo stesso * a metà articolo (decisione di fase quattro, al posto della vecchia * epigrafe iniziale di Elementor). Stesso stile per entrambe: bordo * lime a sinistra, corsivo in Playfair Display. */ .post-body-inner .wp-block-quote { margin: 30px 0; padding: 0 0 0 30px; border-left: 4px solid var(--wp--preset--color--primary); } .post-body-inner .wp-block-quote p { margin: 0; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 24px; font-weight: 400; line-height: 1.35; color: var(--wp--preset--color--secondary); } @media (min-width: 761px) { .post-body-inner .wp-block-quote p { font-size: 30px; } } .post-body-inner .wp-block-quote cite { display: block; margin-top: 12px; font-family: Raleway, sans-serif; font-style: normal; font-size: 14px; color: var(--wp--preset--color--tertiary); } /* * FAQ: sempre visibili, niente accordion (deciso in fase quattro). La * sezione compare solo se l'articolo ha un blocco Gruppo con classe * "post-faq" (vedi gmr_estrai_faq() in functions.php); se non c'è, * single.php non stampa questa sezione. */ .post-faq-section { background-color: var(--wp--preset--color--surface); padding: 60px 20px; } @media (min-width: 761px) { .post-faq-section { padding: 100px 60px; } } .post-faq-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .post-faq-heading { display: flex; flex-direction: column; gap: 16px; } .post-faq-heading h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: var(--wp--custom--font-weight--black); line-height: 1.1; letter-spacing: -0.3px; color: var(--wp--preset--color--secondary); } .post-faq-list { display: flex; flex-direction: column; gap: 30px; } .post-faq-item { display: flex; flex-direction: column; gap: 10px; padding-top: 30px; border-top: 1px solid var(--wp--preset--color--muted); } .post-faq-item h3 { margin: 0; font-size: clamp(20px, 2.2vw, 30px); font-weight: var(--wp--custom--font-weight--bold); line-height: 28px; color: var(--wp--preset--color--secondary); } .post-faq-item p { margin: 0; font-size: var(--wp--preset--font-size--body-lg); font-weight: var(--wp--custom--font-weight--regular); line-height: 29px; color: var(--wp--preset--color--tertiary); } /* * Altri articoli: stessa idea della griglia della home * (home-blog-card), ma con l'etichetta di categoria sopra al titolo e * un rapporto immagine diverso (16:11 invece di 4:3, dal mockup). Per * questo è una classe a parte, non un riuso di "home-blog-card". */ .post-related-section { padding: 60px 20px; } @media (min-width: 761px) { .post-related-section { padding: 100px 60px; } } .post-related-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; /* Separa la sezione dal corpo dell'articolo. Quando prima c'è la * sezione FAQ (sfondo grigio) il distacco si vede già da solo, ma * quando l'articolo non ha FAQ, il corpo (sfondo bianco) finiva * attaccato a questa sezione (bianca anche lei) senza nessun segno * di confine. Il divisorio è sul contenitore interno (largo quanto * il contenuto, 1240px), non sulla sezione: altrimenti sarebbe * arrivato da un bordo all'altro dello schermo. */ padding-top: 40px; border-top: 1px solid var(--wp--preset--color--muted); } .post-related-heading { display: flex; flex-direction: column; gap: 16px; } .post-related-heading h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: var(--wp--custom--font-weight--black); line-height: 1.1; letter-spacing: -0.3px; color: var(--wp--preset--color--secondary); } .post-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } @media (max-width: 900px) { .post-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .post-related-grid { grid-template-columns: minmax(0, 1fr); } } .post-related-card { text-decoration: none; display: flex; flex-direction: column; gap: 16px; color: var(--wp--preset--color--secondary); } .post-related-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--wp--custom--rounded--lg); } .post-related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 260ms ease; } .post-related-card:hover .post-related-thumb img { transform: scale(1.05); } .post-related-cat { font-size: var(--wp--preset--font-size--label-sm); font-weight: var(--wp--custom--font-weight--bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--tertiary); } .post-related-title { font-size: 20px; font-weight: var(--wp--custom--font-weight--bold); line-height: 28px; } .post-related-card:hover { color: var(--wp--preset--color--primary); } .post-related-card:hover .post-related-cat { color: var(--wp--preset--color--primary); } /* * Recensione di libro (single-recensione.php). Riusa le classi del * titolo dell'articolo singolo (".post-title-section", ".post-title- * inner", ".post-breadcrumb", ".post-title", ".post-box-label"): * stesso trattamento tipografico, nessun bisogno di duplicarlo. Il * resto è nuovo, perché lo schema (copertina verticale a due colonne, * niente indice né riquadro "in sintesi") è specifico delle * recensioni. */ .review-section { padding: 40px 20px 60px; } @media (min-width: 761px) { .review-section { padding: 60px 60px 100px; } } .review-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } @media (min-width: 761px) { .review-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 60px; align-items: start; } } .review-cover img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--wp--custom--rounded--md); } @media (min-width: 761px) { .review-cover { position: sticky; top: 100px; } } .review-edizione { margin: 0 0 24px; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: var(--wp--preset--font-size--body-lg); color: var(--wp--preset--color--tertiary); } .review-body { display: flex; flex-direction: column; gap: 24px; margin-bottom: 30px; } .review-body p { margin: 0; font-size: var(--wp--preset--font-size--body-lg); font-weight: var(--wp--custom--font-weight--regular); line-height: 29px; color: var(--wp--preset--color--tertiary); } .review-body strong, .review-body b { font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--secondary); } .review-share { padding-top: 30px; border-top: 1px solid var(--wp--preset--color--muted); } .review-share-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .review-share-links a { text-decoration: none; display: inline-block; padding: 10px 20px; border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--rounded--full); font-size: var(--wp--preset--font-size--label-md); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--secondary); transition: border-color 160ms ease, color 160ms ease; } .review-share-links a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } /* * Carosello "Altri libri": scorrimento orizzontale nativo (funziona * anche senza JavaScript, con lo swipe da telefono o trascinando la * barra). Frecce e puntini sono un miglioramento sopra, aggiunto da * assets/js/book-carousel.js: se lo script non parte, il carosello * resta comunque utilizzabile. */ .book-related-section { padding: 60px 20px 100px; } @media (min-width: 761px) { .book-related-section { padding: 100px 60px; } } .book-related-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; padding-top: 40px; border-top: 1px solid var(--wp--preset--color--muted); } .book-carousel { position: relative; display: flex; align-items: center; gap: 16px; } .book-carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 4px; /* Nasconde la barra di scorrimento nativa: i puntini sotto fanno lo * stesso lavoro, in modo più coerente con il resto del sito. */ scrollbar-width: none; } .book-carousel-track::-webkit-scrollbar { display: none; } .book-carousel-card { flex: 0 0 auto; width: 160px; scroll-snap-align: start; text-decoration: none; display: flex; flex-direction: column; gap: 12px; color: var(--wp--preset--color--secondary); } .book-carousel-thumb { display: block; overflow: hidden; border-radius: var(--wp--custom--rounded--md); } .book-carousel-thumb img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 260ms ease; } .book-carousel-card:hover .book-carousel-thumb img { transform: scale(1.05); } .book-carousel-title { font-size: var(--wp--preset--font-size--body-sm); font-weight: var(--wp--custom--font-weight--bold); line-height: 1.3; } .book-carousel-card:hover .book-carousel-title { color: var(--wp--preset--color--primary); } .book-carousel-arrow { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--wp--custom--rounded--full); border: 1px solid var(--wp--preset--color--muted); background-color: var(--wp--preset--color--neutral); font-size: 24px; line-height: 1; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; } .book-carousel-arrow:hover { border-color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--accent-soft); } .book-carousel-arrow:disabled { opacity: 0.35; cursor: default; } .book-carousel-dots { display: flex; justify-content: center; gap: 8px; } .book-carousel-dot { width: 8px; height: 8px; border-radius: 9999px; border: none; padding: 0; background-color: var(--wp--preset--color--muted); cursor: pointer; } .book-carousel-dot.is-active { background-color: var(--wp--preset--color--primary); width: 20px; } /* * Archivio per categoria/tag/autore/data (templates/archive.html) e * pagina di ricerca (templates/search.html). Riusano la sezione * d'apertura ".blog-intro" e la sezione della griglia * ".blog-list-section" già definite più sopra (stesso padding, stesso * distacco), più le card ".home-blog-card" della griglia articoli: * qui sotto solo le due cose nuove, il rimando a Circoli virtuosi e lo * stato "nessun risultato" della ricerca. */ .archive-breadcrumb { margin: 0; font-size: var(--wp--preset--font-size--body-sm); } .archive-breadcrumb a { color: var(--wp--preset--color--tertiary); text-decoration: none; } .archive-breadcrumb a:hover { color: var(--wp--preset--color--secondary); text-decoration: underline; } /* * Stato "nessun risultato" della ricerca: lo scrive WordPress stesso * (blocco nativo "wp:query-no-results", dentro il blocco Query), * quindi è visibile anche senza JavaScript. Il campo di ricerca qui * dentro riusa lo stesso stile a pillola del piè di pagina * (".site-search"), per non doverlo ridisegnare. */ .search-no-results { gap: var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--lg) 0; } .search-no-results p { margin: 0; } .search-no-results .site-search { margin-inline: 0; }