/* ========================================= SHOPTIMIZER BB CHILD — Overrides (Phase 1) Goal: Full width shell + consistent gutters Wrappers: - #page.hfeed.site - header#masthead.site-header - #content.site-content - footer.site-footer (Shoptimizer) ========================================= */ /* 0) Safety: prevent horizontal scroll from layout */ html, body { overflow-x: clip; } /* I due globali `button` e `.button` NON hanno piu' !important, ed e' una scelta misurata, non un ripulisti. Il problema: `button { color:#fff !important }` schiacciava anche i bottoni "a testo" e i link-bottone, che non hanno un fondo scuro dietro. Una volta ha prodotto un bottone BIANCO SU BIANCO (la "lista d'attesa" della PDP), e ogni componente che voleva un bottone nudo ha dovuto scriversi un'eccezione: le quattro qui sotto sono nate tutte per combattere questa riga. Prima di togliere l'!important l'ho MISURATO, riscrivendo la regola dentro il foglio gia' caricato (via CDP, senza toccare file) su 10 pagine — home, prodotto, carrello, account, classics, bottega, scuola, accessori, ricerca, catalogo — piu' i pannelli aperti (carrello, club, menu, cerca, dettagli): 82 bottoni visibili in tutto. Cambia UN SOLO elemento, `.close-drawer`, che e' 0x0 e fuori schermo (un residuo di Shoptimizer attaccato al body). Nessun bottone vero si muove: il nero dei bottoni pieni non viene da qui, ma dal kit Elementor (`.elementor-kit-6 button`), che questa regola duplicava. Cioe': l'!important non proteggeva niente e rompeva qualcosa. La regola resta come rete di sicurezza se un domani il kit Elementor cambiasse, ma senza piu' la clava. Le quattro eccezioni restano dove sono: ora difendono dal kit Elementor, non piu' da noi stessi. */ button { background-color: var(--bb-bg-dark); color: var(--bb-text-light); } /* [NEW-222 / GLB-05] I PULSANTI PARLANO IN MAIUSCOLO, OVUNQUE. Fino a qui il maiuscolo lo metteva ogni componente per conto suo: cart.css lo scrive cinque volte, header, account, offcanvas altrettante. Funziona finche' qualcuno si ricorda di scriverlo, e infatti due bottoni non lo avevano. CENSITO PRIMA DI TOCCARE, su dodici pagine e a due larghezze (1440 e 390), contando ogni bottone vero, ogni link vestito da bottone e ogni campo di invio. Fuori dal maiuscolo ce n'erano cinque in tutto il sito: - "Accedi" e "Registrati" (moduli WooCommerce dell'area account) — questi erano il difetto: minuscoli a schermo; - "FILTRA E ORDINA" e "RICHIEDI INFORMAZIONI" — gia' scritti maiuscoli a mano nel testo, quindi giusti per caso: bastava che una traduzione li scrivesse normali e sarebbero scesi anche loro; - la "×" di chiusura della vecchia Bottega, che e' un simbolo. Sulle pagine editoriali (Passport, About, Repair, Scuola, Bottega) di bottoni in minuscolo non ce n'e' nessuno: questa regola non le tocca. Il `body` davanti non e' scaramanzia: l'unica regola che parlava di text-transform su quei bottoni era `button, select { text-transform: none }` (normalize), che pesa quanto `button` da solo — senza `body` avrebbe vinto chi si carica per ultimo, cioe' il caso. `.elementor-button` e' dentro per volonta' di Fabio (30/09), e non cambia niente a schermo. Cercati in pagina invece di darlo per scontato: di .elementor-button ne esistono DUE in tutto il sito, e stanno tutti e due su /repair-service/ — un link "CONTATTACI" (oggi nascosto) e il bottone "Invia" del modulo. Erano gia' maiuscoli a schermo, e restano tali. Su home, About, Contatti, Classics, Scuola, Bottega e Passport non ce n'e' nessuno. ⚠ Avevo scritto qui che erano "gia' tutti maiuscoli, verificato su Passport, About, Repair, Scuola e Bottega": mezza frase falsa: su quelle pagine non ce n'erano affatto, quindi non avevo verificato niente. Il valore della regola e' per il futuro — un bottone nuovo disegnato in Elementor nasce giusto senza che nessuno debba ricordarsene. */ body button, body .button, body input[type="submit"], body input[type="button"], body .bb-cta, body .elementor-button { text-transform: uppercase; } /* [NEW-255 / ACC-14] OGNI CAMPO DATA IN NERO, OVUNQUE (Fabio, 30/09). Il grigio era quello del campo con la data GIA' COMPILATA, nel pannello "modifica informazioni personali". Non si riproduce in Chrome su Windows, dove quel campo e' nero comunque: lo fanno i browser WebKit, che disegnano il contenuto di input[type=date] con pezzi propri — ::-webkit-datetime-edit e compagnia — e li schiariscono per conto loro, ignorando il `color` del campo. Per questo non basta dare un colore all'input: i pezzi vanno nominati uno per uno. Sta QUI e non in account.css perche' Fabio ha chiesto ogni campo data, non solo quello dell'account: oggi e' l'unico, ma un campo data nuovo da qualche altra parte nascerebbe gia' giusto. */ input[type="date"], input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-year-field { color: var(--bb-fg); opacity: 1; } /* Qty buttons in cart offcanvas — transparent, no override */ button.bb-cart-qty-btn { background-color: transparent !important; color: var(--bb-fg) !important; } /* PDP excerpt expand chevron — transparent, no override */ button.bb-pdp-excerpt__toggle { background-color: transparent !important; color: var(--bb-fg) !important; } /* PDP swatch scroll arrows — chevron nudo: reset totale contro gli stili button globali (niente sfondo/bordo/cerchietto), solo il chevron scuro */ button.bb-pdp-swatches__nav { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; color: var(--bb-fg) !important; border: none !important; border-radius: 0 !important; padding: 0 !important; min-width: 0 !important; box-shadow: none !important; text-shadow: none !important; } button.bb-pdp-swatches__nav:hover { background: transparent !important; color: var(--bb-fg) !important; } /* stesso trattamento del globale `button` qui sopra, stessa misura */ .button { background-color: var(--bb-bg-dark); color: var(--bb-text-light); } /* 1) Global shell */ #page.hfeed.site { width: 100%; } /* 2) Header: full width background + centered content */ header#masthead.site-header { width: 100%; background: var(--bb-bg); color: var(--bb-fg); } /* Shoptimizer wrappers inside header (common) — MA NON la riga main-header. */ header#masthead.site-header .col-full:not(.main-header) { max-width: var(--bb-max) !important; margin-inline: auto !important; padding-inline: var(--bb-gutter) !important; } /* GLB-06 / Bottega: la riga main-header è a PIENA LARGHEZZA (niente cap a --bb-max, niente margin auto): i blocchi menu (sx) e carrello/funzioni (dx) arrivano a ~10px dal bordo laterale a ogni risoluzione. Questa regola sta qui (99-overrides, alta specificità) perché era proprio la riga sopra a centrare l'header a 1720px. */ header#masthead.site-header .main-header.col-full { max-width: 100% !important; width: 100% !important; margin-inline: 0 !important; padding-inline: var(--bb-header-gutter) !important; box-sizing: border-box !important; } /* 3) Main content: full width + centered inner */ #content.site-content { width: 100%; padding-inline: var(--bb-gutter); padding-top: 18px; padding-bottom: 28px; } /* Center first-level content blocks (pages/blog/editorial) */ #content.site-content>* { max-width: var(--bb-max); margin-inline: auto; } /* Woo pages: avoid accidentally boxing complex wrappers */ body.woocommerce #content.site-content>* { max-width: none; } /* 4) Footer (Shoptimizer): full width background + centered content */ footer.site-footer, footer.copyright { width: 100%; background: var(--bb-bg-dark) !important; color: var(--bb-text-light) !important; border-top: var(--bb-line-width) solid var(--bb-line); } /* FOOT-01: footer a TUTTA LARGHEZZA (come header GLB-06). Shoptimizer .col-full e box-sizing:content-box + max-width:1170px + margin:auto → serve override completo (border-box + width/max-width 100% + margin 0) per portare i contenuti ai bordi, allineati al gutter dell'header. */ footer.site-footer .col-full { box-sizing: border-box !important; max-width: 100% !important; width: 100% !important; margin-inline: 0 !important; padding-inline: var(--bb-header-gutter) !important; padding-top: 18px !important; padding-bottom: 22px !important; } /* FOOT-02: campo email/newsletter del footer senza angoli arrotondati (residuo border-radius che dava le "curvette" laterali). */ footer.site-footer input[type="email"], footer.site-footer input[type="text"], footer.site-footer input[type="tel"], footer.site-footer .mc4wp-form input:not([type="submit"]), footer.copyright input[type="email"] { border-radius: 0 !important; } /* Desktop: first footer widget = double width (2fr vs 1fr each for the other 4) */ @media (min-width: 993px) { footer.site-footer .col-full .widget:first-child { flex: 2 !important; /* FTR-06 (b) — oltre il 1440 la colonna del Club smette di crescere. Roberta guarda il sito da un 27 pollici (2560) e vede un vuoto fra "Join the Club" e "Il Brand" che a 1440 non c'e'. MISURATO prima di decidere, sulle quattro larghezze: viewport scatola Club il contenuto finisce a vuoto che si vede 1280 336 px 328 px 78 px 1440 383 px 352 px 106 px 1920 526 px 352 px 262 px 2560 739 px 352 px 475 px Il contenuto del Club finisce SEMPRE a 352px, perche' il suo logo e' largo 320px fissi. A crescere e' solo la sua SCATOLA, che con `flex: 2` si prende due settimi di una riga sempre piu' larga: il vuoto non e' spaziatura, e' colonna vuota. ⚠ Non era il `gap`: quello e' gia' fermo a 56px (`clamp(24px, 3vw, 56px)`, piu' sotto), e fra 1440 e 2560 cresce di 13px in tutto. Guardare li' sarebbe stato il posto sbagliato. 383px e' quanto misura la scatola a 1440, cioe' la larghezza che Fabio e Roberta vedono gia' e tengono buona. Messa come tetto: sotto il 1440 la scatola e' piu' stretta e il tetto non la tocca (a 1280 sono 336), sopra resta ferma li'. Cosi' il gruppo delle colonne resta agganciato al Club invece di scivolare a destra, e a 1440 e sotto non cambia NIENTE. ⚠ Quello che avanza non sparisce: se lo prendono le quattro colonne di link, che a 2560 diventano piu' larghe. L'ultima continua ad appoggiarsi al bordo destro, che e' la scelta di Fabio dell'11/09 (HOME-08/NEW-07): questo tetto NON la disfa. Sotto i 993px non vale: li' il footer e' una colonna sola. */ max-width: 383px; } } /* HOME-08: la frase del blocco Club era 15px, cioe' piu' grande delle voci dei link accanto. Fabio (11/09) la vuole "come The Brand, Bottega", che sono le VOCI: 13px. Vale anche su mobile, dove era 14px. ⚠ Misurato il 01/10 (FTR-06): le voci NON erano 13px. Shoptimizer le fa FLUIDE fra 14 e 15 (vedi sotto), quindi a settembre erano 15 sul desktop e 14 sul telefono: i 13px qui sopra nascono dai TITOLI delle colonne, non dalle voci. La frase del Club resta com'e' — e' il riferimento di FTR-06 — ma la nota "come le voci" descriveva una cosa che non era vera. */ footer.site-footer .bb-footer-club__tagline { font-size: 13px !important; } /* FTR-06 (a) — le voci delle colonne di link prendono la STESSA misura del blocco Club del footer, cioe' 13px (Fabio, 01/10). Il blocco Club non si tocca: e' il riferimento. La sua frase e il suo campo e-mail sono entrambi a 13px, quindi la misura da raggiungere e' quella, senza ambiguita'. DA DOVE venivano: Shoptimizer, in main.min.css, scrive .site-footer .widget li, .site-footer .widget p { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } cioe' una misura FLUIDA da 14px a 15px. Per questo le voci risultavano 15px a 1440 e 14px a 390: non erano due scelte diverse, era una sola regola che scorre con la larghezza. Qui la si ferma a 13px a ogni larghezza, che e' anche quello che il task chiede («sul telefono cambia solo il corpo»). Basta la misura sul `li`: le `a` dentro non hanno una regola loro e la ereditano (verificato in pagina). E basta `footer` davanti per vincere senza !important — 0,2,2 contro lo 0,2,1 di Shoptimizer — come per i titoli di NEW-42 qui sotto. ⚠ 13px NON e' un token (i token sono 10/12/14). E' la misura del blocco Club, che e' il riferimento imposto dal task: allinearsi a un token vorrebbe dire spostare ANCHE il blocco Club, che non si tocca. Se si preferisce stare sui token, la decisione e' di chi disegna e riguarda tutte e due le parti. */ footer.site-footer .widget li { font-size: 13px; } /* ============================================= WHITE FOOTER VARIANT — body.bb-footer-light Scope: only pages that add this body class ============================================= */ /* Base: white bg, dark text, light border-top */ body.bb-footer-light footer.site-footer, body.bb-footer-light footer.copyright { background: var(--bb-bg-primary) !important; color: var(--bb-text-primary) !important; border-top: 1px solid var(--bb-color-border) !important; } /* All text-bearing descendants */ body.bb-footer-light footer.site-footer *, body.bb-footer-light footer.copyright * { color: var(--bb-text-primary) !important; } /* Links */ body.bb-footer-light footer.site-footer a, body.bb-footer-light footer.copyright a { color: var(--bb-text-primary) !important; } /* Widget titles */ body.bb-footer-light footer.site-footer .widget-title, body.bb-footer-light footer.site-footer h1, body.bb-footer-light footer.site-footer h2, body.bb-footer-light footer.site-footer h3, body.bb-footer-light footer.site-footer h4, body.bb-footer-light footer.site-footer h5, body.bb-footer-light footer.site-footer h6 { color: var(--bb-text-primary) !important; } /* Paragraphs and spans */ body.bb-footer-light footer.site-footer p, body.bb-footer-light footer.site-footer span { color: var(--bb-text-primary) !important; } /* Footer WP site logo: invert white logo → black */ body.bb-footer-light footer.site-footer .custom-logo, body.bb-footer-light footer.site-footer .custom-logo-link img, body.bb-footer-light footer.site-footer .site-branding img { filter: invert(1) !important; } /* bb_club_subscribe logo: già nero, rimuovi invert */ body.bb-footer-light footer.site-footer .bb-footer-club__logo { filter: none !important; } /* Input fields: transparent bg, dark border and text */ body.bb-footer-light footer.site-footer input[type="text"], body.bb-footer-light footer.site-footer input[type="email"], body.bb-footer-light footer.site-footer input[type="tel"], body.bb-footer-light footer.site-footer textarea { background-color: transparent !important; border-color: var(--bb-text-primary) !important; color: var(--bb-text-primary) !important; } /* Autofill fix: white inset shadow instead of dark, dark text fill */ body.bb-footer-light footer.site-footer input:-webkit-autofill, body.bb-footer-light footer.site-footer input:-webkit-autofill:hover, body.bb-footer-light footer.site-footer input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bb-bg-primary) inset !important; -webkit-text-fill-color: var(--bb-text-primary) !important; } /* Buttons keep global black bg / white text — no override needed */ /* Placeholder text */ body.bb-footer-light footer.site-footer input::placeholder, body.bb-footer-light footer.site-footer textarea::placeholder { color: var(--bb-text-muted) !important; opacity: 1 !important; } /* ============================================= FOOTER "Home scroll 9" — grappolo revisione (slide 11) NEW-11 / NEW-08 / NEW-07 / NEW-09 ============================================= */ /* NEW-11 — togliere i due filetti grigi: quello SOPRA il footer e quello SOPRA la barra copyright. Restano coerenti con GLB-12 (via divisori non previsti). Il bordo NERO del campo email (.bb-footer-club__input) NON è qui e resta: è l'affordance del campo. */ footer.site-footer, footer.copyright, body.bb-footer-light footer.site-footer, body.bb-footer-light footer.copyright { border-top: 0 !important; } /* NEW-08 — i titoli delle colonne (widget-title) uniformati a Jost, come il resto dei titoli del sito (decisione Fabio 11/09). */ footer.site-footer .widget-title, footer.site-footer .widget .gamma { font-family: 'Jost', sans-serif !important; } /* [NEW-42] Fabio/Roberta 18/09: titoli delle sezioni del footer ("Il Brand", ecc.) NON in grassetto. Il 600 arrivava da Shoptimizer `.widget .widget-title` (0,2,0): qui con footer davanti si vince senza !important. */ footer.site-footer .widget .widget-title, footer.site-footer .widget .gamma { font-weight: 400; } /* NEW-07 + HOME-09 — impaginazione delle colonne del footer. NEW-07 (fatto) aveva aperto lo spazio fra le colonne, che erano attaccate. HOME-09 chiede che le colonne arrivino ai bordi esterni. MISURATO PRIMA (1440): il blocco Club partiva a 12px dal bordo sinistro, ma l'ultima colonna finiva a 70px da quello destro e il suo testo a 90px. ⚠️ LA CAUSA NON ERA LA GRIGLIA, ed e' il pezzo che serviva davvero. Shoptimizer mette un ::after di "clearfix" su .col-full: `content:""` piu' `display:block`. In un contenitore FLEX uno pseudo-elemento non e' decorazione, e' una COLONNA a tutti gli effetti — larga 0 ma alta quanto la riga, e soprattutto con il suo spazio davanti. Si mangiava un gap intero in coda, cioe' quasi tutti i 70px di vuoto che si vedevano a destra. In flex il clearfix non serve: non ci sono float da liberare. Tolto quello, le cinque colonne (flex 2/1/1/1/1, regola piu' in alto) tornano a riempire la riga da sola: larghezze uguali, passo uniforme, ultima colonna appoggiata al gutter destro. Nessun'altra regola serve. NEW-10 chiedeva di stringere il passo fra IL BRAND e SERVIZIO CLIENTI. Provato e misurato: si puo' fare, ma solo spostando lo spazio che avanza altrove, e l'unico posto e' fra il blocco Club e i link — veniva un vuoto di ~316px al centro. Fabio (11/09) ha visto le due versioni e ha scelto questa: passo largo e uniforme, niente vuoto. NEW-10 resta deciso-di-non-fare. ⚠️ Solo da 993px: sotto, il footer e' una griglia a UNA colonna. */ @media (min-width: 993px) { footer.site-footer .col-full { gap: clamp(24px, 3vw, 56px) !important; /* NEW-07 */ } footer.site-footer .col-full::after { display: none !important; /* HOME-09: la colonna fantasma */ } } /* [NEW-134] La riga delle lingue, appena sopra il copyright. Testo e basta: la lingua in cui stai leggendo in nero, le altre grigie e cliccabili, separate da una barretta disegnata dal CSS (non e' un carattere nel testo, cosi' chi legge con la voce non se la sente scandire). Stesso margine laterale del copyright, cosi' le due righe partono dallo stesso punto. */ /* Contenitore suo, non il .col-full del tema: quello sulle pagine landing viene azzerato da altre regole e la riga scivolava a filo schermo. Il rientro e' quello del testo "(c) Benedetta Bruzziches" qui sotto: margine di pagina, piu' i 20px che il widget del copyright si tiene per se' da 768px in su. Cosi' le due righe partono dallo stesso punto. */ .bb-footer-langs__inner { box-sizing: border-box; width: 100%; display: flex; justify-content: flex-start; padding-inline: var(--bb-header-gutter); } @media (min-width: 768px) { .bb-footer-langs__inner { padding-inline: calc(var(--bb-header-gutter) + 20px); } } .bb-footer-langs__list { display: flex; align-items: center; gap: 14px; padding: 14px 0 0; } /* La classe ripetuta perche' il tema di Elementor veste tutte le (.elementor-kit-6 a), e pesava quanto una classe sola: il collegamento usciva a 13px nero invece che 11px grigio come la voce attiva. */ .bb-footer-langs .bb-footer-langs__item { position: relative; font-size: 11px; letter-spacing: var(--bb-ls-wide); text-decoration: none; color: var(--bb-muted); transition: color var(--bb-transition-fast); } .bb-footer-langs__item + .bb-footer-langs__item::before { content: ''; position: absolute; left: -8px; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: var(--bb-line); } .bb-footer-langs__item.is-active { color: var(--bb-fg); } body .bb-footer-langs__item:hover { color: var(--bb-fg); } /* La barra del copyright si tira su di 48px (regola del tema padre) per chiudere il vuoto sotto il footer: con la riga delle lingue in mezzo quel tiro se la mangiava, e il copyright ci finiva sopra. Quando la riga c'e' il tiro non serve piu' — lo spazio lo occupa lei. La regola guarda proprio la riga che precede, quindi dove le lingue non ci sono il comportamento di prima resta intatto. */ .bb-footer-langs + footer.copyright { margin-top: 0 !important; } /* NEW-09 — il © in fondo era a x=331: la barra copyright NON riceveva il full-width di FOOT-01 (solo footer.site-footer lo aveva), quindi restava il box centrato 1170px di Shoptimizer. Le diamo lo stesso trattamento full-width così il © parte dal gutter sinistro. */ footer.copyright .col-full { box-sizing: border-box !important; max-width: 100% !important; width: 100% !important; margin-inline: 0 !important; padding-inline: var(--bb-header-gutter) !important; justify-content: flex-start !important; text-align: left !important; } footer.copyright .col-full .textwidget, footer.copyright .col-full p { text-align: left !important; margin-inline: 0 !important; } /* ── [MOB-09] Footer a fisarmonica su mobile ───────────────────────────────── Sotto i 768px le colonne del footer si chiudono e si aprono al tocco, come da disegno. [NEW-42] Dal 18/09 anche la colonna dei link legali (prima restava distesa, decisione del 12/09 superata). Le regole valgono solo quando il JS ha montato la fisarmonica (.bb-footer-acc), cosi' senza JS il footer resta quello di prima: tutto aperto e leggibile. */ @media (max-width: 767px) { footer.site-footer .bb-footer-acc__testa { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; /* [NEW-42] «meno spazio tra le sezioni»: una sezione chiusa occupava 80px (14+14 qui, 12.5 di margine del titolo, 20 di margine del widget). L'XD mobile le mette a 40px l'una dall'altra: 10+10 + la riga. */ padding-block: 10px; margin-bottom: 0 !important; user-select: none; } footer.site-footer .bb-footer-acc { margin-bottom: 0 !important; } /* il segno "+" che diventa "−" da aperto: disegnato, non un carattere, cosi' non dipende da font o emoji */ footer.site-footer .bb-footer-acc__testa::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-left: 12px; background: linear-gradient(currentColor, currentColor) center/10px 1px no-repeat, linear-gradient(currentColor, currentColor) center/1px 10px no-repeat; transition: transform .2s ease; } footer.site-footer .bb-footer-acc--aperto .bb-footer-acc__testa::after { background: linear-gradient(currentColor, currentColor) center/10px 1px no-repeat; } footer.site-footer .bb-footer-acc ul { margin-top: 0; padding-bottom: 10px; } } /* ── [GLB-01] Due famiglie, non tre — e niente pesi finti ───────────────────── L'audit tipografico del 12/09 ha trovato due cose che nessuno aveva chiesto di cercare: 1. INTER era in pagina su 6 elementi, fra cui la CTA principale della scheda prodotto. ⚠️ NON arriva dai blocchi WooCommerce come si poteva pensare: arriva dal CSS DINAMICO DEL CUSTOMIZER (il foglio che non sta nel repo, riconoscibile perche' comincia con `.site-header .custom-logo-link img{height:25px;}`), dove qualcuno ha impostato Inter come font dei prodotti. Qui lo si neutralizza, ma la radice e' quella: se un domani si vuole togliere davvero, si cambia l'impostazione nel Customizer. 2. Il peso 700 era FINTO: in functions.php carichiamo Jost 300;400;500;600, il 700 non c'e', quindi il browser lo ingrassava da solo. Fabio (12/09): portare a 600, senza aggiungere il 700 ai font caricati. -------------------------------------------------------------------------- */ /* Titoli prodotto nelle griglie (erano Inter 600). ⚠️ La prima stesura usava `.wc-block-grid__product-title` e ha PERSO: il foglio del Customizer dichiara `.wc-block-grid__product .wc-block-grid__ product-title` (due classi) e viene caricato DOPO il nostro, quindi a pari specificita' vince lui. Qui si sale a tre classi — la regola di questo progetto e' alzare la specificita', non sparare !important. */ .wc-block-grid .wc-block-grid__product .wc-block-grid__product-title, body ul.products li.product .woocommerce-loop-product__title { font-family: var(--bb-font-body, 'Jost'), sans-serif; } /* "Password dimenticata?" era `font-weight: bold` da `#customer_login p a` (1,1,1): per vincere serve un selettore almeno pari, non una classe. */ body #customer_login p a { font-weight: 600; } /* Il simbolo di valuta era l'ultimo peso 700 rimasto — e anche lui finto. Aveva pure due pesi diversi per lo stesso segno: 700 sulla scheda prodotto, 300 nel catalogo. Invece di inchiodarlo a un numero, lo si fa seguire il peso del prezzo che lo contiene: cosi' resta coerente ovunque, anche se un domani il prezzo cambia peso. */ body .woocommerce-Price-amount .woocommerce-Price-currencySymbol, body span.woocommerce-Price-currencySymbol { font-weight: inherit; } /* L'ultimo peso 700 del sito stava nel prezzo dei blocchi CommerceKit (`div.cgkit-*`), non in roba nostra. Portato a 600, che e' caricato: il simbolo di valuta lo eredita grazie alla regola qui sopra. */ body [class*="cgkit-"] .price { font-weight: 600; } /* ── [NEW-47] REGOLA DI SITO: SOTTOLINEATURA DELLE CTA ────────────────── «Tutte le CTA devono avere la sottolineatura dei box della landing Borse: partenza senza sottolineatura, on hover sottolineatura piccola.» Il modello e' .bb-landing__cat-tile-label::after (ESPLORA PER STILE): un trattino di 1px nel colore del testo che cresce dal centro fino a 22px. Qui sta tutta la regola, una volta sola. Il prefisso `body` la fa vincere sui fogli di pagina (landing.css, home.css... caricati dopo questo) senza !important. Per una CTA nuova basta la classe .bb-cta nel markup, oppure aggiungerne il selettore alle tre liste qui sotto. CTA = link maiuscolo che porta a una pagina o apre un pannello (ESPLORA, SCOPRI, JOIN THE CLUB). Restano sottolineati i link dentro una frase e i link di servizio (privacy, guida taglie, account, moduli). ⚠ [NEW-396] LA REGOLA, come l'ha detta Fabio il 14/10: «tutte le cta che non sono pulsanti si comportano cosi'». Quindi davanti a una CTA nuova non ci si chiede se somiglia a quelle della home: si guarda se e' un PULSANTE (un fondo pieno, come .bb-blocco__richiamo di NEW-369). Se non lo e', va in queste QUATTRO liste — riposo, trattino, passaggio, e la quarta, il telefono, che e' quella che si dimentica. ⚠ E si dimentica perche' sul telefono il difetto non si vede provando: il trattino cresce al PASSAGGIO del mouse, che li' non avviene mai, quindi resta largo 0. Misurato: le CTA interne aggiunte con NEW-396 erano invisibili a 390 finche' non sono entrate anche nella quarta lista. [NEW-64] DETTAGLI PRODOTTO (.bb-details-trigger) sta solo nella lista 1: niente sottolineatura a riposo e nessun trattino al passaggio. */ /* 1. A riposo: nessuna sottolineatura. Il bordo diventa trasparente e non sparisce, cosi' niente si sposta di un pixel. Al passaggio niente piu' schiarimento: sul modello cambia solo il trattino. */ body .bb-cta, body .bb-blocco--ancore a, /* [NEW-396] submenu pagine interne */ body .bb-xd-ancore__voce, /* [NEW-396] submenu Bottega/Shopping/Scuola */ body .bb-blocco__rimando a, /* [NEW-396] CTA interna (era sottolineata per intero) */ body .bb-xd-invito, /* [NEW-396] invito di sezione (era un bordo sotto) */ body a.bb-home-hero__cta, body .bb-home-products__cta a, body .bb-home-club-hero__cta, body .bb-landing__hero-cta, body .bb-landing__model-card-cta, body .bb-landing__section-img-label, body .bb-instagram-feed__label, body .bb-subcategory-menu__link, body .bb-subcategory-trigger, /* [NEW-87] bottone ESPLORA: stessa sottolineatura delle CTA. ⚠ [NEW-412] stava in questa lista e nella quarta, ma NON in quella che dichiara `content: ''`: il pseudo-elemento non veniva generato, quindi la riga che gli dava i 22px era codice morto e sul telefono era l'unica CTA senza trattino. Misurato, non dedotto. */ body .bb-details-trigger, body .bb-pdp-confidence .bb-cart-confidence__link { position: relative; text-decoration: none; border-bottom-color: transparent; } body .bb-home-hero__cta:hover, body .bb-home-products__cta a:hover, body .bb-home-club-hero__cta:hover, body .bb-landing__hero-cta:hover, body .bb-landing__model-card-cta:hover, body .bb-landing__section-img-item:hover .bb-landing__section-img-label, body .bb-instagram-feed__label:hover, body .bb-details-trigger:hover, body .bb-pdp-confidence .bb-cart-confidence__link:hover { text-decoration: none; border-bottom-color: transparent; opacity: 1; } /* position:fixed della CTA hero (GLB-07) va preservata: fa gia' da contenitore del trattino. */ body a.bb-home-hero__cta { position: fixed; } /* La label sulle foto della landing e' gia' posizionata al centro della foto. */ body .bb-landing__section-img-label { position: absolute; } /* 2. Il trattino: nascosto (largo 0), centrato sotto il testo. */ body .bb-cta::after, body .bb-blocco--ancore a::after, body .bb-xd-ancore__voce::after, body .bb-blocco__rimando a::after, body .bb-xd-invito::after, body a.bb-home-hero__cta::after, body .bb-home-products__cta a::after, body .bb-home-club-hero__cta::after, body .bb-landing__hero-cta::after, body .bb-landing__model-card-cta::after, body .bb-landing__section-img-label::after, body .bb-instagram-feed__label::after, body .bb-subcategory-menu__link::after, body .bb-subcategory-trigger::after, /* [NEW-412] mancava QUI: vedi nota sotto */ body .bb-pdp-confidence .bb-cart-confidence__link::after { content: ''; position: absolute; left: 50%; right: auto; bottom: 0; width: 0; height: 1px; margin: 0; background: currentColor; transform: translateX(-50%); transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Il sottomenu ha 8px di aria sotto (6px sul telefono): il trattino sta a ridosso del testo come nel modello, non in fondo alla zona cliccabile. */ body .bb-subcategory-menu__link::after { bottom: 3px; } /* [NEW-114] Il grigio delle voci NON attive non ha mai funzionato: shop.css lo chiede con una classe sola e `.elementor-kit-6 a` (classe + tag) lo batteva, rimettendole tutte in nero pieno. Finche' l'attiva era in grassetto non si notava; tolto il grassetto, l'attiva era diventata indistinguibile — anzi, un filo piu' chiara delle altre. Qui il grigio si riprende il suo posto e l'attiva resta l'unica nera. */ body .bb-subcategory-menu__link { color: var(--bb-muted); } body .bb-subcategory-menu__link:hover, body .bb-subcategory-menu__link.is-active { color: var(--bb-fg); } body .bb-subcategory-menu__link.is-active { text-decoration: none; /* shop.css lo sottolineava per intero (due classi) */ } /* ⚠ [NEW-412b] IL TRATTINO SI ANIMA ANCHE CON «MENO MOVIMENTO» ACCESO. --------------------------------------------------------------------- Il tema padre carica `reduced-motion.css` (opzione del Customizer, accesa su staging) con dentro: @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition-duration: 0s !important } } cioe' azzera la durata di OGNI transizione del sito. Il trattino smette di crescere e «appare e basta»: e' il difetto segnalato da Fabio, su schermo grande, ed e' invisibile a chi non ha quell'impostazione in Windows. Qui gliela si restituisce, e SOLO a lui. Non si tocca il foglio del padre e non si tocca nient'altro: veli, pannelli, frecce e caroselli restano fermi come chiede chi ha chiesto meno movimento. La scelta, dichiarata: questo e' un filo di UN pixel che si allarga di 22 in un terzo di secondo, non un movimento che attraversa lo schermo. Chi chiede meno movimento lo chiede per le cose che si spostano, e questa non si sposta — cresce. Se un domani si decidesse il contrario, si cancella questo blocco e torna com'era. ⚠ Serve `!important` perche' la regola del padre ce l'ha: senza, perde a parita' di tutto il resto. E' l'unico posto del blocco NEW-47 dove si usa. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body .bb-cta::after, body .bb-blocco--ancore a::after, body .bb-xd-ancore__voce::after, body .bb-blocco__rimando a::after, body .bb-xd-invito::after, body .bb-home-cat-box__overlay-text::after, body .bb-home-products__label::after, body a.bb-home-hero__cta::after, body .bb-home-products__cta a::after, body .bb-home-club-hero__cta::after, body .bb-landing__hero-cta::after, body .bb-landing__cat-tile-label::after, body .bb-landing__cat-tile-cta::after, body .bb-landing__model-card-cta::after, body .bb-landing__section-img-label::after, body .bb-instagram-feed__label::after, body .bb-subcategory-menu__link::after, body .bb-subcategory-trigger::after, body .bb-pdp-confidence .bb-cart-confidence__link::after, body .bb-pdp-size-explorer__label::after { transition-duration: 0.38s !important; transition-delay: 0s !important; } } /* 3. Al passaggio del mouse (o col focus da tastiera): trattino da 22px. La voce attiva del sottomenu lo tiene sempre, al posto del vecchio sottolineato intero. */ body .bb-cta:hover::after, body .bb-cta:focus-visible::after, body .bb-blocco--ancore a:hover::after, body .bb-blocco--ancore a:focus-visible::after, body .bb-xd-ancore__voce:hover::after, body .bb-xd-ancore__voce:focus-visible::after, body .bb-blocco__rimando a:hover::after, body .bb-blocco__rimando a:focus-visible::after, body .bb-xd-invito:hover::after, body .bb-xd-invito:focus-visible::after, body a.bb-home-hero__cta:hover::after, body a.bb-home-hero__cta:focus-visible::after, body .bb-home-products__cta a:hover::after, body .bb-home-products__cta a:focus-visible::after, body .bb-home-club-hero__cta:hover::after, body .bb-home-club-hero__cta:focus-visible::after, body .bb-landing__hero-cta:hover::after, body .bb-landing__hero-cta:focus-visible::after, body .bb-landing__model-card-cta:hover::after, body .bb-landing__model-card-cta:focus-visible::after, body .bb-landing__section-img-item:hover .bb-landing__section-img-label::after, body .bb-landing__section-img-item:focus-visible .bb-landing__section-img-label::after, body .bb-instagram-feed__label:hover::after, body .bb-instagram-feed__label:focus-visible::after, body .bb-subcategory-menu__link:hover::after, body .bb-subcategory-menu__link:focus-visible::after, body .bb-subcategory-menu__link.is-active::after, body .bb-pdp-confidence .bb-cart-confidence__link:hover::after, body .bb-pdp-confidence .bb-cart-confidence__link:focus-visible::after { width: 22px; transform: translateX(-50%); } /* [NEW-55] Stessa regola per i nomi che compaiono SOPRA i box al passaggio del mouse: box categoria della home (BORSE IN CRISTALLO...) e i cinque modelli (NEW-46). Il trattino e' quello di sopra, identico; cresce quando si passa sul box, insieme al nome che compare. Sta 6px sotto il testo, l'aria che le CTA hanno dal padding. Le label sulle foto delle landing sono gia' nella regola NEW-47. */ body .bb-home-cat-box__overlay-text { position: relative; } body .bb-home-cat-box__overlay-text::after, body .bb-home-products__label::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 0; height: 1px; background: currentColor; transform: translateX(-50%); transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } @media (hover: hover) { body .bb-home-cat-box:hover .bb-home-cat-box__overlay-text::after, body .bb-home-cat-box:focus-visible .bb-home-cat-box__overlay-text::after { width: 22px; } } /* [NEW-96] Fabio: i nomi dello strip prodotti della home hanno il trattino SEMPRE, come i box delle landing (NEW-90/91) e le CTA sul telefono (NEW-85): non cresce al passaggio, c'e' gia'. Il nome compare col velo (al passaggio su desktop, sulla scheda che si guarda sul telefono) e si porta dietro il suo trattino. [NEW-109] La vecchia trappola ("sugli schermi larghi senza mouse il nome sta sotto la foto") e' sparita da sola: il nome sta sulla foto ovunque, ed e' sempre posizionato. */ /* [NEW-103] Fabio cambia idea su NEW-96: col mouse il trattino NON sta li' fermo, cresce quando si passa sulla scheda, come tutte le altre CTA del sito. Fisso resta dove il mouse non c'e': li' un trattino che cresce al passaggio non si vedrebbe mai. */ @media (hover: hover) { body .bb-home-products__item:hover .bb-home-products__label::after, body .bb-home-products__item:focus-visible .bb-home-products__label::after { width: 22px; } } /* [NEW-85 → NEW-412] DOVE NON C'E' IL MOUSE, IL TRATTINO STA FERMO A 22px. Senza passaggio del mouse un trattino che cresce non si vedrebbe MAI, e la CTA resterebbe nuda. ⚠ [NEW-412] IL CANCELLO ERA LA LARGHEZZA, ADESSO E' IL PUNTATORE, e il motivo per cui e' cambiato va tenuto. Prima questa lista stava sotto `@media (max-width: 767px)`, ma DUE famiglie — i nomi dei box categoria della home e quelli dello strip prodotti — avevano un cancello LORO, `@media (hover: none)`, senza limite di larghezza. Due cancelli diversi per la stessa decisione, e il risultato si vedeva: su un tablet in orizzontale quelle due erano FISSE mentre tutte le altre CTA della stessa pagina crescevano; in una finestra desktop stretta succedeva l'opposto. Censito il 14/10 su 26 famiglie e 11 pagine, 228 misure di passaggio del mouse. Si e' scelto il cancello del PUNTATORE perche' e' il motivo vero della regola: non «schermo piccolo» ma «qui il mouse non c'e'». Effetto collaterale voluto: in una finestra desktop stretta, dove il mouse C'E', il trattino adesso si anima come dappertutto — prima restava fisso e sembrava un difetto. ⚠ [NEW-412b] Le due condizioni sono legate da una E, non da una VIRGOLA. Con la virgola bastava che UNA fosse vera: uno schermo grande con il tocco (un portatile touch, un monitor touch) dichiara `pointer: coarse` pur avendo il mouse attaccato, e ci finiva dentro — trattino FISSO su un desktop, cioe' esattamente il difetto che si stava cercando di togliere. Con la E ci entra solo chi ha davvero il solo dito. ⚠ NON mettere qui `.bb-details-trigger`: NEW-64 vuole DETTAGLI PRODOTTO senza trattino, e infatti non ha nemmeno il `::after` dichiarato. La riga che c'era prima era codice morto che contraddiceva il commento. */ @media (hover: none) and (pointer: coarse) { body .bb-cta::after, body .bb-blocco__rimando a::after, /* [NEW-396] */ body .bb-xd-invito::after, /* [NEW-396] */ body .bb-home-cat-box__overlay-text::after, /* [NEW-412] era in un cancello suo */ body .bb-home-products__label::after, /* [NEW-412] era in un cancello suo */ body a.bb-home-hero__cta::after, body .bb-home-products__cta a::after, body .bb-home-club-hero__cta::after, body .bb-landing__hero-cta::after, body .bb-landing__model-card-cta::after, body .bb-landing__section-img-label::after, body .bb-instagram-feed__label::after, body .bb-subcategory-menu__link::after, body .bb-subcategory-trigger::after, body .bb-pdp-confidence .bb-cart-confidence__link::after { width: 22px; } /* Eccezione: nel pannello delle categorie il trattino resta solo sulla voce ATTIVA (NEW-86), altrimenti sarebbero sottolineate tutte. */ body .bb-subcategories-offcanvas__list .bb-subcategory-menu__link:not(.is-active):not(:hover)::after { width: 0; } /* [NEW-419] Il submenu delle pagine interne, sul telefono: NIENTE linea fissa sotto le voci — la mostra SOLO la voce della sezione ATTIVA (`is-active`, messo dallo scrollspy in header.js mentre si scorre). Senza mouse non c'e' l'hover che fa crescere il trattino, e una riga sotto OGNI voce sarebbe rumore. Fabio (NEW-419): «la linea compare solo se ci clicchi e la sezione si attiva». Vale per le due famiglie di barra (`.bb-xd-ancore__voce` su Bottega/Shopping/Scuola, `.bb-blocco--ancore a` su Club/About/Repair). Stesso cancello del resto del sistema (hover:none + pointer:coarse = «qui non c'e' il mouse», NEW-414), non `max-width`, se no un tablet touch largo resterebbe col fisso. Desktop invariato: li' il trattino e' 0 a riposo e cresce all'hover. */ body .bb-blocco--ancore a:not(.is-active)::after, body .bb-xd-ancore__voce:not(.is-active)::after { width: 0; } body .bb-blocco--ancore a.is-active::after, body .bb-xd-ancore__voce.is-active::after { width: 22px; } } /* [NEW-112/NEW-113] LA FRECCIA DI SCORRIMENTO. Nata nella ricerca, ora la usa anche lo slider dei modelli: il vestito sta qui una volta sola, la meccanica in assets/js/scroll-frecce.js. E' il chevron sottile del tema, scuro su bianco, senza cerchi ne' riquadri: vive in una fascia lasciata libera di fianco alla fila, mai sopra una foto (bianca sulla foto finiva addosso ai nomi, vedi NEW-112). `body` piu' due classi servono a superare `.elementor-kit-6 button`, che dipinge di nero qualunque bottone del sito. */ body .bb-scroll-freccia { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; padding: 10px; border: 0; border-radius: 0; background: none; background-color: transparent; box-shadow: none; color: var(--bb-fg, #1f1f1f); line-height: 0; cursor: pointer; transition: opacity 0.25s ease; } body .bb-scroll-freccia.is-on { display: block; } /* [NEW-142] Niente quadratino grigio quando ci passi sopra: la freccia e' un segno, non un bottone. Il grigio lo mette il tema di Elementor (.elementor-kit-6 button:hover -> #414141), che pesa quanto la riga qui sotto; la classe ripetuta la fa pesare di piu' senza ricorrere a !important. Il segnale del passaggio resta: il chevron schiarisce. */ body .bb-scroll-freccia.bb-scroll-freccia:hover, body .bb-scroll-freccia.bb-scroll-freccia:focus, body .bb-scroll-freccia.bb-scroll-freccia:focus-visible, body .bb-scroll-freccia.bb-scroll-freccia:active { background: none; background-color: transparent; box-shadow: none; color: var(--bb-fg, #1f1f1f); } body .bb-scroll-freccia:hover { opacity: 0.55; } body .bb-scroll-freccia--next { right: var(--bb-freccia-lato, 4px); } body .bb-scroll-freccia--prev { left: var(--bb-freccia-lato, 4px); /* lo stesso chevron, specchiato: non ne serve un secondo */ transform: translateY(-50%) scaleX(-1); } /* "ESPLORA PER STILE" non e' un link ma un titolo vestito da CTA (CAT-10, B2 «sottolineatura come Esplora le collezioni»): ora che le CTA partono senza sottolineatura, la perde anche lui. */ body .bb-landing__styles-title.bb-landing__styles-title--grid { border-bottom-color: transparent; } /* ========================================================================= [NEW-211] LE TRE PAGINE A TUTTA LARGHEZZA About, Shopping in Bottega, Repair Service (Fabio 30/09). Misurato prima di scrivere: su uno schermo da 1440 il contenuto si fermava a 1243px, e i pixel si perdevano in tre punti diversi, non in uno solo. .site-content 28px di riempimento per lato (56) .shoptimizer-archive si ferma al contenuto del padre #primary / .content-area una larghezza in percentuale (126) Per questo non bastava la regola di bb-full-width-page, che tocca solo .col-full e .shoptimizer-archive: la classe qui e' un'altra apposta, cosi' home, landing, scuola e account — che quella classe ce l'hanno — non si muovono di un pixel. Gli !important seguono la convenzione della regola sorella in landing.css: qui si sta scavalcando l'impaginato del tema padre. ====================================================================== */ .bb-page-edge #content.site-content, .bb-page-edge .col-full, .bb-page-edge .shoptimizer-archive, .bb-page-edge #primary, .bb-page-edge .content-area, .bb-page-edge .entry-content { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================================= [NEW-273 -> NEW-354] IL MARGINE DEL TELEFONO DELLA BOTTEGA: non serve piu' Qui c'erano 24px di riempimento laterale per la sola Bottega, con due `!important` che si contendevano il campo con `.bb-page-edge`. Servivano quando la Bottega era una pagina Elementor che non aggiungeva margini suoi e restava l'unica col testo attaccato al bordo. Oggi la Bottega ha un template nostro e segue il modello della Scuola: il contenitore tiene il gutter, i blocchi al vivo lo annullano con un margine negativo pari al gutter. Quei 24px litigavano col margine negativo e lasciavano la fascia RIENTRATA di 10px invece che al vivo (misurato). Tolta la regola, tolta la classe `bb-pagina-bottega` che la reggeva: una classe che nessuno stila e' un ponteggio che il prossimo crede vivo. ========================================================================= */ /* ========================================================================= [NEW-271 / NEW-276] IL RIQUADRO DEL VIDEO MENTRE ASPETTA I video decorativi ora partono quando entrano nello schermo (video-sfondo.php). Finche' non sono partiti l'iframe e' vuoto e trasparente, cioe' un buco sul fondo della sezione. Un grigio chiaro dice "qui c'e' qualcosa che sta arrivando" invece di non dire niente — ed e' lo stesso grigio su cui aspettano le foto delle schede prodotto. [NEW-276] Sopra quel grigio arriva la miniatura vera del video, che il JavaScript mette come immagine di fondo poco prima che il riquadro entri nello schermo. Il grigio resta sotto e serve ancora: si vede nell'attimo fra l'arrivo e l'immagine, e quando la miniatura non c'e' (video privato, Vimeo che non risponde). ⚠ Queste regole NON stanno dietro `:not([src])`, e ci sono cascato scrivendo NEW-276: mettendocele, nel momento in cui il JavaScript da' l'indirizzo al lettore la regola smette di valere e la miniatura perde `cover` — proprio nei secondi in cui il lettore sta caricando, cioe' l'unico momento per cui la miniatura esiste. Si vedeva: un ritaglio dell'angolo dell'immagine a grandezza naturale. Il fondo non da' fastidio dopo, perche' un iframe con dentro il suo video copre quello che ha sotto. ========================================================================= */ .bb-video-sfondo { background-color: var(--bb-light-gray, #ebebeb); background-size: cover; background-position: center; background-repeat: no-repeat; } /* =========================================================================== [NEW-392] L'ombra sulle APERTURE fotografiche — un posto solo --------------------------------------------------------------------------- Decisione di Fabio del 14/10: fra velo scuro, ritaglio diverso e ombra, si sceglie l'ombra, applicata a TUTTE le aperture e non solo dove oggi serve. L'elenco e' esplicito e viene da un CENSIMENTO fatto in pagina il 14/10, non da memoria: tredici pagine passate, cercando il testo CHIARO che sta sopra una fotografia. Ne sono usciti quattordici, in due famiglie diverse: - le APERTURE (queste qui sotto); - le etichette dei box categoria della home, che NON sono aperture e che infatti stanno bene: a 1440 sono bianche sulla foto col velo, a 390 diventano nere su bianco. Sono state misurate e lasciate in pace. ⚠ Le misure del giorno dicono perche' non basta curare «dove si vede il problema»: con la stessa identica regola di stampa, Bottega stava a 9,56 e Repair a 1,76. La differenza e' solo la FOTOGRAFIA, che si cambia senza che nessuno rimisuri il contrasto. =========================================================================== */ body .bb-blocco__sovra .bb-blocco__sovratitolo, body .bb-home-hero__headline, body a.bb-home-hero__cta, body .bb-home-club-hero__cta, body .bb-scuola-hero__title, body .bb-xd-hero__titolo { text-shadow: var(--bb-ombra-su-foto); } /* ──────────────────────────────────────────────────────────────────────── [NEW-402] IL SOTTOMENU DELLE PAGINE INTERNE: COME QUELLO DELLA SCUOLA, E ATTACCATO ALL'HEADER QUANDO LO SI RAGGIUNGE ──────────────────────────────────────────────────────────────────────── Fabio (14/10): «tutti quanti i submenu delle pagine interne li mettiamo esattamente come quelli della scuola: subito sotto la Hero. [...] quando l'utente scrolla in basso quei link restano sticky attaccati all'header [...] per mobile trova un modo carino affinche' non sia invasivo». LE DUE FAMIGLIE. `.bb-xd-ancore` veste Bottega, Shopping e Scuola; `.bb-blocco--ancore` e' il blocco delle pagine su `page-interna.php` (Club, Repair). Fanno la stessa cosa e da oggi si comportano uguale: la regola sta qui una volta sola invece che in tre fogli. IL MODELLO, misurato e non dedotto: sulla Scuola la barra e' una nav con `padding-block: clamp(20px, 3vw, 48px)` subito dopo l'apertura. Prima della modifica: Shopping gia' a 0px dalla hero, Club e Repair a 72px, Bottega a 349px (aveva la citazione in mezzo, spostata nel template). ⚠ LO STICKY E L'HEADER. L'header del tema e' gia' `position: sticky` e misura 58px a 1440 e 61px a 390 — NON i 60-80px che dice `--bb-header-height`, che qui avrebbe spostato la barra di qualche pixel lasciando passare il contenuto nel mezzo. L'altezza vera la misura il JavaScript e la scrive in `--bb-sottomenu-top`; il valore qui sotto e' soltanto il ripiego per i primi fotogrammi. ⚠ LO Z-INDEX STA SOTTO QUELLO DELL'HEADER, non sopra: due elementi attaccati in cima, e quello che deve restare davanti e' l'header (ha il menu e la ricerca). ⚠ IL FONDO BIANCO NON E' UN VEZZO: senza, il contenuto della pagina scorrerebbe VISIBILE sotto i rimandi. IL TELEFONO, «non invasivo»: quando si attacca, la barra si RIMPICCIOLISCE invece di restare alta com'e' a riposo. A 390 passa da 63px a ~30: resta leggibile e toccabile, e non si mangia un terzo dello schermo. Il passaggio e' accompagnato, non a scatto. Niente righetta di separazione (NEW-203): a staccarla dal contenuto basta il fondo pieno. ──────────────────────────────────────────────────────────────────────── */ body .bb-xd-ancore, body .bb-blocco--ancore { position: sticky; top: var(--bb-sottomenu-top, 58px); z-index: calc(var(--bb-z-sticky, 200) - 1); background: #fff; padding-block: clamp(20px, 3vw, 48px); transition: padding-block .26s cubic-bezier(.4, 0, .2, 1); } /* ⚠ La barra deve arrivare ai BORDI, non fermarsi al margine del testo. Misurato: su Bottega e Shopping era larga 1369 e cominciava a x=28, mentre quella delle pagine interne e' 1425 da x=0. Con le fotografie a tutta pagina — che su queste pagine arrivano ai bordi — nei 28px scoperti per lato si sarebbe vista la foto SCORRERE di fianco ai rimandi fermi. Un difetto che si vede solo mentre si scorre, e solo se dietro passa un'immagine al vivo: a pagina ferma la barra sembrava a posto. Stessa tecnica delle immagini al vivo, e stesso motivo per `width: auto`: con `width: 100%` i margini negativi SPOSTEREBBERO il riquadro invece di allargarlo. Il `padding-inline` che la nav ha gia' tiene le voci al loro posto. */ body .bb-xd-ancore { width: auto; margin-inline: calc(-1 * var(--bb-gutter, 16px)); } /* ⚠ Il blocco delle pagine interne vive in una colonna flex con `gap: var(--bb-pi-stacco)`, che lo staccava di 72px dalla hero. Si annulla SOLO quando segue davvero un'apertura: se un redattore mette una fila di rimandi in mezzo alla pagina, quella il suo stacco se lo tiene. */ body .bb-blocco--hero + .bb-blocco--ancore { margin-top: calc(-1 * var(--bb-pi-stacco, 80px)); } /* Attaccata: piu' bassa, cosi' lascia la pagina alla pagina. */ body .bb-xd-ancore.is-attaccato, body .bb-blocco--ancore.is-attaccato { padding-block: 12px; } @media (max-width: 767px) { body .bb-xd-ancore.is-attaccato, body .bb-blocco--ancore.is-attaccato { padding-block: 8px; } } /* ⚠ Chi preferisce meno movimento non si vede la barra che si restringe. */ @media (prefers-reduced-motion: reduce) { body .bb-xd-ancore, body .bb-blocco--ancore { transition: none; } }