/* ========================================================================== Foto Fabbiani — regole di base Qui sta solo ciò che theme.json non sa esprimere: il token dell'accento, le compensazioni tipografiche di Mrs Eaves, il focus visibile, le utility per didascalie e provini. ========================================================================== */ /* -------------------------------------------------------------------------- Accento — token unico. Cambiare questo blocco (o l'attributo data-accent su ) commuta l'intero sito. Serve per la scelta finale terracotta / salvia. -------------------------------------------------------------------------- */ :root { /* terracotta — 5.19:1 su avorio */ --ff-accent: #A64F32; /* Sul nero del logo la terracotta piena scende a 3.04:1: sotto il minimo AA. Il footer e le sezioni scure usano quindi questa variante schiarita, 5.16:1. */ --ff-accent-on-dark: #C97A5C; } :root[data-accent="sage"] { --ff-accent: #5A6B52; /* verde salvia — 5.37:1 su avorio */ --ff-accent-on-dark: #8FA383; /* 6.22:1 sul nero del logo */ } /* -------------------------------------------------------------------------- Compensazione Mrs Eaves. Mrs Eaves ha una x-height molto bassa (~0.375 em): alla stessa dimensione nominale appare circa il 25% più piccola di un carattere da testo normale. Il corpo base in theme.json è già alzato a 19-21px; qui si aggiungono interlinea e misura di riga, che sono l'altra metà della leggibilità. -------------------------------------------------------------------------- */ /* width:100vw sugli sfondamenti a piena larghezza (.ff-process__bg e .ff-process__scrim) misura la larghezza della finestra INCLUSA la scrollbar, mentre il layout è largo quanto il viewport ESCLUSA la scrollbar: la differenza (in genere pochi px) crea uno scroll orizzontale fantasma. overflow-x:hidden va su entrambi html e body — lo scrollWidth del documento si misura sull'elemento html, non su body — senza toccare nessun overflow verticale o gli overflow-x locali già in uso altrove. */ /* scrollbar-gutter:stable riserva sempre lo spazio della barra di scorrimento. Serve all'apertura del menu: WordPress mette overflow:hidden sul body (classe .has-modal-open), la barra sparisce e senza il gutter l'intera pagina — hamburger compreso — scivolerebbe di una quindicina di pixel proprio mentre la X ci si deve sovrapporre. */ html { overflow-x: hidden; scrollbar-gutter: stable; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-ligatures: common-ligatures; overflow-x: hidden; } /* Mrs Eaves ha cifre oldstyle di default: nei metadati (date, prezzi, orari) servono cifre allineate, altrimenti i numeri "ballano" sulla riga. */ .ff-lining-numerals, time, .wp-block-table td, .wp-block-table th { font-family: mrs-eaves-roman-lining, mrs-eaves, Baskerville, Garamond, serif; font-variant-numeric: lining-nums tabular-nums; } p { max-width: 66ch; text-wrap: pretty; } /* L'interlinea 1.68 serve alle righe lunghe del desktop. Su mobile la colonna scende a 5-6 parole per riga e la stessa interlinea sfilaccia il paragrafo: l'occhio perde l'attacco della riga successiva. Sotto i 600px si stringe. */ @media (max-width: 600px) { html body { line-height: 1.52; } html body h1, html body h2, html body h3 { line-height: 1.1; } } /* I titoli restano liberi di occupare tutta la colonna, ma senza orfane. */ h1, h2, h3, h4 { text-wrap: balance; max-width: 22ch; } h1 { max-width: 18ch; } /* Il corsivo di Mrs Eaves è marcatamente calligrafico: ottimo per una parola, pessimo per un paragrafo. Consentito solo per enfasi semantica breve. */ em, i { font-style: italic; } blockquote em, blockquote i { font-style: normal; } /* -------------------------------------------------------------------------- Occhiello / etichette in small caps. Sostituiscono il corsivo dove serve stacco gerarchico: Mrs Eaves Small Caps è la variante in cui questo carattere dà il meglio, e non porta con sé il tono "wedding template" del corsivo. -------------------------------------------------------------------------- */ .ff-eyebrow { font-family: mrs-eaves-roman-small-caps, mrs-eaves, Baskerville, serif; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.09em; color: var(--wp--preset--color--ink-soft); display: block; margin-block-end: var(--wp--preset--spacing--20); } /* -------------------------------------------------------------------------- Didascalie e metadati — unico territorio di Nitti Typewriter. Nitti nel kit ha un solo peso (400) e nessun corsivo: qualsiasi uso oltre questo non è supportato dai file disponibili. -------------------------------------------------------------------------- */ .ff-meta { font-family: nitti-typewriter-normal, ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--wp--preset--font-size--caption); letter-spacing: 0.04em; line-height: 1.5; color: var(--wp--preset--color--ink-soft); } /* Riga "Formigine, Settembre 2025" nelle card delle Storie. */ .ff-meta--place { text-transform: none; } /* -------------------------------------------------------------------------- Provino fotografico — bordo carta discreto attorno alle immagini che lo richiedono esplicitamente. Mai applicato di default. -------------------------------------------------------------------------- */ .ff-contact-print img { background: var(--wp--preset--color--paper); padding: var(--wp--preset--spacing--20); box-shadow: 0 1px 2px rgb(42 36 34 / 0.08), 0 8px 24px rgb(42 36 34 / 0.06); } /* -------------------------------------------------------------------------- Immagini — il contenuto vero del sito. -------------------------------------------------------------------------- */ img { max-width: 100%; height: auto; } figure { margin: 0; } figcaption { margin-block-start: var(--wp--preset--spacing--20); } /* -------------------------------------------------------------------------- Accessibilità — focus visibile su tutto ciò che è interattivo. Requisito esplicito del brief: l'anello non va mai rimosso. -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ff-accent); outline-offset: 3px; border-radius: 1px; } /* Salto al contenuto, visibile solo da tastiera. */ .ff-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); font-family: mrs-eaves-roman-small-caps, mrs-eaves, serif; letter-spacing: 0.07em; text-decoration: none; } .ff-skip-link:focus { left: var(--wp--preset--spacing--30); top: var(--wp--preset--spacing--20); } /* -------------------------------------------------------------------------- Rispetto delle preferenze di movimento. Il brief esclude slider automatici e parallax: qui si chiude comunque la porta a qualsiasi animazione residua del tema genitore. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== COMPONENTI — testata, sezioni, moduli ========================================================================== */ /* -------------------------------------------------------------------------- Logo e testata Il lockup completo (marchio + wordmark) è 926.44x277.6. L'altezza è fissata qui, la larghezza segue il rapporto. Il marchio non compare mai da solo e mai più grande del wordmark: nel lockup è il wordmark a dominare. -------------------------------------------------------------------------- */ .ff-logo { display: inline-flex; flex: 0 0 auto; text-decoration: none; line-height: 0; } .ff-logo__img { display: block; width: auto; height: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem); /* 36px → 52px */ } /* La variante chiara serve solo dove il fondo è scuro. */ .ff-logo__img--light { display: none; } .ff-header { position: relative; z-index: 2; } /* Su richiesta del cliente: Nitti Typewriter 12px per il menu, non più Mrs Eaves small caps impostato in theme.json sul blocco core/navigation. !important per la stessa ragione del footer: le global styles di WordPress hanno la meglio sulla specificità semplice. */ .ff-nav, .ff-nav a { font-family: nitti-typewriter-normal, ui-monospace, "SF Mono", Menlo, monospace !important; font-size: 12px !important; letter-spacing: 0.02em !important; text-decoration: none; } .ff-nav a:hover, .ff-nav a:focus-visible { color: var(--ff-accent); } /* -------------------------------------------------------------------------- MENU A SCHERMO INTERO Ispirato a danieleandmarilia.com: hamburger sempre visibile (overlayMenu "always" nel pattern header, non solo "mobile") e overlay a piena pagina in ink invece del bianco del tema genitore. Le voci restano in Nitti Typewriter su richiesta esplicita del cliente, a 17px e allineate a destra sotto alla X — non più la scala gigante di prima. L'overlay è SEMPRE renderizzato, non più display:none quando è chiuso. WordPress lo nasconde con "display:none" (classe .hidden-by-default e stato :not(.is-menu-open)), ma da display:none non parte nessuna transizione: l'apertura e — soprattutto — la chiusura risultavano due tagli netti. Qui resta invece in pagina con opacity:0 + visibility:hidden + pointer-events:none, così l'una e l'altra sono animabili in entrambi i versi. visibility è la garanzia che conta: toglie le voci anche dal percorso di tabulazione e dall'albero di accessibilità, cosa che la sola opacità non farebbe. Nella transizione ha ritardo pari alla durata in chiusura (resta visibile mentre sfuma) e zero in apertura. -------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container.hidden-by-default { display: flex !important; /* Fondo e colore stanno qui, NON sullo stato aperto: .is-menu-open viene tolta nell'istante del click, e se il fondo dipendesse da quella classe sparirebbe di colpo lasciando le voci a sfumare sul nulla. */ background-color: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--paper) !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0s linear 0.5s; /* Il padding del contenitore va a zero e lo spazio lo prende il contenuto (regole più sotto, sulle stesse --ff-burger-*). Non è estetica: questo elemento porta una transform identità, che basta a farne il blocco contenitore dei discendenti posizionati — i quali si ancorano quindi al suo box di padding, non al viewport. Con il padding a zero i due riferimenti tornano a coincidere e la X può usare le coordinate di viewport misurate sull'hamburger senza doverne sottrarre nulla. */ padding: 0 !important; } .wp-block-navigation__responsive-container.is-menu-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s ease, visibility 0s linear 0s; } /* position:static sui due involucri intermedi: WordPress rende il dialogo position:relative, e finché lo è tocca a lui — non al contenitore a piena pagina — fare da riferimento alla X posizionata. Il suo bordo superiore cade qualche pixel più in basso di quello del contenitore, e la X ereditava quello scarto restando disallineata rispetto all'hamburger che deve sostituire. Sono involucri di puro raggruppamento: renderli statici non toglie nulla. */ .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog { width: 100%; position: static; } /* Le voci partono subito sotto la X e sono allineate al suo stesso bordo destro: --ff-burger-* sono misurate da site.js sull'hamburger reale (initMenuGeometry), perché la sua posizione dipende dall'altezza del logo e dal momento in cui Adobe Fonts finisce di caricare. I valori di riserva qui sotto tengono il menu allineato anche prima che il JS misuri. */ /* !important sul padding-top: il core di WordPress porta una propria regola ".is-menu-open:not(.disable-default-overlay) .wp-block-navigation__ responsive-container-content { padding-top: calc(24px + 2rem) }" con specificità più alta di questa qui (stessa lotta già documentata per il footer), che a menu aperto sovrascriveva il calcolo corretto con un valore fisso di WordPress — il primo link ("Matrimoni") finiva dietro alla X di chiusura invece che sotto. */ .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 0; padding-top: calc(var(--ff-burger-top, 2rem) + var(--ff-burger-size, 2rem) + var(--wp--preset--spacing--30)) !important; padding-inline-end: var(--ff-burger-right, 1.5rem); } .wp-block-navigation__responsive-container .wp-block-navigation__container { align-items: flex-end; gap: 0; } .wp-block-navigation__responsive-container .wp-block-navigation-item { overflow: hidden; text-align: right; } /* 17px fisso su richiesta del cliente. !important obbligatorio due volte: la