/*
Theme Name: Pizzeria Arcobaleno
Theme URI: https://arcobalenopadova.dlook.dev
Description: Tema della demo per la Pizzeria Arcobaleno di Padova. Derivato dal tema di Terra del Mezzo. Figlio di Twenty Twenty-Five: palette chiara e calda, titoli in Platypi, nessuna dipendenza da page builder. Include il tipo di contenuto "Piatto" per un menu gestibile dalla cucina.
Author: homelab
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: arc
*/
/* Il grosso dello stile sta in theme.json. Qui solo cio' che theme.json non
sa esprimere: la griglia del menu, l'effetto sulle foto, i dettagli. */
/* --- Menu ---------------------------------------------------------------- */
/* --- Filtri rapidi -------------------------------------------------------- */
/* Nasce hidden e lo mostra il JS: senza JavaScript il menu resta completo
e la barra non compare, invece di restare lì inerte. */
.arc-filtri {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
padding-bottom: 1.5rem;
margin-bottom: .5rem;
border-bottom: 1px solid var(--wp--preset--color--accent-5);
}
.arc-filtri[hidden] { display: none; }
.arc-filtri__etichetta {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--wp--preset--color--accent-4);
margin-right: .3rem;
}
.arc-filtro {
cursor: pointer;
font: inherit;
font-size: .88rem;
padding: .35rem .9rem;
border: 1px solid var(--wp--preset--color--accent-5);
border-radius: 999px;
background: transparent;
color: var(--wp--preset--color--contrast);
transition: background-color .15s ease, border-color .15s ease;
}
.arc-filtro:hover { border-color: var(--wp--preset--color--accent-1); }
.arc-filtro.is-attivo {
background: var(--wp--preset--color--contrast);
border-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.arc-filtro:focus-visible {
outline: 2px solid var(--wp--preset--color--accent-1);
outline-offset: 2px;
}
.arc-filtri__vuoto {
flex: 1 0 100%;
margin: .8rem 0 0;
color: var(--wp--preset--color--accent-4);
}
/* --- Menu ----------------------------------------------------------------- */
.arc-menu__sezione[hidden],
.arc-menu__corso[hidden],
.arc-menu__piatto[hidden] { display: none; }
.arc-menu__corso { margin-block: var(--wp--preset--spacing--60) 0; }
.arc-menu__corso-titolo {
font-family: var(--wp--preset--font-family--platypi);
font-size: var(--wp--preset--font-size--x-large);
color: var(--wp--preset--color--accent-1);
margin: 0 0 .35rem;
}
.arc-menu__corso-nota {
margin: 0 0 1.75rem;
color: var(--wp--preset--color--accent-4);
font-size: .95rem;
}
.arc-menu__lista {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.5rem;
}
@media (min-width: 900px) {
.arc-menu__lista { grid-template-columns: 1fr 1fr; gap: 1.5rem 3.5rem; }
}
/* Tre colonne: foto (se c'è), testo, prezzo. Il prezzo resta in alto a
destra anche quando la descrizione va a capo. */
.arc-menu__piatto {
display: grid;
grid-template-columns: 1fr auto;
gap: 0 1rem;
align-items: start;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--wp--preset--color--accent-5);
}
.arc-menu__piatto--con-foto {
grid-template-columns: 72px 1fr auto;
}
.arc-menu__foto {
grid-row: span 1;
width: 72px;
height: 72px;
border-radius: 8px;
overflow: hidden;
background: var(--wp--preset--color--accent-3);
}
.arc-menu__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.arc-menu__nome {
font-weight: 600;
font-size: 1.05rem;
margin: 0;
}
/* Nome tradotto: deve leggersi come una glossa del nome sopra, non come una
seconda riga di pari peso. Corsivo e corpo ridotto, sopra la descrizione. */
.arc-menu__nome-tradotto {
margin: .1rem 0 0;
font-style: italic;
font-size: .88rem;
color: var(--wp--preset--color--accent-4);
line-height: 1.4;
}
.arc-menu__prezzo {
font-family: var(--wp--preset--font-family--platypi);
font-size: 1.05rem;
color: var(--wp--preset--color--accent-1);
white-space: nowrap;
}
.arc-menu__desc {
margin: .3rem 0 0;
color: var(--wp--preset--color--accent-4);
font-size: .95rem;
line-height: 1.5;
}
.arc-menu__allergeni {
margin: .45rem 0 0;
font-size: .8rem;
color: var(--wp--preset--color--accent-4);
}
.arc-menu__allergeni abbr {
text-transform: uppercase;
letter-spacing: .08em;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.arc-menu__tag {
display: inline-block;
margin-left: .45rem;
padding: .1rem .5rem;
border: 1px solid var(--wp--preset--color--accent-5);
border-radius: 999px;
font-size: .68rem;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--wp--preset--color--accent-4);
vertical-align: middle;
white-space: nowrap;
}
/* Le etichette alimentari si distinguono dalle segnalazioni editoriali:
servono a scegliere, non a incuriosire. */
.arc-menu__tag--dieta {
border-color: var(--wp--preset--color--accent-2);
color: var(--wp--preset--color--accent-2);
}
.arc-menu__vuoto {
padding: 2rem;
border: 1px dashed var(--wp--preset--color--accent-5);
border-radius: 8px;
color: var(--wp--preset--color--accent-4);
}
/* --- Orari ----------------------------------------------------------------- */
.arc-orari__riga {
display: flex;
justify-content: space-between;
gap: 1.5rem;
padding: .45rem 0;
border-bottom: 1px solid var(--wp--preset--color--accent-5);
}
.arc-orari__riga:last-child { border-bottom: 0; }
.arc-orari__giorni { font-weight: 600; }
.arc-orari__ore {
text-align: right;
color: var(--wp--preset--color--accent-4);
}
.arc-orari__fascia { display: block; white-space: nowrap; }
.arc-orari__chiuso { font-style: italic; opacity: .75; }
.arc-orari__nota {
margin: .8rem 0 0;
font-size: .9rem;
color: var(--wp--preset--color--accent-4);
}
/* --- Foto ----------------------------------------------------------------- */
/* Zoom lento all'hover: dà vita alla griglia senza animazioni appariscenti.
Disattivato per chi ha chiesto meno movimento. */
.arc-foto img {
transition: transform .6s ease;
will-change: transform;
}
.arc-foto:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.arc-foto img { transition: none; }
.arc-foto:hover img { transform: none; }
}
.arc-foto {
overflow: hidden;
border-radius: 10px;
}
/* --- Dettagli ------------------------------------------------------------- */
/* Occhiello sopra i titoli di sezione */
.arc-occhiello {
text-transform: uppercase;
letter-spacing: .16em;
font-size: .78rem;
font-weight: 600;
color: var(--wp--preset--color--accent-1);
margin-bottom: .4rem;
}
/* Riga di informazioni pratiche (orari, telefono) */
.arc-info {
border-top: 1px solid var(--wp--preset--color--accent-5);
border-bottom: 1px solid var(--wp--preset--color--accent-5);
}
.wp-block-site-title a { text-decoration: none; }
/* Il logo e' su fondo scuro nell'originale: su fondo chiaro va bene cosi',
ma un filo di respiro attorno aiuta. */
.wp-block-site-logo img { display: block; }
/* Titolo di sezione del menu (Cucina, Bevande): scandisce le due metà
della pagina senza competere con i titoli delle portate. */
.arc-menu__sezione + .arc-menu__sezione {
margin-top: var(--wp--preset--spacing--80);
}
.arc-menu__sezione-titolo {
font-family: var(--wp--preset--font-family--platypi);
font-size: var(--wp--preset--font-size--xx-large);
margin: 0;
padding-bottom: .6rem;
border-bottom: 2px solid var(--wp--preset--color--contrast);
}
/* Avviso in cima al menu: informativo, non allarmante. */
.arc-avviso {
padding: .9rem 1.1rem;
margin-bottom: var(--wp--preset--spacing--50);
border-left: 3px solid var(--wp--preset--color--accent-1);
background: var(--wp--preset--color--accent-3);
border-radius: 0 8px 8px 0;
font-size: .95rem;
}
/* Separa i filtri alimentari (come mangi) dalle segnalazioni (cosa ti
consigliamo): sono due domande diverse. */
.arc-filtri__sep {
width: 1px;
align-self: stretch;
min-height: 1.6rem;
background: var(--wp--preset--color--accent-5);
margin-inline: .35rem;
}
/* --- Icone delle etichette ------------------------------------------------- */
/* Ereditano colore e dimensione dal testo accanto: un'unica definizione
copre etichette marroni, segnalazioni grigie e bottoni dei filtri. */
.arc-icona {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
vertical-align: -0.16em;
margin-right: .3em;
}
/* Le pillole diventano flex per allineare icona e testo sulla linea di base
ottica invece che su quella tipografica. */
.arc-menu__tag {
display: inline-flex;
align-items: center;
}
.arc-filtro {
display: inline-flex;
align-items: center;
}
/* Su schermi stretti si stringe la spaziatura, ma il testo resta: le icone
sono un aiuto alla lettura, non un sostituto. "Senza glutine" e "senza
lattosio" sono entrambe forme barrate e a 15px si confonderebbero. */
@media (max-width: 520px) {
.arc-menu__tag { padding-inline: .4rem; margin-left: .3rem; }
.arc-icona { margin-right: .22em; }
}
/* --- Icone su telefono e WhatsApp ------------------------------------------ */
/*
* Applicate via CSS e non nel markup: questi link stanno sia nelle pagine sia
* nel footer, che e' un template part e non passa dai filtri sul contenuto.
* Con la regola valgono anche per i link aggiunti in futuro.
*
* mask-image e non background-image: la sagoma prende `currentColor`, quindi
* resta leggibile sia sul pulsante scuro sia nel testo del footer.
*/
.wp-site-blocks a[href^="tel:"]::before,
.wp-site-blocks a[href*="wa.me"]::before {
content: "";
display: inline-block;
width: 1.05em;
height: 1.05em;
margin-right: .4em;
vertical-align: -0.16em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.wp-site-blocks a[href^="tel:"]::before {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.wp-site-blocks a[href*="wa.me"]::before {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Il pulsante e' gia' flex: l'icona va allineata al testo, non messa in linea */
.wp-block-button__link[href^="tel:"],
.wp-block-button__link[href*="wa.me"] {
display: inline-flex;
align-items: center;
}
/* --- Menu a schermo intero (mobile) ---------------------------------------- */
/*
* L'overlay del blocco navigazione nasce senza padding: le voci finivano
* incollate al bordo destro dello schermo.
*
* ⚠ Il selettore ha il prefisso `body`. Le regole del blocco core arrivano
* DOPO il foglio del tema, quindi a parita' di specificita' (due classi)
* vincevano loro e il padding restava 0: il pulsante di chiusura si spostava
* e le voci no.
*/
body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
padding-inline: clamp(1.25rem, 5vw, 3rem);
padding-top: 3.5rem;
}
/* Il pulsante di chiusura e' posizionato sul contenitore, non sul contenuto:
va allineato a mano allo stesso gutter. */
body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
top: 1.25rem;
right: clamp(1.25rem, 5vw, 3rem);
}
/* A schermo intero lo spazio c'e': voci piu' arieggiate. */
body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
gap: 1.1rem;
}
/* --- Pagina corrente nel menu ---------------------------------------------- */
/*
* WordPress mette gia' `current-menu-item` sulla voce e `aria-current="page"`
* sul link: qui serve solo lo stile, e chi usa uno screen reader la sente
* annunciata comunque.
*
* Pillola a colori invertiti, non solo grassetto: il grassetto su un menu di
* tre voci corte si nota poco, e in Manrope la differenza fra 500 e 700 a
* 15px e' minima. Il fondo pieno si vede al primo sguardo.
*
* ⚠ Prefisso `body`: le regole del blocco core arrivano dopo il foglio del
* tema e a parita' di specificita' vincono loro, colore compreso.
*/
body .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
body .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover,
body .wp-block-navigation-item[aria-current="page"] > .wp-block-navigation-item__content {
background: var(--wp--preset--color--accent-1);
color: var(--wp--preset--color--base);
padding: .3rem .75rem;
border-radius: 999px;
text-decoration: none;
}
/* Nel pannello a tutto schermo le voci sono grandi e distanziate: la pillola
va allargata di conseguenza, altrimenti stringe il testo. */
body .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
padding: .35rem 1rem;
}
/* --- Selettore di lingua --------------------------------------------------- */
/* Codici e non bandiere: una bandiera indica un paese, non una lingua, e
l'inglese non e' solo del Regno Unito. */
.arc-lingue {
display: inline-flex;
align-items: center;
gap: .1rem;
font-size: .78rem;
font-weight: 600;
letter-spacing: .06em;
}
.arc-lingue__voce {
padding: .25rem .5rem;
border-radius: 999px;
text-decoration: none;
color: var(--wp--preset--color--accent-4);
}
.arc-lingue__voce:hover { color: var(--wp--preset--color--contrast); }
.arc-lingue__voce.is-attiva {
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--contrast);
}
/* Avviso per chi vede il menu WordPress mentre i visitatori vanno a
leggimenu (inc-menu-esterno.php). Solo per utenti loggati. */
.arc-anteprima {
background: var(--wp--preset--color--contrast, #241E18);
color: var(--wp--preset--color--base, #FDFAF5);
font-size: 14px;
line-height: 1.5;
padding: 10px 20px;
text-align: center;
}
.arc-anteprima a { color: inherit; text-decoration: underline; }
/* Avviso "la pizzeria adesso e' chiusa" (inc-orari.php): piu' in evidenza
dell'avviso allergeni, e' un'informazione che cambia la decisione. */
.arc-avviso--orario {
font-weight: 600;
margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
}
.arc-avviso[hidden] { display: none; }
/* --- Marchio e fascia arcobaleno ----------------------------------------------
Il locale non ha un logo pubblicato (sulla pagina Facebook ci sono solo gli
sfondi dei post testuali): il nome si scrive in Platypi e la firma visiva e'
una fascia arcobaleno sottile in cima alla pagina e sotto il nome. Colori
pieni, niente sfumatura: a 4px una sfumatura diventa un grigio sporco. */
:root {
--arc-arcobaleno: linear-gradient(90deg,
#B3301B 0 14.28%, #D9672A 0 28.57%, #E3A92E 0 42.85%, #2F6B3A 0 57.14%,
#2C6E8F 0 71.42%, #3F4A92 0 85.71%, #7A3F86 0);
}
body::before {
content: "";
display: block;
height: 4px;
background: var(--arc-arcobaleno);
}
.arc-marchio {
margin: 0;
font-family: var(--wp--preset--font-family--platypi);
font-size: 1.45rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
}
.arc-marchio a {
color: var(--wp--preset--color--contrast);
text-decoration: none;
background: var(--arc-arcobaleno) left bottom / 100% 3px no-repeat;
padding-bottom: 5px;
}
.arc-marchio a:hover,
.arc-marchio a:focus-visible {
color: var(--wp--preset--color--accent-1);
}
/* --- Home ---------------------------------------------------------------------
Tre pizze vere (foto del locale, da Glovo) ritagliate quadrate: stesse
proporzioni a ogni larghezza, nessuna riga piu' alta delle altre. */
.arc-hero {
padding-top: var(--wp--preset--spacing--50);
}
.arc-hero h1 {
margin-top: .25rem;
}
.arc-foto-pizze {
margin-top: var(--wp--preset--spacing--50);
gap: var(--wp--preset--spacing--30);
}
.arc-foto-pizze .wp-block-image {
margin: 0;
}
.arc-foto-pizze img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 6px;
display: block;
}
.arc-foto-pizze figcaption {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--accent-4);
text-align: left;
margin-top: .4rem;
}
/* su telefono restano in fila: tre colonne strette si leggono meglio di tre
foto impilate che spingono il menu tre schermate piu' in basso */
@media (max-width: 781px) {
.arc-foto-pizze.wp-block-columns {
flex-wrap: nowrap !important;
}
.arc-foto-pizze .wp-block-column {
flex-basis: 0 !important;
}
}
/* --- Indice delle categorie (arc_menu_indice) ---------------------------------
Pillole che vanno a capo, non una riga a scorrimento orizzontale: sei voci
stanno in due righe a 390px e si vedono tutte senza indovinare che si scorre. */
.arc-menu__indice ul {
list-style: none;
margin: 0 0 var(--wp--preset--spacing--40);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.arc-menu__indice a {
display: inline-block;
padding: .35rem .85rem;
border: 1px solid var(--wp--preset--color--accent-5);
border-radius: 999px;
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--contrast);
font-size: var(--wp--preset--font-size--small);
text-decoration: none;
}
.arc-menu__indice a:hover,
.arc-menu__indice a:focus-visible {
border-color: var(--wp--preset--color--accent-1);
color: var(--wp--preset--color--accent-1);
}
/* l'header e' sticky: senza margine l'ancora finirebbe sotto */
.arc-menu__corso[id] {
scroll-margin-top: 6rem;
}