/* Theme Name: Hello Elementor Child — SAMA Theme URI: https://www.samafood.it Description: Child theme di Hello Elementor per il restyling del sito corporate SAMA. Regola: i parametri stanno nei widget nativi di Elementor; qui solo ciò che Elementor non può fare (transizioni sticky, marquee, rifiniture). Ogni regola è commentata col perché. Author: LumaHub Template: hello-elementor Version: 2.21.18 Text Domain: sama-child */ /* ============================================================ TOKEN — stessi valori dei Colori globali del kit Elementor. ============================================================ */ :root{ --sama-rosso:#e30613; --sama-rosso-scuro:#b8050f; --sama-rosso-soft:#fdeced; --sama-ink:#161616; --sama-grigio:#5c6360; --sama-grigio-bg:#f6f6f4; --sama-linea:#e8e8e5; --sama-bordo-search:#c4c4c4; /* bordo icona cerca e X overlay */ --sama-ease:cubic-bezier(.22,1,.36,1); } /* ============================================================ 1. TITOLO HERO — a capo responsive (2 righe desktop, 3 mobile). Nel widget Titolo incollare il testo con i
come da guida. ============================================================ */ .br-mob{display:none} @media (max-width:1024px){ .br-desk{display:none} .br-mob{display:inline} } /* ============================================================ 1b. LARGHEZZA CONTENUTO — come il prototipo: min(1240px, 92%). Sotto i ~1350px tutti i container "in box" respirano con un 4% di padding laterale automatico, su tutto il sito. ============================================================ */ .e-con-boxed > .e-con-inner{ /* compatibile anche con browser vecchi: niente min() */ width:92%; max-width:var(--content-width,1240px); } /* ============================================================ 2. STICKY COMPATTO — impossibile nativamente: Elementor non anima le proprietà quando aggiunge .elementor-sticky--effects. Richiede sul container esterno la classe "sama-header" + Sticky:Top con "Effetti di scorrimento" attivo (offset 30). ============================================================ */ .sama-header{ background:#fff; transition:box-shadow .4s var(--sama-ease); } .sama-header.elementor-sticky--effects{ box-shadow:0 1px 0 var(--sama-linea),0 14px 34px -22px rgba(0,0,0,.22); } /* riga logo: transizione del padding (il valore lo governi da Elementor) */ .sama-header .sama-header-top{transition:padding .4s var(--sama-ease)} /* logo: 165px nel widget -> 105px allo scroll. Solo desktop: su tablet/mobile resta fisso al valore responsive del widget (118). */ .sama-header .elementor-widget-theme-site-logo img{ transition:width .4s var(--sama-ease); } @media (min-width:1025px){ .sama-header.elementor-sticky--effects .elementor-widget-theme-site-logo img{width:105px} } /* riga menu: bordo superiore (nativo nel container) che svanisce allo scroll */ .sama-header .sama-header-nav{transition:border-color .4s var(--sama-ease)} .sama-header.elementor-sticky--effects .sama-header-nav{border-top-color:transparent !important} /* ============================================================ 3. MENU DESKTOP — distribuzione e sottolineatura del prototipo. Nel widget restano nativi: tipografia (globale "Voci menu"), colori (globali), pointer underline 2px, padding voci 15/18. Qui solo ciò che il widget non prevede. ============================================================ */ /* freccette dei sotto-menu: l'SVG segue sempre il colore del testo (il fill fisso del widget lasciava la freccia nera su voce rossa) */ .sama-header .elementor-item .sub-arrow svg, .sama-header .elementor-sub-item .sub-arrow svg{ fill:currentColor !important; } .sama-header .elementor-item .sub-arrow i, .sama-header .elementor-sub-item .sub-arrow i{color:inherit !important} /* il nav-menu occupa lo spazio, l'icona cerca resta a destra */ .sama-header-nav .elementor-widget-nav-menu{flex:1 1 auto;min-width:0} .sama-header-nav .elementor-widget-search-form{flex:0 0 auto} /* voci in space-between su tutta la larghezza (non esiste nativo) */ .sama-header-nav .elementor-nav-menu--main .elementor-nav-menu{ display:flex;justify-content:space-between;align-items:center;width:100%; } /* prima voce a filo del contenuto */ .sama-header-nav .elementor-nav-menu--main li:first-child .elementor-item{padding-left:0 !important} /* sottolineatura come nel prototipo: 2px rossa, inset del padding, scaleX da sinistra .3s (l'underline nativo copre tutta la voce) */ .sama-header-nav .elementor-nav-menu--main .elementor-item::after{ content:"";position:absolute;left:18px;right:18px;bottom:9px;top:auto; height:2px;width:auto; background:var(--sama-rosso) !important; transform:scaleX(0);transform-origin:left; transition:transform .3s var(--sama-ease) !important; opacity:1 !important; } .sama-header-nav .elementor-nav-menu--main li:first-child .elementor-item::after{left:0} .sama-header-nav .elementor-nav-menu--main .elementor-item:hover::after{ transform:scaleX(1); } /* pagina corrente: NIENTE rosso né sottolineatura (resta come le altre voci); in hover si comporta normalmente */ .sama-header-nav .elementor-nav-menu--main .elementor-item.elementor-item-active:not(:hover){ color:var(--sama-ink) !important; } .sama-header-nav .elementor-nav-menu--main .elementor-item.elementor-item-active:not(:hover)::after{ transform:scaleX(0); } .sama-header-nav .elementor-nav-menu--main .elementor-item{position:relative} /* tra 1025 e 1240px: voci più compatte per evitare l'a capo */ @media (min-width:1025px) and (max-width:1240px){ .sama-header-nav .elementor-nav-menu--main .elementor-item{ font-size:12px !important;letter-spacing:.06em !important; padding:14px 10px !important; } .sama-header-nav .elementor-nav-menu--main .elementor-item::after{left:10px;right:10px} .sama-header-nav .elementor-nav-menu--main li:first-child .elementor-item{padding-left:0 !important} } /* tendina sotto-voci desktop: card come nel prototipo. Alcuni controlli della tendina non esistono nel widget (radius, padding card, hover con fondo) — qui la replica completa. Scopata >=1025px per non toccare il pannello burger mobile. */ @media (min-width:1025px){ .sama-header .elementor-nav-menu--main .elementor-nav-menu--dropdown{ min-width:230px; background:#fff !important; border:1px solid var(--sama-linea); border-radius:12px !important; box-shadow:0 26px 60px -24px rgba(0,0,0,.28) !important; margin-top:6px; padding:8px !important; } .sama-header .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item{ border-radius:8px; font-family:"Figtree",sans-serif !important; font-size:13.5px !important;font-weight:500 !important; text-transform:none !important;letter-spacing:0 !important; color:var(--sama-grigio) !important; padding:9px 24px 9px 14px !important; transition:background .2s,color .2s; } .sama-header .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item:hover, .sama-header .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active, .sama-header .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item:focus{ background:var(--sama-rosso-soft) !important; color:var(--sama-rosso) !important; } } /* ============================================================ 4. ICONA CERCA — nel widget restano nativi: dimensione 38px, icona 40 (=40% del bottone), bordo 1px, raggio 50%, colore icona (globale Ink, hover Rosso). Il widget però usa UN SOLO colore per icona e bordo, e mette un fondo grigio di default: qui separiamo bordo (#c4c4c4) e azzeriamo il fondo. NB: bordo e fondo stanno sull'elemento INTERNO (.e-font-icon-svg-container / i), non sul toggle. ============================================================ */ .sama-header .elementor-search-form__toggle .e-font-icon-svg-container, .sama-header .elementor-search-form__toggle i{ border-color:var(--sama-bordo-search) !important; background-color:transparent !important; transition:border-color .25s,background-color .25s; } .sama-header .elementor-search-form__toggle:hover .e-font-icon-svg-container, .sama-header .elementor-search-form__toggle:hover i, .sama-header .elementor-search-form__toggle:focus .e-font-icon-svg-container, .sama-header .elementor-search-form__toggle:focus i{ border-color:var(--sama-rosso) !important; background-color:var(--sama-rosso-soft) !important; } /* ============================================================ 5. OVERLAY CERCA FULL SCREEN — il widget non prevede overlay chiaro, freccia di invio né hint: replica del prototipo. (la freccia rossa è iniettata da js/sama-search.js) ============================================================ */ .elementor-search-form--skin-full_screen .elementor-search-form__container{ background-color:rgba(255,255,255,.97) !important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); flex-direction:row;flex-wrap:wrap; align-items:center;align-content:center;justify-content:center; gap:14px; padding:0 5% !important; /* il default del widget è 15%: campo più largo */ } .elementor-search-form--skin-full_screen .elementor-search-form__input{ flex:0 1 min(640px,72vw);width:auto !important; font-family:"Archivo",Arial,sans-serif !important; font-weight:600 !important; font-size:34px !important; /* fallback per browser senza clamp() */ font-size:clamp(24px,3.4vw,42px) !important; color:var(--sama-ink) !important; text-align:left !important; border-bottom:3px solid var(--sama-rosso) !important; padding:0 0 14px 0 !important; background:none !important; } .elementor-search-form--skin-full_screen .elementor-search-form__input::placeholder{ color:#c9cdc9 !important; } /* pulsante freccia rosso (iniettato via JS) — !important per battere gli stili di default dei bottoni di tema/Elementor */ .elementor-search-form--skin-full_screen .sama-search-go{ -webkit-appearance:none;appearance:none; flex:0 0 auto; width:54px !important;height:54px !important; min-width:0 !important;padding:0 !important;margin:0 !important; border-radius:50% !important;border:0 !important;cursor:pointer; background:var(--sama-rosso) !important;color:#fff !important; font-size:22px !important;line-height:1 !important; display:inline-flex;align-items:center;justify-content:center; transition:background .3s,transform .3s; } .elementor-search-form--skin-full_screen .sama-search-go:hover{ background:var(--sama-rosso-scuro) !important; transform:translateX(3px); } /* hint sotto il campo */ .elementor-search-form--skin-full_screen .elementor-search-form__container::after{ content:"Digita e premi invio per cercare"; flex-basis:100%;text-align:center;margin-top:20px; font-family:"Figtree",sans-serif; font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--sama-grigio); } /* su smartphone campo e freccia restano sulla stessa riga: il campo si stringe per lasciare i 54px + gap alla freccia */ @media (max-width:767px){ .elementor-search-form--skin-full_screen .elementor-search-form__container{gap:12px} .elementor-search-form--skin-full_screen .elementor-search-form__input{ flex:0 1 calc(100% - 96px); } } /* X di chiusura: cerchio con bordo, fissa in alto a destra */ .elementor-search-form--skin-full_screen .dialog-close-button{ position:absolute !important;top:22px !important;right:26px !important; bottom:auto !important;left:auto !important; width:48px;height:48px;border:1px solid var(--sama-bordo-search);border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--sama-ink) !important; transition:background .25s,color .25s,border-color .25s,transform .25s; } .elementor-search-form--skin-full_screen .dialog-close-button:hover{ background:var(--sama-rosso);border-color:var(--sama-rosso);color:#fff !important; transform:rotate(90deg); } .elementor-search-form--skin-full_screen .dialog-close-button svg{fill:currentColor;width:18px;height:18px} /* ============================================================ 6. LINGUE GTRANSLATE (opzione "language codes") — pillole IT · EN · ES. Markup iniettato via JS, non è un widget. ============================================================ */ .sama-header .gtranslate_wrapper{display:flex;align-items:center;gap:4px} .sama-header .gtranslate_wrapper a{ font-family:"Archivo",Arial,sans-serif; font-size:11.5px;font-weight:600;letter-spacing:.12em; color:var(--sama-grigio);text-transform:uppercase;text-decoration:none; padding:3px 8px;border-radius:6px; transition:color .2s,background .2s; } .sama-header .gtranslate_wrapper a:hover, .sama-header .gtranslate_wrapper a.gt-current-lang{ color:var(--sama-rosso);background:var(--sama-rosso-soft); } /* ============================================================ 7. TABLET / MOBILE (≤1024) ============================================================ */ @media (max-width:1024px){ /* burger: stesso trattamento del cerchio cerca — 38px, bordo #c4c4c4, icona 20px ben visibile. La dimensione icona nativa del widget viaggia in --nav-menu-icon-size: qui è un fallback, se la imposti nel widget vince il widget. */ .sama-header .elementor-menu-toggle{ --nav-menu-icon-size:20px; width:38px;height:38px;padding:0; border:1px solid var(--sama-bordo-search);border-radius:50%; background:none; align-items:center;justify-content:center; transition:border-color .25s,background-color .25s; } .sama-header .elementor-menu-toggle:hover, .sama-header .elementor-menu-toggle.elementor-active{ border-color:var(--sama-rosso);background:var(--sama-rosso-soft); } /* pannello a tendina: voci grandi come nel prototipo */ .sama-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{ background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.3); } .sama-header .elementor-nav-menu--dropdown .elementor-item{ font-family:"Archivo",Arial,sans-serif; font-size:19px;font-weight:600;text-transform:none;letter-spacing:.02em; color:var(--sama-ink); padding:14px 6% !important; border-bottom:1px solid var(--sama-linea); } .sama-header .elementor-nav-menu--dropdown .elementor-sub-item{ font-size:15px;font-weight:400;color:var(--sama-grigio); padding:10px 6% 10px calc(6% + 16px) !important; border-left:2px solid var(--sama-rosso-soft); } .sama-header .elementor-nav-menu--dropdown .elementor-item:hover, .sama-header .elementor-nav-menu--dropdown .elementor-sub-item:hover{ color:var(--sama-rosso);background:var(--sama-rosso-soft); } } /* ============================================================ 7b. UTILITY SEZIONI — usate da tutte le sezioni della home. - "sama-eyebrow" sul widget Titolo: lineetta rossa prima del testo - "sama-arrow-link" sul widget Titolo con link: freccia che scivola in avanti in hover (come nel prototipo) ============================================================ */ .sama-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:12px} .sama-eyebrow .elementor-heading-title::before{ content:"";width:34px;height:2px;background:var(--sama-rosso);flex:none; } /* "sama-arrow-link" in versione BOTTONE OUTLINE: pillola con solo il bordo rosso, testo rosso 14px — in hover si riempie di rosso col testo bianco e la freccia scivola. */ .sama-arrow-link .elementor-heading-title a{ display:inline-flex;align-items:center; background:transparent; border:2px solid var(--sama-rosso); color:var(--sama-rosso) !important; font-size:14px !important; padding:12px 26px; border-radius:100px; transition:background .3s,color .3s,transform .3s var(--sama-ease); } .sama-arrow-link .elementor-heading-title a:hover{ background:var(--sama-rosso); color:#FFFFFF !important; transform:translateY(-2px); } .sama-arrow-link .elementor-heading-title a::after{ content:"→";display:inline-block;margin-left:10px; transition:margin-left .3s var(--sama-ease); } .sama-arrow-link .elementor-heading-title a:hover::after{margin-left:16px} /* variante eyebrow su fondo rosso: lineetta bianca */ .sama-eyebrow.sama-eyebrow-bianca .elementor-heading-title::before{background:#FFFFFF} /* variante bottone outline su fondo rosso: bordo e testo bianchi, in hover si riempie di bianco col testo scuro */ .sama-arrow-link.sama-arrow-bianco .elementor-heading-title a{ border-color:#FFFFFF;color:#FFFFFF !important; } .sama-arrow-link.sama-arrow-bianco .elementor-heading-title a:hover{ background:#FFFFFF;color:var(--sama-ink) !important; } /* ============================================================ 7c. COSA FACCIAMO — colonna media con card "Il tuo logo". "sama-cosa-media" sul container della colonna immagine; "sama-yourlogo" sul widget Image Box della card PL: l'etichetta tratteggiata "IL TUO LOGO" sul vaso è disegnata qui (non esiste un widget nativo per un overlay del genere). ============================================================ */ .sama-cosa-media{position:relative} /* larghezza fissa: i % sui widget in posizione assoluta non sono affidabili (la card si allargava al 100% della colonna) */ .sama-yourlogo{width:230px !important;max-width:70%} .sama-yourlogo .elementor-image-box-img{ position:relative;margin:0 0 12px !important; width:100% !important;max-width:100% !important; /* la regola width dell'image-box di Elementor è element-scoped: serve !important */ } /* il vaso riempie la card con crop quadrato (la foto è verticale) */ .sama-yourlogo .elementor-image-box-img img{ width:100% !important;height:190px;object-fit:cover;border-radius:10px; } .sama-yourlogo .elementor-image-box-img::after{ content:"Il tuo logo"; position:absolute;left:14%;right:14%;top:34%;bottom:30%; background:rgba(255,255,255,.94); border:2px dashed var(--sama-rosso);border-radius:8px; display:flex;align-items:center;justify-content:center; font-family:"Archivo",Arial,sans-serif;font-size:12px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--sama-rosso); } /* la card fluttua su e giù (stesso effetto di pb-hero-img-float su panbigne: il posizionamento è via offset, il transform è libero) */ .sama-yourlogo{animation:sama-floatY 4s ease-in-out infinite} @keyframes sama-floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } @media (prefers-reduced-motion:reduce){ .sama-yourlogo{animation:none} } /* ============================================================ 7d. SLIDER SOSTENIBILITÀ — eyebrow con lineetta rossa dentro il titolo delle slide (il widget Slides non ha un campo eyebrow: va come nel campo Titolo). Classe "sama-sost" sul widget Slides. ============================================================ */ .sama-sost .elementor-slide-heading .sama-slide-eyebrow{ display:flex;align-items:center;gap:12px; font-family:"Archivo",Arial,sans-serif; font-size:12px;font-weight:700;letter-spacing:.3em; text-transform:uppercase;color:#fff; margin-bottom:14px; } .sama-sost .elementor-slide-heading .sama-slide-eyebrow::before{ content:"";width:34px;height:2px;background:var(--sama-rosso);flex:none; } /* bottoni delle slide ("Leggi il bilancio", "Leggi la news"…): pillola outline BIANCA come i "Scopri di più" — in hover si riempie di bianco con testo scuro. NB: niente "→" nel testo del bottone nel widget, la freccia la mette il CSS. */ .sama-sost .elementor-slide-button{ display:inline-flex;align-items:center; background:transparent !important; border:2px solid #FFFFFF !important; color:#FFFFFF !important; font-size:14px !important; padding:12px 26px !important; border-radius:100px !important; transition:background .3s,color .3s,transform .3s var(--sama-ease); } .sama-sost .elementor-slide-button:hover{ background:#FFFFFF !important; color:var(--sama-ink) !important; transform:translateY(-2px); } .sama-sost .elementor-slide-button::after{ content:"→";display:inline-block;margin-left:10px; transition:margin-left .3s var(--sama-ease); } .sama-sost .elementor-slide-button:hover::after{margin-left:16px} /* contenuto slide centrato in 1300px */ .sama-sost .swiper-slide-inner{ max-width:1300px; margin:0 auto; } /* su smartphone: 10px di respiro laterale al contenuto (solo questo slider) */ @media (max-width:767px){ .sama-sost .swiper-slide-contents{padding-left:10px;padding-right:10px} } /* frecce ai bordi di una fascia centrata da 1380px, ~40px fuori dal contenuto (1300). !important necessario: Elementor 4 carica il CSS del widget Slides DOPO il child, e a pari specificità vincerebbe il suo left/right:10px. Sotto i 1440px di viewport restano ai bordi dello schermo come da default. */ @media (min-width:1440px){ .sama-sost .elementor-swiper-button-prev{left:calc((100% - 1380px) / 2) !important} .sama-sost .elementor-swiper-button-next{right:calc((100% - 1380px) / 2) !important} } /* ============================================================ 8. NASTRO NUMERI SU BANDA ROSSA — widget HTML (eccezione custom). Markup in GUIDA-ELEMENTOR.md (KPI aggiornati da PAGINE SAMA.docx). ============================================================ */ .sama-marquee{ background:var(--sama-rosso); padding:48px 0; /* fallback per browser senza clamp() */ padding:clamp(40px,4.5vw,56px) 0; overflow:hidden; } .sama-marquee ul{ display:flex;width:max-content;margin:0;padding:0;list-style:none; animation:sama-numscroll 28s linear infinite; } .sama-marquee:hover ul{animation-play-state:paused} @keyframes sama-numscroll{to{transform:translateX(-50%)}} .sama-marquee li{ display:flex;align-items:baseline;gap:14px; padding:0 38px;white-space:nowrap; border-left:1px solid rgba(255,255,255,.28); } .sama-marquee li strong{ font-family:"Archivo",Arial,sans-serif;font-weight:700;font-stretch:110%; font-size:44px; /* fallback per browser senza clamp() */ font-size:clamp(36px,3.6vw,54px);line-height:1;color:#fff; letter-spacing:-.02em; } .sama-marquee li span{ font-size:12.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.85); } @media (prefers-reduced-motion:reduce){ .sama-marquee ul{animation:none} } /* ============================================================ 8b. HERO — scritta "Scorri" con linea rossa animata (prototipo). Il widget Titolo con classe "sama-scroll" è posizionato in assoluto (nativo, bottom 26px / left 50%); qui il centraggio e la linea con l'animazione a goccia, non fattibili nativamente. ============================================================ */ /* ============================================================ 1c. FONT-STRETCH — Elementor non ha il controllo nativo per l'asse di larghezza del font; Archivo variabile (wdth 75..125) è caricato dal child. Valori del prototipo: H1 hero 115% (105% su smartphone), H2 di sezione 112%. ============================================================ */ .sama-hero h1{font-stretch:115%} @media (max-width:767px){ .sama-hero h1{font-stretch:105%} } h2{font-stretch:112%} .sama-hero{position:relative} /* altezza = viewport MENO l'header (che è sticky in flusso, non sovrapposto): così "Scorri" resta al bordo dello schermo senza scrollare. Se cambi l'altezza dell'header, aggiorna i due valori. */ /* fallback vh per browser senza svh (pre-2022), poi svh dove c'è */ .sama-hero{min-height:calc(100vh - 127px) !important} .sama-hero{min-height:calc(100svh - 127px) !important} @media (max-width:1024px){ .sama-hero{min-height:calc(100vh - 70px) !important} .sama-hero{min-height:calc(100svh - 70px) !important} } .sama-scroll{ transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:10px; } .sama-scroll::after{ content:"";width:1px;height:44px;background:var(--sama-rosso); animation:sama-drip 2s var(--sama-ease) infinite; } @keyframes sama-drip{ 0%{transform:scaleY(0);transform-origin:top} 55%{transform:scaleY(1);transform-origin:top} 56%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } @media (prefers-reduced-motion:reduce){ .sama-scroll::after{animation:none} } /* ============================================================ 9. PULSANTE PLAY HERO — anelli pulsanti (effetto Fragrantini). Classe custom "sama-play" sul widget Icona. Gli anelli stanno su .elementor-icon (il cerchio, quadrato perfetto), NON sul wrapper del widget che è rettangolare (anelli ovali). ============================================================ */ .sama-play .elementor-icon{position:relative} .sama-play .elementor-icon::before, .sama-play .elementor-icon::after{ content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%; border:1px solid rgba(255,255,255,.6);pointer-events:none; animation:sama-pulse 2.4s var(--sama-ease) infinite; } .sama-play .elementor-icon::after{animation-delay:1.2s} @keyframes sama-pulse{ 0%{transform:scale(1);opacity:.9} 100%{transform:scale(1.9);opacity:0} } /* ============================================================ 10. SLIDER LOGHI — card bianche, loghi grigi -> colore in hover. Classe custom "sama-loghi" sul widget Carosello immagini. ============================================================ */ .sama-loghi .swiper-slide{ background:#fff;border-radius:12px;border:1px solid rgba(255,255,255,.25); padding:18px 24px;height:110px;display:flex;align-items:center;justify-content:center; } .sama-loghi .swiper-slide img{ max-height:100%;width:auto;object-fit:contain; filter:grayscale(1);opacity:.9;transition:filter .3s,opacity .3s; } .sama-loghi .swiper-slide:hover img{filter:none;opacity:1} @media (max-width:767px){ .sama-loghi .swiper-slide{height:92px} } /* frecce SOTTO il carosello, a sinistra (rif. Atlante/prototipo). !important: il CSS del widget carica dopo il child. */ .sama-loghi .elementor-image-carousel-wrapper{padding-bottom:74px} .sama-loghi .elementor-swiper-button{ top:auto !important;bottom:0 !important;transform:none !important; width:46px;height:46px; border:1px solid rgba(255,255,255,.45);border-radius:50%; background:transparent;color:#FFFFFF !important; display:flex;align-items:center;justify-content:center; transition:background .3s,color .3s,border-color .3s; } .sama-loghi .elementor-swiper-button-prev{left:0 !important;right:auto !important} .sama-loghi .elementor-swiper-button-next{left:56px !important;right:auto !important} .sama-loghi .elementor-swiper-button:hover{ background:#FFFFFF;border-color:#FFFFFF;color:var(--sama-rosso) !important; } .sama-loghi .elementor-swiper-button svg{width:16px;height:16px;fill:currentColor} /* ============================================================ 11. CARD HOVER — sollevamento con zoom foto per card categorie e news. Classe custom "sama-card" sul container della card. ============================================================ */ /* ============================================================ 11a. TEMPLATE ARTICOLO (Theme Builder Single) - meta "categoria + data" (widget Post Info): pillola rossa per la categoria (è l'unico link), data grigia — le chiavi tipografiche del widget non sopravvivono all'import - immagini nel contenuto: angoli arrotondati e centratura (il widget Post Content non ha questi controlli) ============================================================ */ .elementor-widget-post-info .elementor-icon-list-item{ font-family:"Archivo",Arial,sans-serif;font-weight:600; font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--sama-grigio); } .elementor-widget-post-info .elementor-icon-list-text{color:var(--sama-grigio)} /* la pillola rossa SOLO sui link di categoria (la data può essere un link anche lei: resta grigia semplice) */ .elementor-widget-post-info .elementor-icon-list-item a{ background:none;padding:0;border-radius:0; color:var(--sama-grigio) !important; transition:color .25s; } .elementor-widget-post-info .elementor-icon-list-item a:hover{color:var(--sama-rosso) !important} .elementor-widget-post-info .elementor-icon-list-item a[href*="/category/"]{ display:inline-block; background:var(--sama-rosso);color:#FFFFFF !important; font-size:11px;font-weight:700;letter-spacing:.2em; padding:6px 14px;border-radius:100px; transition:background .25s; } .elementor-widget-post-info .elementor-icon-list-item a[href*="/category/"]:hover{ background:var(--sama-rosso-scuro);color:#FFFFFF !important; } /* immagine in evidenza del template articolo: il crop a cover regge anche con Link "File multimediale" + Lightbox attivi (il tag che Elementor aggiunge rompeva altezza e object-fit). L'altezza la comanda QUI il child: 540/420/280. */ .elementor-widget-theme-post-featured-image a, .elementor-widget-theme-post-featured-image .elementor-widget-container{ display:block;width:100%; } .elementor-widget-theme-post-featured-image img{ width:100% !important; height:540px !important; object-fit:cover !important; border-radius:16px; display:block; } @media (max-width:1024px){ .elementor-widget-theme-post-featured-image img{height:420px !important} } @media (max-width:767px){ .elementor-widget-theme-post-featured-image img{height:280px !important} } .elementor-widget-theme-post-content p{margin-bottom:22px} .elementor-widget-theme-post-content strong{color:var(--sama-ink)} .elementor-widget-theme-post-content img{border-radius:12px} .elementor-widget-theme-post-content figure{margin:36px auto;text-align:center} .elementor-widget-theme-post-content figure img{margin-inline:auto} /* ============================================================ 11b. NEWS — card dei widget Posts/Archivio (skin "Cards"). Classe "sama-news-cards" sul widget. Stile card del prototipo: bordo, raggio 16, hover con sollevamento e titolo rosso, badge categoria a pillola rossa, paginazione brandizzata. ============================================================ */ .sama-news-cards article.elementor-post{ border:1px solid var(--sama-linea);border-radius:16px;overflow:hidden; transition:transform .4s var(--sama-ease),box-shadow .4s var(--sama-ease); } .sama-news-cards article.elementor-post:hover{ transform:translateY(-6px);box-shadow:0 26px 50px -25px rgba(0,0,0,.25); } .sama-news-cards .elementor-post__badge{ background:var(--sama-rosso) !important;border-radius:100px !important; font-family:"Archivo",Arial,sans-serif !important; font-size:10.5px !important;font-weight:700 !important; letter-spacing:.18em !important;text-transform:uppercase !important; } .sama-news-cards .elementor-post__title, .sama-news-cards .elementor-post__title a{ font-family:"Archivo",Arial,sans-serif;font-weight:700; transition:color .25s; } .sama-news-cards article.elementor-post:hover .elementor-post__title a{color:var(--sama-rosso)} .sama-news-cards .elementor-post__read-more{ color:var(--sama-rosso);font-family:"Archivo",Arial,sans-serif;font-weight:700; text-transform:uppercase;font-size:12px;letter-spacing:.14em; } .sama-news-cards .elementor-pagination{margin-top:40px} .sama-news-cards .elementor-pagination .page-numbers{ font-family:"Archivo",Arial,sans-serif;font-weight:700; padding:8px 14px;border-radius:10px; } .sama-news-cards .elementor-pagination .page-numbers.current{ background:var(--sama-rosso);color:#fff; } .sama-card{transition:transform .4s var(--sama-ease),box-shadow .4s var(--sama-ease)} .sama-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -25px rgba(0,0,0,.25)} .sama-card .sama-card-foto{overflow:hidden} .sama-card .sama-card-foto img{transition:transform .7s var(--sama-ease)} .sama-card:hover .sama-card-foto img{transform:scale(1.06)} /* titolo card -> rosso quando la card è in hover (prototipo) */ .sama-card h3.elementor-heading-title, .sama-card .elementor-widget-heading h3{transition:color .25s} .sama-card:hover h3.elementor-heading-title, .sama-card:hover h3.sama-desc-titolo{color:var(--sama-rosso) !important} /* ============================================================ 12. PAGINA PERFORMANCE — widget Contatore come nel prototipo. Il widget nativo centra tutto, non ha un controllo di allineamento e non permette di stilare il suffisso a parte; il suo CSS carica DOPO il child, quindi servono gli !important. - numeri e didascalie a sinistra - suffisso ("anni", "mln", "m²"...) piccolo e rosso accanto al numero ============================================================ */ .sama-kpi .elementor-counter-number-wrapper{justify-content:flex-start !important} .sama-kpi .elementor-counter-title{text-align:left !important} /* il widget centra dando flex-grow a prefisso e suffisso: qui si azzerano, cosi' il numero resta a sinistra */ .sama-kpi .elementor-counter-number-prefix{flex:0 0 auto !important;text-align:left !important} .sama-kpi .elementor-counter-number-suffix{flex:0 0 auto !important;text-align:left !important} .sama-kpi .elementor-counter-number-suffix{ color:var(--sama-rosso) !important; font-size:.55em !important; font-stretch:100%; margin-left:5px; align-self:flex-end; padding-bottom:.12em; flex:0 0 auto; } /* ============================================================ 13) "sama-cf7" - stile dei moduli Contact Form 7 nelle card bianche (Private Label, e in futuro Contatti). Da applicare come classe CSS al contenitore Elementor che ospita lo shortcode CF7. Le classi fc-* stanno nel template del form (file modulo-cf7-private-label.txt nel progetto). ============================================================ */ .sama-cf7 .fc-campi{display:grid;grid-template-columns:1fr 1fr;gap:12px} .sama-cf7 .fc-campo{display:flex;flex-direction:column;gap:5px} .sama-cf7 .fc-campo.largo{grid-column:1 / -1} .sama-cf7 .fc-campo label{font-family:Archivo,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5C6360} .sama-cf7 .fc-campo .wpcf7-form-control-wrap{display:block} .sama-cf7 .fc-campo input[type="text"], .sama-cf7 .fc-campo input[type="email"], .sama-cf7 .fc-campo input[type="tel"], .sama-cf7 .fc-campo textarea{width:100%;border:1.5px solid #E8E8E5;border-radius:10px;padding:11px 14px;font:inherit;font-size:14.5px;color:#161616;background:#fff;outline:none;transition:border-color .3s} .sama-cf7 .fc-campo input:focus, .sama-cf7 .fc-campo textarea:focus{border-color:var(--sama-rosso,#E30613)} .sama-cf7 .fc-campo textarea{resize:vertical;height:100px;max-height:100px;min-height:60px} .sama-cf7 .fc-privacy{font-size:12px;color:#5C6360} .sama-cf7 .fc-privacy label{font-family:Figtree,sans-serif;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#5C6360} .sama-cf7 .fc-privacy a{color:var(--sama-rosso,#E30613);text-decoration:underline} .sama-cf7 .fc-privacy .wpcf7-list-item{margin:0} .sama-cf7 .fc-privacy input[type="checkbox"]{width:16px;height:16px;margin-right:8px;vertical-align:-3px;accent-color:var(--sama-rosso,#E30613)} .sama-cf7 .fc-invia{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:4px;background:var(--sama-rosso,#E30613);color:#fff;border:0;border-radius:100px;padding:14px 26px;font-family:Archivo,Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .3s,transform .3s var(--sama-ease,cubic-bezier(.22,1,.36,1))} .sama-cf7 .fc-invia:hover{background:#C00511;transform:translateY(-2px)} .sama-cf7 .wpcf7-spinner{margin:8px auto 0;display:block} .sama-cf7 .wpcf7-not-valid-tip{font-size:11.5px;color:var(--sama-rosso,#E30613);margin-top:4px} .sama-cf7 .wpcf7-response-output{border-radius:10px;font-size:13px;padding:10px 14px;margin:14px 0 0;border-color:#E8E8E5} @media (max-width:600px){.sama-cf7 .fc-campi{grid-template-columns:1fr}} /* ============================================================ SCHEDA PRODOTTO (template Theme Builder "Singolo prodotto") Stili degli shortcode dello snippet "SAMA - Scheda prodotto" e dell'immagine in evidenza: pill plus-value, tabella valori nutrizionali, icone dei titoli schede (SVG in background: Elementor butta via i tag svg nei titoli), levitazione+ombra e lente lightbox della foto (il DOM ottimizzato di Elementor non ha .elementor-widget-container, si lavora sul widget). ============================================================ */ .sama-plus{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .sama-plus span{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--sama-linea,#E8E8E5);border-radius:100px;padding:7px 14px;font-family:Archivo,Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sama-grigio,#5C6360)} .sama-plus span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sama-rosso,#E30613)} .sama-plus span.pro{background:var(--sama-rosso,#E30613);border-color:var(--sama-rosso,#E30613);color:#fff} .sama-plus span.pro::before{background:#fff} .sama-ingredienti p{font-size:14.5px;color:#3D423F;line-height:1.7;margin:0 0 10px} .sama-nutri{font-size:14px} .sama-nutri .capo{font-family:Archivo,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sama-grigio,#5C6360);padding-bottom:8px} .sama-nutri .riga{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--sama-linea,#E8E8E5)} .sama-nutri .riga:last-child{border-bottom:none} .sama-nutri .k{color:var(--sama-grigio,#5C6360)} .sama-nutri .v{font-weight:600;text-align:right;white-space:nowrap} .sama-correlati-titolo{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:17px;margin:30px 0 2px;text-align:center} .sama-nutri-nota{font-size:13px;color:var(--sama-grigio,#5C6360);margin-top:10px} .sama-foto-prodotto,.elementor-widget-theme-post-featured-image{position:relative;cursor:zoom-in;display:inline-block} .sama-foto-prodotto::after,.elementor-widget-theme-post-featured-image::after{content:"";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:62%;height:26px;background:radial-gradient(ellipse at center,rgba(0,0,0,.16),transparent 68%);animation:sama-ombra 4.5s ease-in-out 1.4s infinite alternate;pointer-events:none} .sama-foto-prodotto img,.elementor-widget-theme-post-featured-image img{position:relative;z-index:1;animation:sama-entra .9s var(--sama-ease,cubic-bezier(.22,1,.36,1)) .15s backwards, sama-levita 4.5s ease-in-out 1.4s infinite alternate} @keyframes sama-entra{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}} @keyframes sama-levita{from{transform:translateY(0)}to{transform:translateY(-12px)}} @keyframes sama-ombra{from{opacity:1}to{opacity:.55;width:56%}} @media (prefers-reduced-motion:reduce){.sama-foto-prodotto img,.sama-foto-prodotto::after,.elementor-widget-theme-post-featured-image::after{animation:none}} .elementor-widget-theme-post-featured-image a{position:relative;display:inline-block} .elementor-widget-theme-post-featured-image a::after{content:"";position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--sama-linea,#E8E8E5);background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 17%27 fill=%27none%27 stroke=%27%23e30613%27 stroke-width=%271.8%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%277%27 cy=%277%27 r=%275%27/%3E%3Cpath d=%27M11 11 L15.5 15.5 M7 4.6 v4.8 M4.6 7 h4.8%27/%3E%3C/svg%3E") center/16px 16px no-repeat;box-shadow:0 10px 24px -12px rgba(0,0,0,.3);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;z-index:2} .elementor-widget-theme-post-featured-image:hover a::after{opacity:1;transform:translateY(0)} .elementor-lightbox .elementor-lightbox-image{border-radius:14px!important;background:#fff} .sama-scheda-icona{display:inline-block;vertical-align:-5px;margin-right:10px;width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 26 26%27 fill=%27none%27 stroke=%27%23e30613%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M13 3 C9 6 6.5 9.5 6.5 14 a6.5 6.5 0 0 0 13 0 C19.5 9.5 17 6 13 3 Z%27/%3E%3Cpath d=%27M13 21 v-8 M13 13 c-1.6,-1 -2.6,-2.4 -3,-4%27/%3E%3C/svg%3E") center/26px 26px no-repeat} .e-con:has(> .elementor-widget-shortcode .sama-nutri) .sama-scheda-icona{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 26 26%27 fill=%27none%27 stroke=%27%23e30613%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%275%27 y=%273.5%27 width=%2716%27 height=%2719%27 rx=%272.5%27/%3E%3Cpath d=%27M9 8.5 h8 M9 12.5 h8 M9 16.5 h4.5%27/%3E%3C/svg%3E")} .sama-desc-yoast{margin-top:18px;padding-top:16px;border-top:1px dashed var(--sama-linea,#E8E8E5)} .sama-desc-yoast h3.sama-desc-titolo{display:flex;align-items:center;gap:10px;font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.3;letter-spacing:.02em;margin:0 0 12px;color:var(--sama-ink,#161616);transition:color .25s} .sama-desc-yoast .sama-desc-titolo svg{width:26px;height:26px;flex:none} /* CTA scheda prodotto: arrow-link generato dallo shortcode [sama_contatta_prodotto] (il markup replica i titoli-freccia; qui solo la tipografia che nei widget arriva dalle impostazioni Elementor) */ .sama-arrow-prodotto{text-align:center} .sama-arrow-prodotto h3.elementor-heading-title{margin:0;font-family:Archivo,Arial,sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2} /* ============================================================ ARCHIVIO PRODOTTI (template Products Archive: shop + categorie) Chips, griglia card SAMA e paginazione generate dagli shortcode [sama_archivio_chips] e [sama_archivio_griglia] dello snippet. ============================================================ */ .sama-chips{display:flex;flex-wrap:wrap;gap:10px} .sama-chips a.chip{border:1.5px solid var(--sama-linea,#E8E8E5);background:#fff;border-radius:100px;padding:9px 18px;font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sama-grigio,#5C6360);transition:all .3s} .sama-chips a.chip:hover{border-color:#f3b7bc;color:var(--sama-rosso,#E30613)} .sama-chips a.chip.attiva{background:var(--sama-rosso,#E30613);border-color:var(--sama-rosso,#E30613);color:#fff} .sama-chips a.chip small{font-weight:600;opacity:.65;margin-left:5px;letter-spacing:0} .sama-archivio-conta{font-family:Archivo,Arial,sans-serif;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sama-grigio,#5C6360)} .sama-archivio-vuoto{margin-top:16px;color:var(--sama-grigio,#5C6360)} .sama-griglia{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px} .sama-prd-card{flex:0 0 calc(25% - 17px);display:flex;flex-direction:column;text-align:center;background:#fff;border:1px solid var(--sama-linea,#E8E8E5);border-radius:16px;padding:26px 20px 22px;box-shadow:0 18px 44px -30px rgba(0,0,0,.16);transition:transform .35s var(--sama-ease,cubic-bezier(.22,1,.36,1)),box-shadow .35s var(--sama-ease,cubic-bezier(.22,1,.36,1)),border-color .35s} @media (max-width:1024px){.sama-prd-card{flex-basis:calc(33.33% - 15px)}} @media (max-width:800px){.sama-prd-card{flex-basis:calc(50% - 11px)}} @media (max-width:480px){.sama-prd-card{flex-basis:100%}} .sama-prd-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -28px rgba(0,0,0,.24);border-color:#f3b7bc} .sama-prd-card .foto{height:190px;display:flex;align-items:center;justify-content:center} .sama-prd-card .foto img{max-height:100%;max-width:100%;width:auto;object-fit:contain} .sama-prd-card .cat{font-family:Archivo,Arial,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sama-grigio,#5C6360);margin-top:14px} .sama-prd-card h3{font-family:Archivo,Arial,sans-serif;font-weight:700;font-size:16.5px;line-height:1.3;margin:6px 0 0;color:var(--sama-ink,#161616);transition:color .25s} .sama-prd-card h3 .rosso{display:block} .sama-prd-card:hover h3{color:var(--sama-rosso,#E30613)} .sama-prd-card .vedi{margin:12px auto 0;font-family:Archivo,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sama-rosso,#E30613);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s var(--sama-ease,cubic-bezier(.22,1,.36,1))} .sama-prd-card .vedi::after{content:"\2192";margin-left:7px} .sama-prd-card:hover .vedi{opacity:1;transform:none} .sama-paginazione{display:flex;justify-content:center;gap:8px;margin-top:38px} .sama-paginazione .page-numbers{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--sama-linea,#E8E8E5);background:#fff;display:flex;align-items:center;justify-content:center;font-family:Archivo,Arial,sans-serif;font-size:13px;font-weight:700;color:var(--sama-grigio,#5C6360);transition:all .3s;text-decoration:none} .sama-paginazione a.page-numbers:hover{border-color:var(--sama-rosso,#E30613);color:var(--sama-rosso,#E30613)} .sama-paginazione .page-numbers.current{background:var(--sama-rosso,#E30613);border-color:var(--sama-rosso,#E30613);color:#fff} /* griglia filtrata delle pagine brand / linea professionale */ .sama-griglia-filtro .sama-archivio-conta{margin-top:14px} /* correlati nella scheda prodotto: 3 card per riga (i blocchi sono da 3), niente colonna fantasma a destra; sotto i 1024px valgono le regole comuni */ @media (min-width:1025px){ .sama-blocco-correlati .sama-prd-card{flex-basis:calc(33.33% - 15px)} } /* ============================================================ CONTATTI PRODOTTO (v2.20.0) - pagina "Richiedi informazioni prodotto": card riepilogo (shortcode [sama_contatti_riepilogo]) e form CF7 dentro la sezione grigia con classe sama-cf7. La scatola bianca e' il form stesso (.wpcf7), cosi' se il prodotto non arriva in GET la pagina resta comunque in piedi. ============================================================ */ /* card riepilogo prodotto nell'hero (foto da ?immagine=, nome da ?prodotto=) */ .sama-ctp-card{position:relative;background:#fff;border:1px solid var(--sama-linea,#E8E8E5);border-radius:16px;padding:28px 26px;text-align:center;box-shadow:0 24px 54px -30px rgba(0,0,0,.18);max-width:360px;margin-inline:auto;width:100%} .sama-ctp-card::before{content:"";position:absolute;inset:18px;margin:auto;width:min(220px,80%);aspect-ratio:1;background:var(--sama-rosso-soft,#FDECED);border-radius:50%;opacity:.55} .sama-ctp-card .eti{position:relative;display:block;font-family:Archivo,Arial,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sama-grigio,#5C6360)} .sama-ctp-card img{position:relative;max-height:220px;width:auto;margin:14px auto 0} .sama-ctp-card .nome{position:relative;font-family:Archivo,Arial,sans-serif;font-size:19px;font-weight:700;line-height:1.3;color:var(--sama-ink,#161616);margin-top:14px} /* link "Torna al prodotto" sotto il lead */ .sama-ctp-indietro{display:inline-flex;align-items:center;gap:8px;font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sama-grigio,#5C6360);text-decoration:none;transition:color .3s} .sama-ctp-indietro svg{width:15px;height:11px;display:block} .sama-ctp-indietro:hover{color:var(--sama-rosso,#E30613)} /* scatola bianca: e' il form CF7 dentro la sezione grigia sama-cf7 */ .sama-cf7 .wpcf7{max-width:860px;margin-inline:auto;background:#fff;border:1px solid var(--sama-linea,#E8E8E5);border-radius:16px;padding:clamp(26px,4vw,44px);box-shadow:0 18px 44px -30px rgba(0,0,0,.16)} .sama-cf7-nota{font-size:12.5px;color:var(--sama-grigio,#5C6360);margin:0 0 18px} /* griglia campi: 2 colonne, .tutto occupa tutta la riga */ .sama-cf7-campi{display:grid;grid-template-columns:1fr 1fr;gap:14px} .sama-cf7-campi>div{min-width:0} .sama-cf7-campi .tutto{grid-column:1 / -1} @media (max-width:600px){.sama-cf7-campi{grid-template-columns:1fr}} .sama-cf7 .wpcf7-form-control-wrap{display:block} .sama-cf7 input[type=text],.sama-cf7 input[type=email],.sama-cf7 input[type=tel],.sama-cf7 textarea{width:100%;padding:13px 16px;border:1px solid var(--sama-linea,#E8E8E5);border-radius:12px;font-size:14px;color:var(--sama-ink,#161616);background:#fff;box-shadow:none} .sama-cf7 input:focus,.sama-cf7 textarea:focus{outline:none;border-color:var(--sama-rosso,#E30613)} /* altezza bloccata a 100px, niente maniglia di ridimensionamento */ .sama-cf7 textarea{height:100px;min-height:100px;max-height:100px;resize:none} /* campo prodotto precompilato dal GET: evidenziato in rosa */ .sama-cf7 input[name="prodotto"]{background:var(--sama-rosso-soft,#FDECED);border-color:#F3B7BC;font-weight:600} /* frase guida sopra la dropzone allegati */ .sama-cf7-allegati-nota{font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sama-grigio,#5C6360);margin:4px 0 8px} /* dropzone del plugin Drag and Drop Multiple File Upload for CF7 */ .sama-cf7 .codedropz-upload-handler{border:2px dashed var(--sama-bordo-search,#C4C4C4);border-radius:14px;background:#fff;transition:border-color .3s,background .3s} .sama-cf7 .codedropz-upload-handler:hover,.sama-cf7 .codedropz-dragover .codedropz-upload-handler{border-color:var(--sama-rosso,#E30613);background:var(--sama-rosso-soft,#FDECED)} .sama-cf7 .codedropz-upload-inner h3{font-family:Archivo,Arial,sans-serif;font-size:14px;font-weight:700;color:var(--sama-ink,#161616)} .sama-cf7 .codedropz-upload-inner{font-size:12.5px;color:var(--sama-grigio,#5C6360)} .sama-cf7 .codedropz-upload-inner a.cd-upload-btn,.sama-cf7 .dnd-upload-counter b{color:var(--sama-rosso,#E30613)} /* privacy e invio */ .sama-cf7-privacy{margin:18px 0 0;font-size:13px;color:var(--sama-grigio,#5C6360)} .sama-cf7-privacy input[type=checkbox]{width:16px;height:16px;accent-color:var(--sama-rosso,#E30613)} .sama-cf7-privacy a{color:var(--sama-rosso,#E30613);font-weight:600} .sama-cf7 .wpcf7-list-item{margin-left:0} /* !important: il kit di Elementor stila anche input[type=submit], come i