/*
* Theme Name: Sunya Child — laviadelghiaccio
* Theme URI: https://dadesign.it/themes/sunya-child
* Description: Child theme di Sunya per laviadelghiaccio.com - Marco Dal Bosco, istruttore certificato Wim Hof Method. Brand via filtro sunya_brand_colors.
* Author: Davide Arduini
* Author URI: https://dadesign.it
* Template: sunya
* Version: 1.18.1
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: sunya-child
* Tags: custom
* Requires at least: 6.0
* Tested up to: 7.1
* Requires PHP: 7.4
*
* RICHIEDE PARENT SUNYA >= 1.12.1 (blog.css sulla pagina evento e filtro
* sunya_breadcrumb_items; dalla 1.11.3 link sulle superfici scure e tavolozza
* core spenta: dalla 1.7.1 il child non li porta piu' da se').
*
* v1.18.1 (2026-10-15) - 5.5: voci del menu a 14px di padding fra 1025 e
* 1140px; con la sesta voce "Eventi" l'header sbordava di 14px.
*
* v1.18.0 (2026-10-15) - 24.6: pagina evento su due colonne
* (single-da_event.php del child, struttura della 13: spalla con foto 3:2 e
* riquadro del plugin, sticky sopra i 1024, sopra il corpo sotto); fasi
* Iscrizioni chiuse / Concluso a contorno; "Contattami" secondario.
*
* v1.17.0 (2026-10-15) - sezione 24: skin del plugin da-events (card,
* filtro In arrivo / Passati / Tutti, riquadro della pagina evento). Card
* come le schede corso, pulsanti come la 11.6, ambra con inchiostro petrolio.
* Pagina evento: meta, navigazione e breadcrumb in functions.php (parent
* >= 1.12.1). La 3.5 (newsletter nella prima colonna) resta: ha un
* consumatore reale nel footer (verificato il 15/10).
*
* v1.16.0 (2026-10-14) - 3.7: icone social nella colonna Contatti del
* footer (shortcode [lvg_social] in functions.php); hover e fuoco ambra.
*
* v1.15.0 (2026-10-14) - 3.6: skin del modulo da-newsletter nel footer
* (petrolio): campo bianco, consenso in ghiaccio, pulsante ambra, stati
* di esito, errore e fuoco. Solo token. Plugin >= 1.0.0, NOTA del 14/10.
*
* v1.14.1 (2026-10-14) - 3.4: la colonna dei due menu si riconosce dal
* contenuto (:has), non dal numero; colonne 3 e 4 invertite.
*
* v1.14.0 (2026-10-14) - footer riordinato: Newsletter, Logo, Corsi +
* Pagine affiancati (3.4), Contatti; pre-footer spento. Telefono a una
* colonna (3.3), testo della newsletter (3.5).
*
* v1.13.1 (2026-10-14) - 5.4: logo orizzontale dell'header a 44px (40 sotto
* i 1025): l'impostazione del Customizer non raggiunge l'immagine.
*
* v1.13.0 (2026-10-14) - footer (sezione 3.1-3.3): elenchi delle colonne
* senza punti, colonna del logo, griglia del telefono (logo e contatti a
* tutta larghezza, Corsi e Pagine affiancati).
*
* v1.12.0 (2026-10-14) - sezione 14 (pagina hub): /corsi/ con la griglia
* delle quattro schede corso (.lvg-cards, .lvg-card), scheda intera
* cliccabile, ombre morbide. Griglia riusabile anche in home.
*
* v1.11.0 (2026-10-14) - formato del sito 3:2, quello degli originali di
* Davide: taglio 3:2 in "Foto e testo" (22) e nelle gallerie (23), erano
* 4:3 e toglievano ~11% della larghezza ai lati; segnaposto .lvg-ph--3x2
* (6). La variante --4x3 resta per altri formati.
*
* v1.10.0 (2026-10-14) - sezione 13 piu' larga: contenitore a 1200 come le
* fasce della home (era 976), colonna di testo fino a 40rem (era 36),
* spalla fino a 24rem (era 18). La foto resta in testa alla colonna (4:3):
* provata a tutta griglia in 21:9, scartata da Davide.
*
* v1.9.0 (2026-10-14) - sezione 6 (segnaposto foto e contenuti, .lvg-ph):
* riquadro tratteggiato sulla nebbia col formato della foto da inserire.
* TEMPORANEO: sparisce quando le pagine hanno le foto vere. Primo uso: le
* quattro pagine corso portate sulla sezione 13.
*
* v1.8.0 (2026-10-06) - componenti grafici: sezione 21 (accordion e FAQ, tutti
* i blocchi Dettagli), 22 (stile "Foto e testo" del Media e testo), 5.3 (stile
* "Banda" della Cover a meta' pagina), 23 (carosello jexy), 10 (grafiche).
*
* v1.7.1 (2026-10-06) - ritirato il ponte dei link sulle superfici scure
* (sezione 5) e la riga defaultPalette del theme.json: li fa il parent 1.11.3.
*
* Prefisso di sito: lvg- (classi, custom property, id). Verificato libero
* su wp-themes, wp-sites e wp-clients il 2026-10-05.
*
* Cartella sul server: sunya-child-laviadelghiaccio FIN DAL PRIMO DEPLOY.
* Niente cartella sunya-child da rinominare dopo (lezione 19-21/09/2026).
*
* v1.7.0 (2026-10-06) - sezione 13 (pagina servizio) portata da dadesign 2.8.5
* (13 v2) con prefisso lvg-: testa, spalla con dati sintetici e CTA, corpo con
* fasi numerate, coda coi fratelli. Per corso base e weekend.
*
* v1.6.0 (2026-10-06) - theme.json: tavolozza di WordPress spenta nell'editor.
* Nessuna regola CSS toccata.
*
* v1.5.0 (2026-10-06) - sezione 12 (pagine persone) portata da kinesis 2.4.3
* con prefisso lvg-: .lvg-team, .lvg-person, .lvg-role, .lvg-intro, .lvg-tags,
* .lvg-cv. Per /chi-sono/ di Marco come scheda persona.
*
* v1.4.0 (2026-10-06) - stile di blocco della Cover "Hero" (sezione 5): altezza,
* Cover trattata come superficie scura (stessi token del parent), contenuto
* hero senza doppio padding.
*
* v1.3.0 (2026-10-05) - componenti base. Sezione 5 (superficie Nebbia come
* stile di blocco del Gruppo, aria delle fasce; la fascia scura e l'eyebrow
* sono del parent: is-style-sunya-dark e .sunya-eyebrow) e sezione 11 (pagina editoriale / contatti) portata dal child
* davidearduini 2.1.5 con prefisso lvg-: contenitore 820, lead, callout,
* avviso, bottoni base e --invert, info-card, layout contatti, WPForms 820.
*
* v1.2.0 (2026-10-05) - tipografia Barlow (sezione 1): Barlow per il testo,
* Barlow Semi Condensed per i titoli. Sette woff2 latin in fonts/, OFL 1.1.
*
* v1.1.0 (2026-10-05) - palette WHM nel filtro brand (functions.php) e
* sezione 4, token di sito --lvg-color-ice e --lvg-color-mist. Nessuna
* regola che li consumi ancora.
*
* v1.0.0 (2026-10-05) - creato dalla base sunya-child 1.3.2, ripulito.
* Non ereditati: i quattro woff2 Dubai (il font del sito si sceglie nella
* fase brand), inc/*.php (niente WooCommerce, shortcode e customizer della
* base inutilizzati), css/custom.css e js/custom.js (sugli altri child si
* sono rivelati file morti: il CSS di pagina sta qui). Fino alla fase brand
* i colori e il font sono i default del parent.
*
* QUI STA SOLO CIO' CHE IL PARENT NON PUO' SAPERE: tipografia del brand,
* classi di pagina lvg-, integrazioni. I colori stanno nel filtro
* sunya_brand_colors in functions.php, mai come esadecimali in questo file
* e mai come palette nel theme.json del child.
*
* MAPPA DELLE SEZIONI (numerazione condivisa fra i child: stesso numero =
* stesso significato ovunque; le sezioni non usate restano DICHIARATE VUOTE)
* 1 Tipografia - Barlow + Barlow Semi Condensed
* 2 Testo di lettura e secondario - dalla base, §1
* 3 Footer - barra copyright - dalla base, §5
* 4 Token di sito (ghiaccio, nebbia)
* 5 Superficie Nebbia, Cover Hero, aria delle fasce (componenti del sito)
* 6 Segnaposto foto e contenuti - .lvg-ph (TEMPORANEO)
* 7-9 libere, storia del sito
* 10 Grafiche e animazioni - vuota
* 11 Pagina editoriale / contatti - .lvg-page, .lvg-contact
* 12 Pagine persone - .lvg-team, .lvg-person (/chi-sono/)
* 13 Pagina servizio - .lvg-svc (corso base, weekend,
* sessioni private, team building)
* 14 Pagina hub - .lvg-hub, .lvg-cards (/corsi/)
* 15 Lavori / portfolio - vuota
* 16-19 libere, sezioni di pagina condivise
* 20 Skin dei core button - vuota
* 21 Accordion (core/details) e FAQ - tutti i Dettagli + .lvg-faq
* 22 Foto e testo (core/media-text) - stile di blocco "Foto e testo"
* 23 Carosello (plugin Jexy Carousel) - frecce e fuoco nel brand, .lvg-gallery
* 24 Eventi (plugin da-events) - card, filtro, riquadro pagina evento
* 25-29 libere, skin di componenti globali
*/
/* ==========================================================================
1. TIPOGRAFIA - Barlow + Barlow Semi Condensed
Scelta 2026-10-05. WHM usa DINPro (commerciale); Barlow ha lo stesso
spirito DIN con angoli piu' morbidi: simile, non identico, coerente con
"da WHM solo la palette". Licenza SIL OFL 1.1 (fonts/OFL-Barlow.txt).
File: @fontsource 5.3.0, sottoinsieme latin (copre l'italiano, €
compreso). Locali: niente Google Fonts remoti, anche per GDPR.
TAGLI CARICATI E PERCHE'
- Barlow 400, 400 corsivo, 500, 700, 700 corsivo: il parent usa 400,
500 (pulsanti e varianti) e 700 (strong). Il 600 del parent cade sul
700 per le regole di corrispondenza dei pesi: voluto, un file in meno.
- Barlow Semi Condensed 600 e 700: titoli (il parent li pesa 700).
Corsivi VERI: il parent ha font-synthesis: none, un corsivo mancante
diventerebbe testo dritto senza avviso. I titoli non hanno corsivo.
Preload: Barlow 400 e Semi Condensed 700 (functions.php).
========================================================================== */
@font-face {
font-family: 'Barlow';
src: url('fonts/Barlow-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('fonts/Barlow-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('fonts/Barlow-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('fonts/Barlow-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('fonts/Barlow-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Barlow Semi Condensed';
src: url('fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow Semi Condensed';
src: url('fonts/BarlowSemiCondensed-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--sunya-font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sunya-font-heading: 'Barlow Semi Condensed', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ==========================================================================
2. TESTO DI LETTURA E SECONDARIO
Dalla base 1.3.2, §1. Segue la modalita' base (Chiara/Scura) attraverso
--sunya-color-text; il secondario e' un derivato, non un colore fisso.
========================================================================== */
body,
.entry-content,
.sunya-entry-content,
.page-content {
color: var(--sunya-color-text);
}
.sunya-meta,
.sunya-caption,
figcaption,
.wp-caption-text,
.comment-metadata {
color: color-mix(in oklab, var(--sunya-color-text) 78%, var(--sunya-color-bg, #ffffff));
}
/* 2.1 Link nel testo SOTTOLINEATI (v1.3.0, misurato).
Con questa palette il parent deriva link = testo = petrolio (l'ambra su
bianco fa 1.99 e non puo' fare da link): senza sottolineatura un link
si distingue solo dal cursore (WCAG 1.4.1). Esclusi i bottoni, che
hanno la loro forma. */
.sunya-entry-content a:not([class*="btn"]):not(.wp-block-button__link) {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
}
.sunya-entry-content a:not([class*="btn"]):not(.wp-block-button__link):hover,
.sunya-entry-content a:not([class*="btn"]):not(.wp-block-button__link):focus-visible {
text-decoration-thickness: 2px;
}
/* ==========================================================================
3. FOOTER - barra copyright smorzata
Dalla base 1.3.2, §5: l'intenzione di design (copyright piu' smorzato
del footer) espressa come derivato. Il valore del Customizer, se
impostato, ha la precedenza.
========================================================================== */
.sunya-footer__bottom,
.sunya-footer__bottom a {
color: var(
--sunya-footer-bottom-color,
color-mix(
in oklab,
var(--sunya-color-text-on-dark, #e5e7eb) 78%,
var(--sunya-color-surface-dark, var(--sunya-color-primary))
)
);
}
/* 3.1 Colonne widget (v1.13.0, riordinate nella 1.14.0). Quattro colonne:
Newsletter, Logo, Contatti, Corsi + Pagine (due menu nella stessa
colonna, 3.4; ordine di Davide, 14/10). Widget nel DB; menu "Footer - Corsi" e "Footer - Pagine".
Il pre-footer e' spento (14/10): la newsletter sta nella prima colonna,
come su grigolettihome.com.
ELENCHI SENZA PUNTI: il parent li toglie con `.sunya-footer .widget ul`,
ma i widget di Sunya hanno la classe .sunya-widget, non .widget: quella
regola non ha mai raggiunto un widget del tema (difetto del parent,
annotato per la 1.12.1). Qui, scopato alle colonne: niente filetti fra
le voci, solo aria. */
.sunya-footer__column ul {
list-style: none;
margin: 0;
padding: 0;
}
.sunya-footer__column li {
margin: 0;
padding: .3em 0;
}
/* Link: sottolineati all'hover oltre al cambio di colore (il colore da
solo non basta, WCAG 1.4.1, come i link del testo, 2.1). */
.sunya-footer__column a:hover,
.sunya-footer__column a:focus-visible {
text-decoration: underline;
text-underline-offset: .18em;
}
/* 3.2 Colonna del logo: logo e una riga di presentazione in ghiaccio, il
secondario su scuro del sito (6.80 sul petrolio, sezione 4). */
.sunya-footer__column .lvg-footer-logo {
margin: 0 0 var(--sunya-spacing-md);
}
.sunya-footer__column .lvg-footer-logo img {
display: block;
height: auto;
}
.sunya-footer__column .lvg-footer-claim {
margin: 0;
font-size: .95rem;
line-height: 1.5;
color: var(--lvg-color-ice);
}
/* 3.3 Telefono. Sotto i 769px il parent mette le colonne una sotto
l'altra: va bene, perche' Corsi e Pagine restano affiancati dentro la
loro colonna (3.4). Qui solo uno stacco piu' corto fra le colonne. */
@media screen and (max-width: 768px) {
.sunya-footer__widgets-grid--4col {
gap: var(--sunya-spacing-xl);
}
}
/* 3.4 Colonna con due menu (Corsi, Pagine) affiancati a ogni larghezza.
Riconosciuta da cio' che contiene, non dal numero (v1.14.1): con
`--3` il riordino delle colonne del 14/10 (Contatti terza, menu quarta)
rimetteva i menu uno sopra l'altro. WordPress da' ai widget menu la
classe .widget_nav_menu (before_widget del parent, %2$s).
I widget di Sunya hanno un margine sotto (sidebar.css): in griglia si
azzera, l'aria la da' il gap. */
.sunya-footer__column:has(> .widget_nav_menu ~ .widget_nav_menu) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--sunya-spacing-lg);
align-content: start;
}
.sunya-footer__column:has(> .widget_nav_menu ~ .widget_nav_menu) > .sunya-widget {
margin-bottom: 0;
}
/* 3.5 Newsletter nella prima colonna: testo in ghiaccio come la riga del
logo (6.80), il modulo (o il suo segnaposto) sotto, a tutta colonna. */
.sunya-footer__column .lvg-footer-news {
margin: 0 0 var(--sunya-spacing-md);
font-size: .95rem;
line-height: 1.5;
color: var(--lvg-color-ice);
}
.sunya-footer__column .wp-block-group.lvg-ph {
margin: 0;
padding: var(--sunya-spacing-md);
}
/* 3.6 Modulo newsletter (plugin da-newsletter >= 1.0.0, v1.15.0).
Il plugin da' solo la struttura (colonna, gap, consenso affiancato):
qui colori, bordi, caratteri e stati, SOLO nel footer petrolio. Fuori
dal footer il modulo resta con lo stile del plugin, nessuna regola.
Markup e stati: wp-plugins\_dev-tools\NOTA-2026-10-14-da-newsletter-
skin-sunya.md. Nel footer --sunya-color-text vale il bianco (il parent
lo ridichiara sul footer): qui i token si chiamano per nome.
Coppie (misurate sul petrolio, sezione 4 e filtro brand):
etichetta, link, messaggi bianco 12.70
testo del consenso ghiaccio 6.80
campo carta bianca, inchiostro petrolio 12.70;
il confine del campo e' la carta stessa
contro il petrolio (12.70, >= 3)
pulsante ambra, inchiostro petrolio 6.37; hover e
fuoco = contorno ambra, testo ambra (6.37)
fuoco anello ambra 2px, 6.37 sul petrolio
campo sbagliato cornice ambra 3px fuori dal campo, piu'
il messaggio: mai il solo colore
Selettori a 0,3,0 sul pulsante: battono lo stile pulsanti del parent
(theme.json, .wp-element-button) qualunque sia l'ordine dei fogli. */
.sunya-footer .da-newsletter {
margin: 0;
}
.sunya-footer .da-newsletter__label {
font-size: .95rem;
font-weight: 500;
color: var(--sunya-color-text-on-dark);
}
.sunya-footer .da-newsletter .da-newsletter__input {
min-height: 48px;
padding: .6em .85em;
border: 0;
border-radius: var(--sunya-radius-md);
background: var(--sunya-color-surface-light);
color: var(--sunya-color-text-on-light);
font: inherit;
font-size: 1rem;
line-height: 1.3;
}
.sunya-footer .da-newsletter .da-newsletter__checkbox {
width: 1.125rem;
height: 1.125rem;
accent-color: var(--sunya-color-accent);
}
.sunya-footer .da-newsletter__consent {
font-size: .875rem;
line-height: 1.45;
color: var(--lvg-color-ice);
}
.sunya-footer .da-newsletter__consent a {
color: var(--sunya-color-text-on-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
}
.sunya-footer .da-newsletter__consent a:hover,
.sunya-footer .da-newsletter__consent a:focus-visible {
color: var(--sunya-color-accent);
text-decoration-thickness: 2px;
}
.sunya-footer .da-newsletter .da-newsletter__button {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 22px;
border: 1.5px solid var(--sunya-color-accent);
border-radius: var(--sunya-radius-md);
background: var(--sunya-color-accent);
color: var(--sunya-color-accent-contrast);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1;
transition: background var(--sunya-transition-fast),
color var(--sunya-transition-fast);
}
.sunya-footer .da-newsletter .da-newsletter__button:hover,
.sunya-footer .da-newsletter .da-newsletter__button:focus-visible {
background: transparent;
border-color: var(--sunya-color-accent);
color: var(--sunya-color-accent);
}
/* Fuoco da tastiera: un anello per tutti i controlli, link compreso. */
.sunya-footer .da-newsletter input:focus-visible,
.sunya-footer .da-newsletter a:focus-visible,
.sunya-footer .da-newsletter .da-newsletter__button:focus-visible {
outline: 2px solid var(--sunya-color-accent);
outline-offset: 2px;
}
/* Campo o casella da correggere: cornice ambra fuori dal controllo (sul
bianco del campo l'ambra fa 1.99, sul petrolio 6.37). */
.sunya-footer .da-newsletter [aria-invalid="true"] {
box-shadow: 0 0 0 3px var(--sunya-color-accent);
}
/* Esito: testo bianco con un filetto a sinistra. Il filetto distingue
esito (ghiaccio) ed errore (ambra), il testo dice gia' cosa fare. */
.sunya-footer .da-newsletter--success .da-newsletter__message,
.sunya-footer .da-newsletter--error .da-newsletter__message {
padding: .5em .75em;
border-left: 3px solid var(--lvg-color-ice);
font-size: .95rem;
font-weight: 500;
line-height: 1.45;
color: var(--sunya-color-text-on-dark);
}
.sunya-footer .da-newsletter--error .da-newsletter__message {
border-left-color: var(--sunya-color-accent);
}
.sunya-footer .da-newsletter--unavailable .da-newsletter__message {
font-size: .875rem;
font-style: italic;
color: var(--lvg-color-ice);
}
/* 3.7 Icone social nella colonna Contatti (v1.16.0, shortcode
[lvg_social]). Markup e stili del parent (contesto footer), qui solo
la posizione e gli stati. Il parent, all'hover, colora l'icona col
colore del social: sul petrolio Threads (#000) sparisce e Facebook e
Instagram restano bassi. Qui hover e fuoco sono ambra (6.37), come i
link del footer; a riposo bianco al 70% del parent. Bersaglio 28px. */
.sunya-footer__column .sunya-social {
margin-top: var(--sunya-spacing-md);
}
.sunya-footer__column .sunya-social .sunya-social__list {
flex-wrap: wrap;
justify-content: flex-start;
margin-left: -4px;
}
.sunya-footer__column .sunya-social .sunya-social__item {
padding: 0;
}
.sunya-footer__column .sunya-social .sunya-social__link:hover,
.sunya-footer__column .sunya-social .sunya-social__link:focus-visible {
color: var(--sunya-color-accent);
opacity: 1;
}
.sunya-footer__column .sunya-social .sunya-social__link:focus-visible {
outline: 2px solid var(--sunya-color-accent);
outline-offset: 2px;
}
/* ==========================================================================
4. TOKEN DI SITO
Due colori della palette WHM che il filtro sunya_brand_colors non ha una
chiave per portare. ECCEZIONE DICHIARATA alla regola "niente esadecimali
di brand in style.css": stanno qui, una volta sola, e ogni regola li
consuma per nome. Non ridefiniscono nessun --sunya-color-*.
--lvg-color-ice ghiaccio #9CC5CA (misurato). Grafiche, filetti, testo
secondario SU SCURO (6.80 sul petrolio, come i
sottotitoli di WHM). Mai testo su chiaro: 1.87 su bianco.
--lvg-color-mist nebbia #E7EDED (misurata). Fasce chiare alternate alla
carta bianca. Il --sunya-color-bg-alt del parent e' un
derivato piu' chiaro e resta per zebre e piccoli stacchi.
========================================================================== */
:root {
--lvg-color-ice: #9CC5CA;
--lvg-color-mist: #E7EDED;
}
/* ==========================================================================
5. SUPERFICIE NEBBIA E ARIA DELLE FASCE
Componenti di QUESTO sito: fascia 1-9, non un numero condiviso 21-29.
COSA FA GIA' IL PARENT, e qui NON si riscrive (prima stesura della
1.3.0 lo duplicava con .lvg-band--dark e .lvg-eyebrow, ritirati):
Gruppo "Sunya - superficie scura" is-style-sunya-dark: petrolio,
testo bianco, titoli che seguono la superficie, accent-ink
ridefinito per i pulsanti a contorno (blocks.css v1.7.6).
.sunya-eyebrow kicker maiuscolo su accent-ink: petrolio su chiaro,
inchiostro chiaro su scuro, da solo.
QUI: la nebbia, che il filtro brand non puo' portare (surface_light e'
la carta bianca). E' uno STILE DI BLOCCO del Gruppo, registrato in
functions.php: in editor Marco sceglie "Nebbia", non un colore.
Stessa forma degli stili del parent, titoli compresi (classe raddoppiata
0,3,0, valida anche nell'iframe dell'editor).
========================================================================== */
.wp-block-group.is-style-lvg-mist {
background-color: var(--lvg-color-mist);
color: var(--sunya-color-text-on-light);
}
.wp-block-group.is-style-lvg-mist.is-style-lvg-mist :where(h1, h2, h3, h4, h5, h6) {
color: inherit;
}
/* Aria verticale delle fasce a piena larghezza: default a PESO ZERO, il
padding impostato nell'editor (stile inline) vince sempre. */
:where(.wp-block-group.alignfull:is(.is-style-lvg-mist, .is-style-sunya-dark, .is-style-sunya-dark-alt)) {
padding-block: var(--sunya-spacing-3xl);
}
/* PONTE dei link sulle superfici scure - RITIRATO nella 1.7.1: lo fa il
parent 1.11.3 (blocks.css, regola contenitore v1.7.6), con lo stesso
set di selettori. Misurato il 05/10 senza ponte: 1.00; col parent 1.11.3
e senza ponte: vedi changelog-v1.11.3. */
/* 5.2 COVER "HERO" - stile di blocco della Cover (v1.4.0, functions.php).
Nato dalla Home del 06/10: hero (eyebrow, H1, lead, bottoni) DENTRO la
Cover, sulla foto. Il parent non tratta la Cover come superficie scura,
quindi li' valeva l'inchiostro per la carta chiara (petrolio): eyebrow e
bottone a contorno illeggibili, e in pagina erano stati colorati con un
preset del core (#fcb900, non la nostra ambra). Qui:
- la Cover ridefinisce gli STESSI token che il parent ridefinisce sulle
superfici scure (blocks.css v1.7.6), piu' il link (vedi ponte sopra);
- testo e titoli in text-on-dark;
- altezza nel CSS, non in pagina: il minHeight del blocco scrive
style="min-height" inline, che vincerebbe su questa regola.
La leggibilita' sulla FOTO dipende dalla foto e dal dimRatio scelto in
pagina: si misura nel punto piu' chiaro dietro il testo. */
.wp-block-cover:is(.is-style-lvg-hero, .is-style-lvg-band) {
--sunya-color-accent-ink: var(--sunya-color-accent-ink-on-dark, var(--sunya-color-accent-bright, var(--sunya-color-accent)));
--sunya-color-accent-ink-hover: color-mix(in oklab, var(--sunya-color-accent-ink-on-dark, var(--sunya-color-accent-bright, var(--sunya-color-accent))) 82%, white);
/* Link nel testo BIANCHI (sottolineati, 2.1), non ambra: sulla foto
velata l'ambra misura 2.13 nel punto piu' chiaro (06/10). L'ambra
regge sul petrolio pieno (6.37), non su un'immagine. */
--sunya-color-link: var(--sunya-color-text-on-dark);
--sunya-color-link-hover: var(--sunya-color-text-on-dark);
color: var(--sunya-color-text-on-dark);
}
.wp-block-cover.is-style-lvg-hero {
min-height: min(80vh, 760px);
}
/* Solo i titoli: un selettore che prendesse anche i paragrafi vincerebbe
su .sunya-eyebrow (misurato: eyebrow bianca invece che ambra). */
.wp-block-cover.is-style-lvg-hero.is-style-lvg-hero :where(h1, h2, h3, h4, h5, h6),
.wp-block-cover.is-style-lvg-band.is-style-lvg-band :where(h1, h2, h3, h4, h5, h6) {
color: inherit;
}
/* 5.3 COVER "BANDA" - stile di blocco della Cover (v1.8.0, functions.php).
La sorella bassa della Hero: una foto a piena larghezza A META' PAGINA,
con una frase, un titolo breve o un pulsante sopra. Stessi token della
Hero (superficie scura, link bianchi), altezza contenuta e contenuto al
centro, testo centrato e largo al massimo 40rem.
Il velo (dimRatio) si sceglie in pagina: 60-70% con foto chiare. La
leggibilita' si misura nel punto piu' chiaro dietro il testo. */
.wp-block-cover.is-style-lvg-band {
min-height: min(56vh, 460px);
padding-block: var(--sunya-spacing-3xl);
text-align: center;
}
.wp-block-cover.is-style-lvg-band .wp-block-cover__inner-container {
max-width: 40rem;
}
.wp-block-cover.is-style-lvg-band .wp-block-cover__inner-container > * {
margin-inline: auto;
}
.wp-block-cover.is-style-lvg-band .wp-block-buttons {
justify-content: center;
}
@media (max-width: 600px) {
.wp-block-cover.is-style-lvg-band {
min-height: 0;
padding-block: var(--sunya-spacing-2xl);
}
}
/* Sul telefono 80vh in verticale taglia troppo il soggetto. svh dove
esiste (barra degli indirizzi), vh come riserva. */
@media (max-width: 600px) {
.wp-block-cover.is-style-lvg-hero {
min-height: min(70vh, 560px);
min-height: min(70svh, 560px);
}
}
/* Il gruppo sunya-pattern-hero dentro la Cover non raddoppia l'aria: la
Cover ha gia' il suo padding e l'altezza minima. */
.wp-block-cover.is-style-lvg-hero .wp-block-cover__inner-container > .sunya-pattern-hero {
padding-block: 0;
background: transparent;
}
/* 5.4 Logo orizzontale nell'header (v1.13.1). Dal 14/10 il logo e' il
"WHM Certified Instructor" orizzontale (1024x257, circa 4:1). Altezza
44px sopra i 1024px, 40 sotto. Misurato sul live il 14/10: a 50px
l'header sborda fino a 17px a 1025 (a 60px fino a 56); a 44px resta in
riga da 1025 in su.
PERCHE' QUI E NON NEL CUSTOMIZER: "Altezza massima logo" emette CSS per
`.custom-logo, .sunya-header__logo img`, ma l'immagine dell'header ha
la classe .sunya-logo__img dentro .sunya-logo: l'impostazione non ha
effetto, decide `.sunya-logo__img { max-height: 50px }` di header.css
(difetto del parent, annotato per la 1.12.1). 0,2,0 batte lo 0,1,0. */
.sunya-header .sunya-logo__img {
max-height: 44px;
}
@media (max-width: 1024px) {
.sunya-header .sunya-logo__img {
max-height: 40px;
}
}
/* 5.5 Menu a sei voci fra 1025 e 1140px (v1.18.1). Dal 15/10 il menu ha
"Eventi": a 1025 servono 1087px (logo 175 + 24 + sei voci da 24px di
padding per lato 592 + 24 + social e Contattami 224 + gutter 48) e
l'header sborda di 14px fino a ~1110 (misurato sul live il 15/10, con
cinque voci a 1100 era in riga). Padding orizzontale delle voci 24 -> 14
in quella fascia: 592 -> 472, totale 967, in riga da 1025. Sopra 1140
torna il parent. Solo la riga superiore del menu, non i sottomenu. */
@media (min-width: 1025px) and (max-width: 1140px) {
.sunya-header .sunya-nav__menu > li > a {
padding-left: 14px;
padding-right: 14px;
}
}
/* Testo secondario su scuro: il ghiaccio, come i sottotitoli di WHM (6.80).
Mai su chiaro (1.87 su bianco). */
:is(.is-style-sunya-dark, .is-style-sunya-dark-alt) .lvg-sub {
color: var(--lvg-color-ice);
}
/* ==========================================================================
6. SEGNAPOSTO FOTO E CONTENUTI (TEMPORANEO, v1.9.0)
Un Gruppo con classe .lvg-ph al posto di una foto (o di un contenuto che
arriva da un plugin) non ancora disponibile: riquadro tratteggiato sulla
nebbia, nelle proporzioni della foto attesa, con dentro cosa ci va.
Struttura: primo paragrafo = etichetta ("Foto da inserire"), poi le
righe del formato. Si sostituisce con il blocco vero (Immagine, Media e
testo, carosello, shortcode) e il Gruppo si elimina.
.lvg-ph riquadro, altezza dal contenuto
.lvg-ph--3x2 proporzioni 3:2 (formato del sito: foto nel corpo,
Foto e testo, gallerie - v1.11.0)
.lvg-ph--4x3 proporzioni 4:3
.lvg-ph--21x9 proporzioni 21:9 (Banda)
.lvg-ph--strip fascia bassa (galleria a fondo pagina)
Con proporzioni fisse e testo lungo, il riquadro cresce col contenuto
(aspect-ratio con min-height auto): sul telefono non taglia niente.
Etichetta in accent-ink, testo in text-on-light: entrambi sulla nebbia,
come le card informative (11.8). Il tratteggio e' decorativo.
Quando non ci sono piu' .lvg-ph nel sito, la sezione torna vuota.
========================================================================== */
.wp-block-group.lvg-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4em;
margin-block: var(--sunya-spacing-lg);
padding: var(--sunya-spacing-xl) var(--sunya-spacing-lg);
background: var(--lvg-color-mist);
border: 2px dashed color-mix(in oklab, var(--sunya-color-text-on-light) 30%, var(--lvg-color-mist));
border-radius: var(--sunya-radius-md);
color: var(--sunya-color-text-on-light);
font-size: .95rem;
line-height: 1.5;
text-align: center;
}
.wp-block-group.lvg-ph--3x2 { aspect-ratio: 3 / 2; }
.wp-block-group.lvg-ph--4x3 { aspect-ratio: 4 / 3; }
.wp-block-group.lvg-ph--21x9 { aspect-ratio: 21 / 9; }
.wp-block-group.lvg-ph--strip { min-height: 14rem; }
/* 0,2,1 batte `.lvg-page p` (0,1,1). In testa al corpo della 13 il
margine superiore lo azzera gia' la 13 (0,3,0). */
.wp-block-group.lvg-ph > p {
max-width: 34rem;
margin: 0;
}
.wp-block-group.lvg-ph > p:first-child {
font-family: var(--sunya-font-heading);
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sunya-color-accent-ink);
}
.wp-block-group.lvg-ph code {
font-size: .85em;
overflow-wrap: anywhere;
}
@media (max-width: 600px) {
.wp-block-group.lvg-ph {
padding: var(--sunya-spacing-lg) var(--sunya-spacing-md);
font-size: .9rem;
}
}
/* ==========================================================================
10. GRAFICHE E ANIMAZIONI
Il motivo del sito: LINEE DI GHIACCIO, fasci di linee sottili e oblique
come le venature di una lastra (lo stesso dello screenshot del tema).
Solo CSS (gradienti ripetuti), peso zero, nessuna immagine, niente del
marchio Wim Hof Method. Decorativo: sta sotto il contenuto e non porta
significato, quindi nessun requisito di contrasto (WCAG 1.4.11 non si
applica alle decorazioni) - ma resta tenue, per non sporcare il testo.
10.1 .lvg-deco-ice classe su un Gruppo (fascia): linee di
ghiaccio nell'angolo in alto a destra,
sfumate verso il centro. Su petrolio,
nebbia e carta, colore adattato.
10.2 .lvg-divider classe sul blocco Separatore core: al posto
del filetto, un segno di 64px fatto di
tratti obliqui in ghiaccio, al centro.
Il colore delle linee e' un derivato del ghiaccio, piu' presente sul
petrolio, quasi impercettibile sulla carta.
========================================================================== */
/* 10.1 Linee di ghiaccio su una fascia. Il Gruppo deve poter contenere un
livello sotto il contenuto: position e isolation, poi lo pseudo-elemento
a z-index -1. */
.wp-block-group.lvg-deco-ice {
--lvg-deco-line: color-mix(in oklab, var(--lvg-color-ice) 30%, transparent);
position: relative;
isolation: isolate;
overflow: hidden;
}
.wp-block-group.lvg-deco-ice:is(.is-style-sunya-dark, .is-style-sunya-dark-alt) {
--lvg-deco-line: color-mix(in oklab, var(--lvg-color-ice) 38%, transparent);
}
.wp-block-group.lvg-deco-ice:not(.is-style-sunya-dark):not(.is-style-sunya-dark-alt):not(.is-style-lvg-mist) {
--lvg-deco-line: color-mix(in oklab, var(--lvg-color-ice) 40%, transparent);
}
.wp-block-group.lvg-deco-ice::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: min(46%, 560px);
height: 100%;
background-image: repeating-linear-gradient(
-12deg,
var(--lvg-deco-line) 0 1px,
transparent 1px 22px
);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000 0%, transparent 70%);
mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000 0%, transparent 70%);
pointer-events: none;
}
/* 10.2 Separatore "ghiaccio" - classe .lvg-divider sul blocco Separatore.
Il core disegna un bordo: qui il bordo sparisce e al centro restano
tratti obliqui in ghiaccio su 64px, un segno di pausa fra due capitoli. */
hr.wp-block-separator.lvg-divider {
width: 64px;
max-width: 64px;
height: 14px;
margin: var(--sunya-spacing-2xl) auto;
border: 0;
background-color: var(--lvg-color-ice);
/* Tre tratti obliqui disegnati da una maschera SVG: con un gradiente
ripetuto i tratti ai bordi uscivano tagliati (visto in prova). */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cg stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M19 12 27 2M29 12 37 2M39 12 47 2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cg stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M19 12 27 2M29 12 37 2M39 12 47 2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
opacity: 1;
}
/* --------------------------------------------------------------------------
11. PAGINA EDITORIALE / CONTATTI
Portata dal child davidearduini 2.1.5 (sezione 11, stessi slot e stessi
nomi con prefisso lvg-). Modo C: la pagina e' un blocco HTML con
class="lvg-page lvg-contact" e il form WPForms nel blocco SUCCESSIVO.
11.1 .lvg-page contenitore 820 + tipografia
11.2 .lvg-page .lvg-lead lead di pagina
11.3 .lvg-note callout
11.4 - vuota
11.5 .lvg-promise avviso con icona
11.6 .lvg-page .lvg-btn bottone base + --invert
11.7 - vuota
11.8 .lvg-info-card + .lvg-small
11.9 - vuota
11.10 .lvg-contact .lvg-actions .lvg-info .lvg-ask
11.11 div.wpforms-container-full - solo la larghezza (820)
Differenze dal modello, tutte di colore:
- --invert e' AMBRA con inchiostro petrolio (il pulsante di WHM, ma col
testo leggibile: 6.37), hover = inversione su petrolio.
- le card informative stanno sulla nebbia, non su bg-alt.
-------------------------------------------------------------------------- */
/* 11.1 Contenitore - forma qualificata, vince sul fallback :where() del
parent >= 1.11.1 a 0,2,0. Non alzarla. */
.sunya-entry-content > .lvg-page {
max-width: 820px;
margin-inline: auto;
}
.lvg-page {
padding: 0 4px;
font-size: 1.0625rem;
line-height: 1.65;
}
.lvg-page h1 {
font-size: 2.25rem;
line-height: 1.15;
margin: .2em 0 .2em;
}
/* scroll-margin-top su tutti gli h2: fallback 80px OBBLIGATORIO, il parent
non dichiara --sunya-header-height. Da misurare sull'header reale. */
.lvg-page h2 {
font-size: 1.6rem;
margin: 2.2em 0 .5em;
padding-bottom: .3em;
border-bottom: 2px solid var(--lvg-color-ice);
scroll-margin-top: calc(var(--sunya-header-height, 80px) + var(--sunya-spacing-lg));
}
.lvg-page h3 {
font-size: 1.2rem;
margin: 1.4em 0 .4em;
}
.lvg-page p {
margin: .6em 0;
}
@media (max-width: 600px) {
.lvg-page { font-size: 1rem; padding: 0; }
.lvg-page h1 { font-size: 1.85rem; }
.lvg-page h2 { font-size: 1.35rem; }
}
/* 11.2 Lead */
.lvg-page .lvg-lead {
margin-bottom: 1.4em;
font-size: 1.15rem;
color: var(--sunya-color-text-light);
}
/* 11.3 Callout */
.lvg-note {
background: var(--lvg-color-mist);
border-left: 3px solid var(--sunya-color-accent);
border-radius: 0 var(--sunya-radius-md) var(--sunya-radius-md) 0;
padding: 12px 18px;
margin: .8em 0;
font-size: .95rem;
}
/* 11.4 - vuota (dadesign: .dd-nav, indice ad ancore) */
/* 11.5 Avviso con icona. Il bordo e' superficie (ambra va bene), l'icona
e' un segno da leggere su carta chiara: accent-ink. */
.lvg-promise {
display: flex;
align-items: center;
gap: 10px;
background: var(--lvg-color-mist);
border-left: 3px solid var(--sunya-color-accent);
border-radius: 0 var(--sunya-radius-md) var(--sunya-radius-md) 0;
padding: 12px 18px;
margin: 0 0 1.4em;
font-weight: 600;
}
.lvg-promise svg {
width: 20px;
height: 20px;
flex: none;
fill: var(--sunya-color-accent-ink);
}
/* 11.6 Bottoni delle pagine editoriali - scritti a mano, base autonoma.
HOVER = INVERSIONE (regola nata su dadesign il 2026-08-10).
.lvg-btn contorno petrolio su carta
.lvg-btn--invert ambra piena, inchiostro petrolio (6.37) */
.lvg-page .lvg-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 22px;
min-height: 48px;
border: 1.5px solid var(--sunya-color-accent-ink);
border-radius: var(--sunya-radius-md);
background: transparent;
color: var(--sunya-color-accent-ink);
font-size: 1rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background var(--sunya-transition-fast),
color var(--sunya-transition-fast),
border-color var(--sunya-transition-fast),
box-shadow var(--sunya-transition-fast);
}
.lvg-page .lvg-btn:hover,
.lvg-page .lvg-btn:focus-visible {
background: var(--sunya-color-surface-dark);
border-color: var(--sunya-color-surface-dark);
color: var(--sunya-color-text-on-dark);
}
.lvg-page .lvg-btn--invert {
background: var(--sunya-color-accent);
border-color: var(--sunya-color-accent);
color: var(--sunya-color-accent-contrast);
}
.lvg-page .lvg-btn--invert:hover,
.lvg-page .lvg-btn--invert:focus-visible {
background: var(--sunya-color-surface-dark);
border-color: var(--sunya-color-surface-dark);
color: var(--sunya-color-accent);
box-shadow: 0 4px 20px color-mix(in srgb, var(--sunya-color-accent) 35%, transparent);
}
.lvg-page .lvg-btn:focus-visible {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 2px;
}
.lvg-page .lvg-btn svg {
width: 19px;
height: 19px;
flex: none;
fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
.lvg-page .lvg-btn { transition: none; }
}
/* 11.7 - vuota (dadesign: .dd-social) */
/* 11.8 Box informativo - dati fermi, nessun hover. Sulla nebbia. */
.lvg-info-card {
background: var(--lvg-color-mist);
border-radius: var(--sunya-radius-md);
padding: 18px 22px;
}
.lvg-info-card strong {
display: block;
margin-bottom: .5em;
font-family: var(--sunya-font-heading);
font-size: 1.15rem;
}
.lvg-info-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.lvg-info-card li {
margin: .35em 0;
}
.lvg-small {
font-size: .92rem;
color: var(--sunya-color-text-light);
}
/* Sulla nebbia il text-light del parent (tarato sulla carta bianca, 5.1)
scende a 4.31: misurato v1.3.0. Qui il secondario e' un derivato del
petrolio verso la nebbia, misurato 6.75. */
.lvg-info-card .lvg-small,
.is-style-lvg-mist .lvg-small {
color: color-mix(in oklab, var(--sunya-color-text-on-light) 82%, var(--lvg-color-mist));
}
/* 11.9 - vuota (dadesign: pagina Servizi) */
/* 11.10 Specifico pagina Contatti */
.lvg-contact .lvg-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 1.2em 0 .8em;
}
.lvg-contact .lvg-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sunya-spacing-md);
margin: 1.4em 0;
}
.lvg-contact .lvg-ask {
margin: 1em 0 1.4em;
padding-left: 1.2em;
}
.lvg-contact .lvg-ask li {
margin: .45em 0;
}
.lvg-contact .lvg-ask li::marker {
color: var(--sunya-color-accent-ink);
}
@media (max-width: 600px) {
.lvg-contact .lvg-info { grid-template-columns: 1fr; }
.lvg-contact .lvg-actions { flex-direction: column; }
.lvg-page .lvg-btn { justify-content: center; }
}
/* 11.11 WPForms - solo la larghezza. Il blocco e' FRATELLO di .lvg-page,
non figlio. La skin dei campi resta al parent (forms.css). */
div.wpforms-container-full {
max-width: 820px;
margin: 0 auto;
}
/* ==========================================================================
12. PAGINE PERSONE - slot semantico condiviso
Portata dal child kinesis 2.4.3 (2026-10-06): stessi numeri, stessi
blocchi core, stesso MODO B (blocchi vestiti dalle classi, che vanno in
"Avanzate > Classi CSS aggiuntive"). Cambia il prefisso e cambiano i
COLORI, adattati a questo brand:
| 12.x | Significato | qui |
|------|------------------------------------|---------------|
| 12.1 | Contenitore pagina persone + lead | .lvg-team |
| 12.2 | Scheda persona (media-text) | .lvg-person |
| 12.3 | Nome (filetto brand) + ruolo | h2 + .lvg-role|
| 12.4 | Sintesi in evidenza | .lvg-intro |
| 12.5 | Chip | .lvg-tags |
| 12.6 | Accordion percorso (core/details) | .lvg-cv |
| 12.7 | CTA di scheda (solo posizionamento)| - (parent) |
| 12.8 | Responsive | - |
COLORI: solo token, nessun fallback (decisione 26/08 sulla 12, valida
su tutti i child). Differenze da kinesis:
- testo di ruolo, chip, accordion in accent-ink (petrolio, 12.70): qui
l'ambra su bianco fa 1.99 e non puo' essere testo;
- filetto del nome in ambra: e' un segno, non testo;
- separatori in ghiaccio, non l'esadecimale #E5E2DC di kinesis;
- chip sulla nebbia, hover ambra con inchiostro petrolio (6.37).
Link, bottoni, nav: del parent, non si riscrivono.
========================================================================== */
/* 12.1 Contenitore - va sul Gruppo che avvolge H1 + lead + schede.
NIENTE max-width: la larghezza la decide il layout engine. */
.lvg-team .lvg-lead {
font-size: 1.15rem;
color: var(--sunya-color-text-light);
margin-bottom: 2.4em;
}
/* 12.2 Scheda persona - va sul blocco "Media e testo".
Foto intera, nessun crop: tetto in altezza perche' un ritratto
verticale in colonna larga mangerebbe la scheda. */
.lvg-team .lvg-person + .lvg-person {
margin-top: 3.5rem;
padding-top: 3.5rem;
border-top: 1px solid var(--lvg-color-ice);
}
.lvg-person .wp-block-media-text__media img {
display: block;
width: auto;
height: auto;
max-width: 100%; /* misurato 06/10: con una foto orizzontale, solo il
tetto in altezza la faceva uscire dalla colonna */
max-height: 520px;
margin-inline: auto;
border-radius: var(--sunya-radius-md);
}
/* 12.3 Nome + ruolo. scroll-margin: fallback 80px OBBLIGATORIO, il parent
non dichiara --sunya-header-height (come in 11.1). */
.lvg-person h2 {
border-left: 6px solid var(--sunya-color-accent);
padding-left: 1.1rem;
margin-bottom: .15em;
scroll-margin-top: calc(var(--sunya-header-height, 80px) + var(--sunya-spacing-lg));
}
.lvg-person .lvg-role {
margin: 0 0 1.2em;
padding-left: calc(6px + 1.1rem);
font-size: .95rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--sunya-color-accent-ink);
}
/* 12.4 Sintesi in evidenza - le righe sempre visibili sopra l'accordion. */
.lvg-person .lvg-intro {
font-size: 1.1rem;
line-height: 1.65;
margin-bottom: 1.2em;
}
/* 12.5 Chip - su un Paragrafo di soli link. Controlli, non link di testo:
tutti gli stati insieme (un color senza il suo :hover azzera l'hover).
Classe raddoppiata (0,3,1): la regola 2.1 dei link sottolineati pesa
0,3,1 e vinceva (misurato 06/10, chip sottolineate); a parita' vince
questa per ordine sorgente. */
.lvg-person .lvg-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 1.2em;
}
.lvg-person .lvg-tags.lvg-tags a {
display: inline-flex;
align-items: center;
padding: 5px 13px;
border-radius: 999px;
background: var(--lvg-color-mist);
color: var(--sunya-color-accent-ink);
font-size: .9rem;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: background var(--sunya-transition-fast), color var(--sunya-transition-fast);
}
.lvg-person .lvg-tags.lvg-tags a:hover,
.lvg-person .lvg-tags.lvg-tags a:focus {
background: var(--sunya-color-accent);
color: var(--sunya-color-accent-contrast);
}
.lvg-person .lvg-tags.lvg-tags a:focus-visible {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 2px;
}
/* 12.6 Accordion percorso - .lvg-cv sul blocco core "Dettagli".
Il parent non ha regole su details: la skin sta tutta qui. */
.lvg-person .lvg-cv {
margin: 0 0 1.4em;
border-top: 1px solid var(--lvg-color-ice);
border-bottom: 1px solid var(--lvg-color-ice);
}
.lvg-person .lvg-cv > summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 2px;
cursor: pointer;
list-style: none;
font-size: 1rem;
font-weight: 700;
color: var(--sunya-color-accent-ink);
}
.lvg-person .lvg-cv > summary::-webkit-details-marker { display: none; }
.lvg-person .lvg-cv > summary::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg) translate(-1px, -1px);
transition: transform .15s ease;
}
.lvg-person .lvg-cv[open] > summary::before {
transform: rotate(45deg) translate(-2px, -2px);
}
.lvg-person .lvg-cv > summary:focus-visible {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 2px;
}
.lvg-person .lvg-cv > *:last-child {
margin-bottom: 1.1em;
}
@media (prefers-reduced-motion: reduce) {
.lvg-person .lvg-cv > summary::before,
.lvg-person .lvg-tags a { transition: none; }
}
/* 12.7 CTA di scheda - SOLO posizionamento; la veste e' del parent
(blocco Bottone, is-style-outline). */
.lvg-person .wp-block-buttons {
margin-top: 1.4em;
}
/* 12.8 Responsive - sotto i 782px media-text impila da solo. */
@media (max-width: 781px) {
.lvg-person .wp-block-media-text__media img {
max-height: 380px;
}
.lvg-team .lvg-person + .lvg-person {
margin-top: 2.5rem;
padding-top: 2.5rem;
}
}
/* ==========================================================================
13. PAGINA SERVIZIO (blocchi Gutenberg - modo B)
Slot semantico condiviso: la SCHEDA di un tipo di attivita'. Qui: corso
base, weekend; candidate sessioni private e team building. Portata dal
child dadesign 2.8.5 (13 v2: colonna di lettura + spalla), con prefisso
lvg-, colori di questo brand e TRE differenze di struttura:
1. La spalla viene PRIMA del corpo nel DOM (testa, spalla, corpo, coda).
Su dadesign la spalla porta nota, CTA e fratelli e sul telefono va in
fondo. Qui porta i DATI SINTETICI (durata, luogo, cosa e' compreso) e
il pulsante verso le date: sul telefono servono subito sotto il
titolo, non dopo tutta la prosa. Sul desktop la griglia la rimette a
destra comunque.
2. I fratelli (13.10) NON stanno in spalla ma in coda, sotto il corpo:
in testa alla pagina sul telefono sarebbero un'uscita prima ancora di
aver letto.
3. Il contenitore e' .lvg-page (820, 11.1): con la spalla si allarga
(13.1). Senza spalla resta una pagina editoriale a 820.
Classi ("Avanzate > Classi CSS aggiuntive" sui blocchi core):
13.1 .lvg-page.lvg-svc Gruppo contenitore (layout default)
13.2 .lvg-svc__head Gruppo: .sunya-eyebrow + h1 + .lvg-lead
13.3 - vuota (il richiamo e' .lvg-note, 11.3)
13.4 .lvg-svc__includes Elenco puntato (cosa portare, preparazione)
13.5 .lvg-svc__steps Elenco NUMERATO: come si svolge, a fasi
13.6 .lvg-svc__facts Elenco: Etichetta valore
13.7 - vuota (prove)
13.8 FAQ blocchi Dettagli nel corpo, vestiti dalla 21
13.9 CTA in spalla solo posizionamento, veste del parent
13.10 .lvg-svc__siblings Gruppo in coda: etichetta + link
13.11 Responsive
Spalla: Gruppo con tagName "aside" e classe .lvg-svc__aside.
Corpo: Gruppo con classe .lvg-svc__body.
Solo token: nessun esadecimale, nessun fallback di colore. La griglia si
accende solo con la spalla presente (:has), quindi una pagina scritta
in sola sezione 11 rende come prima.
Modello per il progetto contenuti:
wp-clients\laviadelghiaccio.com\docs\NOTA-2026-10-06-da-sunya-sezione-13.md
========================================================================== */
/* 13.1 Contenitore. NUDO senza spalla. Con la spalla, sopra i 1024px:
larghezza del contenuto di WordPress (1200, come le fasce della home)
piu' il gutter laterale, che il parent mette su ogni figlio di
.sunya-entry-content (24px per lato; il padding di 4px della 11.1 qui
perde). Dentro: colonna fino a 40rem (640px, ~88 caratteri di Barlow a
17px, misurato 14/10) e spalla fino a 24rem, spinte ai due bordi
(space-between): a 1440 lo stacco e' 176px, a 1025 scende al minimo di
64. La larghezza sale da 820 SOLO qui (0,4,0 contro lo 0,2,0 della
11.1). v1.7.0-1.9.0: 36rem + 18rem in 976px.
Il Gruppo e' FLOW (layout default), non constrained: niente
margin-inline auto !important sui figli. In griglia i margini non
collassano: si azzerano sulle celle e il ritmo resta dentro di esse. */
@media (min-width: 1025px) {
.sunya-entry-content > .lvg-page.lvg-svc:has(> .lvg-svc__aside) {
max-width: calc(var(--wp--style--global--content-size, 1200px) + 2 * var(--sunya-content-gutter));
}
.lvg-page.lvg-svc:has(> .lvg-svc__aside) {
display: grid;
grid-template-columns: minmax(0, 40rem) minmax(0, 24rem);
grid-template-areas:
"head ."
"body aside"
"tail .";
column-gap: calc(var(--sunya-spacing-2xl) + var(--sunya-spacing-md));
justify-content: space-between;
align-items: start;
}
.lvg-page.lvg-svc:has(> .lvg-svc__aside) > * {
margin-block: 0;
}
.lvg-page.lvg-svc:has(> .lvg-svc__aside) > .lvg-svc__head { grid-area: head; margin-bottom: var(--sunya-spacing-xl); }
.lvg-page.lvg-svc:has(> .lvg-svc__aside) > .lvg-svc__body { grid-area: body; }
.lvg-page.lvg-svc:has(> .lvg-svc__aside) > .lvg-svc__siblings { grid-area: tail; }
/* Spalla sticky: si ferma in fondo alla griglia. align-self start e'
la condizione (vale gia' da align-items). */
.lvg-page.lvg-svc > .lvg-svc__aside {
grid-area: aside;
position: sticky;
top: calc(var(--sunya-header-height, 80px) + var(--sunya-spacing-xl));
}
}
/* Ritmo interno di spalla e corpo, a ogni larghezza. */
.lvg-page.lvg-svc > .lvg-svc__aside > * {
margin-block: 0;
}
.lvg-page.lvg-svc > .lvg-svc__aside > * + * {
margin-top: var(--sunya-spacing-lg);
}
.lvg-page.lvg-svc > .lvg-svc__body > :first-child {
margin-top: 0;
}
/* 13.2 Intestazione. L'eyebrow e' quella del parent (.sunya-eyebrow,
accent-ink: petrolio su carta): qui solo i margini. 0,3,0 batte
`.lvg-page p` e `.lvg-page h1` (0,1,1). */
.lvg-page .lvg-svc__head > .sunya-eyebrow {
margin: 0 0 var(--sunya-spacing-sm);
}
.lvg-page .lvg-svc__head > h1 {
margin-top: 0;
}
.lvg-page .lvg-svc__head > .lvg-lead {
margin-bottom: 0;
}
/* 13.3 - vuota: il richiamo (avvertenze) e' .lvg-note, 11.3. */
/* 13.4 Elenco puntato di contenuto (preparazione, cosa portare). */
.lvg-svc__includes {
margin: var(--sunya-spacing-md) 0;
padding-left: 1.2em;
}
.lvg-svc__includes li {
margin: .35em 0;
}
.lvg-svc__includes li::marker {
color: var(--sunya-color-accent-ink);
}
/* 13.5 Fasi - elenco NUMERATO (blocco Elenco con "Elenco numerato").
Il numero e' un disco ambra con la cifra petrolio (6.37, la coppia del
pulsante pieno); il filo fra un disco e l'altro e' ghiaccio, decorativo:
l'ordine lo dice gia' il numero. Contatore CSS, non il marker: il marker
non si puo' mettere in un disco.
Il filo va dal fondo del disco al disco successivo, senza vuoti: con
un margine sopra e sotto, sulle voci di una riga restava un moncherino
di 8px (visto in prova il 06/10). */
.lvg-svc__steps {
list-style: none;
counter-reset: lvg-step;
margin: var(--sunya-spacing-lg) 0;
padding: 0;
}
.lvg-svc__steps > li {
position: relative;
counter-increment: lvg-step;
min-height: 2.2rem;
margin: 0;
padding: .2rem 0 var(--sunya-spacing-lg) 3.25rem;
}
.lvg-svc__steps > li::before {
content: counter(lvg-step);
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: var(--sunya-color-accent);
color: var(--sunya-color-accent-contrast);
font-family: var(--sunya-font-heading);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
}
.lvg-svc__steps > li:not(:last-child)::after {
content: "";
position: absolute;
top: 2.2rem;
bottom: 0;
left: calc(1.1rem - 1px);
border-left: 2px solid var(--lvg-color-ice);
}
.lvg-svc__steps > li:last-child {
padding-bottom: 0;
}
/* 13.6 Dati sintetici - elenco senza punti sulla nebbia, ogni voce
"Etichetta valore". L'etichetta va a capo da sola:
Marco scrive una riga per voce, il CSS fa la scheda. */
.lvg-svc__facts {
list-style: none;
margin: 0;
padding: var(--sunya-spacing-sm) var(--sunya-spacing-lg);
background: var(--lvg-color-mist);
border-radius: var(--sunya-radius-md);
}
.lvg-svc__facts > li {
margin: 0;
padding: var(--sunya-spacing-md) 0;
}
.lvg-svc__facts > li + li {
border-top: 1px solid var(--lvg-color-ice);
}
.lvg-svc__facts > li > strong:first-child {
display: block;
margin-bottom: .2em;
font-family: var(--sunya-font-heading);
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sunya-color-accent-ink);
}
/* 13.7 - vuota (prove: recensioni, numeri). */
/* 13.8 FAQ - nessuna regola qui: i blocchi Dettagli in coda al corpo li
veste la 21 (accordion globale, v1.8.0). Un H2 "Domande frequenti" e i
Dettagli sotto, dentro .lvg-svc__body. */
/* 13.9 CTA in spalla - solo geometria: pulsante a tutta larghezza della
spalla, a ogni viewport. Colori del parent (pieno: ambra/petrolio). */
.lvg-svc__aside .wp-block-button {
width: 100%;
}
.lvg-svc__aside .wp-block-button__link {
width: 100%;
box-sizing: border-box;
text-align: center;
}
/* 13.10 Fratelli - coda della pagina, staccata da un filetto ghiaccio.
Stacco con padding, mai margin (collasso). I link sono quelli della 2.1. */
.lvg-svc__siblings {
margin-top: var(--sunya-spacing-2xl);
padding-top: var(--sunya-spacing-lg);
border-top: 1px solid var(--lvg-color-ice);
font-size: .95rem;
}
.lvg-page .lvg-svc__siblings p {
margin: .35em 0;
color: var(--sunya-color-text-light);
}
/* 13.11 Responsive. Sotto i 1025px: una colonna nell'ordine del DOM
(testa, spalla, corpo, coda), larghezza della 11.1 (820). La spalla
prende aria sopra e sotto: e' la scheda dei dati, non un seguito del
lead. */
@media (max-width: 1024px) {
.lvg-page.lvg-svc > .lvg-svc__aside {
margin: var(--sunya-spacing-xl) 0 var(--sunya-spacing-2xl);
}
}
@media (max-width: 600px) {
.lvg-svc__steps > li {
padding-left: 2.9rem;
}
.lvg-svc__steps > li::before {
width: 2rem;
height: 2rem;
font-size: .95rem;
}
.lvg-svc__steps > li:not(:last-child)::after {
top: 2rem;
left: calc(1rem - 1px);
}
.lvg-svc__facts {
padding-inline: var(--sunya-spacing-md);
}
.lvg-svc__siblings {
margin-top: var(--sunya-spacing-xl);
}
}
/* ==========================================================================
14. PAGINA HUB (blocchi Gutenberg - modo B, v1.12.0)
Slot semantico condiviso: la pagina INDICE che instrada verso le schede
della 13. Qui: /corsi/, voce madre del menu, con i quattro corsi. Stesso
ruolo della 14 di dadesign (/servizi/), forma piu' semplice: testata e
una griglia di schede, niente famiglie ne' percorsi.
14.1 .lvg-page.lvg-hub Gruppo contenitore (layout default)
14.2 - vuota (dadesign: etichetta di famiglia)
14.3 .lvg-hub__head Gruppo: .sunya-eyebrow + h1 + .lvg-lead
14.4 .lvg-cards Gruppo FLOW con le schede: griglia
14.5 .lvg-card Gruppo: foto 3:2, h2 > a, testo
14.6 - vuota
14.7 - vuota (dadesign: CTA dell'hub)
14.8 Responsive
LA GRIGLIA PUO' VIVERE ANCHE FUORI DALL'HUB (la griglia dei tipi in
home, report del 12/10 §3.2): .lvg-cards non dipende da .lvg-hub.
TUTTA LA SCHEDA E' CLICCABILE: il link sta sul titolo (testo vero, la
foto non e' un link), e il suo ::after copre la scheda. Il fuoco si
disegna sulla scheda. Idioma della 9.10 di dadesign.
OMBRE MORBIDE (richiesta di Davide del 06/10): nessuna ombra a riposo,
all'hover una sola ombra larga e chiara; il fondo nebbia basta a
staccare la scheda dalla carta.
========================================================================== */
/* 14.1 Contenitore. Largo come la 13 (1200, le fasce della home): le
schede sono immagini e brevi testi, la larghezza le aiuta. 0,3,0 batte
l'820 della 11.1 (0,2,0). */
.sunya-entry-content > .lvg-page.lvg-hub {
max-width: calc(var(--wp--style--global--content-size, 1200px) + 2 * var(--sunya-content-gutter));
}
/* 14.2 - vuota */
/* 14.3 Testata: come la 13.2, lead a 40rem (la riga di lettura). */
.lvg-page .lvg-hub__head > .sunya-eyebrow {
margin: 0 0 var(--sunya-spacing-sm);
}
.lvg-page .lvg-hub__head > h1 {
margin-top: 0;
}
.lvg-page .lvg-hub__head > .lvg-lead {
max-width: 40rem;
margin-bottom: 0;
}
/* 14.4 Griglia. Il Gruppo e' FLOW (layout default): un Gruppo constrained
darebbe ai figli margin-inline auto !important, che in una cella
restringe la scheda al contenuto (trappola della 13 v2 di dadesign).
Due colonne sopra i 781px: quattro corsi = 2 x 2, schede larghe
abbastanza per una foto che si legga. */
.lvg-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sunya-spacing-xl);
margin-top: var(--sunya-spacing-2xl);
}
/* 0,2,0: azzera il margine del flow del core fra una scheda e l'altra,
che in griglia si sommerebbe al gap. */
.lvg-cards > .lvg-card {
margin: 0;
}
/* 14.5 Scheda. */
.lvg-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--lvg-color-mist);
border-radius: var(--sunya-radius-md);
overflow: hidden;
transition: transform var(--sunya-transition-base), box-shadow var(--sunya-transition-base);
}
.lvg-card:hover,
.lvg-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 36px -18px color-mix(in srgb, var(--sunya-color-surface-dark) 30%, transparent);
}
.lvg-card:has(a:focus-visible) {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 3px;
}
.lvg-card a:focus-visible {
outline: none;
}
/* Foto (blocco Immagine) o segnaposto della 6: a filo in alto, 3:2. */
.lvg-card > :first-child {
margin: 0;
}
.lvg-card > .wp-block-image img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.lvg-card > .wp-block-group.lvg-ph {
margin: 0;
border-radius: 0;
border-width: 0 0 2px;
}
/* Testo della scheda: 0,2,x per battere `.lvg-page h2` (bordo e margini
della 11.1) e `.lvg-page p`. */
.lvg-card > h2,
.lvg-card > h3 {
margin: var(--sunya-spacing-lg) var(--sunya-spacing-lg) var(--sunya-spacing-xs);
padding: 0;
border: 0;
font-size: 1.35rem;
}
.lvg-card > h2 a,
.lvg-card > h3 a {
color: inherit;
text-decoration: none;
}
.lvg-card > h2 a::after,
.lvg-card > h3 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.lvg-card:hover > :is(h2, h3) a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: .18em;
}
.lvg-page .lvg-card > p {
margin: 0 var(--sunya-spacing-lg) var(--sunya-spacing-lg);
font-size: 1rem;
}
/* "Scopri" in fondo alla scheda: segno, non un secondo link (il link e' il
titolo). In accent-ink sulla nebbia, come le etichette della 13.6. */
.lvg-page .lvg-card > .lvg-card__more {
margin-top: auto;
font-family: var(--sunya-font-heading);
font-size: .85rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--sunya-color-accent-ink);
}
/* 14.6 - vuota */
/* 14.7 - vuota */
/* 14.8 Responsive. */
@media (max-width: 781px) {
.lvg-cards {
grid-template-columns: minmax(0, 1fr);
gap: var(--sunya-spacing-lg);
margin-top: var(--sunya-spacing-xl);
}
.lvg-card > h2,
.lvg-card > h3 {
margin: var(--sunya-spacing-md) var(--sunya-spacing-md) var(--sunya-spacing-xs);
font-size: 1.2rem;
}
.lvg-page .lvg-card > p {
margin: 0 var(--sunya-spacing-md) var(--sunya-spacing-md);
}
}
@media (prefers-reduced-motion: reduce) {
.lvg-card {
transition: none;
}
.lvg-card:hover,
.lvg-card:focus-within {
transform: none;
}
}
/* ==========================================================================
15. LAVORI / PORTFOLIO - vuota
========================================================================== */
/* ==========================================================================
20. SKIN DEI CORE BUTTON - vuota
========================================================================== */
/* ==========================================================================
21. ACCORDION (core/details) E FAQ - skin di componente globale
Ogni blocco "Dettagli" del sito, ovunque: pagina FAQ, blocco FAQ in home,
FAQ in coda alle pagine corso (13.8), qualunque pagina. Marco aggiunge un
blocco Dettagli e lo trova gia' vestito: nessuna classe da ricordare.
Nativo, senza JavaScript: tastiera, lettori di schermo e "trova nella
pagina" funzionano da soli.
Nota: sportpix ha un FAQ fatto dal plugin (bottoni + JS); qui la stessa
idea con il blocco core, perche' Marco deve poterlo scrivere in editor.
21.1 .wp-block-details riga dell'accordion, filetto ghiaccio
21.2 summary domanda + chevron in accent-ink
21.3 contenuto risposta
21.4 .lvg-faq blocco FAQ (Gruppo): titolo, elenco,
rimando "Tutte le domande"
21.5 superfici scure filetto e chevron sul petrolio
La 12.6 (.lvg-person .lvg-cv) resta com'e': l'accordion "percorso"
della scheda persona ha chevron a sinistra e filetti propri, e questa
sezione lo ESCLUDE (:not(.lvg-cv) su ogni selettore). Senza esclusione
la scheda persona avrebbe avuto due chevron.
========================================================================== */
/* 21.1 Riga. Le righe consecutive condividono il filetto: solo la prima
ha anche quello sopra. */
.wp-block-details:not(.lvg-cv) {
margin: 0;
border-bottom: 1px solid var(--lvg-color-ice);
}
:not(.wp-block-details) + .wp-block-details:not(.lvg-cv),
.wp-block-details:not(.lvg-cv):first-child {
border-top: 1px solid var(--lvg-color-ice);
}
/* Il primo Dettagli dopo un paragrafo non si appoggia al testo (visto in
prova: filetto a filo della riga sopra). */
:not(.wp-block-details) + .wp-block-details:not(.lvg-cv) {
margin-top: var(--sunya-spacing-lg);
}
.wp-block-details:not(.lvg-cv) + :not(.wp-block-details) {
margin-top: var(--sunya-spacing-lg);
}
/* 21.2 Domanda. Il marker nativo sparisce (due forme: standard e WebKit),
al suo posto un chevron a destra che ruota all'apertura. Area di clic
alta almeno 48px. */
.wp-block-details:not(.lvg-cv) > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sunya-spacing-md);
min-height: 48px;
padding: 14px 2px;
cursor: pointer;
list-style: none;
font-family: var(--sunya-font-heading);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.3;
}
.wp-block-details:not(.lvg-cv) > summary::-webkit-details-marker { display: none; }
.wp-block-details:not(.lvg-cv) > summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin-right: 4px;
border-right: 2px solid var(--sunya-color-accent-ink);
border-bottom: 2px solid var(--sunya-color-accent-ink);
transform: translateY(-3px) rotate(45deg);
transition: transform var(--sunya-transition-fast);
}
.wp-block-details:not(.lvg-cv)[open] > summary::after {
transform: translateY(2px) rotate(-135deg);
}
.wp-block-details:not(.lvg-cv) > summary:hover {
color: var(--sunya-color-accent-ink);
}
.wp-block-details:not(.lvg-cv) > summary:focus-visible {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 2px;
}
/* 21.3 Risposta. */
.wp-block-details:not(.lvg-cv) > :not(summary) {
margin-block: 0 .8em;
}
.wp-block-details:not(.lvg-cv) > :last-child {
margin-bottom: 1.2em;
}
/* 21.4 Blocco FAQ - Gruppo .lvg-faq: h2, i Dettagli, poi un paragrafo
.lvg-faq__more col link alla pagina FAQ. Titolo e rimando centrati,
elenco a 820 come le pagine di lettura. Funziona su carta, nebbia e
petrolio (il Gruppo puo' avere lo stile Nebbia o superficie scura). */
.lvg-faq > h2 {
text-align: center;
margin-bottom: var(--sunya-spacing-xl);
}
.lvg-faq > .wp-block-details:not(.lvg-cv),
.lvg-faq > .lvg-faq__more {
max-width: 820px;
margin-inline: auto;
}
.lvg-faq > .lvg-faq__more {
margin-top: var(--sunya-spacing-lg);
text-align: center;
font-weight: 700;
}
/* 21.5 Sulle superfici scure il testo e' gia' bianco (parent) e
accent-ink e' gia' l'ambra (blocks.css): resta solo il filetto, che sul
petrolio va un poco piu' presente. */
:is(.is-style-sunya-dark, .is-style-sunya-dark-alt) .wp-block-details:not(.lvg-cv) {
border-color: color-mix(in oklab, var(--lvg-color-ice) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.wp-block-details:not(.lvg-cv) > summary::after { transition: none; }
}
/* ==========================================================================
22. FOTO E TESTO (core/media-text) - skin di componente globale
Stile di blocco "Foto e testo" (is-style-lvg-split, functions.php) sul
blocco Media e testo. Per alternare destra e sinistra Marco usa il
comando del blocco "Mostra media a destra": nessuna classe in piu'.
La foto riempie la sua colonna con un taglio 3:2 (object-fit; 4:3 fino
alla v1.10.0, 3:2 e' il formato degli originali), angoli
arrotondati, nessuna ombra. Testo centrato in verticale, aria fra le
due colonne. Sotto i 782px il core impila (foto sopra): qui solo l'aria.
NON tocca la scheda persona (12.2), che e' un Media e testo con la sua
classe e nessuno stile di blocco.
========================================================================== */
.wp-block-media-text.is-style-lvg-split {
column-gap: var(--sunya-spacing-3xl);
align-items: center;
margin-block: var(--sunya-spacing-3xl);
}
.wp-block-media-text.is-style-lvg-split .wp-block-media-text__media img {
aspect-ratio: 3 / 2;
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--sunya-radius-md);
}
.wp-block-media-text.is-style-lvg-split .wp-block-media-text__content {
padding-inline: 0;
}
.wp-block-media-text.is-style-lvg-split .wp-block-media-text__content > :first-child {
margin-top: 0;
}
.wp-block-media-text.is-style-lvg-split .wp-block-media-text__content > :last-child {
margin-bottom: 0;
}
/* Aria sopra e sotto ogni riga (margin-block sopra): due righe vicine
collassano i margini e restano a uno stacco solo, si leggono come
capitoli. Visto in prova: senza, la prima riga toccava la fascia sopra. */
@media (max-width: 781px) {
.wp-block-media-text.is-style-lvg-split {
margin-block: var(--sunya-spacing-2xl);
}
.wp-block-media-text.is-style-lvg-split .wp-block-media-text__content {
padding-top: var(--sunya-spacing-lg);
}
}
/* ==========================================================================
23. CAROSELLO - skin del plugin Jexy Carousel (dadesign, >= 1.0.5)
Il plugin disegna le frecce bianche con glifo #333, ombra 0 2px 8px e
fuoco blu WordPress #0073aa: tre colori di un altro sito. Qui solo la
VESTE, mai il comportamento (slide visibili, autoplay, lightbox, raggio
degli angoli stanno nelle impostazioni del carosello, in bacheca).
Il raggio arriva dal plugin come stile inline (--jxc-border-radius sul
contenitore, valore del campo "Bordi arrotondati"): si imposta li', non
qui, o servirebbe !important.
23.1 frecce petrolio pieno, glifo bianco (12.70), ombra
morbida; hover ambra con glifo petrolio (6.37)
23.2 fuoco anello accent-ink al posto del blu WordPress
23.3 .lvg-gallery Gruppo di fondo pagina: eyebrow, titolo,
carosello. Pensato su Nebbia o carta.
Specificita': il plugin scrive `.jxc-carousel .splide__arrow` (0,2,0) e
si carica nel footer, DOPO il child. Per vincere senza !important qui
si scrive `.jxc-carousel.splide .splide__arrow` (0,3,0).
========================================================================== */
.jxc-carousel.splide .splide__arrow {
background: var(--sunya-color-surface-dark);
box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--sunya-color-surface-dark) 45%, transparent);
opacity: 1;
}
.jxc-carousel.splide .splide__arrow svg {
fill: var(--sunya-color-text-on-dark);
}
.jxc-carousel.splide .splide__arrow:hover,
.jxc-carousel.splide .splide__arrow:focus-visible {
opacity: 1;
background: var(--sunya-color-accent);
box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--sunya-color-surface-dark) 45%, transparent);
}
.jxc-carousel.splide .splide__arrow:hover svg,
.jxc-carousel.splide .splide__arrow:focus-visible svg {
fill: var(--sunya-color-accent-contrast);
}
.jxc-carousel.splide .splide__arrow:disabled {
opacity: .35;
}
/* 23.2 Fuoco. Il plugin lo mette su :focus (anche al clic): qui l'anello
segue il brand e compare solo da tastiera. */
.jxc-carousel.splide .splide__arrow:focus,
.jxc-carousel.splide .jxc-lightbox-link:focus {
outline: none;
}
.jxc-carousel.splide .splide__arrow:focus-visible,
.jxc-carousel.splide .jxc-lightbox-link:focus-visible {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 3px;
}
/* 23.3 Fascia galleria di fondo pagina. Aria come le altre fasce (5), a
peso zero; foto tutte 3:2 tagliate al centro (4:3 fino alla v1.10.0).
⚠️ Nel carosello lasciare "Altezza slide: Auto". Con "Aspect ratio"
Splide applica il rapporto alla LARGHEZZA DEL CAROSELLO, non alla slide:
misurato il 06/10 con 3 slide visibili su un carosello largo 1200px,
slide alte 900 (0,75 x 1200) con la foto alta 184 al centro. Da
segnalare al progetto jexy-carousel. Il taglio lo fa questa regola. */
:where(.wp-block-group.alignfull.lvg-gallery) {
padding-block: var(--sunya-spacing-3xl);
}
.lvg-gallery .jxc-carousel .jxc-slide-inner img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.lvg-gallery > .sunya-eyebrow,
.lvg-gallery > h2 {
text-align: center;
}
.lvg-gallery > h2 {
margin-bottom: var(--sunya-spacing-xl);
}
/* ==========================================================================
24. EVENTI - skin del plugin da-events (dadesign, >= 0.4.0), v1.17.0
Il plugin porta la struttura (griglia, rapporto 3:2, stati) e i token
--da-events-*; qui la veste: card come le schede corso della 14, chip
del filtro come le 12.5, pulsanti come la 11.6, riquadro della pagina
evento sulla nebbia come i dati sintetici della 13.6. Solo token.
NOTA del plugin: wp-plugins\_dev-tools\NOTA-2026-10-15-da-events-markup-
elenchi-per-sunya.md e ...-pagina-evento-per-sunya.md (classi fissate).
24.1 Token e griglia
24.2 Card (.da-events-card) e stati
24.3 Filtro In arrivo / Passati / Tutti e CTA dei passati
24.4 Riquadro della pagina evento (.da-events-details)
24.5 Responsive e movimento ridotto
24.6 Pagina evento su due colonne (single-da_event.php), fasi, Contattami
Specificita': il plugin scrive 0,1,0 / 0,2,0 (es. .da-events-filter__
button[aria-pressed="true"]) e il suo foglio puo' caricarsi DOPO questo.
Qui tutto parte da .da-events / .da-events-details (0,2,x e 0,3,x).
========================================================================== */
/* 24.1 Token e griglia. L'accent e il suo inchiostro sono quelli del brand:
ambra con testo petrolio (6.37), mai bianco sull'ambra (1.99). Il bordo
neutro del plugin diventa il ghiaccio. */
.da-events,
.da-events-details {
--da-events-gap: var(--sunya-spacing-lg);
--da-events-image-ratio: 3 / 2;
--da-events-accent: var(--sunya-color-accent);
--da-events-on-accent: var(--sunya-color-accent-contrast);
--da-events-border: var(--lvg-color-ice);
}
/* Tre colonne sopra i 1024 (come le fasce a 1200), due fino a 782, una
sotto: la griglia del plugin e' auto-fill su 16rem, qui si fissa il
minimo a 18rem perche' la foto 3:2 si legga. */
.da-events .da-events__list {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
/* Titoli dei gruppi del filtro (Eventi in arrivo / Eventi passati): senza il
filetto che la 11.1 mette sotto ogni h2 della pagina, e' un'intestazione
di griglia, non di capitolo. 0,2,0 batte .lvg-page h2 (0,1,1) e vale
anche fuori da .lvg-page (misurato: l'h2 restava a 41.6px). */
.da-events .da-events__group-title {
margin: 0 0 var(--sunya-spacing-md);
padding: 0;
border: 0;
font-size: 1.35rem;
}
.da-events .da-events__empty {
margin: 0;
color: var(--sunya-color-text);
}
/* 24.2 Card. Stessa forma della .lvg-card (14.5): nebbia, angoli, ombra
morbida al passaggio, foto a filo in alto. */
.da-events .da-events-card {
background: var(--lvg-color-mist);
border-radius: var(--sunya-radius-md);
overflow: hidden;
transition: transform var(--sunya-transition-base), box-shadow var(--sunya-transition-base);
}
.da-events .da-events-card:hover,
.da-events .da-events-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 36px -18px color-mix(in srgb, var(--sunya-color-surface-dark) 30%, transparent);
}
/* Anello di fuoco sulla card intera (qualunque link dentro riceva il fuoco),
al posto di quello del plugin sullo pseudo-elemento del titolo. */
.da-events .da-events-card:has(a:focus-visible) {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 3px;
}
.da-events .da-events-card a:focus-visible,
.da-events .da-events-card--single-link .da-events-card__link:focus-visible::after {
outline: none;
}
.da-events .da-events-card__image {
margin: 0;
}
.da-events .da-events-card__body {
gap: var(--sunya-spacing-xs);
padding: var(--sunya-spacing-lg) var(--sunya-spacing-lg) var(--sunya-spacing-sm);
}
/* Data: la riga che si legge per prima, come le etichette della 13.6. */
.da-events .da-events-card__date {
font-family: var(--sunya-font-heading);
font-size: .85rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--sunya-color-accent-ink);
}
.da-events .da-events-card__title {
margin: 0;
padding: 0;
border: 0;
font-size: 1.35rem;
line-height: 1.2;
}
/* 0,3,1: la 2.1 sottolinea ogni link del contenuto a 0,3,1 e vinceva sul
titolo (misurato in locale il 15/10). Qui la sottolineatura arriva al
passaggio sulla card, come nella 14.5. */
.da-events .da-events-card .da-events-card__title a {
color: inherit;
text-decoration-line: none;
}
.da-events .da-events-card:hover .da-events-card__title a {
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: .18em;
}
.da-events .da-events-card .da-events-card__place,
.da-events .da-events-card .da-events-card__meta {
margin: 0;
font-size: 1rem;
}
.da-events .da-events-card__type {
font-weight: 600;
}
/* Stato: pillola ambra con inchiostro petrolio. Eventi passati: contorno
ghiaccio e testo del sito ("Concluso" non chiama l'attenzione). */
.da-events .da-events-card__badge,
.da-events-details .da-events-details__badge {
margin: var(--sunya-spacing-xs) 0 0;
padding: .25em .8em;
border-radius: 999px;
background: var(--sunya-color-accent);
color: var(--sunya-color-accent-contrast);
font-family: var(--sunya-font-heading);
font-size: .85rem;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.4;
}
.da-events .da-events-card--past .da-events-card__badge {
border: 1px solid var(--lvg-color-ice);
background: transparent;
color: var(--sunya-color-text);
}
.da-events .da-events-card--past .da-events-card__img {
filter: grayscale(.5);
}
/* Piede: "Dettagli" come link di testo, "Prenota" come .lvg-btn--invert
(11.6): ambra piena, HOVER = INVERSIONE su petrolio. Senza pagine singole
il "Prenota" e' uno span decorativo con la stessa veste. */
.da-events .da-events-card__footer {
margin-top: auto;
padding: 0 var(--sunya-spacing-lg) var(--sunya-spacing-lg);
gap: var(--sunya-spacing-sm) var(--sunya-spacing-md);
}
.da-events .da-events-card__details {
font-weight: 700;
color: var(--sunya-color-accent-ink);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: .18em;
}
/* 0,3,1 per gli , stessa ragione: niente sottolineatura della 2.1 sui
pulsanti (oggi non si vede solo perche' inline-flex non la propaga). */
.da-events .da-events-card .da-events-card__cta,
.da-events-details .da-events-details__actions .da-events-details__cta,
.da-events .da-events-past-cta .da-events-past-cta__link {
text-decoration-line: none;
}
.da-events .da-events-card__cta,
.da-events-details .da-events-details__cta,
.da-events .da-events-past-cta__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 20px;
border: 1.5px solid var(--sunya-color-accent);
border-radius: var(--sunya-radius-md);
background: var(--sunya-color-accent);
color: var(--sunya-color-accent-contrast);
font-size: 1rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background var(--sunya-transition-fast),
color var(--sunya-transition-fast),
border-color var(--sunya-transition-fast),
box-shadow var(--sunya-transition-fast);
}
.da-events .da-events-card__cta:hover,
.da-events .da-events-card:hover .da-events-card__cta:not(.da-events-card__cta--disabled),
.da-events-details .da-events-details__cta:hover,
.da-events .da-events-past-cta__link:hover,
.da-events .da-events-card__cta:focus-visible,
.da-events-details .da-events-details__cta:focus-visible,
.da-events .da-events-past-cta__link:focus-visible {
background: var(--sunya-color-surface-dark);
border-color: var(--sunya-color-surface-dark);
color: var(--sunya-color-accent);
box-shadow: 0 4px 20px color-mix(in srgb, var(--sunya-color-accent) 35%, transparent);
}
.da-events-details .da-events-details__cta:focus-visible,
.da-events .da-events-past-cta__link:focus-visible {
outline: 2px solid var(--sunya-color-accent-ink);
outline-offset: 2px;
}
/* Completo / Annullato: pulsante spento, contorno ghiaccio, testo del sito. */
.da-events .da-events-card__cta--disabled,
.da-events .da-events-card:hover .da-events-card__cta--disabled,
.da-events-details .da-events-details__cta--disabled,
.da-events-details .da-events-details__cta--disabled:hover {
background: transparent;
border-color: var(--lvg-color-ice);
color: var(--sunya-color-text);
box-shadow: none;
cursor: default;
}
/* Il "Vedi gli eventi in arrivo" sotto i passati e' il .lvg-btn di contorno
(11.6), non l'ambra: non e' l'iscrizione. */
.da-events .da-events-past-cta__link {
background: transparent;
border-color: var(--sunya-color-accent-ink);
color: var(--sunya-color-accent-ink);
}
.da-events .da-events-past-cta__link:hover,
.da-events .da-events-past-cta__link:focus-visible {
background: var(--sunya-color-surface-dark);
border-color: var(--sunya-color-surface-dark);
color: var(--sunya-color-text-on-dark);
box-shadow: none;
}
/* 24.3 Filtro. Chip come le 12.5: nebbia e inchiostro, premuta = ambra e
petrolio. La riga sotto il testo che il plugin aggiunge alla premuta
(per i temi che colorano ogni