/* ========================================================================= DIGITALIA 2026 - evolution redesign - Eliquid France Italia Tema ZOneTheme / PrestaShop 1.7.8.7 Ultimo foglio della head: a parita' di specificita' vince per ordine. NOTA DI SPECIFICITA': il tema usa selettori a 4 classi (.product-list .grid .product-miniature X) e selettori con ID (#amegamenu .anav-top .amenu-link). Qui li rispecchiamo, altrimenti le regole non entrano mai in vigore. Niente !important. Backup: head.tpl.prima-digitalia - digitalia-2026.css.v1 v2 - 07/10/2026 - card (specificita' corretta) + header e navigazione ========================================================================= */ :root{ --d-ink:#141414; --d-ink-2:#5a5e5c; --d-ink-3:#8b908d; --d-line:#e7e9e8; --d-line-2:#d3d7d5; --d-bg-soft:#f6f7f6; --d-accent:#25a10a; --d-accent-ink:#146106; --d-accent-soft:#eef7ec; --d-promo:#b3261e; --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:80px; --d-r:3px; --d-e:cubic-bezier(.4,0,.2,1); --d-t:220ms; } .product-miniature a:focus-visible, .product-miniature button:focus-visible, #header a:focus-visible, #header button:focus-visible{ outline:2px solid var(--d-accent-ink); outline-offset:2px; border-radius:2px; } @media (prefers-reduced-motion:reduce){ .product-miniature,.product-miniature *, #header,#header *{ transition-duration:1ms !important; animation-duration:1ms !important; } } /* ========================================================================= 1. CARD PRODOTTO ========================================================================= */ .product-list .grid .product-miniature, .products .product-miniature{ display:flex; padding:0 var(--s2); margin-bottom:var(--s5); } .product-list .grid .product-miniature > .product-container, .products .product-miniature > .product-container{ display:flex; flex-direction:column; width:100%; background:#fff; border:1px solid var(--d-line); border-radius:var(--d-r); overflow:hidden; box-shadow:none; transition:border-color var(--d-t) var(--d-e), box-shadow var(--d-t) var(--d-e); } .product-list .grid .product-miniature > .product-container:hover, .products .product-miniature > .product-container:hover{ border-color:var(--d-line-2); box-shadow:0 6px 24px rgba(16,20,18,.08); } .product-list .grid .product-miniature .second-third-block, .products .product-miniature .second-third-block{ display:flex; flex-direction:column; flex:1 1 auto; padding:0; } /* ---- immagine ---- */ .product-list .grid .product-miniature .first-block, .products .product-miniature .first-block{ position:relative; overflow:hidden; background:#fff; } .product-list .grid .product-miniature .product-thumbnail, .products .product-miniature .product-thumbnail{margin:0} .product-list .grid .product-miniature .product-thumbnail img, .products .product-miniature .product-thumbnail img{ display:block; width:100%; height:auto; transition:transform 320ms var(--d-e); } .product-list .grid .product-miniature > .product-container:hover .product-thumbnail img, .products .product-miniature > .product-container:hover .product-thumbnail img{ transform:scale(1.035); } @media (hover:hover){ .product-list .grid .product-miniature .grid-hover-btn, .products .product-miniature .grid-hover-btn{ opacity:0; transition:opacity var(--d-t) var(--d-e); } .product-list .grid .product-miniature > .product-container:hover .grid-hover-btn, .products .product-miniature > .product-container:hover .grid-hover-btn{opacity:1} } /* ---- nome: via la fascia grigia e la centratura ---- */ .product-list .grid .product-miniature .second-block, .products .product-miniature .second-block{padding:var(--s3) var(--s3) 0} .product-list .grid .product-miniature .second-block > div, .products .product-miniature .second-block > div{margin:0 0 var(--s1)} .product-list .grid .product-miniature .product-name, .products .product-miniature .product-name{ background:none; padding:0; margin:0 0 var(--s1); text-align:left; font-family:Roboto,sans-serif; font-size:14px; font-weight:500; line-height:1.35; letter-spacing:.005em; min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .product-list .grid .product-miniature .product-name a, .products .product-miniature .product-name a{ display:block; text-align:left; color:var(--d-ink); text-decoration:none; transition:color var(--d-t) var(--d-e); } .product-list .grid .product-miniature .product-name a:hover, .products .product-miniature .product-name a:hover{color:var(--d-accent-ink)} /* ---- disponibilita' ---- */ .product-list .grid .product-miniature .product-availability, .products .product-miniature .product-availability{ margin:0 0 var(--s1); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; } .product-list .grid .product-miniature .product-availability span, .products .product-miniature .product-availability span{ display:inline-block;padding:0;background:none;border:0; } .product-list .grid .product-miniature .product-availability .product-available, .products .product-miniature .product-availability .product-available{color:var(--d-accent-ink)} .product-list .grid .product-miniature .product-availability .product-unavailable, .product-list .grid .product-miniature .product-availability .product-last-items, .products .product-miniature .product-availability .product-unavailable{color:var(--d-promo)} .product-list .grid .product-miniature .product-description-short, .products .product-miniature .product-description-short{display:none} /* ---- blocco inferiore: prezzo sopra, azione sotto ---- */ .product-list .grid .product-miniature .third-block, .products .product-miniature .third-block{ display:block; align-items:initial; justify-content:initial; min-height:0; margin-top:auto; padding:var(--s2) var(--s3) var(--s3); } .product-list .grid .product-miniature .third-block-left, .products .product-miniature .third-block-left{margin:0 0 var(--s2)} .product-list .grid .product-miniature .product-price-and-shipping, .products .product-miniature .product-price-and-shipping{display:block} .product-list .grid .product-miniature .first-prices, .products .product-miniature .first-prices{margin:0} .product-list .grid .product-miniature .price, .product-list .grid .product-miniature .product-price, .products .product-miniature .price{ font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--d-ink); font-variant-numeric:tabular-nums; } .product-list .grid .product-miniature .regular-price, .products .product-miniature .regular-price{ font-size:13px; font-weight:400; color:var(--d-ink-3); text-decoration:line-through; } .product-list .grid .product-miniature .discount-percentage, .product-list .grid .product-miniature .discount-amount, .products .product-miniature .discount-percentage{ display:inline-block; margin-left:var(--s1); padding:2px 6px; border-radius:2px; background:var(--d-promo); color:#fff; font-size:11px; font-weight:600; letter-spacing:.02em; line-height:1.4; } /* imposta di consumo: informazione, non titolo */ .product-list .grid .product-miniature .third-prices, .products .product-miniature .third-prices{display:block;margin:var(--s1) 0 0} .product-list .grid .product-miniature .third-prices br, .product-list .grid .product-miniature .third-prices span[style*="width:100%"], .products .product-miniature .third-prices br{display:none} .product-list .grid .product-miniature .tax-label, .product-list .grid .product-miniature .labels-tax-long, .products .product-miniature .tax-label{ display:block; color:var(--d-ink-3); font-weight:400; line-height:1.4; letter-spacing:0; } /* ---- azione ---- */ .product-list .grid .product-miniature .buttons-sections, .products .product-miniature .buttons-sections{ display:flex; gap:var(--s1); margin:0; } .product-list .grid .product-miniature .buttons-sections .btn.add-to-cart, .products .product-miniature .buttons-sections .btn.add-to-cart{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 var(--s2); border:1px solid var(--d-ink); border-radius:var(--d-r); background-color:var(--d-ink); color:#fff; font-size:13px; font-weight:500; letter-spacing:.02em; box-shadow:none; transition:background-color var(--d-t) var(--d-e), border-color var(--d-t) var(--d-e), color var(--d-t) var(--d-e); } .product-list .grid .product-miniature .buttons-sections .btn.add-to-cart:hover, .products .product-miniature .buttons-sections .btn.add-to-cart:hover{ background-color:var(--d-accent-ink); border-color:var(--d-accent-ink); color:#fff; } /* quando il prodotto non e' acquistabile resta solo "Dettagli": il tema nasconde details-link solo se segue add-to-cart, quindi qui e' sempre da solo e deve occupare tutta la riga */ .product-list .grid .product-miniature .buttons-sections .details-link, .products .product-miniature .buttons-sections .details-link{ flex:1 1 auto; background-color:#fff; color:var(--d-ink); border-color:var(--d-line-2); } .product-list .grid .product-miniature .buttons-sections .details-link:hover, .products .product-miniature .buttons-sections .details-link:hover{ background-color:#fff; color:var(--d-accent-ink); border-color:var(--d-accent-ink); } /* ========================================================================= 2. BADGE ========================================================================= */ .product-miniature .product-flags{ position:absolute; top:var(--s2); left:var(--s2); z-index:2; margin:0;padding:0;list-style:none; display:flex;flex-direction:column;align-items:flex-start;gap:6px; } .product-miniature .product-flags li.product-flag{ margin:0; padding:4px 8px; border-radius:2px; background:var(--d-ink); color:#fff; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; } .product-miniature .product-flags li.product-flag.discount, .product-miniature .product-flags li.product-flag.on-sale{background:var(--d-promo)} .product-miniature .product-flags li.product-flag.out_of_stock{ background:#fff;color:var(--d-ink-2);border:1px solid var(--d-line-2); } .product-miniature .product-flags li.product-flag.pack, .product-miniature .product-flags li.product-flag.online-only{ background:var(--d-accent-soft);color:var(--d-accent-ink); } /* ========================================================================= 3. GRIGLIA ========================================================================= */ .product-list .products.product-list-wrapper{ margin-left:calc(var(--s2) * -1); margin-right:calc(var(--s2) * -1); } @media (max-width:767.98px){ .product-list .grid .product-miniature{width:50%;padding:0 6px;margin-bottom:var(--s4)} .product-list .products.product-list-wrapper{margin-left:-6px;margin-right:-6px} .product-list .grid .product-miniature .second-block{padding:var(--s2) var(--s2) 0} .product-list .grid .product-miniature .third-block{padding:var(--s1) var(--s2) var(--s2)} .product-list .grid .product-miniature .product-name{font-size:13px} .product-list .grid .product-miniature .price{font-size:17px} .product-list .grid .product-miniature .buttons-sections .btn.add-to-cart{font-size:12px;min-height:42px} } /* ========================================================================= 4. HEADER E NAVIGAZIONE ========================================================================= */ /* barra utility: sussurra, non parla */ #header .header-nav{ background:#fff; border-bottom:1px solid var(--d-line); font-size:12px; color:var(--d-ink-2); } #header .header-nav .header-nav-wrapper{min-height:38px} #header .header-nav a{color:var(--d-ink-2);transition:color var(--d-t) var(--d-e)} #header .header-nav a:hover{color:var(--d-ink)} /* fascia logo: respiro, e si comprime quando ci si attacca */ #header .main-header{background:#fff} #header .main-header .header-wrapper{ padding-top:var(--s4); padding-bottom:var(--s4); transition:padding var(--d-t) var(--d-e); } /* barra menu: via il grigio #f7f7f7, dentro due hairline */ #header .header-bottom{background:#fff} #header .header-bottom .header-main-menu{ background:#fff; border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); } #header .header-bottom .header-main-menu-wrapper{min-height:52px} /* voci di primo livello: da Roboto Condensed 700 a Roboto 500 */ #amegamenu .anav-top{margin:0;justify-content:center} #amegamenu .anav-top .amenu-link{ font-family:Roboto,sans-serif; font-size:14px; font-weight:500; letter-spacing:.02em; color:var(--d-ink); padding-left:var(--s3); padding-right:var(--s3); min-height:52px; transition:color var(--d-t) var(--d-e); } #amegamenu .anav-top .amenu-link:hover{color:var(--d-accent-ink)} /* sottolineatura che cresce da sinistra: 220 ms, nessun movimento di layout */ #amegamenu .anav-top .amenu-item{position:relative} #amegamenu .anav-top .amenu-item::after{ content:""; position:absolute; left:var(--s3);right:var(--s3);bottom:0; height:2px; background:var(--d-ink); transform:scaleX(0); transform-origin:left center; transition:transform var(--d-t) var(--d-e); } #amegamenu .anav-top .amenu-item:hover::after{transform:scaleX(1)} /* tendina: niente angoli arrotondati ne' ombra dura */ #amegamenu .anav-top .adropdown{ background:#fff; border:1px solid var(--d-line); border-radius:0; box-shadow:0 12px 32px rgba(16,20,18,.10); margin-top:0; padding:var(--s4) 0; } /* sticky: il tema aggiunge gia' .is-sticky, qui lo vestiamo e lo stringiamo */ #header .is-sticky{ background:rgba(255,255,255,.97); -webkit-backdrop-filter:saturate(180%) blur(8px); backdrop-filter:saturate(180%) blur(8px); box-shadow:0 1px 0 var(--d-line), 0 6px 20px rgba(16,20,18,.07); transition:box-shadow var(--d-t) var(--d-e); } .is-sticky #amegamenu .anav-top .amenu-link{ min-height:46px; font-size:13.5px; } .is-sticky .header-main-menu{border-top:0} /* menu mobile: accordion con hairline, righe da 52px */ #mobile-amegamenu .anav-top{ background:#fff; border-top:1px solid var(--d-line); padding:0; } #mobile-amegamenu .anav-top .amenu-item{border-bottom:1px solid var(--d-line)} #mobile-amegamenu .anav-top .amenu-link{ font-family:Roboto,sans-serif; font-size:15px; font-weight:500; color:var(--d-ink); min-height:52px; padding-left:var(--s3); padding-right:var(--s3); } #mobile-amegamenu .anav-top .amenu-item::after{display:none} /* bersagli touch da 44px */ #header .mobile-menu-icon{min-width:44px;min-height:44px} #header .blockcart .cart-link{min-height:44px;display:inline-flex;align-items:center} @media (max-width:991.98px){ #header .main-header .header-wrapper{padding-top:var(--s2);padding-bottom:var(--s2)} } /* ========================================================================= v3 - 07/10/2026 - correzioni dopo la prima lettura visiva ========================================================================= */ /* --- A. il prezzo non era a filo con nome e nota imposta ----------------- Causa: il tema applica .product-list .product-miniature .product-price-and-shipping{margin:0 -3px} e {... span{margin:0 3px}}, piu' un justify-content:center su .second-prices quando c'e' has-aeuc. Qui riportiamo tutta la colonna prezzo sullo stesso filo sinistro. */ .product-list .grid .product-miniature .third-block-left, .product-list .product-miniature .third-block-left, .product-list .grid .product-miniature .product-price-and-shipping, .product-list .product-miniature .product-price-and-shipping, .product-list .product-miniature .product-price-and-shipping.has-aeuc .second-prices, .product-list .grid .product-miniature .first-prices, .product-list .grid .product-miniature .second-prices, .product-list .grid .product-miniature .third-prices{ justify-content:flex-start; align-items:baseline; text-align:left; margin-left:0; margin-right:0; } .product-list .product-miniature .product-price-and-shipping span{margin-left:0} .product-list .grid .product-miniature .first-prices > span:first-child, .product-list .product-miniature .first-prices > span:first-child{margin-left:0} /* --- B. "Dettagli" restava nero come "Compra" ---------------------------- Causa mia: la mia regola su .btn.add-to-cart conta 6 classi, quella su .details-link ne contava 5, quindi perdeva contro me stesso. Qui la portiamo a 7 e 6 classi. */ .product-list .grid .product-miniature .buttons-sections .btn.add-to-cart.details-link, .product-list .product-miniature .buttons-sections .btn.add-to-cart.details-link, .products .product-miniature .buttons-sections .btn.add-to-cart.details-link{ background-color:#fff; color:var(--d-ink); border-color:var(--d-line-2); } .product-list .grid .product-miniature .buttons-sections .btn.add-to-cart.details-link:hover, .product-list .product-miniature .buttons-sections .btn.add-to-cart.details-link:hover, .products .product-miniature .buttons-sections .btn.add-to-cart.details-link:hover{ background-color:#fff; color:var(--d-accent-ink); border-color:var(--d-accent-ink); } /* --- C. stacco fra immagine e corpo della card -------------------------- Molti prodotti hanno sfondo fotografico, altri bianco: senza una riga di separazione i secondi si fondono con la card. */ .product-list .grid .product-miniature .first-block, .product-list .product-miniature .first-block, .products .product-miniature .first-block{ border-bottom:1px solid var(--d-line); } /* --- D. menu: due righe centrate davvero sfilacciate -------------------- 18 voci di primo livello non stanno su una riga a nessuna larghezza. Finche' restano 18, almeno le due righe condividono il filo sinistro. */ #amegamenu .anav-top{justify-content:flex-start} #amegamenu .anav-top .amenu-link{ font-size:13px; letter-spacing:.05em; padding-left:var(--s2); padding-right:var(--s2); min-height:44px; } #amegamenu .anav-top .amenu-item::after{left:var(--s2);right:var(--s2)} .is-sticky #amegamenu .anav-top .amenu-link{min-height:40px;font-size:12.5px} /* --- E. badge NEW del menu ---------------------------------------------- Il colore arriva da uno style inline per ogni voce, quindi non lo tocco. Qui sistemo forma, peso e posizione, e aggiungo un filo interno perche' il badge "NOVITA" e' configurato bianco su bianco: oggi e' invisibile. */ #amegamenu .anav-top .amenu-link > sup{ top:2px; right:0; padding:2px 5px; border-radius:2px; font-size:9px; font-weight:600; letter-spacing:.06em; line-height:1.3; box-shadow:inset 0 0 0 1px rgba(20,20,20,.18); } /* --- F. ricerca, account e carrello sulla stessa riga ottica ------------- */ #header .search-widget form input[type=text]{ height:44px; border-color:var(--d-line-2); border-radius:var(--d-r); padding-left:var(--s3); font-size:14px; transition:border-color var(--d-t) var(--d-e); } #header .search-widget form input[type=text]:focus{ border-color:var(--d-ink); box-shadow:none; } #header .search-widget form button[type=submit]{ height:44px; border-radius:0 var(--d-r) var(--d-r) 0; } #header .user-info .account-link, #header .cart-preview .cart-header .cart-link{ min-height:40px; display:inline-flex; align-items:center; border-radius:var(--d-r); font-size:13px; font-weight:500; padding:0 var(--s2); } #header .user-info .account-link{ border:1px solid var(--d-line-2); color:var(--d-ink); transition:border-color var(--d-t) var(--d-e), color var(--d-t) var(--d-e); } #header .user-info .account-link:hover{ border-color:var(--d-ink); color:var(--d-ink); } /* ========================================================================= v4 - 07/10/2026 - Priorita' 3: tipografia editoriale e ritmo Nota: la dimensione del testo di base NON viene toccata finche' non posso verificare a schermo. Qui si interviene solo dove la regola del tema e' identificata e il rischio di regressione e' nullo. ========================================================================= */ /* --- titoli di sezione ----------------------------------------------- Il tema li fa in Roboto Condensed 700 a 24px, con dietro una texture PNG ripetuta (background-image in base64). Condensato + grassetto + texture sono i tre stilemi che datano di piu' la pagina. */ .title-block{ font-family:Roboto,sans-serif; font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--d-ink); text-transform:none; } .background-for-title .title-block{ background-image:none; background-color:transparent; } .title-block.d-flex{align-items:baseline} /* il link "Mostra di piu'": da testo grigio a micro-etichetta con verso */ .title-block .view-all-link{ font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--d-ink-2); text-decoration:none; transition:color var(--d-t) var(--d-e); } .title-block .view-all-link:hover{color:var(--d-accent-ink)} .title-block .view-all-link::after{ content:""; display:inline-block; margin-left:6px; transform:translateX(0); transition:transform var(--d-t) var(--d-e); } .title-block .view-all-link:hover::after{transform:translateX(3px)} /* --- riquadri: da scatole bordate a blocchi separati da hairline ------ */ .column-block{border-color:var(--d-line)} .column-block.no-box{border:0} /* --- briciole di pane: devono guidare, non competere ------------------ */ .breadcrumb-wrapper{padding-top:var(--s3);padding-bottom:var(--s3)} .breadcrumb{ background:none; padding:0; margin:0; font-size:12px; letter-spacing:.02em; } .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a{color:var(--d-ink-3);text-decoration:none} .breadcrumb .breadcrumb-item a:hover{color:var(--d-ink)} .breadcrumb .breadcrumb-item:last-child, .breadcrumb .breadcrumb-item.active{color:var(--d-ink)} /* --- ritmo verticale fra le sezioni ---------------------------------- */ .md-bottom{margin-bottom:var(--s6)} .sm-bottom{margin-bottom:var(--s4)} /* --- elenco categorie in colonna: righe, non elenco puntato ----------- */ .category-tree .category-sub-menu{margin:0} .left-categories .category-tree li > a{ display:block; padding:10px 0; font-size:13px; color:var(--d-ink-2); border-bottom:1px solid var(--d-line); transition:color var(--d-t) var(--d-e); } .left-categories .category-tree li > a:hover{color:var(--d-ink)} /* --- numeri sempre tabulari dove contano ------------------------------ */ .price,.product-price,.cart-total-value,.total-products, .product-prices .current-price{font-variant-numeric:tabular-nums} /* ========================================================================= v5 - 07/10/2026 - due correzioni trovate guardando il sito dal browser ========================================================================= */ /* --- A. REGRESSIONE MIA: le tendine del mega menu finivano fuori schermo - In v2 avevo messo position:relative su .amenu-item per appoggiarci la sottolineatura. Ma .adropdown e' in position:absolute e il tema calcola il suo "left" rispetto a #amegamenu (che e' gia' relative): cambiando il blocco contenitore, ogni tendina veniva spinta a destra di centinaia di pixel -> barra di scorrimento orizzontale e menu inutilizzabile. Il tema ha gia' una sua sottolineatura che cresce dal centro (border-top 2px, left:52% right:50% -> 0/0 in hover): uso quella. */ #amegamenu .anav-top .amenu-item{position:static} #amegamenu .anav-top .amenu-item::after{content:none} /* --- B. il prezzo era ancora centrato ----------------------------------- La regola vincente e' .pg-bnl .product-list .grid .product-miniature .product-price-and-shipping{justify-content:center}: cinque classi, con il prefisso di opzione tema .pg-bnl che non avevo considerato. body[class] aggiunge un elemento alla specificita' e vale per qualunque opzione .pg-* sia attiva. */ body[class] .product-list .grid .product-miniature .product-price-and-shipping, body[class] .product-list .product-miniature .product-price-and-shipping{ justify-content:flex-start; text-align:left; } body[class] .product-list .grid .product-miniature .first-prices, body[class] .product-list .grid .product-miniature .second-prices, body[class] .product-list .grid .product-miniature .third-prices{ justify-content:flex-start; } /* ========================================================================= v6 - 07/10/2026 Il tema teneva margin:0 45px su .anav-top per lasciare spazio al pulsante hamburger che sta a sinistra della barra. In v2 l'avevo azzerato e in v3 ho allineato a sinistra: risultato, le voci finivano sotto l'icona ("ESPOSITORI LED" tagliato in "SITORI LED"). Riservo lo spazio solo a sinistra, dove serve davvero. ========================================================================= */ #amegamenu .anav-top{margin:0 0 0 56px} @media (max-width:1199.98px){ #amegamenu .anav-top{margin-left:48px} #amegamenu .anav-top .amenu-link{padding-left:10px;padding-right:10px;font-size:12.5px} } /* ========================================================================= v7 - 07/10/2026 - contenimento dell'overflow su schermi stretti NON e' una regressione mia: senza questo foglio l'overflow e' perfino maggiore (1346 px contro 1219 su una finestra da 506). La causa e' che .mobile-header-version e #mobile-amegamenu NON vengono proprio generati: il tema serve l'header desktop anche al telefono, e le tendine del mega menu restano posizionate a oltre 1000 px da sinistra. overflow-x:clip (non hidden) non crea un contesto di scorrimento, quindi non interferisce con l'header sticky ne' con il pannello off-canvas. ========================================================================= */ @media (max-width:991.98px){ body{overflow-x:clip} #amegamenu .anav-top{margin-left:44px} #amegamenu .anav-top .amenu-link{ font-size:12px; padding-left:8px; padding-right:8px; min-height:38px; letter-spacing:.03em; } #header .header-bottom .header-main-menu-wrapper{min-height:0} #header .search-widget{width:100%} } /* ========================================================================= v8 - 07/10/2026 - Priorita' 5: pagina prodotto Tutti i selettori partono da #product (id sul body in PrestaShop): (1,x,0) batte senza fatica le regole a sole classi del tema. ========================================================================= */ /* --- titolo: da Roboto Condensed 700 a Roboto 600 --------------------- */ #product .product-information h1, #product h1{ font-family:Roboto,sans-serif; font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-.02em; color:var(--d-ink); text-transform:none; margin:0 0 var(--s3); } /* --- riferimento ed EAN: sono metadati, non titoli -------------------- */ #product .product-reference, #product .product-reference span, #product .product-reference dt, #product .product-reference dd{ font-size:12px; font-weight:400; color:var(--d-ink-3); letter-spacing:.01em; } #product .product-reference{margin-bottom:var(--s4)} /* --- prezzo: nero, grande, cifre tabulari ---------------------------- */ #product .product-price, #product .product-prices .current-price span, #product .product-prices .price{ color:var(--d-ink); font-family:Roboto,sans-serif; font-size:30px; font-weight:600; line-height:1.1; letter-spacing:-.015em; font-variant-numeric:tabular-nums; } #product .product-prices{margin-bottom:var(--s3)} #product .product-prices .current-price{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap} /* le due note fiscali diventano una riga sola, subordinata */ #product .product-prices br, #product .product-prices span[style*="width:100%"]{display:none} #product .tax-shipping-delivery-label, #product .labels-tax-long, #product .tax-label{ display:block; margin:var(--s1) 0 0; font-size:12px; font-style:normal; font-weight:400; color:var(--d-ink-3); line-height:1.4; } /* --- varianti: etichette leggibili, opzioni cliccabili ---------------- */ #product .product-variants > .product-variants-item{margin-bottom:var(--s3)} #product .product-variants .form-control-label{ display:block; margin-bottom:var(--s1); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--d-ink-2); } #product .product-variants .input-container .radio-label{ min-height:40px; display:inline-flex; align-items:center; padding:0 var(--s3); border:1px solid var(--d-line-2); border-radius:var(--d-r); font-size:13px; font-weight:500; color:var(--d-ink); background:#fff; transition:border-color var(--d-t) var(--d-e), color var(--d-t) var(--d-e); } #product .product-variants .input-container input:checked + .radio-label{ border-color:var(--d-ink); color:var(--d-ink); } /* --- riquadro acquisto: filo sottile, non widget ---------------------- */ #product .product-actions, #product .product-information.light-box-bg{ border-color:var(--d-line); box-shadow:none; } /* --- quantita' e CTA sulla stessa altezza ----------------------------- */ #product .product-quantity{gap:var(--s2);flex-wrap:wrap} #product .product-quantity .qty, #product .product-quantity .input-group, #product .product-quantity .bootstrap-touchspin{height:48px} #product .product-quantity input.input-group, #product .product-quantity #quantity_wanted{ height:48px; border-color:var(--d-line-2); font-size:15px; font-weight:500; color:var(--d-ink); font-variant-numeric:tabular-nums; } #product .product-quantity .btn-touchspin{ height:48px; border-color:var(--d-line-2); background:#fff; color:var(--d-ink); transition:background-color var(--d-t) var(--d-e); } #product .product-quantity .btn-touchspin:hover{background:var(--d-bg-soft)} #product .product-add-to-cart .add-to-cart, #product .product-actions .add-to-cart{ min-height:48px; padding:0 var(--s5); border:1px solid var(--d-ink); border-radius:var(--d-r); background-color:var(--d-ink); color:#fff; font-size:14px; font-weight:500; letter-spacing:.03em; box-shadow:none; transition:background-color var(--d-t) var(--d-e), border-color var(--d-t) var(--d-e); } #product .product-add-to-cart .add-to-cart:hover, #product .product-actions .add-to-cart:hover{ background-color:var(--d-accent-ink); border-color:var(--d-accent-ink); } /* --- preferiti: neutro, allineato, non un bollino verde --------------- */ #product .wishlist-button-add, #product .product-actions .wishlist-button-add{ width:48px;height:48px; border:1px solid var(--d-line-2); border-radius:var(--d-r); color:var(--d-ink-2); background:#fff; transition:border-color var(--d-t) var(--d-e), color var(--d-t) var(--d-e); } #product .wishlist-button-add:hover{border-color:var(--d-ink);color:var(--d-ink)} /* --- condivisione: monocromatica e piccola ---------------------------- */ #product .social-sharing{margin-top:var(--s4)} #product .social-sharing a, #product .social-sharing i, #product .social-sharing .fa{ color:var(--d-ink-3); font-size:13px; transition:color var(--d-t) var(--d-e); } #product .social-sharing a:hover, #product .social-sharing a:hover i{color:var(--d-ink)} /* --- schede: da riquadri Bootstrap a sottolineatura ------------------- */ #product .product-tabs .nav-tabs, #product .nav-tabs{ border-bottom:1px solid var(--d-line); gap:var(--s5); justify-content:flex-start; } #product .nav-tabs .nav-link{ border:0; border-bottom:2px solid transparent; border-radius:0; margin-bottom:-1px; padding:0 0 var(--s2); background:none; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--d-ink-3); transition:color var(--d-t) var(--d-e), border-color var(--d-t) var(--d-e); } #product .nav-tabs .nav-link:hover{color:var(--d-ink);border-bottom-color:var(--d-line-2)} #product .nav-tabs .nav-link.active{ color:var(--d-ink); border-bottom-color:var(--d-ink); background:none; } /* --- lunghezza di riga: 1380px non si leggono ------------------------- */ #product .tab-content, #product .tab-pane, #product .product-description{ font-size:14px; line-height:1.65; color:var(--d-ink-2); } #product .tab-pane > *, #product .product-description > *{max-width:72ch} #product .tab-content{padding-top:var(--s4)} #product .tab-pane strong, #product .product-description strong{color:var(--d-ink);font-weight:600} /* ========================================================================= v9 - 07/10/2026 - rifiniture sulla pagina prodotto, viste a schermo ========================================================================= */ /* La colonna di testo a 72ch dentro un riquadro largo 1348px sembrava un errore, non una scelta. Tolgo il riquadro: lo spazio bianco a destra diventa margine, e la colonna di lettura si legge come tale. */ #product .tab-content{ border:0; background:transparent; padding-left:0; padding-right:0; } #product .tab-pane > *, #product .product-description > *{max-width:74ch} /* Le schede non attive erano #8b908d su bianco: 3,5:1, sotto la soglia per il testo piccolo. Portate a #5a5e5c, che sta a 6,4:1. */ #product .nav-tabs .nav-link{color:var(--d-ink-2)} /* Riferimento ed EAN: anche l'etichetta e' metadato, non titolo. */ #product .product-reference label, #product .product-reference .label, #product .product-reference strong, #product .product-reference b{ font-weight:500; color:var(--d-ink-2); font-size:12px; } /* ========================================================================= v10 - 07/10/2026 - correzione: "Tasse incluse" grande come il prezzo In v8 avevo scritto #product .product-prices .current-price span, che colpisce OGNI span dentro il blocco prezzo, etichetta fiscale compresa. Restringo la regola al solo prezzo e rialzo la specificita' della nota. ========================================================================= */ #product .product-prices .current-price > span:not(.price):not(.product-price), #product .product-prices .current-price .tax-shipping-delivery-label, #product .product-prices .tax-shipping-delivery-label, #product .product-prices .labels-tax-long, #product .product-prices .tax-label{ font-size:12px; font-weight:400; font-style:normal; line-height:1.4; letter-spacing:0; color:var(--d-ink-3); font-variant-numeric:normal; } #product .product-prices .current-price > .price, #product .product-prices .current-price > .product-price, #product .product-price{ font-size:30px; font-weight:600; letter-spacing:-.015em; color:var(--d-ink); font-variant-numeric:tabular-nums; } /* ========================================================================= v11 - 08/10/2026 - HOME: ritmo, testate editoriali, fasce body della home: ========================================================================= */ /* --- 1. RITMO. E' la leva piu' forte: il premium si legge prima nello spazio che nel colore. Le sezioni passano da appoggiate a distanziate. */ #index .main-content .block, #index .main-content .column-block{margin-bottom:var(--s8)} #index .main-content > .container{padding-top:var(--s6)} #index .aone-brands{margin-bottom:var(--s7)} /* --- 2. TESTATE DI SEZIONE EDITORIALI -------------------------------- Erano una riga di testo con "Mostra di piu'" appiccicato accanto. Diventano: filetto sottile, titolo grande, link spinto a destra sulla stessa linea di base. E' il cambiamento che si vede di piu'. */ #index .title-block{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; border-top:1px solid var(--d-line); padding-top:var(--s4); margin-bottom:var(--s5); } #index .title-block > span:first-child{ font-family:Roboto,sans-serif; font-size:26px; font-weight:600; line-height:1.15; letter-spacing:-.02em; color:var(--d-ink); text-transform:none; } #index .title-block .view-all-link{margin-left:auto} #index .aone-brands .title-block{display:none} /* --- 3. I QUATTRO BADGE ---------------------------------------------- Erano quattro scatole bordate con icone a quattro scale diverse (65x74, 80x64, 118x120, 91x89 px: da qui la riga sghemba). Diventano una fascia unica, divisa da filetti verticali, icone normalizzate alla stessa altezza ottica. */ #index .block_id_5 .static-html .row{ border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line); margin-left:0; margin-right:0; } #index .block_id_5 .static-html .row > [class*="col-"]{ border-left:1px solid var(--d-line); padding:0; } #index .block_id_5 .static-html .row > [class*="col-"]:first-child{border-left:0} #index .feature{ padding:var(--s5) var(--s3); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--s2); height:100%; } #index .feature img{ height:44px; width:auto; margin:0; opacity:.9; } #index .feature a{text-decoration:none;color:inherit} #index .feature strong{ display:block; font-size:13px; font-weight:500; line-height:1.5; letter-spacing:.01em; color:var(--d-ink); } @media (max-width:767.98px){ #index .block_id_5 .static-html .row > [class*="col-"]{ border-left:0; border-top:1px solid var(--d-line); } #index .block_id_5 .static-html .row > [class*="col-"]:first-child{border-top:0} #index .feature{padding:var(--s4) var(--s3)} } /* --- 4. VIA I RIQUADRI ------------------------------------------------ Il contenuto si tiene con lo spazio e i filetti, non con le cornici. */ #index .main-content .block{ border:0; background:transparent; padding-left:0; padding-right:0; } /* --- 5. HERO: contenere e calmare ------------------------------------- Il bordo destro mostrava la slide successiva tagliata a meta'. */ #index .nivoSlider, #index .nivo-slider-overlay, #index .slider-wrapper{overflow:hidden} #index .nivo-controlNav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:var(--s3) 0 0; line-height:0; } #index .nivo-controlNav a.nivo-control{ width:6px;height:6px; margin:0; border-radius:50%; background:var(--d-line-2); text-indent:-9999px; overflow:hidden; transition:background-color var(--d-t) var(--d-e), transform var(--d-t) var(--d-e); } #index .nivo-controlNav a.nivo-control:hover{background:var(--d-ink-3)} #index .nivo-controlNav a.nivo-control.active{ background:var(--d-ink); transform:scale(1.35); } /* --- 6. MARCHI: dal campionario di loghi a una riga sobria ------------ */ #index .aone-brands{ border-top:1px solid var(--d-line); padding-top:var(--s6); } #index .brand-list .brand-container img{ filter:grayscale(1); opacity:.45; transition:filter var(--d-t) var(--d-e), opacity var(--d-t) var(--d-e); } #index .brand-list .brand-container:hover img{ filter:grayscale(0); opacity:1; } /* --- 7. NEWSLETTER E FOOTER (validi su tutte le pagine) --------------- */ .block-newsletter input[type=email], .block-newsletter input[type=text]{ height:48px; border:1px solid var(--d-line-2); border-radius:var(--d-r); padding:0 var(--s3); font-size:14px; color:var(--d-ink); background:#fff; transition:border-color var(--d-t) var(--d-e); } .block-newsletter input[type=email]:focus{border-color:var(--d-ink);box-shadow:none} .block-newsletter button, .block-newsletter input[type=submit]{ height:48px; padding:0 var(--s4); border:1px solid var(--d-ink); border-radius:var(--d-r); background:var(--d-ink); color:#fff; font-size:13px; font-weight:500; letter-spacing:.03em; transition:background-color var(--d-t) var(--d-e), border-color var(--d-t) var(--d-e); } .block-newsletter button:hover{ background:var(--d-accent-ink); border-color:var(--d-accent-ink); } .footer-main{border-top:1px solid var(--d-line);padding-top:var(--s6)} .footer-main h3,.footer-main .h3,.footer-main .title-block{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--d-ink); border-top:0; padding-top:0; margin-bottom:var(--s3); } .footer-main a{color:var(--d-ink-2);transition:color var(--d-t) var(--d-e)} .footer-main a:hover{color:var(--d-ink)} .footer-bottom{border-top:1px solid var(--d-line);padding-top:var(--s3);font-size:12px;color:var(--d-ink-3)} .social-links a,.block-social a{color:var(--d-ink-2);transition:color var(--d-t) var(--d-e)} .social-links a:hover,.block-social a:hover{color:var(--d-ink)} /* ========================================================================= v12 - 08/10/2026 - rifiniture home + animazioni di ingresso ========================================================================= */ /* --- il riquadro era su .feature, non sul contenitore ------------------ border:1px #c7c7c7 con radius 5px su ogni singolo badge: per questo la fascia sembrava ancora fatta di quattro scatole. */ #index .feature{border:0;border-radius:0} /* --- i pallini dello slider erano ancorati a left:132px --------------- */ #index .nivo-controlNav{ left:0; right:0; bottom:var(--s3); width:auto; } /* --- ingresso in scena: 450 ms, una volta sola ----------------------- La classe .d-reveal viene messa dal JavaScript, mai dall'HTML: se lo script non gira, non c'e' nulla di nascosto da rivelare. */ .d-reveal{ opacity:0; transform:translateY(12px); transition:opacity .45s var(--d-e), transform .45s var(--d-e); will-change:opacity, transform; } .d-reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .d-reveal{opacity:1;transform:none;transition:none} } /* ========================================================================= v13 - 08/10/2026 - RESTYLE STRUTTURALE DELLA HOME Struttura reale: main#page > section#wrapper > div.outside-container.top-column-content (hero, gia' a tutta pagina) > div.main-content > div.container (max 1200) > div.row > div#left-column.sidebar-column (300px) > div#content-wrapper.center-column (900px) Qui si cambia l'impianto, non il colore dei bottoni. ========================================================================= */ /* le fasce a tutta pagina usano 100vw: senza questo, la barra di scorrimento verticale genererebbe qualche pixel di overflow */ body{overflow-x:clip} /* --- 1. VIA LA COLONNA SINISTRA ------------------------------------- 300px su 1200 erano un quarto della pagina occupati da un albero di categorie che il menu gia' contiene per intero. Il contenuto passa da 900 a tutta la gabbia. */ #index #left-column{display:none} #index #content-wrapper.center-column{ flex:0 0 100%; max-width:100%; padding-left:0; padding-right:0; } /* --- 2. GABBIA PIU' LARGA ------------------------------------------- 1200px e' una misura del 2015. A 1440 il respiro cambia del tutto. */ #index .main-content .container{ max-width:1440px; padding-left:var(--s5); padding-right:var(--s5); } @media (max-width:767.98px){ #index .main-content .container{padding-left:var(--s3);padding-right:var(--s3)} } /* --- 3. SCALA TIPOGRAFICA EDITORIALE --------------------------------- */ #index .title-block{ padding-top:var(--s5); margin-bottom:var(--s6); border-top-color:var(--d-ink); border-top-width:1px; } #index .title-block > span:first-child{ font-size:38px; letter-spacing:-.03em; line-height:1.05; } @media (max-width:767.98px){ #index .title-block > span:first-child{font-size:26px} } /* --- 4. CARD SENZA CORNICE ------------------------------------------- La cornice attorno a ogni prodotto e' l'elemento che piu' di tutti dice "catalogo". L'immagine vive su un pannello tenue, il testo sta libero sotto: e' il modo in cui oggi si presenta un prodotto. */ #index .product-miniature > .product-container{ border:0; border-radius:0; background:transparent; box-shadow:none; } #index .product-miniature > .product-container:hover{ border:0; box-shadow:none; } #index .product-miniature .first-block{ background:var(--d-bg-soft); border:0; border-radius:4px; overflow:hidden; transition:background-color var(--d-t) var(--d-e); } #index .product-miniature > .product-container:hover .first-block{background:#ebeeec} #index .product-miniature .second-block{padding:var(--s3) 0 0} #index .product-miniature .third-block{padding:0} #index .product-miniature .third-block-left{margin-bottom:var(--s3)} /* azione: contorno, non blocco pieno. Cinque rettangoli neri in fila pesavano piu' dei prodotti. Si riempie al passaggio. */ #index .product-miniature .buttons-sections .btn.add-to-cart{ background-color:transparent; color:var(--d-ink); border:1px solid var(--d-line-2); font-size:12px; letter-spacing:.06em; text-transform:uppercase; min-height:42px; } #index .product-miniature .buttons-sections .btn.add-to-cart:hover{ background-color:var(--d-ink); border-color:var(--d-ink); color:#fff; } /* --- 5. FASCIA A TUTTA PAGINA PER LE GARANZIE ------------------------ Una campitura che taglia la pagina in capitoli. */ #index .block_id_5{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:var(--d-bg-soft); padding:var(--s6) 0; } #index .block_id_5 .static-html{ max-width:1440px; margin:0 auto; padding:0 var(--s5); } #index .block_id_5 .static-html .row{border:0} #index .block_id_5 .static-html .row > [class*="col-"]{ border-left-color:rgba(20,20,20,.10); } #index .feature{padding:0 var(--s3)} #index .feature img{opacity:1} /* --- 6. FONDO PAGINA SCURO ------------------------------------------- Chiude la pagina invece di lasciarla sfumare nel bianco. Il logo e' grafica monocromatica: invertito torna leggibile. */ .footer-main, .footer-bottom{ background:var(--d-ink); color:#b9bebb; border-top:0; } .footer-main{ width:100vw; margin-left:calc(50% - 50vw); padding:var(--s7) 0 var(--s6); } .footer-main > .container, .footer-bottom > .container{max-width:1440px;padding-left:var(--s5);padding-right:var(--s5)} .footer-main h3,.footer-main .h3,.footer-main .title-block, .footer-main .title-block > span:first-child{color:#fff;border-top:0} .footer-main a,.footer-bottom a{color:#b9bebb} .footer-main a:hover,.footer-bottom a:hover{color:#fff} .footer-main p,.footer-main li,.footer-main span{color:#b9bebb} .footer-main .logo img, .footer-main img[src*="logo"]{filter:invert(1) brightness(1.6)} .footer-bottom{ width:100vw; margin-left:calc(50% - 50vw); padding:var(--s4) 0; border-top:1px solid rgba(255,255,255,.12); color:#8a908c; } .footer-main .block-newsletter input[type=email]{ background:transparent; border-color:rgba(255,255,255,.22); color:#fff; } .footer-main .block-newsletter input[type=email]::placeholder{color:#8a908c} .footer-main .block-newsletter input[type=email]:focus{border-color:#fff} .footer-main .block-newsletter button{ background:#fff; border-color:#fff; color:var(--d-ink); } .footer-main .block-newsletter button:hover{ background:var(--d-accent); border-color:var(--d-accent); color:#fff; } .footer-main .social-links a,.footer-main .block-social a{color:#b9bebb} .footer-main .social-links a:hover,.footer-main .block-social a:hover{color:#fff} /* ========================================================================= v14 - 08/10/2026 - il footer scuro completato Il tema scrive le regole del footer come #footer .footer-bottom (1,1,0): le mie a sole classi perdevano. Qui si usa lo stesso prefisso #footer. ========================================================================= */ #footer .footer-main, #footer .footer-bottom{ background:var(--d-ink); color:#b9bebb; } #footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:var(--s4) 0; } /* testi e titoli: su fondo nero il grigio #3d3d3d del tema spariva */ #footer .footer-main p, #footer .footer-main li, #footer .footer-main span, #footer .footer-main div, #footer .footer-bottom p, #footer .footer-bottom span, #footer .footer-bottom div{color:#b9bebb} #footer .footer-main .title-block, #footer .footer-main .title-block > span, #footer .footer-main .block-title, #footer .footer-main .linklist-title, #footer .footer-main h1,#footer .footer-main h2, #footer .footer-main h3,#footer .footer-main h4, #footer .footer-main .h1,#footer .footer-main .h2, #footer .footer-main .h3,#footer .footer-main .h4{ color:#fff; border-top:0; padding-top:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } #footer .footer-main a, #footer .footer-bottom a{color:#b9bebb;transition:color var(--d-t) var(--d-e)} #footer .footer-main a:hover, #footer .footer-bottom a:hover{color:#fff} #footer .footer-main strong, #footer .footer-bottom strong{color:#fff} /* il bottone della newsletter restava nero su nero */ #footer .footer-main .block-newsletter button.btn-primary, #footer .footer-main .block-newsletter button{ background-color:#fff; border-color:#fff; color:var(--d-ink); } #footer .footer-main .block-newsletter button.btn-primary:hover, #footer .footer-main .block-newsletter button:hover{ background-color:var(--d-accent); border-color:var(--d-accent); color:#fff; } #footer .footer-main .block-newsletter input[type=email]{ background:transparent; border-color:rgba(255,255,255,.22); color:#fff; } #footer .footer-main .block-newsletter input[type=email]::placeholder{color:#8a908c} /* icone social: quadrati colorati che bucavano il fondo scuro */ #footer .social-links li a, #footer .block-social li a, #footer .social-links a, #footer .block-social a{ background-color:rgba(255,255,255,.08); color:#fff; border-radius:var(--d-r); transition:background-color var(--d-t) var(--d-e); } #footer .social-links li a:hover, #footer .block-social li a:hover{background-color:rgba(255,255,255,.18)} /* --- i badge erano bianchi sopra la fascia grigia -------------------- */ #index .feature{background:transparent} /* ========================================================================= v15 - 08/10/2026 - HEADER COMPATTO SCURO Prima: striscia promo + barra utility (38px) + fascia logo (~140px con un campo di ricerca largo 750px) + due righe di menu (~104px) = circa 300px prima di vedere un prodotto. Dopo: tre fasce dello stesso nero che leggono come un blocco solo, circa 135px, e 44px quando ci si attacca in alto. ========================================================================= */ #header, #header .desktop-header-version, #header .main-header, #header .header-bottom, #header .header-bottom .header-main-menu{background:var(--d-ink)} /* barra utility: sottile e in sordina */ #header .header-nav{ background:var(--d-ink); border-bottom:1px solid rgba(255,255,255,.10); font-size:11px; letter-spacing:.04em; color:#8f948f; } #header .header-nav .header-nav-wrapper{min-height:30px} #header .header-nav a, #header .header-nav span, #header .header-nav i{color:#8f948f} #header .header-nav a:hover{color:#fff} /* fascia logo: da ~140px a 64px */ #header .main-header .header-wrapper{ padding-top:var(--s2); padding-bottom:var(--s2); align-items:center; } #header .header-logo{max-width:none} #header .header-logo img{ max-height:44px; width:auto; filter:invert(1) brightness(1.7); } /* ricerca: da 750px a una pillola da 280 */ #header .search-widget{width:auto;margin:0 0 0 auto} #header .desktop-header-version .searchbar-wrapper{margin-bottom:0} #header .search-widget form input[type=text]{ height:40px; width:280px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff; padding-left:var(--s3); padding-right:44px; font-size:13px; } #header .search-widget form input[type=text]::placeholder{color:#8a908c} #header .search-widget form input[type=text]:focus{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); } #header .search-widget form button[type=submit]{ background:transparent; border:0; color:#fff; height:40px; width:40px; right:2px; } /* account e carrello: stessa forma, su fondo scuro */ #header .display-top{gap:var(--s2)} #header .user-info .account-link{ border:1px solid rgba(255,255,255,.22); background:transparent; color:#e6e9e7; border-radius:999px; padding:0 var(--s3); min-height:40px; } #header .user-info .account-link:hover{border-color:#fff;color:#fff} #header .cart-preview .cart-header .cart-link{ background:#fff; color:var(--d-ink); border-radius:999px; padding:0 var(--s3); min-height:40px; font-weight:500; } #header .cart-preview .cart-header .cart-link:hover{background:var(--d-accent);color:#fff} #header .cart-products-count{background:var(--d-accent);color:#fff} /* riga menu: 44px, voci chiare su nero */ #header .header-bottom .header-main-menu{ border-top:1px solid rgba(255,255,255,.10); border-bottom:0; } #header .header-bottom .header-main-menu-wrapper{min-height:44px} #amegamenu .anav-top .amenu-link{ color:#dfe3e0; font-size:12px; letter-spacing:.08em; min-height:44px; padding-left:var(--s2); padding-right:var(--s2); } #amegamenu .anav-top .amenu-link:hover{color:#fff} #header .mobile-menu-icon, #header .mobile-menu-icon i, #header .mobile-menu-icon span{color:#dfe3e0} /* attaccato in alto: resta solo la riga del menu */ #header .is-sticky{ background:rgba(20,20,20,.96); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); box-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.35); } .is-sticky #amegamenu .anav-top .amenu-link{min-height:42px;font-size:12px} /* la voce in eccesso creata dallo script */ #amegamenu .anav-top .d-altro{position:relative} #amegamenu .anav-top .d-altro > .amenu-link{cursor:pointer} #amegamenu .anav-top .d-altro-menu{ position:absolute; top:100%; right:0; z-index:120; min-width:240px; padding:var(--s2) 0; background:#fff; border:1px solid var(--d-line); box-shadow:0 12px 32px rgba(16,20,18,.14); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity var(--d-t) var(--d-e), transform var(--d-t) var(--d-e), visibility var(--d-t); } #amegamenu .anav-top .d-altro:hover .d-altro-menu, #amegamenu .anav-top .d-altro.is-open .d-altro-menu{ opacity:1;visibility:visible;transform:none; } #amegamenu .anav-top .d-altro-menu a{ display:block; padding:10px var(--s3); font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--d-ink); text-decoration:none; transition:background-color var(--d-t) var(--d-e); } #amegamenu .anav-top .d-altro-menu a:hover{background:var(--d-bg-soft)} /* sotto i 992px la riga voci sparisce: c'e' l'hamburger, che apre il pannello laterale con l'albero completo delle categorie */ @media (max-width:991.98px){ #header .header-bottom .header-main-menu-wrapper{min-height:48px} #amegamenu .anav-top{display:none} #header .search-widget{width:100%;margin:var(--s2) 0 0} #header .search-widget form input[type=text]{width:100%} } /* ========================================================================= v16 - 08/10/2026 - l'header sceso a misura Misurato dopo v15: banner 44 + utility 31 + fascia logo 142 + menu 51 = 268px. I 142 della fascia logo erano 42px di padding sommati (9+9 su .main-header, 12+12 su .header-wrapper) piu' un logo che occupava 100px in altezza nonostante il max-height. ========================================================================= */ #header .header-banner, #header .header-banner .header-event-banner, #header .header-banner .container{min-height:0} #header .header-banner .header-event-banner{ padding:var(--s1) 0; font-size:12px; letter-spacing:.04em; } #header .header-nav .header-nav-wrapper{min-height:28px} #header .main-header{padding-top:0;padding-bottom:0} #header .main-header .header-wrapper{ padding-top:10px; padding-bottom:10px; min-height:0; } #header .header-logo, #header .header-logo a{ display:flex; align-items:center; height:44px; margin:0; } #header .header-logo img, #header .header-logo svg{ max-height:40px; height:auto; width:auto; } #header .header-right, #header .display-top{min-height:0} #header .display-top{align-items:center} #header .header-bottom .header-main-menu-wrapper, #header .header-bottom .header-main-menu{min-height:46px} /* il pulsante hamburger sulla barra scura */ #header .header-bottom .left-nav-trigger, #header .header-bottom [data-left-nav-trigger]{ background:transparent; border:0; color:#dfe3e0; } #header .header-bottom .left-nav-trigger:hover{color:#fff} /* ========================================================================= v17 - 08/10/2026 - ultimi pixel dell'header ========================================================================= */ /* il banner promo era 60px per una riga di testo */ #header .header-banner .header-event-banner, #header .header-banner .header-event-banner *{ line-height:1.4; font-size:12px; } #header .header-banner .header-event-banner{padding:7px 0} #header .header-banner p, #header .header-banner div{margin-bottom:0} /* il logo sbordava sotto e veniva tagliato dalla barra del menu */ #header .main-header .header-wrapper{padding-top:8px;padding-bottom:8px} #header .header-logo, #header .header-logo a{height:40px;overflow:visible} #header .header-logo img, #header .header-logo svg{max-height:34px} /* ========================================================================= v18 - 08/10/2026 - il logo La regola che vinceva era #header .header-logo .logo{max-height:100px}: un id e DUE classi, contro il mio id + una classe + un elemento. Stessa forma, una classe in piu', e passa. Il file e' un JPEG con fondo bianco (logo-1698158967.jpg): invertirlo da' logo bianco su rettangolo nero. mix-blend-mode:screen rende trasparente il nero risultante, quindi resta solo il segno bianco. ========================================================================= */ #header .header-logo img.logo, #header .header-logo .logo{ max-height:34px; height:auto; width:auto; filter:invert(1); mix-blend-mode:screen; } #header .header-logo, #header .header-logo a{height:40px;display:flex;align-items:center} /* ========================================================================= v19 - 08/10/2026 - l'ultimo pezzo bianco sulla barra scura Il pulsante e' .left-nav-icon, un quadrato bianco 50x50. ========================================================================= */ #header .header-bottom .left-nav-icon, #header .left-nav-icon{ background:transparent; color:#dfe3e0; width:46px; height:46px; border-right:1px solid rgba(255,255,255,.10); transition:color var(--d-t) var(--d-e), background-color var(--d-t) var(--d-e); } #header .left-nav-icon:hover{background:rgba(255,255,255,.07);color:#fff} #header .left-nav-icon i, #header .left-nav-icon span, #header .left-nav-icon svg{color:#dfe3e0} #header .left-nav-icon:hover i, #header .left-nav-icon:hover span{color:#fff} /* ========================================================================= v20 - 08/10/2026 - FASCIA CATEGORIE (nuovo blocco in index.tpl) Tessere tipografiche, senza immagini: le foto di categoria qui sarebbero gli stessi fondi fotografici satura ti che gia' appesantiscono la griglia. Il nome della categoria basta, e si legge a colpo d'occhio. ========================================================================= */ .d-categorie{ width:100vw; margin-left:calc(50% - 50vw); background:#fff; border-bottom:1px solid var(--d-line); } .d-categorie-inner{ max-width:1440px; margin:0 auto; padding:0 var(--s5); display:grid; grid-template-columns:repeat(6,1fr); } .d-cat{ display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:104px; padding:var(--s4) var(--s3); border-left:1px solid var(--d-line); text-decoration:none; color:var(--d-ink); transition:background-color var(--d-t) var(--d-e); } .d-cat:first-child{border-left:0} .d-cat:hover, .d-cat:focus-visible{background:var(--d-bg-soft)} .d-cat:focus-visible{outline:2px solid var(--d-accent-ink);outline-offset:-2px} .d-cat-nome{ font-family:Roboto,sans-serif; font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--d-ink); } .d-cat-azione{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--d-ink-3); transition:color var(--d-t) var(--d-e); } .d-cat-azione::after{ content:"\2192"; display:inline-block; transition:transform var(--d-t) var(--d-e); } .d-cat:hover .d-cat-azione{color:var(--d-accent-ink)} .d-cat:hover .d-cat-azione::after{transform:translateX(3px)} @media (max-width:991.98px){ .d-categorie-inner{grid-template-columns:repeat(3,1fr);padding:0 var(--s3)} .d-cat:nth-child(3n+1){border-left:0} .d-cat:nth-child(n+4){border-top:1px solid var(--d-line)} } @media (max-width:575.98px){ .d-categorie-inner{grid-template-columns:repeat(2,1fr)} .d-cat{min-height:84px;padding:var(--s3) var(--s2)} .d-cat-nome{font-size:14px} .d-cat:nth-child(3n+1){border-left:1px solid var(--d-line)} .d-cat:nth-child(odd){border-left:0} .d-cat:nth-child(n+3){border-top:1px solid var(--d-line)} } @media (prefers-reduced-motion:reduce){ .d-cat,.d-cat-azione,.d-cat-azione::after{transition:none} } /* ========================================================================= v21 - 08/10/2026 - PAGINA PRODOTTO: impianto Struttura: #content-wrapper 1200 > .product-left col-md-5 (390px) + .product-right col-md-7 (780px), che dentro ha ancora due colonne (info 520px + banner 260px). L'immagine del prodotto finiva a 370px. ========================================================================= */ #product .main-content .container{ max-width:1440px; padding-left:var(--s5); padding-right:var(--s5); } @media (max-width:767.98px){ #product .main-content .container{padding-left:var(--s3);padding-right:var(--s3)} } /* --- 1. riequilibrio: l'immagine e' la merce, deve pesare -------------- */ @media (min-width:768px){ #product .product-left{flex:0 0 52%;max-width:52%} #product .product-right{flex:0 0 48%;max-width:48%} /* dentro la colonna destra, l'informazione prende tutta la larghezza e i banner scendono sotto, invece di contendersi lo spazio col prezzo */ #product .product-right > .row > [class*="col-xl-8"]{flex:0 0 100%;max-width:100%} #product .product-right > .row > [class*="col-xl-4"]{ flex:0 0 100%; max-width:100%; margin-top:var(--s5); } } /* --- 2. l'immagine su pannello, come nelle card ----------------------- */ #product .product-cover, #product .images-container .product-cover{ background:var(--d-bg-soft); border-radius:4px; overflow:hidden; border:0; } #product .product-cover img{ display:block; width:100%; height:auto; } /* --- 3. il blocco acquisto resta in vista mentre si legge ------------- */ @media (min-width:992px){ #product .product-information{ position:sticky; top:var(--s7); align-self:flex-start; } } /* --- 4. respiro fra le fasce ------------------------------------------ */ #product .product-tabs, #product .product-accessories, #product #blockreassurance_product{margin-top:var(--s7)} #product .product-information.light-box-bg{padding:var(--s5)} /* ========================================================================= v22 - 08/10/2026 - la colonna banner della scheda prodotto Il .row non e' figlio diretto di .product-right ma di section.product-right-content: la regola di v21 non agganciava nulla e il testo restava in una colonna da 400px con i banner a fianco. ========================================================================= */ @media (min-width:768px){ #product .product-right-content > .row > .col-xl-8, #product .product-right-content > .row > [class*="col-xl-8"]{ flex:0 0 100%; max-width:100%; } #product .product-right-content > .row > .col-xl-4, #product .product-right-content > .row > [class*="col-xl-4"]{ flex:0 0 100%; max-width:100%; margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--d-line); } } /* ========================================================================= v23 - 08/10/2026 - PAGINA PRODOTTO: gerarchia e leggibilita' Ordine reale dei blocchi nella colonna destra, misurato in pagina: 0 riferimento+EAN (64px) · 1-2 vuoti · 3 descrizione (227px) 4 BLOCCO ACQUISTO (472px) · 5 social Chi arriva su una scheda vuole: cos'e' -> quanto costa -> lo compro. Qui il prezzo arrivava dopo 227px di testo legale. ========================================================================= */ #product .product-right-content > .row > .col-xl-8{ display:flex; flex-direction:column; } #product .col-xl-8 > .product-information{order:1} #product .col-xl-8 > .product-availability-top{order:2} #product .col-xl-8 > .product-out-of-stock{order:3} #product .col-xl-8 > .product-description-short{order:4} #product .col-xl-8 > .product-attributes{order:5} #product .col-xl-8 > .product-additional-info{order:6} /* --- 1. il blocco acquisto diventa una scheda ------------------------- */ #product .product-information.light-box-bg{ background:#fff; border:1px solid var(--d-line); border-radius:4px; padding:var(--s5); margin-bottom:var(--s5); box-shadow:none; } #product .product-prices{ padding-bottom:var(--s4); margin-bottom:var(--s4); border-bottom:1px solid var(--d-line); } /* quantita' e azione sulla stessa riga: e' un gesto solo */ #product .product-add-to-cart .product-quantity{ display:flex; align-items:stretch; gap:var(--s2); } #product .product-quantity .qty{flex:0 0 132px} #product .product-add-to-cart .add-to-cart, #product .product-actions .add-to-cart{ flex:1 1 auto; min-height:52px; font-size:15px; letter-spacing:.04em; } #product .wishlist-button-add{margin-top:var(--s3)} /* --- 2. l'avviso di legge: un avviso, non un finto link --------------- */ #product .product-description-short a[href="#"], #product .product-description-short u, #product .product-description-short strong u{text-decoration:none} #product .product-description-short p:has(u), #product .product-description-short p:has(strong u){ display:block; margin:var(--s4) 0; padding:var(--s3) var(--s4); background:#fdf3f2; border-left:3px solid var(--d-promo); border-radius:0 3px 3px 0; font-size:13px; line-height:1.5; } /* --- 3. descrizione: misura di lettura e respiro --------------------- */ #product .product-description-short{ font-size:14px; line-height:1.7; color:var(--d-ink-2); margin-bottom:var(--s5); } #product .product-description-short > *{max-width:68ch} #product .product-description-short p{margin-bottom:var(--s3)} #product .product-description-short strong{color:var(--d-ink);font-weight:600} /* --- 4. riferimento ed EAN: in fondo, su una riga sola ---------------- */ #product .product-attributes{ margin:0 0 var(--s3); padding-top:var(--s3); border-top:1px solid var(--d-line); font-size:12px; color:var(--d-ink-3); } #product .product-attributes .row, #product .product-attributes > div{ display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); margin:0; } #product .product-attributes [class*="col-"]{ flex:0 0 auto; max-width:none; width:auto; padding:0; } #product .product-attributes label, #product .product-attributes .label, #product .product-attributes strong, #product .product-attributes b{ font-weight:500; color:var(--d-ink-2); margin-right:4px; } /* --- 5. varianti: pastiglie cliccabili -------------------------------- */ #product .product-variants .form-control-label{ margin-bottom:var(--s2); padding:0; width:auto; max-width:none; flex:0 0 100%; } #product .product-variants > .product-variants-item, #product .product-variants .product-variants-item{ display:flex; flex-wrap:wrap; align-items:center; margin-bottom:var(--s4); } #product .product-variants .input-container{margin:0 var(--s1) var(--s1) 0} /* --- 6. condivisione in coda, sottovoce ------------------------------ */ #product .product-additional-info{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--d-line); } /* ========================================================================= v24 - 08/10/2026 - quantita' e pulsante sulla stessa riga .product-quantity e' gia' flex, ma andava a capo: il pulsante stava a 457px dentro un contenitore da 497, con la quantita' da 149 accanto. E la mia regola di v23 puntava a .qty, che non e' figlia diretta del flex ma nipote (dentro .product-quantity-touchspin). ========================================================================= */ #product .product-add-to-cart .product-quantity{ flex-wrap:nowrap; align-items:stretch; gap:var(--s2); } #product .product-add-to-cart .product-quantity-touchspin{flex:0 0 132px} #product .product-add-to-cart .product-quantity-touchspin .qty{width:100%} #product .product-add-to-cart .product-quantity > .add{flex:1 1 auto;min-width:0} #product .product-add-to-cart .product-quantity > .add .btn.add-to-cart{ width:100%; min-height:52px; } @media (max-width:575.98px){ #product .product-add-to-cart .product-quantity{flex-wrap:wrap} #product .product-add-to-cart .product-quantity-touchspin{flex:0 0 100%} #product .product-add-to-cart .product-quantity > .add{flex:0 0 100%} } /* preferiti accanto, non sotto */ #product .product-add-to-cart{display:flex;flex-direction:column} #product .product-add-to-cart .wishlist-button-add{ align-self:flex-start; margin-top:var(--s3); } /* ========================================================================= v25 - 08/10/2026 - CORREZIONE: lo sticky era sull'elemento sbagliato In v21 avevo reso sticky .product-information. Ma dopo il riordino di v23 quel blocco ha dei fratelli SOTTO di se' nella stessa colonna (descrizione, riferimento, social): restando fissato, il testo gli scorreva sotto e finiva coperto. Lo sticky appartiene alla colonna IMMAGINE, che non ha nulla che le scorra sotto: e' l'altra colonna a muoversi. ========================================================================= */ #product .product-information, #product .product-information.light-box-bg{position:static} @media (min-width:992px){ #product .product-left{ position:sticky; top:var(--s7); align-self:flex-start; } } @media (max-width:991.98px){ #product .product-left{position:static} } /* ========================================================================= v26 - 08/10/2026 - l'avviso di legge Non era un

con come avevo supposto in v23: e' un

con uno dentro, e la sottolineatura rossa sta sullo span, scritta in stile inline. Resta rosso e ben visibile - e' un obbligo di legge - ma smette di sembrare un collegamento rotto e diventa un avviso. L'unico !important del foglio: contro uno stile inline non c'e' altra strada, e vale una sola proprieta'. ========================================================================= */ #product .product-description-short h3{ display:block; margin:var(--s4) 0; padding:var(--s3) var(--s4); background:#fdf3f2; border-left:3px solid var(--d-promo); border-radius:0 3px 3px 0; font-family:Roboto,sans-serif; font-size:14px; font-weight:600; line-height:1.5; letter-spacing:.01em; max-width:68ch; } #product .product-description-short h3 span, #product .product-description-short h3 u, #product .product-description-short h3 a{ text-decoration:none !important; font-size:inherit; font-weight:inherit; } /* ========================================================================= v27 - 08/10/2026 - cinque correzioni richieste ========================================================================= */ /* --- 1. LOGO PIU' GRANDE: da 34 a 46px ------------------------------- */ #header .header-logo img.logo, #header .header-logo .logo{max-height:46px} #header .header-logo, #header .header-logo a{height:52px} #header .main-header .header-wrapper{padding-top:10px;padding-bottom:10px} /* --- 2. VIA LA BARRA "Dove siamo / Chi siamo / Contattaci" ----------- Quelle tre voci restano nel footer. L'header guadagna 30px. */ #header .header-nav{display:none} /* --- 3. IL QUADRATINO BIANCO SOPRA "E - SALT" ------------------------ E' un badge con background-color:#ffffff scritto in stile inline, quindi bianco su bianco: invisibile ma ingombrante. Lo si riconosce dal valore dentro l'attributo style e lo si toglie. Gli altri badge (rossi) restano. */ #amegamenu .anav-top .amenu-link > sup[style*="#ffffff"], #amegamenu .anav-top .amenu-link > sup[style*="#FFFFFF"], #amegamenu .anav-top .amenu-link > sup[style*="#fff;"]{display:none} /* tolgo anche il filo interno che avevo messo apposta per renderlo visibile: non serve piu' */ #amegamenu .anav-top .amenu-link > sup{box-shadow:none} /* --- 4. HOVER E VOCE ATTIVA DEL MENU --------------------------------- Il tema portava dal vecchio header chiaro uno sfondo bianco sullo stato attivo: su barra scura diventava bianco su bianco. Qui lo stato si legge in tre modi insieme: fondo che schiarisce, testo che va al bianco pieno, barra di 2px sotto la voce. */ #amegamenu .anav-top .amenu-item, #amegamenu .anav-top .amenu-item > .amenu-link{ background-color:transparent; position:relative; } #amegamenu .anav-top .amenu-item:hover, #amegamenu .anav-top .amenu-item.hover, #amegamenu .anav-top .amenu-item.active, #amegamenu .anav-top .amenu-item.current, #amegamenu .anav-top .amenu-link:hover, #amegamenu .anav-top .amenu-link:focus-visible, #amegamenu .anav-top .amenu-item:hover > .amenu-link, #amegamenu .anav-top .amenu-item.hover > .amenu-link{ background-color:rgba(255,255,255,.10); color:#fff; } #amegamenu .anav-top .amenu-item > .amenu-link::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#fff; transform:scaleX(0); transform-origin:left center; transition:transform var(--d-t) var(--d-e); border:0; } #amegamenu .anav-top .amenu-item:hover > .amenu-link::before, #amegamenu .anav-top .amenu-item.hover > .amenu-link::before, #amegamenu .anav-top .amenu-item.active > .amenu-link::before, #amegamenu .anav-top .amenu-item.current > .amenu-link::before{transform:scaleX(1)} #amegamenu .anav-top .amenu-link:focus-visible{ outline:2px solid #fff; outline-offset:-2px; } /* la voce ALTRO segue le stesse regole */ #amegamenu .anav-top .d-altro:hover > .amenu-link, #amegamenu .anav-top .d-altro.is-open > .amenu-link{ background-color:rgba(255,255,255,.10); color:#fff; } /* --- 5a. VIA LO ZOOM SULL'IMMAGINE DEL PRODOTTO ---------------------- */ #product .product-cover img, #product .images-container img, #product .images-container-wrapper img{ transform:none !important; transition:none !important; } #product .product-cover:hover img, #product .images-container-wrapper:hover img{transform:none !important} /* --- 5b. LE SCHEDE: DESCRIZIONE / SPEDIZIONE / RESI ------------------ Erano una barra larga 1376px con il testo sparso sotto. Diventano un capitolo a se': filetto di apertura, etichetta di sezione, barra di navigazione su misura e colonna di lettura allineata a sinistra con la navigazione. */ #product .product-tabs{ max-width:980px; margin-left:auto; margin-right:auto; padding-top:var(--s7); border-top:1px solid var(--d-line); } #product .product-tabs .nav-tabs, #product .nav-tabs{ border-bottom:1px solid var(--d-line); gap:var(--s6); margin-bottom:0; flex-wrap:wrap; } #product .nav-tabs .nav-link{ border:0; border-bottom:2px solid transparent; border-radius:0; margin-bottom:-1px; padding:0 0 var(--s3); background:none; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--d-ink-3); transition:color var(--d-t) var(--d-e), border-color var(--d-t) var(--d-e); } #product .nav-tabs .nav-link:hover{color:var(--d-ink);border-bottom-color:var(--d-line-2)} #product .nav-tabs .nav-link.active{ color:var(--d-ink); border-bottom-color:var(--d-ink); background:none; } #product .tab-content{ padding-top:var(--s6); padding-bottom:var(--s5); font-size:15px; line-height:1.75; color:var(--d-ink-2); } #product .tab-pane > *{max-width:72ch} #product .tab-pane p{margin-bottom:var(--s4)} #product .tab-pane strong{color:var(--d-ink);font-weight:600} #product .tab-pane ul{padding-left:var(--s4);margin-bottom:var(--s4)} #product .tab-pane li{margin-bottom:var(--s1)} /* ========================================================================= v28 - 08/10/2026 - contrasto delle linguette inattive In v27 le avevo riportate a #8b908d: su bianco fanno 3,5:1, sotto la soglia per il testo piccolo. #5a5e5c sta a 6,4:1. ========================================================================= */ #product .nav-tabs .nav-link{color:var(--d-ink-2)} #product .nav-tabs .nav-link:hover{color:var(--d-ink)} #product .nav-tabs .nav-link.active{color:var(--d-ink)} /* ===== v29 ================================================================ Due rifiniture chieste da Arseni. 1) I nomi prodotto venivano troncati: il maiuscolo forzato del tema li allarga e due righe non bastano per nomi come "LIMONE ARANCIA MANDARINO AROMA CONCENTRATO FRUIZEE PLA". Togliere il maiuscolo risolve alla radice e si legge meglio; la terza riga copre il resto. min-height uniforme perche' altrimenti i prezzi non si allineano piu' fra le card. Il blocco con body[class] serve contro .pg-bnl ... (5 classi) del tema: (0,5,1) batte (0,5,0). Senza di quello il maiuscolo resta. 2) Lo slideshow ha 21 slide attive: la fila di pallini e' una striscia inutile, non una navigazione. Li nascondo e restano le frecce. Il carosello e' Nivo Slider (.nivo-controlNav), non Slick: la prima versione di questa regola puntava a .slick-dots e non faceva nulla. Il rimedio vero non e' CSS: sono troppe slide. Vedi nota ad Arseni. ========================================================================= */ .product-list .grid .product-miniature .product-name, .products .product-miniature .product-name{ text-transform:none; -webkit-line-clamp:3; min-height:4.05em; } body[class] .product-list .grid .product-miniature .product-name, body[class] .products .product-miniature .product-name, body[class] .product-list .grid .product-miniature .product-name a, body[class] .products .product-miniature .product-name a{ text-transform:none; } #index .aone-slideshow .nivo-controlNav, body[class] .aone-slideshow .nivo-controlNav{display:none} /* ===== v32 — sfondo complessivo bianco ==================================== Il grigio della pagina non era mio: lo mette il tema su #wrapper (#f7f7f7). Lo porto a bianco, ed e' questo che cambia l'impressione generale. Ma a quel punto i pannelli sotto le immagini prodotto, che erano #f6f7f6 e si staccavano dal grigio circostante, finirebbero per sparire contro il bianco: la differenza sarebbe dell'1%. Quindi inverto davvero il rapporto, portando la tinta a #f1f2f1. Prima il chiaro stava sul grigio, ora il grigio sta sul chiaro. Basta ridefinire il token: lo usano tutti e sei i punti che hanno bisogno di staccarsi dal fondo (pannello card, cover prodotto, hover del menu ALTRO, hover della fascia categorie, bottoni quantita'). #wrapper del tema e' (1,0,0) come il mio: vinco perche' arrivo dopo. ========================================================================= */ #wrapper{background:#fff} :root{--d-bg-soft:#f1f2f1} /* ===== v33 — il refuso "bonificoe" era mio ================================ Arseni aveva segnalato "bonificoe contrassegno" e io avevo risposto che non era un refuso, perche' in database il testo e' corretto: "carta, bonifico
e contrassegno". Il testo era corretto davvero. Era il mio #index .feature br{display:none} a cancellare il ritorno a capo, e display:none non lascia nemmeno uno spazio: le due parole si saldavano. Difetto introdotto da me, non ereditato dalla migrazione. Regola rimossa. ========================================================================= */ #index .feature .text-wrapper, #index .feature a{line-height:1.5} /* ========================================================================== FASE 1 — testata, 14 ottobre 2026 Richiesta del cliente nel PDF "Modifiche Eliquid". Tre cose su quattro qui sono CSS: il markup della ricerca era gia' giusto, era la resa a dividerlo. ========================================================================== */ /* --- Barra di annuncio ----------------------------------------------------- Sta in cima a tutto, sopra la testata, in entrambi i rami di header.tpl. NASCOSTA finche' non arriva il testo: per accenderla basta togliere il display:none qui sotto e scrivere le parole in header.tpl. */ .d-annuncio{display:none} .d-annuncio{ background:#6D28D9; color:#fff; font-size:.875rem; line-height:1.2; letter-spacing:.01em; text-align:center; padding:9px 0; } .d-annuncio .d-annuncio-testo{color:#fff} .d-annuncio a{color:#fff;text-decoration:underline;text-underline-offset:2px} /* --- Logo piu' grande ------------------------------------------------------ La v15 aveva compresso la fascia logo da ~140px a 64px per portare la testata da ~300px a 180px. Il cliente lo rivuole grande: qui si sale a 96px di altezza, che sulla fascia da 64 significa riaprirla a ~104px. TETTO VERO: il file e' un JPG 267x167. Oltre ~167px di altezza si impasta, perche' si stira oltre la sua risoluzione. A 96px siamo a meta' strada e l'immagine resta nitida. */ #header .header-logo img, #header .header-logo a img{ max-height:96px; height:auto; width:auto; max-width:100%; } #header .main-header{padding-top:12px;padding-bottom:12px} /* --- Una sola ricerca ------------------------------------------------------ Nel DOM la ricerca c'e' UNA volta sola: un input piu' il suo bottone di invio. Si leggeva come due elementi separati perche' campo e bottone non erano attaccati. Qui tornano un pezzo unico, con il bottone incollato a destra sulla stessa riga, accanto al logo. */ #header .searchbar-wrapper{width:100%;max-width:520px;margin-left:auto} #header .search-widget form{ display:flex; align-items:stretch; width:100%; border:1px solid var(--d-line,#dcdfdd); border-radius:10px; overflow:hidden; background:#fff; } #header .search-widget form input[type=text]{ flex:1 1 auto; min-width:0; width:auto; height:44px; border:0; border-radius:0; box-shadow:none; padding:0 14px; } #header .search-widget form input[type=text]:focus{box-shadow:none;outline:0} #header .search-widget form:focus-within{border-color:var(--d-accent,#6D28D9)} #header .search-widget form button[type=submit]{ flex:0 0 auto; position:static; height:44px; min-width:52px; margin:0; border:0; border-radius:0; display:flex; align-items:center; justify-content:center; } @media (max-width:991px){ #header .searchbar-wrapper{max-width:none} } /* --- Lo spazio vuoto fra testata ed hero ----------------------------------- Non era un margine: in home il breadcrumb si stampa comunque, con la sola voce "Home" (data-depth=1), e la sua fascia con padding sopra e sotto e' proprio quel vuoto. Un briciolo di pane con una briciola sola non serve a nessuno: in home si toglie, nelle altre pagine resta. */ #index .breadcrumb-wrapper{display:none} #index #wrapper{padding-top:0} /* Correzione necessaria al logo grande: la v15 aveva messo height:44px FISSO sul contenitore e sul suo . Senza toccarli, un'immagine da 96px sborda invece di crescere. Qui il contenitore torna elastico e l'immagine comanda. Il filter:invert della v15 NON si tocca: quel logo e' scuro su fondo chiaro e va invertito, come e' sempre stato. */ #header .header-logo, #header .header-logo a{ height:auto; min-height:0; } #header .main-header .header-wrapper{align-items:center} /* Il logo, per davvero. Avevo scritto la regola su "#header .header-logo img" e perdeva: la riga che comanda in questo file e' "#header .header-logo .logo" (due classi, specificita' piu' alta), ultima occorrenza a max-height:46px. E' la stessa trappola che la v15 aveva gia' annotata trenta righe sopra. Qui si usa la forma che vince. */ #header .header-logo img.logo, #header .header-logo .logo{ max-height:96px; height:auto; width:auto; } /* =========================================================================== FASE 1b — 15/10/2026 — ricerca leggibile e barra di annuncio accesa Due cose da sapere prima di toccare questo blocco. 1) Il testo della ricerca era invisibile perche' theme.css dichiara "color: inherit" sia sull'input sia sul bottone, e la testata eredita il bianco. Qui il colore e' dichiarato esplicito e con !important: non per pigrizia, ma perche' il modulo zonecolorsfonts inietta a runtime regole con selettori molto larghi (decine di voci separate da virgola) che altrimenti vincono. Serve anche -webkit-text-fill-color, perche' su WebKit il solo "color" non basta quando il valore ereditato e' bianco. 2) Il bottone andava a capo perche' ".btn-primary" e' a larghezza piena e al form mancava flex-wrap:nowrap. Input e bottone stanno sulla stessa riga solo con: form nowrap, input flex:1 1 auto con min-width:0 (senza min-width:0 un campo di testo non si restringe mai sotto la sua dimensione di default) e bottone flex:0 0 auto. --------------------------------------------------------------------------- */ /* la barra di annuncio ora ha un testo, quindi si accende */ .d-annuncio{display:block} /* --- il contenitore: un unico blocco con il bordo, input e bottone dentro --- */ #header .search-widget form{ display:flex; flex-wrap:nowrap; align-items:stretch; position:relative; background:#fff; border:1px solid #c7c7c7; border-radius:6px; overflow:hidden; } #header .search-widget form:focus-within{ border-color:var(--d-accent,#6D28D9); box-shadow:0 0 0 3px rgba(109,40,217,.15); } /* --- il campo di testo --- */ #header .search-widget form input[type=text]{ flex:1 1 auto; width:auto; min-width:0; height:44px; margin:0; padding:0 14px; border:0; border-radius:0; background:#fff !important; color:#1f2328 !important; -webkit-text-fill-color:#1f2328; font-size:15px; line-height:44px; } #header .search-widget form input[type=text]:hover, #header .search-widget form input[type=text]:focus, #header .search-widget form input[type=text]:active, #header .search-widget form input[type=text]:focus-visible{ background:#fff !important; color:#1f2328 !important; -webkit-text-fill-color:#1f2328; box-shadow:none; outline:0; } #header .search-widget form input[type=text]::placeholder{ color:#6b7280 !important; -webkit-text-fill-color:#6b7280; opacity:1; } /* il riempimento automatico di Chrome: sfondo azzurrino e testo suo, li annullo */ #header .search-widget form input[type=text]:-webkit-autofill, #header .search-widget form input[type=text]:-webkit-autofill:hover, #header .search-widget form input[type=text]:-webkit-autofill:focus{ -webkit-text-fill-color:#1f2328; box-shadow:0 0 0 1000px #fff inset; } /* --- il bottone, attaccato a destra sulla stessa riga --- */ #header .search-widget form button[type=submit]{ flex:0 0 auto; position:static; width:auto; min-width:54px; height:44px; margin:0; padding:0 16px; border:0; border-radius:0; background:var(--d-accent,#6D28D9) !important; color:#fff !important; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; } #header .search-widget form button[type=submit] i, #header .search-widget form button[type=submit] .material-icons{ color:#fff !important; -webkit-text-fill-color:#fff; font-size:22px; line-height:1; } #header .search-widget form button[type=submit]:hover, #header .search-widget form button[type=submit]:focus, #header .search-widget form button[type=submit]:active{ background:#5b21b6 !important; color:#fff !important; } #header .search-widget form button[type=submit]:focus-visible{ outline:2px solid #fff; outline-offset:-4px; } /* =========================================================================== FASE 2 — 15/10/2026 — le cinque garanzie e il sottopiede Le cinque voci erano un blocco HTML con PNG di misure diverse (65x74, 80x64) e due claim schiacciati in una card sola. Ora sono cinque card con icone disegnate in SVG, tutte con lo stesso tratto da 1,5. Il markup sta nel database, blocco 5 di zhomeblock_lang: per rimetterlo come era c'e' /var/www/eliquid-fase2-ripristino.sql. La quinta card si centra da sola: il contenitore e' flex con justify-content:center, quindi l'ultima riga incompleta resta in mezzo. L'altezza uguale arriva dal comportamento normale del flex (align-items stretch), non da un'altezza fissa: se un testo va a capo, crescono tutte. --------------------------------------------------------------------------- */ .d-garanzie{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:var(--s4,28px) 0; } .d-garanzia{ flex:0 1 calc(25% - 12px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:26px 20px; border:1px solid var(--d-line,#e6e8e7); border-radius:14px; background:#fff; color:var(--d-ink,#1f2328); transition:border-color .15s ease, background .15s ease; } .d-garanzia:hover{ border-color:var(--d-accent,#6D28D9); background:var(--d-bg-soft,#f8f7fb); } .d-garanzia-icona{display:block;line-height:0;color:var(--d-accent,#6D28D9)} .d-garanzia-icona svg{display:block} .d-garanzia-titolo{font-weight:700;font-size:15px;line-height:1.3} .d-garanzia-nota{font-size:13px;line-height:1.45;color:var(--d-ink-3,#6b7280)} @media (max-width:767px){ .d-garanzia{flex:0 1 calc(50% - 8px);padding:20px 14px} .d-garanzie{gap:12px} } /* --- il sottopiede, sfondo bianco --------------------------------------- Le mie regole di una fase precedente lo rendevano scuro (link #b9bebb): questa sezione, essendo in fondo al file, le supera. ----------------------------------------------------------------------- */ #footer .footer-bottom, .footer-bottom{ background:#fff !important; color:var(--d-ink-2,#3a4046); border-top:1px solid var(--d-line,#e6e8e7); } .footer-bottom a{color:var(--d-ink-2,#3a4046) !important} .footer-bottom a:hover{color:var(--d-accent,#6D28D9) !important} .footer-bottom strong{color:var(--d-ink,#1f2328)} /* =========================================================================== RITOCCHI — 15/10/2026 1) La barra di annuncio: togliamo il markup da header.tpl, questa regola resta come rete di sicurezza se qualche compilato vecchio la ridisegna. 2) Le cinque card andavano a capo perche' "calc(25% - 12px)" con gap 16 fa esattamente 100%: al primo arrotondamento del browser la quarta non ci sta piu'. Su desktop ora sono cinque su una riga sola, con flex-wrap:nowrap e flex:1 1 0, cioe' larghezza decisa dallo spazio disponibile e non da una percentuale calcolata a mano. Su mobile restano due per riga. 3) Il sottopiede: il testo era bianco su bianco per una regola MIA di una fase precedente, "#footer .footer-bottom strong{color:#fff}" (riga 1427). Ha l'id #footer, quindi per specificita' batteva la regola nuova scritta senza id, anche venendo prima nel file. Qui si usa la stessa forma con #footer, che e' il modo giusto di vincere: non l'ordine, la specificita'. --------------------------------------------------------------------------- */ .d-annuncio{display:none !important} @media (min-width:768px){ .d-garanzie{flex-wrap:nowrap} .d-garanzia{flex:1 1 0;min-width:0;padding:24px 14px} } #footer .footer-bottom, #footer .footer-bottom .typo, #footer .footer-bottom h5, #footer .footer-bottom p, #footer .footer-bottom span{color:var(--d-ink-2,#3a4046)} #footer .footer-bottom strong{color:var(--d-ink,#1f2328)} #footer .footer-bottom a{color:var(--d-ink-2,#3a4046)} #footer .footer-bottom a:hover{color:var(--d-accent,#6D28D9)} /* "Powered by Distribuzione Informatica" su una riga sola: su desktop la riga del copyright non va mai spezzata; su mobile si lascia andare a capo, altrimenti sborda. */ @media (min-width:992px){ #footer .footer-bottom h5{white-space:nowrap} } /* =========================================================================== RITOCCHI 2 — 15/10/2026 — provati nel browser, non a occhio Ogni regola qui sotto e' stata iniettata nella pagina vera, misurata e guardata prima di finire in questo file. Due cose imparate oggi: 1) su questo tema una regola nuova deve avere la FORMA di quella che vuole superare, non solo stare piu' in basso nel file; 2) con i gap non si calcolano percentuali a mano. --------------------------------------------------------------------------- */ /* --- 1. la ricerca centrata nella testata --------------------------------- Il contenitore stava dentro ".header-right" insieme ad accesso e carrello, e la mia regola di fase 1 (margin-left:auto) lo spingeva a destra: misurati 156 px fuori centro. Qui esce dal flusso e si centra sul contenitore della testata, che e' gia' centrato sulla finestra. Accesso e carrello non si spostano perche' erano gia' allineati a destra (verificato: il logo finisce a 743, il primo elemento a destra comincia a 1732, la ricerca occupa 1020-1540). ------------------------------------------------------------------------- */ @media (min-width:992px){ #header .main-header .header-wrapper{position:relative} #header .searchbar-wrapper{ position:absolute; left:50%; transform:translateX(-50%); width:520px; max-width:42%; margin:0; } } /* --- 2. i blocchi prodotto della home dentro un riquadro ------------------ */ .home-blocks-middle .block, .home-blocks-top .aone-tabs{ background:#fff; border:1px solid var(--d-line,#e6e8e7); border-radius:16px; padding:30px 26px; margin-bottom:30px; } /* --- 3. il sottomenu allineato alla voce (BUG DEL TEMA) ------------------- Il
  • e' gia' position:relative e il sottomenu e' position:absolute con left:0: sarebbe gia' allineato da solo. Poi il JavaScript del menu gli scrive addosso uno style inline tipo "margin-left: 33.7413px" — valori frazionari, quindi calcolati a runtime — che CRESCE con la posizione della voce: misurato +34 px su BASI, +65 su AROMI CONCENTRATI, +236 su MINI SHOT 10/20, +392 su MINI SHOT 10/30. In pratica conta due volte lo spostamento della voce. Azzerando il margine ogni tendina torna sotto la sua voce. Verificato che nessuna sbordi: nel caso peggiore (E-SALT) restano 593 px prima del bordo destro. Serve !important perche' lo style e' inline. ------------------------------------------------------------------------- */ .amenu-item .adropdown{margin-left:0 !important} /* --- 4. i pulsanti di condivisione centrati ------------------------------- */ .product-additional-info .social-sharing{text-align:center} .product-additional-info .social-sharing ul{justify-content:center} /* --- 5. "Guida alla miscelazione" come pulsante vero ---------------------- Era un