/* * Questo è l'header obbligatorio che WordPress legge per riconoscere il tema. * "Template: nextawards" è il campo critico: dice a WP qual è il tema padre. * Deve corrispondere ESATTAMENTE allo slug (nome cartella) del parent. */ /* Theme Name: Ristorante Starter Child Theme URI: https://salvodmt.com Description: Child theme di NextAwards — starter pack riutilizzabile per siti ristorante/bistrò. Vedi ristorante-template.md nella root del repo per la spec completa. Author: Salvo Dimitri Author URI: https://salvodmt.com Template: nextawards Version: 0.38.0 Text Domain: ristorante-child Domain Path: /languages */ /* * PER UN NUOVO PROGETTO CLIENTE: * 1. Duplica l'intera cartella themes/ristorante-child/ e rinominala (es. themes/eehgia-bistro-child/). * 2. Aggiorna "Theme Name" e "Text Domain" qui sopra con lo slug della nuova cartella. * 3. I COLORI NON SI CAMBIANO QUI: si impostano da Aspetto → Personalizza, oppure * modificando i default in inc/branding.php se si vuole la palette versionata in git. * Vedi il blocco :root sotto per il perché. * 4. I contenuti (piatti, FAQ, recensioni, opzioni locale) si configurano da wp-admin. */ /* * Tutte le variabili CSS del sito vivono qui, su :root (= elemento ). * Nessun valore viene scritto direttamente nei selettori — si usa sempre var(--nome). */ :root { /* COLORI — alias dei preset del tema padre, NON valori indipendenti. * * NextAwards genera --wp--preset--color--* dai theme_mod del Customizer * (vendor/nextawards/functions.php:477-485), e sono quei preset che usano * le sezioni statiche del pattern homepage. Se qui riscrivessimo dei colori * fissi avremmo due palette scollegate: hero e CTA di un colore, menu, FAQ * e form di prenotazione di un altro. Puntando ai preset, tutta la pagina * segue una sorgente sola. * * I default della palette (verde/salvia/oro/crema) vivono in inc/branding.php. * Il fallback dopo la virgola serve solo se il tema padre non è attivo. * * primary = colore dominante (bottoni, link, header) * secondary = colore di supporto (hover, badge) * accent = dettagli e highlights * bg = sfondo principale della pagina * surface = sfondo di card, modal, sezioni sovrapposte * text = testo principale * text-muted= testo secondario, didascalie, placeholder * border = bordi e divisori */ --color-primary: var(--wp--preset--color--link-color, #2f4538); --color-secondary: var(--wp--preset--color--medium-gray, #8a9a8e); --color-accent: var(--wp--preset--color--secondary-color, #c9a86a); --color-bg: var(--wp--preset--color--light-gray, #faf8f4); --color-surface: #ffffff; --color-text: var(--wp--preset--color--dark-gray, #1a1a1a); /* text-muted: 6.0:1 sullo sfondo crema, 5.0:1 sul grigio #e4e4e4 di fabbrica del parent. Era #6b6b6b, che sul crema passava (5.0:1) ma sul grigio scendeva a 4.19:1 e falliva AA sulle descrizioni dei piatti. Il valore va tenuto buono per ENTRAMBI: lo sfondo lo decide il Customizer del cliente, non questo foglio. */ --color-text-muted: #5f5f5f; --color-border: #e2ddd2; /* VARIANTI DI SFONDO PER LE SEZIONI * * section-alt = tinta tenue del brand, derivata dai token sopra: * 88 % del crema di sfondo + 12 % del colore dominante. * Cambia da sola quando il cliente aggiorna i colori dal * Customizer — non c'è nessun valore fisso da ricordare. * Usare la classe .sezione-alt su un container GenerateBlocks. * * section-scura = sfondo pieno nel colore dominante (verde profondo nel * template standard). Per sezioni in forte contrasto con il * resto della pagina. Usare .sezione-scura; il testo e i * token interni vengono ridefiniti automaticamente. * * on-scura = colore del testo sulle sezioni scure: il crema del brand, * non il bianco puro, così il contrasto rimane caldo. */ --color-section-alt: color-mix(in srgb, var(--color-bg) 88%, var(--color-primary) 12%); --color-section-scura: var(--color-primary); --color-on-scura: var(--color-bg); /* COLORI SEMANTICI — NON derivano dal brand, ed è voluto. * * Tutto il resto della palette qui sopra è alias dei theme_mod del parent, * così un cliente cambia i colori dal Customizer e il sito lo segue. Questi * no: "verde = vegetale" e "rosso = piccante" sono convenzioni condivise, non * identità visiva del locale. Sono lo stesso genere di colore di un messaggio * d'errore, che resta rosso qualunque sia il brand. * * Sono scelti per NON somigliare alla palette di default: il verde del brand * è scuro e desaturato, questi sono chip chiari e vivi, quindi non si * confondono con titoli e link nemmeno di sfuggita. * * Contrasto verificato: 7.4:1 il verde, 6.5:1 il rosso. * * ATTENZIONE se li cambi: rosso e verde hanno qui luminanza quasi identica, * quindi in scala di grigi o per chi ha una deuteranopia si somigliano. Regge * perché il colore non è mai l'unico canale — c'è sempre la parola, e c'è * l'icona. Se un giorno togli l'icona, questi due colori non bastano più. */ --tag-vegetale-bg: #e3f2e6; --tag-vegetale-testo: #1e5631; --tag-piccante-bg: #fdeaea; --tag-piccante-testo: #9b2c2c; /* Allergene dichiarato: giallo d'avvertimento, 6.4:1. Volutamente saturo e a riempimento tenue, per non confondersi con l'oro di "Specialità", che è desaturato e pieno — due gialli vicini ma di natura opposta, uno promuove e uno avverte. */ --tag-allergene-bg: #fef3c7; --tag-allergene-testo: #92400e; /* Le stelle delle recensioni. NON è --color-accent, che pure è l'oro del tema: quello sta a 2.26:1 sul bianco delle card, sotto il 3:1 che WCAG 2.2 AA chiede agli elementi grafici che portano informazione (1.4.11 Non-text Contrast). Questo oro più scuro sta a 3.25:1 e resta riconoscibilmente oro. Cambiandolo, il minimo da rispettare è quello. */ --recensione-stella: #b8860b; /* SCALA DEI TITOLI — sovrascrittura dei preset del tema padre. * * NextAwards definisce font size fluide in theme.json, ma con minimi pensati * per il desktop: xx-large parte da 3.25rem, x-large da 2.125rem. Su un * telefono da 390px l'h1 della hero usciva a 53px e occupava quattro righe. * * Si tocca la variabile invece di scrivere font-size sui titoli perché da * quei preset passa TUTTO: le classi has-*-font-size del pattern e anche gli * heading senza classe, che theme.json mappa sugli stessi valori * (h1 → x-large, h2 → large, h3 → medium). Una sorgente sola, valida anche * per i blocchi che il cliente aggiunge dopo dall'editor. * * Il massimo di ogni clamp è identico a quello del parent: su desktop non * cambia niente, si abbassa solo il punto di partenza. Il valore centrale è * calcolato per arrivare al massimo intorno ai 1200px. * * Funziona senza !important perché global-styles-inline-css, dove WordPress * stampa i preset, esce prima di questo foglio (vedi inc/enqueue.php). */ --wp--preset--font-size--xx-large: clamp(2.25rem, 1.45rem + 4vw, 4.3875rem); /* 36px → 70px */ --wp--preset--font-size--x-large: clamp(1.75rem, 1.2rem + 2.75vw, 3.3rem); /* 28px → 53px */ --wp--preset--font-size--large: clamp(1.375rem, 1.15rem + 1.15vw, 2.2rem); /* 22px → 35px */ /* medium, base, small e x-small restano quelli del parent: i loro minimi (17, 16, 15, 13px) sono già leggibili su mobile. */ /* TIPOGRAFIA * font-heading e font-body ereditano dal parent per ora (inherit). * Quando si sceglie il font definitivo per il cliente, si sovrascrive qui il nome del font * (caricato via inc/enqueue.php, Google Fonts CDN o self-hosted). * Le scale di dimensione (sm → 4xl) seguono una progressione armonica. */ --font-heading: inherit; --font-body: inherit; --font-size-base: 1rem; /* 16px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ /* 4xl è la misura dei titoli delle sezioni dinamiche (menu, recensioni, FAQ): fluida come i preset del parent, altrimenti su mobile resterebbe a 40px mentre tutti i titoli intorno si sono ridotti. */ --font-size-4xl: clamp(1.875rem, 1.5rem + 1.85vw, 2.5rem); /* 30px → 40px */ --line-height-base: 1.6; /* per il corpo testo, più ariosa */ --line-height-heading: 1.2; /* per i titoli, più compatta */ /* SPACING * Sistema di spaziatura moltiplicativa basato su 0.25rem (4px). * Si usano per margin, padding, gap — mai valori numerici diretti nel CSS. */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 6rem; /* 96px */ /* LAYOUT */ /* * La larghezza del footer, che deve essere quella delle sezioni della * pagina. Era un 1200px scritto a mano e il wideSize del tema è 1300: * il footer stava 50px più stretto per lato di tutto quello che aveva * sopra, cioè non era allineato a niente. Ora legge il preset, così se * il parent cambia wideSize il footer lo segue. */ --footer-max: var(--wp--style--global--wide-size, 1200px); --container-padding: var(--spacing-lg); /* padding laterale del container */ /* Altezza minima di una riga del menu — il pavimento del ritmo, non un'altezza fissa: vedi .ristorante-menu-piatto per il perché di 80px. */ --menu-riga-min: 80px; /* BORDI * Scala di border-radius dal più stretto (4px, quasi quadrato) al full (pillola). */ --border-radius: 4px; --border-radius-md: 8px; --border-radius-lg: 16px; --border-radius-full: 9999px; /* OMBRE * Tre livelli: sm per hover sottile, md per card, lg per elementi sollevati * dal fondo (la card del form sopra la cover). */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* TRANSIZIONI * transition = default per hover su link e bottoni (veloce) * transition-slow = per animazioni più ampie (menu, accordion) */ --transition: 200ms ease; --transition-slow: 400ms ease; /* Z-INDEX * Scala centralizzata per evitare conflitti con l'header fisso del parent. */ --z-header: 100; } /* * ───────────────────────────────────────────────────────────── * FISARMONICHE — un solo comportamento per tutto il tema * * Le usano le FAQ e, quando è attiva la modalità compatta, le sezioni del * menu. Erano rese in due modi diversi: le FAQ col triangolino di default del * browser, le sezioni del menu senza niente, perché display:flex sul summary * rimuove il marker nativo. Due accordion che si aprono allo stesso modo * devono dirlo allo stesso modo. * * IL CHEVRON NON È DECORATIVO: senza, una riga che si apre non si distingue da * una riga di testo inerte. Lo stato aperto/chiuso arriva comunque agli screen * reader da
, ma a chi guarda serve un segno. * * Si disegna con una mask e non con background-image: così il colore è * currentColor e segue la palette del progetto. Con background-image il colore * andrebbe scritto dentro il data URI, e resterebbe quello anche dopo che un * cliente ha cambiato tutti i colori dal Customizer. * ───────────────────────────────────────────────────────────── */ .ristorante-menu-sezione-summary, .ristorante-faq-question { display: flex; align-items: center; gap: var(--spacing-md); cursor: pointer; /* display:flex toglie già il marker su alcuni browser: queste due regole rendono il comportamento uguale ovunque prima di rimpiazzarlo. */ list-style: none; } .ristorante-menu-sezione-summary::-webkit-details-marker, .ristorante-faq-question::-webkit-details-marker { display: none; } .ristorante-menu-sezione-summary::after, .ristorante-faq-question::after { content: ""; flex-shrink: 0; width: 0.8em; height: 0.8em; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: transform var(--transition); } details[open] > .ristorante-menu-sezione-summary::after, details[open] > .ristorante-faq-question::after { transform: rotate(180deg); } /* * Chi spinge il chevron a destra. * * Deve farlo UN elemento solo: nelle sezioni del menu è il conteggio, nelle * FAQ — che non hanno conteggio — è il chevron stesso. Mettendo margin-left * auto su entrambi, i due margini si spartivano lo spazio libero a metà e il * conteggio finiva in mezzo alla riga invece che accanto al chevron. */ .ristorante-faq-question::after { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .ristorante-menu-sezione-summary::after, .ristorante-faq-question::after { transition: none; } } /* * ───────────────────────────────────────────────────────────── * SOLO PER SCREEN READER * * Testo che esiste per l'assistive technology e non per lo schermo. Serve dove * un'informazione che l'occhio ricava dal contesto non arriva all'orecchio — * il caso concreto è la valuta dentro ogni prezzo quando il simbolo è spento. * * Utility nostra e non .screen-reader-text del tema padre: il child è pensato * per essere duplicato, e non deve dipendere dal foglio di un parent che un * giorno può cambiare o non esserci. * * Non si usa display:none né visibility:hidden — toglierebbero il testo anche * agli screen reader, che è l'opposto di quello che serve. * ───────────────────────────────────────────────────────────── */ .ristorante-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* * ───────────────────────────────────────────────────────────── * SFONDI SEZIONE — varianti per l'alternanza visiva delle sezioni * * Usa una di queste classi sul container GenerateBlocks tramite il campo * "Classe CSS aggiuntiva" nell'editor blocchi. Nessuna configurazione extra: * i colori seguono già la palette impostata nel Customizer. * * .sezione-alt → sfondo verde-crema tenue (--color-section-alt) * .sezione-scura → sfondo nel colore dominante, testo crema * * Contrasto su .sezione-scura con la palette di default: * --color-on-scura (#faf8f4) su --color-section-scura (#2f4538) → 9.6:1 AAA. * Se il cliente cambia i colori dal Customizer il contrasto va rimisurato. * ───────────────────────────────────────────────────────────── */ .sezione-alt { background-color: var(--color-section-alt); } .sezione-scura { background-color: var(--color-section-scura); color: var(--color-on-scura); /* Ridefinisce i token semantici così i componenti figli (titoli, testi, bordi) ereditano i valori giusti senza regole per ogni elemento. */ --color-text: var(--color-on-scura); --color-text-muted: color-mix(in srgb, var(--color-on-scura) 72%, var(--color-section-scura) 28%); --color-border: color-mix(in srgb, var(--color-on-scura) 22%, var(--color-section-scura) 78%); /* L'anello di focus su sfondo scuro: bianco visibile ovunque. */ --focus-ring: #ffffff; } .sezione-scura :focus-visible { outline-color: var(--focus-ring, #ffffff); } /* * ───────────────────────────────────────────────────────────── * FOCUS VISIBILE — dove sono quando navigo da tastiera * * Il tema padre ha la propria regola :focus commentata * (vendor/nextawards/style.css:625-629), quindi restava solo l'anello di * default del browser: sottile, e su una hero fotografica scura praticamente * invisibile. * * Due anelli invece di uno, ed è il punto della regola. Un indicatore di un * colore solo funziona finché lo sfondo collabora: qui il contorno quasi-nero * si vede sui fondi chiari (pagina crema, card del form), l'alone bianco * esterno si vede su quelli scuri (cover della hero, bottone primario, fondo * del footer). Uno dei due regge sempre, senza dover conoscere in anticipo la * foto che caricherà il cliente. * * :focus-visible e non :focus — l'anello compare a chi naviga da tastiera, non * a ogni click del mouse. * ───────────────────────────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; } /* * ───────────────────────────────────────────────────────────── * NAVIGAZIONE INTERNA — la homepage è una one-page, i bottoni della hero e * le voci di menu sono ancore. * * scroll-margin-top: l'header del tema padre è position:fixed, quindi senza * margine la sezione di destinazione arriva sotto la barra. Il valore copre * l'header desktop (~80px); su mobile la barra è più bassa e qualche pixel * d'aria in più non disturba. * ───────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } #menu, #prenota { scroll-margin-top: 80px; } /* * ───────────────────────────────────────────────────────────── * MENU MOBILE — overlay a tutto schermo * * Il markup e l'interruttore restano quelli del tema padre: il bottone * .icon-hamburger e la classe menu-open sul body (vendor/nextawards/js/script.js). * Qui si sostituisce solo la resa: il parent faceva entrare un pannello da * sinistra (translateX(-100%) su un elemento alto 100vh), che su un sito di * quattro voci è un movimento sproporzionato. * * z-index sotto l'header del parent (9999): la barra con logo e hamburger * resta sopra l'overlay, ed è lì che l'hamburger diventa X — l'animazione la * fa già il parent (.menu-open .icon-hamburger span). * * visibility invece del solo opacity: toglie le voci anche dall'ordine di * tabulazione. Con il translateX del parent restavano raggiungibili da * tastiera pur essendo fuori schermo. * ───────────────────────────────────────────────────────────── */ @media (max-width: 1190px) { .menu { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-lg); height: 100dvh; margin: 0; padding: var(--spacing-4xl) var(--container-padding) var(--spacing-2xl); overflow-y: auto; transform: none; background: var(--color-bg); opacity: 0; visibility: hidden; /* * visibility con durata 0 e ritardo pari alla dissolvenza: chiudendo * resta visibile finché l'opacità non è arrivata a zero, aprendo diventa * visibile subito. Metterla in transizione come l'opacità la farebbe * scattare a fine animazione, e al primo frame dopo l'apertura * l'elemento sarebbe ancora invisibile: focus() su un elemento invisibile * non fa niente, e il menu si apriva senza portarci dentro il focus. */ transition: opacity var(--transition-slow), visibility 0s linear var(--transition-slow); } .menu-open .menu { transform: none; opacity: 1; visibility: visible; transition: opacity var(--transition-slow), visibility 0s; } /* * Il markup del menu ha due forme e vanno gestite entrambe. * * Con un menu assegnato alla location, wp_nav_menu() produce direttamente *