/* 2026-08-24 — Tolte le forme decorative di sfondo (i «cerchi»): erano tre pseudo-elementi — `.page-hero::before` / `.catalogue-hero::before`, `.story-hero::after` e `.cta-band::after`. Richiesta di Marco: «rimuovi tutti i cerchi decorativi». Si vedevano soprattutto nella hero delle carte regalo e nelle pagine B2B, che usano `.page-hero`. NON sono stati toccati i tondi dell'interfaccia (bottone carrello, menu, logo, numeri dei passi): quelli sono comandi, non decorazione. */ /* Zeus Anacardi — Living Catalogue: shared commerce foundation */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; color: var(--color-text); background: var(--color-canvas); font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.62; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { color: inherit; font: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--ff-display); font-weight: 500; line-height: 1.03; letter-spacing: -.032em; } h1 { font-size: var(--fs-hero); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 1rem; } ::selection { color: var(--color-text); background: var(--color-primary-soft); } :focus-visible { outline: none; box-shadow: var(--focus-ring); } .wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--pad); } .muted { color: var(--color-text-soft); } .center { text-align: center; } .lead { max-width: 42rem; color: var(--color-text-soft); font-size: var(--fs-lead); line-height: 1.55; } .eyebrow, .catalogue-index { margin: 0 0 .85rem; color: var(--color-primary); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .section { position: relative; padding-block: var(--sec); } .section-alt { background: var(--color-surface-soft); } .section-head { max-width: 43rem; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); } .section-head.center { margin-inline: auto; } .grid { display: grid; gap: var(--gap); } .grid > * { min-width: 0; } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Buttons are controls, not decorative pills. */ .btn { display: inline-flex; min-height: 3.05rem; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.3rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: .9rem; font-weight: 600; line-height: 1; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* 2026-08-09 — Bottone grande: serve alla home B2B, dove Zeus ha chiesto che «Accedi al listino» e «Diventa rivenditore» fossero piu' evidenti e subito sotto il titolo. Su telefono i due bottoni vanno a tutta larghezza, uno sopra l'altro: affiancati a 375 px starebbero troppo stretti. */ .btn--lg { min-height: 3.6rem; padding: 1.05rem 2rem; font-size: 1rem; } /* Occhio «mostra la password» — lo attacca da solo js/zeus.js a ogni campo password del sito. Il guscio serve a posizionare il bottone dentro il campo senza toccare la struttura delle form, che nelle varie pagine e' diversa. */ .pwd-wrap { position: relative; display: block; } .pwd-wrap input { width: 100%; padding-right: 3.1rem; } .pwd-eye { position: absolute; top: 50%; right: .55rem; display: grid; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-soft); cursor: pointer; place-items: center; transform: translateY(-50%); } .pwd-eye:hover { color: var(--color-primary); } .pwd-eye.is-on { color: var(--color-primary); } .pwd-eye:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (max-width: 560px) { .hero__cta--big { flex-direction: column; align-items: stretch; } .hero__cta--big .btn--lg { width: 100%; } } .btn-primary { color: var(--button-primary-fg); background: var(--button-primary-bg); } .btn-primary:hover { background: var(--button-primary-hover); } .btn-secondary { border-color: var(--color-border-strong); background: transparent; } .btn-secondary:hover { border-color: var(--color-primary); background: var(--color-surface-sage); } .btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; } .btn-full { width: 100%; } /* Header */ .site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid var(--color-border); background: hsl(45 50% 99% / .9); backdrop-filter: blur(16px) saturate(1.12); } .header-inner { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: .72rem; } .brand-logo { width: 2.75rem; height: 2.75rem; border-radius: 50%; } .brand-text { display: flex; flex-direction: column; font-family: var(--ff-display); font-size: 1.15rem; font-weight: 600; line-height: 1; } .brand-text small { margin-top: .35rem; color: var(--color-primary); font-family: var(--ff-body); font-size: .56rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .nav { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); margin-left: auto; margin-right: 1.2rem; } .nav a { position: relative; padding: .55rem 0; font-size: .82rem; font-weight: 600; letter-spacing: .06em; } .nav a::after { position: absolute; right: 0; bottom: .2rem; left: 0; height: 1px; content: ''; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: .45rem; } .cart-btn, .nav-toggle { position: relative; display: inline-grid; width: 2.72rem; height: 2.72rem; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); transition: border-color .2s ease, background .2s ease; } .cart-btn:hover, .nav-toggle:hover { border-color: var(--color-primary); background: var(--color-surface-sage); } .cart-btn svg { width: 1.2rem; height: 1.2rem; } .cart-count { position: absolute; top: -.23rem; right: -.23rem; display: grid; min-width: 1.18rem; height: 1.18rem; place-items: center; padding: 0 .2rem; border-radius: 99px; color: var(--primitive-white); background: var(--color-primary); font-size: .62rem; font-weight: 700; } .nav-toggle, .nav-mobile { display: none; } /* ===== Sfondo animato delle pagine shop ===================================== Verde per gli alimentari, viola chiaro per la cosmesi. Il movimento e' solo uno spostamento lento della posizione del gradiente: nessun elemento cambia geometria, quindi il browser non ricalcola il layout e la pagina non scalda. Tinte molto chiare di proposito: le tessere prodotto restano bianche e in primo piano, il testo resta leggibile. Nota: il viola NON viene dalle confezioni (sono bianco-crema con verde) — e' una scelta cromatica, si cambia da queste due righe. */ .page-shop { --shop-a: hsl(96 34% 92%); --shop-b: hsl(84 40% 86%); --shop-c: hsl(45 46% 93%); } .page-shop[data-linea='cosmetici'] { --shop-a: hsl(276 34% 94%); --shop-b: hsl(264 36% 88%); --shop-c: hsl(310 26% 94%); } .page-shop { background: radial-gradient(60rem 40rem at 12% -8%, var(--shop-c), transparent 62%), radial-gradient(52rem 38rem at 92% 12%, var(--shop-b), transparent 58%), linear-gradient(128deg, var(--shop-a), var(--shop-c) 44%, var(--shop-b) 78%, var(--shop-a)); background-size: 160% 160%, 150% 150%, 220% 220%; background-attachment: fixed; animation: shop-respiro 38s ease-in-out infinite alternate; } @keyframes shop-respiro { from { background-position: 0% 0%, 100% 0%, 0% 50%; } to { background-position: 18% 12%, 78% 22%, 100% 50%; } } @media (prefers-reduced-motion: reduce) { .page-shop { animation: none; } } /* le sezioni interne non devono coprire lo sfondo */ .page-shop .page-hero, .page-shop .section, .page-shop .section-alt { background: transparent; } .page-shop .page-hero { border-bottom-color: hsl(101 22% 37% / .18); } /* Shared catalogue hero */ .page-hero, .catalogue-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); background: linear-gradient(112deg, var(--color-surface-soft), var(--color-surface-sage)); } /* 2026-08-09 — Cerchio dell'intestazione: Zeus ha chiesto di cambiarlo. Il filo scende da .15 a .07 di opacita': si legge come una velatura del fondo e non come una riga che taglia la pagina. Sul packshot invece e' stato tolto. */ /* 2026-08-17 — Zeus non lo vuole sulle due vetrine: li' lo sfondo e' gia' un gradiente colorato e il cerchio ci si sovrapponeva. Dal 2026-08-24 i cerchi non esistono più su NESSUNA intestazione, quindi la regola che li spegneva qui è stata tolta: non aveva più niente da spegnere. */ .page-hero { padding-block: clamp(3rem, 6vw, 5rem); } .page-hero h1 { max-width: 13ch; font-size: clamp(2.65rem, 5.9vw, 5.15rem); } .page-hero .lead { margin-bottom: 0; } .catalogue-hero { padding-block: clamp(2.5rem, 5vw, 4.3rem); } .catalogue-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .58fr); align-items: end; gap: 2rem; } .catalogue-hero h1 { max-width: 9ch; } .catalogue-note { position: relative; max-width: 21rem; padding: 1.15rem 0 0 1.15rem; border-top: 1px solid var(--color-border-strong); } .catalogue-note::before { position: absolute; top: -1px; left: 0; width: 3.5rem; height: 1px; content: ''; background: var(--color-primary); } .catalogue-note p:last-child { margin: 0; color: var(--color-text-soft); font-size: .92rem; } /* Trust */ .trust { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; padding: 0; border-block: 1px solid var(--color-border); } .trust li { display: flex; min-height: 4.7rem; align-items: center; justify-content: center; gap: .65rem; padding: .9rem 1rem; border-right: 1px solid var(--color-border); list-style: none; font-size: .8rem; font-weight: 600; text-align: center; } .trust li:last-child { border-right: 0; } .trust svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-primary); } /* Product tile: flat, editorial, fast to scan. */ .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.8rem) var(--gap); } /* La card e' una tessera piena che galleggia sopra lo sfondo animato della pagina. Prima: uno pseudo-elemento colorato con z-index:-1 su un contenitore che NON creava stacking context, quindi finiva sotto lo sfondo della sezione e spariva; e le foto avevano mix-blend-mode:multiply, che le fondeva col fondo colorato facendole sembrare "sotto". Ora i packshot arrivano dai siti ufficiali gia' su fondo bianco, quindi basta una tessera chiara: niente blend, niente z-index negativi. */ .product-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100%; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--ombra-s); transition: transform .35s ease, box-shadow .35s ease; } @media (hover: hover) { .product-card:hover { transform: translateY(-.25rem); box-shadow: var(--ombra); } } .product-card > *:not(.product-media) { padding-inline: clamp(.9rem, 1.6vw, 1.15rem); } .product-card .row { margin-inline: clamp(.9rem, 1.6vw, 1.15rem); padding-inline: 0; } .product-card > h3 { margin-top: .8rem; } .product-card .row:last-child { margin-bottom: clamp(.9rem, 1.6vw, 1.15rem); } .product-media { position: relative; display: grid; min-height: clamp(14rem, 21vw, 18rem); place-items: center; padding: 1.1rem; background: var(--primitive-white); } .product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .product-card:hover .product-media img { transform: translateY(-.6rem) rotate(1.5deg) scale(1.025); } .product-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .product-card .cat { color: var(--color-primary); font-size: .67rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .product-index { color: var(--color-text-soft); font-size: .72rem; letter-spacing: .08em; } .product-card h3 { max-width: 18ch; margin: .45rem 0 .35rem; font-size: clamp(1.2rem, 1.65vw, 1.48rem); line-height: 1.08; } .product-card .desc { display: -webkit-box; overflow: hidden; min-height: 2.8em; margin: 0; color: var(--color-text-soft); font-size: .88rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-card .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--color-border); } .product-card .price { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; } .product-card .add { min-height: 2.35rem; padding: .5rem .85rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: transparent; font-size: .76rem; font-weight: 600; transition: color .2s ease, background .2s ease; } .product-card .add:hover { color: var(--primitive-white); border-color: var(--color-primary-dark); background: var(--color-primary-dark); } .product-card .add[disabled] { opacity: .5; } /* Home and legacy card compatibility */ .card { display: flex; overflow: hidden; flex-direction: column; border-top: 1px solid var(--color-border-strong); background: transparent; } .card-img { display: grid; min-height: 16rem; place-items: center; padding: 1rem; background: var(--color-surface-soft); } .card-img img { width: 100%; height: 100%; object-fit: contain; } .card-body { display: flex; flex: 1; flex-direction: column; gap: .4rem; padding: 1rem 0; } .card .cat { color: var(--color-primary); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; } .card h3 { font-size: 1.25rem; } .card .desc { color: var(--color-text-soft); font-size: .9rem; } .card .row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--color-border); } .card .price { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; } .card .add { padding: .5rem .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: transparent; font-size: .78rem; } /* Shop */ .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.65rem; padding-top: 1rem; border-top: 1px solid var(--color-border-strong); } .shop-switch { display: inline-flex; gap: .2rem; padding: .22rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: hsl(0 0% 100% / .5); } .shop-switch button { padding: .6rem 1.05rem; border: 0; border-radius: var(--radius-pill); background: transparent; font-size: .82rem; font-weight: 600; } .shop-switch button[aria-pressed='true'] { color: var(--primitive-white); background: var(--color-primary-dark); } .shop-count { color: var(--color-text-soft); font-size: .82rem; } .catalogue-band { display: grid; grid-template-columns: minmax(0, .8fr) minmax(16rem, 1.2fr); gap: var(--gap); align-items: center; padding: clamp(2.3rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .catalogue-band h2 { max-width: 10ch; margin: 0; } .catalogue-band .lead { margin: 0; } /* PDP */ .pdp-breadcrumb { padding-top: 1.1rem; color: var(--color-text-soft); font-size: .86rem; } .pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); gap: clamp(2rem, 6vw, 5.8rem); padding: clamp(1.6rem, 4vw, 3.1rem) 0 var(--sec); } .pdp-gallery { position: sticky; top: 5.8rem; display: grid; min-height: min(48rem, calc(100svh - 7rem)); place-items: center; overflow: hidden; border: 1px solid var(--color-border); background: radial-gradient(circle at 54% 39%, var(--primitive-white) 58%, var(--color-surface-soft)); } /* 2026-08-09 — Il cerchio decorativo dietro il packshot e' stato ELIMINATO su richiesta di Zeus: il filo passava sopra la foto del prodotto e sembrava un difetto della foto, non una decorazione. Dal 2026-08-24 sono spariti anche dalle intestazioni: Marco li ha voluti via da tutto il sito. */ /* niente mix-blend-mode: i packshot ufficiali sono gia' su bianco */ .pdp-gallery img { position: relative; width: 91%; height: 91%; object-fit: contain; } /* 2026-08-24 — Miniature, quando il prodotto ha piu' di una foto (foto dei formati + quelle aggiunte dal pannello). Il contenitore .pdp-media esiste SOLO in quel caso: con una foto sola la pagina resta identica a prima, .pdp-gallery compresa. La sticky si sposta sul contenitore, e la foto grande si accorcia di quanto serve alla striscia — altrimenti le miniature finirebbero sotto il bordo dello schermo, cioe' dove nessuno le vede. */ .pdp-media { position: sticky; top: 5.8rem; display: grid; gap: .55rem; align-content: start; } /* Altezza DEFINITA, non min-height: la foto è quadrata e con `width: 91%` si tirava dietro l'altezza (633 px su una colonna da 620), lasciando le miniature sotto il bordo dello schermo. Con un'altezza vera la foto si adatta dentro (object-fit: contain) e la striscia sta nella parte visibile quando la colonna si aggancia in alto. */ .pdp-media .pdp-gallery { position: static; min-height: 0; height: min(36rem, calc(100svh - 13rem)); } .pdp-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; } .pdp-thumb { width: 4.6rem; height: 4.6rem; padding: 0; border: 1px solid var(--color-border); background: var(--primitive-white); cursor: pointer; } .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; } .pdp-thumb[aria-pressed='true'] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } @media (max-width: 820px) { .pdp-media { position: static; } } .pdp-info { min-width: 0; padding-top: clamp(1rem, 4vw, 4.5rem); } .pdp-info .cat { display: block; margin-bottom: .8rem; color: var(--color-primary); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .pdp h1 { max-width: 11ch; font-size: clamp(2.4rem, 4.5vw, 4.25rem); } .pdp .price { margin: .8rem 0 1rem; font-family: var(--ff-display); font-size: 1.85rem; font-weight: 600; } .pdp-description { max-width: 34rem; } .pdp-proofs { display: grid; gap: .55rem; margin: 1.5rem 0; padding: 1.1rem 0; border-block: 1px solid var(--color-border); } .pdp-proofs span { display: flex; gap: .65rem; font-size: .9rem; } .pdp-proofs span::before { color: var(--color-primary); content: '✦'; } .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1.3rem 0; } .pack { position: relative; min-height: 6.8rem; padding: .8rem .55rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-s); background: var(--color-surface); text-align: center; transition: border-color .2s ease, background .2s ease; } .pack:hover, .pack[aria-pressed='true'] { border-color: var(--color-primary); background: var(--color-surface-sage); } .pack[aria-pressed='true']::after { position: absolute; top: .35rem; right: .45rem; color: var(--color-primary); content: '✓'; } /* Il numero di pezzi è la cosa che si sceglie, quindi è la cosa più grande del pulsante; il formato base sta sotto, piccolo (2026-07-30). */ .pk-n { display: block; font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--color-text); } .pk-label { display: block; font-size: .74rem; font-weight: 500; color: var(--color-text-soft); } .pk-price { display: block; margin-top: .25rem; font-family: var(--ff-display); font-size: 1.1rem; font-weight: 600; } .pk-save { display: block; margin-top: .28rem; color: var(--color-primary); font-size: .65rem; } /* Scheda B2B (2026-08-03): il riquadro contiene solo il numero di pezzi, quindi l'altezza pensata per numero + formato + prezzo lascerebbe un buco sotto. */ .packs--pezzi .pack { min-height: 0; padding: .7rem .55rem; } .pdp-shipping { margin: .75rem 0 0; color: var(--color-text-soft); font-size: .86rem; } /* Blocco descrizione, sotto la parte d'acquisto (2026-07-27). Il testo è quello dei siti ufficiali, diviso nelle stesse sezioni: descrizione, benefici, uso, ingredienti chiave; scheda tecnica e spedizioni restano a fisarmonica di lato. */ .pdp-jump { display: inline-block; margin-top: 1.4rem; color: var(--color-primary); font-size: .88rem; font-weight: 600; } .pdp-jump:hover { text-decoration: underline; } .pdp-testo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.6rem); max-width: 72rem; margin: clamp(3rem, 6vw, 5rem) auto 0; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-border); scroll-margin-top: 5rem; } .pdp-testo h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); } .pdp-testo h3 { margin-top: 2rem; font-family: var(--ff-display); font-size: 1.22rem; font-weight: 600; } .prosa { max-width: 40rem; margin-top: .9rem; } .prosa p + p { margin-top: .9rem; } .pdp-benefici, .pdp-ingredienti { display: grid; gap: .6rem; max-width: 40rem; margin-top: .9rem; padding: 0; list-style: none; } .pdp-benefici li, .pdp-ingredienti li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; font-size: .94rem; } .pdp-benefici li::before, .pdp-ingredienti li::before { color: var(--color-primary); content: '✦'; } .pdp-testo__side .accordion { margin-top: 0; } @media (max-width: 900px) { .pdp-testo { grid-template-columns: 1fr; } } .ingredient-note { margin: 1.5rem 0; padding: 1.15rem 1.25rem; border-left: 2px solid var(--color-primary); background: var(--color-surface-sage); } .ingredient-note p { margin: .35rem 0 0; color: var(--color-text-soft); font-size: .92rem; } .accordion { margin-top: 1.25rem; border-top: 1px solid var(--color-border); } .accordion details { border-bottom: 1px solid var(--color-border); } .accordion summary { display: flex; justify-content: space-between; padding: 1rem 0; font-weight: 600; cursor: pointer; list-style: none; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { color: var(--color-primary); content: '+'; font-size: 1.2rem; } .accordion details[open] summary::after { content: '−'; } .acc-body { padding: 0 0 1rem; color: var(--color-text-soft); } .ritual-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--color-border); } .ritual-head h2 { margin: 0; } /* Narrative pages */ .story-hero { isolation: isolate; } .story-hero .wrap, .page-hero .wrap { position: relative; z-index: 1; } .story-opening { display: grid; grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .story-opening-copy { max-width: 34rem; } .story-opening-copy h2 { max-width: 10ch; } .story-opening .media-frame { min-height: 26rem; border-radius: 0; } .story-principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); } .feature { padding: clamp(1.2rem, 3vw, 2rem); border-right: 1px solid var(--color-border); background: transparent; } .feature:last-child { border-right: 0; } .feature .ic { width: 2.25rem; height: 2.25rem; margin-bottom: 1rem; color: var(--color-primary); } .feature h3 { font-size: 1.3rem; } .feature p { margin: 0; color: var(--color-text-soft); font-size: .92rem; } .media-frame { position: relative; overflow: hidden; min-height: 20rem; background: var(--color-surface-sage); } .media-frame img { width: 100%; height: 100%; object-fit: cover; } .media-frame.ratio-4x3 { aspect-ratio: 4 / 3; } .media-frame.ratio-4x5 { aspect-ratio: 4 / 5; } .story-callout { position: relative; padding-left: clamp(1rem, 3vw, 2.8rem); border-left: 1px solid var(--color-primary); } .story-callout h2 { max-width: 10ch; } .cta-band { position: relative; overflow: hidden; padding: clamp(2.6rem, 5vw, 4.4rem) var(--pad); color: var(--primitive-white); background: var(--color-primary-dark); text-align: center; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: inherit; } .cta-band .btn-primary { color: var(--color-text); background: var(--primitive-white); } .filiera-layout { display: grid; grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .filiera-image { position: sticky; top: 5.9rem; } .filiera-image .media-frame { min-height: 34rem; border-radius: 0; } .steps { position: relative; display: grid; gap: 0; counter-reset: step; border-left: 1px solid var(--color-border-strong); } .step { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: .9rem; padding: 0 0 2.2rem 1.3rem; } .step::before { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); background: var(--color-canvas); counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--ff-display); font-size: .76rem; } .step h3 { margin: .1rem 0 .35rem; font-size: 1.38rem; } .step p { margin: 0; color: var(--color-text-soft); font-size: .94rem; } /* Forms and utility pages */ .form { display: grid; max-width: 36rem; gap: 1rem; } .field { display: grid; gap: .4rem; } .field label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; } .field input, .field textarea, .field select { padding: .82rem 0; border: 0; border-bottom: 1px solid var(--color-border-strong); border-radius: 0; background: transparent; font: inherit; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); box-shadow: 0 2px 0 var(--color-primary); outline: 0; } .field-hint { margin: .15rem 0 0; min-height: 1.05em; color: var(--color-text-soft); font-size: .78rem; } .field textarea { min-height: 8.5rem; resize: vertical; } .notice { margin: 1rem 0; padding: 1.05rem 1.15rem; border-left: 2px solid var(--color-primary); background: var(--color-surface-sage); } .placeholder-flag { display: inline-block; margin: .45rem 0; padding: .35rem .55rem; border: 1px dashed var(--color-accent); border-radius: .35rem; color: hsl(37 45% 32%); background: hsl(40 75% 94%); font-size: .74rem; } .prose { max-width: 47rem; padding-block: clamp(2.7rem, 6vw, 5rem); } .prose h2 { margin-top: 2.3rem; padding-top: .8rem; border-top: 1px solid var(--color-border); font-size: clamp(1.8rem, 3vw, 2.5rem); } .prose li { margin-bottom: .6rem; } /* Footer */ .site-footer { position: relative; overflow: hidden; color: hsl(91 24% 91%); background: var(--color-primary-dark); } .ornament { height: 3px; opacity: .75; background: linear-gradient(90deg, var(--color-primary-soft), var(--color-accent-soft), var(--color-primary-soft)); } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; padding-block: clamp(2.8rem, 6vw, 4.8rem); } /* 2026-08-17 — 🐞 «il logo non si vede»: era un DISCO BIANCO PIENO. Qui c'era `filter: brightness(0) invert(1)`, che porta a nero e poi a bianco OGNI pixel opaco. Il logo Zeus ha il volto e la greca disegnati in bianco dentro un medaglione verde salvia: il filtro li rendeva tutti dello stesso bianco, cioe' cancellava il disegno lasciando la sagoma. Senza filtro il medaglione salvia con il volto bianco si stacca bene dal verde scuro. */ .footer-brand img { width: 11rem; margin-bottom: 1rem; } .footer-brand p { max-width: 21rem; color: hsl(91 24% 91% / .72); font-size: .9rem; } .site-footer h4 { margin: 0 0 .9rem; color: var(--color-primary-soft); font-family: var(--ff-body); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; } .site-footer a { display: block; padding: .23rem 0; color: hsl(91 24% 91% / .84); font-size: .9rem; } .site-footer a:hover { color: var(--primitive-white); } .footer-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1rem; padding-block: 1rem; border-top: 1px solid hsl(0 0% 100% / .12); color: hsl(91 24% 91% / .65); font-size: .76rem; } .footer-legal { padding-block: 1rem; border-top: 1px solid hsl(0 0% 100% / .12); color: hsl(91 24% 91% / .54); font-size: .75rem; text-align: center; } /* Drawer and checkout */ .drawer-overlay { position: fixed; z-index: 60; inset: 0; visibility: hidden; opacity: 0; background: var(--color-overlay); backdrop-filter: blur(3px); transition: .25s ease; } .drawer-overlay[data-open='1'] { visibility: visible; opacity: 1; } .drawer { position: fixed; z-index: 61; top: 0; right: 0; display: flex; width: min(28rem, 94vw); height: 100%; flex-direction: column; border-left: 1px solid var(--color-border); background: var(--color-canvas); box-shadow: var(--ombra-forte); transform: translateX(105%); transition: transform .3s ease; } .drawer[data-open='1'] { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1.1rem var(--pad); border-bottom: 1px solid var(--color-border); } .drawer-head strong { font-family: var(--ff-display); font-size: 1.45rem; } /* Il pannello deve dire subito QUALE dei due carrelli stai guardando: sono separati (2026-07-27) e i prezzi dentro sono diversi. */ .drawer-canale { margin-right: auto; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--color-primary-dark); color: var(--primitive-white); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .drawer-altro { margin: 0; padding: .7rem var(--pad); border-bottom: 1px solid var(--color-border); background: var(--color-surface-sage); color: var(--color-text-soft); font-size: .8rem; } .drawer-altro a { color: var(--color-primary); font-weight: 600; text-decoration: underline; } .drawer[data-canale='b2b'] .drawer-head { border-bottom-color: var(--color-primary); } /* Richiesta di Marco: la lista degli articoli punta a occupare meta' del pannello, altrimenti non si capisce cosa si e' messo dentro. `flex-basis: 50%` e non `min-height: 50%` (2026-07-27): il min-height era un pavimento rigido e su schermi bassi spingeva il piede — pulsanti compresi — sotto il bordo del drawer. Con la basis la lista prende meta' pannello quando c'e' spazio, e cede per prima quando non ce n'e'. */ .drawer-items { flex: 1 1 50%; min-height: 0; overflow-y: auto; padding: .35rem var(--pad); } .drawer .upsell { flex: 0 0 auto; } /* Il piede non scorre più al proprio interno (2026-07-27). Prima aveva `max-height: 50%; overflow-y: auto` e ci stavano dentro codice sconto, consegna, totali, barra spedizione e due link: il contenuto in fondo — compreso «Apri la pagina carrello» — finiva sotto il taglio e sembrava che la pagina carrello non esistesse. Ora il piede tiene solo subtotale, barra spedizione e i due pulsanti, e si dimensiona su quelli. */ .drawer-foot { flex: 0 0 auto; } .drawer-foot .btn + .btn { margin-top: .5rem; } .cart-line--omaggio { background: var(--color-surface-soft); } .cart-line--omaggio .pr { color: var(--color-primary); font-family: var(--ff-body); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .cart-line--omaggio .fm { color: var(--color-primary); } /* ===== Pagina carrello ===================================================== */ .cart-page { padding-block: clamp(1.6rem, 4vw, 3rem) var(--sec); } .cart-page h1 { max-width: 12ch; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); } .cart-layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; } @media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .85fr); } } .cart-list { border-top: 1px solid var(--color-border-strong); } .cart-list .cart-line { padding: 1.15rem .2rem; } .cart-list .cart-thumb { width: 5.2rem; height: 5.2rem; } .cart-back { display: inline-block; margin-top: 1.2rem; color: var(--color-primary); font-weight: 600; font-size: .9rem; } .cart-back:hover { text-decoration: underline; } .cart-side { position: sticky; top: 5.8rem; padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid var(--color-border); background: var(--color-surface-soft); } .cart-side h2 { margin: 0 0 1rem; font-size: 1.35rem; } .cart-empty { display: grid; gap: 1.4rem; padding-block: 2rem; } /* ===== Account cliente ===================================================== */ .account-link { display: none; padding: .4rem .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); font-size: .8rem; font-weight: 600; white-space: nowrap; } .account-link:hover { border-color: var(--color-primary); color: var(--color-primary); } .account-link[data-in] { border-color: var(--color-primary); color: var(--color-primary); } @media (min-width: 560px) { .account-link { display: inline-block; } } .account { padding-block: clamp(1.6rem, 4vw, 3rem) var(--sec); } .account h1 { max-width: 16ch; } .acc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; } .acc-h2 { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--color-border-strong); font-size: 1.5rem; } .acc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(1.4rem, 3vw, 2.2rem); } @media (min-width: 780px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } } .acc-box { display: grid; align-content: start; gap: .8rem; padding: clamp(1.2rem, 2.6vw, 1.8rem); border: 1px solid var(--color-border); background: var(--color-surface); } .acc-box h2 { margin: 0 0 .3rem; font-size: 1.3rem; } .acc-box h3 { margin: 0 0 .3rem; font-family: var(--ff-display); font-size: 1.15rem; font-weight: 600; } .acc-box label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 500; } /* Selettore per tipo, non lista di tipi: i campi nuovi (text, tel, select) devono avere lo stesso vestito di email e password, senza doverli elencare a uno a uno. */ .acc-box input:not([type='checkbox']), .acc-box select { padding: .6rem .75rem; border: 1px solid var(--color-border-strong); background: var(--color-canvas); font: inherit; font-size: .95rem; } .acc-box small { color: var(--color-text-soft); font-size: .76rem; font-weight: 400; } .acc-check { display: flex !important; gap: .5rem; align-items: flex-start; font-weight: 400; } .acc-check input { margin-top: .2rem; accent-color: var(--color-primary); } .acc-check a { color: var(--color-primary); text-decoration: underline; } .acc-link { padding: 0; border: 0; background: none; color: var(--color-primary); cursor: pointer; font: inherit; font-size: .84rem; text-align: left; text-decoration: underline; } .acc-msg { margin: 0; font-size: .86rem; } .acc-msg.ok { color: var(--color-primary); } .acc-msg.err { color: #a33; } .acc-nota { margin: 0; color: var(--color-text-soft); font-size: .78rem; } /* Account: menu laterale + pannelli, come "Il mio account" di WooCommerce (2026-07-27). Prima la pagina mostrava solo la lista degli ordini. */ .acc-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(1.8rem, 4vw, 2.8rem); } .acc-nav { display: flex; flex-direction: column; align-self: start; border: 1px solid var(--color-border); background: var(--color-surface); } .acc-nav a, .acc-nav__exit { padding: .85rem 1.1rem; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 500; text-align: left; } .acc-nav a:last-of-type { border-bottom: 1px solid var(--color-border); } .acc-nav__exit { border-bottom: 0; color: var(--color-text-soft); } .acc-nav a:hover, .acc-nav__exit:hover { background: var(--color-surface-soft); } .acc-nav a[aria-current='page'] { border-left: 3px solid var(--color-primary); padding-left: calc(1.1rem - 3px); background: var(--color-surface-sage); font-weight: 600; } .acc-panel .acc-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .acc-panel .acc-grid { margin-top: 1.2rem; } .acc-row3 { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; } .acc-cap-hint { margin: -.2rem 0 0; min-height: 1.1em; color: var(--color-text-soft); font-size: .78rem; } .acc-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin-top: 1.5rem; } .acc-kpi__box { display: grid; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); background: var(--color-surface); } .acc-kpi__box span { color: var(--color-text-soft); font-size: .78rem; } .acc-kpi__box strong { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 600; } @media (max-width: 780px) { .acc-layout { grid-template-columns: 1fr; } .acc-nav { flex-direction: row; overflow-x: auto; } .acc-nav a, .acc-nav__exit { flex: none; border-bottom: 0; border-right: 1px solid var(--color-border); white-space: nowrap; } .acc-nav a[aria-current='page'] { border-left: 0; padding-left: 1.1rem; border-bottom: 3px solid var(--color-primary); } .acc-row3 { grid-template-columns: 5.5rem minmax(0, 1fr); } .acc-row3 label:last-child { grid-column: 1 / -1; } } .ordine { margin-bottom: .9rem; border: 1px solid var(--color-border); background: var(--color-surface); } .ordine header, .ordine footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem clamp(.9rem, 2vw, 1.2rem); } .ordine header { border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); } .ordine footer { border-top: 1px solid var(--color-border); } .ordine__data { font-weight: 600; } .ordine__n { margin-left: .6rem; color: var(--color-text-soft); font-size: .8rem; letter-spacing: .06em; } .ordine__stato { padding: .22rem .6rem; border-radius: var(--radius-pill); background: var(--color-surface-sage); font-size: .76rem; font-weight: 600; } .ordine__stato[data-s='spedito'] { background: var(--color-primary); color: var(--primitive-white); } .ordine__stato[data-s='annullato'] { background: hsl(0 40% 92%); color: #a33; } .ordine__righe { margin: 0; padding: .7rem clamp(.9rem, 2vw, 1.2rem); list-style: none; } .ordine__righe li { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; font-size: .9rem; } .ordine__tot strong { font-family: var(--ff-display); font-size: 1.1rem; } .ordine__track { color: var(--color-text-soft); font-size: .84rem; } .cart-line { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem .8rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border); } .cart-line .nm { font-size: .95rem; font-weight: 500; } .cart-line .pr { font-family: var(--ff-display); font-weight: 600; text-align: right; align-self: start; } .cart-thumb { display: grid; width: 3.6rem; height: 3.6rem; flex: none; place-items: center; background: var(--primitive-white); border: 1px solid var(--color-border); } .cart-thumb img { width: 100%; height: 100%; object-fit: contain; } .cart-line-body { display: grid; gap: .45rem; min-width: 0; } /* Prezzo e cestino nella stessa colonna a destra (2026-07-27): il cestino è l'unico modo per togliere una riga in un colpo — prima bisognava premere «−» fino a zero. */ .cart-line-end { display: grid; justify-items: end; gap: .5rem; align-self: start; } .cart-rm { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-soft); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .cart-rm svg { width: 1.05rem; height: 1.05rem; } .cart-rm:hover { border-color: var(--color-border-strong); background: var(--primitive-white); color: var(--color-primary-dark); } .cart-rm:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .qty { display: inline-flex; overflow: hidden; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); } .qty button { width: 2rem; height: 2rem; border: 0; background: var(--color-surface-soft); } .qty span { min-width: 2ch; text-align: center; } .drawer-foot { padding: 1.1rem var(--pad); border-top: 1px solid var(--color-border); background: var(--color-surface-soft); } .drawer-total { display: flex; justify-content: space-between; margin-bottom: .8rem; font-family: var(--ff-display); font-size: 1.3rem; font-weight: 600; } .drawer-note { margin: .65rem 0 0; color: var(--color-text-soft); font-size: .77rem; text-align: center; } .drawer-rows { display: grid; gap: .25rem; margin-bottom: .55rem; } .drawer-row { display: flex; justify-content: space-between; color: var(--color-text-soft); font-size: .86rem; } .upsell { padding: .85rem var(--pad); border-top: 1px solid var(--color-border); background: var(--color-surface); } .upsell-title { margin: 0 0 .55rem; font-family: var(--ff-display); font-size: 1.1rem; font-weight: 600; } .mini-card { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; } .mini-card + .mini-card { border-top: 1px solid var(--color-border); } .mini-img { display: grid; width: 3.35rem; height: 3.35rem; flex: none; place-items: center; background: var(--primitive-white); } .mini-img img { width: 100%; height: 100%; object-fit: contain; } .mini-body { display: flex; min-width: 0; flex: 1; flex-direction: column; } .mini-name { overflow: hidden; font-size: .83rem; line-height: 1.25; } .mini-price { font-family: var(--ff-display); font-weight: 600; } .mini-add { display: grid; width: 2.3rem; height: 2.3rem; flex: none; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; background: transparent; font-size: 1.15rem; } .ship-bar { padding: .8rem var(--pad); border-bottom: 1px solid var(--color-border); background: var(--color-surface-sage); } .ship-msg { margin: 0 0 .4rem; font-size: .82rem; } .ship-track { overflow: hidden; height: .3rem; border-radius: 99px; background: var(--color-primary-soft); } .ship-fill { height: 100%; border-radius: inherit; background: var(--color-accent); transition: width .35s ease; } .ship-fill.done { background: var(--color-primary); } .ship-bar.inline { margin: 1rem 0; border: 1px solid var(--color-border); } /* Carrello: codice sconto + modalità di consegna */ /* Riquadro «Hai una gift card?» al checkout: posizione e nome vengono dalle istruzioni già pubblicate da Zeus (schermata di pagamento, in fondo, prima dei dati di pagamento). */ .promo-box { margin: 1.4rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface-soft); } .promo-box .promo-row { margin-bottom: 0; } .promo-box .eyebrow { margin-bottom: .6rem; } .promo-box .promo-msg { margin-top: .55rem; } /* email dell'ospite: serve ai codici «primo ordine» */ .co-email { display: grid; gap: .3rem; margin-top: .8rem; font-size: .86rem; font-weight: 500; } .co-email small { color: var(--color-text-soft); font-weight: 400; } .promo-row { display: flex; gap: .5rem; margin-bottom: .8rem; } .promo-row input { min-width: 0; flex: 1; padding: .55rem .75rem; border: 1px solid var(--color-border-strong); background: var(--color-canvas); font: inherit; font-size: .88rem; text-transform: uppercase; } .promo-row .btn { padding-block: .5rem; font-size: .82rem; } .promo-msg { margin: -.35rem 0 .7rem; font-size: .8rem; } .promo-msg.ok { color: var(--color-primary); } .promo-msg.err { color: #a33; } .ship-mode { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .9rem; } .ship-mode label { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .65rem; border: 1px solid var(--color-border); background: var(--color-canvas); cursor: pointer; font-size: .84rem; } .ship-mode label:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } .ship-mode input { margin-top: .18rem; accent-color: var(--color-primary); } .ship-mode span { display: grid; gap: .1rem; font-weight: 500; } .ship-mode small { color: var(--color-text-soft); font-size: .74rem; font-weight: 400; } /* Upsell a 2 linee (tile categoria) */ .upsell-cats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .upsell-cat { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; } .upsell-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .upsell-cat:hover img { transform: scale(1.04); } .upsell-cat span { position: absolute; bottom: .45rem; left: .55rem; padding: .18rem .55rem; background: hsl(0 0% 100% / .92); font-family: var(--ff-display); font-size: .86rem; font-weight: 600; } /* Card: formato minimo multiplo */ .price-min { display: block; color: var(--color-text-soft); font-family: var(--ff-body); font-size: .72rem; font-weight: 400; } /* Footer: dati aziendali in evidenza */ .footer-data { margin-top: 1.1rem; color: hsl(91 24% 91% / .85); font-size: .86rem; font-style: normal; line-height: 1.75; } .footer-data strong { color: hsl(91 24% 96%); } .footer-data a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .checkout-page .nav, .checkout-page .nav-toggle, .checkout-page .site-footer { display: none; } .checkout-page .header-inner { justify-content: space-between; } .dest { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 1.2rem 0 .9rem; } .dest label { display: grid; gap: .3rem; font-size: .86rem; font-weight: 500; } .dest select, .dest input { padding: .55rem .7rem; border: 1px solid var(--color-border-strong); background: var(--color-canvas); font: inherit; font-size: .95rem; } .dest select { min-width: 14rem; } .checkout-page .ship-mode { margin-bottom: 1.2rem; } .checkout-page .ship-mode label:has(input:disabled) { opacity: .45; cursor: not-allowed; } /* dichiarazione rivenditore: sta qui e non in pages.css perche' il checkout carica solo tokens.css + base.css */ .dichiarazione { margin: 1.2rem 0; padding: 1rem 1.1rem; border: 1px solid var(--color-accent); border-radius: var(--radius-s); background: var(--color-surface-soft); } .dichiarazione .acc-check { font-size: .88rem; line-height: 1.5; } .dichiarazione .eyebrow { margin-bottom: .5rem; } .checkout-box { max-width: 42rem; margin-inline: auto; padding-block: clamp(2.6rem, 6vw, 4.6rem); } .checkout-box h1 { max-width: 9ch; } .summary { width: 100%; margin: 1.25rem 0; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); border-collapse: collapse; } .summary td { padding: 1rem .2rem; border-bottom: 1px solid var(--color-border); } .summary tr:last-child td { border-bottom: 0; } .summary td:last-child { font-family: var(--ff-display); font-weight: 600; text-align: right; } .summary tr:last-child td { font-size: 1.2rem; } /* ===== Prezzi reali, sconti, scheda tecnica (2026-07-25) ===================== */ .price-da { color: var(--color-text-soft); font-family: var(--ff-body); font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .price-was, .pk-price s { margin-left: .4rem; color: var(--color-text-soft); font-family: var(--ff-body); font-size: .8em; font-weight: 400; text-decoration-thickness: 1px; } .price.is-sale { color: var(--color-accent); } /* pastiglia sconto sulla foto: sta sopra al pannello colorato della card */ .badge-sale { position: absolute; z-index: 2; top: .7rem; left: .7rem; padding: .25rem .5rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--primitive-ink-900); font-family: var(--ff-body); font-size: .74rem; font-weight: 600; letter-spacing: .02em; } .product-media { position: relative; } /* Pastiglie sulle foto dell'area rivenditori (2026-07-30): quantità minima e omaggio compreso. Stanno in alto a sinistra come lo sconto, incolonnate: se un prodotto ha entrambe non si sovrappongono. */ .badge-min, .badge-omaggio { position: absolute; z-index: 2; left: .7rem; max-width: calc(100% - 1.4rem); padding: .25rem .5rem; border-radius: var(--radius-pill); font-family: var(--ff-body); font-size: .72rem; font-weight: 600; letter-spacing: .02em; } .badge-min { top: .7rem; background: var(--color-primary-dark); color: var(--primitive-white); } .badge-omaggio { top: 2.55rem; background: var(--color-accent); color: var(--primitive-ink-900); } /* se c'è solo l'omaggio, sale al posto del minimo */ .badge-omaggio:first-child { top: .7rem; } .sale-note { margin: -.5rem 0 .9rem; color: var(--color-accent); font-size: .9rem; } /* Riga dell'omaggio (flacone spray sugli oli, espositore sulle buste). 2026-08-03 — era un riquadro da 289 px sul telefono, piazzato fra il pulsante di acquisto e il rimando alla descrizione: si mangiava mezzo schermo e la descrizione finiva sepolta (segnalato da Marco). Ora è UNA RIGA: etichetta a sinistra, cosa spetta a destra, e va a capo solo sugli schermi stretti. ⚠️ Lo stesso componente serve entrambi gli omaggi e tutti e due i canali: se si ingrandisce di nuovo, si ingrandisce ovunque. */ .promo-gadget { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: .7rem 0; padding: .45rem .7rem; border: 1px dashed var(--color-accent); border-radius: var(--radius-s); background: var(--color-surface-soft); font-size: .84rem; line-height: 1.4; } .promo-gadget strong { font-family: var(--ff-display); font-weight: 600; white-space: nowrap; } .promo-gadget p { margin: 0; color: var(--color-text-soft); } /* Avviso di lotto (es. l'olio in scadenza a settembre 2026). Giallo come il bollo che il produttore mette sulla foto: chi vede la fascia e poi la bottiglia capisce che parlano della stessa cosa. Il testo non è un allarme — è un'informazione che giustifica il prezzo più basso. */ .avviso-lotto { margin: 1.1rem 0; padding: .85rem 1rem; border-left: 4px solid var(--color-accent); border-radius: var(--radius-s); background: var(--color-surface-soft); } .avviso-lotto + .avviso-lotto { margin-top: .5rem; } .avviso-lotto__t { margin: 0 0 .2rem; font-family: var(--ff-display); font-size: 1.02rem; } .avviso-lotto p { margin: 0; font-size: .92rem; color: var(--color-text-soft); } .avviso-lotto a { color: var(--color-primary); font-weight: 600; text-decoration: underline; } /* la stessa cosa, in una riga sola, dentro la card del catalogo */ .avviso-riga { margin: 0; color: var(--primitive-ink-900); font-size: .78rem; font-weight: 600; } .avviso-riga::before { content: '● '; color: var(--color-accent); } /* ---- Regole promozionali e minimi (drawer, carrello, checkout) ------------ Tre stati, tre colori, sempre gli stessi: neutro = «ti manca questo», verde = «ce l'hai», rosso = «così non puoi ordinare». Il colore non è mai l'unica informazione: il testo dice già tutto da sé. */ .regola { margin: .6rem 0; padding: .75rem .9rem; border: 1px solid var(--color-border-strong); border-left-width: 4px; border-radius: var(--radius-s); background: var(--color-surface-soft); } .regola__t { margin: 0 0 .2rem; font-family: var(--ff-display); font-size: .98rem; } .regola p { margin: 0; font-size: .86rem; color: var(--color-text-soft); } .regola--ok { border-left-color: var(--color-primary); background: var(--color-surface-sage); } /* #a33 è il rosso già usato nel sito per gli errori (.promo-msg.err) */ .regola--stop { border-left-color: #a33; background: hsl(0 45% 97%); } .regola--stop .regola__t { color: #a33; } .regola__n { display: inline-block; padding: 0 .32rem; border-radius: var(--radius-pill); background: var(--color-primary-soft); font-size: .76rem; font-weight: 600; color: var(--color-text); } .regola__barra { height: .34rem; margin: .5rem 0 .4rem; border-radius: var(--radius-pill); background: var(--color-border-strong); overflow: hidden; } .regola__barra > div { height: 100%; background: var(--color-primary); transition: width .3s ease; } .regola__manca { font-size: .8rem; } /* scheda tecnica */ .tab-tech, .tab-nutri { width: 100%; margin: .4rem 0 1rem; border-collapse: collapse; font-size: .9rem; } .tab-tech th, .tab-nutri th { width: 42%; padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-soft); font-weight: 500; text-align: left; vertical-align: top; } .tab-tech td, .tab-nutri td { padding: .5rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; } .tab-nutri caption { padding-bottom: .35rem; color: var(--color-text-soft); font-size: .8rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; } .tab-tech .inci { font-size: .78rem; line-height: 1.5; word-break: break-word; } .pdf-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; } /* formato scelto: nel carrello e sulle card B2B */ .cart-line .fm, .b2b-price-row .fm { color: var(--color-text-soft); font-family: var(--ff-body); font-size: .78rem; font-weight: 400; } .qty-b2b { margin-bottom: .4rem; } .hidden { display: none !important; } @media (max-width: 900px) { .cols-4, .cols-3, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 820px) { .nav { display: none; } .nav-toggle { display: inline-grid; } .nav-mobile { display: none; padding: .4rem var(--pad) 1.2rem; border-top: 1px solid var(--color-border); background: var(--color-canvas); } .nav-mobile[data-open='1'] { display: block; } .nav-mobile a { display: block; padding: .78rem 0; border-bottom: 1px solid var(--color-border); font-family: var(--ff-display); font-size: 1.28rem; } .pdp { grid-template-columns: 1fr; } .pdp-gallery { position: static; min-height: min(30rem, 88vw); } .pdp-info { padding-top: 0; } .filiera-layout { grid-template-columns: 1fr; } .filiera-image { position: static; } .filiera-image .media-frame { min-height: 26rem; } } @media (max-width: 660px) { .cols-4, .cols-3, .cols-2, .split, .product-grid, .catalogue-hero .wrap, .catalogue-band, .story-opening { grid-template-columns: 1fr; } .brand-text small { display: none; } .header-inner { min-height: 4.5rem; } .page-hero { padding-block: 2.7rem; } .page-hero h1 { font-size: clamp(2.5rem, 13vw, 3.9rem); } .catalogue-note { max-width: none; } .shop-toolbar { align-items: flex-start; flex-direction: column; } .product-card::before { inset: 2.5rem 0 auto; height: 14rem; } .product-media { min-height: 15rem; } .product-card h3 { font-size: 1.18rem; } .catalogue-band h2 { max-width: 13ch; } .story-principles { grid-template-columns: 1fr; } .feature { border-right: 0; border-bottom: 1px solid var(--color-border); } .feature:last-child { border-bottom: 0; } .story-opening .media-frame { min-height: 20rem; } .pdp h1 { max-width: 14ch; font-size: clamp(2.25rem, 11vw, 3.25rem); } .packs { gap: .35rem; } .pack { min-width: 0; padding: .7rem .25rem; } .pk-price { font-size: 1rem; } .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .trust { grid-template-columns: 1fr; } .trust li { min-height: 3.4rem; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--color-border); text-align: left; } .trust li:last-child { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Eccezione: le due strisce di condizioni (decisione di Marco, 2026-07-27). Il reset qui sopra vale `*` con `!important`, quindi schiacciava a .01ms anche l'animazione del marquee: toglierne il `@media` locale in pages.css non bastava. Queste due regole hanno specificità di classe e vincono. Le strisce si fermano comunque al passaggio del mouse. */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 42s !important; animation-iteration-count: infinite !important; } .b2b-marquee__track { animation-duration: 22s !important; animation-iteration-count: infinite !important; } } /* ── Selettore di lingua nell'header ───────────────────────────────────────── 2026-08-24, seconda versione. La prima erano due bottoni IT/EN affiancati, scelta giusta finché le lingue erano due. Ora sono SEI: sei bottoni in fila sarebbero l'elemento più largo dell'header, e su telefono non ci starebbero accanto a logo, carrello e hamburger. Quindi un