/* Scheda di un luogo da visitare — fase F5, ultimo pezzo. SCOPO Dare forma alla pagina piu importante del sito dopo la home senza toccare una riga di markup: single-luoghi_da_visitare.php e partials/loop-single-visitare.php restano come sono. Qui si scavalca solo il CSS. ORDINE DI CARICAMENTO library/joints.php riga 191 accoda questo foglio solo su is_singular( 'luoghi_da_visitare' ) e per ultimo, con dipendenza dichiarata da vc-tokens, style.css, vc-mobile.css e vc-nav.css. A parita di specificita vince l'ultima regola dichiarata: la tecnica di tutto il file e una sola, replicare la specificita esatta della regola da battere e arrivare dopo. In questo file non c'e nessun !important. I BREAKPOINT sono quelli di Foundation 5 gia in uso: small fino a 40em, medium da 40.063em, large da 64.063em. Le media query non accettano var(), quindi i valori sono scritti per esteso come in vc-grid.css, vc-mobile.css e vc-nav.css. NON SI TOCCANO .row, .columns, .large-*, .medium-*, .small-*: nessuna dichiarazione di questo foglio ha per bersaglio una di quelle classi. Dove compaiono in un selettore sono solo antenati usati per raggiungere altro, e l'unica proprieta che aggiungo a un elemento di griglia e verticale (padding e margine sopra e sotto), che in Foundation la griglia non governa. L'unica eccezione e dichiarata e vive dentro @media print, sezione 8. -------------------------------------------------------------------------- QUATTRO COSE DEL BRIEF CHE LA LETTURA DEI FILE HA SMENTITO. Stanno in cima cosi non sfuggono a nessuno; sono spiegate per esteso nella relazione. 1. GALLERIA, MAPPA E CORRELATI NON SONO DENTRO the_content(). Sono tre
stampati da single-luoghi_da_visitare.php DOPO (righe 55-91), ciascuno con una sola colonna large-12. Le prime due hanno un

scritto a mano nel template ("Galleria Fotografica", "Dove si trova"); la terza no, il titolo se lo porta il carosello. Percio i selettori della sezione 6 partono da #content e non da .entry-content. 2. L'IMMAGINE DI APERTURA STA PRIMA DEL TITOLO, non dentro il contenuto: the_post_thumbnail('large') e stampata in un
nudo alle righe 29-38, cioe prima di get_template_part della loop. In pagina l'ordine e immagine, poi

. Il "non deve incollarsi al titolo" vale quindi al contrario. 3. LA COLONNA LATERALE NON HA NESSUNA CLASSE PROPRIA. E
e le classi di griglia sono off limits. L'unico appiglio stabile e la sua adiacenza alla colonna del testo, che una classe ce l'ha: .entry-content + section. E la maniglia usata in tutto il file. 4. STICKY SULLA COLONNA SI PUO FARE, contrariamente al dubbio del brief. Il genitore e si un .row con due float, ma vc-grid.css gli da il clearfix con ::before e ::after (righe 62-70): la riga contiene i float e la sua altezza e quella della colonna piu alta, cioe del testo lungo. La corsa disponibile c'e tutta. Verificate anche le due condizioni che di solito uccidono sticky: nessun antenato ha overflow diverso da visible (cercato in style.css, vc-grid.css e vc-foundation-core.css), e .off-canvas-wrap usa apposta overflow-x: clip, che ritaglia senza creare un contenitore di scorrimento (vc-nav.css sezione 6). Dettagli e riserve nella sezione 5. -------------------------------------------------------------------------- */ /* =============================================================== 0. Variabili locali Stanno qui e non in vc-tokens.css perche questa fase tocca un file solo. Ogni valore poggia su un token dove il token esiste, e ogni var() porta con se il proprio ripiego, qui e in ogni punto d'uso. PERCHE DUE LIVELLI DI OMBRA E DUE RAGGI, ed e il cuore della sezione 6. Oggi i tre blocchi sotto l'articolo usano numeri tutti diversi e nessuno uguale a un altro: raggio 6px sulle miniature, 10px sulle schede correlate e sull'iframe della mappa, ombra assente sulla galleria, 0 8px 18px sulle schede, 0 14px 35px su .vc-map-canvas. Qui i valori diventano due soli, uno per le superfici grandi e uno per le piccole, e i tre blocchi cominciano a parlarsi. I numeri scelti sono quelli gia usati dalle schede correlate: e la parte che oggi si vede meglio, quindi e lei a dettare il resto. =============================================================== */ :root { /* Superfici */ --vc-scheda-fondo: #f4f7f9; --vc-scheda-linea: rgba(17, 39, 61, 0.12); --vc-scheda-linea-forte: rgba(17, 39, 61, 0.2); /* Testo. Il blu profondo per i titoli, il blu del brand per le intestazioni di sezione, l'ardesia per le etichette secondarie. Misurati sul fondo della scheda, che e appena piu scuro del bianco: #11273d 15.2:1, #374a66 8.3:1, #5e6b76 5.1:1. Tutti sopra il 4.5:1 del criterio 1.4.3, il piu tenue con margine sufficiente anche a corpo piccolo. */ --vc-scheda-testo-forte: var(--vc-colore-blu-scuro, #11273d); --vc-scheda-testo: var(--vc-colore-blu, #374a66); --vc-scheda-testo-tenue: var(--vc-colore-ardesia, #5e6b76); /* Accento e messa a fuoco. #007095 su fondo chiaro da 5.2:1, sopra il 3:1 che il criterio 1.4.11 chiede a un elemento grafico; l'ambra e per le sole superfici scure (il lightbox), dove il blu acceso sparirebbe. E la stessa coppia, e per lo stesso motivo, di vc-nav.css. */ --vc-scheda-accento: var(--vc-colore-blu-acceso, #007095); --vc-scheda-accento-scuro: var(--vc-colore-ambra, #f39207); /* Forme condivise dai tre blocchi sotto l'articolo */ --vc-scheda-raggio: 10px; --vc-scheda-raggio-piccolo: var(--vc-raggio-2, 6px); --vc-scheda-ombra: 0 8px 18px rgba(18, 40, 63, 0.08); --vc-scheda-ombra-piccola: 0 2px 6px rgba(18, 40, 63, 0.1); /* Distanza verticale fra un blocco e il successivo. Un valore solo, usato tre volte: e cio che rende i tre blocchi una sequenza invece di tre isole. */ --vc-scheda-stacco: var(--vc-spazio-8, 3.75rem); } /* =============================================================== 1. Apertura: immagine di testata e titolo L'ordine reale in pagina e immagine, titolo, testo (vedi il punto 2 del cappello). L'immagine e un dentro un
senza classe, primo figlio di #main: la raggiungo per posizione, che qui e stabile perche quel
e scritto a mano nel template e non generato. =============================================================== */ /* L'immagine NON viene stirata a tutta colonna. the_post_thumbnail('large') serve al massimo 1024px di larghezza, mentre su schermo grande la colonna ne misura circa 1262: un width: 100% la ingrandirebbe di quasi un quarto, cioe la sfocherebbe. Centrata resta nitida, e il vuoto ai lati si legge come margine e non come errore. */ #main > div:first-child { margin-bottom: var(--vc-spazio-6, 2.8125rem); } #main > div:first-child img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--vc-scheda-raggio, 10px); box-shadow: var(--vc-scheda-ombra, 0 8px 18px rgba(18, 40, 63, 0.08)); } /* La testata dell'articolo. Il titolo aveva zero aria intorno e nessuna separazione dal testo che segue. La riga sottile sotto il titolo fa due cose insieme: chiude l'intestazione e apre il corpo, senza aggiungere colore ne peso. Il padding-bottom sta sul
e non sul

perche la riga deve arrivare a tutta larghezza dell'articolo, non alla larghezza del titolo. */ .article-header { margin: 0 0 var(--vc-spazio-4, 1.875rem); padding-bottom: var(--vc-spazio-3, 1.40625rem); border-bottom: 1px solid var(--vc-scheda-linea, rgba(17, 39, 61, 0.12)); } /* Il corpo del titolo NON viene ridichiarato: vc-mobile.css da a h1 la scala fluida --vc-h1-fluido (34px a 320px di finestra, 44px da 641px in su) e riscriverla qui vorrebbe dire o ripeterla, o contraddirla. Si toccano solo le proprieta che quella scala non governa. line-height 1.15 invece dell'1.4 di Foundation: a 44px, 1.4 lascia fra due righe di titolo lo stesso vuoto che c'e fra due paragrafi, e un nome lungo si legge come due frasi separate. Sotto 1.1 le maiuscole accentate toccherebbero la riga sopra, quindi 1.15 e il minimo prudente. */ .entry-title.single-title { margin: 0; color: var(--vc-scheda-testo-forte, #11273d); line-height: 1.15; } /* =============================================================== 2. Il corpo del testo ATTENZIONE, e il limite dichiarato di questa fase. Orari e giorni di chiusura sono testo libero scritto a mano dentro il contenuto, in grassetto dentro un paragrafo qualsiasi: non sono campi strutturati e nessun selettore li puo isolare in modo affidabile. Qualunque p:nth-child() o aggancio a costruirebbe un riquadro finto che si rompe al primo articolo scritto in modo diverso. Qui non c'e nessun tentativo del genere: la proposta onesta sta nella relazione, non nel foglio. La lunghezza di riga e l'interlinea dei paragrafi le fissa gia vc-mobile.css (70ch e 1.7 sui figli diretti di .entry-content nelle .single): non sono ripetute e non sono contraddette. =============================================================== */ /* I link dentro il testo si distinguono SOLO per colore, e non basta. vc-foundation-core.css da ad "a" text-decoration: none e style.css li porta a #003882. Il contrasto fra quel blu e il nero del testo e circa 1.6:1, sotto il 3:1 che il criterio 1.4.1 chiede quando il colore e l'unico segnale: chi non distingue quel blu dal nero non vede che c'e un link. La sottolineatura e limitata ai link dentro paragrafi ed elenchi del contenuto: schede, pulsanti e navigazione non sono toccati. */ .entry-content p a, .entry-content li a { text-decoration: underline; text-underline-offset: 0.15em; } /* Il grassetto del testo pratico. Non costruisce nessun riquadro e non assume niente sul contenuto: cambia solo il colore di cio che l'autore ha gia scelto di mettere in evidenza, cosi "Orari:" e "Giorni di chiusura:" si trovano scorrendo la pagina con l'occhio. Se un domani il grassetto verra usato per altro, il peggio che succede e che anche quello sara blu scuro. */ .entry-content strong, .entry-content b { color: var(--vc-scheda-testo-forte, #11273d); } /* Il piede dell'articolo. the_tags() non stampa nulla quando il post non ha tag, ma il

resta comunque nel markup e lascia uno spazio vuoto sotto il testo. :empty lo riconosce con certezza, perche in quel caso il paragrafo e davvero privo di figli e di testo. */ .article-footer .tags:empty { display: none; } .article-footer .tags { margin: var(--vc-spazio-4, 1.875rem) 0 0; color: var(--vc-scheda-testo-tenue, #5e6b76); font-size: 0.875rem; } /* =============================================================== 3. La colonna laterale come scheda dei servizi Oggi non e una colonna: e un elenco di cose messe una sotto l'altra. Due

nudi, una tendina di sistema e cinque lettori audio grezzi. Su una scheda in cinque lingue con l'audioguida e la parte che il visitatore usa davvero, quindi diventa un blocco unico e riconoscibile. LA MANIGLIA. Il
non ha classi proprie e quelle di griglia sono off limits, quindi l'appiglio e .entry-content + section: specificita (0,1,1), piu che sufficiente contro tutto cio che c'e da battere, e stabile finche le due colonne restano in quest'ordine nel partial. Se un domani vengono invertite, questa sezione smette di applicarsi in blocco e non a meta: e il rischio dichiarato del foglio. PADDING SOLO VERTICALE. Il padding orizzontale della colonna resta quello della griglia (0.9375rem per lato) e non viene sfiorato. Dentro la sezione ci sono altri due
annidati che aggiungono i propri 0.9375rem: il testo risulta percio rientrato di 30px dal bordo della scheda, che su una colonna da circa 400px e un margine giusto, non un difetto. E la ragione per non azzerarli: toccarli sarebbe stato toccare la griglia per guadagnare niente. =============================================================== */ .entry-content + section { padding-top: var(--vc-spazio-4, 1.875rem); padding-bottom: var(--vc-spazio-4, 1.875rem); background: var(--vc-scheda-fondo, #f4f7f9); border: 1px solid var(--vc-scheda-linea, rgba(17, 39, 61, 0.12)); border-radius: var(--vc-scheda-raggio, 10px); color: var(--vc-scheda-testo-forte, #11273d); } /* Su telefono la colonna si impila sotto il testo e il margine superiore e l'unica cosa che le impedisce di sembrare la coda dell'articolo. Su medium e large le due colonne sono affiancate e lo stesso margine la farebbe partire piu in basso del testo: percio sta solo qui. */ @media only screen and (max-width: 40em) { .entry-content + section { margin-top: var(--vc-spazio-6, 2.8125rem); } } /* --------------------------------------------------------------- 3.1 Le due intestazioni interne Sono

senza classe, quindi il selettore deve passare per la colonna. Da titoli vaganti diventano etichette di sezione: corpo piccolo, maiuscolo spaziato, peso medio e una riga sottile sotto. Il maiuscolo e sostenibile perche le due parole sono corte e fisse ("Language", "Audioguide"): su un testo lungo sarebbe illeggibile. Specificita (0,1,2) contro la (0,0,1) di "h3" in vc-mobile.css e la (0,1,0) di "h3, .h3" in style.css: la scala fluida dei titoli non si applica qui, ed e voluto, un'etichetta di colonna non e un titolo di sezione. --------------------------------------------------------------- */ .entry-content + section h3 { margin: var(--vc-spazio-4, 1.875rem) 0 var(--vc-spazio-2, 0.9375rem); padding-bottom: 0.4rem; border-bottom: 1px solid var(--vc-scheda-linea, rgba(17, 39, 61, 0.12)); color: var(--vc-scheda-testo, #374a66); font-size: 0.8125rem; font-weight: var(--vc-peso-medio, 600); line-height: var(--vc-interlinea-stretta, 1.25); letter-spacing: 0.09em; text-transform: uppercase; } /* La prima intestazione non ha niente sopra di se dentro la scheda: il suo margine superiore lo fa gia il padding della sezione. */ .entry-content + section > div:first-child > h3:first-child { margin-top: 0; } /* --------------------------------------------------------------- 3.2 La tendina della lingua E un da confondere. COSA C'ERA DA BATTERE, tutto in vc-foundation-core.css riga 538: altezza fissa 2.3125rem (37px, sotto il bersaglio tattile), corpo 0.875rem (su iOS, sotto i 16px, il browser ingrandisce la pagina al primo tocco), famiglia Helvetica invece di quella del sito, una freccina base64 appiccicata al bordo destro e margin-bottom 1rem. height: auto piu min-height, e non la sola min-height: min-height vince su height, ma azzerare l'altezza dichiarata e la strada che non lascia dubbi. -webkit-appearance: none e dichiarato con !important da Foundation e non lo posso togliere: per fortuna e esattamente cio che serve. Aggiungo le altre due forme della proprieta perche su Firefox la freccia di sistema resterebbe accanto alla mia. --------------------------------------------------------------- */ .entry-content + section select { -moz-appearance: none; appearance: none; box-sizing: border-box; display: block; width: 100%; height: auto; min-height: var(--vc-tocco-minimo, 44px); margin: 0 0 var(--vc-spazio-2, 0.9375rem); padding: 0.5rem 2.4rem 0.5rem 0.75rem; border: 1px solid var(--vc-scheda-testo-tenue, #5e6b76); border-radius: var(--vc-scheda-raggio-piccolo, 6px); background-color: var(--vc-colore-sfondo, #ffffff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2311273d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 0.85rem center; background-repeat: no-repeat; background-size: 12px 8px; color: var(--vc-scheda-testo-forte, #11273d); font-family: inherit; font-size: 1rem; line-height: var(--vc-interlinea-stretta, 1.25); cursor: pointer; transition: border-color 160ms ease; } /* Foundation schiarisce il fondo e scurisce il bordo al passaggio del mouse (select:hover, riga 557). Sostituito: il fondo resta bianco, si scurisce solo il bordo, che e il segnale utile. */ .entry-content + section select:hover { background-color: var(--vc-colore-sfondo, #ffffff); border-color: var(--vc-scheda-testo-forte, #11273d); } .entry-content + section select:focus-visible { outline: 2px solid var(--vc-scheda-accento, #007095); outline-offset: 2px; } /* --------------------------------------------------------------- 3.3 L'elenco di lingue, cioe cosa si vede se il e nasconde l'elenco con uno style inline. Senza JavaScript, o se lo script fallisce, resta l'elenco: cinque link con bandiera. Non e un caso teorico, e lo stato iniziale di ogni caricamento. Non serve nascondere niente a mano: lo style inline del plugin vince su qualunque regola di questo foglio, quindi le due presentazioni non si sovrappongono mai. ul e li vanno ripuliti perche vc-foundation-core.css da agli elenchi margin-left 1.1rem, margin-bottom 1.25rem e i pallini. --------------------------------------------------------------- */ .entry-content + section .qtranxs_language_chooser { list-style: none; margin: 0 0 var(--vc-spazio-2, 0.9375rem); padding: 0; } .entry-content + section .qtranxs_language_chooser li { margin: 0 0 4px; } .entry-content + section .qtranxs_language_chooser a { display: flex; align-items: center; gap: 0.5rem; min-height: var(--vc-tocco-minimo, 44px); padding: 0.4rem 0.75rem; border: 1px solid var(--vc-scheda-linea, rgba(17, 39, 61, 0.12)); border-radius: var(--vc-scheda-raggio-piccolo, 6px); background: var(--vc-colore-sfondo, #ffffff); color: var(--vc-scheda-testo, #374a66); font-size: 1rem; line-height: var(--vc-interlinea-stretta, 1.25); text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; } .entry-content + section .qtranxs_language_chooser a:hover { border-color: var(--vc-scheda-linea-forte, rgba(17, 39, 61, 0.2)); background: var(--vc-scheda-fondo, #f4f7f9); color: var(--vc-scheda-testo-forte, #11273d); } /* La lingua corrente. Il segnale non e solo il colore: c'e la barretta a sinistra e il peso maggiore, cosi resta leggibile anche in bianco e nero. */ .entry-content + section .qtranxs_language_chooser li.active > a { border-color: var(--vc-scheda-accento, #007095); box-shadow: inset 3px 0 0 var(--vc-scheda-accento, #007095); color: var(--vc-scheda-testo-forte, #11273d); font-weight: var(--vc-peso-medio, 600); } /* Le bandiere sono da 16px senza attributi di dimensione: vincolarle evita che un file sbagliato o la cache di un plugin le faccia diventare alte quanto la riga. Stessa misura e stesso motivo di vc-nav.css sezione 2.4. */ .entry-content + section .qtranxs_language_chooser a img { flex: 0 0 auto; width: 18px; height: auto; border-radius: var(--vc-raggio-1, 3px); } /* --------------------------------------------------------------- 3.4 I lettori audio Cinque