/* Theme Name: FRG Divi Child Theme URI: https://francescorotondographics.it Description: Child theme base di Francesco Rotondo Graphics per Divi. Design system a variabili (palette, font, pulsanti, sezioni, form, animazioni), menu integrato e pagina styleguide. Per un nuovo sito si cambiano i valori in :root e le impostazioni del menu. Author: Francesco Rotondo Author URI: https://francescorotondographics.it Template: Divi Version: 1.3.0 Text Domain: frg-child */ /* ========================================================================== FRG CHILD · Stili Globali COME SI USA SU UN NUOVO SITO ---------------------------- 1. Colori, font e forma si scelgono in Aspetto → Palette: la pagina scrive le variabili nel sito senza toccare questo file. I valori in VARIABILI GLOBALI qui sotto sono la palette di riserva. 2. Apri la pagina con il template "FRG Styleguide" e controlla che tutto torni. Poi si passa alle pagine. Le classi specifiche del cliente vanno in fondo al file, nella sezione 99, con il loro prefisso (es. jt-, as-). Il prefisso frg- resta riservato alla base, così un aggiornamento della base non pesta il lavoro fatto sul sito. INDICE CLASSI ------------- VARIABILI (sezione VARIABILI GLOBALI) --frg-bg fondo principale --frg-bg-2 fondo alternato, card, segnaposto --frg-ink testo e fondi scuri --frg-muted testo secondario --frg-line fili e bordi --frg-accent accento: display grandi, fondi, icone, hover --frg-accent-ink stesso accento, leggibile nei testi piccoli --frg-on-accent testo sopra --frg-accent (bianco o ink) --frg-accent-2 secondo accento, facoltativo --frg-accent-soft accento chiaro che si legge sull'ink --frg-on-dark-muted testo secondario sulle sezioni scure --frg-on-dark-line fili dentro le sezioni scure --frg-sans / --frg-serif famiglie di font --frg-radius raggio pulsanti e campi (999px = pillola) --frg-gut margine laterale fluido (lo usa anche il menu) --frg-max larghezza massima delle righe .frg-wrap --frg-nav-h altezza del menu fisso (la scrive il menu) TESTO .frg-it Corsivo serif (accento editoriale) .frg-label Etichetta maiuscoletto spaziato (come h6) .frg-lead Paragrafo introduttivo grande .frg-muted Testo secondario .frg-small Testo piccolo .frg-num Numeri tabellari .frg-date Data grande in colore accento HIGHLIGHT (effetto tendina al reveal) .frg-hl-accent Evidenziatore accento, testo on-accent .frg-hl-soft Evidenziatore accento chiaro, testo ink .frg-hl-accent-2 Evidenziatore secondo accento, testo ink .frg-hl-*-link Stesse tre versioni su , hover scurisce UNDERLINE .frg-underline Sottolineatura che cresce al reveal .frg-link Link con underline statico, hover accento PULSANTI (modulo Pulsante di Divi, Classe CSS) .frg-btn-solid Pieno ink, hover accento .frg-btn-outline Bordo ink, hover pieno ink .frg-btn-accent Pieno accento, per la call to action principale .frg-btn-text Testo con freccia diagonale, underline in hover .frg-btn-text-fwd Testo con chevron avanti .frg-btn-text-back Testo con chevron indietro .frg-btn-social Pieno con icona SVG a sinistra .frg-btn-group Contenitore per pulsanti affiancati .frg-btn-row Sulla colonna: pulsanti Divi affiancati MODIFICATORI PULSANTI .on-dark Pulsante su fondo scuro fuori da .frg-sec-dark .frg-btn-arrow Freccia diagonale dentro le pillole .frg-btn-play Triangolo play dentro le pillole SEZIONI (sulla Section di Divi) .frg-sec-light Fondo principale .frg-sec-light-2 Fondo alternato .frg-sec-dark Fondo ink, testo chiaro .frg-sec-accent Fondo accento, testo on-accent .frg-sec-accent-2 Fondo secondo accento, testo ink .frg-band Fascia bassa a tutta larghezza, contenuto centrato SPAZIATURA SEZIONI .frg-sec-first Prima sezione di OGNI pagina: stacco dal menu fisso .frg-sec-pad Padding sopra e sotto .frg-sec-pad-sm Padding ridotto .frg-sec-pad-top Solo sopra (hero), sotto 0 .frg-sec-pad-none Niente padding LAYOUT .frg-wrap Riga alla larghezza del sito (gutter + --frg-max) .frg-row-full Riga 100vh centrata .frg-row-tight Colonne senza margine sotto .frg-hero Hero con overflow visibile (pin GSAP) .frg-rule Testata: titolo a sinistra, link a destra, filo sotto .frg-hr / -strong Separatore sopra il modulo .frg-stack Spazio regolare tra i moduli di una colonna .frg-push Modulo spinto in fondo alla colonna .frg-align-right Allineato a destra (a sinistra su mobile) .reverse-mobile Inverte le colonne su mobile .frg-ph Segnaposto immagine finché non c'è la foto .sezione-fp Sezione full-page (plugin FRG Scroll Page) EFFETTI .frg-glass Frosted glass chiaro .frg-glass-col Come sopra, su colonna Divi, con raggio .frg-glass-dark Frosted glass scuro .frg-img-hover Immagine che sale e ruota leggermente in hover .frg-grayscale Bianco e nero, a colori in hover .frg-shadow Ombra morbida sotto l'immagine .frg-liquid Distorsione ad acqua in hover (assets/frg-effects.js) .frg-wobble Ondeggiamento continuo dei titoli display ANIMAZIONI IN LOOP (solo CSS) .frg-pulse .frg-float .frg-float-slow .frg-float-fast .frg-breathe .frg-spin-slow .frg-blink ANIMAZIONI ALLO SCROLL (GSAP, vedi legenda più sotto) .frg-fade-in, .frg-slide-up, .frg-reveal-left, .frg-stagger ... FORM (Contact Form 7, sezione 12) .frg-cf7-grid Griglia campi a 2 colonne (nel template del form) .frg-cf7-full Campo a tutta riga .frg-cf7-lab Etichetta del campo .frg-cf7-send Riga finale captcha + invia .frg-cf7-pill Sul modulo: campi a pillola invece che a righe .formRow + one_half Vecchie colonne fluide, tenute per compatibilità MENU (sezione 13, il resto lo gestisce inc/menu) .frg-menu-pill Voce di menu evidenziata a pillola COMPONENTI (sezione 19, usati dalla libreria divi-library) .frg-hero-title Modulo Testo: titolo hero extra large .frg-hero-grid Riga: colonne allineate sul fondo .frg-hero-copy Colonna di testo dell'hero .frg-img-ratio Modulo Immagine 4/3 (-wide 16/9, -tall 4/5, -square) .frg-card Modulo Blurb con immagine: card .frg-card-row Riga: card alte uguali .frg-services Riga con blurb .frg-service numerati 01, 02, 03 .frg-stat Modulo Testo: numero grande + etichetta .frg-cta-row Riga: testo a sinistra, pulsanti a destra .frg-info Elenco recapiti (dl) nella sezione contatti FOOTER (sezione 14) .frg-foot Sezione del footer con pulsanti e social .frg-foot-social Elenco social con icona e freccia .frg-foot-small Testo piccolo (copyright e credits) .frg-foot-credits Credits a destra con logo ========================================================================== */ /* ========================================================================== FRG SCROLL PAGE · CLASSI DIVI (plugin FRG Scroll Page, se installato) ========================================================================== SECTION sezione-fp obbligatoria su ogni section, attiva il full-page hs-section slide orizzontali (default 30vw), dots e skip. Su mobile sempre 90vw. hs-section--half slide 50/50 su desktop (2 slide = statico, 3+ = scroll orizzontale). No dots, no skip. hs-section--full slide 100vw, scroll orizzontale sempre attivo. ROW hs-slide obbligatoria su ogni row che fa da slide, l'ordine nel DOM è l'ordine di scorrimento. ESEMPI Card 33% → sezione-fp hs-section 50/50 → sezione-fp hs-section hs-section--half 100% full → sezione-fp hs-section hs-section--full Row → hs-slide ========================================================================== */ /* ========================================================================== FRG SCROLL ANIMATIONS · LEGENDA CLASSI (v2.0.0) Gestite da GSAP in assets/frg-scroll-animations.js. Nessun CSS necessario, questa è solo una legenda. ========================================================================== ENTRATA BASE (una sola per elemento) .frg-fade-in Dissolvenza (1.2s) .frg-slide-up Sale dal basso (0.6s) .frg-slide-down Scende dall'alto (0.6s) .frg-slide-left Entra da destra (0.6s) .frg-slide-right Entra da sinistra (0.6s) .frg-zoom-in Zoom da piccolo a normale (0.6s) .frg-zoom-out Zoom da grande a normale (0.6s) .frg-blur-in Entra a fuoco da sfocato (0.9s) .frg-tilt-in Entra ruotando di 3 gradi (0.7s) .frg-rise Sale di 24px, spostamento minimo REVEAL A TENDINA (una sola per elemento) .frg-reveal-left / -right / -up / -down CONTENITORE .frg-stagger Anima i figli diretti a cascata (150ms). Va sulla row o sulla colonna. RITARDO .frg-delay-100 / -200 / -300 / -400 / -500 DURATA .frg-fast (0.3s) .frg-slow (1s) ESEMPI Titolo: frg-slide-up Sottotitolo: frg-slide-up frg-delay-200 Paragrafo: frg-fade-in frg-delay-400 Immagine: frg-reveal-left frg-delay-300 Card: frg-stagger (sulla row) DOVE SI APPLICA Divi Builder → Modulo → Avanzate → CSS ID e Classi → Classe CSS NOTE • Togli le animazioni native di Divi (tab Animazione) dai moduli che usano queste classi, altrimenti si sommano. • Nelle sezioni "sezione-fp" ci pensa il plugin FRG Scroll Page. • I reveal usano clip-path, non opacity: l'elemento è già lì e viene solo scoperto. ========================================================================== */ /* ========================================================================== FONT Di partenza: Inter Tight (sans, variabile) e Instrument Serif (corsivo editoriale), già in /fonts. Per un nuovo sito: sostituisci i file, aggiorna questi @font-face, --frg-sans / --frg-serif in :root e i due preload in inc/setup.php (costante FRG_PRELOAD_FONTS). ========================================================================== */ @font-face { font-family: 'Inter Tight'; src: url('fonts/InterTight-Variable.woff2') format('woff2-variations'), url('fonts/InterTight-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ========================================================================== VARIABILI GLOBALI Palette di partenza "chiaro freddo". Contrasti già verificati: muted su bg 5.9, accent-ink su bg 6.8, on-accent su accent 4.9, accent-soft su ink 11. Se cambi i colori, ricontrolla almeno muted su bg e on-accent su accent (minimo 4.5). ========================================================================== */ :root { /* Colori che scegli per ogni sito */ --frg-bg: #F5F7FA; /* fondo principale */ --frg-bg-2: #E9EDF2; /* fondo alternato, card, segnaposto */ --frg-ink: #101820; /* testo e fondi scuri */ --frg-muted: #56616E; /* testo secondario */ --frg-line: #D2D9E1; /* fili e bordi */ --frg-accent: #2E6AE6; /* accento: display, fondi, icone, hover */ --frg-accent-ink: #1F4FB8; /* accento leggibile nei testi piccoli */ --frg-on-accent: #FFFFFF; /* testo sopra l'accento */ --frg-accent-2: #8FB7C4; /* secondo accento, facoltativo */ --frg-accent-soft: #B9CCF5; /* accento chiaro che regge sull'ink */ /* Di servizio, per le sezioni scure */ --frg-on-dark-muted: #A3AEBB; /* testo secondario su ink */ --frg-on-dark-line: #26313D; /* fili su ink */ /* Font */ --frg-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --frg-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif; /* Forma */ --frg-radius: 999px; /* pulsanti e campi: 999px pillola, 8px squadrato */ --frg-radius-lg: 20px; /* card, colonne glass, messaggi */ /* Animazioni di highlight e underline */ --frg-delay: 500ms; --frg-duration: 900ms; /* Griglia. --frg-gut e --frg-max li legge anche il menu: se li cambi, menu e contenuto si spostano insieme. */ --frg-gut: clamp(16px, 4.4vw, 64px); --frg-max: 1600px; /* Altezza del menu fisso: la scrive il menu (inc/menu) in base alle sue impostazioni. .frg-sec-first la usa con 69px di riserva. */ /* Colore del testo prima del reveal (le sezioni scure lo ribaltano) */ --frg-text-fallback: var(--frg-ink); /* Icone SVG dentro campi e input. Sono le uniche con il colore scritto dentro (un non può usare currentColor): se cambi --frg-ink o --frg-bg, aggiorna qui l'esadecimale dopo %23. */ --frg-ico-chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --frg-ico-check-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F7FA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --frg-ico-arrow-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F7FA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); --frg-ico-arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); --frg-ico-arrow-on-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); /* Maschere delle frecce (colore da currentColor, non vanno toccate) */ --frg-mask-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E"); --frg-mask-fwd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); --frg-mask-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); } /* Anti-flash allo scroll page */ html { background: var(--frg-bg); } /* Scrollbar nascosta. Scelta di stile ereditata dai siti precedenti: se il cliente la vuole visibile, cancella questo blocco. */ * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { display: none; } /* ========================================================================== TIPOGRAFIA GLOBALE ========================================================================== */ body { font-family: var(--frg-sans); background-color: var(--frg-bg); color: var(--frg-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body h1, body h2, body h3, body h4, body h5, body .et_pb_module h1, body .et_pb_module h2, body .et_pb_module h3, body .et_pb_module h4, body .et_pb_module h5, body .et_pb_section h1, body .et_pb_section h2, body .et_pb_section h3, body .et_pb_section h4, body .et_pb_section h5 { font-family: var(--frg-sans) !important; font-weight: 300 !important; line-height: 0.98; letter-spacing: -0.04em; color: var(--frg-ink); text-wrap: balance; } h1, .et_pb_module h1 { font-size: clamp(48px, 6.2vw + 8px, 140px); line-height: 0.88; letter-spacing: -0.055em; } h2, .et_pb_module h2 { font-size: clamp(38px, 4.4vw + 10px, 96px); line-height: 0.95; letter-spacing: -0.05em; } h3, .et_pb_module h3 { font-size: clamp(26px, 1.8vw + 18px, 46px); line-height: 1.05; letter-spacing: -0.03em; } h4, .et_pb_module h4 { font-size: clamp(20px, 0.8vw + 17px, 28px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 400 !important; } h5, .et_pb_module h5 { font-size: clamp(17px, 0.5vw + 15px, 22px); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500 !important; } h6, .et_pb_module h6, .frg-label, .frg-label p { font-family: var(--frg-sans) !important; font-size: clamp(11px, 0.19vw + 10.3px, 13px) !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--frg-muted) !important; } /* La regola di tutto il sito: i titoli sono ink, il testo corrente è muted. Con la palette di base il contrasto è 5.9, quindi passa anche per il testo piccolo. Quello che deve restare ink lo dichiara la sua classe, non il contrario. */ p, .et_pb_module p, .et_pb_text p, .et_pb_blurb p, .et_pb_cta p, body:not(.et-fb) ul, body:not(.et-fb) ul li { font-family: var(--frg-sans); font-size: clamp(16px, 0.35vw + 14.7px, 19px); font-weight: 400; line-height: 1.5; color: var(--frg-muted); } /* Sui fondi colorati il muted sparisce: lì il testo prende il colore pieno della sezione (on-accent sull'accento, ink sul secondo accento). */ .frg-sec-accent p, .frg-sec-accent li { color: var(--frg-on-accent) !important; } .frg-sec-accent-2 p, .frg-sec-accent-2 li { color: var(--frg-ink) !important; } /* Corsivo editoriale · l'accento tipografico del brand */ .frg-it, .frg-it p, .frg-it h1, .frg-it h2, .frg-it h3, .frg-it h4, .frg-it h5, span.frg-it, em.frg-it { font-family: var(--frg-serif) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -0.015em !important; } /* Il serif ha un'altezza ottica diversa: riallinea nei titoli grandi */ h1 .frg-it, h2 .frg-it, .et_pb_module h1 .frg-it, .et_pb_module h2 .frg-it { letter-spacing: -0.02em !important; color: var(--frg-accent); } /* Occhiello grande: è tipografia display, quindi resta ink. */ .frg-lead, .frg-lead p { font-size: clamp(22px, 1.6vw + 16px, 40px) !important; font-weight: 300 !important; line-height: 1.16 !important; letter-spacing: -0.02em !important; color: var(--frg-ink) !important; text-wrap: balance; } .frg-muted, .frg-muted p, .frg-muted li { color: var(--frg-muted) !important; } .frg-small p, .frg-small li { font-size: clamp(13px, 0.3vw + 12px, 15px); line-height: 1.5; } p.disclaimer { font-size: clamp(10px, 0.3vw + 9px, 12px) !important; font-weight: 400; line-height: 1.5; color: var(--frg-muted); } /* Numeri tabellari per date, orari, durate */ .frg-num, .frg-num p, .frg-date, .frg-date p { font-variant-numeric: tabular-nums; } .frg-date, .frg-date p { font-size: clamp(40px, 3.4vw + 20px, 80px) !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: -0.045em !important; color: var(--frg-accent) !important; } /* ========================================================================== SEZIONI A FONDO COLORATO Da mettere sulla section Divi. Ribaltano testo, bordi e pulsanti. ========================================================================== */ .frg-sec-light { background-color: var(--frg-bg) !important; } .frg-sec-light-2 { background-color: var(--frg-bg-2) !important; } .frg-sec-accent { background-color: var(--frg-accent) !important; } .frg-sec-accent-2 { background-color: var(--frg-accent-2) !important; } .frg-sec-dark { background-color: var(--frg-ink) !important; } /* Sezione scura: titoli chiari, testo chiaro smorzato */ .frg-sec-dark p, .frg-sec-dark li { color: var(--frg-on-dark-muted) !important; } .frg-sec-dark, .frg-sec-dark h1, .frg-sec-dark h2, .frg-sec-dark h3, .frg-sec-dark h4, .frg-sec-dark h5, .frg-sec-dark .et_pb_module h1, .frg-sec-dark .et_pb_module h2, .frg-sec-dark .et_pb_module h3, .frg-sec-dark .et_pb_module h4, .frg-sec-dark .et_pb_module h5 { color: var(--frg-bg) !important; } .frg-sec-dark .frg-muted, .frg-sec-dark .frg-muted p, .frg-sec-dark h6, .frg-sec-dark .frg-label, .frg-sec-dark .frg-label p { color: var(--frg-on-dark-muted) !important; } .frg-sec-dark h1 .frg-it, .frg-sec-dark h2 .frg-it { color: var(--frg-accent-soft) !important; } .frg-sec-dark { --frg-text-fallback: var(--frg-bg); } /* Sezione accento: tutto in --frg-on-accent, etichette smorzate */ .frg-sec-accent, .frg-sec-accent h1, .frg-sec-accent h2, .frg-sec-accent h3, .frg-sec-accent h4, .frg-sec-accent h5, .frg-sec-accent .et_pb_module h1, .frg-sec-accent .et_pb_module h2, .frg-sec-accent .et_pb_module h3, .frg-sec-accent .et_pb_module h4, .frg-sec-accent .et_pb_module h5, .frg-sec-accent h1 .frg-it, .frg-sec-accent h2 .frg-it { color: var(--frg-on-accent) !important; } .frg-sec-accent { --frg-text-fallback: var(--frg-on-accent); } /* Secondo accento: testo ink */ .frg-sec-accent-2 h1 .frg-it, .frg-sec-accent-2 h2 .frg-it { color: var(--frg-ink) !important; } .frg-sec-accent h6, .frg-sec-accent .frg-label, .frg-sec-accent .frg-label p { color: var(--frg-on-accent) !important; opacity: 0.8; } .frg-sec-accent-2 h6, .frg-sec-accent-2 .frg-label, .frg-sec-accent-2 .frg-label p { color: var(--frg-ink) !important; opacity: 0.75; } /* Fascia bassa a tutta larghezza (avvisi, prossimo evento, numeri). Invece di rincorrere i margini che Divi mette qua e là, la sezione diventa un contenitore flex con un'altezza minima e centra il suo contenuto. Così la centratura è garantita dalla struttura: qualsiasi margine residuo dentro non può più sbilanciarla. */ .frg-band.et_pb_section { display: flex !important; align-items: center !important; min-height: clamp(88px, 8vw, 116px) !important; padding: 0 !important; } .frg-band .et_pb_row, .frg-band .et_pb_column, .frg-band .et_pb_module, .frg-band .et_pb_text, .frg-band .et_pb_text_inner, .frg-band .et_pb_text_inner > p { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .frg-band .et_pb_row { margin-inline: auto !important; padding-block: 18px !important; } /* ========================================================================== LAYOUT ========================================================================== */ /* Sezione full-page centrata verticalmente (plugin scroll) */ .sezione-fp { display: flex !important; align-items: center !important; justify-content: center !important; } /* Riga · altezza naturale, non forzata */ .et_pb_row { min-height: auto !important; } /* Riga 100vh centrata */ .frg-row-full { min-height: 100vh !important; display: flex !important; align-items: center !important; } @media (max-width: 767px) { /* Colonne in colonna */ .et_pb_row { flex-direction: column !important; justify-content: center !important; } .et_pb_row .et_pb_column { width: 100% !important; max-width: 100% !important; } /* Inverti l'ordine delle colonne su mobile */ .reverse-mobile.et_pb_row { display: flex; flex-wrap: wrap; } .reverse-mobile .et_pb_column:first-child { order: 2; } .reverse-mobile .et_pb_column:last-child { order: 1; } } /* Hero · overflow visibile per il pin GSAP */ .frg-hero, .frg-hero.pin-spacer { overflow: visible !important; } /* Testata di sezione: titolo a sinistra, link a destra, filo sotto. Sta tutto dentro un solo modulo Testo: il flex va sul contenitore interno di Divi, così non dipende da come si comportano le colonne. Funziona con h1 (testata di pagina) e h2 (testata di sezione). */ .frg-rule .et_pb_text_inner { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; gap: 16px 24px !important; flex-wrap: wrap !important; border-bottom: 1px solid var(--frg-ink) !important; padding-bottom: 18px !important; } .frg-rule .et_pb_text_inner > * { margin: 0 !important; } .frg-rule h1, .frg-rule h2 { flex: 1 1 auto; } .frg-rule h1 { padding: 0 !important; } .frg-rule .frg-btn-text, .frg-rule .frg-btn-text-fwd { flex: none; } .frg-sec-dark .frg-rule .et_pb_text_inner { border-bottom-color: var(--frg-on-dark-muted) !important; } @media (max-width: 640px) { .frg-rule .et_pb_text_inner { align-items: flex-start !important; } } /* Separatore orizzontale leggero */ .frg-hr { border-top: 1px solid var(--frg-line) !important; padding-top: 20px !important; } .frg-hr-strong { border-top: 1px solid var(--frg-ink) !important; padding-top: 20px !important; } /* ========================================================================== EFFETTI ========================================================================== */ .frg-glass { background: color-mix(in srgb, var(--frg-bg) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .frg-glass-col { background: color-mix(in srgb, var(--frg-bg) 72%, transparent) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border-radius: var(--frg-radius-lg) !important; } .frg-glass-dark, .frg-glass-dark.frg-glass-col { background: color-mix(in srgb, var(--frg-ink) 28%, transparent) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } /* Immagine che sale e ruota leggermente in hover (copertine, prodotti) */ .frg-img-hover img { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1) !important; will-change: transform; } .frg-img-hover:hover img, .frg-img-hover a:hover img { transform: translateY(-6px) rotate(-1.2deg) !important; } /* Immagine in bianco e nero, a colori in hover (video, gallerie) */ .frg-grayscale img { filter: grayscale(1) contrast(1.05) !important; opacity: 0.88 !important; transition: filter 500ms ease, opacity 500ms ease !important; } .frg-grayscale:hover img, .frg-grayscale a:hover img { filter: grayscale(0) !important; opacity: 1 !important; } /* Ombra morbida sotto l'immagine (copertine, prodotti) */ .frg-shadow img { box-shadow: 0 16px 26px -16px color-mix(in srgb, var(--frg-ink) 50%, transparent) !important; } /* ========================================================================== 1. HIGHLIGHT · effetto tendina al reveal Lo stato .frg-revealed lo aggiunge assets/frg-scroll-animations.js (o il plugin FRG Scroll Page). .fr-revealed resta come alias. ========================================================================== */ .frg-hl-accent, .frg-hl-soft, .frg-hl-accent-2, .frg-hl-accent-link, .frg-hl-soft-link, .frg-hl-accent-2-link { padding: 0 4px; margin: 0 -4px; background-repeat: no-repeat; background-size: 0% 68%; background-position: left 70%; transition: background-size var(--frg-duration) ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .frg-hl-accent, .frg-hl-accent-link { background-image: linear-gradient(var(--frg-accent), var(--frg-accent)); color: var(--frg-on-accent); } .frg-hl-soft, .frg-hl-soft-link { background-image: linear-gradient(var(--frg-accent-soft), var(--frg-accent-soft)); color: var(--frg-ink); } .frg-hl-accent-2, .frg-hl-accent-2-link { background-image: linear-gradient(var(--frg-accent-2), var(--frg-accent-2)); color: var(--frg-ink); } .frg-hl-accent.frg-revealed, .frg-hl-accent.fr-revealed, .frg-hl-soft.frg-revealed, .frg-hl-soft.fr-revealed, .frg-hl-accent-2.frg-revealed, .frg-hl-accent-2.fr-revealed, .frg-hl-accent-link.frg-revealed, .frg-hl-accent-link.fr-revealed, .frg-hl-soft-link.frg-revealed, .frg-hl-soft-link.fr-revealed, .frg-hl-accent-2-link.frg-revealed, .frg-hl-accent-2-link.fr-revealed { background-size: 100% 68%; } /* Versione link: in hover l'evidenziatore si scurisce */ .frg-hl-accent-link, .frg-hl-soft-link, .frg-hl-accent-2-link { text-decoration: none; transition: background-size var(--frg-duration) ease, filter 300ms ease; } .frg-hl-accent-link:hover, .frg-hl-soft-link:hover, .frg-hl-accent-2-link:hover { filter: brightness(0.9); } /* ========================================================================== 2. UNDERLINE E LINK DI TESTO ========================================================================== */ /* Sottolineatura che cresce al reveal (solo estetica) */ .frg-underline { background-image: linear-gradient(var(--frg-accent), var(--frg-accent)); background-repeat: no-repeat; background-size: 0% 2px; background-position: left bottom; padding-bottom: 2px; transition: background-size var(--frg-duration) ease; } .frg-underline.frg-revealed, .frg-underline.fr-revealed { background-size: 100% 2px; } /* Link inline con underline statico. I link sono ink anche dentro un paragrafo muted: sono elementi attivi, non testo corrente. L'accento arriva solo in hover. */ .frg-link, .frg-link a, a.frg-link { color: var(--frg-ink) !important; text-decoration: none !important; border-bottom: 1px solid currentColor !important; padding-bottom: 1px !important; transition: color 300ms ease, border-color 300ms ease !important; } .frg-link:hover, .frg-link a:hover, a.frg-link:hover { color: var(--frg-accent-ink) !important; border-color: var(--frg-accent-ink) !important; } .frg-sec-dark .frg-link, .frg-sec-dark a.frg-link, .frg-link.on-dark, a.frg-link.on-dark { color: var(--frg-bg) !important; } .frg-sec-dark .frg-link:hover, .frg-sec-dark a.frg-link:hover, .frg-link.on-dark:hover, a.frg-link.on-dark:hover { color: var(--frg-accent-soft) !important; border-color: var(--frg-accent-soft) !important; } /* Sulle sezioni accento l'accento non si vedrebbe: il link segue il colore del testo della sezione e in hover va a ink */ .frg-sec-accent .frg-link, .frg-sec-accent a.frg-link { color: var(--frg-on-accent) !important; border-color: var(--frg-on-accent) !important; } .frg-sec-accent-2 .frg-link, .frg-sec-accent-2 a.frg-link { color: var(--frg-ink) !important; border-color: var(--frg-ink) !important; } .frg-sec-accent .frg-link:hover, .frg-sec-accent a.frg-link:hover { color: var(--frg-ink) !important; border-color: var(--frg-ink) !important; } .frg-sec-accent-2 .frg-link:hover, .frg-sec-accent-2 a.frg-link:hover { color: var(--frg-bg) !important; border-color: var(--frg-bg) !important; } /* ========================================================================== 3. PILLOLE · base comune a solid, outline e accent L'altezza la decide min-height, non il padding verticale: così aggiungere un'icona dentro non cambia la dimensione del pulsante. ========================================================================== */ .frg-btn-solid.et_pb_button, .frg-btn-outline.et_pb_button, .frg-btn-accent.et_pb_button, a.frg-btn-solid, a.frg-btn-outline, a.frg-btn-accent, button.frg-btn-solid, button.frg-btn-outline, button.frg-btn-accent { font-family: var(--frg-sans) !important; font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1 !important; min-height: 50px !important; padding: 0 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; background-image: none !important; border: 1px solid transparent !important; border-radius: var(--frg-radius) !important; text-decoration: none !important; cursor: pointer !important; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important; } @media (max-width: 480px) { .frg-btn-solid.et_pb_button, .frg-btn-outline.et_pb_button, .frg-btn-accent.et_pb_button, a.frg-btn-solid, a.frg-btn-outline, a.frg-btn-accent, button.frg-btn-solid, button.frg-btn-outline, button.frg-btn-accent { min-height: 46px !important; padding: 0 20px !important; } } /* Via le frecce native di Divi dalle pillole */ .frg-btn-solid.et_pb_button::before, .frg-btn-solid.et_pb_button::after, .frg-btn-outline.et_pb_button::before, .frg-btn-outline.et_pb_button::after, .frg-btn-accent.et_pb_button::before, .frg-btn-accent.et_pb_button::after { display: none !important; content: none !important; } /* ── 3.1 SOLID · pieno ink, hover accento ─────────────────── */ .frg-btn-solid.et_pb_button, a.frg-btn-solid, button.frg-btn-solid { color: var(--frg-bg) !important; background-color: var(--frg-ink) !important; border-color: var(--frg-ink) !important; } .frg-btn-solid.et_pb_button:hover, a.frg-btn-solid:hover, button.frg-btn-solid:hover { color: var(--frg-on-accent) !important; background-color: var(--frg-accent) !important; border-color: var(--frg-accent) !important; } /* Su fondo scuro si inverte: pieno chiaro, hover accento */ .frg-btn-solid.on-dark.et_pb_button, .frg-sec-dark .frg-btn-solid.et_pb_button, .frg-sec-dark a.frg-btn-solid, a.frg-btn-solid.on-dark { color: var(--frg-ink) !important; background-color: var(--frg-bg) !important; border-color: var(--frg-bg) !important; } .frg-btn-solid.on-dark.et_pb_button:hover, .frg-sec-dark .frg-btn-solid.et_pb_button:hover, .frg-sec-dark a.frg-btn-solid:hover, a.frg-btn-solid.on-dark:hover { color: var(--frg-on-accent) !important; background-color: var(--frg-accent) !important; border-color: var(--frg-accent) !important; } /* Su fondo accento l'hover accento sparirebbe: diventa chiaro */ .frg-sec-accent .frg-btn-solid.et_pb_button:hover, .frg-sec-accent a.frg-btn-solid:hover, .frg-sec-accent-2 .frg-btn-solid.et_pb_button:hover, .frg-sec-accent-2 a.frg-btn-solid:hover { color: var(--frg-ink) !important; background-color: var(--frg-bg) !important; border-color: var(--frg-bg) !important; } /* ── 3.2 OUTLINE · bordo ink, hover pieno ─────────────────── */ .frg-btn-outline.et_pb_button, a.frg-btn-outline, button.frg-btn-outline { color: var(--frg-ink) !important; background-color: transparent !important; border-color: var(--frg-ink) !important; } .frg-btn-outline.et_pb_button:hover, a.frg-btn-outline:hover, button.frg-btn-outline:hover { color: var(--frg-bg) !important; background-color: var(--frg-ink) !important; } .frg-btn-outline.on-dark.et_pb_button, .frg-sec-dark .frg-btn-outline.et_pb_button, .frg-sec-dark a.frg-btn-outline, a.frg-btn-outline.on-dark { color: var(--frg-bg) !important; border-color: var(--frg-bg) !important; } .frg-btn-outline.on-dark.et_pb_button:hover, .frg-sec-dark .frg-btn-outline.et_pb_button:hover, .frg-sec-dark a.frg-btn-outline:hover, a.frg-btn-outline.on-dark:hover { color: var(--frg-ink) !important; background-color: var(--frg-bg) !important; } .frg-sec-accent .frg-btn-outline.et_pb_button, .frg-sec-accent a.frg-btn-outline { color: var(--frg-on-accent) !important; border-color: var(--frg-on-accent) !important; } .frg-sec-accent .frg-btn-outline.et_pb_button:hover, .frg-sec-accent a.frg-btn-outline:hover { color: var(--frg-accent) !important; background-color: var(--frg-on-accent) !important; } /* ── 3.3 ACCENT · pieno accento, la call to action principale ─ */ .frg-btn-accent.et_pb_button, a.frg-btn-accent, button.frg-btn-accent { font-weight: 500 !important; color: var(--frg-on-accent) !important; background-color: var(--frg-accent) !important; border-color: var(--frg-accent) !important; } .frg-btn-accent.et_pb_button:hover, a.frg-btn-accent:hover, button.frg-btn-accent:hover { color: var(--frg-bg) !important; background-color: var(--frg-ink) !important; border-color: var(--frg-ink) !important; } /* Su fondo accento il pulsante accento sparirebbe: si inverte */ .frg-sec-accent .frg-btn-accent.et_pb_button, .frg-sec-accent a.frg-btn-accent { color: var(--frg-accent) !important; background-color: var(--frg-on-accent) !important; border-color: var(--frg-on-accent) !important; } /* Su fondo scuro l'hover ink sparirebbe nel nero: diventa chiaro */ .frg-sec-dark .frg-btn-accent.et_pb_button:hover, .frg-sec-dark a.frg-btn-accent:hover, .frg-btn-accent.on-dark.et_pb_button:hover, a.frg-btn-accent.on-dark:hover { color: var(--frg-ink) !important; background-color: var(--frg-bg) !important; border-color: var(--frg-bg) !important; } /* ── 3.4 FRECCIA E PLAY dentro le pillole ─────────────────── */ /* .frg-btn-arrow insieme a solid, outline o accent. La freccia è una maschera colorata con currentColor, quindi segue il colore del testo anche in hover e su fondo scuro. */ @supports ((mask-image: none) or (-webkit-mask-image: none)) { .frg-btn-solid.frg-btn-arrow.et_pb_button::after, .frg-btn-outline.frg-btn-arrow.et_pb_button::after, .frg-btn-accent.frg-btn-arrow.et_pb_button::after, a.frg-btn-arrow.frg-btn-solid::after, a.frg-btn-arrow.frg-btn-outline::after, a.frg-btn-arrow.frg-btn-accent::after { content: '' !important; display: inline-block !important; position: static !important; width: 14px !important; height: 14px !important; margin: 0 !important; opacity: 1 !important; flex-shrink: 0 !important; font-size: 0 !important; line-height: 0 !important; background-color: currentColor !important; -webkit-mask: var(--frg-mask-arrow) center / contain no-repeat !important; mask: var(--frg-mask-arrow) center / contain no-repeat !important; transform: none !important; transition: transform 300ms ease !important; } .frg-btn-arrow.et_pb_button:hover::after, a.frg-btn-arrow:hover::after { transform: translate(2px, -2px) !important; } } /* .frg-btn-play: triangolo disegnato con i bordi, segue il colore del testo e non dipende dal supporto delle maschere */ .frg-btn-play.et_pb_button::before, a.frg-btn-play::before, button.frg-btn-play::before { content: '' !important; display: inline-block !important; width: 0 !important; height: 0 !important; flex-shrink: 0 !important; align-self: center !important; border-style: solid !important; border-width: 0.24em 0 0.24em 0.38em !important; border-color: transparent transparent transparent currentColor !important; background: none !important; position: static !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* ========================================================================== 4. BUTTON TEXT · link maiuscoletto con icona Le icone sono maschere con currentColor: cambiano colore da sole con la palette, in hover e sulle sezioni scure. ========================================================================== */ .frg-btn-text.et_pb_button, .frg-btn-text-fwd.et_pb_button, .frg-btn-text-back.et_pb_button, a.frg-btn-text, a.frg-btn-text-fwd, a.frg-btn-text-back { font-family: var(--frg-sans) !important; font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--frg-muted) !important; text-decoration: none !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; padding: 4px 1.8em 4px 0 !important; position: relative !important; display: inline-block !important; background-image: linear-gradient(currentColor, currentColor) !important; background-size: 0% 1px !important; background-position: left bottom !important; background-repeat: no-repeat !important; transition: color 350ms ease, background-size 350ms ease !important; } .frg-btn-text.et_pb_button:hover, .frg-btn-text-fwd.et_pb_button:hover, .frg-btn-text-back.et_pb_button:hover, a.frg-btn-text:hover, a.frg-btn-text-fwd:hover, a.frg-btn-text-back:hover { color: var(--frg-ink) !important; background-size: 100% 1px !important; } .frg-btn-text.et_pb_button::before, .frg-btn-text-fwd.et_pb_button::before, .frg-btn-text-back.et_pb_button::before { display: none !important; content: none !important; } /* Icona comune */ .frg-btn-text.et_pb_button::after, .frg-btn-text-fwd.et_pb_button::after, .frg-btn-text-back.et_pb_button::after, a.frg-btn-text::after, a.frg-btn-text-fwd::after, a.frg-btn-text-back::after { content: '' !important; font-family: initial !important; font-size: inherit !important; display: block !important; width: 1.05em !important; height: 1.05em !important; position: absolute !important; right: 0 !important; left: auto !important; top: 50% !important; margin: 0 !important; opacity: 1 !important; background-color: currentColor !important; -webkit-mask: var(--frg-mask-arrow) center / contain no-repeat !important; mask: var(--frg-mask-arrow) center / contain no-repeat !important; transform: translateY(-50%) !important; transition: transform 350ms ease !important; } /* 4a. Freccia diagonale */ .frg-btn-text.et_pb_button:hover::after, a.frg-btn-text:hover::after { transform: translateY(-50%) translate(2px, -2px) !important; } /* 4b. Chevron avanti */ .frg-btn-text-fwd.et_pb_button::after, a.frg-btn-text-fwd::after { -webkit-mask-image: var(--frg-mask-fwd) !important; mask-image: var(--frg-mask-fwd) !important; } .frg-btn-text-fwd.et_pb_button:hover::after, a.frg-btn-text-fwd:hover::after { transform: translateY(-50%) translateX(4px) !important; } /* 4c. Chevron indietro: icona a sinistra */ .frg-btn-text-back.et_pb_button, a.frg-btn-text-back { padding: 4px 0 4px 1.8em !important; background-position: right bottom !important; } .frg-btn-text-back.et_pb_button::after, a.frg-btn-text-back::after { left: 0 !important; right: auto !important; -webkit-mask-image: var(--frg-mask-back) !important; mask-image: var(--frg-mask-back) !important; } .frg-btn-text-back.et_pb_button:hover::after, a.frg-btn-text-back:hover::after { transform: translateY(-50%) translateX(-4px) !important; } /* 4d. Su fondo scuro */ .frg-btn-text.on-dark.et_pb_button, .frg-btn-text-fwd.on-dark.et_pb_button, .frg-btn-text-back.on-dark.et_pb_button, a.frg-btn-text.on-dark, a.frg-btn-text-fwd.on-dark, a.frg-btn-text-back.on-dark, .frg-sec-dark .frg-btn-text.et_pb_button, .frg-sec-dark .frg-btn-text-fwd.et_pb_button, .frg-sec-dark .frg-btn-text-back.et_pb_button, .frg-sec-dark a.frg-btn-text, .frg-sec-dark a.frg-btn-text-fwd, .frg-sec-dark a.frg-btn-text-back { color: var(--frg-on-dark-muted) !important; } .frg-btn-text.on-dark.et_pb_button:hover, .frg-btn-text-fwd.on-dark.et_pb_button:hover, .frg-btn-text-back.on-dark.et_pb_button:hover, a.frg-btn-text.on-dark:hover, a.frg-btn-text-fwd.on-dark:hover, a.frg-btn-text-back.on-dark:hover, .frg-sec-dark .frg-btn-text.et_pb_button:hover, .frg-sec-dark .frg-btn-text-fwd.et_pb_button:hover, .frg-sec-dark .frg-btn-text-back.et_pb_button:hover, .frg-sec-dark a.frg-btn-text:hover, .frg-sec-dark a.frg-btn-text-fwd:hover, .frg-sec-dark a.frg-btn-text-back:hover { color: var(--frg-bg) !important; } /* 4e. Sulle sezioni accento: colore del testo della sezione, smorzato */ .frg-sec-accent .frg-btn-text.et_pb_button, .frg-sec-accent .frg-btn-text-fwd.et_pb_button, .frg-sec-accent .frg-btn-text-back.et_pb_button, .frg-sec-accent a.frg-btn-text, .frg-sec-accent a.frg-btn-text-fwd, .frg-sec-accent a.frg-btn-text-back { color: var(--frg-on-accent) !important; opacity: 0.8 !important; } .frg-sec-accent-2 .frg-btn-text.et_pb_button, .frg-sec-accent-2 .frg-btn-text-fwd.et_pb_button, .frg-sec-accent-2 .frg-btn-text-back.et_pb_button, .frg-sec-accent-2 a.frg-btn-text, .frg-sec-accent-2 a.frg-btn-text-fwd, .frg-sec-accent-2 a.frg-btn-text-back { color: var(--frg-ink) !important; opacity: 0.75 !important; } .frg-sec-accent .frg-btn-text:hover, .frg-sec-accent-2 .frg-btn-text:hover, .frg-sec-accent .frg-btn-text-fwd:hover, .frg-sec-accent-2 .frg-btn-text-fwd:hover, .frg-sec-accent .frg-btn-text-back:hover, .frg-sec-accent-2 .frg-btn-text-back:hover { opacity: 1 !important; } /* ========================================================================== 5. BUTTON SOCIAL · pieno con icona a sinistra L'icona va messa come dentro il link. ========================================================================== */ .frg-btn-social { font-family: var(--frg-sans) !important; font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important; font-weight: 500 !important; color: var(--frg-ink) !important; background-color: var(--frg-accent-soft) !important; border-radius: var(--frg-radius) !important; padding: 13px 24px 13px 46px !important; border: 1px solid var(--frg-accent-soft) !important; position: relative !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; transition: background-color 300ms ease, border-color 300ms ease !important; } .frg-btn-social svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; position: absolute !important; left: 20px !important; } .frg-btn-social:hover { background-color: var(--frg-accent) !important; border-color: var(--frg-accent) !important; color: var(--frg-on-accent) !important; } /* ========================================================================== 6. BUTTON GROUP · pulsanti affiancati, wrap su mobile ========================================================================== */ .frg-btn-group { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; } .frg-btn-group .et_pb_button_module_wrapper { margin: 0 !important; } /* ========================================================================== 7. CAMPI FORM · stile pill ========================================================================== */ .frg-field, .frg-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .frg-form select { min-height: 50px !important; padding: 0 20px !important; border: 1px solid var(--frg-ink) !important; border-radius: var(--frg-radius) !important; background-color: color-mix(in srgb, var(--frg-bg) 60%, transparent) !important; font-family: var(--frg-sans) !important; font-size: 15px !important; color: var(--frg-ink) !important; } .frg-form textarea { padding: 16px 20px !important; border: 1px solid var(--frg-ink) !important; border-radius: min(var(--frg-radius), 24px) !important; background-color: color-mix(in srgb, var(--frg-bg) 60%, transparent) !important; font-family: var(--frg-sans) !important; font-size: 15px !important; color: var(--frg-ink) !important; min-height: 130px !important; } .frg-field::placeholder, .frg-form input::placeholder, .frg-form textarea::placeholder { color: var(--frg-muted) !important; opacity: 1 !important; } .frg-sec-dark .frg-field, .frg-sec-dark .frg-form input:not([type=submit]), .frg-sec-dark .frg-form textarea { border-color: var(--frg-muted) !important; background-color: transparent !important; color: var(--frg-bg) !important; } .frg-sec-dark .frg-form input::placeholder, .frg-sec-dark .frg-form textarea::placeholder { color: var(--frg-on-dark-muted) !important; } /* ========================================================================== 8. FOCUS VISIBILE · accessibilità ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .et_pb_button:focus-visible { outline: 2px solid var(--frg-accent) !important; outline-offset: 3px !important; } .frg-sec-dark a:focus-visible, .frg-sec-dark button:focus-visible, .frg-sec-dark input:focus-visible { outline-color: var(--frg-accent-soft) !important; } /* Testo per soli screen reader */ .frg-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } /* ========================================================================== 9. ANIMAZIONI IN LOOP (CSS) Decorative, indipendenti dallo scroll. Si spengono con reduced motion. ========================================================================== */ /* Pulsazione · pallini di stato, badge */ .frg-pulse { animation: frg-pulse 2.4s ease-in-out infinite; } @keyframes frg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* Galleggiamento · orb, elementi decorativi, immagini staccate */ .frg-float, .frg-float-slow, .frg-float-fast { animation-name: frg-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform-box: fill-box; transform-origin: center; will-change: transform; } .frg-float { animation-duration: 9s; } .frg-float-slow { animation-duration: 12s; animation-delay: -4s; } .frg-float-fast { animation-duration: 7s; animation-delay: -2s; } @keyframes frg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } /* Respiro · cerchi grandi, sfondi */ .frg-breathe { animation: frg-breathe 14s ease-in-out infinite; transform-box: fill-box; transform-origin: center; will-change: transform; } @keyframes frg-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } /* Rotazione lenta · elementi circolari */ .frg-spin-slow { animation: frg-spin 40s linear infinite; transform-box: fill-box; transform-origin: center; } @keyframes frg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Cursore lampeggiante */ .frg-blink { animation: frg-blink 1.6s steps(2, start) infinite; } @keyframes frg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ========================================================================== 10. MARQUEE · loghi e nomi scorrevoli Queste classi servono al modulo marquee di un plugin Divi. ========================================================================== */ .frg-marquee .et_pb_column { min-width: 0; overflow: hidden; } .frg-marquee .frg-marquee-wrapper, .frg-marquee .frg-marquee-clip { width: 100%; max-width: 100%; } @media (max-width: 767px) { .frg-marquee-clip { padding: 16px 0 !important; box-sizing: content-box !important; } } /* ========================================================================== 11. COLONNE FLUIDE PER I FORM (Contact Form 7) ========================================================================== */ .formRow { margin: 0 -15px; } .formRow .full_width, .formRow .one_half, .formRow .one_third, .formRow .two_third, .formRow .one_fourth, .formRow .three_fourth, .formRow .one_fifth, .formRow .two_fifth, .formRow .three_fifth, .formRow .four_fifth, .formRow .one_sixth, .formRow .five_sixth { padding: 0 15px !important; margin: 0 0 15px !important; float: left; } .formRow .full_width { width: 100% !important; } .formRow .one_half { width: 50% !important; } .formRow .one_third { width: 33.333333% !important; } .formRow .two_third { width: 66.666666% !important; } .formRow .one_fourth { width: 25% !important; } .formRow .three_fourth { width: 75% !important; } .formRow .one_fifth { width: 20% !important; } .formRow .two_fifth { width: 40% !important; } .formRow .three_fifth { width: 60% !important; } .formRow .four_fifth { width: 80% !important; } .formRow .one_sixth { width: 16.666666% !important; } .formRow .five_sixth { width: 83.333333% !important; } .formRow label { width: 100%; display: block; } .formRow input:not([type=checkbox]), .formRow textarea, .formRow select { width: 100%; display: block; } .formRow .wpcf7-list-item:first-of-type { margin-left: 0 !important; } .formRow:after { content: ''; display: block; clear: both; } @media (max-width: 767px) { .formRow .full_width, .formRow .one_half, .formRow .one_third, .formRow .two_third, .formRow .one_fourth, .formRow .three_fourth, .formRow .one_fifth, .formRow .two_fifth, .formRow .three_fifth, .formRow .four_fifth, .formRow .one_sixth, .formRow .five_sixth { width: 100% !important; } } /* ========================================================================== 12. CONTACT FORM 7 Vale per tutti i form CF7. Campi a "righe" (solo filo sotto, testo grande e leggero). Variante a pillola: classe frg-cf7-pill sul modulo che contiene il form. Invia = pillola frg-btn-solid con freccia (è un input: freccia di sfondo). Classi del template del form: frg-cf7-grid (griglia a 2 colonne), frg-cf7-full (campo a tutta riga), frg-cf7-lab (etichetta), frg-cf7-send (riga finale captcha + invia). Captcha a icone: plugin Contact Form 7 Image Captcha, tag [cf7ic]. ========================================================================== */ /* ── 12.1 STRUTTURA ─────────────────────────────────────── */ .wpcf7 form { margin: 0 !important; } .wpcf7 form p { margin: 0 !important; padding: 0 !important; font-size: inherit !important; } .wpcf7 form br { display: none; } .wpcf7 label { display: block; } .wpcf7-form-control-wrap { display: block; position: relative; } .frg-cf7-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px); } .frg-cf7-grid > .frg-cf7-full { grid-column: 1 / -1; } @media (max-width: 767px) { .frg-cf7-grid { grid-template-columns: 1fr; } } .frg-cf7-lab { display: block !important; margin-bottom: 10px !important; font-family: var(--frg-sans) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--frg-muted) !important; } .frg-cf7-lab i { font-style: normal !important; color: var(--frg-accent-ink) !important; } /* ── 12.2 CAMPI · righe ─────────────────────────────────── */ .wpcf7 input.wpcf7-text, .wpcf7 input.wpcf7-email, .wpcf7 input.wpcf7-tel, .wpcf7 input.wpcf7-number, .wpcf7 input.wpcf7-date, .wpcf7 select.wpcf7-select, .wpcf7 textarea.wpcf7-textarea { display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 6px 0 14px !important; font-family: var(--frg-sans) !important; font-size: clamp(19px, 0.6vw + 15px, 24px) !important; font-weight: 300 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; color: var(--frg-ink) !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--frg-ink) !important; border-radius: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; transition: border-color 300ms ease, box-shadow 300ms ease !important; } .wpcf7 textarea.wpcf7-textarea { height: 150px !important; min-height: 110px !important; resize: vertical; } .wpcf7 select.wpcf7-select { padding-right: 32px !important; cursor: pointer; background-image: var(--frg-ico-chevron-ink) !important; background-repeat: no-repeat !important; background-position: right 2px center !important; background-size: 20px !important; } .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--frg-muted) !important; opacity: 1 !important; } .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):hover { border-bottom-color: var(--frg-accent) !important; } .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus { outline: none !important; border-bottom-color: var(--frg-accent) !important; box-shadow: 0 1px 0 0 var(--frg-accent) !important; } /* ── 12.3 CAMPI · pillola (frg-cf7-pill sul modulo) ──────── */ .frg-cf7-pill .wpcf7 input.wpcf7-text, .frg-cf7-pill .wpcf7 input.wpcf7-email, .frg-cf7-pill .wpcf7 input.wpcf7-tel, .frg-cf7-pill .wpcf7 select.wpcf7-select { min-height: 56px !important; padding: 0 22px !important; font-size: 16px !important; font-weight: 400 !important; border: 1px solid var(--frg-ink) !important; border-radius: var(--frg-radius) !important; background-color: rgba(255, 255, 255, 0.35) !important; } .frg-cf7-pill .wpcf7 select.wpcf7-select { padding-right: 48px !important; background-position: right 18px center !important; } .frg-cf7-pill .wpcf7 textarea.wpcf7-textarea { padding: 18px 22px !important; font-size: 16px !important; font-weight: 400 !important; border: 1px solid var(--frg-ink) !important; border-radius: min(var(--frg-radius), 28px) !important; background-color: rgba(255, 255, 255, 0.35) !important; } .frg-cf7-pill .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus { border-color: var(--frg-accent) !important; box-shadow: 0 0 0 1px var(--frg-accent) !important; } .frg-cf7-pill .frg-cf7-lab, .frg-cf7-pill .wpcf7-not-valid-tip { margin-left: 22px !important; } /* ── 12.4 PRIVACY (acceptance) e checkbox ───────────────── */ .wpcf7-acceptance .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item { display: block !important; margin: 0 !important; } .wpcf7-acceptance label, .wpcf7-checkbox label { display: flex !important; align-items: flex-start; gap: 14px; cursor: pointer; font-size: 15px !important; line-height: 1.5 !important; color: var(--frg-muted) !important; } .wpcf7-acceptance input[type=checkbox], .wpcf7-checkbox input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; border: 1px solid var(--frg-ink) !important; border-radius: 6px !important; background: transparent; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; } .wpcf7-acceptance input[type=checkbox]:checked, .wpcf7-checkbox input[type=checkbox]:checked { background: var(--frg-ink) var(--frg-ico-check-bg) center / 16px no-repeat; } .wpcf7-acceptance a { color: var(--frg-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; } .wpcf7-acceptance a:hover { color: var(--frg-accent-ink) !important; } /* ── 12.5 CAPTCHA A ICONE (plugin CF7 Image Captcha) ─────── */ .wpcf7 .kc_captcha, .wpcf7 .kc_captcha .wpcf7-radio, .wpcf7 .captcha-image { text-align: left !important; } .wpcf7 .captcha-image { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; gap: 10px 12px; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .wpcf7 .cf7ic_instructions { display: block !important; width: 100%; margin: 0 0 4px !important; text-align: left !important; font-size: 15px !important; color: var(--frg-muted) !important; } .wpcf7 .cf7ic_instructions span { color: var(--frg-ink) !important; font-weight: 500 !important; } .wpcf7 .captcha-image label { position: relative; display: inline-grid !important; place-items: center; width: 58px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; color: var(--frg-ink) !important; border: 1px solid var(--frg-line) !important; border-radius: var(--frg-radius) !important; background: transparent !important; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease; } .wpcf7 .captcha-image label:hover { border-color: var(--frg-ink) !important; } .wpcf7 .captcha-image label > input { position: absolute !important; inset: 0; margin: 0 !important; opacity: 0 !important; cursor: pointer; } .wpcf7 .captcha-image label svg, .wpcf7 .captcha-image label > input + svg { width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; fill: currentColor !important; color: inherit !important; } .wpcf7 .captcha-image label:has(input:checked) { background: var(--frg-ink) !important; border-color: var(--frg-ink) !important; color: var(--frg-bg) !important; } .wpcf7 .captcha-image label:has(input:checked) svg { color: var(--frg-bg) !important; fill: var(--frg-bg) !important; } .wpcf7 .captcha-image label:has(input:focus-visible) { outline: 2px solid var(--frg-accent); outline-offset: 3px; } /* ── 12.6 RIGA FINALE e INVIA ───────────────────────────── */ .frg-cf7-send { display: flex !important; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 32px; padding-top: clamp(22px, 2.4vw, 34px); } .frg-cf7-send p { display: flex; align-items: center; gap: 14px; } .wpcf7 input.wpcf7-submit { display: inline-block !important; box-sizing: border-box !important; width: auto !important; margin: 0 !important; padding: 18px 58px 18px 32px !important; font-family: var(--frg-sans) !important; font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--frg-bg) !important; background-color: var(--frg-ink) !important; background-image: var(--frg-ico-arrow-bg) !important; background-repeat: no-repeat !important; background-size: 16px !important; background-position: right 28px center !important; border: 1px solid var(--frg-ink) !important; border-radius: var(--frg-radius) !important; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, background-position 300ms ease !important; } .wpcf7 input.wpcf7-submit:hover { color: var(--frg-on-accent) !important; background-color: var(--frg-accent) !important; background-image: var(--frg-ico-arrow-on-accent) !important; background-position: right 25px center !important; border-color: var(--frg-accent) !important; } .wpcf7 input.wpcf7-submit:disabled { opacity: 0.35; cursor: not-allowed; } .wpcf7 input.wpcf7-submit:disabled:hover { color: var(--frg-bg) !important; background-color: var(--frg-ink) !important; border-color: var(--frg-ink) !important; } .wpcf7 .wpcf7-spinner { margin: 0 !important; background-color: var(--frg-muted) !important; } /* ── 12.7 ERRORI e MESSAGGIO FINALE ─────────────────────── */ .wpcf7 .wpcf7-not-valid { border-bottom-color: var(--frg-accent-ink) !important; } .frg-cf7-pill .wpcf7 .wpcf7-not-valid { border-color: var(--frg-accent-ink) !important; } .wpcf7 .wpcf7-not-valid-tip { display: block !important; width: 100%; margin-top: 8px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--frg-accent-ink) !important; } .wpcf7 form .wpcf7-response-output { position: relative; margin: clamp(20px, 2vw, 28px) 0 0 !important; padding: 16px 20px 16px 48px !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--frg-ink) !important; border: 1px solid var(--frg-line) !important; border-radius: var(--frg-radius-lg) !important; background: transparent !important; } .wpcf7 form .wpcf7-response-output::before { content: ''; position: absolute; left: 20px; top: 19px; width: 14px; height: 14px; border-radius: var(--frg-radius); background: var(--frg-accent); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { color: var(--frg-accent-ink) !important; border-color: var(--frg-accent-ink) !important; } .wpcf7 form.sent .wpcf7-response-output { color: var(--frg-bg) !important; background: var(--frg-ink) !important; border-color: var(--frg-ink) !important; } .wpcf7 form.sent .wpcf7-response-output::before { background: var(--frg-accent-soft); } /* ── 12.8 FORM SU FONDO SCURO ───────────────────────────── */ .frg-sec-dark .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) { color: var(--frg-bg) !important; border-color: var(--frg-on-dark-muted) !important; } .frg-sec-dark .wpcf7 input::placeholder, .frg-sec-dark .wpcf7 textarea::placeholder { color: var(--frg-on-dark-muted) !important; } .frg-sec-dark .frg-cf7-lab, .frg-sec-dark .wpcf7-acceptance label, .frg-sec-dark .wpcf7 .cf7ic_instructions { color: var(--frg-on-dark-muted) !important; } .frg-sec-dark .wpcf7 input.wpcf7-submit { color: var(--frg-ink) !important; background-color: var(--frg-bg) !important; border-color: var(--frg-bg) !important; background-image: var(--frg-ico-arrow-ink) !important; } .frg-sec-dark .wpcf7 input.wpcf7-submit:hover { background-color: var(--frg-accent) !important; border-color: var(--frg-accent) !important; color: var(--frg-on-accent) !important; background-image: var(--frg-ico-arrow-on-accent) !important; } /* ========================================================================== 13. MENU Navbar, hamburger e overlay li gestisce il menu integrato nel tema (inc/menu, impostazioni in Aspetto → FRG Menu). Qui resta solo la voce a pillola, da assegnare a mano a una voce in Aspetto → Menu (classe CSS frg-menu-pill). ========================================================================== */ .frg-menu-pill > a, a.frg-menu-pill { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 16px !important; border-radius: var(--frg-radius) !important; background-color: var(--frg-accent-2) !important; color: var(--frg-ink) !important; transition: background-color 300ms ease !important; } .frg-menu-pill > a::before, a.frg-menu-pill::before { content: '' !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background-color: var(--frg-accent) !important; flex-shrink: 0 !important; } .frg-menu-pill > a:hover, a.frg-menu-pill:hover { background-color: var(--frg-accent-soft) !important; color: var(--frg-ink) !important; } /* ========================================================================== 14. FOOTER Footer fatto con il Theme Builder di Divi. Di base è scuro: se il sito lo vuole chiaro, cancella il blocco 14.0 e usa .frg-sec-light sulla section del footer. Struttura consigliata (una section .frg-sec-dark .frg-foot): riga 1 colonna sinistra .frg-btn-row: titolo, testo, 2 pulsanti colonna destra .frg-foot-social-wrap: etichetta + social riga 2 .frg-hr, copyright (.frg-foot-small) e credits (.frg-foot-small .frg-foot-credits) ========================================================================== */ /* ── 14.0 FOOTER SCURO DI BASE ─────────────────────────── */ .et-l--footer { background-color: var(--frg-ink); } .et-l--footer, .et-l--footer p, .et-l--footer li, .et-l--footer h1, .et-l--footer h2, .et-l--footer h3, .et-l--footer h4, .et-l--footer h5 { color: var(--frg-bg) !important; } .et-l--footer h6, .et-l--footer .frg-label, .et-l--footer .frg-label p { color: var(--frg-on-dark-muted) !important; } .et-l--footer a { color: var(--frg-bg) !important; } .et-l--footer a:hover { color: var(--frg-accent-soft) !important; } .et-l--footer .frg-it { color: var(--frg-accent-soft) !important; } .et-l--footer .frg-hr, .et-l--footer .frg-hr-strong { border-top-color: var(--frg-on-dark-line) !important; } /* ── 14.1 PULSANTI E SOCIAL ────────────────────────────── */ /* Pulsanti del footer: la colonna diventa una riga flessibile. I moduli testo prendono tutta la larghezza, i due pulsanti stanno affiancati e centrati in verticale, con lo stesso spazio di frg-btn-row. Su schermi stretti vanno a capo. */ .frg-foot .frg-btn-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 12px !important; row-gap: 16px !important; } .frg-foot .frg-btn-row > .et_pb_module:not(.et_pb_button_module_wrapper) { flex: 0 0 100% !important; } .frg-foot .frg-btn-row > .et_pb_text:has(+ .et_pb_button_module_wrapper) { margin-bottom: clamp(12px, 1.6vw, 20px) !important; } .frg-foot .frg-btn-row .et_pb_button_module_wrapper, .frg-foot .frg-btn-row .et_pb_module.et_pb_button_module_wrapper { display: block !important; flex: none !important; width: auto !important; margin: 0 !important; } /* Social: una riga per piattaforma, icona + nome + freccia */ .frg-foot-social-wrap .frg-label { margin-bottom: 12px !important; } .frg-sec-dark .frg-foot-social a { display: flex !important; align-items: center !important; gap: 14px !important; padding-block: 20px !important; border-top: 1px solid var(--frg-on-dark-line) !important; font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.2 !important; color: var(--frg-bg) !important; text-decoration: none !important; transition: color .2s ease !important; } .frg-sec-dark .frg-foot-social a:last-child { border-bottom: 1px solid var(--frg-on-dark-line) !important; } .frg-sec-dark .frg-foot-social a:hover { color: var(--frg-accent-soft) !important; } .frg-foot-social svg { width: 22px; height: 22px; flex: none; } .frg-foot-social .frg-foot-arrow { width: 18px; height: 18px; margin-left: auto; opacity: .55; transition: transform .3s ease, opacity .3s ease; } .frg-foot-social a:hover .frg-foot-arrow { opacity: 1; transform: translate(2px, -2px); } /* Su tablet e mobile le colonne vanno una sotto l'altra: frg-row-tight toglie il margine, lo rimettiamo sopra i social */ @media (max-width: 980px) { .frg-foot-social-wrap { margin-top: clamp(48px, 8vw, 64px) !important; } } /* ── 14.2 SOTTORIGA: copyright e credits ─────────────────── */ /* Testo piccolo del footer: stessa misura per copyright (sinistra) e credits (destra). Va nella Classe CSS del modulo Testo. */ .frg-foot-small, .frg-foot-small p, .frg-foot-small a { font-family: var(--frg-sans) !important; font-size: clamp(12px, 0.2vw + 11.3px, 14px) !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; color: var(--frg-bg) !important; text-decoration: none !important; } .frg-foot-small p { padding-bottom: 0 !important; margin: 0 !important; } .frg-foot-small a { transition: color .2s ease !important; } .frg-foot-small a:hover { color: var(--frg-accent-soft) !important; } /* Credits: allineati a destra, logo accanto al testo */ .frg-foot-credits, .frg-foot-credits .et_pb_text_inner { text-align: right !important; } .frg-foot-credits a { display: inline-flex !important; align-items: center !important; gap: 10px !important; } .frg-foot-credits img { height: 16px !important; width: auto !important; opacity: .8; transition: opacity .2s ease; } .frg-foot-credits a:hover img { opacity: 1; } /* Quando le colonne vanno una sotto l'altra: tutto a sinistra */ @media (max-width: 980px) { .frg-foot-credits, .frg-foot-credits .et_pb_text_inner { text-align: left !important; } .frg-foot-credits { margin-top: 8px !important; } } /* ========================================================================== 15. UTILITY PER IL BUILDER Classi di servizio per far combaciare la griglia di Divi con il mockup. Vanno sulla riga, sulla colonna o sul modulo. ========================================================================== */ /* Riga standard: larghezza calcolata, non padding. Il gutter diventa margine esterno, così i bordi disegnati sulla riga (le linee sottili delle testate e degli elenchi) si fermano dentro la colonna di testo invece di arrivare ai bordi dello schermo. Il menu usa lo stesso --frg-gut e lo stesso --frg-max. */ .frg-wrap.et_pb_row, .frg-wrap.et_pb_row_inner { width: calc(100% - (var(--frg-gut) * 2)) !important; max-width: var(--frg-max) !important; margin-inline: auto !important; padding-inline: 0 !important; } /* Spaziatura verticale delle sezioni */ .frg-sec-pad.et_pb_section { padding-block: clamp(72px, 10vw, 160px) !important; } .frg-sec-pad-sm.et_pb_section { padding-block: clamp(40px, 6vw, 88px) !important; } .frg-sec-pad-top.et_pb_section { padding-top: clamp(24px, 5vw, 56px) !important; padding-bottom: 0 !important; } .frg-sec-pad-none.et_pb_section { padding-block: 0 !important; } /* Prima sezione di ogni pagina: stacco dal menu. Il menu è fisso e la pagina parte sotto di lui, quindi il padding è altezza del menu + respiro: circa 109px su mobile, 155px a 1440px. Va su TUTTE le prime sezioni, insieme alle altre classi della sezione. Sta dopo le frg-sec-pad-* così il padding sopra vince. */ .frg-sec-first.et_pb_section { padding-top: calc(var(--frg-nav-h, 69px) + clamp(40px, 6vw, 96px)) !important; } /* Colonna allineata a destra (link a fine riga nelle testate) */ .frg-align-right, .frg-align-right .et_pb_text_inner, .frg-align-right .et_pb_button_module_wrapper { text-align: right !important; } @media (max-width: 767px) { .frg-align-right, .frg-align-right .et_pb_text_inner, .frg-align-right .et_pb_button_module_wrapper { text-align: left !important; } } /* Pulsanti affiancati dentro una colonna: da mettere sulla colonna. Copre sia il wrapper del modulo pulsante sia il caso in cui Divi applichi la classe a un contenitore diverso. */ .frg-btn-row .et_pb_button_module_wrapper, .frg-btn-row > .et_pb_button_module_wrapper, .frg-btn-row .et_pb_module.et_pb_button_module_wrapper { display: inline-block !important; vertical-align: top !important; width: auto !important; float: none !important; margin: 0 12px 12px 0 !important; text-align: left !important; } .frg-btn-row .et_pb_button_module_wrapper:last-child { margin-right: 0 !important; } /* Colonna senza margine sotto quando la riga è una griglia */ .frg-row-tight .et_pb_column { margin-bottom: 0 !important; } /* Spazio tra moduli dentro una colonna, quando serve respiro */ .frg-stack .et_pb_module { margin-bottom: 18px !important; } .frg-stack .et_pb_module:last-child { margin-bottom: 0 !important; } /* Da mettere sul modulo che deve restare in fondo alla colonna */ .frg-push { margin-top: auto !important; } @media (max-width: 980px) { .frg-push { margin-top: 24px !important; } } /* Segnaposto immagine: blocco colorato finché non carichi la foto. Quando metti l'immagine vera, togli la classe frg-ph. */ .frg-ph .et_pb_image_wrap { position: relative; background-color: var(--frg-bg-2) !important; min-height: 120px; } .frg-ph img, .frg-ph img[src=""] { opacity: 0 !important; } .frg-ph .et_pb_image_wrap::after { content: 'immagine'; position: absolute; left: 14px; bottom: 12px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--frg-ink) 55%, transparent); } /* ========================================================================== 16. VARIE ========================================================================== */ /* Pagina alta almeno quanto lo schermo su mobile */ @media (max-width: 768px) { body, #page-container { min-height: 100dvh; } } /* Niente scroll orizzontale quando un elemento entra da destra (frg-slide-left) o sborda: clip non rompe position: sticky */ html, body { overflow-x: clip; } /* Azzero lo spazio sopra i commenti */ #comment-wrap { padding-top: 0 !important; } /* Testo del cookie banner su fondo chiaro */ .cookie-text p, .cookie-text h1, .cookie-text h2, .cookie-text h3, .cookie-text h4, .cookie-text h5, .cookie-text h6, .cookie-text li { color: var(--frg-ink) !important; } /* Selezione del testo nei colori del sito */ ::selection { background: var(--frg-accent); color: var(--frg-on-accent); } /* ========================================================================== 17. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .frg-hl-accent, .frg-hl-soft, .frg-hl-accent-2 { background-size: 100% 68%; transition: none; } .frg-hl-accent-link, .frg-hl-soft-link, .frg-hl-accent-2-link { background-size: 100% 68%; transition: filter 300ms ease; } .frg-underline { background-size: 100% 2px; transition: none; } .frg-pulse, .frg-float, .frg-float-slow, .frg-float-fast, .frg-breathe, .frg-spin-slow, .frg-blink { animation: none !important; } .frg-btn-solid.et_pb_button, .frg-btn-outline.et_pb_button, .frg-btn-accent.et_pb_button, .frg-btn-text.et_pb_button, .frg-btn-text-fwd.et_pb_button, .frg-btn-text-back.et_pb_button, .frg-img-hover img, .frg-grayscale img { transition: none !important; } .frg-liquid, .frg-liquid img, .frg-fx-ready .frg-wobble, .frg-fx-ready .frg-wobble h1, .frg-fx-ready .frg-wobble h2 { filter: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ========================================================================== 18. FILTRI SVG · liquid e wobble I filtri li inietta assets/frg-effects.js, che aggiunge .frg-fx-ready su . Senza quella classe le regole qui sotto non si attivano: un riferimento a un filtro inesistente farebbe sparire l'elemento. Con reduced motion si spengono (sezione 17). ========================================================================== */ /* Distorsione ad acqua al passaggio del mouse. Da mettere sul modulo Immagine, o su una colonna con immagini. */ .frg-liquid, .frg-liquid img { transition: filter .2s ease !important; } .frg-liquid img, .frg-liquid .et_pb_image_wrap { will-change: filter; } /* Ondeggiamento continuo, per i titoli display grandi */ .frg-fx-ready .frg-wobble, .frg-fx-ready .frg-wobble h1, .frg-fx-ready .frg-wobble h2 { filter: url(#frg-wobble-filter); } /* Il filtro va sul testo, non sul contenitore del modulo Divi */ .frg-fx-ready .frg-wobble.et_pb_text { filter: none; } /* ========================================================================== 19. COMPONENTI · per le sezioni della libreria (cartella divi-library) Classi da mettere su righe, colonne e moduli. Le sezioni già pronte da importare le usano tutte: guarda lì per un esempio montato. ========================================================================== */ /* Le righe Divi hanno un ::after per chiudere i float: dentro un flex diventerebbe un elemento in più e sposterebbe le colonne */ .frg-cta-row.et_pb_row::after { display: none !important; } @media (min-width: 981px) { .frg-hero-grid.et_pb_row::after, .frg-card-row.et_pb_row::after { display: none !important; } } /* ── 19.1 HERO ─────────────────────────────────────────── */ /* Sul modulo Testo del titolo: più grande e più stretto dell'h1 */ .frg-hero-title h1, .frg-hero-title h2 { font-size: clamp(56px, 12vw, 200px) !important; line-height: 0.86 !important; letter-spacing: -0.058em !important; margin: 0 !important; padding: 0 !important; } /* Sulla Riga: colonne allineate sul fondo (testo accanto a immagine). Divi impila le colonne con i float, qui tornano in riga. */ .frg-hero-grid.et_pb_row { display: flex !important; align-items: flex-end !important; flex-wrap: wrap !important; } @media (max-width: 980px) { .frg-hero-grid.et_pb_row { display: block !important; } .frg-hero-grid .et_pb_column { margin-bottom: 32px !important; } .frg-hero-grid .et_pb_column:last-child { margin-bottom: 0 !important; } } /* Sulla colonna di testo dell'hero */ .frg-hero-copy .et_pb_text { margin-bottom: 26px !important; } .frg-hero-copy p { font-size: clamp(18px, 1.6vw, 23px) !important; line-height: 1.4 !important; max-width: 34ch; } /* ── 19.2 IMMAGINI A PROPORZIONE FISSA ─────────────────── */ /* Sul modulo Immagine: la foto riempie il riquadro senza deformarsi. .frg-img-ratio = 4/3, poi -wide 16/9, -tall 4/5, -square 1/1 */ .frg-img-ratio .et_pb_image_wrap, .frg-img-wide .et_pb_image_wrap, .frg-img-tall .et_pb_image_wrap, .frg-img-square .et_pb_image_wrap { display: block !important; width: 100% !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--frg-radius-lg); background-color: var(--frg-bg-2); } .frg-img-wide .et_pb_image_wrap { aspect-ratio: 16 / 9; } .frg-img-tall .et_pb_image_wrap { aspect-ratio: 4 / 5; } .frg-img-square .et_pb_image_wrap { aspect-ratio: 1 / 1; } .frg-img-ratio img, .frg-img-wide img, .frg-img-tall img, .frg-img-square img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ── 19.3 CARD (modulo Blurb) ──────────────────────────── */ /* Sul modulo Blurb con immagine sopra: diventa una card. Senza immagine mostra un riquadro segnaposto. */ .frg-card.et_pb_blurb { height: 100%; margin-bottom: 0 !important; background: var(--frg-bg-2); border-radius: var(--frg-radius-lg); overflow: hidden; transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1); } .frg-card.et_pb_blurb:hover { transform: translateY(-4px); } .frg-card .et_pb_blurb_content { max-width: none !important; display: flex; flex-direction: column; height: 100%; text-align: left; } .frg-card .et_pb_main_blurb_image { margin: 0 !important; width: 100% !important; max-width: none !important; } .frg-card .et_pb_main_blurb_image .et_pb_image_wrap { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .frg-card .et_pb_main_blurb_image img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } .frg-card:hover .et_pb_main_blurb_image img { transform: scale(1.04); } .frg-card .et_pb_blurb_content:not(:has(.et_pb_main_blurb_image))::before { content: ''; display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--frg-ink) 8%, var(--frg-bg-2)); } .frg-card .et_pb_blurb_container { padding: clamp(20px, 2vw, 28px) !important; display: grid; gap: 10px; } .frg-card .et_pb_module_header, .frg-card .et_pb_module_header a { margin: 0 !important; padding: 0 !important; color: var(--frg-ink) !important; text-decoration: none !important; } .frg-card .et_pb_blurb_description p { padding-bottom: 0; } /* Sulle sezioni scure la card resta chiara, testi compresi */ .frg-sec-dark .frg-card p { color: var(--frg-muted) !important; } .frg-sec-dark .frg-card .et_pb_module_header, .frg-sec-dark .frg-card .et_pb_module_header a { color: var(--frg-ink) !important; } /* Colonne della stessa riga alte uguali (su .frg-card-row, la Riga) */ @media (min-width: 981px) { .frg-card-row.et_pb_row { display: flex !important; } .frg-card-row .et_pb_column { display: flex; flex-direction: column; } } /* ── 19.4 SERVIZI NUMERATI (modulo Blurb, niente immagine) ─ */ /* .frg-services sulla Riga, .frg-service su ogni Blurb: il numero 01, 02, 03 lo scrive il CSS, in ordine. */ .frg-services { counter-reset: frg-service; } .frg-service.et_pb_blurb { counter-increment: frg-service; border-top: 1px solid var(--frg-ink); padding-top: 20px; } .frg-service .et_pb_blurb_content { max-width: none !important; text-align: left; } .frg-service .et_pb_blurb_container::before { content: counter(frg-service, decimal-leading-zero); display: block; margin-bottom: clamp(28px, 4vw, 56px); font-family: var(--frg-serif); font-style: italic; font-size: clamp(28px, 2.4vw, 40px); line-height: 1; color: var(--frg-accent); } .frg-service .et_pb_module_header, .frg-service .et_pb_module_header a { margin: 0 !important; padding-bottom: 10px !important; color: var(--frg-ink) !important; text-decoration: none !important; } .frg-sec-dark .frg-service .et_pb_module_header, .frg-sec-dark .frg-service .et_pb_module_header a { color: var(--frg-bg) !important; } .frg-sec-dark .frg-service.et_pb_blurb { border-top-color: var(--frg-on-dark-muted); } .frg-sec-dark .frg-service .et_pb_blurb_container::before { color: var(--frg-accent-soft); } /* ── 19.5 NUMERI ───────────────────────────────────────── */ /* Sul modulo Testo:

120+

Siti consegnati

*/ .frg-stat .frg-stat-num { margin: 0 !important; font-size: clamp(48px, 5.5vw, 96px) !important; font-weight: 300 !important; line-height: 0.95 !important; letter-spacing: -0.05em !important; color: var(--frg-ink) !important; font-variant-numeric: tabular-nums; padding-bottom: 12px !important; } .frg-stat .frg-stat-num span { color: var(--frg-accent); } .frg-stat .frg-stat-label { font-size: 15px !important; color: var(--frg-muted) !important; max-width: 24ch; } .frg-sec-dark .frg-stat .frg-stat-num { color: var(--frg-bg) !important; } .frg-sec-dark .frg-stat .frg-stat-num span { color: var(--frg-accent-soft); } .frg-sec-accent .frg-stat .frg-stat-num, .frg-sec-accent .frg-stat .frg-stat-num span, .frg-sec-accent .frg-stat .frg-stat-label { color: var(--frg-on-accent) !important; } /* ── 19.6 CALL TO ACTION ───────────────────────────────── */ /* Sulla Riga: testo a sinistra, pulsanti a destra, centrati in verticale */ .frg-cta-row.et_pb_row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 24px 48px; } .frg-cta-row .et_pb_column { width: auto !important; margin: 0 !important; flex: 1 1 420px; } .frg-cta-row .et_pb_column:last-child { flex: 0 0 auto; } .frg-cta-row h2 { font-size: clamp(34px, 3.8vw, 68px) !important; padding-bottom: 0; } /* ── 19.7 CONTATTI ─────────────────────────────────────── */ /* Sul modulo Testo con i recapiti:
Email
...
...
*/ .frg-info { display: grid; margin: 0; border-top: 1px solid var(--frg-line); } .frg-info > div { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--frg-line); } .frg-info dt { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frg-muted); padding-top: 4px; } .frg-info dd { margin: 0; font-size: clamp(16px, 0.5vw + 14px, 19px); color: var(--frg-ink); } .frg-info dd a { color: var(--frg-ink); text-decoration: none; border-bottom: 1px solid currentColor; transition: color 300ms ease; } .frg-info dd a:hover { color: var(--frg-accent-ink); } .frg-sec-dark .frg-info, .frg-sec-dark .frg-info > div { border-color: var(--frg-on-dark-line); } .frg-sec-dark .frg-info dt { color: var(--frg-on-dark-muted); } .frg-sec-dark .frg-info dd, .frg-sec-dark .frg-info dd a { color: var(--frg-bg); } /* ========================================================================== 99. SITO · classi specifiche del cliente Da qui in giù solo roba di questo sito, con il suo prefisso (es. .jt-hero, .as-bio-toc). Se una classe torna utile su due siti, si sposta sopra con prefisso frg- e si aggiorna la base. ========================================================================== */