/* ========================================================= MIOBUK — PAGINE STATICHE (informative, legali, assistenza) Un solo foglio per TUTTE queste pagine. Si attiva con la classe .mb-static-page che inc/miobuk-static-pages.php mette sul . Caricato solo su di esse e dopo miobuk-global.css, quindi vince la cascata per ordine: gli !important qui presenti servono unicamente a superare le regole globali che sono a loro volta !important, non a scavalcare altro. PERCHE' IL SELETTORE E' "body.page.mb-static-page" Serve una classe in piu' rispetto a .mb-static-page per superare "body.page-template-page-no-title .entry-content p" di miobuk-global.css, che ha la stessa specificita'. .page e' sempre presente sulle pagine (body_class di WordPress), quindi il conto torna senza dipendere dall'ordine di caricamento dei fogli. NON si usa .entry-content nel selettore: le pagine servite da un template proprio (Assistenza, Collector Club, Contattaci) non hanno quel contenitore, e le regole non le prenderebbero. Impianto grafico (§3 della documentazione di progetto): fascia titolo a piena larghezza → apertura centrata → sezioni separate da una riga sottile taupe → nota di chiusura. Un solo carattere (boreal 200), nessun grassetto, nessuna pillola. ========================================================= */ /* ---------- 1. FASCIA TITOLO ------------------------------------ La larghezza piena e il distacco dall'header arrivano già da miobuk-global.css: qui si lavora solo sul respiro verticale e sul segno grafico fra occhiello e titolo. */ body.page.mb-static-page .mb-legal-hero { padding-top: clamp(52px, 5.4vw, 78px) !important; padding-bottom: clamp(52px, 5.4vw, 78px) !important; background: #FAF9F6; } body.page.mb-static-page .mb-legal-hero .mb-eyebrow { position: relative; margin: 0 0 20px !important; padding-bottom: 18px; } /* Riga sottile sotto l'occhiello: è lo stesso segno dei pulsanti e delle voci di menu, ripetuto qui perché la pagina appartenga a vista alla stessa famiglia grafica. Il margine sinistro compensa la spaziatura fra le lettere, che altrimenti sposta l'ottico. */ body.page.mb-static-page .mb-legal-hero .mb-eyebrow::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 36px; height: 1px; margin-left: -20px; background: var(--mb-taupe-line, #C5B9A4); } /* ---------- 2. COLONNA DI LETTURA ------------------------------- Da 900px a 720px: a 13px una riga di 900px supera i 140 caratteri e l'occhio perde il capoverso. 720px tiene la riga intorno ai 90. !important obbligatorio: il blocco Gutenberg scrive padding e larghezza come stile inline. */ body.page.mb-static-page .mb-legal-content { width: min(88%, 720px) !important; max-width: min(88%, 720px) !important; margin-left: auto !important; margin-right: auto !important; padding-top: clamp(52px, 5vw, 76px) !important; padding-bottom: clamp(64px, 6vw, 96px) !important; text-align: left; } /* ---------- 3. APERTURA ----------------------------------------- Il primo capoverso fa da abstract: centrato, un filo più grande, staccato dal resto. Stesso trattamento della descrizione breve in scheda prodotto. La classe .mb-static-intro è l'aggancio esplicito per le pagine la cui apertura non è il primo elemento. */ body.page.mb-static-page .mb-legal-content > p:first-child, body.page.mb-static-page .mb-legal-content .mb-static-intro { font-size: 16px !important; line-height: 1.85 !important; color: var(--mb-ink-soft, #6A6457) !important; text-align: center !important; max-width: 560px; margin: 0 auto clamp(46px, 4.4vw, 66px) !important; } /* ---------- 4. TITOLI DI SEZIONE -------------------------------- 22px maiuscolo oro come da sistema grafico, preceduti da una riga sottile a tutta colonna: è la riga a costruire il ritmo della pagina, il titolo da solo non basta a separare i blocchi. */ body.page.mb-static-page .mb-legal-content h2, body.page.mb-static-page .mb-legal-content h3, body.page.mb-static-page .mb-legal-content h4 { font-family: "boreal", sans-serif !important; font-weight: 200 !important; text-transform: uppercase !important; letter-spacing: .1em !important; font-size: 22px !important; line-height: 1.25 !important; color: var(--mb-taupe-deep, #7C6F59) !important; text-align: left !important; margin: clamp(44px, 4.2vw, 60px) 0 18px !important; padding-top: clamp(28px, 2.8vw, 36px) !important; border-top: 1px solid var(--mb-taupe-line, #C5B9A4); } /* ---------- 5. TESTO CORRENTE ----------------------------------- Grigio caldo, interlinea 1.8: su un testo lungo l'1.5 usato nelle schede prodotto stringe troppo. La misura arriva dal token, mai scritta a mano. */ body.page.mb-static-page .mb-legal-content p, body.page.mb-static-page .mb-legal-content li { font-size: var(--mb-fs-body, 14px) !important; font-weight: 200 !important; color: var(--mb-ink-soft, #6A6457) !important; line-height: 1.8 !important; letter-spacing: 0 !important; margin: 0 0 16px !important; } /* ---------- 6. ELENCHI ------------------------------------------ Trattino taupe al posto del pallino: stesso vocabolario di segni del resto del sito (righe sottili, niente forme piene). */ body.page.mb-static-page .mb-legal-content ul, body.page.mb-static-page .mb-legal-content ol { margin: 0 0 22px !important; padding-left: 22px !important; text-align: left !important; } body.page.mb-static-page .mb-legal-content ul { list-style: none !important; } body.page.mb-static-page .mb-legal-content ul > li { position: relative; } body.page.mb-static-page .mb-legal-content ul > li::before { content: ""; position: absolute; left: -22px; top: .85em; width: 9px; height: 1px; background: var(--mb-taupe, #9A8C74); } /* ---------- 7. LINK NEL TESTO ----------------------------------- Stesso comportamento dei pulsanti e delle voci di menu: riga da 1 a 1,5px e colore che si approfondisce, senza che il testo si sposti (il padding cala di mezzo pixel mentre il bordo cresce). Limitato ai link DENTRO capoversi ed elenchi: i pulsanti e gli elenchi di navigazione hanno un trattamento proprio e non devono ritrovarsi una sottolineatura addosso. */ body.page.mb-static-page .mb-legal-content p a:not(.mb-btn-outline):not(.wp-element-button), body.page.mb-static-page .mb-legal-content li a:not(.mb-btn-outline):not(.wp-element-button) { color: var(--mb-taupe-deep, #7C6F59) !important; text-decoration: none !important; border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4); padding-bottom: 1.5px; transition: border-color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); } body.page.mb-static-page .mb-legal-content p a:not(.mb-btn-outline):not(.wp-element-button):hover, body.page.mb-static-page .mb-legal-content li a:not(.mb-btn-outline):not(.wp-element-button):hover { border-bottom-width: 1.5px; border-bottom-color: var(--mb-taupe-deep, #7C6F59); padding-bottom: 1px; } /* ---------- 8. NOTA DI CHIUSURA --------------------------------- L'ultimo capoverso (rimando ai contatti, colophon legale) diventa una nota staccata e centrata, non l'ennesimo paragrafo del testo. Il selettore "p + p:last-child" e' voluto: la nota scatta solo se l'ultimo capoverso segue un altro capoverso. Se invece segue un titolo di sezione (es. "Conservazione" in Cura del Prodotto) e' il testo di quella sezione, non una nota: in quel caso la regola non deve scattare, altrimenti si otterrebbe una riga sottile incastrata fra il titolo e il suo stesso testo. */ body.page.mb-static-page .mb-legal-content > p + p:last-child, body.page.mb-static-page .mb-legal-content .mb-static-note { margin: clamp(50px, 4.8vw, 70px) 0 0 !important; padding-top: clamp(28px, 2.8vw, 36px); border-top: 1px solid var(--mb-taupe-line, #C5B9A4); text-align: center !important; font-size: var(--mb-fs-small, 12px) !important; letter-spacing: .02em !important; } /* Nota societaria (Contattaci): il nome dell'azienda fa da etichetta in maiuscolo, l'indirizzo resta testo corrente. */ body.page.mb-static-page .mb-legal-content .mb-static-note p { margin: 0 !important; text-align: center !important; } body.page.mb-static-page .mb-legal-content .mb-static-note-label { text-transform: uppercase !important; letter-spacing: .1em !important; font-size: var(--mb-fs-label, 12px) !important; color: var(--mb-taupe-deep, #7C6F59) !important; margin-bottom: 8px !important; } /* ---------- 8-bis. CHIUSURA CON PULSANTE ------------------------ Usata dove la pagina si chiude con un invito (Collector Club, Domande Frequenti): stessa riga sottile della nota, testo centrato e sotto il pulsante nello stile unico del sito. */ body.page.mb-static-page .mb-legal-content .mb-static-cta { margin-top: clamp(50px, 4.8vw, 70px); padding-top: clamp(28px, 2.8vw, 36px); border-top: 1px solid var(--mb-taupe-line, #C5B9A4); text-align: center; } body.page.mb-static-page .mb-legal-content .mb-static-cta-text { text-align: center !important; margin: 0 0 22px !important; } /* ---------- 9. ELENCO DI RIMANDI (pagina Assistenza) ------------ Sostituisce gli stili scritti a mano dentro il template: stessa riga sottile taupe delle altre sezioni, stesse maiuscole delle voci di menu, freccina disegnata dal CSS (non è testo, quindi non entra nel flusso di traduzione). */ body.page.mb-static-page .mb-support-links { display: flex; flex-direction: column; margin-top: clamp(8px, 1.6vw, 16px); border-top: 1px solid var(--mb-taupe-line, #C5B9A4); } body.page.mb-static-page .mb-support-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4); text-decoration: none !important; text-transform: uppercase !important; letter-spacing: .1em !important; font-size: var(--mb-fs-label, 12px) !important; font-weight: 200 !important; color: var(--mb-taupe-deep, #7C6F59) !important; transition: border-bottom-color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)), padding-left .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); } body.page.mb-static-page .mb-support-links a::after { content: "\203A"; /* › — segno, non testo: fuori dal flusso di traduzione */ color: var(--mb-taupe, #9A8C74); font-size: 17px; line-height: 1; } body.page.mb-static-page .mb-support-links a:hover { border-bottom-color: var(--mb-taupe-deep, #7C6F59); padding-left: 8px; } /* ---------- 10. FAQ — accordion --------------------------------- La pagina Domande Frequenti aveva un impianto tipografico suo (categorie 13px peso 400, domande peso 400): riportato alla regola unica del sito — un solo carattere, peso 200, nessun grassetto — e alle righe sottili taupe invece del grigio. I titoli di categoria prendono da soli il trattamento dei titoli di sezione (regola 4), quindi qui si toglie solo il margine ridotto che avevano prima. */ body.page.mb-static-page .mb-faq-cat { max-width: none; margin: 0 0 clamp(40px, 4vw, 56px); } body.page.mb-static-page .mb-faq-cat h3 { margin-bottom: 6px !important; } body.page.mb-static-page .mb-faq-item { border-bottom: 1px solid var(--mb-taupe-line, #C5B9A4); } body.page.mb-static-page .mb-faq-q { font-weight: 200 !important; font-size: var(--mb-fs-body, 14px) !important; letter-spacing: .02em !important; color: var(--mb-ink, #1A1814) !important; padding: 20px 0 !important; transition: color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1)); } body.page.mb-static-page .mb-faq-q:hover, body.page.mb-static-page .mb-faq-q[aria-expanded="true"] { color: var(--mb-taupe-deep, #7C6F59) !important; } body.page.mb-static-page .mb-faq-a p { margin: 0 0 20px !important; } /* ---------- 11. TELEFONO ---------------------------------------- Solo le misure cambiano: la struttura resta identica, così la pagina è riconoscibile su qualunque schermo. */ @media (max-width: 600px) { body.page.mb-static-page .mb-legal-content { width: min(90%, 720px) !important; max-width: min(90%, 720px) !important; } body.page.mb-static-page .mb-legal-content > p:first-child, body.page.mb-static-page .mb-legal-content .mb-static-intro { font-size: 15px !important; } body.page.mb-static-page .mb-legal-content h2, body.page.mb-static-page .mb-legal-content h3, body.page.mb-static-page .mb-legal-content h4 { font-size: 18px !important; } body.page.mb-static-page .mb-support-links a { padding: 18px 2px; } /* 27/08 (sera) — Sul telefono tutto il testo delle pagine interne va centrato, come il resto del sito. Su desktop resta allineato a sinistra: la colonna e' larga 720px e su una riga lunga il testo centrato diventa faticoso da leggere, mentre su una colonna stretta da telefono la differenza di leggibilita' e' minima e la pagina guadagna in coerenza con la fascia del titolo e con l'apertura, che sono gia' centrate. Gli elenchi restano allineati a sinistra: i trattini taupe stanno fuori dal testo, e centrando le voci finirebbero disallineati l'uno rispetto all'altro. */ body.page.mb-static-page .mb-legal-content h2, body.page.mb-static-page .mb-legal-content h3, body.page.mb-static-page .mb-legal-content h4, body.page.mb-static-page .mb-legal-content p, body.page.mb-static-page .mb-faq-cat h3 { text-align: center !important; } body.page.mb-static-page .mb-legal-content h2, body.page.mb-static-page .mb-legal-content h3, body.page.mb-static-page .mb-legal-content h4 { display: block; } }