/*! * Componenti Fausto Sari — CSS ex tema child (saren-child/style.css). * * POSIZIONE NELLA CASCATA — importante. * Nel vecchio setup padre+child l'ordine nel era: * 1. css/plugins.css * 2. saren-child/style.css <- queste regole * 3. saren/style.css (il tema padre VINCEVA sul child) * Per questo diverse regole qui sotto usano !important o selettori molto * specifici: dovevano battere un foglio caricato DOPO. * * Nel tema unificato il file resta in quello stesso slot: inc/static.php lo * accoda con dipendenza da 'plugins' e rende 'style' (style.css del tema) * dipendente da lui. Ordine identico a prima => reso identico a prima. * Le regole scritte dopo il 27 lug 2026 vanno invece in fs-custom.css, che * viene stampato in coda al (priorità 9999). */ /* =Theme customization starts here -------------------------------------------------------------- */ /* ============================================================== Card prodotto — layout unico Foto sopra / titolo sotto a sinistra / preferiti a destra allineato all'altezza del titolo. Le impostazioni dei widget sono forzate in functions.php (fs26_uniform_product_cards); qui solo l'allineamento fine. NB: questo foglio viene caricato PRIMA dello style del tema padre, quindi serve specificita'/!important sui conflitti. ============================================================== */ /* Foto sempre sopra, fascia meta sempre sotto: neutralizza l'opzione "Metas Position: Top" salvata in alcuni widget (genera flex-direction: column-reverse nel CSS di Elementor). */ .saren--single--product .saren--product--wrap:not(.product--box--wrap) { flex-direction: column !important; } /* Riga del titolo: titolo a sx, preferiti a dx, stessa riga. Il bottone torna nel flusso flex (il tema lo posiziona in absolute con top fisso, che non resta allineato al titolo). */ .saren--single--product .saren--product--meta:has(.saren--product--actions) { align-items: center !important; } .saren--single--product .saren--product--meta .saren--product--main { width: auto !important; flex: 1 1 auto; min-width: 0; } .saren--single--product .saren--product--meta .saren--product--actions { position: static !important; width: auto !important; } /* Il contenitore extras (categorie/tag) vuoto non deve occupare una riga sotto il titolo. */ .saren--single--product .saren--product--meta .saren--product--extras:not(:has(*)) { display: none; } /* ============================================================== SETTIMANA 1 — Quick win dall'audit UX/UI (lug 2026) ============================================================== */ /* -------------------------------------------------------------- 2. Scheda prodotto: gerarchia CTA. "Prenota un Appuntamento" (widget b054f10) da link sottolineato a bottone primario pieno; "Richiedi Maggiori Informazioni" (widget 4bd5778) a bottone secondario outline. Su mobile entrambi full-width e con area tocco >= 48px. -------------------------------------------------------------- */ .single-product .elementor-element-b054f10 .pe--button, .single-product .elementor-element-4bd5778 .pe--button { border-bottom: 0 !important; } .single-product .elementor-element-b054f10 .pe--button--wrapper a, .single-product .elementor-element-4bd5778 .pe--button--wrapper a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 34px; border: 1px solid #1a1a1a; text-decoration: none !important; box-shadow: none !important; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; line-height: 1.2; transition: background-color 0.25s ease, color 0.25s ease; } .single-product .elementor-element-b054f10 .pe--button--wrapper a { background: #1a1a1a; color: #ffffff; } .single-product .elementor-element-b054f10 .pe--button--wrapper a:hover, .single-product .elementor-element-b054f10 .pe--button--wrapper a:focus-visible { background: #ffffff; color: #1a1a1a; } .single-product .elementor-element-4bd5778 .pe--button--wrapper a { background: transparent; color: #1a1a1a; } .single-product .elementor-element-4bd5778 .pe--button--wrapper a:hover, .single-product .elementor-element-4bd5778 .pe--button--wrapper a:focus-visible { background: #1a1a1a; color: #ffffff; } /* niente sottolineatura animata del tema sui due bottoni */ .single-product .elementor-element-b054f10 .pb--underlined .pb__main::after, .single-product .elementor-element-4bd5778 .pb--underlined .pb__main::after { display: none !important; } @media (max-width: 767px) { .single-product .elementor-element-b054f10 .pe--button--wrapper a, .single-product .elementor-element-4bd5778 .pe--button--wrapper a, .single-product .fs-wa-btn { width: 100%; } } /* Bottone WhatsApp (compare solo se FS26_WHATSAPP e' configurato) */ .single-product .fs-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; margin-top: 10px; padding: 14px 34px; border: 1px solid #1a8f4c; color: #147a3f; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; line-height: 1.2; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; } .single-product .fs-wa-btn:hover, .single-product .fs-wa-btn:focus-visible { background: #1a8f4c; color: #ffffff; } /* -------------------------------------------------------------- 3. Header degli archivi marchio (/marchio//) -------------------------------------------------------------- */ .fs-brand-header { width: 100%; max-width: 760px; margin: 24px auto 40px; text-align: center; } .fs-brand-eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; opacity: 0.55; margin: 0 0 10px; } .fs-brand-title { margin: 0 0 10px; line-height: 1.1; } .fs-brand-count { font-size: 14px; opacity: 0.7; margin: 0 0 14px; } .fs-brand-desc { font-size: 16px; line-height: 1.65; margin: 0 auto 18px; max-width: 62ch; } .fs-brand-cta-row { margin: 0; } .fs-brand-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 30px; background: #1a1a1a; color: #ffffff !important; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; text-decoration: none !important; transition: opacity 0.25s ease; } .fs-brand-cta:hover, .fs-brand-cta:focus-visible { opacity: 0.85; } /* -------------------------------------------------------------- 4. Messaggi di validazione dei form in rosso ("Questo è obbligatorio" e simili), su tutte le pagine. I form del sito sono Mautic (widget intmau); teniamo anche i selettori Elementor per eventuali form futuri. -------------------------------------------------------------- */ .mauticform-errormsg, .mauticform-error { color: #d63638 !important; font-weight: 500; } .mauticform-has-error input, .mauticform-has-error textarea, .mauticform-has-error select { border-color: #d63638 !important; } .elementor-message.elementor-message-danger, .elementor-field-group .elementor-message-danger, .elementor-form .elementor-message-danger { color: #d63638 !important; font-weight: 500; } .elementor-field-group.elementor-error .elementor-field { border-color: #d63638 !important; } /* -------------------------------------------------------------- 5. Mega menu "Sposa" (template Elementor 16778 renderizzato nel footer, aperto dal JS fs26-mega-menu sotto l'header al passaggio sulla voce SPOSA). Solo desktop. -------------------------------------------------------------- */ @media (min-width: 1025px) { .fs-mega { position: fixed; left: 0; right: 0; top: var(--fs-mega-top, 96px); background: #ffffff; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14); border-top: 1px solid rgba(0, 0, 0, 0.06); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; z-index: 990; max-height: calc(100vh - 140px); overflow: auto; } .fs-mega.fs-mega-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.25s ease; } .fs-mega__inner { max-width: 1360px; margin: 0 auto; } .fs-mega a { color: #1a1a1a; } .fs-mega .elementor-icon-list-item a:hover { opacity: 0.6; } } @media (max-width: 1024.98px) { .fs-mega { display: none !important; } } /* -------------------------------------------------------------- 5-bis. Voci con sottomenu WordPress normale (oggi "Atelier"). Il JS fs26-mega-menu costruisce per ognuna un pannello .fs-mega.fs-mega--auto in fondo al body e ci sposta dentro il .sub-menu: fascia bianca, ombra, animazione e header che si schiarisce arrivano quindi gratis dalle regole qui sopra, le stesse del mega "Sposa". Perche' spostare il nodo invece di posizionarlo dov'era: finche' il .sub-menu resta dentro al menu qualcosa nel tema continua a riposizionarlo, e nemmeno position:fixed con top !important lo tiene sotto l'header (provato: restava a fondo pagina). E' lo stesso motivo per cui il mega di "Sposa" e' stampato nel footer. Qui sotto si spegne solo il vestito che il tema dava al sottomenu quando stava nel menu (scatoletta scura in absolute, nascosta) e si mettono le voci su UNA riga. (2 ago 2026) -------------------------------------------------------------- */ @media (min-width: 1025px) { /* La fascia parte incolonnata con la voce di menu da cui esce (Atelier), non con il logo: --fs-sub-x e' la x di quella voce, misurata dal JS a ogni apertura e a ogni resize. Il fallback 20px vale solo se il JS non gira. max-width/margin vanno annullati, altrimenti resta la gabbia centrata a 1360px del mega "Sposa" e il padding non incolonna niente. */ .fs-mega--auto .fs-mega__inner { max-width: none; margin: 0; padding: 0 20px 0 var(--fs-sub-x, 20px); } /* ATTENZIONE — opacity/visibility NON vanno qui. Il tema tiene il .sub-menu nascosto con opacity:0 e visibility:hidden, e viene naturale rimetterlo visibile in questa regola. Ma un figlio `visibility:visible` dentro un genitore `visibility:hidden` TORNA visibile e, soprattutto, torna a catturare il mouse: la fascia invisibile resta stesa sotto l'header e basta avvicinarsi al menu perche' il suo mouseenter apra il pannello. Va scoperta solo a pannello aperto, nella regola qui sotto. */ .fs-mega--auto .fs-mega__voci { position: static; display: flex; flex-direction: row; align-items: center; /* 28px = lo stesso gap fra le voci del menu in alto. */ gap: 28px; width: auto; min-width: 0; max-width: none; margin: 0; /* Solo verticale: in orizzontale incolonna il padding dell'inner. Le voci non hanno padding ne' margin propri, come nel menu. */ padding: 22px 0; list-style: none; background: none; box-shadow: none; border: 0; border-radius: 0; transform: none; white-space: nowrap; } /* Il pannello chiuso non deve esistere per il mouse, nemmeno di striscio. */ .fs-mega--auto:not(.fs-mega-open) { pointer-events: none; } .fs-mega--auto.fs-mega-open .fs-mega__voci { opacity: 1; visibility: visible; } .fs-mega--auto .fs-mega__voci > li { margin: 0; padding: 0; white-space: nowrap; } /* Stessi valori misurati sulle voci del menu in alto: 14px, General Sans 400, interlinea 20px, nessun padding e nessun margine. */ .fs-mega--auto .fs-mega__voci > li > a { display: inline-block; padding: 0; margin: 0; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: normal; color: #1a1a1a; white-space: nowrap; transition: opacity 0.2s ease; } .fs-mega--auto .fs-mega__voci > li > a:hover { opacity: 0.6; } /* La voce nel menu non mostra il "+": "Sposa" non ce l'ha. */ .menu--horizontal > li.menu-item-has-children > .st--wrap { display: none; } }