/* ========================================================= Essedue — componenti di progetto per Flatsome essedue.css · v1.16.0 · 2026-10-13 Usa i token di Keyweb Flatsome Kit (--kw-*): i colori letterali compaiono solo come ripiego dentro var(). Pulsanti, focus, animazioni d'ingresso, barra titolo e moduli li fa il kit: qui non si riscrivono. Scope: classe .es-site sul body (vedi functions-essedue.php). Indice 01 Token di progetto 02 Titolo di marca, linea, claim 03 Apertura con video 04 Da dove parti? (schede percorso) 05 Trova la tua rete 06 Il sistema cdbed (strati a scorrimento) 07 Letti cdbed (fila orizzontale) 08 Perché Essedue 09 Fascia rivenditori 10 Didascalie e dettagli 11 Responsive e movimento ridotto 12 Catalogo: filtri e schede delle composizioni 13 Scheda della composizione 14 Testata del modello e "componi" 15 Contatti e moduli 16 Megamenu 17 Piede 18 Mobile: scheda, catalogo, moduli 19 Strati e "trova la tua rete" su telefono 20 Barra titolo delle pagine (kw-barra-titolo) 21 Barra del catalogo (categorie e negozio) 22 Primo paragrafo di categorie e catalogo 23 Secondo paragrafo di categorie e catalogo 24 Chiusura: trova il rivenditore (kw-chiusura) 25 Home: da dove parti? e perché essedue 26 Header: lingua, ricerca, dove acquistare (blocco 16) 27 Piede (blocco 08) 28 Scheda prodotto unica per letti e reti (blocco 03) 29 Distinta con i campioni, pulsante rosso 30 Pagine: elementi comuni (numeri, punti, fasi, pulsanti chiari) 31 Azienda 32 Applicazioni benessere 33 Su misura 34 Guida alla scelta 35 Accessori e motori 36 Download 37 Sezione di testo delle pagine (es-testo) 38 Contatti: recapiti, a chi scrivere, mappa a due clic 39 Dove acquistare (provvisoria) 40 Ricerca istantanea (pannello della lente) 41 Filtri a tendina e schede delle famiglie 42 Filetto dei titoli nelle colonne strette 43 Categorie: paragrafi compatti, niente doppioni sotto la barra, megamenu reti compatto 44 Scelta del letto: toni nel filtro colore, modello e campioni nelle schede 45 Megamenu letti compatto 46 Megamenu da shortcode ([es_megamenu]) 47 Scheda delle reti: versioni e sezioni del sito precedente 48 Megamenu come albero UX Builder (blocchi 07) 49 Foto protagonista della scheda prodotto ([es_prodotto_hero]) 50 Miniature dei megamenu più grandi 51 Didascalia editoriale sulla foto protagonista e barra che segue lo scorrimento 52 Navigazione del catalogo, modulo nella finestra, ritocchi della scheda 53 Frecce della fila dei modelli 54 Scheda su telefono, pulsanti delle sezioni con le frecce, misure in riquadri, accessori come elenco 55 Tipografia del brand book (vale su tutto il resto) 56 Griglie del catalogo: tutte le foto in 4:3 57 Da dove parti? con moduli nativi (Testo, pulsante, Immagine) 58 Pagine con moduli nativi: numeri, indice come Menu, guida con Fisarmonica 59 Applicazioni benessere con moduli nativi: ancore numerate, applicazioni, foto con didascalia 60 Varianti dei pulsanti con il riempimento del kit (testo sempre leggibile al passaggio) 61 Sistema cdbed: fine dell'animazione con titolo e frase in due moduli 62 Applicazioni benessere: la rete in 3D 63 Il sistema CDBED: pulsante nella barra dei letti, passi, configuratore CHANGELOG 1.16.0 · 2026-10-13 · tipografia del brand book: Avenir Next (Arial di riserva), titoli Bold dritti con l'iniziale maiuscola, corsivo solo per citazioni, firme e note 1.15.0 · 2026-10-13 · filtri a tendina con conteggi e campioni; schede delle famiglie con il testo sotto la foto 1.14.0 · 2026-10-12 · pagine istituzionali: azienda, applicazioni benessere, su misura, guida alla scelta, accessori, download 1.13.0 · 2026-10-12 · distinta con i campioni delle finiture; pulsante rosso (es-btn-rosso) 1.12.0 · 2026-10-12 · barra del catalogo con immagine di sfondo e velatura, allineata al contenitore; barra titolo e strati allineati al contenitore di Flatsome 1.11.0 · 2026-10-12 · scheda unica letti e reti: certificazione, dati della rete, voci vuote nascoste 1.10.0 · 2026-10-12 · piede rifatto: logo, social, colonne dinamiche, riga legale 1.9.0 · 2026-10-12 · hero: titolo e claim salgono da dietro una maschera all'avvio del video 1.8.0 · 2026-10-12 · header: lingua, lente con pannello di ricerca, pulsante dove acquistare (blocco 16) 1.7.0 · 2026-10-12 · apertura: testi allineati al contenuto dell'header e in sequenza all'avvio del video; sistema cdbed con i margini ai lati 1.6.0 · 2026-10-12 · testi dell'apertura spostati per la foto in alta (lampada a destra); linea dei titoli piena anche con kw-line-draw 1.5.0 · 2026-10-12 · barra titolo, barra del catalogo, primo e secondo paragrafo di categorie e catalogo, chiusura, da dove parti?, perché essedue 1.4.0 · 2026-10-10 · didascalie con linea negli strati su telefono, risposte di "trova la tua rete" su una riga, moduli con le classi del kit 0.19.6 1.3.0 · 2026-10-10 · strati e fila dei letti a tutta altezza, anche su telefono 1.2.0 · 2026-10-10 · catalogo con filtri, scheda composizione, modello, contatti e moduli, megamenu, piede, mobile 1.1.0 · 2026-10-09 · apertura a tutto schermo su desktop (03b) 1.0.0 · 2026-10-09 · prima versione, dall'anteprima HTML 1.7.0 ========================================================= */ /* 01 Token di progetto ------------------------------------ */ .es-site { --es-rosso: var(--kw-primario, #AE1E39); --es-rosso-sc: var(--kw-primario-sc, #8C1830); --es-grigio: var(--kw-scuro, #515356); --es-grigio-sc: var(--kw-secondario-sc, #46484B); --es-testo: var(--kw-testo, #63666A); --es-carta: var(--kw-carta, #F3F3F4); --es-filetto: var(--kw-filetto, #E3E4E6); --es-bianco: var(--kw-titolo-chiaro, #FFFFFF); /* brand book Essedue, pag. 15: carattere istituzionale Avenir Next; dove non è disponibile, Arial */ --es-sans: 'avenir-next-lt-pro', 'Avenir Next LT Pro', 'Avenir Next', Avenir, Arial, sans-serif; --es-curva: var(--kw-curva, cubic-bezier(.2, .7, .2, 1)); --es-margine: clamp(20px, 5vw, 96px); --es-header: 84px; /* altezza dell'header: allineare a Flatsome */ /* bordo sinistro del contenuto (contenitore di Flatsome + 15 px di margine della colonna) */ --es-allinea: max(15px, calc((100vw - var(--es-contenitore, var(--kw-container, 1728px))) / 2 + 15px)); } /* 02 Titolo di marca, linea, claim ------------------------- Dal brand book: minuscolo, bold italic, rosso. Il modulo può essere un [ux_text class="es-titolo"] con dentro h1/h2/p. */ .es-site .es-titolo, .es-site .es-titolo :is(h1, h2, h3, p) { margin: 0; font-family: var(--es-sans); font-size: clamp(44px, 4.4vw, 96px); line-height: .98; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: -.015em; color: var(--es-rosso); } .es-site .es-titolo--hero, .es-site .es-titolo--hero :is(h1, h2, p) { font-size: clamp(40px, 5vw, 108px); } .es-site .es-titolo--medio, .es-site .es-titolo--medio :is(h1, h2, p) { font-size: clamp(34px, 3vw, 64px); } .es-site .es-titolo--chiaro, .es-site .es-titolo--chiaro :is(h1, h2, p) { color: var(--es-bianco); } /* Testata di sezione: titolo + linea fino al bordo destro dello schermo. La linea è un elemento a sé con la classe del kit kw-line-draw. */ .es-site .es-testata { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(24px, 2.4vw, 48px); align-items: end; } .es-site .es-testata > .es-titolo { grid-column: 1; } .es-site .es-linea { grid-column: 2; display: block; height: 3px; background: var(--es-rosso); opacity: 1; margin-bottom: .32em; font-size: clamp(44px, 4.4vw, 96px); margin-right: calc(-1 * var(--es-allinea)); /* fino al bordo dello schermo, senza farlo scorrere di lato */ transform-origin: left center; } .es-site .es-linea--chiara { background: var(--es-bianco); } .es-site .es-testata__sotto { grid-column: 1 / -1; margin: 24px 0 0; max-width: 640px; color: var(--es-testo); font-size: clamp(17px, 1vw, 21px); line-height: 1.55; } .es-site .es-claim, .es-site .es-claim p { margin: 0; font-size: clamp(24px, 2vw, 40px); line-height: 1.1; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); } /* 03 Apertura con video (es-apertura.js) ------------------- */ .es-site .es-apertura .section-content > .row { min-height: calc(100vh - var(--es-header)); align-items: center; } .es-site .es-apertura__cornice { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--es-carta); } .es-site .es-apertura__cornice video, .es-site .es-apertura__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } .es-site .es-apertura__foto { opacity: 0; transition: opacity .5s ease; } .es-site .es-apertura.is-finita .es-apertura__foto { opacity: 1; } .es-site .es-apertura__comandi { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 8px; } .es-site .es-apertura__comandi button { min-height: 40px; padding: 0 16px; margin: 0; border: 0; border-radius: 0; cursor: pointer; background: rgba(255, 255, 255, .9); color: var(--es-grigio); font-family: var(--es-sans); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; transition: background .2s, color .2s; } .es-site .es-apertura__comandi button:hover { background: var(--es-grigio); color: var(--es-bianco); } /* 03b Apertura a tutto schermo su desktop ------------------- Video e foto riempiono l'area sotto l'header come un'immagine 16:9 "cover" ancorata al 30% dall'alto. --W e --H sono le misure dell'immagine intera, --offX e --offY la parte tagliata: video, foto e testi usano le stesse coordinate, così i testi restano sulla parete libera sopra la testata (y 75–342 su 1920×1080). A sinistra si allineano al contenuto dell'header di Flatsome (contenitore 1728 + 15 px): sulla foto in alta, con la lampada a destra, il bianco ha da 4,9:1 a 6,3:1 di contrasto fra 1366 e 2560 px e non tocca mai il letto. */ @media (min-width: 1100px) and (min-aspect-ratio: 4 / 3) { .es-site .es-apertura { --barra: 56px; --altezza: calc(100vh - var(--es-header) - var(--barra)); --W: max(100vw, calc(var(--altezza) * 16 / 9)); --H: calc(var(--W) * 9 / 16); --offX: calc((var(--W) - 100vw) / 2); --offY: calc((var(--H) - var(--altezza)) * .3); /* bordo sinistro del contenuto dell'header di Flatsome */ --es-allinea-header: var(--es-allinea); padding: 0 !important; } .es-site .es-apertura .section-content > .row { position: relative; display: block; width: 100%; max-width: none; height: calc(var(--altezza) + var(--barra)); min-height: 0; margin: 0; } .es-site .es-apertura .row > .col.es-apertura__media { position: absolute; inset: 0; width: auto; max-width: none; flex: none; padding: 0; } .es-site .es-apertura__media > .col-inner { position: static; height: 100%; } .es-site .es-apertura__cornice { position: absolute; left: 0; right: 0; top: 0; height: var(--altezza); aspect-ratio: auto; background: #3c4650; } .es-site .es-apertura__cornice video, .es-site .es-apertura__foto { right: auto; bottom: auto; left: calc(-1 * var(--offX)); top: calc(-1 * var(--offY)); width: var(--W); height: var(--H); max-width: none; object-fit: fill; } .es-site .es-apertura .row > .col.es-apertura__testi { position: absolute; z-index: 3; padding: 0; flex: none; max-width: none; left: var(--es-allinea-header); top: calc(var(--H) * .07 - var(--offY)); width: calc(var(--W) * .44); text-shadow: 0 1px 14px rgba(20, 24, 28, .25); } .es-site .es-apertura__testi > .col-inner > * { margin-bottom: calc(var(--W) * .0075); } .es-site .es-apertura__testi .es-titolo--hero, .es-site .es-apertura__testi .es-titolo--hero :is(h1, h2, p) { color: var(--es-bianco); font-size: calc(var(--W) * .04); line-height: 1; white-space: nowrap; } .es-site .es-apertura__testi .es-claim, .es-site .es-apertura__testi .es-claim p { color: rgba(255, 255, 255, .86); font-size: calc(var(--W) * .0156); } .es-site .es-apertura__testi .kw-lead, .es-site .es-apertura__testi .kw-lead p { color: rgba(255, 255, 255, .92); font-size: calc(var(--W) * .0094); max-width: calc(var(--W) * .34); margin: 0; } .es-site .es-apertura__testi .button { font-size: calc(var(--W) * .0078); min-height: calc(var(--W) * .026); line-height: calc(var(--W) * .026); padding: 0 calc(var(--W) * .0125); margin: calc(var(--W) * .004) calc(var(--W) * .006) 0 0; text-shadow: none; } .es-site .es-apertura__secondario { border-color: var(--es-bianco) !important; color: var(--es-bianco) !important; } .es-site .es-apertura__secondario:hover { background: var(--es-bianco) !important; color: var(--es-grigio) !important; } .es-site .es-apertura .es-didascalia { position: absolute; left: var(--es-margine); right: var(--es-margine); bottom: 0; height: var(--barra); display: flex; align-items: center; margin: 0; } .es-site .es-apertura .es-didascalia p { margin: 0; } } /* 04 Da dove parti? (trattamento della copertina del brand book) */ .es-site .es-percorso { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--es-bianco); } .es-site .es-percorso:hover { color: var(--es-bianco); } .es-site .es-percorso__banda { background: var(--es-rosso); padding: 32px 28px 28px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: background var(--kw-durata, .3s); } .es-site .es-percorso:hover .es-percorso__banda { background: var(--es-rosso-sc); } .es-site .es-percorso__banda strong { font-size: clamp(40px, 3vw, 64px); line-height: 1; font-weight: 700; font-style: normal; text-transform: none; } .es-site .es-percorso__banda span { font-size: clamp(15px, .9vw, 18px); line-height: 1.5; max-width: 380px; } .es-site .es-percorso__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--es-carta); } .es-site .es-percorso__foto::before { content: ""; position: absolute; left: 28px; top: 0; z-index: 1; width: 2px; height: 72px; background: var(--es-bianco); } .es-site .es-percorso__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.12) contrast(.92); opacity: .9; transition: filter .6s, opacity .6s, transform .8s var(--es-curva); } .es-site .es-percorso:hover .es-percorso__foto img { filter: none; opacity: 1; transform: scale(1.03); } /* 05 Trova la tua rete (es-trova-rete.js) ------------------ */ .es-site .es-trova fieldset { border: 0; margin: 0 0 36px; padding: 0; } .es-site .es-trova legend { font-size: clamp(18px, 1.15vw, 23px); font-weight: 700; margin-bottom: 14px; padding: 0; color: var(--es-grigio); } .es-site .es-trova legend b { color: var(--es-rosso); font-style: normal; margin-right: 10px; } .es-site .es-scelte { display: flex; flex-wrap: wrap; gap: 10px; } .es-site .es-scelta { position: relative; margin: 0; } .es-site .es-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .es-site .es-scelta span { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; cursor: pointer; background: var(--es-bianco); border: 1px solid var(--es-filetto); color: var(--es-grigio); font-size: clamp(15px, .85vw, 17px); font-weight: 600; transition: background .2s, color .2s, border-color .2s; } .es-site .es-scelta span:hover { border-color: var(--es-grigio); } .es-site .es-scelta input:checked + span { background: var(--es-grigio); border-color: var(--es-grigio); color: var(--es-bianco); } .es-site .es-scelta input:focus-visible + span { outline: 2px solid var(--es-rosso); outline-offset: 3px; } .es-site .es-esito { background: var(--es-bianco); display: flex; flex-direction: column; min-height: 640px; } .es-site .es-esito__foto { position: relative; flex: 1 1 auto; min-height: 380px; overflow: hidden; background: var(--es-carta); } .es-site .es-esito__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 1.2s var(--es-curva); } .es-site .es-esito__foto img.is-uscita { opacity: 0; transform: scale(1.04); } .es-site .es-esito__badge { position: absolute; left: 0; top: 0; z-index: 1; background: var(--es-rosso); color: var(--es-bianco); padding: 10px 18px; font-size: 15px; font-weight: 700; font-style: normal; text-transform: none; } .es-site .es-esito__testo { padding: clamp(24px, 2.2vw, 44px); display: flex; flex-direction: column; gap: 12px; } .es-site .es-esito__nome { margin: 0; font-size: clamp(36px, 3vw, 64px); line-height: 1; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-esito__descr { margin: 0; font-size: clamp(16px, 1vw, 20px); max-width: 640px; color: var(--es-testo); } .es-site .es-esito__anche, .es-site .es-esito__nota { margin: 0; font-size: 15px; color: var(--es-testo); } .es-site .es-esito__nota { border-top: 1px solid var(--es-filetto); padding-top: 14px; } .es-site .es-esito [hidden] { display: none !important; } /* 06 Il sistema cdbed: strati a scorrimento (es-strati.js) -- La riga .es-strati__griglia resta ferma (GSAP ScrollTrigger del kit, oppure position: sticky se GSAP non c'è) mentre il disegno avanza. Le regole vanno sulla classe della riga, non su ".section-content > .row": quando GSAP la fissa la avvolge in un pin-spacer e il selettore di figlio diretto non vale più. Niente classe Flatsome "relative" su questa sezione: la sua regola !important blocca il fissaggio di GSAP. */ .es-site .es-strati__griglia { height: calc(100vh - var(--es-header)); height: calc(100svh - var(--es-header)); max-width: none; align-items: stretch; } .es-site .es-strati__disegno-col > .col-inner { position: relative; height: 100%; } .es-site .es-strati__disegno { position: absolute; inset: 0; } .es-site .es-strati__disegno svg { width: 100%; height: 100%; display: block; overflow: visible; } .es-site .es-strati__disegno g[data-k] { will-change: transform, opacity; } .es-site .es-strati .bl-t { font-size: 16px; font-weight: 700; } .es-site .es-strati .bl-d { font-size: 13px; font-weight: 400; } .es-site .es-strati .bl-end { text-anchor: end; } .es-site .es-strati .bl-mid { text-anchor: middle; } .es-site .es-strati__etichette { color: var(--es-grigio); fill: var(--es-grigio); font-family: var(--es-sans); } .es-site .es-fasi ol { list-style: none; margin: 0; padding: 0; } .es-site .es-fasi li { display: flex; gap: 16px; align-items: baseline; margin: 0; padding: 12px 0; border-top: 1px solid var(--es-filetto); color: #8a8d91; transition: color .3s, border-color .3s; } .es-site .es-fasi li b { font-size: 15px; font-style: normal; width: 26px; flex: 0 0 auto; } .es-site .es-fasi li strong { display: block; font-size: 19px; font-weight: 700; } .es-site .es-fasi li small { display: block; font-size: 13px; } .es-site .es-fasi li.is-fatta { color: var(--es-grigio); } .es-site .es-fasi li.is-attiva { color: var(--es-rosso); border-top-color: var(--es-rosso); } .es-site .es-strati__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--es-filetto); } .es-site .es-strati__barra span { display: block; height: 3px; width: 0; background: var(--es-rosso); } /* stato iniziale gestito dallo script: senza JS si vede tutto */ .es-site .es-strati.is-pronta .es-strati__fine, .es-site .es-strati.is-pronta .es-strati__azione { opacity: 0; } .es-site .es-strati.is-statica .es-fasi, .es-site .es-strati.is-statica .es-strati__barra { display: none; } .es-site .es-strati.is-statica .es-strati__griglia { height: auto; } .es-site .es-strati.is-statica .es-strati__disegno { position: relative; aspect-ratio: 1250 / 920; } /* 07 Letti cdbed: fila orizzontale a tutta altezza (es-orizzontale.js) La riga occupa tutto lo spazio sotto l'header e resta ferma; la fila stampata da [es_fila_modelli] scorre in orizzontale. */ .es-site .es-letti { background: var(--es-grigio); padding: 0 !important; } .es-site .es-letti__riga { position: relative; height: calc(100vh - var(--es-header)); height: calc(100svh - var(--es-header)); max-width: none; margin: 0; overflow: hidden; } .es-site .es-letti .row > .col { padding: 0; flex: 0 0 100%; max-width: 100%; height: 100%; } .es-site .es-letti .col-inner { height: 100%; } .es-site .es-fila { list-style: none; height: 100%; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 10px; will-change: transform; } .es-site .es-fila > li { margin: 0; height: 100%; flex: 0 0 auto; } .es-site .es-fila__intro { flex-basis: clamp(320px, 28vw, 560px) !important; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 clamp(24px, 3vw, 64px) 0 var(--es-margine); color: var(--es-bianco); } .es-site .es-fila__linea { display: block; width: 3px; height: clamp(64px, 8vh, 120px); background: var(--es-bianco); } .es-site .es-fila__testo { margin: 0; font-size: clamp(17px, 1.1vw, 22px); color: #eceded; max-width: 460px; } .es-site .es-fila__link { color: var(--es-bianco); align-self: flex-start; } .es-site .es-pannello { position: relative; display: block; height: 100%; aspect-ratio: 849 / 620; overflow: hidden; color: var(--es-bianco); text-decoration: none; background: var(--es-grigio-sc); } .es-site .es-pannello:hover { color: var(--es-bianco); } .es-site .es-pannello img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--es-curva); } .es-site .es-pannello:hover img { transform: scale(1.06); } .es-site .es-pannello::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 41, 43, .7) 0%, rgba(40, 41, 43, 0) 34%); } .es-site .es-pannello__testo { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 48px); right: clamp(20px, 2.4vw, 48px); bottom: clamp(28px, 4vh, 56px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .es-site .es-pannello__testo strong { display: block; font-size: clamp(44px, 4.6vw, 100px); line-height: .92; font-weight: 700; font-style: normal; text-transform: none; } .es-site .es-pannello__testo em { display: block; font-style: normal; font-size: clamp(14px, .85vw, 17px); margin-top: 8px; color: #eceded; } .es-site .es-pannello__freccia { width: 56px; height: 56px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .7); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background .3s, color .3s; } .es-site .es-pannello:hover .es-pannello__freccia { background: var(--es-bianco); color: var(--es-grigio); } .es-site .es-letti__avanzamento { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .22); } .es-site .es-letti__avanzamento span { display: block; height: 4px; width: 0; background: var(--es-bianco); } /* movimento ridotto: fila da scorrere a mano */ .es-site .es-letti.is-manuale .es-letti__riga { height: min(86vh, 900px); } .es-site .es-letti.is-manuale .es-fila { overflow-x: auto; scroll-snap-type: x mandatory; } .es-site .es-letti.is-manuale .es-fila > li { scroll-snap-align: start; } /* 08 Perché Essedue ---------------------------------------- */ .es-site .es-verticale { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(64px, 5.6vw, 120px); line-height: .9; font-weight: 700; font-style: normal; color: var(--es-rosso); white-space: nowrap; border-left: 2px solid var(--es-rosso); padding-left: 22px; margin: 0; } .es-site .es-citazione, .es-site .es-citazione p { margin: 0; font-size: clamp(30px, 2.6vw, 54px); line-height: 1.2; font-weight: 400; color: var(--es-grigio); } .es-site .es-citazione em { font-style: normal; font-weight: 700; color: var(--es-rosso); } .es-site .es-punti ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-punti li { margin: 0; padding: 18px 0; border-top: 1px solid var(--es-filetto); } .es-site .es-punti strong { display: block; font-size: 17px; color: var(--es-grigio); } .es-site .es-punti span { display: block; font-size: 14px; color: var(--es-testo); margin-top: 2px; } /* 09 Fascia rivenditori ------------------------------------ */ .es-site .es-rivenditori { background: var(--es-rosso); color: var(--es-bianco); } .es-site .es-cerca { display: flex; } .es-site .es-cerca input[type="text"] { flex: 1; min-width: 0; height: 56px; margin: 0; padding: 0 18px; border: 0; border-radius: 0; box-shadow: none; font-size: 16px; } .es-site .es-cerca button { height: 56px; margin: 0; padding: 0 28px; border: 0; border-radius: 0; background: var(--es-grigio); color: var(--es-bianco); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; } /* 10 Didascalie e dettagli --------------------------------- */ .es-site .es-didascalia, .es-site .es-didascalia p { margin: 14px 0 0; font-size: 15px; color: var(--es-testo); } .es-site .es-didascalia strong { font-size: 18px; font-weight: 700; font-style: normal; color: var(--es-rosso); margin: 0 8px; } .es-site .es-didascalia small { font-size: 13px; } /* 11 Responsive e movimento ridotto ------------------------ */ @media (max-width: 849px) { .es-site { --es-header: 64px; } .es-site .es-apertura .section-content > .row { min-height: 0; } .es-site .es-esito { min-height: 0; } .es-site .es-esito__foto { min-height: 0; aspect-ratio: 4 / 3; flex: 0 0 auto; } .es-site .es-fila { gap: 8px; } .es-site .es-fila__intro { flex-basis: 84vw !important; padding-right: 24px; } .es-site .es-pannello { width: 86vw; aspect-ratio: auto; } .es-site .es-pannello__testo { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); } .es-site .es-pannello__freccia { width: 48px; height: 48px; } /* strati su telefono: titolo e fase in alto, il disegno occupa il resto */ .es-site .es-strati__griglia { display: flex; flex-direction: column; flex-wrap: nowrap; } .es-site .es-strati .row > .es-strati__colonna { flex: 0 0 auto; padding-bottom: 8px; } .es-site .es-strati .row > .es-strati__disegno-col { flex: 1 1 auto; min-height: 0; padding-bottom: 12px; } .es-site .es-strati__colonna .es-titolo { margin-bottom: 8px; } .es-site .es-strati__colonna .es-titolo :is(h2, p) { font-size: 34px; } .es-site .es-verticale { writing-mode: horizontal-tb; transform: none; font-size: 56px; border-left: 0; padding-left: 0; } .es-site .es-strati__etichette { display: none; } .es-site .es-fasi li { display: none; border-top: 0; padding: 0; } .es-site .es-fasi li.is-attiva { display: flex; } } @media (prefers-reduced-motion: reduce) { .es-site .es-percorso__foto img, .es-site .es-pannello img, .es-site .es-esito__foto img { transition: none; } } /* 06b Colonna del sistema cdbed: elenco e testo finale nella stessa cella, uno svanisce mentre l'altro compare */ .es-site .es-strati__colonna > .col-inner { display: grid; align-content: center; } .es-site .es-strati__colonna .es-titolo { grid-row: 1; grid-column: 1; margin-bottom: 28px; } .es-site .es-strati__colonna .es-fasi, .es-site .es-strati__colonna .es-strati__fine { grid-row: 2; grid-column: 1; align-self: start; } .es-site .es-strati__colonna .es-strati__azione { grid-row: 3; grid-column: 1; justify-self: start; margin-top: 20px; } .es-site .es-strati__fine .es-claim { margin-bottom: 12px; } .es-site .es-strati.is-finale .es-fasi, .es-site .es-strati.is-statica .es-fasi { display: none; } .es-site .es-strati__griglia { position: relative; background: var(--kw-titolo-chiaro, #FFFFFF); } /* 12 Catalogo: filtri e schede delle composizioni --------- Barra stampata da es_barra_filtri() (inc/es-catalogo.php). */ .es-site .es-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; margin: 0 0 32px; padding: 0 0 22px; border-bottom: 1px solid var(--es-filetto); } .es-site .es-filtri__apri, .es-site .es-filtri__testa, .es-site .es-filtri__piede, .es-site .es-filtri__sfondo { display: none; } .es-site .es-filtri__pannello { display: contents; } .es-site .es-filtri__gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .es-site .es-filtri__etichetta { margin-right: 6px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-chip { min-height: 42px; margin: 0; padding: 0 16px; border: 1px solid var(--es-filetto); border-radius: 0; background: var(--es-bianco); color: var(--es-grigio); font-family: var(--es-sans); font-size: 15px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .es-site .es-chip:hover { border-color: var(--es-grigio); } .es-site .es-chip[aria-pressed="true"] { background: var(--es-grigio); border-color: var(--es-grigio); color: var(--es-bianco); } .es-site .es-filtri__stato { margin-left: auto; display: flex; align-items: center; gap: 18px; } .es-site .es-filtri__conteggio { margin: 0; font-size: 15px; color: var(--es-testo); } .es-site .es-filtri__azzera { min-height: 42px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--es-rosso); font-family: var(--es-sans); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; } .es-site .es-filtri [hidden] { display: none !important; } .es-site .products .product.es-nascosta { display: none !important; } .es-site .product-small .name.product-title, .es-site .product-small .product-title a { font-size: 19px; font-weight: 700; color: var(--es-grigio); } .es-site .es-scheda-riga { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--es-testo); } .es-site .es-scheda-misura { margin: 2px 0 0; font-size: 13px; color: #6c6f73; } /* 13 Scheda della composizione ----------------------------- */ .es-site .es-prodotto .product-title { font-size: clamp(36px, 3vw, 56px); line-height: 1; font-weight: 700; color: var(--es-grigio); margin-bottom: 14px; } .es-site .es-prodotto .product-short-description, .es-site .es-prodotto .product-short-description p { font-size: clamp(16px, 1vw, 19px); color: var(--es-testo); } .es-site .es-prodotto__pannello .button { width: 100%; justify-content: center; margin: 0 0 10px; } .es-site .es-prodotto__finiture p { font-size: 14px; color: var(--es-testo); margin: 6px 0 0; } .es-site .es-distinta { margin: 22px 0 26px; padding: 0; border-top: 1px solid var(--es-filetto); } .es-site .es-distinta__nota { padding: 10px 0; font-size: 13px; color: var(--es-testo); border-bottom: 1px solid var(--es-filetto); } .es-site .es-distinta__riga { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-distinta dt { margin: 0; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-distinta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; color: var(--es-grigio); } .es-site .es-distinta dd strong { font-size: 17px; } .es-site .es-distinta dd small { flex-basis: 100%; font-size: 13px; color: var(--es-testo); } .es-site .es-distinta__riga--design dd span { color: var(--es-testo); } .es-site .es-prodotto__basso .accordion { margin-top: 28px; border-top: 1px solid var(--es-filetto); } .es-site .es-prodotto__basso .accordion-title { position: relative; padding: 18px 48px 18px 0; font-size: 18px; font-weight: 700; border-top: 0; border-bottom: 1px solid var(--es-filetto); } /* la freccia di Flatsome sta a sinistra e copriva le prime lettere: la porto a destra */ .es-site .es-prodotto__basso .accordion-title .toggle { left: auto; right: 0; top: 50%; margin-top: -1.15em; } .es-site .es-prodotto__basso .accordion-inner { padding: 6px 0 24px; } .es-site .es-aiuto { background: var(--es-carta); padding: 28px; } .es-site .es-titolo--piccolo, .es-site .es-titolo--piccolo :is(h2, h3, p) { font-size: clamp(26px, 2vw, 36px); } .es-site .es-barra-prodotto { display: none; } /* 14 Testata del modello e "componi" ----------------------- */ .es-site .es-modello__disegno { background: var(--es-carta); } .es-site .es-occhiello, .es-site .es-occhiello p { margin: 0 0 6px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-specifiche dl { margin: 22px 0; border-top: 1px solid var(--es-filetto); } .es-site .es-specifiche dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-specifiche dt { margin: 0; font-weight: 700; color: var(--es-grigio); } .es-site .es-specifiche dd { margin: 0; color: var(--es-testo); } .es-site .es-passo { height: 100%; padding: 30px 28px; border: 1px solid var(--es-filetto); background: var(--es-bianco); } .es-site .es-passo b { display: block; font-size: 15px; font-style: normal; color: var(--es-rosso); } .es-site .es-passo h3 { margin: 8px 0 10px; font-size: 24px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); } .es-site .es-passo p { color: var(--es-testo); } /* 15 Contatti e moduli ------------------------------------- I moduli li disegna il kit (kw-form): qui recapiti e poco altro. */ .es-site .es-recapiti dl { margin: 24px 0; border-top: 1px solid var(--es-filetto); } .es-site .es-recapiti dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-recapiti dt { margin: 0; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-recapiti dd { margin: 0; color: var(--es-grigio); } .es-site .es-recapiti a { color: var(--es-grigio); font-weight: 700; } .es-site .es-modulo__nota { font-size: 14px; color: var(--es-testo); margin: 0 0 18px; } /* griglia, consenso e invio sono del kit (kw-form__grid, kw-campo--full, kw-consenso, kw-form__invio); qui solo le etichette, minuscole come nel resto del sito */ .es-site .kw-form .kw-form__grid label { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--es-grigio); } .es-site .kw-form label small { font-weight: 400; color: var(--es-testo); } /* 16 Megamenu ------------------------------------------------ Blocchi UX assegnati alle voci Reti e Letti (dropdown "Block"). */ .es-site .es-mega { max-height: calc(100vh - var(--es-header) - 24px); overflow-y: auto; } .es-site .es-mega__titolo, .es-site .es-mega__titolo p { margin: 0 0 12px; font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-modelli { list-style: none; margin: 0 0 22px; padding: 0; } .es-site .es-modelli li { margin: 0; } .es-site .es-modelli__voce { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--es-grigio); text-decoration: none; border-bottom: 1px solid var(--es-filetto); } .es-site .es-modelli__voce:hover { color: var(--es-rosso); } .es-site .es-modelli__nome { font-weight: 600; } .es-site .es-modelli__conteggio { font-size: 12px; color: #6c6f73; white-space: nowrap; } .es-site .es-modelli--schede { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .es-site .es-modelli--schede .es-modelli__voce { display: block; border: 0; padding: 0; } .es-site .es-modelli__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--es-carta); margin-bottom: 8px; } .es-site .es-modelli__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--es-curva); } .es-site .es-modelli__voce:hover .es-modelli__img img { transform: scale(1.04); } .es-site .es-modelli--schede .es-modelli__nome { display: block; font-size: 17px; font-weight: 700; font-style: normal; text-transform: none; } .es-site .es-mega__evidenza .es-didascalia p { margin-top: 10px; } /* 17 Piede ----------------------------------------------------- */ .es-site .es-piede { color: #e6e7e8; } .es-site .es-piede__titolo, .es-site .es-piede__titolo p { margin: 0 0 12px; font-size: 20px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-bianco); } .es-site .es-piede__claim p { color: #e6e7e8; font-size: 15px; } .es-site .es-piede .ux-menu-link__link, .es-site .es-piede a { color: #e6e7e8; } .es-site .es-piede .ux-menu-link__link:hover, .es-site .es-piede a:hover { color: var(--es-bianco); } .es-site .es-piede__legale { border-top: 1px solid #6c6e72; margin-top: 24px; padding-top: 20px; } .es-site .es-piede__legale p { margin: 0 0 4px; font-size: 13px; color: #d4d5d7; } /* 18 Mobile: scheda, catalogo, moduli ------------------------ Pulsanti da almeno 44 px, niente zoom dei campi su iPhone (16 px), azioni principali sempre a portata di pollice. */ html.es-blocca-scroll { overflow: hidden; } @media (max-width: 849px) { /* catalogo: pulsante "filtra" e pannello dal basso */ .es-site .es-filtri { flex-wrap: nowrap; gap: 14px; margin-bottom: 20px; padding-bottom: 14px; } .es-site .es-filtri__apri { display: inline-flex; align-items: center; min-height: 46px; margin: 0; padding: 0 20px; border: 1px solid var(--es-grigio); border-radius: 0; background: var(--es-bianco); color: var(--es-grigio); font-family: var(--es-sans); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; } .es-site .es-filtri__stato { gap: 12px; } .es-site .es-filtri__attivi { margin-left: 5px; } .es-site .es-filtri__pannello { display: flex; flex-direction: column; gap: 22px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 85vh; overflow-y: auto; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--es-bianco); box-shadow: 0 -12px 32px rgba(40, 41, 43, .18); transform: translateY(105%); visibility: hidden; transition: transform .3s var(--es-curva), visibility 0s .3s; } .es-site .es-filtri.is-aperto .es-filtri__pannello { transform: none; visibility: visible; transition: transform .3s var(--es-curva); } .es-site .es-filtri__sfondo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(40, 41, 43, .45); } .es-site .es-filtri__testa { display: flex; justify-content: space-between; align-items: center; } .es-site .es-filtri__titolo { margin: 0; font-size: 22px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-filtri__chiudi { width: 46px; height: 46px; margin: 0; padding: 0; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--es-grigio); } .es-site .es-filtri__gruppo { gap: 8px; } .es-site .es-filtri__etichetta { flex-basis: 100%; font-size: 17px; } .es-site .es-chip { min-height: 46px; font-size: 16px; } .es-site .es-filtri__piede { display: block; position: sticky; bottom: 0; background: var(--es-bianco); padding-top: 6px; } .es-site .es-filtri__mostra { width: 100%; min-height: 52px; margin: 0; border: 0; border-radius: 0; background: var(--es-rosso); color: var(--es-bianco); font-family: var(--es-sans); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; } .es-site .es-filtri__conteggio { font-size: 14px; } /* schede del catalogo: immagine grande, testo leggibile */ .es-site .product-small .name.product-title, .es-site .product-small .product-title a { font-size: 18px; } /* scheda: galleria a tutta larghezza, azioni nella barra in basso */ .es-site .es-prodotto { padding-top: 0 !important; } .es-site .es-prodotto__alto > .es-prodotto__media { padding-left: 0; padding-right: 0; padding-bottom: 16px; } .es-site .es-prodotto__pannello .es-prodotto__cta { display: none; } .es-site .es-distinta__riga { grid-template-columns: 92px 1fr; gap: 12px; } .es-site .es-prodotto__basso .accordion-title { min-height: 52px; display: flex; align-items: center; } .es-site .es-barra-prodotto { display: grid; grid-template-columns: 1fr 52px; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--es-bianco); border-top: 1px solid var(--es-filetto); box-shadow: 0 -6px 18px rgba(40, 41, 43, .08); } .es-site .es-barra-prodotto .button { width: 100%; min-height: 52px; margin: 0; justify-content: center; } .es-site .es-barra-prodotto__icona { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--es-grigio); color: var(--es-grigio); } body.single-product.es-site { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* megamenu e piede */ .es-site .es-modelli--schede { grid-template-columns: 1fr 1fr; } .es-site .es-piede .ux-menu-link__link { min-height: 44px; display: flex; align-items: center; } } /* 19 Strati su telefono: didascalia con linea indicatrice (es-strati.js) */ .es-site .es-strati__griglia { position: relative; } .es-site .es-guida { display: none; } @media (max-width: 849px) { .es-site .es-strati .es-fasi { display: none; } .es-site .es-guida { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s; } .es-site .es-guida__linee { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .es-site .es-guida__linee line { stroke: var(--es-rosso); stroke-width: 1.5; } .es-site .es-guida__linee circle { fill: var(--es-rosso); } .es-site .es-guida__linee .es-guida__attacco { fill: var(--es-bianco); stroke: var(--es-rosso); stroke-width: 1.5; } .es-site .es-guida__testo { position: absolute; left: 0; top: 0; max-width: min(300px, 80vw); padding: 10px 14px 11px; background: rgba(255, 255, 255, .94); border-left: 3px solid var(--es-rosso); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; transition: transform .35s var(--es-curva); } .es-site .es-guida__testo b { grid-row: 1 / span 2; font-size: 15px; font-style: normal; color: var(--es-rosso); } .es-site .es-guida__testo strong { font-size: 18px; line-height: 1.2; color: var(--es-grigio); } .es-site .es-guida__testo small { font-size: 13px; color: var(--es-testo); } /* trova la tua rete: risposte su una riga, scorrono di lato se non ci stanno */ .es-site .es-trova legend { font-size: 16px; margin-bottom: 8px; } .es-site .es-scelte { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: calc(-1 * var(--es-allinea)); padding-right: var(--es-allinea); /* fino al bordo dello schermo, non oltre */ } .es-site .es-scelte::-webkit-scrollbar { display: none; } .es-site .es-scelta { flex: 0 0 auto; } .es-site .es-scelta span { min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; } } /* 20 Barra titolo delle pagine (kw-barra-titolo) ------------- Titolo di marca con la linea fino al bordo; a destra l'immagine in evidenza della pagina, se c'è (il kit la passa come --kw-hero-image). */ .es-site .es-barra { position: relative; overflow: hidden; background: var(--es-carta); padding: clamp(36px, 4.4vw, 84px) 0 clamp(28px, 3.4vw, 60px) !important; } .es-site .es-barra__testi { padding-bottom: 0 !important; } .es-site .es-barra__testi > .col-inner { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 2vw, 40px); align-items: end; } .es-site .es-barra .kw-crumbs { grid-column: 1 / -1; margin-bottom: 14px; font-size: 13px; color: var(--es-testo); } .es-site .es-barra .kw-crumbs a { color: var(--es-testo); } .es-site .es-barra__titolo { margin: 0; font-size: clamp(40px, 2.6vw, 65px); line-height: .95; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-barra .es-linea { align-self: center; margin-bottom: 0; } /* linea centrata sul titolo */ @media (min-width: 850px) { .es-site .es-barra::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34%; background: var(--kw-hero-image, none) center / cover no-repeat; } .es-site .es-barra__testi { max-width: 64% !important; flex-basis: 64% !important; } } /* 21 Barra del catalogo (categorie e negozio) ----------------- Foto del modello come sfondo (--es-barra-sfondo, da es-contesto.php), velatura scura da sinistra e dal basso, testi bianchi. La riga è quella normale di Flatsome: i testi partono dal bordo di header e contenuti. Contrasto del bianco nel caso peggiore (foto bianca dietro): almeno 6:1 nel primo 45% della larghezza, dove stanno i testi piccoli; almeno 3:1 fino a tre quarti, dove può arrivare un titolo lungo. */ .es-site .es-barra-catalogo { position: relative; overflow: hidden; padding: 0 !important; color: var(--es-bianco); background: var(--es-grigio) var(--es-barra-sfondo, none) center / cover no-repeat; } .es-site .es-barra-catalogo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(34, 35, 37, .86) 0%, rgba(34, 35, 37, .78) 45%, rgba(34, 35, 37, .45) 75%, rgba(34, 35, 37, .15) 100%), linear-gradient(0deg, rgba(34, 35, 37, .45) 0%, rgba(34, 35, 37, 0) 55%); } .es-site .es-barra-catalogo .section-content { position: relative; z-index: 1; } .es-site .es-barra-catalogo__riga { min-height: clamp(360px, 46vh, 560px); align-items: flex-end !important; } .es-site .es-barra-catalogo__testi { padding-top: clamp(48px, 6vw, 96px) !important; padding-bottom: clamp(36px, 4.4vw, 72px) !important; } .es-site .es-barra-catalogo .kw-crumbs { margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--es-bianco); } .es-site .es-barra-catalogo .kw-crumbs a { color: var(--es-bianco); opacity: .85; } .es-site .es-barra-catalogo .es-occhiello { margin: 0 0 4px; font-size: clamp(17px, 1.2vw, 22px); color: var(--es-bianco); } .es-site .es-barra-catalogo__titolo { margin: 0; font-size: clamp(56px, 7vw, 150px); line-height: .9; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-bianco); } .es-site .es-barra-catalogo__conteggio { margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--es-rosso); font-size: 15px; font-weight: 700; color: var(--es-bianco); } .es-site .es-barra-catalogo__descrizione { margin-top: 14px; max-width: 560px; font-size: clamp(16px, 1vw, 19px); line-height: 1.55; color: var(--es-bianco); } .es-site .es-barra-catalogo__descrizione p { margin: 0; color: inherit; } @media (max-width: 849px) { .es-site .es-barra-catalogo::before { background: linear-gradient(0deg, rgba(34, 35, 37, .88) 0%, rgba(34, 35, 37, .6) 55%, rgba(34, 35, 37, .25) 100%); } .es-site .es-barra-catalogo__riga { min-height: 340px; } } /* 22 Primo paragrafo di categorie e catalogo ---------------- Contenuti dai campi Paragrafo 1 e Immagine 1 ([es_contesto]). */ .es-site .es-ctx { margin: 0; } .es-site .es-ctx :is(h2, h3) { margin: 0 0 .5em; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); line-height: 1.05; } .es-site .es-ctx h2 { font-size: clamp(30px, 2.6vw, 52px); } .es-site .es-ctx h3 { font-size: clamp(22px, 1.6vw, 30px); } .es-site .es-ctx :is(ul, ol) { margin: 0 0 1em 1.2em; color: var(--es-grigio); } .es-site .es-ctx li { margin-bottom: .4em; line-height: 1.6; } .es-site .es-ctx blockquote { margin: 1.2em 0; padding: 0 0 0 18px; border-left: 3px solid var(--es-rosso); font-size: 1.15em; font-style: normal; color: var(--es-grigio); } .es-site .es-intro__paragrafo p { font-size: clamp(17px, 1.15vw, 22px); line-height: 1.6; color: var(--es-grigio); } .es-site .es-intro__foto img, .es-site .es-approfondimento__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .es-site .es-intro__media:not(:has(.es-ctx)) { display: none; } /* 23 Secondo paragrafo di categorie e catalogo --------------- */ .es-site .es-approfondimento__riga + .es-approfondimento__riga { margin-top: clamp(40px, 5vw, 96px); } .es-site .es-approfondimento__paragrafo p { font-size: clamp(16px, 1vw, 19px); line-height: 1.65; color: var(--es-testo); } .es-site .es-approfondimento__coppia > .col-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 24px); align-items: start; } .es-site .es-approfondimento__foto--sfalsata { margin-top: clamp(32px, 4vw, 72px); } .es-site .es-approfondimento__foto img { aspect-ratio: 3 / 4; } .es-site .es-approfondimento__foto--grande img { aspect-ratio: 4 / 3; } /* senza campi pieni righe e sezioni spariscono */ .es-site .es-intro:not(:has(.es-ctx)), .es-site .es-approfondimento:not(:has(.es-ctx)), .es-site .es-approfondimento__riga:not(:has(.es-ctx)) { display: none !important; } @media (max-width: 849px) { .es-site .es-approfondimento__riga--inversa .es-approfondimento__coppia { order: -1; } } /* 24 Chiusura: trova il rivenditore (kw-chiusura) ------------ */ .es-site .es-chiusura { background: var(--es-rosso); color: var(--es-bianco); } .es-site .es-chiusura__testo p { margin: 0; max-width: 520px; font-size: clamp(17px, 1.1vw, 21px); line-height: 1.55; color: var(--es-bianco); } .es-site .es-chiusura .es-cerca { max-width: 640px; margin-left: auto; } .es-site .es-chiusura__altro { max-width: 640px; margin: 14px 0 0 auto; } .es-site .es-chiusura__altro a { color: var(--es-bianco); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 849px) { .es-site .es-chiusura .es-cerca, .es-site .es-chiusura__altro { margin-left: 0; } } /* 25 Home: da dove parti? e perché essedue ------------------- */ .es-site .es-percorsi .col-inner { height: 100%; } .es-site .es-perche .es-verticale { margin-top: 8px; } @media (max-width: 849px) { .es-site .es-perche .es-verticale { writing-mode: horizontal-tb; transform: none; border-left: 0; padding-left: 0; font-size: 56px; margin-bottom: 8px; } } /* 03c Apertura: testi in sequenza all'avvio del video (es-apertura.js) --- Titolo e claim salgono da dietro una maschera (come split-lines del kit), poi testo e pulsanti entrano dal basso. */ .es-site .es-apertura--attesa .es-apertura__testi .col-inner > * { opacity: 0; transform: translateY(18px); } .es-site .es-apertura--attesa .es-apertura__testi .col-inner > :is(.es-titolo, .es-claim) { opacity: 1; transform: none; overflow: hidden; padding: 0 .14em .16em 0; margin-bottom: -.16em; } .es-site .es-apertura--attesa .es-apertura__testi .col-inner > :is(.es-titolo, .es-claim) > * { transform: translateY(115%); } .es-site .es-apertura--attesa.is-partita .es-apertura__testi .col-inner > * { opacity: 1; transform: none; transition: opacity .8s var(--es-curva), transform .8s var(--es-curva); } .es-site .es-apertura--attesa.is-partita .es-apertura__testi .col-inner > :is(.es-titolo, .es-claim) > * { transform: none; transition: transform 1.1s cubic-bezier(.16, .84, .3, 1); } .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > .es-titolo > * { transition-delay: .15s; } .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > .es-claim > * { transition-delay: .8s; } /* pause per tipo di elemento, non per posizione: un elemento in più nella colonna non rompe la sequenza */ .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > :not(.es-titolo):not(.es-claim):not(.button) { transition-delay: 1.45s; } .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > .button { transition-delay: 2s; } .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > .button ~ .button { transition-delay: 2.15s; } .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > .button ~ .button ~ .button { transition-delay: 2.3s; } .es-site .es-apertura.is-partita .es-apertura__testi .col-inner > .button ~ .button ~ .button ~ .button { transition-delay: 2.45s; } @media (prefers-reduced-motion: reduce) { .es-site .es-apertura--attesa .es-apertura__testi .col-inner > *, .es-site .es-apertura--attesa .es-apertura__testi .col-inner > :is(.es-titolo, .es-claim) > * { opacity: 1; transform: none; transition: none; } } /* 06c Sistema cdbed: margini ai lati, come il resto della pagina */ .es-site .es-strati .row > .es-strati__colonna { padding-left: var(--es-allinea); } .es-site .es-strati .row > .es-strati__disegno-col { padding-right: var(--es-allinea); } /* 26 Header: lingua, ricerca, dove acquistare (blocco 16, es-header.js) */ .es-site .es-azioni { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); } .es-site .es-azioni__lingua { font-size: 15px; font-weight: 700; color: var(--es-grigio); text-decoration: none; letter-spacing: .02em; } .es-site .es-azioni__lingua:hover { color: var(--es-rosso); } .es-site .es-azioni__cerca { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--es-grigio); cursor: pointer; min-height: 0; } .es-site .es-azioni__cerca:hover, .es-site .es-azioni.is-cerca .es-azioni__cerca { color: var(--es-rosso); } .es-site .es-azioni__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; background: var(--es-rosso); color: var(--es-bianco); border-radius: 0; text-decoration: none; font-family: var(--es-sans); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1; transition: background .25s; } .es-site .es-azioni__cta:hover, .es-site .es-azioni__cta:focus-visible { background: var(--es-rosso-sc); color: var(--es-bianco); } .es-site .es-cerca-pannello { position: absolute; right: 0; top: calc(100% + 18px); z-index: 1000; width: min(460px, 92vw); padding: 22px 22px 20px; background: var(--es-bianco); box-shadow: 0 18px 40px rgba(40, 41, 43, .16); border-top: 3px solid var(--es-rosso); } .es-site .es-cerca-pannello[hidden] { display: none; } .es-site .es-cerca-pannello__etichetta { display: block; margin: 0 0 10px; font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-cerca-pannello__riga { display: flex; } .es-site .es-cerca-pannello input[type="search"] { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--es-filetto); border-right: 0; border-radius: 0; box-shadow: none; font-size: 16px; color: var(--es-grigio); background: var(--es-bianco); } .es-site .es-cerca-pannello input[type="search"]:focus { border-color: var(--es-grigio); outline: none; } .es-site .es-cerca-pannello__vai { height: 48px; margin: 0; padding: 0 20px; border: 0; border-radius: 0; background: var(--es-grigio); color: var(--es-bianco); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; min-height: 0; } .es-site .es-cerca-pannello__vai:hover { background: var(--es-rosso); } .es-site .es-cerca-pannello__chiudi { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--es-grigio); min-height: 0; } @media (max-width: 849px) { .es-site .es-azioni { gap: 6px; } .es-site .es-azioni__lingua { display: none; } .es-site .es-azioni__cta { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; } .es-site .es-azioni__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .es-site .es-cerca-pannello { position: fixed; left: 0; right: 0; top: var(--es-header); width: auto; } } /* 27 Piede (blocco 08) ------------------------------------------ */ .es-site .es-piede__testa { align-items: center; padding-bottom: clamp(28px, 3vw, 48px); margin-bottom: clamp(28px, 3vw, 48px) !important; border-bottom: 1px solid rgba(255, 255, 255, .18); } .es-site .es-piede__marchio { display: inline-block; } .es-site .es-piede__marchio img { width: clamp(170px, 14vw, 220px); height: auto; display: block; } .es-site .es-piede__claim p { margin: 16px 0 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: #e6e7e8; } .es-site .es-piede__social > .col-inner { display: flex; justify-content: flex-end; } .es-site .es-piede__titolo, .es-site .es-piede__titolo p { margin: 0 0 14px; font-size: 22px; } .es-site .es-piede .es-modelli { margin: 0 0 12px; } .es-site .es-piede .es-modelli__voce { padding: 6px 0; border-bottom: 0; color: #e6e7e8; } .es-site .es-piede .es-modelli__voce:hover { color: var(--es-bianco); } .es-site .es-piede .es-modelli__nome { font-weight: 400; } .es-site .es-piede__tutti { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--es-bianco); text-decoration: underline; text-underline-offset: 4px; } .es-site .es-piede__recapiti p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #e6e7e8; } .es-site .es-piede__recapiti a { color: #e6e7e8; } .es-site .es-piede__legale p { margin: 0; } .es-site .es-piede__link-legali p { text-align: right; } @media (max-width: 849px) { .es-site .es-piede__social > .col-inner { justify-content: flex-start; } .es-site .es-piede__link-legali p { text-align: left; } .es-site .es-piede .es-modelli__voce { min-height: 44px; display: flex; align-items: center; } } /* 28 Scheda prodotto unica per letti e reti (blocco 03) ------------ */ .es-site .es-rete-cert { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px; padding: 6px 12px; border: 1px solid var(--es-rosso); color: var(--es-rosso); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .es-site .es-rete-cert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--es-rosso); } .es-site .es-rete-sottotitolo { margin: 0 0 10px; font-size: 16px; color: var(--es-testo); } .es-site .es-distinta--rete .es-distinta__riga dd strong { font-weight: 700; } .es-site .es-campo p:last-child { margin-bottom: 0; } .es-site .es-campo h3 { margin: 1.2em 0 .4em; font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-campo h3:first-child { margin-top: 0; } .es-site .es-campo--vuoto p { color: var(--es-testo); font-style: normal; } /* voci della fisarmonica senza contenuto per questo prodotto */ .es-site .es-prodotto .accordion-item:not(:has(.es-campo)) { display: none; } /* 29 Distinta con i campioni delle finiture (come nel catalogo), pulsante rosso Tre colonne: pezzo (testata, giroletto, piede) · campione · finitura, modello e misura. Nelle composizioni con due letti i campioni stanno uno sopra l'altro. */ .es-site .es-distinta .es-distinta__riga { display: grid; grid-template-columns: 84px 88px 1fr; column-gap: 14px; row-gap: 1px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-distinta .es-distinta__riga > dt { grid-column: 1; grid-row: 1 / span 3; align-self: center; } .es-site .es-distinta .es-distinta__riga > dd { display: contents; } .es-site .es-distinta__campioni { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 4px; align-self: center; } .es-site .es-distinta__campioni .es-campione { width: 88px; height: 52px; object-fit: cover; display: block; } .es-site .es-distinta__campioni .es-campione + .es-campione { height: 26px; } .es-site .es-distinta__campioni:has(.es-campione + .es-campione) .es-campione { height: 30px; } .es-site .es-distinta .es-distinta__riga > dd > strong { grid-column: 3; font-size: 16px; font-weight: 700; color: var(--es-grigio); line-height: 1.3; } .es-site .es-distinta .es-distinta__riga > dd > span:not(.es-distinta__campioni) { grid-column: 3; font-size: 14px; color: var(--es-testo); line-height: 1.4; } .es-site .es-distinta .es-distinta__riga > dd > small { grid-column: 3; flex-basis: auto; font-size: 13px; color: var(--es-testo); } .es-site .es-distinta .es-distinta__riga.es-distinta__riga--senza { grid-template-columns: 84px 1fr; } .es-site .es-distinta .es-distinta__riga.es-distinta__riga--senza > dd > * { grid-column: 2; } @media (max-width: 549px) { .es-site .es-distinta .es-distinta__riga { grid-template-columns: 70px 72px 1fr; column-gap: 10px; } .es-site .es-distinta__campioni .es-campione { width: 72px; height: 44px; } .es-site .es-distinta .es-distinta__riga.es-distinta__riga--senza { grid-template-columns: 70px 1fr; } } .es-site .es-btn-rosso, .es-site .button.es-btn-rosso { background-color: var(--es-rosso) !important; border-color: var(--es-rosso) !important; color: var(--es-bianco) !important; } .es-site .es-btn-rosso:hover, .es-site .button.es-btn-rosso:hover { background-color: var(--es-rosso-sc) !important; border-color: var(--es-rosso-sc) !important; } /* "trova la tua rete": il fieldset di base non si restringe sotto il suo contenuto, e la fila delle risposte su telefono allargava la pagina */ .es-site .es-trova fieldset { min-width: 0; max-width: 100%; } /* 30 Pagine: elementi comuni ---------------------------------- */ /* le foto delle pagine hanno width e height nel tag (niente salti durante il caricamento): l'altezza la decide il rapporto scritto qui sotto */ .es-site :is(.es-pilastro__foto, .es-scheda__foto, .es-motore__foto, .es-foto-didascalia, .es-catalogo__copertina) img { height: auto; } .es-site .es-numeri { background: var(--es-carta); } .es-site .es-numeri__riga { padding: clamp(40px, 5vw, 80px) 0 clamp(16px, 2vw, 40px); } .es-site .es-numero { margin: 0; } .es-site .es-numero > span { display: block; font-size: clamp(44px, 4.6vw, 88px); line-height: 1; font-weight: 700; font-style: normal; color: var(--es-rosso); letter-spacing: -.01em; } .es-site .es-numero small { display: block; margin-top: 10px; max-width: 240px; font-size: 15px; line-height: 1.45; color: var(--es-grigio); } .es-site ul.es-punti { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--es-filetto); } .es-site ul.es-punti li { margin: 0; padding: 18px 0; border-top: 1px solid var(--es-filetto); } .es-site ul.es-punti strong { display: block; font-size: 17px; color: var(--es-grigio); } .es-site ul.es-punti span { display: block; font-size: 14px; color: var(--es-testo); margin-top: 2px; } .es-site .es-fase__num { display: block; font-size: clamp(40px, 3.6vw, 64px); line-height: 1; font-weight: 700; font-style: normal; color: var(--es-rosso); } .es-site .es-fase h3 { margin: 14px 0 8px; font-size: 22px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); } .es-site .es-fase p { font-size: 16px; line-height: 1.6; color: var(--es-testo); } .es-site .es-btn-bianco, .es-site .button.es-btn-bianco { background-color: var(--es-bianco) !important; border-color: var(--es-bianco) !important; color: var(--es-rosso) !important; } .es-site .es-btn-contorno-chiaro, .es-site .button.es-btn-contorno-chiaro { background-color: transparent !important; border-color: var(--es-bianco) !important; color: var(--es-bianco) !important; } /* 31 Azienda ---------------------------------------------------- */ .es-site .es-manifesto__citazione p { font-size: clamp(30px, 3.2vw, 60px); } .es-site .es-manifesto__testo { margin-top: clamp(24px, 3vw, 48px); max-width: 760px; } .es-site .es-ricerca__prove { margin-top: clamp(24px, 3vw, 48px) !important; } .es-site .es-prova { height: 100%; padding: clamp(24px, 2.6vw, 44px); background: var(--es-carta); border-top: 3px solid var(--es-rosso); } .es-site .es-prova__dove { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-prova__titolo { margin: 0 0 12px; font-size: clamp(26px, 2vw, 36px); font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-prova p { font-size: 16px; line-height: 1.65; color: var(--es-grigio); } .es-site .es-prova__firma { margin: 18px 0 0; font-style: normal; color: var(--es-testo) !important; } .es-site .es-pilastri { margin-top: clamp(24px, 3vw, 48px) !important; } .es-site .es-pilastro__foto { margin: 0 0 18px; overflow: hidden; } .es-site .es-pilastro__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .es-site .es-pilastro h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-pilastro p { font-size: 15px; line-height: 1.6; color: var(--es-testo); } @media (max-width: 849px) { .es-site .es-pilastro { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: start; } .es-site .es-pilastro__foto { grid-row: 1 / span 2; margin: 0; } .es-site .es-pilastro__foto img { aspect-ratio: 1; } } /* 32 Applicazioni benessere ------------------------------------- */ .es-site .es-ancore { display: grid; gap: 2px; } .es-site .es-ancore a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--es-filetto); font-size: clamp(20px, 1.6vw, 28px); font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); text-decoration: none; } .es-site .es-ancore a span { font-size: 14px; font-style: normal; color: var(--es-rosso); } .es-site .es-ancore a:hover { color: var(--es-rosso); } .es-site .es-benessere { background: var(--es-carta); } .es-site .es-benessere__schema-col > .col-inner { position: sticky; top: calc(var(--es-header) + 24px); padding: clamp(24px, 4vw, 64px) 0; } .es-site .es-schema { margin: 0; } .es-site .es-schema svg { width: 100%; height: auto; display: block; overflow: visible; } .es-site .es-schema__pavimento { stroke: var(--es-testo); stroke-width: 2; } .es-site .es-schema__piano { fill: var(--es-grigio); } .es-site .es-schema__gamba { fill: var(--es-grigio); transition: opacity .4s; } .es-site .es-schema__corpo, .es-site .es-schema__testa { fill: var(--es-rosso); opacity: .85; } .es-site .es-schema__forbice { fill: none; stroke: var(--es-grigio); stroke-width: 5; stroke-linecap: round; } .es-site .es-schema__base-nemo { fill: var(--es-grigio); } .es-site .es-schema__nemo { opacity: 0; transform-box: view-box; transform-origin: 300px 290px; transition: opacity .5s, transform .9s var(--es-curva); } .es-site .es-schema__letto, .es-site .es-schema__tutto, .es-site .es-schema__gambe { transform-box: view-box; transition: transform 1s var(--es-curva); } .es-site .es-schema__tutto { transform-origin: 515px 193px; } .es-site .es-schema__gambe { transform-origin: 330px 193px; } .es-site .es-schema__et { font-family: var(--es-sans); font-size: 19px; font-weight: 700; font-style: normal; fill: var(--es-grigio); text-anchor: middle; opacity: 0; transition: opacity .4s; } .es-site .es-schema[data-stato="piano"] .es-schema__et--piano, .es-site .es-schema[data-stato="antireflusso"] .es-schema__et--antireflusso, .es-site .es-schema[data-stato="flebologico"] .es-schema__et--flebologico, .es-site .es-schema[data-stato="nemo"] .es-schema__et--nemo { opacity: 1; } .es-site .es-schema[data-stato="antireflusso"] .es-schema__tutto { transform: rotate(5deg); } /* testa più alta, perno ai piedi */ .es-site .es-schema[data-stato="flebologico"] .es-schema__gambe { transform: rotate(-9deg); } .es-site .es-schema[data-stato="nemo"] .es-schema__letto { transform: translateY(-70px); } .es-site .es-schema[data-stato="nemo"] .es-schema__gamba { opacity: 0; } .es-site .es-schema[data-stato="nemo"] .es-schema__nemo { opacity: 1; transform: scaleY(1.78); } .es-site .es-schema[data-stato="nemo"] .es-schema__base-nemo { transform: scaleY(.56); transform-box: fill-box; transform-origin: bottom; } .es-site .es-benessere__passi > .col-inner { padding: 6vh 0 18vh; } .es-site .es-applicazione { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .4; transition: opacity .5s; scroll-margin-top: calc(var(--es-header) + 24px); } .es-site .es-applicazione.is-attivo { opacity: 1; } .es-site .es-applicazione__num { margin: 0; font-size: 15px; font-weight: 700; color: var(--es-rosso); } .es-site .es-applicazione__titolo { margin: 6px 0 16px; font-size: clamp(34px, 3vw, 56px); line-height: 1; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-applicazione__problema { font-size: clamp(17px, 1.15vw, 21px); line-height: 1.55; color: var(--es-grigio); } .es-site .es-applicazione__come { margin: 8px 0 18px 0; padding: 0; list-style: none; } .es-site .es-applicazione__come li { position: relative; margin: 0 0 10px; padding-left: 24px; font-size: 16px; line-height: 1.55; color: var(--es-testo); } .es-site .es-applicazione__come li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--es-rosso); } .es-site .es-applicazione__per { margin: 0; padding-left: 14px; border-left: 3px solid var(--es-rosso); font-size: 14px; font-weight: 700; color: var(--es-grigio); } .es-site .es-foto-didascalia { margin: 0; } .es-site .es-foto-didascalia__img { display: block; overflow: hidden; } .es-site .es-foto-didascalia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .es-site .es-foto-didascalia figcaption { margin-top: 12px; font-size: 14px; color: var(--es-testo); } .es-site .es-dm { background: var(--es-grigio); color: var(--es-bianco); } .es-site .es-dm__testo p { color: var(--es-bianco); font-size: clamp(16px, 1.05vw, 19px); line-height: 1.6; max-width: 640px; } .es-site .es-dm__azioni > .col-inner { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; } @media (max-width: 849px) { .es-site .es-benessere__schema-col { position: sticky; top: var(--es-header); z-index: 2; background: var(--es-carta); } .es-site .es-benessere__schema-col > .col-inner { position: static; padding: 12px 0 4px; } .es-site .es-schema svg { max-height: 30vh; margin: 0 auto; } .es-site .es-schema__et { font-size: 24px; } .es-site .es-applicazione { min-height: 62vh; } .es-site .es-dm__azioni > .col-inner { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .es-site .es-schema *, .es-site .es-applicazione { transition: none !important; } } /* 33 Su misura --------------------------------------------------- */ .es-site .es-misura { background: var(--es-carta); } .es-site .es-misura__riga { padding: clamp(32px, 4vw, 72px) 0; } .es-site .es-misura__disegno-col > .col-inner { position: sticky; top: calc(var(--es-header) + 24px); } .es-site .es-misura__disegno { margin: 0; background: var(--es-bianco); padding: clamp(12px, 2vw, 32px); } .es-site .es-misura__disegno svg { width: 100%; height: auto; display: block; } .es-site .es-misura__griglia { fill: none; stroke: var(--es-filetto); stroke-width: 1; stroke-dasharray: 4 6; } .es-site .es-misura__rete { fill: #e9e1d5; stroke: var(--es-grigio); stroke-width: 3; transition: all .5s var(--es-curva); } .es-site .es-misura__doghe line { stroke: #c8b89f; stroke-width: 3; stroke-linecap: round; } .es-site .es-misura__quota { font-family: var(--es-sans); font-size: 18px; font-weight: 700; fill: var(--es-rosso); } .es-site .es-misura__quota--l { text-anchor: middle; } .es-site .es-misura__quota--h { dominant-baseline: middle; } .es-site .es-misura__nota { margin-top: 12px; font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); text-align: center; } .es-site .es-misura__comandi { margin: 0; } .es-site .es-misura__preset { margin: 0 0 24px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; } .es-site .es-misura__preset legend { width: 100%; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-misura__preset button { min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--es-filetto); border-radius: 0; background: var(--es-bianco); font-size: 15px; font-weight: 700; color: var(--es-grigio); text-transform: none; letter-spacing: 0; } .es-site .es-misura__preset button[aria-pressed="true"] { background: var(--es-rosso); border-color: var(--es-rosso); color: var(--es-bianco); } .es-site .es-misura__campo { margin-bottom: 18px; } .es-site .es-misura__campo label { display: flex; justify-content: space-between; font-size: 16px; color: var(--es-grigio); } .es-site .es-misura__campo output { font-weight: 700; color: var(--es-rosso); } .es-site .es-misura__campo input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--es-rosso); background: transparent; border: 0; box-shadow: none; } .es-site .es-misura__conteggio { margin: 8px 0 12px; font-size: 18px; font-weight: 700; color: var(--es-grigio); } .es-site .es-misura__reti { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--es-filetto); } .es-site .es-misura__reti li { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--es-filetto); transition: opacity .3s; } .es-site .es-misura__reti li::before { content: "✓"; grid-row: 1 / span 2; font-weight: 700; color: var(--es-rosso); } .es-site .es-misura__reti li.is-no { opacity: .4; } .es-site .es-misura__reti li.is-no::before { content: "–"; color: var(--es-testo); } .es-site .es-misura__reti a { font-size: 17px; font-weight: 700; color: var(--es-grigio); text-decoration: none; } .es-site .es-misura__reti small { font-size: 13px; color: var(--es-testo); } @media (max-width: 849px) { .es-site .es-misura__disegno-col > .col-inner { position: static; } .es-site .es-misura__disegno svg { max-height: 34vh; } } /* 34 Guida alla scelta ------------------------------------------- */ .es-site .es-guida-scelta__riga { margin-top: clamp(24px, 3vw, 48px) !important; } .es-site .es-guida-scelta__indice-col > .col-inner { position: sticky; top: calc(var(--es-header) + 24px); } .es-site .es-guida-indice { display: flex; flex-direction: column; border-left: 2px solid var(--es-filetto); } .es-site .es-guida-indice a { padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; color: var(--es-testo); text-decoration: none; } .es-site .es-guida-indice a[aria-current="true"], .es-site .es-guida-indice a:hover { border-left-color: var(--es-rosso); color: var(--es-rosso); font-weight: 700; } .es-site .es-guida-tema { padding-bottom: clamp(28px, 3vw, 48px); scroll-margin-top: calc(var(--es-header) + 80px); } .es-site .es-guida-tema__titolo { margin: 0 0 12px; font-size: clamp(26px, 2vw, 36px); font-weight: 700; font-style: normal; color: var(--es-rosso); } .es-site .es-faq { border-bottom: 1px solid var(--es-filetto); } .es-site .es-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 17px; font-weight: 700; color: var(--es-grigio); cursor: pointer; list-style: none; } .es-site .es-faq summary::-webkit-details-marker { display: none; } .es-site .es-faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--es-filetto); font-weight: 400; font-size: 22px; color: var(--es-rosso); transition: transform .3s; } .es-site .es-faq[open] summary::after { transform: rotate(45deg); } .es-site .es-faq__risposta { padding: 0 48px 18px 0; } .es-site .es-faq__risposta p { font-size: 16px; line-height: 1.65; color: var(--es-testo); } @media (max-width: 849px) { .es-site .es-guida-scelta__indice-col { position: sticky; top: var(--es-header); z-index: 3; background: var(--es-bianco); } .es-site .es-guida-scelta__indice-col > .col-inner { position: static; padding: 8px 0; } .es-site .es-guida-indice { flex-direction: row; overflow-x: auto; gap: 6px; border-left: 0; scrollbar-width: none; } .es-site .es-guida-indice a { flex: none; margin: 0; padding: 10px 14px; border: 1px solid var(--es-filetto); white-space: nowrap; } .es-site .es-guida-indice a[aria-current="true"] { border-color: var(--es-rosso); background: var(--es-rosso); color: var(--es-bianco); } .es-site .es-faq__risposta { padding-right: 0; } } /* 35 Accessori e motori ------------------------------------------ */ .es-site .es-schede__filtri { display: flex; gap: 8px; margin: clamp(16px, 2vw, 32px) 0 8px; overflow-x: auto; scrollbar-width: none; } .es-site .es-schede__filtri button { flex: none; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--es-filetto); border-radius: 0; background: var(--es-bianco); font-size: 15px; font-weight: 700; color: var(--es-grigio); text-transform: none; letter-spacing: 0; } .es-site .es-schede__filtri button span { margin-left: 6px; font-weight: 400; color: var(--es-testo); } .es-site .es-schede__filtri button[aria-pressed="true"] { background: var(--es-grigio); border-color: var(--es-grigio); color: var(--es-bianco); } .es-site .es-schede__filtri button[aria-pressed="true"] span { color: var(--es-bianco); } .es-site .es-schede__conteggio { min-height: 1.4em; margin: 0 0 16px; font-size: 14px; color: var(--es-testo); } .es-site .es-schede__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px, 2vw, 36px); } .es-site .es-scheda[hidden] { display: none; } .es-site .es-scheda__foto { margin: 0 0 14px; overflow: hidden; background: var(--es-carta); } .es-site .es-scheda__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .8s var(--es-curva); } .es-site .es-scheda:hover .es-scheda__foto img { transform: scale(1.04); } .es-site .es-scheda__cat { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-scheda__titolo { margin: 0 0 8px; font-size: 21px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-scheda p { font-size: 15px; line-height: 1.6; color: var(--es-testo); } .es-site .es-motori { background: var(--es-carta); } .es-site .es-motore__foto { margin: 0 0 16px; background: var(--es-bianco); } .es-site .es-motore__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; } .es-site .es-motore h3 { margin: 0; font-size: 26px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); } .es-site .es-motore__dato { margin: 4px 0 10px; font-size: 14px; font-weight: 700; color: var(--es-rosso); } .es-site .es-motore p { font-size: 15px; line-height: 1.6; color: var(--es-testo); } @media (max-width: 549px) { .es-site .es-schede__griglia { grid-template-columns: 1fr 1fr; gap: 16px; } .es-site .es-scheda__titolo { font-size: 17px; } .es-site .es-scheda p { font-size: 14px; } } /* 36 Download ------------------------------------------------------ */ .es-site .es-download__riga { margin-top: clamp(24px, 3vw, 48px) !important; } .es-site .es-catalogo__copertina { position: relative; display: block; overflow: hidden; background: var(--es-grigio); } .es-site .es-catalogo__copertina img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 1s var(--es-curva); } .es-site .es-catalogo__copertina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34, 35, 37, .82) 0%, rgba(34, 35, 37, .15) 60%); } .es-site .es-catalogo__copertina:hover img { transform: scale(1.04); } .es-site .es-catalogo__titolo { position: absolute; left: clamp(18px, 2vw, 32px); bottom: clamp(16px, 2vw, 28px); z-index: 1; font-size: clamp(36px, 3.4vw, 64px); line-height: .95; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-bianco); } .es-site .es-catalogo__titolo small { display: block; margin-bottom: 6px; font-size: 14px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; } .es-site .es-catalogo__dati { margin: 16px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-catalogo p { font-size: 16px; line-height: 1.6; color: var(--es-grigio); } .es-site .es-download__altro { margin-top: clamp(24px, 3vw, 48px); font-size: 17px; color: var(--es-grigio); } /* 37 Sezione di testo delle pagine (es-testo) --------------------- Titolo a sinistra, tre paragrafi a destra in una colonna leggibile (al massimo 72 caratteri circa per riga); su telefono uno sotto l'altro. */ .es-site .es-testo--carta { background: var(--es-carta); } .es-site .es-testo__corpo p { max-width: 720px; margin: 0 0 1.1em; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.72; color: var(--es-grigio); } .es-site .es-testo__corpo p:first-child { font-size: clamp(18px, 1.25vw, 22px); line-height: 1.6; } .es-site .es-testo__corpo p:last-child { margin-bottom: 0; } /* 38 Contatti: recapiti, a chi scrivere, mappa a due clic ------------ */ .es-site .es-recapiti-schede { list-style: none; margin: clamp(20px, 2.4vw, 36px) 0 18px; padding: 0; border-top: 1px solid var(--es-filetto); } .es-site .es-recapiti-schede li { margin: 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-recapiti-schede a { display: block; padding: 16px 0; text-decoration: none; } .es-site .es-recapiti-schede__etichetta { display: block; font-size: 13px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-recapiti-schede strong { display: block; font-size: clamp(19px, 1.4vw, 24px); color: var(--es-grigio); } .es-site .es-recapiti-schede a:hover strong { color: var(--es-rosso); } .es-site .es-social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; } .es-site .es-social a { font-size: 15px; font-weight: 700; color: var(--es-grigio); text-decoration: underline; text-underline-offset: 4px; } .es-site .es-contatti__modulo { padding: clamp(24px, 3vw, 48px); background: var(--es-carta); } .es-site .es-contatti__modulo-titolo { margin: 0 0 12px; font-size: clamp(26px, 2vw, 36px); font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-instrada { background: var(--es-carta); } .es-site .es-strada { display: flex; flex-direction: column; height: 100%; padding: 24px 22px 26px; background: var(--es-bianco); border-top: 3px solid var(--es-rosso); text-decoration: none; transition: transform .4s var(--es-curva), box-shadow .4s; } .es-site .es-strada:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(40, 41, 43, .1); } .es-site .es-strada__chi { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-strada strong { margin: 8px 0 10px; font-size: 22px; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-strada__testo { font-size: 15px; line-height: 1.55; color: var(--es-grigio); } .es-site .es-mappa-riga { max-width: none !important; } .es-site .es-mappa { position: relative; height: clamp(320px, 42vh, 480px); background: var(--es-grigio); } .es-site .es-mappa iframe { width: 100%; height: 100%; border: 0; display: block; } .es-site .es-mappa__copertina { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--es-bianco); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 48px), var(--es-grigio); } .es-site .es-mappa__indirizzo { margin: 0; font-size: 18px; color: var(--es-bianco); } .es-site .es-mappa__indirizzo strong { display: block; font-size: clamp(28px, 2.4vw, 40px); font-style: normal; text-transform: none; } .es-site .es-mappa__mostra { min-height: 48px; margin: 0; padding: 0 26px; border: 0; border-radius: 0; background: var(--es-rosso); color: var(--es-bianco); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; } .es-site .es-mappa__mostra:hover { background: var(--es-rosso-sc); } .es-site .es-mappa__nota { margin: 0; font-size: 13px; color: #e6e7e8; } /* 39 Dove acquistare (provvisoria) ------------------------------- */ .es-site .es-dove__cerca { max-width: 560px; margin: clamp(20px, 2.4vw, 36px) 0 16px; } .es-site .es-dove__cerca input[type="text"] { border: 1px solid var(--es-grigio); border-right: 0; } .es-site .es-dove__cerca button { background: var(--es-rosso); } .es-site .es-dove__esito { max-width: 560px; padding: 18px 20px; background: var(--es-carta); border-left: 3px solid var(--es-rosso); } .es-site .es-dove__esito[hidden] { display: none; } .es-site .es-dove__esito p { margin: 0 0 6px; font-size: 16px; line-height: 1.55; color: var(--es-grigio); } .es-site .es-dove__esito p:last-child { margin-bottom: 0; } .es-site .es-dove__cercato strong { color: var(--es-rosso); } /* 40 Ricerca istantanea (pannello della lente) -------------------- */ .es-site .es-cerca-risultati { list-style: none; margin: 14px -22px -20px; padding: 0 0 8px; max-height: min(60vh, 520px); overflow-y: auto; border-top: 1px solid var(--es-filetto); } .es-site .es-cerca-risultati[hidden] { display: none; } .es-site .es-cerca-risultati__gruppo { margin: 0; padding: 14px 22px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-cerca-risultati__voce { margin: 0; } .es-site .es-cerca-risultati__voce a { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 8px 22px; text-decoration: none; } .es-site .es-cerca-risultati__voce img, .es-site .es-cerca-risultati__senza { width: 56px; height: 56px; object-fit: cover; display: block; background: var(--es-carta); } .es-site .es-cerca-risultati__testi small { display: block; font-size: 12px; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-cerca-risultati__testi strong { display: block; font-size: 16px; color: var(--es-grigio); } .es-site .es-cerca-risultati__testi span { display: block; font-size: 13px; color: var(--es-testo); } .es-site .es-cerca-risultati__voce.is-attivo a, .es-site .es-cerca-risultati__voce a:hover { background: var(--es-carta); } .es-site .es-cerca-risultati__tutti a { grid-template-columns: 1fr; border-top: 1px solid var(--es-filetto); margin-top: 6px; } .es-site .es-cerca-risultati__tutti .es-cerca-risultati__senza { display: none; } .es-site .es-cerca-risultati__tutti strong { font-size: 14px; color: var(--es-rosso); text-decoration: underline; text-underline-offset: 4px; } .es-site .es-cerca-pannello.is-cerca-in-corso .es-cerca-pannello__vai { opacity: .6; } /* 41 Filtri a tendina e schede delle famiglie ----------------------- Desktop: un menu per gruppo, voci con campione e numero di composizioni, filtri attivi come etichette. Telefono: pannello dal basso con i gruppi aperti. */ .es-site .es-filtri__menu { display: flex; flex-wrap: wrap; gap: 10px; } .es-site .es-filtri .es-filtri__gruppo { position: relative; display: block; } .es-site .es-filtri__tendina { position: relative; min-height: 48px; margin: 0; padding: 0 42px 0 16px; border: 1px solid var(--es-filetto); border-radius: 0; background: var(--es-bianco); font-size: 15px; font-weight: 700; color: var(--es-grigio); text-transform: none; letter-spacing: 0; } .es-site .es-filtri__tendina::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .es-site .es-filtri__gruppo.is-aperto .es-filtri__tendina::after { transform: rotate(-135deg); margin-top: -2px; } .es-site .es-filtri__gruppo.is-scelto .es-filtri__tendina { border-color: var(--es-grigio); } .es-site .es-filtri__scelta { color: var(--es-rosso); text-transform: none; } .es-site .es-filtri__etichetta { font-style: normal; } .es-site .es-filtri__voci { display: none; } .es-site .es-filtri__voci .es-chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 6px 12px; border: 0; border-radius: 0; background: none; font-size: 15px; font-weight: 400; text-align: left; text-transform: none; color: var(--es-grigio); } .es-site .es-filtri__voci .es-chip:hover { background: var(--es-carta); } .es-site .es-filtri__voci .es-chip[aria-pressed="true"] { background: var(--es-carta); color: var(--es-rosso); font-weight: 700; } .es-site .es-chip .es-campione { flex: none; width: 34px; height: 22px; object-fit: cover; } .es-site .es-chip__n { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--es-testo); } .es-site .es-filtri__stato { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; } .es-site .es-filtri__etichette { display: flex; flex-wrap: wrap; gap: 6px; } .es-site .es-filtri__tag { min-height: 34px; margin: 0; padding: 0 12px; border: 1px solid var(--es-rosso); border-radius: 0; background: var(--es-bianco); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--es-rosso); } .es-site .es-filtri__tag::after { content: " ×"; font-weight: 400; } .es-site .es-filtri__conteggio { margin: 0 0 0 auto; } @media (min-width: 850px) { .es-site .es-filtri__gruppo.is-aperto .es-filtri__voci { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px; min-width: 240px; max-height: 380px; overflow-y: auto; padding: 8px; background: var(--es-bianco); box-shadow: 0 16px 36px rgba(40, 41, 43, .16); border-top: 3px solid var(--es-rosso); } .es-site .es-filtri__gruppo--finiture.is-aperto .es-filtri__voci { grid-template-columns: 1fr 1fr; min-width: 460px; } } @media (max-width: 849px) { .es-site .es-filtri__menu { display: block; } .es-site .es-filtri__tendina { min-height: 0; padding: 18px 0 8px; border: 0; background: none; font-size: 18px; font-style: normal; color: var(--es-rosso); pointer-events: none; } .es-site .es-filtri__tendina::after { display: none; } .es-site .es-filtri__voci { display: flex; flex-wrap: wrap; gap: 8px; } .es-site .es-filtri__voci .es-chip { width: auto; min-height: 46px; border: 1px solid var(--es-filetto); } .es-site .es-filtri__voci .es-chip[aria-pressed="true"] { border-color: var(--es-grigio); background: var(--es-grigio); color: var(--es-bianco); } .es-site .es-filtri__voci .es-chip[aria-pressed="true"] .es-chip__n { color: var(--es-bianco); } .es-site .es-filtri__conteggio { margin-left: 0; width: 100%; } } /* schede delle famiglie e dei modelli (sottocategorie di Flatsome): testo sotto la foto */ .es-site .product-category .box-image { overflow: hidden; } .es-site .product-category .box-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--es-curva); } .es-site .product-category:hover .box-image img { transform: scale(1.04); } .es-site .product-category .box-text { position: static !important; padding: 16px 0 0 !important; background: none !important; text-align: left !important; } .es-site .product-category .box-text .header-title, .es-site .product-category .box-text h5 { margin: 0; font-size: clamp(22px, 1.6vw, 30px); font-weight: 700; font-style: normal; text-transform: none !important; letter-spacing: 0; color: var(--es-rosso); } .es-site .product-category .es-conteggio-categoria { margin: 4px 0 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--es-testo); opacity: 1; } /* 42 Filetto dei titoli nelle colonne strette ------------------------ Arriva al bordo dello schermo solo quando il titolo occupa tutta la riga; in una colonna affiancata ad altre si ferma alla fine della colonna. */ @media (min-width: 850px) { .es-site .col:not(.large-12) .es-linea { margin-right: 0; } } /* 43 Categorie: paragrafi compatti, niente doppioni, megamenu reti compatto ----------- */ /* titolo, descrizione e riga dei risultati di WooCommerce/Flatsome: sono già nella barra del catalogo */ .es-site.es-con-barra-catalogo :is(.woocommerce-products-header, .term-description, .page-description, .shop-page-title .page-title, .category-page-title .page-title) { display: none; } /* i paragrafi stanno dentro il contenitore del catalogo: niente margini di sezione, allineati alle schede */ .es-site .es-paragrafo-categoria .section { padding-left: 0 !important; padding-right: 0 !important; } .es-site .es-paragrafo-categoria .row { max-width: none; margin-left: -15px; margin-right: -15px; width: auto; } .es-site .es-paragrafo-categoria--primo .es-intro { padding-top: 8px !important; padding-bottom: 28px !important; } .es-site .es-paragrafo-categoria .es-intro__paragrafo p, .es-site .es-paragrafo-categoria .es-approfondimento__paragrafo p { font-size: clamp(15px, .95vw, 17px); line-height: 1.7; } .es-site .es-paragrafo-categoria .es-ctx h2 { font-size: clamp(26px, 2vw, 38px); } .es-site .es-paragrafo-categoria .es-intro__foto img { aspect-ratio: 16 / 10; } /* secondo paragrafo: foto orizzontali; se nella seconda riga c'è una foto sola, prende tutta la colonna */ .es-site .es-approfondimento__foto--grande img { aspect-ratio: 16 / 10; } .es-site .es-approfondimento__foto img { aspect-ratio: 4 / 3; } .es-site .es-approfondimento__foto--sfalsata { margin-top: clamp(16px, 2vw, 36px); } .es-site .es-approfondimento__coppia > .col-inner:not(:has(.es-ctx + .es-ctx)) { grid-template-columns: 1fr; } .es-site .es-approfondimento__coppia > .col-inner:not(:has(.es-ctx + .es-ctx)) .es-approfondimento__foto img { aspect-ratio: 16 / 10; } .es-site .es-approfondimento__coppia > .col-inner:not(:has(.es-ctx + .es-ctx)) .es-approfondimento__foto--sfalsata { margin-top: 0; } .es-site .es-approfondimento__riga + .es-approfondimento__riga { margin-top: clamp(28px, 3vw, 56px); } /* megamenu reti compatto: tre colonne, miniatura, nome e certificazione */ .es-site .es-modelli--compatto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; } .es-site .es-modelli--compatto li { margin: 0; } .es-site .es-modelli--compatto .es-modelli__voce { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; align-items: center; padding: 6px 0; text-decoration: none; } .es-site .es-modelli--compatto .es-modelli__img { grid-row: 1 / span 2; width: 56px; height: 42px; overflow: hidden; background: var(--es-carta); } .es-site .es-modelli--compatto .es-modelli__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .es-site .es-modelli--compatto .es-modelli__nome { font-size: 16px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); line-height: 1.2; } .es-site .es-modelli--compatto .es-modelli__conteggio { font-size: 12px; color: var(--es-testo); line-height: 1.3; } .es-site .es-modelli--compatto .es-modelli__voce:hover .es-modelli__nome { color: var(--es-rosso); } /* 44 Scelta del letto: toni nel filtro colore, modello e campioni nelle schede ------- */ .es-site .es-tono { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .es-site .es-tono--legno { background: linear-gradient(135deg, #a2785a 0 33%, #6b4f3d 33% 66%, #c9b59b 66%); } .es-site .es-tono--chiari-e-neutri { background: linear-gradient(135deg, #f1efe9 0 50%, #d9cdb9 50%); } .es-site .es-tono--scuri { background: linear-gradient(135deg, #2b2526 0 50%, #5a4e48 50%); } .es-site .es-tono--colorati { background: conic-gradient(#3e7a82 0 25%, #f2c445 25% 50%, #ae1e39 50% 75%, #8fa08a 75%); } .es-site .es-scheda-modello { margin: 0 0 2px; font-size: 13px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-scheda-campioni { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; } .es-site .es-scheda-campione { display: block; width: 28px; height: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .es-site .es-scheda-campione img { width: 100%; height: 100%; object-fit: cover; display: block; } .products .product .es-scheda-modello + .woocommerce-loop-product__title, .products .product .es-scheda-modello + .name { margin-top: 0; } /* 45 Megamenu letti compatto: quattro colonne di modelli con miniatura, a destra la scelta guidata */ @media (min-width: 850px) { .es-site .es-mega--letti .es-modelli--compatto { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .es-site .es-mega--letti .es-modelli--compatto .es-modelli__voce { grid-template-columns: 56px 1fr; padding-top: 3px; padding-bottom: 3px; min-height: 0; } .es-site .es-mega--letti .es-modelli--compatto .es-modelli__img { grid-row: auto; } .es-site .es-mega__titolo--secondo { margin-top: 14px; } .es-site .es-mega__laterale .button { margin: 8px 0 12px; } /* 46 Megamenu da shortcode ([es_megamenu]) --------------------------- */ .es-site .es-megamenu { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: clamp(28px, 3vw, 56px); max-width: var(--es-contenitore, 1200px); margin: 0 auto; padding: 28px 15px 32px; text-align: left; } .es-site .es-megamenu__titolo { margin: 0 0 10px; font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-megamenu__principale .es-modelli + .es-megamenu__titolo { margin-top: 16px; } .es-site .es-megamenu .es-modelli--compatto { grid-template-columns: repeat(4, minmax(0, 1fr)); } .es-site .es-megamenu--reti .es-modelli--compatto { grid-template-columns: repeat(3, minmax(0, 1fr)); } .es-site .es-megamenu .es-modelli--compatto .es-modelli__voce { padding-top: 3px; padding-bottom: 3px; min-height: 0; } .es-site .es-megamenu .es-modelli__nome { white-space: normal; overflow-wrap: anywhere; } .es-site .es-megamenu__testo { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--es-grigio); } .es-site .es-megamenu__pulsante { margin: 0 0 12px !important; } .es-site .es-megamenu__link { list-style: none; margin: 0; padding: 0; } .es-site .es-megamenu__link li { margin: 0; } .es-site .es-megamenu__link a { display: block; padding: 7px 0; font-size: 15px; color: var(--es-grigio); text-decoration: none; border-bottom: 1px solid var(--es-filetto); } .es-site .es-megamenu__link a:hover { color: var(--es-rosso); } @media (max-width: 1100px) { .es-site .es-megamenu .es-modelli--compatto { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 47 Scheda delle reti: versioni e sezioni del sito precedente ---------------- */ .es-site .es-versioni { margin: 18px 0 6px; } .es-site .es-versioni__titolo { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-versioni__elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .es-site .es-versioni__voce { margin: 0; display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 16px; border: 1px solid var(--es-grigio); font-size: 15px; font-weight: 700; color: var(--es-grigio); } .es-site .es-versioni__voce small { font-size: 12px; font-weight: 400; color: var(--es-testo); } .es-site .es-versioni__voce--motorizzata { border-color: var(--es-rosso); color: var(--es-rosso); } .es-site .es-versioni__misura { margin: 12px 0 0; font-size: 15px; color: var(--es-grigio); } .es-site .es-versioni__misura strong { color: var(--es-rosso); } .es-site .es-rete-sezioni-sezione { padding-bottom: clamp(32px, 4vw, 72px) !important; } .es-site .es-nav-rete { position: sticky; top: var(--es-header); z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 clamp(20px, 2.4vw, 36px); padding: 12px 0; background: var(--es-bianco); border-bottom: 1px solid var(--es-filetto); } .es-site .es-nav-rete a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--es-filetto); font-size: 15px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); text-decoration: none; } .es-site .es-nav-rete a:hover { border-color: var(--es-rosso); color: var(--es-rosso); } .es-site .es-sezione-rete { padding: clamp(20px, 2.4vw, 40px) 0; border-top: 1px solid var(--es-filetto); scroll-margin-top: calc(var(--es-header) + 80px); } .es-site .es-sezione-rete__titolo { margin: 0 0 18px; font-size: clamp(26px, 2.2vw, 40px); font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-sezione-rete__link { margin: 14px 0 0; } .es-site .es-tabella-scorre { overflow-x: auto; } .es-site .es-tabella { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; } .es-site .es-tabella th, .es-site .es-tabella td { padding: 12px 14px; border-bottom: 1px solid var(--es-filetto); text-align: left; vertical-align: middle; } .es-site .es-tabella thead th { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-testo); border-bottom: 2px solid var(--es-grigio); } .es-site .es-tabella tbody th { font-weight: 700; color: var(--es-grigio); } .es-site .es-tabella--accessori td { width: 120px; text-align: center; } .es-site .es-tabella--accessori thead th:not(:first-child) { text-align: center; } .es-site .es-tabella .es-si { color: var(--es-rosso); font-size: 18px; font-weight: 700; } .es-site .es-tabella .es-no { color: #b9bbbf; } .es-site .es-tabella--accessori tbody tr:hover { background: var(--es-carta); } .es-site .es-tabella__su-misura th, .es-site .es-tabella__su-misura td { background: var(--es-carta); font-weight: 700; color: var(--es-rosso); } .es-site .es-griglia-finiture { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .es-site .es-griglia-finiture li { margin: 0; } .es-site .es-griglia-finiture__img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--es-carta); } .es-site .es-griglia-finiture__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .es-site .es-griglia-finiture__nome { display: block; margin-top: 8px; font-size: 14px; color: var(--es-grigio); } .es-site .es-griglia-piedi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } .es-site .es-griglia-piedi li { margin: 0; } .es-site .es-griglia-piedi__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--es-carta); margin-bottom: 10px; } .es-site .es-griglia-piedi__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .es-site .es-griglia-piedi strong { display: block; font-size: 18px; font-style: normal; text-transform: none; color: var(--es-grigio); } .es-site .es-griglia-piedi span:not(.es-griglia-piedi__img) { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--es-testo); } .es-site .es-download-rete { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .es-site .es-download-rete li { margin: 0; } .es-site .es-download-rete a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--es-grigio); font-weight: 700; color: var(--es-grigio); text-decoration: none; } .es-site .es-download-rete a::before { content: ""; width: 14px; height: 16px; background: currentColor; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); } .es-site .es-download-rete a:hover { border-color: var(--es-rosso); color: var(--es-rosso); } @media (max-width: 849px) { .es-site .es-griglia-finiture { grid-template-columns: repeat(3, minmax(0, 1fr)); } .es-site .es-griglia-piedi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } } /* 48 Megamenu come albero UX Builder (blocchi 07): stessa resa di [es_megamenu] -------- */ .es-site .es-mega .es-modelli--compatto { grid-template-columns: repeat(4, minmax(0, 1fr)); } .es-site .es-mega--reti .es-modelli--compatto { grid-template-columns: repeat(3, minmax(0, 1fr)); } .es-site .es-mega .es-modelli--compatto .es-modelli__voce { padding-top: 3px; padding-bottom: 3px; min-height: 0; } .es-site .es-mega .es-modelli__nome { white-space: normal; overflow-wrap: anywhere; } .es-site .es-mega .es-modelli--compatto + .es-mega__titolo { margin-top: 16px; } .es-site .es-mega__testo p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--es-grigio); } .es-site .es-mega__laterale .button { margin: 0 0 12px !important; } .es-site .es-mega__link .ux-menu-link__link { padding: 7px 0; font-size: 15px; color: var(--es-grigio); border-bottom: 1px solid var(--es-filetto); } .es-site .es-mega__link .ux-menu-link__link:hover { color: var(--es-rosso); } @media (max-width: 1100px) { .es-site .es-mega--letti .es-modelli--compatto { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Megamenu incollati dall'editor visuale: paragrafi vuoti fra righe e colonne non devono scomporre la griglia */ .es-site .es-mega .section-content > p, .es-site .es-mega .row > p, .es-site .es-mega .col-inner > p:empty, .es-site .es-mega br + p:empty { display: none; } .es-site .es-mega .es-mega__titolo .section-title, .es-site .es-mega .es-mega__titolo { margin: 0 0 10px; padding: 0; border: 0; } .es-site .es-mega .es-mega__titolo .section-title-main, .es-site .es-mega p.es-mega__titolo, .es-site .es-mega .es-mega__titolo p { font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--es-rosso); } .es-site .es-mega .es-mega__titolo .section-title b { display: none; } /* Scheda prodotto incollata dall'editor visuale: paragrafi vuoti fra righe e colonne non scompongono il layout */ .es-site.single-product .section-content > p, .es-site.single-product .row > p, .es-site.single-product .col-inner > p:empty, .es-site.single-product .accordion > p { display: none; } /* Elemento Titolo di Flatsome con le classi dei titoli Essedue (blocchi senza HTML) */ .es-site .section-title-container.es-titolo, .es-site .section-title-container.es-mega__titolo { margin-bottom: 10px; } .es-site .section-title-container:is(.es-titolo, .es-mega__titolo) .section-title { margin: 0; padding: 0; border: 0; display: block; } .es-site .section-title-container:is(.es-titolo, .es-mega__titolo) .section-title b { display: none; } .es-site .section-title-container.es-titolo .section-title-main { display: block; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1.1; color: var(--es-rosso); } .es-site .section-title-container.es-titolo--piccolo .section-title-main { font-size: clamp(26px, 2vw, 36px); } /* riquadro "vederla dal vivo": il grigio è sulla colonna, così titolo, testo e pulsante stanno insieme */ .es-site .es-prodotto__aiuto > .col-inner { background: var(--es-carta); padding: 28px; } .es-site .es-prodotto__aiuto .es-aiuto { background: none; padding: 0; } /* 49 Foto protagonista della scheda prodotto ([es_prodotto_hero]) ------------------- Desktop: foto a tutto schermo (sotto l'header), scorrimento con aggancio, frecce in basso a sinistra, pallini al centro, scheda bianca in basso a destra. Telefono: foto 4:3 a tutta larghezza, scheda sotto. */ .es-site .es-prodotto__alto { padding: 0 !important; } .es-site .es-prodotto__alto .col, .es-site .es-prodotto__alto .col-inner { padding: 0 !important; } .es-site .es-hero-prodotto { position: relative; background: var(--es-carta); } .es-site .es-hero-prodotto__galleria { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; height: calc(100svh - var(--es-header)); min-height: 520px; max-height: 1080px; outline: none; } .es-site .es-hero-prodotto__galleria::-webkit-scrollbar { display: none; } .es-site .es-hero-prodotto__galleria:focus-visible { box-shadow: inset 0 0 0 3px var(--es-rosso); } .es-site .es-hero-prodotto__foto { flex: 0 0 100%; margin: 0; height: 100%; scroll-snap-align: start; } .es-site .es-hero-prodotto__ingrandisci { display: block; width: 100%; height: 100%; cursor: zoom-in; } .es-site .es-hero-prodotto__img { width: 100%; height: 100%; object-fit: cover; display: block; } .es-site .es-hero-prodotto__comandi { position: absolute; left: var(--es-allinea); bottom: clamp(24px, 3vw, 48px); display: flex; gap: 12px; } .es-site .es-hero-prodotto__freccia { width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--es-bianco); color: var(--es-grigio); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); transition: background .2s, color .2s, transform .2s; } .es-site .es-hero-prodotto__freccia:hover { background: var(--es-rosso); color: var(--es-bianco); transform: scale(1.05); } .es-site .es-hero-prodotto__freccia:focus-visible { outline: 3px solid var(--es-bianco); outline-offset: 3px; box-shadow: 0 0 0 6px var(--es-rosso); } .es-site .es-hero-prodotto__zoom { margin-left: 16px; } .es-site .es-hero-prodotto__punti { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 20px; background: rgba(30, 31, 33, .45); backdrop-filter: blur(4px); } .es-site .es-hero-prodotto__punti button { width: 22px; height: 22px; margin: 0; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; } .es-site .es-hero-prodotto__punti button::after { content: ""; width: 10px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .8); transition: width .25s, background .25s; } .es-site .es-hero-prodotto__punti button.is-attivo { width: 34px; } .es-site .es-hero-prodotto__punti button.is-attivo::after { width: 26px; background: var(--es-rosso); } .es-site .es-hero-prodotto__scheda { position: absolute; right: var(--es-allinea); bottom: clamp(24px, 3vw, 48px); width: min(460px, 36vw); max-height: calc(100% - 48px); overflow-y: auto; padding: clamp(20px, 2vw, 32px); background: var(--es-bianco); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); } .es-site .es-hero-prodotto__occhiello { margin: 0 0 4px; font-size: 14px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-hero-prodotto__testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; } .es-site .es-hero-prodotto__nome { margin: 0; font-size: clamp(32px, 2.6vw, 48px); line-height: 1; font-weight: 700; color: var(--es-grigio); } .es-site .es-hero-prodotto__cert { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--es-rosso); border-radius: 17px; font-size: 14px; font-style: normal; color: var(--es-rosso); } .es-site .es-hero-prodotto__frase { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--es-testo); } .es-site .es-hero-prodotto .es-versioni { margin: 16px 0 0; } .es-site .es-hero-prodotto .es-scheda-riga, .es-site .es-hero-prodotto .es-scheda-misura { margin: 12px 0 0; font-size: 14px; color: var(--es-grigio); } .es-site .es-hero-prodotto .es-scheda-campioni { margin-top: 10px; } .es-site .es-hero-prodotto .es-scheda-campione { width: 40px; height: 26px; } .es-site .es-hero-prodotto__azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; } .es-site .es-hero-prodotto__azioni .button { flex: 1 1 180px; margin: 0 !important; text-align: center; } @media (max-width: 849px) { .es-site .es-hero-prodotto__galleria { height: auto; min-height: 0; aspect-ratio: 4 / 3; } .es-site .es-hero-prodotto__comandi { left: 15px; bottom: auto; top: calc(min(100vw, 849px) * .75 - 60px); } .es-site .es-hero-prodotto__freccia { width: 44px; height: 44px; } .es-site .es-hero-prodotto__zoom { margin-left: 8px; } .es-site .es-hero-prodotto__punti { bottom: auto; top: calc(min(100vw, 849px) * .75 - 34px); } .es-site .es-hero-prodotto__scheda { position: static; width: auto; max-height: none; padding: 20px 15px 8px; box-shadow: none; } .es-site .es-hero-prodotto__comandi { left: auto; right: 15px; } } @media (prefers-reduced-motion: reduce) { .es-site .es-hero-prodotto__galleria { scroll-behavior: auto; } } /* 50 Miniature dei megamenu più grandi -------------------------------- */ .es-site :is(.es-mega, .es-megamenu) .es-modelli--compatto .es-modelli__voce { grid-template-columns: 96px 1fr; column-gap: 14px; padding-top: 5px; padding-bottom: 5px; } .es-site :is(.es-mega, .es-megamenu) .es-modelli--compatto .es-modelli__img { width: 96px; height: 68px; } .es-site :is(.es-mega, .es-megamenu) .es-modelli--compatto .es-modelli__nome { font-size: 17px; } .es-site :is(.es-mega--letti, .es-megamenu--letti) .es-modelli--compatto { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1400px) { .es-site :is(.es-mega--letti, .es-megamenu--letti) .es-modelli--compatto { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 51 Didascalia editoriale sulla foto protagonista e barra che segue lo scorrimento -------- Desktop: sfumatura scura dal basso, nome grande in bianco (minuscolo corsivo, maschera), a destra versioni o finiture e pulsanti. Frecce a metà altezza, lente in alto a destra. Contrasto del bianco nel caso peggiore (foto bianca): oltre 6:1 sotto i testi piccoli, oltre 4:1 all'altezza del nome. Telefono: didascalia sotto la foto, su fondo chiaro. */ @media (min-width: 850px) { .es-site .es-hero-prodotto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(20, 21, 23, .9) 0%, rgba(20, 21, 23, .72) 32%, rgba(20, 21, 23, .32) 66%, rgba(20, 21, 23, 0) 100%); } .es-site .es-hero-prodotto__scheda { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: none; overflow: visible; z-index: 2; padding: 0 0 clamp(52px, 5vw, 76px); background: none; box-shadow: none; pointer-events: none; } .es-site .es-hero-prodotto__didascalia { max-width: var(--es-contenitore, 1200px); margin: 0 auto; padding: 0 15px; pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; } .es-site .es-hero-prodotto__occhiello { color: var(--es-bianco); opacity: .9; font-size: 15px; } .es-site .es-hero-prodotto__nome { font-size: clamp(56px, 6.5vw, 128px); line-height: .9; font-style: normal; text-transform: none; color: var(--es-bianco); letter-spacing: -.01em; } .es-site .es-hero-prodotto__cert { margin-top: 14px; border-color: rgba(255, 255, 255, .75); color: var(--es-bianco); font-style: normal; font-weight: 700; font-size: 13px; } .es-site .es-hero-prodotto__frase { max-width: 560px; color: var(--es-bianco); font-size: clamp(16px, 1.1vw, 19px); } .es-site .es-hero-prodotto__cosa { justify-self: end; width: 100%; max-width: 440px; } .es-site .es-hero-prodotto .es-versioni__titolo { color: rgba(255, 255, 255, .85); } .es-site .es-hero-prodotto .es-versioni__voce { border-color: rgba(255, 255, 255, .6); background: rgba(20, 21, 23, .25); color: var(--es-bianco); } .es-site .es-hero-prodotto .es-versioni__voce small, .es-site .es-hero-prodotto .es-versioni__misura { color: rgba(255, 255, 255, .85); } .es-site .es-hero-prodotto .es-versioni__misura strong { color: var(--es-bianco); } .es-site .es-hero-prodotto .es-scheda-riga, .es-site .es-hero-prodotto .es-scheda-misura { color: var(--es-bianco); } .es-site .es-hero-prodotto .es-scheda-campione { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); } /* comandi: frecce ai lati a metà altezza, lente in alto a destra, pallini in fondo al centro */ .es-site .es-hero-prodotto__comandi { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; } .es-site .es-hero-prodotto__freccia { position: absolute; top: 42%; pointer-events: auto; } .es-site .es-hero-prodotto__freccia[data-es-hero-prec] { left: clamp(16px, 2vw, 32px); } .es-site .es-hero-prodotto__freccia[data-es-hero-succ] { right: clamp(16px, 2vw, 32px); } .es-site .es-hero-prodotto__zoom { top: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); margin: 0; } .es-site .es-hero-prodotto__punti { z-index: 3; bottom: 16px; } } .es-site .es-btn-bianco, .es-site .button.es-btn-bianco { background-color: var(--es-bianco) !important; border-color: var(--es-bianco) !important; color: var(--es-grigio) !important; } .es-site .es-btn-bianco:hover { background-color: var(--es-carta) !important; } @media (max-width: 849px) { .es-site .es-hero-prodotto__nome { font-size: clamp(40px, 11vw, 56px); line-height: .95; font-style: normal; text-transform: none; } .es-site .es-hero-prodotto__cert { margin-top: 10px; } .es-site .es-hero-prodotto__azioni .es-btn-bianco { background-color: var(--es-grigio) !important; border-color: var(--es-grigio) !important; color: var(--es-bianco) !important; } } /* barra che segue lo scorrimento (solo desktop: su telefono c'è la barra fissa in basso) */ .es-site .es-prodotto-barra { display: none; } @media (min-width: 850px) { .es-site .es-prodotto-barra { display: block; position: fixed; left: 0; right: 0; top: var(--es-header); z-index: 40; background: var(--es-bianco); border-bottom: 1px solid var(--es-filetto); box-shadow: 0 8px 20px rgba(0, 0, 0, .06); transform: translateY(-110%); opacity: 0; transition: transform .35s var(--es-curva), opacity .35s; pointer-events: none; } .es-site .es-prodotto-barra.is-visibile { transform: none; opacity: 1; pointer-events: auto; } .es-site .es-prodotto-barra__dentro { max-width: var(--es-contenitore, 1200px); margin: 0 auto; padding: 10px 15px; display: flex; align-items: center; gap: 20px; } .es-site .es-prodotto-barra__nome { margin: 0 auto 0 0; font-size: 24px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-grigio); } .es-site .es-prodotto-barra__nome span { margin-left: 10px; padding: 3px 10px; border: 1px solid var(--es-rosso); border-radius: 12px; font-size: 12px; font-style: normal; font-weight: 700; text-transform: none; color: var(--es-rosso); vertical-align: middle; } .es-site .es-prodotto-barra__azioni { margin: 0; display: flex; gap: 8px; } .es-site .es-prodotto-barra__azioni .button { margin: 0 !important; min-height: 44px; padding: 0 18px; line-height: 44px; } .es-site .es-prodotto-barra__azioni .es-btn-bianco { background-color: var(--es-grigio) !important; border-color: var(--es-grigio) !important; color: var(--es-bianco) !important; } } @media (prefers-reduced-motion: reduce) { .es-site .es-prodotto-barra { transition: none; } } /* i codici delle composizioni restano come nel catalogo: CDBED — 02 */ .es-site .es-hero-prodotto--letto .es-hero-prodotto__nome { text-transform: none; font-style: normal; letter-spacing: 0; } .es-site .es-prodotto-barra--letto .es-prodotto-barra__nome { text-transform: none; font-style: normal; } /* 52 Navigazione del catalogo, modulo nella finestra, ritocchi della scheda ------------- */ .es-site .es-naviga-catalogo { margin: 0 0 clamp(18px, 2vw, 28px); } .es-site .es-naviga-catalogo__riga { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--es-filetto); } .es-site .es-naviga-catalogo__voce { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; margin-bottom: -1px; border-bottom: 3px solid transparent; font-size: 16px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-testo); text-decoration: none; } .es-site .es-naviga-catalogo__voce:hover { color: var(--es-rosso); } .es-site .es-naviga-catalogo__voce.is-attiva { border-bottom-color: var(--es-rosso); color: var(--es-rosso); } .es-site .es-naviga-catalogo__modelli { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding: 14px 0 6px; } .es-site .es-naviga-catalogo__modello { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 14px 4px 4px; border: 1px solid var(--es-filetto); font-size: 15px; font-weight: 700; color: var(--es-grigio); text-decoration: none; background: var(--es-bianco); } .es-site .es-naviga-catalogo__modello img { width: 64px; height: 44px; object-fit: cover; display: block; } .es-site .es-naviga-catalogo__modello:hover { border-color: var(--es-grigio); } .es-site .es-naviga-catalogo__modello.is-attiva { border-color: var(--es-rosso); color: var(--es-rosso); } .es-site .es-hero-prodotto__occhiello a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .es-site .es-hero-prodotto__occhiello a:hover { opacity: .8; } /* doppia linea sotto i pulsanti delle sezioni delle reti */ .es-site .es-nav-rete + .es-sezione-rete { border-top: 0; padding-top: 0; } /* modulo nella finestra (richiedi informazioni): compatto, e scorre se lo schermo è basso */ .mfp-content #es-richiesta, .mfp-content .lightbox-content#es-richiesta { max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; padding: 24px 28px !important; } .es-site #es-richiesta .section-title-container, .es-site #es-richiesta .es-titolo { margin-bottom: 8px; } .es-site #es-richiesta .kw-form { padding: 0 !important; background: none !important; } .es-site #es-richiesta .kw-form > p:first-child, .es-site #es-richiesta .wpcf7-form > p:first-child { margin-bottom: 10px; font-size: 14px; } .es-site #es-richiesta .wpcf7-form p, .es-site #es-richiesta .kw-form .form-row, .es-site #es-richiesta .wpcf7-form .col { margin-bottom: 10px; } .es-site #es-richiesta label { margin-bottom: 2px; font-size: 14px; } .es-site #es-richiesta input[type="text"], .es-site #es-richiesta input[type="email"], .es-site #es-richiesta input[type="tel"], .es-site #es-richiesta select { height: 42px; min-height: 42px; } .es-site #es-richiesta textarea { height: 96px; min-height: 96px; } @media (max-height: 700px) { .es-site #es-richiesta textarea { height: 72px; min-height: 72px; } } /* 53 Frecce della fila dei modelli ------------------------------------ */ .es-site .es-naviga-catalogo__scorri { position: relative; } .es-site .es-naviga-catalogo__scorri .es-naviga-catalogo__modelli { scrollbar-width: none; scroll-behavior: smooth; } .es-site .es-naviga-catalogo__scorri .es-naviga-catalogo__modelli::-webkit-scrollbar { display: none; } .es-site .es-naviga-catalogo__freccia { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin: -16px 0 0; padding: 0; border: 1px solid var(--es-filetto); border-radius: 50%; display: none; place-items: center; background: var(--es-bianco); color: var(--es-grigio); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transition: opacity .2s, background .2s, color .2s; } .es-site .es-naviga-catalogo__scorri.is-scorrevole .es-naviga-catalogo__freccia { display: grid; } .es-site .es-naviga-catalogo__freccia--prec { left: -6px; } .es-site .es-naviga-catalogo__freccia--succ { right: -6px; } .es-site .es-naviga-catalogo__freccia:hover:not(:disabled) { background: var(--es-rosso); border-color: var(--es-rosso); color: var(--es-bianco); } .es-site .es-naviga-catalogo__freccia:disabled { opacity: 0; pointer-events: none; } .es-site .es-naviga-catalogo__freccia:focus-visible { outline: 3px solid var(--es-rosso); outline-offset: 2px; } /* sfumatura sui bordi: c'è altro da vedere */ .es-site .es-naviga-catalogo__scorri.is-scorrevole::before, .es-site .es-naviga-catalogo__scorri.is-scorrevole::after { content: ""; position: absolute; top: 14px; bottom: 6px; width: 56px; z-index: 1; pointer-events: none; } .es-site .es-naviga-catalogo__scorri.is-scorrevole::before { left: 0; background: linear-gradient(90deg, var(--es-bianco), rgba(255, 255, 255, 0)); } .es-site .es-naviga-catalogo__scorri.is-scorrevole::after { right: 0; background: linear-gradient(270deg, var(--es-bianco), rgba(255, 255, 255, 0)); } .es-site .es-naviga-catalogo__scorri:has(.es-naviga-catalogo__freccia--prec:disabled)::before, .es-site .es-naviga-catalogo__scorri:has(.es-naviga-catalogo__freccia--succ:disabled)::after { opacity: 0; } @media (max-width: 849px) { .es-site .es-naviga-catalogo__freccia { width: 38px; height: 38px; } } /* 54 Scheda su telefono, pulsanti delle sezioni con le frecce, misure in riquadri, accessori come elenco */ /* pulsanti delle sezioni delle reti: il contenitore resta agganciato in alto, la fila scorre con le frecce */ .es-site .es-nav-rete-scorri { position: sticky; top: var(--es-header); z-index: 5; background: var(--es-bianco); margin: 0 0 clamp(20px, 2.4vw, 36px); border-bottom: 1px solid var(--es-filetto); } .es-site .es-nav-rete-scorri .es-nav-rete { position: static; margin: 0; border-bottom: 0; } .es-site .es-nav-rete-scorri .es-nav-rete::-webkit-scrollbar { display: none; } .es-site .es-nav-rete-scorri .es-naviga-catalogo__freccia { margin-top: -22px; } .es-site .es-nav-rete-scorri.is-scorrevole .es-naviga-catalogo__freccia { display: grid; } .es-site .es-nav-rete-scorri.is-scorrevole::before, .es-site .es-nav-rete-scorri.is-scorrevole::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1; pointer-events: none; } .es-site .es-nav-rete-scorri.is-scorrevole::before { left: 0; background: linear-gradient(90deg, var(--es-bianco), rgba(255, 255, 255, 0)); } .es-site .es-nav-rete-scorri.is-scorrevole::after { right: 0; background: linear-gradient(270deg, var(--es-bianco), rgba(255, 255, 255, 0)); } .es-site .es-nav-rete-scorri:has(.es-naviga-catalogo__freccia--prec:disabled)::before, .es-site .es-nav-rete-scorri:has(.es-naviga-catalogo__freccia--succ:disabled)::after { opacity: 0; } .es-site .es-nav-rete-scorri .es-naviga-catalogo__freccia--prec { left: 0; } .es-site .es-nav-rete-scorri .es-naviga-catalogo__freccia--succ { right: 0; } /* misure disponibili: un riquadro per versione, si adatta a ogni schermo senza scorrere */ .es-site .es-misure { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .es-site .es-misure__versione { padding: 20px 22px; border: 1px solid var(--es-filetto); } .es-site .es-misure__nome { margin: 0 0 12px; font-size: 22px; font-weight: 700; font-style: normal; text-transform: none; color: var(--es-rosso); } .es-site .es-misure__etichetta { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-misure__valori { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .es-site .es-misure__valori li { margin: 0; padding: 6px 10px; border: 1px solid var(--es-filetto); font-size: 15px; font-weight: 700; color: var(--es-grigio); background: var(--es-bianco); } .es-site .es-misure__versione--su-misura { background: var(--es-carta); border-color: var(--es-carta); } .es-site .es-misure__grande { margin: 0; font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; color: var(--es-rosso); line-height: 1.1; } .es-site .es-misure__nota { margin: 8px 0 10px; font-size: 14px; color: var(--es-testo); } @media (max-width: 849px) { /* foto protagonista: pallini in basso a sinistra, frecce e lente in basso a destra, sulla foto */ .es-site .es-hero-prodotto__comandi { position: absolute; left: auto; right: 12px; bottom: auto; top: calc(100vw * .75 - 56px); display: flex; gap: 8px; z-index: 3; } .es-site .es-hero-prodotto__zoom { margin-left: 6px; } .es-site .es-hero-prodotto__punti { left: 12px; right: auto; bottom: auto; top: calc(100vw * .75 - 48px); transform: none; z-index: 3; } /* i due pulsanti ci sono già nella barra fissa in basso */ .es-site .es-hero-prodotto__azioni { display: none; } /* accessori: da tabella a elenco, niente scorrimento */ .es-site .es-tabella-scorre:has(.es-tabella--accessori) { overflow: visible; } .es-site .es-tabella--accessori { min-width: 0; } .es-site .es-tabella--accessori thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .es-site .es-tabella--accessori, .es-site .es-tabella--accessori tbody, .es-site .es-tabella--accessori tr { display: block; width: 100%; } .es-site .es-tabella--accessori tr { padding: 12px 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-tabella--accessori th, .es-site .es-tabella--accessori td { border: 0; padding: 0; } .es-site .es-tabella--accessori tbody th { display: block; margin-bottom: 6px; font-size: 16px; } .es-site .es-tabella--accessori td { display: inline-flex; align-items: center; gap: 6px; width: auto; margin-right: 16px; font-size: 16px; text-align: left; } .es-site .es-tabella--accessori td::before { content: attr(data-etichetta); font-size: 13px; font-weight: 400; color: var(--es-testo); } .es-site .es-tabella--accessori tbody tr:hover { background: none; } } /* la galleria non deve allargare la pagina: larghezza esplicita (con il rapporto 4:3 su telefono il browser la ricavava dal contenuto, cioè tutte le foto affiancate) */ .es-site .es-hero-prodotto { overflow: hidden; } .es-site .es-hero-prodotto__galleria { width: 100%; min-width: 0; max-width: 100%; } .es-site .es-nav-rete-scorri + .es-sezione-rete { border-top: 0; padding-top: 0; } /* 55 Tipografia del brand book Essedue (pag. 15 e 17) — vale su tutto il resto ---------- Carattere: Avenir Next (Regular, Medium, Demi Bold, Bold); dove manca, Arial. Titoli: Bold, dritti, iniziale maiuscola. Sottotitoli ed etichette: Demi Bold. Paragrafi: Regular. Corsivo: solo informazioni secondarie (citazioni, firme, note). */ body.es-site, .es-site :is(h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label, td, th, .button) { font-family: var(--es-sans); } .es-site :is(h1, h2, h3, h4, h5, h6) { font-style: normal; text-transform: none; } .es-site :is(h1, h2, .es-titolo, .es-titolo :is(h1, h2, h3, p), .es-sezione-rete__titolo, .es-hero-prodotto__nome, .es-numero > span) { font-weight: 700; } .es-site :is(h3, h4, .es-occhiello, .es-hero-prodotto__occhiello, .es-scheda-modello, .es-mega__titolo, .es-megamenu__titolo, .es-filtri__tendina, .es-naviga-catalogo__voce, .es-nav-rete a, .es-misure__nome) { font-weight: 600; } /* iniziale maiuscola per i titoli scritti in minuscolo nei blocchi ("perché essedue" → "Perché essedue") */ .es-site :is(h1, h2, h3, h4, .es-titolo p, .es-occhiello, .es-hero-prodotto__occhiello, .es-scheda-modello, .es-mega__titolo, .es-mega__titolo .section-title, .es-megamenu__titolo, .es-sezione-rete__titolo, .es-misure__nome, .es-griglia-piedi strong, .es-pilastro h3, .es-scheda__titolo, .es-strada strong, .es-fase h3, .es-ancore a, .es-citazione p, .es-esito__nome, .es-chip__nome, .es-griglia-finiture__nome)::first-letter { text-transform: uppercase; } /* corsivo: solo informazioni secondarie */ .es-site .es-ctx blockquote, .es-site blockquote, .es-site .es-prova__firma, .es-site .es-campo--vuoto p, .es-site em.es-nota { font-style: italic; } /* pulsanti: iniziale maiuscola anche quando nel blocco il testo è scritto in minuscolo */ .es-site :is(.button, .es-misura__preset button, .es-schede__filtri button, .es-filtri__tag)::first-letter { text-transform: uppercase; } /* Avenir Next LT Pro (Adobe Fonts) su tutto il sito, anche menu, pulsanti e moduli di Flatsome, che hanno regole proprie più specifiche. Restano fuori le icone (fl-icons). Pesi disponibili: 400 Regular e 700 Demi (titoli), con i corsivi. */ .es-site *:not(i):not(svg):not([class^="icon-"]):not([class*=" icon-"]):not(.icon) { font-family: var(--es-sans); } body.es-site { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 56 Griglie del catalogo: tutte le foto in 4:3 ----------------------------------------- Le foto più piccole della miniatura (800 × 600) WordPress non le ritaglia, e arrivano con le loro proporzioni: il riquadro impone il 4:3 e la foto lo riempie, centrata. Vale per letti, reti, trasformabili e correlate; anche la seconda foto che compare al passaggio. */ .es-site .products .box-image { aspect-ratio: 4 / 3; overflow: hidden; } .es-site .products .box-image > div:not(.image-tools):not(.badge-container), .es-site .products .box-image > div:not(.image-tools):not(.badge-container) > a, .es-site .products .box-image > a { display: block; width: 100%; height: 100%; } /* la fascia "Anteprima" (Quick View di Flatsome) resta una striscia in fondo alla foto */ .es-site .products .box-image > .image-tools { height: auto; } .es-site .products .box-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* riepilogo del quiz per gli amministratori */ .es-site .es-trova__diagnosi { margin-top: 20px; padding: 12px 16px; border: 1px dashed var(--es-rosso); background: var(--es-bianco); font-size: 14px; color: var(--es-grigio); } .es-site .es-trova__diagnosi summary { cursor: pointer; font-weight: 700; color: var(--es-rosso); } .es-site .es-trova__diagnosi ul { margin: 8px 0 0 18px; } /* 57 Da dove parti? con moduli nativi ------------------------------------------------- Colonna "es-percorso es-percorso--nativo": Testo (titolo), Testo (frase), pulsante a link, Immagine. Il rosso sta sulla colonna; il pulsante si estende su tutto il riquadro, che resta cliccabile per intero. */ .es-site .es-percorso.es-percorso--nativo { display: block; height: auto; } .es-site .es-percorso--nativo > .col-inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: 0 !important; background: var(--es-rosso); color: var(--es-bianco); transition: background var(--kw-durata, .3s); } .es-site .es-percorso--nativo:hover > .col-inner { background: var(--es-rosso-sc); } .es-site .es-percorso--nativo .es-percorso__titolo { margin: 0; padding: 32px 28px 0; } .es-site .es-percorso--nativo .es-percorso__titolo :is(h2, h3, p) { margin: 0; font-size: clamp(40px, 3vw, 64px); line-height: 1; font-weight: 700; color: var(--es-bianco); } .es-site .es-percorso--nativo .es-percorso__testo { margin: 0; padding: 18px 28px 0; } .es-site .es-percorso--nativo .es-percorso__testo p { margin: 0; max-width: 380px; font-size: clamp(15px, .9vw, 18px); line-height: 1.5; color: var(--es-bianco); } .es-site .es-percorso--nativo .es-percorso__link { position: static !important; align-self: flex-start; margin: 18px 28px 28px !important; padding: 0 !important; min-height: 0; line-height: 1.4; color: var(--es-bianco) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .es-site .es-percorso--nativo .es-percorso__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } .es-site .es-percorso--nativo .es-percorso__link:focus-visible { outline: none; } .es-site .es-percorso--nativo .es-percorso__link:focus-visible::after { outline: 3px solid var(--es-bianco); outline-offset: -6px; } .es-site .es-percorso--nativo .es-percorso__foto { margin: auto 0 0 !important; width: 100%; } .es-site .es-percorso--nativo .es-percorso__foto .img-inner { aspect-ratio: 4 / 3; overflow: hidden; margin: 0; } .es-site .es-percorso--nativo .es-percorso__foto img { width: 100%; height: 100%; object-fit: cover; } /* didascalia della foto in apertura: il link è un pulsante */ .es-site .es-didascalia__link { margin: 6px 0 0 !important; padding: 0 !important; min-height: 0; line-height: 1.4; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none !important; color: var(--es-rosso) !important; text-decoration: underline; text-underline-offset: 4px; } /* apertura su schermo largo: il pulsante sta nella barra della didascalia, a destra del testo (stessa condizione della barra; sotto, didascalia e pulsante scorrono normali sotto la foto) */ @media (min-width: 1100px) and (min-aspect-ratio: 4 / 3) { .es-site .es-apertura .es-didascalia { padding-right: 260px; } .es-site .es-apertura .es-didascalia__link { position: absolute !important; right: var(--es-margine); bottom: 0; height: var(--barra); display: inline-flex !important; align-items: center; margin: 0 !important; z-index: 2; } } /* 58 Pagine con moduli nativi: numeri, indice come Menu, guida con Fisarmonica -------- */ .es-site .es-numero--valore, .es-site .es-numero--valore p { margin: 0; font-size: clamp(44px, 4.6vw, 88px); line-height: 1; font-weight: 700; color: var(--es-rosso); letter-spacing: -.01em; } .es-site .es-numero--etichetta, .es-site .es-numero--etichetta p { margin: 10px 0 0; max-width: 240px; font-size: 15px; line-height: 1.45; color: var(--es-grigio); } /* indice della guida come modulo Menu */ .es-site .ux-menu.es-guida-indice { display: flex; flex-direction: column; border-left: 2px solid var(--es-filetto); } .es-site .es-guida-indice .ux-menu-link { margin: 0; } .es-site .es-guida-indice .ux-menu-link__link { display: block; min-height: 0; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; color: var(--es-testo); } .es-site .es-guida-indice .ux-menu-link__link[aria-current="true"], .es-site .es-guida-indice .ux-menu-link__link:hover { border-left-color: var(--es-rosso); color: var(--es-rosso); font-weight: 700; } .es-site .es-guida-indice .ux-menu-link__icon { display: none; } /* ancore dei temi: il titolo non finisce sotto l'header */ .es-site .es-guida-scelta .scroll-to, .es-site .es-guida-scelta .scroll-to a[name] { display: block; scroll-margin-top: calc(var(--es-header) + 24px); } .es-site .es-guida-scelta .es-guida-tema__titolo { margin-top: clamp(28px, 3vw, 48px); } .es-site .es-guida-scelta .scroll-to:first-child + .es-guida-tema__titolo { margin-top: 0; } .es-site .es-guida-tema__titolo h3 { margin: 0 0 12px; font-size: clamp(26px, 2vw, 36px); font-weight: 700; color: var(--es-rosso); } /* domande della guida: Fisarmonica di Flatsome con lo stile del progetto (il + a destra che ruota in × quando la domanda è aperta, come le domande della pagina prima) */ .es-site .es-guida-faq .accordion-item { border-top: 0; border-bottom: 1px solid var(--es-filetto); } .es-site .es-guida-faq .accordion-title { position: relative; display: flex !important; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0 !important; border: 0 !important; background: none; font-size: 17px; font-weight: 700; color: var(--es-grigio); text-decoration: none; } .es-site .es-guida-faq .accordion-title > span { order: 1; flex: 1; } .es-site .es-guida-faq .accordion-title .toggle { position: static !important; order: 2; flex: none; width: 32px; height: 32px; margin: 0 !important; padding: 0; border: 1px solid var(--es-filetto); border-radius: 0; display: grid; place-items: center; background: none; color: var(--es-rosso); transform: none; } .es-site .es-guida-faq .accordion-title .toggle i { display: none; } .es-site .es-guida-faq .accordion-title .toggle::before { content: "+"; display: block; font-size: 22px; font-weight: 400; line-height: 1; color: var(--es-rosso); transition: transform .3s; } .es-site .es-guida-faq .accordion-title.active .toggle::before { transform: rotate(45deg); } .es-site .es-guida-faq .accordion-title:hover, .es-site .es-guida-faq .accordion-title.active { color: var(--es-rosso); } .es-site .es-guida-faq .accordion-inner { padding: 0 48px 18px 0 !important; } .es-site .es-guida-faq .accordion-inner p { font-size: 16px; line-height: 1.65; color: var(--es-testo); } @media (max-width: 849px) { .es-site .ux-menu.es-guida-indice { flex-direction: row; overflow-x: auto; gap: 6px; border-left: 0; scrollbar-width: none; } .es-site .es-guida-indice .ux-menu-link { flex: none; } .es-site .es-guida-indice .ux-menu-link__link { margin: 0; padding: 10px 14px; border: 1px solid var(--es-filetto); white-space: nowrap; } .es-site .es-guida-indice .ux-menu-link__link[aria-current="true"] { border-color: var(--es-rosso); background: var(--es-rosso); color: var(--es-bianco); } } /* 59 Applicazioni benessere con moduli nativi --------------------------------------------- */ /* ancore come modulo Menu: i numeri 01, 02, 03 li mette il CSS */ .es-site .ux-menu.es-ancore { display: grid; gap: 2px; counter-reset: ancora; } .es-site .es-ancore .ux-menu-link { margin: 0; counter-increment: ancora; } .es-site .es-ancore .ux-menu-link__link { display: flex; align-items: baseline; gap: 16px; min-height: 0; padding: 16px 0; border-bottom: 1px solid var(--es-filetto); font-size: clamp(20px, 1.6vw, 28px); font-weight: 700; color: var(--es-grigio); } .es-site .es-ancore--numerate .ux-menu-link__link::before { content: counter(ancora, decimal-leading-zero); font-size: 14px; color: var(--es-rosso); } .es-site .es-ancore .ux-menu-link__link:hover { color: var(--es-rosso); } .es-site .es-ancore .ux-menu-link__icon { display: none; } /* applicazioni: riga interna nativa, moduli Testo separati */ .es-site .row.es-applicazione { margin-left: 0; margin-right: 0; width: auto; max-width: none; padding: 40px 0; } .es-site .row.es-applicazione > .col { padding: 0; } /* margine laterale sui moduli Testo dell'applicazione: il testo si stacca dal bordo del riquadro, qualunque elemento di Flatsome porti lo sfondo */ .es-site .es-applicazione .text, .es-site .es-passo .text { padding-left: clamp(24px, 3vw, 56px) !important; padding-right: clamp(24px, 3vw, 56px) !important; } @media (max-width: 849px) { .es-site .es-applicazione .text, .es-site .es-passo .text { padding-left: 15px !important; padding-right: 15px !important; } } .es-site .text.es-applicazione__num p, .es-site .text.es-applicazione__per p { margin: 0; } .es-site .text.es-applicazione__titolo h3 { margin: 6px 0 16px; font-size: clamp(34px, 3vw, 56px); line-height: 1; font-weight: 700; color: var(--es-grigio); } .es-site .text.es-applicazione__problema p { margin: 0 0 8px; font-size: clamp(17px, 1.15vw, 21px); line-height: 1.55; color: var(--es-grigio); } .es-site .text.es-applicazione__come ul { margin: 8px 0 18px 0; padding: 0; list-style: none; } .es-site .text.es-applicazione__come li { position: relative; margin: 0 0 10px; padding-left: 24px; font-size: 16px; line-height: 1.55; color: var(--es-testo); } .es-site .text.es-applicazione__come li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--es-rosso); } .es-site .scroll-to + .row.es-applicazione, .es-site .es-applicazione + .scroll-to { scroll-margin-top: calc(var(--es-header) + 24px); } .es-site .scroll-to a[name] { display: block; scroll-margin-top: calc(var(--es-header) + 24px); } /* foto con didascalia: modulo Immagine + modulo Testo */ .es-site .es-foto-didascalia__img .img-inner { overflow: hidden; } .es-site .es-foto-didascalia__img img { width: 100%; height: auto; display: block; } .es-site .text.es-foto-didascalia__testo p { margin: 12px 0 0; font-size: 14px; color: var(--es-testo); } /* 60 Varianti dei pulsanti con il riempimento del kit ------------------------------------ Il kit, al passaggio, fa salire dal basso un riempimento del colore --kw-fill e cambia il colore del testo. Ogni variante dichiara il suo riempimento, il suo testo e lo stesso colore come fondo pieno: se il riempimento del kit non parte, il testo resta leggibile. */ .es-site :is(.es-btn-bianco, .button.es-btn-bianco) { --kw-fill: var(--es-carta) !important; } .es-site :is(.es-btn-bianco, .button.es-btn-bianco):is(:hover, :focus-visible) { color: var(--es-grigio) !important; border-color: var(--es-carta) !important; background-color: var(--es-carta) !important; } .es-site :is(.es-btn-rosso, .button.es-btn-rosso) { --kw-fill: var(--es-rosso-sc) !important; } .es-site :is(.es-btn-rosso, .button.es-btn-rosso):is(:hover, :focus-visible) { color: var(--es-bianco) !important; border-color: var(--es-rosso-sc) !important; background-color: var(--es-rosso-sc) !important; } .es-site :is(.es-btn-contorno-chiaro, .button.es-btn-contorno-chiaro) { --kw-fill: var(--es-bianco) !important; } .es-site :is(.es-btn-contorno-chiaro, .button.es-btn-contorno-chiaro):is(:hover, :focus-visible) { color: var(--es-grigio) !important; border-color: var(--es-bianco) !important; background-color: var(--es-bianco) !important; } .es-site .es-apertura__secondario { --kw-fill: var(--es-bianco) !important; } /* dove il pulsante bianco diventa grigio (scheda su telefono, barra che segue lo scorrimento) */ .es-site :is(.es-hero-prodotto__azioni, .es-prodotto-barra__azioni) .es-btn-bianco { --kw-fill: var(--es-rosso) !important; } .es-site :is(.es-hero-prodotto__azioni, .es-prodotto-barra__azioni) .es-btn-bianco:is(:hover, :focus-visible) { color: var(--es-bianco) !important; border-color: var(--es-rosso) !important; background-color: var(--es-rosso) !important; } /* 61 Sistema cdbed: fine dell'animazione con titolo e frase in due moduli ----------------- L'elenco occupa le righe 2 e 3 finché si vede; poi lascia il posto alla frase grande (riga 2) e al testo (riga 3), uno sotto l'altro; il pulsante va in riga 4. */ .es-site .es-strati__colonna .es-fasi { grid-row: 2 / span 2; } .es-site .es-strati__colonna .es-strati__fine { grid-row: 2; } .es-site .es-strati__colonna .es-strati__fine:not(.es-claim) { grid-row: 3; } .es-site .es-strati__colonna .es-strati__azione { grid-row: 4; } @media (min-width: 850px) { .es-site .es-strati__colonna .es-titolo, .es-site .es-strati__colonna .es-titolo :is(h2, p) { font-size: clamp(34px, 2.5vw, 50px); } } /* 62 Applicazioni benessere: la rete in 3D (es-rete3d.js) ------------------------------ */ .es-site .es-schema--3d { position: relative; } .es-site .es-schema--3d .es-rete3d { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 288 / 244; display: block; overflow: visible; } .es-site .es-schema--3d .es-schema__didascalie { position: relative; min-height: 2.8em; margin: 0 0 8px; text-align: center; } .es-site .es-schema--3d .es-schema__et { position: absolute; left: 0; right: 0; top: 0; margin: 0; fill: none; color: var(--es-grigio); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.35; } /* 63 Il sistema CDBED: pulsante nella barra dei letti, passi, configuratore -------------- */ .es-site .es-barra-cdbed { margin: 18px 0 0; } .es-site .es-barra-cdbed .button { margin: 0 !important; } .es-site .es-cdbed-passi__titolo h3 { margin: 8px 0 10px; font-size: clamp(22px, 1.7vw, 30px); font-weight: 700; color: var(--es-grigio); } .es-site .es-cdbed-passi .es-numero--valore p { font-size: clamp(32px, 2.6vw, 48px); } .es-site .es-configuratore { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 3vw, 56px); align-items: center; margin-top: clamp(20px, 2.4vw, 40px); } .es-site .es-configuratore__gruppo { margin: 0 0 18px; } .es-site .es-configuratore__etichetta { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-configuratore__scelte { display: flex; flex-wrap: wrap; gap: 6px; } .es-site .es-configuratore__scelta { min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--es-filetto); border-radius: 0; background: var(--es-bianco); font-family: var(--es-sans); font-size: 15px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; color: var(--es-grigio); cursor: pointer; } .es-site .es-configuratore__scelta:hover { border-color: var(--es-grigio); } .es-site .es-configuratore__scelta[aria-pressed="true"] { border-color: var(--es-rosso); background: var(--es-rosso); color: var(--es-bianco); } .es-site .es-configuratore__scelta:focus-visible, .es-site .es-configuratore__campione:focus-visible { outline: 3px solid var(--es-rosso); outline-offset: 2px; } .es-site .es-configuratore__campione { width: 44px; height: 44px; margin: 0; padding: 3px; border: 1px solid var(--es-filetto); border-radius: 0; background: var(--es-bianco); cursor: pointer; } .es-site .es-configuratore__campione span:first-child { display: block; width: 100%; height: 100%; } .es-site .es-configuratore__campione[aria-pressed="true"] { border: 2px solid var(--es-rosso); padding: 2px; } .es-site .es-configuratore__conto { margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--es-filetto); font-size: 15px; line-height: 1.5; color: var(--es-testo); } .es-site .es-configuratore__conto strong { color: var(--es-rosso); } .es-site .es-configuratore__disegno { background: var(--es-carta); } .es-site .es-configuratore__disegno { overflow: hidden; } .es-site .es-configuratore__svg svg { width: 100%; height: auto; max-height: 72vh; display: block; overflow: hidden; pointer-events: none; } .es-site .es-configuratore__svg svg [data-k] { transition: none; } .es-site .es-configuratore__nota { margin: 0; font-size: 15px; line-height: 1.5; color: var(--es-testo); } .es-site .es-configuratore__ricomincia { margin: 6px 0 0; padding: 0; border: 0; background: none; font-family: var(--es-sans); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--es-rosso); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .es-site .es-configuratore__disegno svg.is-cambio .es-cfg-pezzo { animation: es-cfg-entra .45s ease-out; } @keyframes es-cfg-entra { from { opacity: .25; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .es-site .es-configuratore__disegno svg.is-cambio .es-cfg-pezzo { animation: none; } } @media (max-width: 849px) { .es-site .es-configuratore { grid-template-columns: 1fr; } .es-site .es-configuratore__disegno { order: -1; } } /* pulsanti su fondo scuro: anche il testo nel prende il colore del passaggio */ .es-site :is(.es-btn-contorno-chiaro, .es-btn-bianco):is(:hover, :focus-visible) span { color: inherit !important; } /* configuratore: i passi dopo la rete restano spenti finché la rete non è scelta */ .es-site .es-configuratore__scelta:disabled, .es-site .es-configuratore__campione:disabled { opacity: .4; cursor: not-allowed; } .es-site .es-configuratore__nota--inizio { margin: 0 0 16px; } .es-site .es-configuratore.is-senza-rete .es-configuratore__disegno::after { content: "scegli la rete per iniziare"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 600; color: var(--es-testo); } .es-site .es-configuratore__disegno { position: relative; } /* configuratore sui disegni del modello: la rete da sola in rosso, la sezione che si muove in rosso */ .es-site .es-configuratore__svg svg.is-solo-rete [data-k^="rete"] .es-cdbed-pieno, .es-site .es-configuratore__svg svg.is-motore [data-k="rete-testa"] .es-cdbed-pieno { fill: #fbeff2; stroke: var(--es-rosso); } .es-site .es-configuratore__svg svg.is-solo-rete [data-k^="rete"] .es-cdbed-linee, .es-site .es-configuratore__svg svg.is-motore [data-k="rete-testa"] .es-cdbed-linee { stroke: var(--es-rosso); } .es-site .es-configuratore__svg .es-cdbed-pieno { transition: fill .4s; } .es-site .es-configuratore__svg [data-k="materasso"] { transition: opacity .3s; } .es-site .es-configuratore__svg svg.is-motore [data-k="materasso"] { opacity: .12 !important; } /* configuratore: finiture pezzo per pezzo e pulsanti finali */ .es-site .es-configuratore__schede { display: flex; gap: 0; margin: 0 0 10px; border-bottom: 1px solid var(--es-filetto); } .es-site .es-configuratore__scheda { margin: 0 0 -1px; padding: 8px 14px; min-height: 40px; border: 0; border-bottom: 3px solid transparent; background: none; font-family: var(--es-sans); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-testo); cursor: pointer; } .es-site .es-configuratore__scheda[aria-selected="true"] { border-bottom-color: var(--es-rosso); color: var(--es-rosso); } .es-site .es-configuratore__scheda:disabled { opacity: .4; cursor: not-allowed; } .es-site .es-configuratore__scelte--finiture { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; padding: 2px; } .es-site .es-configuratore__scelte--finiture .es-configuratore__campione { width: 100%; height: 36px; } .es-site .es-configuratore__campione span:first-child { background-size: cover; background-position: center; } .es-site .es-configuratore__campione[hidden] { display: none; } .es-site .es-configuratore__nome-finitura { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--es-grigio); } .es-site .es-configuratore__azioni { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; } .es-site .es-configuratore__azioni .button { margin: 0 !important; width: 100%; text-align: center; } .es-site .es-configuratore__richiedi[aria-disabled="true"] { opacity: .45; pointer-events: none; } .es-site .es-configuratore__ispirazioni { border: 1px solid var(--es-grigio) !important; background: var(--es-bianco) !important; color: var(--es-grigio) !important; } /* chiusura sopra il piede: pulsante contattaci e telefono (moduli nativi) */ .es-site .es-chiusura .button { margin: 0 0 14px !important; } .es-site .es-chiusura .text.es-chiusura__altro p { margin: 0; color: var(--es-bianco); opacity: .9; } .es-site .es-chiusura .text.es-chiusura__altro a { color: var(--es-bianco); text-decoration: underline; text-underline-offset: 4px; } /* pulsanti: testo sempre centrato (foto protagonista, barra che segue lo scorrimento, configuratore) */ .es-site .button.kw-btn, .es-site a.button.kw-btn { justify-content: center !important; text-align: center !important; } .es-site .button.kw-btn > span { text-align: center; } /* titoli animati riga per riga (kit: kw-split-line-mask con overflow: clip): spazio interno sotto la riga, compensato da un margine negativo, così g, p, q non vengono tagliate e l'interlinea non cambia */ .es-site .kw-split-line-mask { padding-bottom: .2em !important; margin-bottom: -.2em !important; } .es-site [data-kw-gsap="split-lines"] { display: flow-root; } /* il margine dell'ultima riga resta dentro: il titolo non si allunga */ /* 64 Header: le icone della lente e di contattaci le disegna il foglio di stile, non il blocco 16. Reggono anche se il blocco viene ripassato da un editor che toglie gli svg (sul sito la lente era un pulsante vuoto e "contattaci" solo testo). Su telefono contattaci è la sola busta: il testo resta per i lettori di schermo, a corpo zero. */ .es-site .es-azioni__cerca svg, .es-site .es-azioni__cta svg { display: none; } .es-site .es-azioni__cerca::before, .es-site .es-azioni__cta::before { content: ""; flex: none; display: block; background: currentColor; -webkit-mask: var(--es-icona) center / contain no-repeat; mask: var(--es-icona) center / contain no-repeat; } .es-site .es-azioni__cerca::before { width: 22px; height: 22px; --es-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); } .es-site .es-azioni__cta::before { width: 20px; height: 20px; --es-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); } @media (max-width: 849px) { .es-site .es-azioni__cta { font-size: 0 !important; gap: 0; overflow: hidden; } .es-site .es-azioni__cta::before { width: 22px; height: 22px; } } /* 65 Configuratore su telefono: il disegno resta fermo in alto mentre le scelte scorrono sotto, così ogni scelta si vede subito senza risalire. In colonna flessibile e non a griglia: dentro una griglia un elemento fisso resta chiuso nella sua riga. */ @media (max-width: 849px) { .es-site .es-configuratore { display: flex; flex-direction: column; align-items: stretch; } .es-site .es-configuratore__disegno { order: -1; position: sticky; top: var(--es-header); z-index: 3; box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .35); } .es-site .es-configuratore__svg svg { max-height: 36vh; max-height: 36svh; margin: 0 auto; } } /* 66 Trova la tua rete su telefono: frecce ai lati delle opzioni quando la riga scorre. Compaiono solo se le opzioni non ci stanno; la sfumatura dice che la riga continua. */ .es-site .es-scelte__freccia { display: none; } @media (max-width: 849px) { .es-site .es-scelte-cornice { position: relative; margin-right: calc(-1 * var(--es-allinea)); } .es-site .es-scelte-cornice > .es-scelte { margin-right: 0; } .es-site .es-scelte__freccia { position: absolute; top: 0; bottom: 0; z-index: 2; width: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; align-items: center; color: var(--es-grigio); cursor: pointer; min-height: 0; box-shadow: none; } .es-site .es-scelte__freccia svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: var(--es-bianco); border: 1px solid var(--es-filetto); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } .es-site .es-scelte__freccia--avanti { right: 0; justify-content: flex-end; padding-right: 6px; background: linear-gradient(to right, transparent, var(--es-scelte-fondo, rgb(243, 243, 244)) 55%); } .es-site .es-scelte__freccia--indietro { left: 0; justify-content: flex-start; padding-left: 2px; background: linear-gradient(to left, transparent, var(--es-scelte-fondo, rgb(243, 243, 244)) 55%); } .es-site .es-scelte__freccia--indietro svg { transform: rotate(180deg); } .es-site .es-scelte-cornice.ha-dopo .es-scelte__freccia--avanti, .es-site .es-scelte-cornice.ha-prima .es-scelte__freccia--indietro { display: flex; } } /* 67 Sistema cdbed su telefono e tablet (fino a 1024 px): versione semplice, senza scorrimento bloccato (es-strati.js 1.9.0). Titolo, letto montato, elenco dei pezzi, testo e pulsante, uno sotto l'altro. Su desktop resta l'animazione allo scorrimento. */ .es-site .es-strati.is-semplice .es-strati__griglia { display: block; height: auto; padding-top: 40px; padding-bottom: 48px; } .es-site .es-strati.is-semplice .row > .es-strati__colonna { flex: 0 0 100%; max-width: 100%; width: 100%; padding-bottom: 0; } .es-site .es-strati.is-semplice .row > .es-strati__disegno-col { display: none; } .es-site .es-strati.is-semplice .es-strati__colonna > .col-inner { display: block; } .es-site .es-strati.is-semplice .es-strati__disegno { position: relative; inset: auto; aspect-ratio: 640 / 470; max-width: 760px; margin: 8px auto 28px; } .es-site .es-strati.is-semplice .es-strati__disegno svg { height: 100%; } .es-site .es-strati.is-semplice .es-fasi { display: block !important; opacity: 1 !important; max-width: 760px; } .es-site .es-strati.is-semplice .es-fasi li { display: flex !important; padding: 12px 0; border-top: 1px solid var(--es-filetto); color: var(--es-grigio); } .es-site .es-strati.is-semplice .es-fasi li:last-child { border-bottom: 1px solid var(--es-filetto); } .es-site .es-strati.is-semplice .es-fasi li b { color: var(--es-rosso); } .es-site .es-strati.is-semplice .es-strati__fine { margin-top: 28px; } .es-site .es-strati.is-semplice .es-strati__fine + .es-strati__fine { margin-top: 0; } .es-site .es-strati.is-semplice .es-strati__azione { margin-top: 18px; } .es-site .es-strati.is-semplice .es-strati__barra, .es-site .es-strati.is-semplice .es-guida { display: none; } @media (max-width: 849px) { .es-site .es-strati.is-semplice .es-strati__disegno { aspect-ratio: 480 / 440; } } /* 68 Pagina Azienda, i quattro pilastri con i moduli nativi (Immagine + Testo): in UX Builder ogni foto si sceglie dalla libreria, con il suo testo alternativo. Stesso aspetto di prima: foto verticale su desktop, piccola e quadrata accanto al testo su telefono. */ .es-site .es-pilastro > .col-inner > .es-pilastro__foto { margin: 0 0 18px; } .es-site .es-pilastro .es-pilastro__foto .img-inner { overflow: hidden; } .es-site .es-pilastro .es-pilastro__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .es-site .es-pilastro__testo p:last-child { margin-bottom: 0; } @media (max-width: 849px) { .es-site .es-pilastri > .es-pilastro { display: block; } .es-site .es-pilastro > .col-inner { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: start; } .es-site .es-pilastro > .col-inner > .es-pilastro__foto { margin: 0; } .es-site .es-pilastro .es-pilastro__foto img { aspect-ratio: 1; } } /* 69 Sistema cdbed, versione semplice: numeri sul letto montato (es-strati.js 1.10.0) */ .es-site .es-strati__numeri circle { fill: var(--es-rosso); stroke: var(--es-bianco); } .es-site .es-strati__numeri text { fill: var(--es-bianco); font-family: var(--es-sans); font-weight: 700; letter-spacing: .02em; } /* 70 Trova la tua rete: con le colonne affiancate (da 550 px) il riquadro del risultato resta fermo in alto mentre si risponde alle domande, e si sblocca quando la loro colonna finisce. La distanza dall'alto la sistema es-trova-rete.js 2.3.0 se il riquadro è più alto dello schermo. */ @media (min-width: 550px) { .es-site .es-trova .es-trova__domande + .col > .col-inner { position: sticky; top: calc(var(--es-header, 84px) + 20px); } } /* 71 Scritta "dal 1960" (home, perché essedue; Azienda, sotto il titolo): su tablet resta verticale come su desktop. Orizzontale a 56 px, "1960" usciva dalla colonna stretta (un sesto della pagina) e non si vedeva. Orizzontale solo su telefono, dove la colonna è larga quanto lo schermo. */ @media (min-width: 550px) and (max-width: 849px) { .es-site .es-verticale, .es-site .es-perche .es-verticale { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(44px, 6.4vw, 56px); border-left: 2px solid var(--es-rosso); padding-left: 14px; margin-bottom: 0; } } /* 72 Pagina Azienda, pilastri su tablet (550–849 px): due per riga, foto sopra il testo. La foto piccola accanto al testo solo su telefono, dove i pilastri vanno uno sotto l'altro: su tablet le quattro colonne restano affiancate e la foto di 112 px si sovrapponeva ai testi. */ @media (min-width: 550px) and (max-width: 849px) { .es-site .es-pilastri > .es-pilastro { flex-basis: 50%; max-width: 50%; } .es-site .es-pilastro > .col-inner { display: block; } .es-site .es-pilastro > .col-inner > .es-pilastro__foto { margin: 0 0 16px; } .es-site .es-pilastro .es-pilastro__foto img { aspect-ratio: 4 / 3; } } /* 73 Paragrafi delle categorie (primo e secondo paragrafo: Reti, Letti e tutte le loro sottocategorie) su tablet, 550–1024 px: ogni riga 12/12, il paragrafo sopra e la foto sotto, a tutta larghezza. Affiancate, le foto restavano piccole accanto a testi lunghi, con grandi spazi vuoti. Su telefono l'ordine resta com'è; su desktop non cambia nulla. */ @media (min-width: 550px) and (max-width: 1024px) { .es-site :is(.es-intro__riga, .es-approfondimento__riga) > .col { flex-basis: 100%; max-width: 100%; } .es-site :is(.es-intro__riga, .es-approfondimento__riga) > :is(.es-intro__testo, .es-approfondimento__testo) { order: 1; padding-bottom: 8px; } .es-site :is(.es-intro__riga, .es-approfondimento__riga) > :is(.es-intro__media, .es-approfondimento__media, .es-approfondimento__coppia) { order: 2; } .es-site .es-approfondimento__media .es-approfondimento__foto img { aspect-ratio: 16 / 10; } } /* 74 Per il tuo benessere, applicazioni su tablet (550–849 px): come su desktop, lo schema con la rete 3D resta fermo in alto mentre i tre passi scorrono accanto, e la rete cambia posizione a ogni passo. La regola del telefono (colonna intera fissa, striscia in cima) qui non funzionava: con le colonne affiancate la colonna è alta quanto la riga, scorreva via e lasciava un vuoto accanto ai testi. */ @media (min-width: 550px) and (max-width: 849px) { .es-site .es-benessere__schema-col { position: relative; top: auto; z-index: auto; background: none; } .es-site .es-benessere__schema-col > .col-inner { position: sticky; top: calc(var(--es-header) + 24px); padding: 24px 0; } } /* 75 Per il tuo benessere, intro su tablet (550–1024 px): i tre punti dell'indice in alto, accanto all'inizio del testo (la riga è allineata in basso, e con il testo lungo restava un vuoto sopra). */ @media (min-width: 550px) and (max-width: 1024px) { .es-site .es-benessere-intro .row.align-bottom { align-items: flex-start; } } /* 76 Come scegliere una rete, indice dei gruppi di domande su tablet (550–849 px): come su desktop, un elenco verticale fermo in alto mentre si scorrono le domande. La regola del telefono (colonna intera fissa, fila orizzontale di pulsanti) con le colonne affiancate faceva scorrere via l'indice, e nella colonna stretta della fila si vedeva al massimo il primo pulsante. */ @media (min-width: 550px) and (max-width: 849px) { .es-site .es-guida-scelta__indice-col { position: relative; top: auto; z-index: auto; background: none; } .es-site .es-guida-scelta__indice-col > .col-inner { position: sticky; top: calc(var(--es-header) + 24px); padding: 0; } .es-site .es-guida-indice, .es-site .ux-menu.es-guida-indice { flex-direction: column; overflow-x: visible; gap: 0; border-left: 2px solid var(--es-filetto); } .es-site .es-guida-indice a, .es-site .es-guida-indice .ux-menu-link__link { margin: 0 0 0 -2px; padding: 8px 0 8px 16px; border: 0; border-left: 2px solid transparent; background: none; white-space: normal; } .es-site .es-guida-indice a[aria-current="true"], .es-site .es-guida-indice .ux-menu-link__link[aria-current="true"] { border-left-color: var(--es-rosso); background: none; color: var(--es-rosso); font-weight: 700; } } /* 77 Trova la tua rete su tablet (550–849 px): le opzioni vanno a capo invece di scorrere di lato, così si vedono tutte senza toccare nulla; le frecce (sezione 66) restano per il telefono e qui non compaiono, perché non c'è più niente da scorrere. Home e Come scegliere una rete. */ @media (min-width: 550px) and (max-width: 849px) { .es-site .es-trova .es-scelte { flex-wrap: wrap; overflow-x: visible; margin-right: 0; padding-right: 0; gap: 8px; } .es-site .es-trova .es-scelte-cornice { margin-right: 0; } .es-site .es-trova .es-scelta span { white-space: normal; } } /* 78 Download: i due cataloghi con moduli nativi (colonna es-catalogo: Immagine con il link al PDF, Testo es-catalogo__titolo, Testo es-catalogo__dati, Testo, Pulsante). Il titolo si posa in basso sulla foto come prima: foto e titolo stanno nella stessa cella della griglia, e il titolo lascia passare il clic al link della foto. Contenuto: contenuti/download-cataloghi.txt. */ .es-site .es-catalogo > .col-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; } .es-site .es-catalogo > .col-inner > .es-catalogo__img, .es-site .es-catalogo > .col-inner > .es-catalogo__titolo { grid-area: 1 / 1; } .es-site .es-catalogo__img { margin: 0 !important; overflow: hidden; background: var(--es-grigio); } .es-site .es-catalogo__img .img-inner { position: relative; margin: 0; } .es-site .es-catalogo__img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 1s var(--es-curva); } .es-site .es-catalogo__img .img-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34, 35, 37, .82) 0%, rgba(34, 35, 37, .15) 60%); pointer-events: none; } .es-site .es-catalogo__img:hover img { transform: scale(1.04); } .es-site .es-catalogo > .col-inner > .es-catalogo__titolo { position: relative; left: auto; bottom: auto; align-self: end; z-index: 1; pointer-events: none; margin: 0; padding: 0 clamp(18px, 2vw, 32px) clamp(16px, 2vw, 28px); } .es-site .es-catalogo .es-catalogo__titolo p { margin: 0; font: inherit; line-height: .95; color: inherit; } .es-site .es-catalogo > .col-inner > .es-catalogo__dati { margin: 16px 0 6px; } .es-site .es-catalogo .es-catalogo__dati p { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-testo); } .es-site .es-catalogo > .col-inner > .button { justify-self: start; margin-top: 8px; } @media (prefers-reduced-motion: reduce) { .es-site .es-catalogo__img img { transition: none; } .es-site .es-catalogo__img:hover img { transform: none; } } /* 79 Pop-up (pannello Pop-up: inc/es-promo.php, js/es-promo.js), riquadro orizzontale in basso a destra (o a sinistra, es-promo--sinistra), che non blocca la pagina. Il contenuto è il blocco UX promo-letti: riga es-promo__riga con la colonna es-promo__media (Immagine) e la colonna es-promo__testo (Testo dei due titoli, delle date, del corpo, Pulsante, Testo della nota). La foto riempie la sua colonna senza deciderne l'altezza; su telefono il riquadro è una scheda in fondo allo schermo, senza foto. */ .es-promo { position: fixed; inset: auto 24px 24px auto; z-index: 1000; width: min(640px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 120px); margin: 0; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain; background: var(--es-bianco); color: var(--es-testo); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); } .es-promo.es-promo--sinistra { inset: auto auto 24px 24px; } .es-promo:not([open]) { display: none; } .es-promo[open] { animation: es-promo-entra .5s var(--es-curva); } @keyframes es-promo-entra { from { opacity: 0; transform: translateY(24px); } } .es-promo__chiudi { position: absolute; top: 8px; right: 8px; z-index: 2; display: block; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--es-bianco); color: var(--es-grigio); cursor: pointer; } .es-promo__chiudi::before, .es-promo__chiudi::after { content: ""; position: absolute; top: 19px; left: 12px; width: 16px; height: 2px; background: currentColor; transform: rotate(45deg); } .es-promo__chiudi::after { transform: rotate(-45deg); } .es-promo__chiudi:hover { color: var(--es-rosso); } .es-promo__chiudi:focus-visible { outline: 2px solid var(--es-rosso); outline-offset: 2px; } .es-promo .block-edit-link { display: none; } .es-promo .row.es-promo__riga { flex-wrap: nowrap; align-items: stretch; max-width: none; width: auto; margin: 0 !important; } .es-promo .es-promo__riga > .col { padding: 0; } .es-promo .es-promo__riga > .es-promo__media { position: relative; flex: 0 0 36%; max-width: 36%; overflow: hidden; background: var(--es-carta); } .es-promo .es-promo__media > .col-inner { position: absolute; inset: 0; } .es-promo .es-promo__media .img, .es-promo .es-promo__media .img-inner { position: static; width: 100% !important; height: 100%; margin: 0; padding: 0 !important; } .es-promo .es-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; } .es-promo .es-promo__riga > .es-promo__testo { flex: 1 1 auto; max-width: none; } .es-promo .es-promo__testo > .col-inner { padding: 20px 22px 18px; } .es-promo .es-promo__titolo h2, .es-promo .es-promo__titolo p { margin: 0 0 4px; padding-right: 36px; font-size: 22px; line-height: 1.15; font-weight: 700; color: var(--es-rosso); } .es-promo .es-promo__titolo--ultimi { display: none; } .es-promo.es-promo--ultimi .es-promo__titolo--prima { display: none; } .es-promo.es-promo--ultimi .es-promo__titolo--ultimi { display: block; } .es-promo .es-promo__date p { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--es-grigio); } .es-promo .es-promo__corpo p, .es-promo .es-promo__corpo li { font-size: 14px; line-height: 1.45; color: var(--es-testo); } .es-promo .es-promo__corpo p { margin: 0 0 4px; } .es-promo .es-promo__corpo ul { margin: 0 0 12px; padding-left: 1.1em; list-style: disc; } .es-promo .es-promo__corpo ul ul { margin: 2px 0 0; list-style: circle; } .es-promo .es-promo__corpo li { margin: 0 0 2px 0; } .es-promo .es-promo__testo .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 2px 0 10px; padding: 8px 16px; min-height: 40px; font-size: 14px; line-height: 1.3; white-space: normal; } .es-promo .es-promo__nota p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--es-testo); } @media (max-width: 549px) { .es-promo, .es-promo.es-promo--sinistra { inset: auto 12px 12px 12px; width: auto; max-height: 72dvh; } .es-promo .es-promo__riga > .es-promo__media { display: none; } .es-promo .es-promo__testo > .col-inner { padding: 16px 18px 14px; } .es-promo .es-promo__titolo h2, .es-promo .es-promo__titolo p { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .es-promo[open] { animation: none; } }