/* COPERTURA DEL ROSSO DI MARCHIO — generato, non si modifica a mano. * * python tools/genera_copertura_vesti.py * * PRIMA PARTE, ricavata da `app.css`: ogni regola ha lo STESSO selettore di * una regola di `app.css` che tinge col rosso del marchio, e ne ripete la * specificita': vince perche' si carica dopo. Usa solo variabili, che mette * il foglio della veste: questo file non ne dichiara nessuna, e senza il * foglio di una veste queste regole non fanno niente. * ⚠️ SECONDA PARTE, le aggiunte scritte a mano nel generatore (da «la * pastiglia della categoria scelta» in giu'): li' non vale ne' l'una ne' * l'altra cosa. Alcune hanno selettori propri (la pastiglia, `html, body`, i * campi sotto il pollice, le caselle in focus con `:where()`), e alcune * portano colori FISSI come ripiego per i browser senza `color-mix` (le * ombre e i bordi in focus: #0f6b4f in `rgba` e #448c76) — quelle * colorano anche senza variabili. * * ⚠️ Il rosso degli ERRORI (`--bs-danger`) non e' qui, ed e' voluto: un * messaggio di errore deve restare rosso anche sulla veste verde. * * Regole coperte: 79. Sorgente: `shared/dist/app.css`. */ a { color:var(--tema-primario) } a:hover { color:var(--tema-primario-scuro) } .form-check-input:checked { background-color:var(--tema-azione); border-color:var(--tema-azione) } .form-check-input[type=checkbox]:indeterminate { background-color:var(--tema-azione); border-color:var(--tema-azione) } .form-range::-webkit-slider-thumb { background-color:var(--tema-azione) } .form-range::-webkit-slider-thumb:active { background-color:var(--tema-azione-scura) } .form-range::-moz-range-thumb { background-color:var(--tema-azione) } .form-range::-moz-range-thumb:active { background-color:var(--tema-azione-scura) } .btn-primary { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-primary:disabled, .btn-primary.disabled { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-outline-primary { color:var(--tema-azione); border-color:var(--tema-azione) } .btn-outline-primary:hover { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-check:checked+.btn-outline-primary, .btn-check:active+.btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-outline-primary:disabled, .btn-outline-primary.disabled { color:var(--tema-azione) } .btn-link { color:var(--tema-primario) } .btn-link:hover { color:var(--tema-primario-scuro) } .dropdown-item:hover, .dropdown-item:focus { color:var(--tema-primario) } .dropdown-item.active, .dropdown-item:active { color:var(--tema-primario) } .nav-link:hover, .nav-link:focus { color:var(--tema-primario) } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color:var(--tema-primario); border-color:var(--tema-primario) } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color:var(--tema-azione) } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color:var(--tema-primario) } .navbar-light .navbar-nav .show>.nav-link, .navbar-light .navbar-nav .nav-link.active { color:var(--tema-primario) } .navbar-light .navbar-text a, .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { color:var(--tema-primario) } .page-link:focus { color:var(--tema-primario-scuro) } .page-item.active .page-link { background-color:var(--tema-azione) } .alert-primary { color:var(--tema-primario) } .progress-bar { background-color:var(--tema-azione) } .list-group-item.active { background-color:var(--tema-azione); border-color:var(--tema-azione) } .list-group-item-primary { color:var(--tema-primario) } .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { color:var(--tema-primario) } .list-group-item-primary.list-group-item-action.active { background-color:var(--tema-primario); border-color:var(--tema-primario) } .link-primary { color:var(--tema-primario) } .link-primary:hover, .link-primary:focus { color:var(--tema-primario) } .text-primary { color:var(--tema-primario) !important } .display-404 { text-shadow:-0.0625rem 0 var(--tema-primario),0 .0625rem var(--tema-primario),.0625rem 0 var(--tema-primario),0 -0.0625rem var(--tema-primario) } div.code-toolbar>.toolbar button { color:var(--tema-primario) !important } div.code-toolbar>.toolbar button:hover { background-color:var(--tema-primario) } .form-switch .form-check-input:checked { background-color:var(--tema-azione); box-shadow:0 .375rem .875rem -0.3rem var(--tema-azione) } .was-validated .form-check-input:valid:checked, .was-validated .form-check-input.is-valid:checked { border-color:var(--tema-azione); background-color:var(--tema-azione) } .form-check-input:checked~.form-option-label { border-color:var(--tema-azione); color:var(--tema-azione) } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn-primary.show { border-color:var(--tema-azione-scura); background-color:var(--tema-azione-scura) } .btn-wishlist:hover { color:var(--tema-primario) } .btn-video:hover { background-color:var(--tema-primario) } .dropdown-menu li:hover>.dropdown-item { color:var(--tema-primario) } .dropdown-menu .active>.dropdown-item { color:var(--tema-primario) } .nav-tabs .nav-link.active::before { background-color:var(--tema-primario) } a.nav-link:hover .media-tab-media { color:var(--tema-primario) } .nav-link.active .media-tab-media, .nav-link.active:hover .media-tab-media { border-color:var(--tema-primario); background-color:var(--tema-primario) } .nav-link.active .media-tab-title, .nav-link.active:hover .media-tab-title { color:var(--tema-primario) !important } .nav-link-style:hover { color:var(--tema-primario) } .active>.nav-link-style, .nav-link-style.active { color:var(--tema-primario) } .navbar-tool .navbar-tool-label { background-color:var(--tema-azione) } .navbar-light .nav-item:hover .nav-link:not(.disabled), .navbar-light .nav-item:hover .nav-link:not(.disabled)>i { color:var(--tema-primario) } .navbar-light .nav-item.active .nav-link:not(.disabled)>i, .navbar-light .nav-item.show .nav-link:not(.disabled)>i, .navbar-light .nav-item.dropdown .nav-link:focus:not(.disabled)>i, .navbar-light .nav-item.active .nav-link:not(.disabled), .navbar-light .nav-item.show .nav-link:not(.disabled), .navbar-light .nav-item.dropdown .nav-link:focus:not(.disabled) { color:var(--tema-primario) } .topbar-light .topbar-text>i, .topbar-light .topbar-link>i { color:var(--tema-primario) } .topbar-dark .topbar-text>i, .topbar-dark .topbar-link>i { color:var(--tema-primario) } .breadcrumb-item>a:hover { color:var(--tema-primario) } .entry-navigation-link:hover { color:var(--tema-primario) } .list-group-item-primary.active { background-color:var(--tema-primario) !important; border-color:var(--tema-primario) } .tns-carousel [data-nav].tns-nav-active { background-color:var(--tema-azione) } .steps-dark .step-item.active .step-count, .steps-dark .step-item.active .step-progress { background-color:var(--tema-azione) } .steps-light .step-item.active .step-count, .steps-light .step-item.active .step-progress { background-color:var(--tema-azione) } .testimonial .testimonial-mark { background-color:var(--tema-primario) } .widget-categories .accordion-button { color:var(--tema-primario) } .widget-categories .accordion-button:hover { color:var(--tema-primario) } .widget-list-link:hover { color:var(--tema-primario) } .active>.widget-list-link { color:var(--tema-primario) } .widget-product-title:hover>a { color:var(--tema-primario) } .btn-tag.active { border-color:var(--tema-azione); background-color:var(--tema-azione) } .range-slider-ui .noUi-connect { background-color:var(--tema-azione) } .product-title>a:hover { color:var(--tema-primario) } .product-gallery-thumblist-item.active { border-color:var(--tema-primario) } .blog-entry-title>a:hover { color:var(--tema-primario) } .offcanvas-expand .offcanvas-body .active>.widget-list-link { border-left-color:var(--tema-primario) } .js-action-favorite-button .icon-on { color:var(--tema-primario) } .swal2-styled.swal2-confirm { background-color:var(--tema-azione) !important; border:1px solid var(--tema-azione) !important } .toast .btn-close { color:var(--tema-primario) } .pagination .page-item.active .page-link { border-color:var(--tema-azione); color:var(--tema-azione) } /* --- la pastiglia della categoria scelta ----------------------------- */ /* ⛔ Restava rossa in tutte e tre le vesti: `app.css` la tinge con `.nav-pills .nav-link.active`, che pero' sul sito non e' il selettore che vince. Misurato sul rendering vero, non dedotto dal foglio. */ .nav-link.rounded-pill.active, .nav-link.rounded-pill.active:hover, .nav-link.rounded-pill.active:focus { background-color: var(--tema-azione) !important; border-color: var(--tema-azione) !important; color: #fff !important; } /* --- il pallino del carrello ----------------------------------------- */ .navbar-tool-label { background-color: var(--tema-azione) !important; } /* --- le ombre rosse sotto gli elementi verdi ------------------------- */ /* ⛔ Restavano rosse: in `app.css` sono scritte in `rgba(239,0,0,…)`, e il generatore cerca i rossi solo in esadecimale. 📏 Misurate il 25 set 2026 sul sito vivo in veste h: · `.btn-primary.btn-shadow` (pulsante dell'invito in home): fondo rgb(15,107,79), ombra rgba(239,0,0,.9); · `.nav-pills .nav-link.active` (la pastiglia della categoria scelta): fondo verde, ombra rgba(239,0,0,.9); · `.form-control:focus` (campo del telefono in /accesso/, stato forzato da CDP): alone rgba(239,0,0,.15), visibile nella schermata, e BORDO #f78080 — lo stesso rosa che `app.css` da' a `.form-select:focus` e a `.form-check-input:focus` (casella dei filtri NON spuntata, in /alberi-284/prodotti: bordo #f78080, alone rgba(239,0,0,.25) con geometria 0 0 0 0, cioe' invisibile). · IL BORDO IN FOCUS e' il colore d'azione al 78% col bianco: #448c76 per #0f6b4f (0,78×15+0,22×255 = 68, 0,78×107+56,1 = 140, 0,78×79+56,1 = 118). ⛔ Non al 50% come il rosa (#87b5a7): contrasto WCAG calcolato il 25 set 2026 — #87b5a7 da' 2,28:1 sul bianco e 1,73:1 sul bordo a riposo dei campi rgb(218,225,231), PEGGIO del rosa (2,51 e 1,90); #448c76 da' 3,99:1 e 3,02:1, sopra il 3:1 che WCAG chiede ai bordi dei comandi. Sul bordo a riposo delle caselle, rgb(193,205,215), e' 2,47:1: sotto il 3:1, ma sopra il rosa di prima (1,55:1). · LA CASELLA SPUNTATA NON SI TOCCA: in focus resta verde pieno (misurato prima e dopo). Per questo la regola delle caselle esclude, con `:where()` per non alzare la specificita', le spuntate, le CASELLE «a meta'» e quelle segnate valide o in errore. ⚠️ «a meta'» si scrive `[type="checkbox"]:indeterminate` e non `:indeterminate` da solo: in Chrome risponde a `:indeterminate` anche ogni RADIO di un gruppo in cui non e' scelto niente (misurato da una verifica del 25 set 2026), e quei radio — i filtri a scelta singola, il checkout — restavano rosa. `app.css` da' a `.form-check-input.is-invalid` il bordo dell'errore con la STESSA specificita', e senza l'esclusione questo foglio, caricato dopo, glielo coprirebbe. ⚠️ Un browser senza `:where()` scarta la regola e mostra il rosa di prima. Stessa geometria e stessa alfa di `app.css`, col colore d'azione. ⚠️ Il ripiego fuori da `@supports` e' `#0f6b4f` (qui in `rgba`) scritto a mano: e' il `--tema-azione` di TUTTE le vesti che caricano questo foglio (b..h, controllato il 25 set 2026); `color-mix` con `var()` non ricadrebbe su una riga precedente, quindi il colore del tema passa solo dentro `@supports`. Se una veste cambia `--tema-azione`, sui browser senza `color-mix` queste ombre restano verdi. */ .btn-primary.btn-shadow { box-shadow: 0 .5rem 1.125rem -0.5rem rgba(15, 107, 79, .9); } .nav-pills .nav-link.active { box-shadow: 0 .5rem 1.125rem -0.5rem rgba(15, 107, 79, .9); } .form-control:focus { box-shadow: inset 0 1px 2px transparent, 0 .375rem .625rem -0.3125rem rgba(15, 107, 79, .15); } .form-control:focus, .form-select:focus { border-color: #448c76; } .form-check-input:focus:where(:not(:checked):not([type="checkbox"]:indeterminate):not(.is-valid):not(.is-invalid)) { border-color: #448c76; box-shadow: 0 0 0 0 rgba(15, 107, 79, .25); } @supports (color: color-mix(in srgb, red 50%, transparent)) { .btn-primary.btn-shadow, .nav-pills .nav-link.active { box-shadow: 0 .5rem 1.125rem -0.5rem color-mix(in srgb, var(--tema-azione) 90%, transparent); } .form-control:focus { box-shadow: inset 0 1px 2px transparent, 0 .375rem .625rem -0.3125rem color-mix(in srgb, var(--tema-azione) 15%, transparent); } .form-control:focus, .form-select:focus, .form-check-input:focus:where(:not(:checked):not([type="checkbox"]:indeterminate):not(.is-valid):not(.is-invalid)) { border-color: color-mix(in srgb, var(--tema-azione) 78%, #fff); } .form-check-input:focus:where(:not(:checked):not([type="checkbox"]:indeterminate):not(.is-valid):not(.is-invalid)) { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tema-azione) 25%, transparent); } } /* ⛔ E IL PASSAGGIO DEL MOUSE LA SPEGNE, come prima: `app.css` ha `.btn-shadow:hover { box-shadow: none }`, che la regola qui sopra — stessa specificita', foglio caricato dopo — scavalcava. Un selettore piu' forte rimette il comportamento di sempre. La pastiglia attiva in `app.css` non ha un `:hover` che le tolga o cambi l'ombra (quello che c'e' esclude `.active`), quindi per lei non serve niente. */ .btn-primary.btn-shadow:hover { box-shadow: none; } /* --- le utility di colore -------------------------------------------- */ /* ⚠️ Con `!important`: le utility di Bootstrap ce l'hanno, e senza non verrebbero coperte. E' il motivo per cui il simbolo € restava rosso. */ .text-primary { color: var(--tema-primario) !important; } .bg-primary { background-color: var(--tema-azione) !important; } .border-primary { border-color: var(--tema-primario) !important; } .badge.bg-primary { background-color: var(--tema-azione) !important; } /* --- il telefono: quello che vale per TUTTE le vesti ------------------ */ /* ⛔ Le vesti devono venire su bene sul telefono per come sono fatte, non perche' qualcuno ci ha messo una pezza dopo. Qui stanno le poche cose che valgono per tutte; il resto lo fa ogni veste nel proprio foglio. */ /* La barra delle categorie scorre col dito — quello e' voluto — ma il suo limite era scritto con l'ALTEZZA al posto della larghezza (`100vh`): su un telefono valeva 852px su uno schermo da 420, quindi non limitava piu' niente e la pagina scorreva lateralmente di 2px. Misurato in produzione il 26 ago 2026. ⚠️ Il sorgente e' gia' corretto in `styles/custom/_user.scss`: questa riga serve finche' `app.css` non viene ricompilato, e quando lo sara' dira' semplicemente la stessa cosa. */ @media (max-width: 767.98px) { .dj-category-related { max-width: calc(100vw - 3rem); } } /* Niente scorrimento laterale della PAGINA, in nessuna veste: su un telefono una pagina che balla di lato mentre si scorre in verticale sembra rotta. ⛔ IL VALORE E' `clip`, NON PIU' SOLO `hidden`. Il CSS ha una regola per cui un elemento con `overflow-x` diverso da `visible` (e diverso da `clip`: e' l'UNICA altra eccezione) si vede costringere ANCHE `overflow-y` a `auto`, mai `visible` — non e' un baco del browser, e' la specifica. Su `html`/`body`, che hanno gia' `height: 100%` per il piede di pagina fisso (vedi `theme/_reboot.scss`), quell'`auto` forzato li trasformava in due contenitori di scorrimento propri, chiusi esattamente all'altezza della finestra: `` smetteva di crescere col contenuto reale, e a scorrere era `` per conto suo. La finestra (`window`) non si muoveva piu' — verificato dal vivo su dicaniostore.it: `window.scrollTo()` restava fermo a 0, mentre `document.body.scrollTop` si spostava. Qualunque codice che ascolta lo scorrimento della finestra (lo scroll infinito, un domani un pulsante "torna su") smetteva di vedere l'utente scorrere. ⛔ IL PRIMO TENTATIVO (spostare `hidden` su `.page-wrapper`/`.footer`, invece di cambiarne il valore) e' stato SCARTATO dalla verifica avversariale: `.page-wrapper` non ha mai un'altezza propria, quindi non scorre mai al suo interno — ma diventava comunque, per la stessa regola, un "antenato con meccanismo di scorrimento", e questo e' esattamente cio' che `position: sticky` usa come riferimento. Misurato dalla verifica avversariale (pagina ricostruita, `getBoundingClientRect()` durante lo scroll): la colonna dei filtri (`.dj-risultati__filtri`, `position: sticky`) smetteva di restare appiccicata e scorreva via con la pagina. `clip` non ha questo effetto perche' e' l'altra eccezione alla stessa regola: `overflow-y` di `html`/`body` resta `visible` (verificato dal vivo), quindi — toccando solo questi due selettori — nessun nuovo elemento nell'albero diventa un "antenato con meccanismo di scorrimento". Riverificato dal vivo anche sulla colonna dei filtri stessa: con `clip` resta ferma durante lo scroll, invece di scorrere via. ⚠️ SUPPORTO BROWSER: `overflow: clip` esiste solo da Chrome 90, Firefox 81, Safari 16 (fonte: caniuse.com) — sotto queste versioni non e' un valore valido, e una dichiarazione CSS con un valore che il browser non conosce viene scartata SENZA rompere le altre. Per questo restano DUE righe: la prima (`hidden`) e' quella che i browser piu' vecchi del `browserslist` di questo progetto (Safari 10+, Chrome 60+) continuano a vedere e ad applicare — stesso comportamento di oggi per loro, ne' meglio ne' peggio; la seconda (`clip`), quando il browser la capisce, VINCE perche' e' dichiarata dopo, ed e' quella che risolve lo scorrimento rotto. */ html, body { overflow-x: hidden; overflow-x: clip; } /* I bersagli sotto il pollice. 44px non e' scelto a occhio: e' la misura sotto la quale le linee guida di Apple e di Google danno il bersaglio per troppo piccolo. Su un catalogo sbagliare a premere vuol dire comprare la cosa sbagliata. */ @media (max-width: 767.98px) { .btn:not(.btn-sm):not(.btn-icon), .form-control, .form-select { min-height: 44px; } }