/* =========================== BB Tokens CSS =========================== */ :root { /* [NEW-229] Grigio chiaro dei comandi secondari. Nasce nella Bottega (segnaposto della prenotazione) e ora lo usa anche il segnalibro delle schede prodotto: due punti che lo scrivevano uguale per caso diventano due punti che lo prendono dallo stesso posto. */ --bb-grigio-chiaro: #888; /* =========================== COLORS =========================== */ --bb-bg: #fff; --bb-fg: #111; --bb-black: #000; --bb-muted: rgba(17, 17, 17, .68); --bb-line: rgba(17, 17, 17, .08); /* GLB-12 (Fabio 11/09): 1px e' il minimo tecnico, 0.5px viene arrotondato a 1 e non cambia nulla; l'unica leva reale e' schiarire. Era .14 */ --bb-light-gray: #f5f5f5; --bb-medium-gray: #e8e8e8; /* =========================== LAYOUT =========================== */ --bb-max: 1720px; --bb-gutter: clamp(14px, 2.2vw, 28px); --bb-section-padding: clamp(40px, 6vw, 80px); /* =========================== TYPOGRAPHY ← SET CANONICO (GLB-01) Fonte di verità per scala e line-height. I duplicati "legacy" in variables.css (--bb-font-size-*, --bb-line-height-*) sono alias deprecati. font-family NON definita qui: font unico = Jost (GLB-01, decisione Fabio 2026-08-22; Futura PT abbandonata, verificato assente su staging). --bb-font-family in variables.css = Jost. NB: Elementor serve ancora Work Sans/Cormorant/Inter (global fonts) da neutralizzare in admin per avere Jost davvero unico. =========================== */ /* GLB-15: font editoriale (racconto collezioni/brand) = Playfair Display serif. Regola tipografica base: TITOLI Jost · PARAGRAFI EDITORIALI Playfair · SERVIZIO/CTA Jost. Applicare via `font-family: var(--bb-font-editorial)` sui paragrafi narrativi. */ --bb-font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif; --bb-body: 14px; --bb-small: 12px; --bb-tiny: 10px; /* GLB-03: scala titoli ridotta (~10-12%) rispetto alla precedente [h1 34 / h2 24 / h3 18]. Body invariato a 14px (criterio: no <14px). */ --bb-h1: clamp(20px, 1.9vw, 30px); --bb-h2: clamp(16px, 1.4vw, 21px); --bb-h3: clamp(13px, 1.15vw, 16px); /* [NEW-170, decisione Fabio 25/09] --bb-h4 = 14px. Era un TOKEN FANTASMA: usato in due punti e dichiarato in nessuno, quindi valeva sempre il ripiego scritto accanto (1.25rem = 20px nel pannello Iscriviti, 17px nel popup Global-e) — due misure diverse per lo stesso gradino, che e' esattamente il sintomo di un token che non esiste. Scala completa ora: 30 / 21 / 16 / 14. NB: h4 cade alla stessa misura del corpo (--bb-body 14px). Non e' una svista: a questo gradino la differenza la fa il PESO, non il corpo. I due che cambiano, entrambi per volonta' di chi li ha scritti: .bb-club-register__title ("Entra nel Club") 20px -> 14px (quel titolo non esiste piu' da NEW-254: al suo posto c'e' il lockup. La decisione sul gradino resta valida, l'esempio no.) #globale_popup .glTitle 17px -> 14px Sul secondo il commento in globale-popup.css dice "Portato alla scala del sito": chiedeva il token, il 17px era un tappabuchi. */ --bb-h4: 14px; /* HOME-03: titolo hero home + testi overlay categorie/duo su un'unica scala centralizzata (non override locale). Il kit Elementor forza h1 a 32px via `.elementor-kit-6 h1` che batte una classe sola: home.css usa questo token, e questo clamp e' anche la rete di sicurezza (max 32px = misura approvata). */ --bb-h1-hero: clamp(22px, 2.2vw, 32px); /* [NEW-99] Il NOME che compare sopra la foto di un box. Fabio: sulla home era enorme (31,7px: era agganciato a --bb-h1-hero, cioe' alla stessa misura del titolone MORE THAN BAGS) e sulle landing minuscolo (12px, la misura delle note). Due scale slegate per la stessa cosa. Qui ce n'e' una sola, in due gradini, perche' i box non sono uguali: due per riga sulla home (oltre 700px di larghezza), quattro sulle landing (circa 355px). Il testo cresce meno del box, come si fa in tipografia: box doppio, testo una volta e mezza, non doppio. Il titolone della hero NON passa di qui: resta su --bb-h1-hero. */ --bb-overlay-name: clamp(17px, 1.45vw, 22px); --bb-overlay-name-sm: clamp(14px, 1.1vw, 16px); /* Line heights */ --bb-lh-tight: 1.2; --bb-lh-normal: 1.5; --bb-lh-relaxed: 1.6; /* Letter spacing */ --bb-ls-tight: 0.02em; --bb-ls-normal: 0.05em; --bb-ls-wide: 0.08em; /* GLB-02: tracking ridotto per i titoli di sezione (la grafica: "troppa spaziatura tra le lettere, restringere"). Era ~0.12em sui titoli home. */ --bb-ls-title: 0.06em; /* [NEW-54] Fabio 18/09: UN solo tracking per i titoli grandi del sito: MORE THAN BAGS, Classics, MADE IN ITALY (home) e i titoli delle hero categoria (BORSE, SCARPE, ACCESSORI, CLASSICS). 0.16em = quello delle CTA "ESPLORA LE COLLEZIONI" che stanno sotto: titolo e CTA respirano allo stesso modo. Uguale su desktop e telefono. */ --bb-ls-heading: 0.16em; /* HOME-05/CAT-03: paragrafo editoriale (manifesto home + hero categoria), leggermente ridotto e CONDIVISO tra home e landing (criterio CAT-03). Min 14px per rispettare il floor body di GLB-03. */ --bb-text-editorial: clamp(14px, 1.1vw, 15px); /* =========================== BORDERS & RADIUS =========================== */ --bb-radius: 999px; --bb-radius-small: 4px; /* PDP-15/GLB-12: spessore unico dei divisori (--bb-line è il COLORE). Centralizzato qui: quando GLB-12 avrà la conferma visiva userà lo stesso token. */ --bb-line-width: 1px; /* =========================== TRANSITIONS =========================== */ --bb-transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1); --bb-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --bb-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* =========================== EFFECTS =========================== */ /* GLB-09 — "no zoom foto": utility condivisa per lo scale su hover delle immagini. Default 1 = nessuno zoom (decisione Fabio 2026-08-22, regola globale). Rialzare a es. 1.05 riattiverebbe lo zoom ovunque da un solo punto. */ --bb-img-hover-scale: 1; /* [NEW-392, decisione Fabio 14/10] L'ombra del testo sulle APERTURE fotografiche. Scelta fra tre strade (velo scuro, ritaglio diverso, ombra): Fabio ha scelto l'ombra, su tutte. ⚠ E' una scelta di PERCEZIONE, dichiarata: stacca i glifi dal fondo e rende leggibile un titolo che su una fotografia chiara spariva, ma il rapporto WCAG calcolato su uno sfondo quasi bianco resta basso. Lo si scrive qui perche' non venga riscoperto fra un anno come una svista. Perche' su TUTTE e non solo dove oggi serve: le fotografie si cambiano. Misurato il 14/10, Bottega stava a 9,56 e Repair a 1,76 — con la stessa identica regola di stampa. Il giorno che si sostituisce uno scatto, nessuno rimisura: l'ombra c'e' gia'. */ --bb-ombra-su-foto: 0 1px 14px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35); /* =========================== Z-INDEX SYSTEM =========================== */ --bb-z-base: 1; --bb-z-dropdown: 100; --bb-z-sticky: 200; --bb-z-overlay: 300; --bb-z-offcanvas: 400; --bb-z-modal: 500; /* =========================== HEADER =========================== */ --bb-topbar-height: 32px; --bb-header-height: clamp(60px, 8vw, 80px); /* GLB-06: gutter orizzontale DEDICATO all'header (non tocca --bb-gutter globale che governa anche le pagine). Stile Bottega Veneta: i blocchi menu (sx) e carrello/funzioni (dx) restano ~10px dal bordo laterale a tutte le risoluzioni. */ --bb-header-gutter: clamp(10px, 1vw, 12px); /* =========================== OFFCANVAS =========================== */ --bb-offcanvas-width: clamp(320px, 90vw, 480px); }