.elementor-239 .elementor-element.elementor-element-4c3a01b{--display:flex;--min-height:76vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:6%;--padding-right:16%;}.elementor-239 .elementor-element.elementor-element-158e2c18{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-239 .elementor-element.elementor-element-158e2c18.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-239 .elementor-element.elementor-element-b8bf63d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:25%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:20%;}.elementor-239 .elementor-element.elementor-element-4bd37299{text-align:start;}.elementor-239 .elementor-element.elementor-element-4bd37299 .elementor-heading-title{color:#141111;}.elementor-239 .elementor-element.elementor-element-34557ee9{width:var( --container-widget-width, 460px );max-width:460px;--container-widget-width:460px;--container-widget-flex-grow:0;}.elementor-239 .elementor-element.elementor-element-32fc177d{margin:4% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-239 .elementor-element.elementor-element-32fc177d .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-239 .elementor-element.elementor-element-32fc177d .elementor-button{fill:var( --e-global-color-9042db2 );color:var( --e-global-color-9042db2 );border-radius:50px 50px 50px 50px;padding:20px 35px 20px 35px;}.elementor-239 .elementor-element.elementor-element-40b42539{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;}.elementor-239 .elementor-element.elementor-element-40b42539.e-con{--align-self:center;}.elementor-239 .elementor-element.elementor-element-bb1764c{--display:flex;--margin-top:5%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-239 .elementor-element.elementor-element-8ea6723 img{width:100%;}.elementor-239 .elementor-element.elementor-element-1b79657{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-239 .elementor-element.elementor-element-73fd8e95{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:center;--margin-top:2%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-239 .elementor-element.elementor-element-73fd8e95.e-con{--align-self:center;}.elementor-239 .elementor-element.elementor-element-3f6086c.elementor-element{--align-self:flex-start;}.elementor-239 .elementor-element.elementor-element-3f6086c{text-align:start;}.elementor-239 .elementor-element.elementor-element-b94137d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-239 .elementor-element.elementor-element-b94137d.elementor-element{--align-self:flex-start;}.elementor-239 .elementor-element.elementor-element-b94137d .elementor-heading-title{font-size:33px;}.elementor-239 .elementor-element.elementor-element-4571ec7.elementor-element{--align-self:flex-end;}.elementor-239 .elementor-element.elementor-element-8ff1837{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:flex-end;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-239 .elementor-element.elementor-element-8ff1837.e-con{--align-self:flex-start;}.elementor-239 .elementor-element.elementor-element-59bd96c.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-239 .elementor-element.elementor-element-59bd96c.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-239 .elementor-element.elementor-element-40ee7f4f{--display:flex;--min-height:530px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:5%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-239 .elementor-element.elementor-element-40ee7f4f:not(.elementor-motion-effects-element-type-background), .elementor-239 .elementor-element.elementor-element-40ee7f4f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E8E1D8;}.elementor-239 .elementor-element.elementor-element-55cfd02{--display:flex;}.elementor-239 .elementor-element.elementor-element-55cfd02.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-239 .elementor-element.elementor-element-5ba5be3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-239 .elementor-element.elementor-element-de5efc7{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:15%;--padding-right:15%;}.elementor-239 .elementor-element.elementor-element-5908fc7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:5% 5%;--row-gap:5%;--column-gap:5%;}.elementor-239 .elementor-element.elementor-element-10837ce{width:var( --container-widget-width, 49% );max-width:49%;--container-widget-width:49%;--container-widget-flex-grow:0;}.elementor-239 .elementor-element.elementor-element-10837ce.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-239 .elementor-element.elementor-element-10837ce img{width:100%;max-width:100%;height:100%;border-radius:0% 0% 0% 0%;}.elementor-239 .elementor-element.elementor-element-5c0c2ab{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;}.elementor-239 .elementor-element.elementor-element-14a3f81{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-239 .elementor-element.elementor-element-e312ff7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-239 .elementor-element.elementor-element-62631e3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-239 .elementor-element.elementor-element-9529a3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-239 .elementor-element.elementor-element-d10759d{--display:flex;}@media(max-width:1024px){.elementor-239 .elementor-element.elementor-element-4c3a01b{--min-height:0px;--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:50px 50px;--row-gap:50px;--column-gap:50px;}.elementor-239 .elementor-element.elementor-element-158e2c18{--gap:50px 50px;--row-gap:50px;--column-gap:50px;}.elementor-239 .elementor-element.elementor-element-b8bf63d{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:15%;}.elementor-239 .elementor-element.elementor-element-40b42539{--min-height:350px;}.elementor-239 .elementor-element.elementor-element-73fd8e95{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:60px 60px;--row-gap:60px;--column-gap:60px;}.elementor-239 .elementor-element.elementor-element-59bd96c.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-239 .elementor-element.elementor-element-40ee7f4f{--min-height:410px;--margin-top:20%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-239 .elementor-element.elementor-element-de5efc7{--margin-top:20%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-239 .elementor-element.elementor-element-5908fc7{--gap:2% 2%;--row-gap:2%;--column-gap:2%;--flex-wrap:wrap;}}@media(max-width:767px){.elementor-239 .elementor-element.elementor-element-4c3a01b{--min-height:0px;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-239 .elementor-element.elementor-element-b8bf63d{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-239 .elementor-element.elementor-element-32fc177d .elementor-button{padding:18px 25px 18px 25px;}.elementor-239 .elementor-element.elementor-element-40b42539{--min-height:220px;}.elementor-239 .elementor-element.elementor-element-73fd8e95{--margin-top:30%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-239 .elementor-element.elementor-element-59bd96c.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-239 .elementor-element.elementor-element-40ee7f4f{--margin-top:30%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-239 .elementor-element.elementor-element-de5efc7{--margin-top:30%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-239 .elementor-element.elementor-element-5908fc7{--gap:45px 45px;--row-gap:45px;--column-gap:45px;}}@media(min-width:768px){.elementor-239 .elementor-element.elementor-element-158e2c18{--width:42.953%;}.elementor-239 .elementor-element.elementor-element-40b42539{--width:100%;}.elementor-239 .elementor-element.elementor-element-73fd8e95{--width:100%;}.elementor-239 .elementor-element.elementor-element-8ff1837{--width:100%;}.elementor-239 .elementor-element.elementor-element-55cfd02{--width:48.704%;}.elementor-239 .elementor-element.elementor-element-5ba5be3{--content-width:67%;}.elementor-239 .elementor-element.elementor-element-de5efc7{--width:100%;}.elementor-239 .elementor-element.elementor-element-5908fc7{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-239 .elementor-element.elementor-element-158e2c18{--width:100%;}.elementor-239 .elementor-element.elementor-element-40b42539{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-4c3a01b *//* ========================================================= 03. HERO HOME — TESTI --------------------------------------------------------- Componenti Elementor interessati: - Label: merumei-hero-eyebrow - Titolo: merumei-hero-title - Span/em evidenziato: merumei-accent-line - Bottone: merumei-hero-btn oppure merumei-button-primary Correzione principale: il titolo precedente arrivava a 104px, troppo grande rispetto alla pagina Chi siamo. Ora è allineato alla scala compatta. ========================================================= */ .merumei-hero-title .elementor-heading-title { font-family: var(--merumei-font-serif); font-size: clamp(38px, 4vw, 64px); font-weight: 300; line-height: 0.88; letter-spacing: -0.03em; color: var(--merumei-ink); } .merumei-hero-title .merumei-accent-line { font-style: italic; font-weight: 300; color: var(--merumei-terracotta-soft); } /* ========================================================= 04. HERO HOME — BLOCCO IMMAGINI --------------------------------------------------------- Struttura Elementor consigliata: Container media: - merumei-hero-media Immagine grande sinistra: - merumei-img-main Container destro: - merumei-hero-media-right Immagine piccola sopra: - merumei-img-top Immagine verticale sotto: - merumei-img-bottom Obiettivo: mantenere la composizione editoriale ma ridurre l’impatto visivo, coerentemente con la pagina Chi siamo. ========================================================= */ .merumei-home-hero-media { display: grid; grid-template-columns: 6.8fr 5.2fr; gap: clamp(12px, 1.2vw, 18px); align-items: start; width: 100%; max-width: 685px; justify-self: center; } .merumei-hero-media-right { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(28px, 3.2vw, 48px); } .merumei-img-main, .merumei-img-top, .merumei-img-bottom { overflow: hidden; background: rgba(20, 17, 17, 0.05); } .merumei-img-main { aspect-ratio: 3 / 4; } .merumei-img-top { aspect-ratio: 1 / 1; } .merumei-img-bottom { aspect-ratio: 3 / 4; } .merumei-img-main img, .merumei-img-top img, .merumei-img-bottom img { width: 100%; height: 100%; display: block; object-fit: cover; } .merumei-home-hero { position: relative; overflow: hidden; padding: clamp(64px, 5.6vw, 88px) var(--merumei-page-gutter) clamp(42px, 4.6vw, 68px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-73fd8e95 *//* ========================================================= 05. HOME — SEZIONE PRODOTTI IN EVIDENZA --------------------------------------------------------- Componenti interessati: - Titolo sezione: merumei-products-heading - Testata sezione: merumei-products-section-head - Colonna sinistra testata: merumei-products-section-head-left - Widget WooCommerce prodotti o Loop Grid. Correzione importante: nel CSS precedente i titoli prodotto diventavano 26px su tablet e 22px su mobile. Questo era incoerente con il look premium. Ora restano piccoli, editoriali e in stile menu. ========================================================= */ .merumei-products-heading .elementor-heading-title { font-family: var(--merumei-font-serif); font-size: clamp(32px, 3vw, 48px); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--merumei-ink); margin: 0; } .merumei-products-section-head { margin-bottom: clamp(34px, 3.8vw, 56px); } .merumei-products-section-head-left { gap: clamp(10px, 1.2vw, 16px); } /* Titoli prodotto. Se il CSS viene caricato globalmente, questi selettori possono influenzare anche Shop e prodotti correlati. Per ridurre il rischio, sono limitati dove possibile a: - body.home - merumei-home-products */ body.home .woocommerce ul.products li.product .woocommerce-loop-product__title, body.home .elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__title, body.home .elementor-loop-container .woocommerce-loop-product__title, body.home .elementor-widget-theme-product-title .product_title, body.home .elementor-widget-loop-grid .woocommerce-loop-product__title, .merumei-home-products .woocommerce-loop-product__title, .merumei-home-products .product_title { font-family: var(--merumei-font-sans); font-size: clamp(10px, 0.72vw, 11px); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; line-height: 1.35; color: rgba(20, 17, 17, 0.66); margin: 0; padding: 0; } /* Prezzo prodotto. Stile discreto, allineato alla parte editoriale. */ body.home .woocommerce ul.products li.product .price, body.home .elementor-widget-woocommerce-products ul.products li.product .price, body.home .elementor-loop-container .price, .merumei-home-products .price { font-family: var(--merumei-font-sans); font-size: clamp(12px, 0.85vw, 14px); font-weight: 400; color: rgba(20, 17, 17, 0.72); } /* Immagini prodotto Home. Mantiene proporzioni ordinate e previene deformazioni. */ body.home .woocommerce ul.products li.product img, body.home .elementor-widget-woocommerce-products ul.products li.product img, body.home .elementor-loop-container img, .merumei-home-products img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } /* Nasconde il bottone carrello nella Home se lo stai gestendo come card editoriale. Se invece vuoi il bottone in hover, questa regola va rimossa o commentata. */ .merumei-home-products .button, .merumei-home-products .added_to_cart { display: none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-40ee7f4f *//* ========================================================= 06. HOME — SEZIONE COLORI / MODELLO 3D File suggerito: 06-merumei-home-colors-3d.css --------------------------------------------------------- Struttura Elementor consigliata: Container principale: - merumei-colors-section - eventuale Shape Divider Elementor: bottom / sotto Colonna sinistra: - merumei-colors-stage - merumei-3d-shell - model-viewer Colonna destra: - merumei-colors-panel - merumei-section-kicker - merumei-colors-heading - merumei-colors-copy - divider Elementor - merumei-color-ui - merumei-color-meta - merumei-swatch-row - merumei-color-code Obiettivo del file: - mantenere la sezione compatta e coerente con la pagina Chi siamo; - evitare che il viewer 3D crei un riquadro rigido che taglia il separatore sagomato; - lasciare il separatore Elementor sopra il contenuto visivo; - mantenere il fondo sabbia #E8E1D8 come base della sezione/modello 3D; - rendere il blocco più manutenibile separando layout, viewer, testi, UI colore e responsive. ========================================================= */ /* ========================================================= 01. CONTAINER PRINCIPALE --------------------------------------------------------- Questo è il container esterno della sezione colori. Deve contenere sia le due colonne sia lo shape divider Elementor. Note tecniche: - position: relative permette di gestire correttamente gli z-index interni. - overflow: visible evita che la curva del separatore venga tagliata. - padding-bottom maggiorato crea spazio reale tra viewer 3D e onda inferiore. - isolation: isolate mantiene ordinato lo stacking context della sezione. ========================================================= */ .merumei-colors-section { position: relative; isolation: isolate; overflow: visible !important; width: min(var(--merumei-page-width), calc(100% - var(--merumei-page-gutter) * 2)); margin: 0 auto; background: var(--merumei-sand); padding-top: clamp(48px, 5.4vw, 82px); padding-bottom: clamp(84px, 9vw, 130px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr); column-gap: clamp(36px, 5vw, 72px); row-gap: 32px; align-items: center; } /* ========================================================= 02. INNER CONTAINER ELEMENTOR / COLONNE --------------------------------------------------------- Elementor può inserire un wrapper interno .e-con-inner. Queste regole evitano clipping indesiderato e mantengono le colonne sotto lo shape divider. Se la classe merumei-colors-section è applicata direttamente al container interno e non al container esterno, queste regole restano comunque sicure. ========================================================= */ .merumei-colors-section > .e-con-inner, .merumei-colors-stage, .merumei-colors-panel { position: relative; z-index: 1; overflow: visible !important; } .merumei-colors-stage { min-width: 0; padding-right: 0; padding-bottom: clamp(20px, 3vw, 40px); } .merumei-colors-panel { min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 18px); } /* ========================================================= 03. VIEWER 3D --------------------------------------------------------- Il viewer 3D non deve generare un blocco rettangolare che copre o taglia la curva inferiore. Scelta tecnica: - lo sfondo sabbia viene dato alla sezione principale; - il viewer resta trasparente; - overflow visible evita il taglio visivo del divider; - min-height ridotta evita una sezione troppo alta. ========================================================= */ .merumei-3d-shell { position: relative; z-index: 1; width: 100%; aspect-ratio: 1.35 / 1; min-height: clamp(260px, 30vw, 420px); overflow: visible !important; background: transparent !important; } .merumei-3d-shell model-viewer { display: block; width: 100%; height: 100%; background: transparent !important; --poster-color: transparent; } /* ========================================================= 04. SHAPE DIVIDER ELEMENTOR --------------------------------------------------------- Fix principale per il problema segnalato: il separatore sagomato deve stare davanti al viewer 3D. Elementor può usare classi diverse a seconda della versione: per questo vengono coperte più varianti. ========================================================= */ .merumei-colors-section .elementor-shape-bottom, .merumei-colors-section .elementor-shape-divider--bottom, .merumei-colors-section .e-shape-divider, .merumei-colors-section .e-shape-divider-bottom { z-index: 5 !important; pointer-events: none; line-height: 0; } .merumei-colors-section .elementor-shape-bottom svg, .merumei-colors-section .elementor-shape-divider--bottom svg, .merumei-colors-section .e-shape-divider svg, .merumei-colors-section .e-shape-divider-bottom svg { display: block; width: calc(100% + 1.3px); } /* ========================================================= 05. RAPPORTO CON LA SEZIONE SUCCESSIVA --------------------------------------------------------- La sezione successiva, nel tuo caso la B2B scura, deve restare sotto la curva e non sovrapporsi al divider. ========================================================= */ .merumei-b2b-section { position: relative; z-index: 0; } /* ========================================================= 06. TITOLO SEZIONE COLORI --------------------------------------------------------- Titolo coerente con la pagina Chi siamo: serif elegante, dimensione più compatta, line-height controllata. ========================================================= */ .merumei-colors-heading .elementor-heading-title { font-family: var(--merumei-font-serif); font-size: clamp(32px, 3vw, 48px); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--merumei-ink); margin: 0; } .merumei-colors-heading .merumei-italic-line { font-style: italic; font-weight: 300; } /* ========================================================= 07. PARAGRAFO SEZIONE COLORI --------------------------------------------------------- Testo descrittivo breve, con larghezza controllata per mantenere una colonna elegante e leggibile. ========================================================= */ .merumei-colors-copy, .merumei-colors-copy p { max-width: 34ch; margin: 0; font-family: var(--merumei-font-sans); font-size: clamp(14px, 0.86vw, 16px); line-height: 1.68; color: var(--merumei-copy); } /* ========================================================= 08. DIVIDER INTERNO ALLA COLONNA COLORI --------------------------------------------------------- Divider tra copy e selettore colore. Il colore è allineato alla gerarchia grigia usata per label/codice. ========================================================= */ .merumei-colors-panel .elementor-divider { margin: 4px 0 0 0; } .merumei-colors-panel .elementor-divider-separator { border-color: rgba(20, 17, 17, 0.58) !important; } /* ========================================================= 09. UI SELEZIONE COLORE --------------------------------------------------------- Contiene: - label "selezionato"; - nome colore; - riga swatch; - codice esadecimale. ========================================================= */ .merumei-color-ui { display: flex; flex-direction: column; gap: 16px; } .merumei-color-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; } .merumei-color-code { display: flex; justify-content: flex-start; align-items: center; gap: 12px; } .merumei-meta-label { font-family: var(--merumei-font-sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(20, 17, 17, 0.58); } .merumei-meta-name { font-family: var(--merumei-font-serif); font-size: clamp(20px, 1.65vw, 28px); font-style: italic; font-weight: 300; line-height: 1; color: var(--merumei-ink); text-align: right; } .merumei-meta-code { font-family: var(--merumei-font-sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; color: var(--merumei-ink); } /* ========================================================= 10. SWATCHES COLORE --------------------------------------------------------- Bottoni circolari per selezione colore. Il colore reale viene letto dalla variabile inline --swatch. Esempio: ========================================================= */ .merumei-swatch-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .merumei-swatch, .merumei-swatch:hover, .merumei-swatch:focus, .merumei-swatch:active { width: 40px; height: 40px; border-radius: 999px; padding: 0; margin: 0; appearance: none !important; -webkit-appearance: none !important; background: var(--swatch) !important; background-color: var(--swatch) !important; border: 1px solid rgba(20, 17, 17, 0.08) !important; color: transparent !important; cursor: pointer; box-shadow: none; outline: none !important; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .merumei-swatch:hover { transform: scale(1.05); } .merumei-swatch.is-active { box-shadow: 0 0 0 4px var(--merumei-cream), 0 0 0 5px rgba(20, 17, 17, 0.72); transform: scale(1.04); } .merumei-swatch[data-hex="#FFFFFF"] { border-color: rgba(20, 17, 17, 0.16) !important; } /* ========================================================= 11. RESPONSIVE TABLET --------------------------------------------------------- Su tablet la sezione passa a una sola colonna. Il viewer resta leggibile e il pannello colore scende sotto. ========================================================= */ @media (max-width: 1024px) { .merumei-colors-section { grid-template-columns: 1fr; column-gap: 0; row-gap: 36px; } .merumei-colors-stage, .merumei-colors-panel { padding-right: 0; } .merumei-3d-shell { aspect-ratio: 4 / 3; min-height: 340px; } .merumei-meta-name { text-align: left; } } /* ========================================================= 12. RESPONSIVE MOBILE --------------------------------------------------------- Su mobile: - larghezza piena con gutter controllato; - altezza viewer proporzionata; - metadati colore in colonna; - swatch leggermente più piccoli. ========================================================= */ @media (max-width: 767px) { .merumei-colors-section { width: min(100%, calc(100% - 32px)); padding-top: 52px; padding-bottom: 88px; } .merumei-3d-shell { aspect-ratio: 1 / 1; min-height: 280px; } .merumei-color-meta { flex-direction: column; align-items: flex-start; gap: 10px; } .merumei-swatch-row { gap: 12px; } .merumei-swatch, .merumei-swatch:hover, .merumei-swatch:focus, .merumei-swatch:active { width: 38px; height: 38px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-de5efc7 *//* ========================================================= 07. HOME — SEZIONE B2B / HO.RE.CA --------------------------------------------------------- Struttura Elementor consigliata: Container esterno: - merumei-b2b-section Colonna immagine: - merumei-b2b-media - merumei-b2b-image Colonna testo: - merumei-b2b-content - merumei-b2b-heading - merumei-b2b-text - merumei-b2b-stats - stat number: merumei-b2b-stat-number - stat label: merumei-b2b-stat-label Correzioni principali: - rimossa dichiarazione duplicata di merumei-b2b-stats; - ridotto padding; - reso il blocco più coerente con pagina Chi siamo; - immagine controllata con max-height. ========================================================= */ .merumei-b2b-section { background: var(--merumei-ink); color: var(--merumei-cream); } .merumei-b2b-media { width: 100%; overflow: hidden; } .merumei-b2b-image, .merumei-b2b-image img { width: 100%; display: block; } .merumei-b2b-image img { object-fit: cover; object-position: center; min-height: clamp(220px, 24vw, 340px); } .merumei-b2b-content { width: 50%; padding: clamp(28px, 3.4vw, 52px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; color: var(--merumei-cream); box-sizing: border-box; } .merumei-b2b-heading .elementor-heading-title { font-family: var(--merumei-font-serif); font-size: clamp(36px, 3.8vw, 56px); font-weight: 300; line-height: 0.98; letter-spacing: -0.02em; color: var(--merumei-cream); margin: 0; max-width: 10ch; } .merumei-b2b-heading .merumei-b2b-accent { color: var(--merumei-terracotta); font-style: italic; font-weight: 300; } .merumei-b2b-text, .merumei-b2b-text p { font-family: var(--merumei-font-sans); font-size: clamp(14px, 0.86vw, 16px); line-height: 1.68; color: rgba(251, 250, 248, 0.68); margin: 0; max-width: 520px; } /* Stats B2B. Qui è stata rimossa la duplicazione presente nel vecchio CSS. */ .merumei-b2b-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); padding-top: clamp(18px, 2vw, 28px); margin-top: clamp(18px, 2vw, 28px); border-top: 1px solid rgba(251, 250, 248, 0.15); } .merumei-b2b-stat-number .elementor-heading-title { font-family: var(--merumei-font-serif); font-size: clamp(28px, 2.6vw, 42px); font-weight: 300; line-height: 0.95; color: var(--merumei-terracotta); margin: 0 0 8px 0; white-space: nowrap; } .merumei-b2b-stat-label, .merumei-b2b-stat-label p { font-family: var(--merumei-font-sans); font-size: clamp(9.5px, 0.7vw, 10.5px); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.45; color: rgba(251, 250, 248, 0.6); margin: 0; } /* ========================================================= 08. RESPONSIVE TABLET ========================================================= */ @media (max-width: 1024px) { .merumei-hero-media { max-width: 520px; justify-self: start; } .merumei-colors-section { grid-template-columns: 1fr; width: min(100%, calc(100% - 48px)); column-gap: 0; row-gap: 36px; } .merumei-colors-stage, .merumei-colors-panel { padding-right: 0; } .merumei-3d-shell { aspect-ratio: 4 / 3; min-height: 320px; } .merumei-meta-name { text-align: left; } .merumei-b2b-content, .merumei-b2b-media { width: 100%; } .merumei-b2b-content { padding: 48px 32px; } .merumei-b2b-heading .elementor-heading-title { max-width: 10ch; } } /* ========================================================= 09. RESPONSIVE MOBILE ========================================================= */ @media (max-width: 767px) { .merumei-hero-title .elementor-heading-title { font-size: clamp(36px, 11.5vw, 50px); } .merumei-hero-media { grid-template-columns: 1fr; max-width: 100%; gap: 16px; } .merumei-hero-media-right { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .merumei-products-heading .elementor-heading-title { font-size: clamp(30px, 8.5vw, 42px); } .merumei-products-section-head { margin-bottom: 34px; } .merumei-products-section-head-left { gap: 12px; } body.home .woocommerce ul.products li.product .woocommerce-loop-product__title, body.home .elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__title, body.home .elementor-loop-container .woocommerce-loop-product__title, body.home .elementor-widget-theme-product-title .product_title, body.home .elementor-widget-loop-grid .woocommerce-loop-product__title, .merumei-home-products .woocommerce-loop-product__title, .merumei-home-products .product_title { font-size: 10px; letter-spacing: 0.24em; line-height: 1.35; } .merumei-colors-section { width: min(100%, calc(100% - 32px)); padding-block: 42px; } .merumei-3d-shell { aspect-ratio: 1 / 1; min-height: 280px; } .merumei-color-meta { flex-direction: column; align-items: flex-start; gap: 10px; } .merumei-swatch-row { gap: 10px; } .merumei-swatch, .merumei-swatch:hover, .merumei-swatch:focus, .merumei-swatch:active { width: 38px; height: 38px; } .merumei-b2b-content { padding: 40px 24px; } .merumei-b2b-heading .elementor-heading-title { font-size: clamp(32px, 9.5vw, 46px); max-width: 9ch; } .merumei-b2b-text, .merumei-b2b-text p { font-size: 14px; line-height: 1.6; } .merumei-b2b-stats { grid-template-columns: 1fr; gap: 20px; } .merumei-b2b-stat-number .elementor-heading-title { font-size: clamp(28px, 9vw, 38px); } .merumei-b2b-stat-label, .merumei-b2b-stat-label p { letter-spacing: 0.14em; } }/* End custom CSS */