/* clip, non hidden: hidden sulla root o sul body crea un contenitore di scorrimento e annulla position:sticky dell'header. */ html{overflow-x:clip} /* =========================================================================== FLASHMAC — BASE Reset leggero, superfici, primitive riusate da chrome/pattern/Woo. I token stanno in assets/css/tokens/: qui non si dichiarano valori nuovi. =========================================================================== */ *,*::before,*::after{box-sizing:border-box} body{position:relative;margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-body);background-color:var(--bg-base);transition:background-color var(--dur-slow,.32s) var(--ease-out,ease);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--surface-glow);opacity:var(--surface-glow-strength);transition:opacity var(--dur-slow,.32s) var(--ease-out,ease)} body.fm-no-scroll{overflow:hidden} h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:var(--fw-bold)} p{text-wrap:pretty} img{max-width:100%;height:auto} /* I link nel corpo del testo hanno un token proprio, non l'accento: il design system lo ha aggiunto il 14/09/2026 con questa motivazione, che coincide con quanto misurato qui — "--accent (pink-500) is only 3.4:1 on --bg-base, so links in running text use their own token". `--link` e' pink-650, 5,4:1 su --ink-50 e 5,9:1 su bianco. */ :where(a){color:var(--link);text-decoration:none} :where(a):hover{color:var(--link-hover);text-decoration:underline} /* Dentro un testo corrente il link va sottolineato sempre, non solo in hover: axe lo ha segnalato (`link-in-text-block`) dopo il passaggio a --link, e ha ragione. In tema scuro --link e' pink-400, piu' vicino al testo chiaro che lo circonda di quanto non fosse l'accento: il colore da solo non basta piu' a distinguerlo, e chi non percepisce quel rosa non vedrebbe il link. Fuori dalla prosa — nav, card, bottoni — il link e' riconoscibile dalla posizione e dalla forma, quindi la sottolineatura resta all'hover. */ .fm-prose a[href],.entry-content>p a[href],.woocommerce-Tabs-panel a[href]{text-decoration:underline;text-underline-offset:2px} ::selection{background:var(--flash-pink);color:#fff} :where(input,select,textarea,button):focus-visible{outline:none;box-shadow:var(--ring-focus)} /* Widget nativi del browser (spunte, radio, select, scrollbar, autofill). Il browser li disegna con la tavolozza chiara finche' non gli si dice altro: in tema scuro restano quadrati bianchi con la spunta blu di sistema. `color-scheme` gli dice quale tavolozza usare, e `accent-color` porta spunte e pallini sull'accento del design system. Non e' `prefers-color-scheme`: a decidere e' la classe `.theme-dark` che mette il server, come per tutto il resto del tema. Va su `:root`, non su `body`: la **barra di scorrimento della pagina** e' disegnata dal viewport, e per quella il browser legge `color-scheme` sull'elemento radice. Con la dichiarazione su `body` la radice restava a `normal` (misurato: `getComputedStyle(document.documentElement).colorScheme` = "normal" in entrambi i temi) e in tema scuro la barra restava chiara. La radice non porta la classe del tema — il tema sta su `` (§7) — quindi il caso scuro lo scrive il server come stile inline subito dopo questo foglio (`inc/theme-mode.php`), e il toggle lo aggiorna sulla radice insieme alla classe sul body. `color-scheme` si eredita: i controlli dentro il body continuano a ricevere la stessa tavolozza di prima. */ :root{color-scheme:light} input,select,textarea{accent-color:var(--accent)} /* --- RULE 1 / RULE 2 ----------------------------------------------------- .fm-band dipinge fino al bordo viewport; .fm-shell tiene il contenuto centrato e fisso. Le uniche eccezioni sono header/utility (fluide) e la track dei rail. */ /* WordPress separa i figli di .wp-site-blocks con --wp--style--block-gap: fra header, main e footer resterebbero 24px di sfondo pagina, una banda che interrompe le superfici (Rule 1). Il ritmo verticale lo danno le bande con .fm-section, non il block gap. */ .wp-site-blocks > *{margin-block-start:0} .fm-band{width:100%} .fm-band--a{background:var(--section-band-a)} /* PROPOSTA SFUMATURE IN SCURO (2026-09-17) — superficie 2 di 3. La sfumatura va sulla banda A e non sulla B, e non e' indifferente: --grad-ink finisce su --ink-950, che e' il colore pieno della banda A. Se la prendesse la banda B, il suo bordo inferiore arriverebbe allo stesso colore della banda A che le sta sotto e la cucitura fra le due sparirebbe — Rule 1 chiede che due bande adiacenti restino a un passo di distanza. Sulla banda A invece la cucitura resta visibile da tutte e due i lati. In chiaro non cambia nulla. */ .theme-dark .fm-band--a{background:var(--grad-ink)} .fm-band--b{background:var(--section-band-b)} .fm-band--accent{background:var(--section-band-accent)} .fm-band--ink{background:var(--section-band-ink);color:var(--ink-200)} .fm-shell{max-width:calc(var(--content-default) + 2 * var(--gutter-shell));margin-inline:auto;padding-inline:var(--gutter-shell)} .fm-shell--pdp{max-width:calc(var(--content-pdp) + 2 * var(--gutter-shell))} .fm-shell--fluid{max-width:none;padding-inline:var(--gutter-fluid)} .fm-section{padding-block:var(--space-8)} /* La tavola non ha una sola misura per tutte le bande: quella dei trust box passa `py="var(--space-6)"`, le altre usano il default --space-8. Qui c'era --space-7 per tutte e due le bande strette, che non e' ne' l'una ne' l'altra: 48px contro i 32 della tavola sui trust box e contro i 64 del banner TikTok, che infatti ha smesso di usare questa variante. Sotto il breakpoint la differenza non c'era: li' la tavola dice 24 e noi anche. */ .fm-section--tight{padding-block:var(--space-6)} /* Sotto il tablet ogni banda respira di un passo in meno: e' la regola del design system (Band py = --space-6 quando vp.narrow), non una scorciatoia per accorciare la pagina. */ @media(max-width:767.98px){ /* --bp-tablet */ .fm-section,.fm-section--tight{padding-block:var(--space-6)} } /* --- Tipografia di servizio --------------------------------------------- */ .fm-eyebrow{font-family:var(--font-spec);font-size:var(--text-2xs);letter-spacing:var(--tracking-spec);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--text-brand-aa)} .fm-gradient-text{background:var(--grad-flash);-webkit-background-clip:text;background-clip:text;color:transparent} .fm-mono{font-family:var(--font-mono)} .fm-muted{color:var(--text-muted)} .fm-lead{font-size:var(--text-lg);color:var(--text-body)} .fm-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap} .fm-section__title{margin:0;font-size:var(--text-2xl)} /* --- Card --------------------------------------------------------------- */ .fm-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)} .fm-card--sunken{background:var(--surface-sunken)} .fm-card--glass{background:var(--glass-scrim);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--glass-shadow)} .fm-card--lift{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} @media(hover:hover){.fm-card--lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}} /* --- Bottoni ------------------------------------------------------------ */ .fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-md);padding:0 20px;border:none;border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);cursor:pointer;text-decoration:none;transition:transform var(--dur-fast,.14s) var(--ease-out,ease),box-shadow var(--dur-fast,.14s) var(--ease-out,ease),background-color var(--dur-fast,.14s) var(--ease-out,ease)} .fm-btn--flash{background:var(--grad-flash);color:#fff} .fm-btn--surge{background:var(--grad-surge);color:#fff} .fm-btn--outline{background:transparent;color:var(--text-strong);box-shadow:inset 0 0 0 1.5px var(--border-default)} /* `Button variant="dark"` del design system e' --ink-950, non --ink-900. */ .fm-btn--ink{background:var(--ink-950);color:#fff} .fm-btn--lg{min-height:var(--control-lg);padding:0 var(--space-5);font-size:var(--text-md)} .fm-btn--block{width:100%} @media(hover:hover){.fm-btn:hover{transform:translateY(-2px)}.fm-btn--flash:hover,.fm-btn--surge:hover{box-shadow:var(--glow-flash)}.fm-btn--outline:hover{box-shadow:inset 0 0 0 1.5px var(--border-strong)}} .fm-btn:active{transform:scale(var(--press-scale,.97));transition-timing-function:var(--ease-snap,ease)} .fm-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-md);height:var(--control-md);flex:0 0 auto;background:none;border:none;border-radius:var(--radius-md);color:var(--text-body);cursor:pointer;position:relative} @media(hover:hover){.fm-icon-btn:hover{background:var(--surface-sunken);color:var(--text-strong)}} .fm-icon-btn:active{transform:scale(var(--press-scale,.97))} /* Il disegno delle icone Lucide vive qui e non negli attributi di ogni svg (vedi fm_icon): tratto 2 in currentColor, niente riempimento, capi tondi. WhatsApp e' un marchio pieno: riempimento al posto del tratto. */ .fm-ico{display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .fm-ico--whatsapp{fill:currentColor;stroke:none} /* --- Badge / pill ------------------------------------------------------- */ /* Il riquadro dei badge finisce dove comincia lo spazio riservato al cuore della wishlist (--space-2 di scostamento + --touch-min di bottone + --touch-gap): senza `right` la riga era libera di crescere fino al bordo e un badge condizione lungo passava sotto il cuore. Con il limite i badge vanno a capo. */ .fm-badges{position:absolute;top:var(--space-3);left:var(--space-3);right:calc(var(--space-2) + var(--touch-min) + var(--touch-gap));display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);z-index:2} /* Badge = componente Badge del design system, `variant="soft" size="sm"`: fondo pallido e testo scuro, non fondo saturo e testo bianco. La variante piena resta per i due casi che il kit disegna pieni, "Nuovo" (tone violet, solid) e la pill sconto (variant gradient). `letter-spacing:.06em` e `line-height:1` sono LETTERALI del kit: la scala tracking fa 0.04em/0.12em e quella delle interlinee parte da 1.04. Il bordo trasparente e' del componente e tiene alta la stessa scatola in tutte le varianti (17px a --text-3xs). Segnalati al design system. */ .fm-badge{display:inline-flex;align-items:center;font-family:var(--font-spec);font-size:var(--text-3xs);font-weight:var(--fw-semibold);letter-spacing:.06em;line-height:1;text-transform:uppercase;padding:2px 8px;border:1px solid transparent;border-radius:var(--radius-pill);color:var(--ink-700);background:var(--ink-100)} /* --- Pillola della condizione: UN trattamento, quattro gradi ------------ Il componente dichiara `background` e `color` una volta sola; il grado non li ridichiara, imposta due variabili. Chi aggiunge un grado non ha piu' un `color:` dove scrivere un colore a mano: e' la ragione della forma. IL RIPIEGO DELLA REGOLA BASE E' LA RETE DI SICUREZZA, ed e' la Regola 1.11 al contrario. Senza, un grado sconosciuto lascerebbe `--fm-grade-bg` indefinita, la dichiarazione diventerebbe invalida al momento del calcolo e `background` prenderebbe `unset`, cioe' TRASPARENTE — lo stesso meccanismo che ha scolorito il pannello del modale FPS in produzione. Col ripiego degrada alla pillola neutra tematizzata, che e' il comportamento sensato. Non e' un caso di scuola: "Box Sigillato (Nuovo)" esiste su 81 prodotti in produzione, stampa `data-grade="nuovo"` e fino a oggi non aveva nessuna regola — cadeva sulla `.fm-badge` neutra, che pero' NON e' tematizzata (--ink-700 su --ink-100 in tutti e due i temi), cioe' una pillola chiara su card scura. Adesso cade sul neutro del tema. Resta grigia di proposito: col viola di `.fm-badge--new` si passerebbe dal comporre al disegnare. Perche' il tema scuro ridichiara le variabili invece di ereditarle: gli inchiostri chiari #1B7A47 e #9A6608 sono i valori della TAVOLA, accettati il 2026-09-10 (con Ottimo a 3,81:1 e Buono a 4,36:1, scostamento tuttora valido e non riaperto). In scuro non vanno bene — il fondo si ribalta a rgba 0,16 sopra --grad-ink, l'inchiostro no, e il verde misurava 2,55:1, l'ambra 2,67:1. Quindi il chiaro tiene la tavola e lo scuro prende i token. DA SEGNALARE AL DESIGN SYSTEM: per completare questa tabella servono due coppie che non esistono. - una coppia ARANCIO tematizzata sullo stampo di --success-bg/--success-text (oggi Ottimo usa --orange-50/--orange-700, che non si ribaltano: qui sotto lo scuro e' composto a mano con l'idioma del file dei token, la tinta al 16%, e misura 5,97:1 e 6,83:1 ai due estremi del gradiente); - un --info-text: --info-bg c'e' ed e' tematizzato, il suo inchiostro no. Finche' non ci sono, quelle due combinazioni si ricompongono ogni volta. */ .fm-badge--condition{ background:var(--fm-grade-bg,var(--surface-sunken)); color:var(--fm-grade-ink,var(--text-body)) } .fm-badge--condition[data-grade=eccellente]{--fm-grade-bg:var(--success-bg);--fm-grade-ink:#1B7A47} .fm-badge--condition[data-grade=ottimo]{--fm-grade-bg:var(--orange-50);--fm-grade-ink:var(--orange-700)} .fm-badge--condition[data-grade=buono]{--fm-grade-bg:var(--warning-bg);--fm-grade-ink:#9A6608} .theme-dark .fm-badge--condition[data-grade=eccellente]{--fm-grade-ink:var(--success-text)} .theme-dark .fm-badge--condition[data-grade=ottimo]{--fm-grade-bg:color-mix(in srgb,var(--flash-orange) 16%,transparent);--fm-grade-ink:var(--flash-orange)} .theme-dark .fm-badge--condition[data-grade=buono]{--fm-grade-ink:var(--warning-text)} .fm-badge--new{background:var(--flash-violet);color:#fff} /* Pill sconto: non e' il Badge, e' la percentuale del PriceTag — gradiente, bianco, --text-2xs, peso bold, tracking --tracking-wide e nessun bordo. La forma (pillola) ora la condividono, come nel kit. I due punti di differenza dal Badge valgono ~3px di larghezza, ed e' quello che fa stare la riga prezzo dei correlati su una riga sola. */ .fm-badge--discount{background:var(--grad-flash);color:#fff;font-size:var(--text-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);border:0} .fm-pill{display:inline-flex;align-items:center;gap:8px;min-height:var(--control-sm);padding:0 14px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-subtle);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-body);text-decoration:none} /* --text-muted e' --ink-400 in entrambi i temi: non tematizzato, e sulla superficie della pill da' 4,43:1 in chiaro e 4,00:1 in scuro. Si usa il token semantico tematizzato --text-body (16,9:1 e 14,1:1). Il conteggio perde cosi' la gerarchia rispetto al nome: serve un token muted che passi 4,5:1, da chiedere al design system. */ .fm-pill__count{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-body)} @media(hover:hover){.fm-pill:hover{border-color:var(--border-brand);color:var(--text-strong);text-decoration:none}} /* Touch (§6.5): la pill e' alta --control-sm (36px), sotto i 44 richiesti. Sotto --bp-tablet il bersaglio sale a --touch-min; sopra resta compatta, come nella tavola. */ @media(max-width:767.98px){ /* --bp-tablet */ .fm-pill{min-height:var(--touch-min)} } /* --- Pannelli scorrevoli (nav mobile, filtri, ricerca) ------------------ */ .fm-panel{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none} .fm-panel.is-open{visibility:visible;pointer-events:auto} .fm-panel__scrim{position:absolute;inset:0;background:rgba(13,11,20,.5);opacity:0;transition:opacity var(--dur-base) var(--ease-out)} .fm-panel.is-open .fm-panel__scrim{opacity:1} .fm-panel__sheet{position:absolute;inset-block:0;inset-inline-end:0;width:min(420px,92vw);background:var(--bg-subtle);box-shadow:var(--shadow-xl);transform:translateX(100%);transition:transform var(--dur-slow,.28s) var(--ease-out,ease);display:flex;flex-direction:column;overflow:auto} .fm-panel.is-open .fm-panel__sheet{transform:none} .fm-panel--left .fm-panel__sheet{inset-inline:0 auto;transform:translateX(-100%)} .fm-panel--bottom .fm-panel__sheet{inset:auto 0 0 0;width:auto;max-height:84vh;transform:translateY(100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0} /* --- Blocco Ricerca di core --------------------------------------------- Il campo dell'header e' vestito in chrome.css, ma il blocco compare anche in search.html, product-search-results.html e 404.html, e li' restava quello di core: fondo bianco fisso e testo nero, illeggibile in tema scuro. Qui va la forma di base per tutti; chrome.css si carica dopo e continua a vincere sul campo dell'header, che ha una forma sua. */ .wp-block-search__inside-wrapper{background:var(--surface-card);border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:0 6px 0 14px} .wp-block-search__input{border:none;background:none;font-family:var(--font-body);font-size:var(--text-md);color:var(--text-strong);min-height:var(--control-md)} .wp-block-search__input::placeholder{color:var(--text-muted)} .wp-block-search__button{background:var(--accent);border:none;color:var(--on-accent);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:var(--fw-semibold)} /* --- Stato vuoto / errore (idiomi fissati, non reinventarli) ------------ */ /* --text-muted non e' tematizzato e resta sotto 4,5:1 su entrambe le bande (4,02 in chiaro, 4,41 in scuro): lo stato vuoto usa --text-body, come .fm-pill__count e i titoli dei filtri. Annotato per il design system. */ .fm-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-4);text-align:center;color:var(--text-body)} .fm-empty .fm-ico{color:var(--border-strong)} .fm-empty p{margin:0;font-size:var(--text-md)} .fm-error{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--danger-bg);color:var(--danger);font-size:var(--text-sm)} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Pezzo unico: e' un dato di magazzino, non un'offerta. Prende la forma degli altri badge ma il colore di avvertimento — lo stesso di "ne resta poco" — e non l'accento, che qui prometterebbe uno sconto che non c'e'. */ .fm-badge--unico{background:var(--warning-bg);color:var(--warning-text)} /* Esaurito: un dato, non un allarme — il neutro del tema, come i gradi senza colore. */ .fm-badge--esaurito{background:var(--surface-sunken);color:var(--text-body)} /* ======================================================== Moduli Contact Form 7 === Tutti i moduli CF7 del sito (sei in produzione: 685, 1023, 1046, 1566, 6762, 1106107). Legati al contenitore del componente, .wpcf7 (Regola 9). I moduli di oggi hanno l'etichetta come testo in un

e il campo nel

dopo: le regole seguono quel markup, senza pretendere