/* ═══════════════════════════════════════════════════════════════════════════ TSUNAMI PULITO - Design System 2026 Ispirato a r5living.com — premium Italian e-commerce ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --navy: #081622; --ocean: #0D3A6E; --wave: #0EA5C8; /* --wave-mid removed (G-07: unused) */ --wave-light: #B3E5F0; --gold: #C9933A; --gold-lt: #FDF3E0; --teal: #00ACC1; --bg: #FFFFFF; --bg-warm: #F4F7F9; /* bianco freddo (ex beige #F8F6F2): scala coerente #FFF → #F4F7F9 → --bg-light */ --bg-light: #EEF4F8; --bg-navy: #081622; /* fondale scuro CONDIVISO: lo stesso dell'hero e della Squadra del Pulito. Usato da sezioni, schede e footer scuri, così tutte le superfici scure del sito hanno la stessa profondità (non il navy piatto). */ /* ORIZZONTALE di proposito: senza componente verticale due superfici scure impilate (es. CTA + footer, onda + sezione) combaciano perfettamente al confine, qualunque sia la loro altezza. Con un gradiente diagonale ogni elemento ricominciava la sfumatura e si vedeva lo stacco. */ --bg-deep: linear-gradient(90deg, #081622 0%, #0d2a4f 55%, #0a3060 100%); --t1: #0A1622; --t2: #3E4F5C; --t3: #8596A3; --border: #E4EAF0; --ff-sans: 'Montserrat', 'Segoe UI', sans-serif; --ff-body: 'Inter', 'Segoe UI', sans-serif; --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;--s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; /* --s20/--s24/--s28/--s32 removed (G-13: unused) */ --sec-y: clamp(5rem, 8vw, 8rem); /* --r0 removed (G-13: unused) */ --r1:6px; --r2:12px; --r3:20px; --r4:32px; --rF:9999px; --sh1: 0 1px 4px rgba(8,22,34,.06); --sh2: 0 4px 16px rgba(8,22,34,.09); --sh3: 0 10px 36px rgba(8,22,34,.13); --sh4: 0 20px 60px rgba(8,22,34,.18); --ease: cubic-bezier(.4,0,.2,1); --spring: cubic-bezier(.34,1.56,.64,1); --out: cubic-bezier(0,0,.2,1); --nav-h: 76px; /* Rampa condivisa per sfumare il lato di una foto verso il testo: piena fino al 76%, poi passi ravvicinati per non lasciare bande. La usano .feature-split__img e .fondatrice-sec__img. */ --fs-ramp: #000 0%, #000 76%, rgba(0,0,0,.95) 82%, rgba(0,0,0,.80) 87%, rgba(0,0,0,.55) 91%, rgba(0,0,0,.28) 95%, rgba(0,0,0,.08) 98%, rgba(0,0,0,0) 100%; /* Apertura pagina: distanza fra il fondo della nav fissa e la prima riga (le briciole) nelle pagine senza header. UNA sola misura per tutte, cosi' Chi siamo, Contatti e Recensioni si aprono con le stesse proporzioni. */ --page-open-top: clamp(3rem, 6vw, 6rem); --wrap: 1340px; } /* ── Reset ──────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--ff-body);color:var(--t1);background:var(--bg); line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} img,video{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit} button{font:inherit;cursor:pointer;border:none;background:none} ul,ol{list-style:none} input,textarea,select{font:inherit} h1,h2,h3,h4{font-family:var(--ff-sans);font-weight:800;line-height:1.1; letter-spacing:-.025em;color:var(--t1)} /* ── Container ──────────────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2.5rem)} /* ── Section spacing ────────────────────────────────────────────────────── */ /* Titolo presente per lettori di schermo e motori di ricerca ma non a video: serve dove la pagina si apre senza header (vedi la bottega). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* Briciole di pane: una sola resa per tutte le pagine. */ .page-crumb{font-size:.78rem;font-family:var(--ff-sans);font-weight:600; color:var(--t3);margin-bottom:var(--s5)} .page-crumb a{color:var(--t3);text-decoration:none} .page-crumb a:hover{color:var(--wave);text-decoration:underline} .page-crumb span[aria-hidden]{margin-inline:var(--s2)} .page-crumb [aria-current]{color:var(--t2)} .sec{padding-block:var(--sec-y)} .sec--sm{padding-block:clamp(3rem,5vw,5rem)} .sec--lg{padding-block:clamp(6rem,10vw,10rem)} .sec--white{background:var(--bg)} .sec--warm{background:var(--bg-warm)} .sec--light{background:var(--bg-light)} /* Due sezioni grigie una dopo l'altra: senza onda in mezzo i due padding si sommano e lasciano un vuoto doppio (230px a 1440). Al confine ne basta uno. */ .sec.sec--warm + .sec.sec--warm, .sec.sec--light + .sec.sec--light, .sec.sec--white + .sec.sec--white{padding-top:clamp(2.2rem,3.6vw,3.6rem)} .sec.sec--warm:has(+ .sec.sec--warm), .sec.sec--light:has(+ .sec.sec--light), .sec.sec--white:has(+ .sec.sec--white){padding-bottom:clamp(2.2rem,3.6vw,3.6rem)} .sec--navy{background:var(--bg-deep);color:#fff;position:relative;overflow:hidden} /* Keep text content above the bubble canvas layer */ .sec--navy .wrap{position:relative;z-index:1} /* ── Typography ─────────────────────────────────────────────────────────── */ .display{font-family:var(--ff-sans);font-weight:900;letter-spacing:-.04em; font-size:clamp(3rem,8vw,8rem);line-height:.95;text-transform:uppercase} .h1{font-size:clamp(2.4rem,5vw,5rem)} .h2{font-size:clamp(1.8rem,3.5vw,3rem)} .h3{font-size:clamp(1.3rem,2.5vw,2rem)} .h4{font-size:clamp(1.1rem,2vw,1.4rem)} .eyebrow{font-family:var(--ff-sans);font-size:.72rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--wave)} /* Eyebrow with geyser dot — inline-flex so the dot sits beside the text */ .eyebrow--geyser{display:inline-flex;align-items:center;gap:6px} .lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--t2);line-height:1.75} .text-center{text-align:center} .text-white{color:#fff} /* ── Section Header ─────────────────────────────────────────────────────── */ .sec-hd{margin-bottom:clamp(2.5rem,4vw,4rem)} .sec-hd--center{text-align:center} .sec-hd .eyebrow{display:block;margin-bottom:var(--s3)} .sec-hd__title{margin-bottom:var(--s4)} .sec-hd__sub{color:var(--t2);font-size:1.05rem;line-height:1.75;max-width:540px} .sec-hd--center .sec-hd__sub{margin-inline:auto} /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--ff-sans);font-weight:700;letter-spacing:.04em;font-size:.85rem; text-transform:uppercase;padding:.9em 2.2em;border-radius:var(--r3); transition:background var(--ease) 180ms,color var(--ease) 180ms, transform var(--spring) 220ms,box-shadow var(--ease) 180ms; /* `nowrap` tiene il testo su una riga sola: giusto per un bottone corto, pericoloso per uno lungo dentro un contenitore stretto, perche' il testo non va a capo e viene tagliato invece di adattarsi. Il correttivo e' `min-width:0`: senza, un elemento flex si rifiuta di rimpicciolirsi sotto la larghezza del proprio contenuto, ed e' la ragione per cui i bottoni sfondavano il riquadro invece di stringersi. */ white-space:nowrap;min-width:0;cursor:pointer} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--dark{background:var(--navy);color:#fff} .btn--dark:hover{background:var(--ocean);box-shadow:0 8px 24px rgba(8,22,34,.3)} .btn--gold{ background:var(--wave);color:#fff;box-shadow:0 4px 20px rgba(14,165,200,.4); position:relative;overflow:hidden} .btn--gold:hover{background:#0990b3;box-shadow:0 8px 30px rgba(14,165,200,.55)} /* Rising micro-bubbles inside .btn--gold (two staggered streams) */ .btn--gold::before, .btn--gold::after{ content:'';position:absolute;bottom:0;left:0; width:100%;height:100%; background-image: radial-gradient(circle 3.5px at 18% 120%, rgba(255,255,255,.55) 0%, transparent 100%), radial-gradient(circle 2.5px at 45% 120%, rgba(255,255,255,.4) 0%, transparent 100%), radial-gradient(circle 4px at 72% 120%, rgba(255,255,255,.48) 0%, transparent 100%); background-repeat:no-repeat;background-size:100% 100%; pointer-events:none;z-index:0} .btn--gold::before{animation:btn-bub 3.1s ease-in-out infinite} .btn--gold::after {animation:btn-bub 3.1s ease-in-out 1.55s infinite} @keyframes btn-bub{ 0% {transform:translateY(0); opacity:0} 6% {opacity:1} 88% {opacity:.45} 100%{transform:translateY(-115%);opacity:0}} /* Keep button text above the pseudo-element bubbles */ .btn--gold > *,.btn--gold:not(:empty){position:relative;z-index:1} /* Arrow icon — hero CTA "Acquista ora": thicker stroke + gentle forward nudge */ .btn--gold .site-icon{stroke-width:2.4px} @keyframes arrow-fwd{ 0%,52%,100%{transform:translateX(0)} 68%{transform:translateX(7px)} 78%{transform:translateX(2px)} 88%{transform:translateX(6px)}} /* Freccia CTA: spinta in avanti ripetuta — applicata a ogni "→" di link/pulsanti del sito */ .arrow-cta{animation:arrow-fwd 2.6s ease-in-out infinite} .btn--wave{background:var(--wave);color:#fff;box-shadow:0 4px 16px rgba(14,165,200,.3)} .btn--wave:hover{background:#0b90b0;box-shadow:0 8px 28px rgba(14,165,200,.45)} .btn--outline{background:transparent;color:var(--navy);border:2px solid var(--navy)} .btn--outline:hover{background:var(--navy);color:#fff} .btn--outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)} .btn--outline-white:hover{background:rgba(255,255,255,.12);border-color:#fff} .btn--full{width:100%} .btn--lg{font-size:.95rem;padding:1.05em 2.8em} /* Radius proporzionale: sui bottoni piccoli 20px supererebbe metà altezza e il browser li dipingerebbe a pillola. 13px = stessa forma del .btn base. */ .btn--sm{font-size:.75rem;padding:.65em 1.5em;border-radius:13px} /* Nav scroll-CTA "Acquista": stessa forma a CASELLA del bottone hero (rettangolo stondato, non pillola). All'altezza btn--sm il raggio di default (20px) si clampa a capsula; --r2 (12px) mantiene lo stesso rapporto angolo/altezza dell'hero (≈0.36) → identica forma del box, in scala. */ #nav-cta{border-radius:var(--r2)} /* ── Badge ──────────────────────────────────────────────────────────────── */ .badge{display:inline-block;font-family:var(--ff-sans);font-size:.65rem; font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:.25em .8em;border-radius:var(--rF)} .badge--gold{background:var(--ocean);color:#fff} .badge--wave{background:var(--wave);color:#fff} .badge--navy{background:var(--navy);color:#fff} .badge--red{background:#E53935;color:#fff} .badge--teal{background:var(--wave);color:#fff} .badge--outline{background:transparent;border:1px solid currentColor} /* ── Stars ──────────────────────────────────────────────────────────────── */ .stars{color:var(--gold);font-size:.85rem;letter-spacing:.05em} /* ══════════════════════════════════════════════════════════════════════════ PAGE INTRO ANIMATION (homepage only) ══════════════════════════════════════════════════════════════════════════ */ .pg-intro{ position:fixed;inset:0;z-index:9999; /* Soft radial gradient — navy core, darker edges, subtle teal centre glow */ background: radial-gradient(ellipse 60% 52% at 50% 42%,rgba(14,165,200,.07) 0%,transparent 100%), radial-gradient(ellipse 88% 72% at 50% 38%,#0d2546 0%,#081622 52%,#040d17 100%); display:flex;align-items:center;justify-content:center; flex-direction:column;gap:var(--s6);overflow:hidden; pointer-events:none;will-change:transform} .pg-intro.is-out{animation:intro-rise .85s cubic-bezier(.76,0,.24,1) forwards} @keyframes intro-rise{to{transform:translateY(-105%)}} /* ── Logo wrapper — needed for ::after aura pseudo-element ── */ .pg-intro__logo-wrap{ position:relative; display:inline-flex;align-items:center;justify-content:center} /* ─ Expanding aura ring ───────────────────────────────────────────────── Starts at 0.72s (just after logo slides in at 0.7s), period 2.2s. Two rings stacked via ::after + ::before for depth. */ .pg-intro__logo-wrap::before, .pg-intro__logo-wrap::after{ content:'';position:absolute;border-radius:50%;pointer-events:none;opacity:0} /* Outer, slower ring */ .pg-intro__logo-wrap::before{ inset:-28px; background:radial-gradient(ellipse at 50% 50%,rgba(14,165,200,.35) 0%,transparent 60%); animation:intro-aura-outer 2.2s ease-in-out 0.72s infinite} @keyframes intro-aura-outer{ 0% {transform:scale(.76);opacity:0} 18% {opacity:.80;transform:scale(1.00)} 62% {transform:scale(1.80);opacity:0} 100% {transform:scale(2.00);opacity:0}} /* Inner, brighter ring — slightly offset phase */ .pg-intro__logo-wrap::after{ inset:-14px; background:radial-gradient(ellipse at 50% 50%,rgba(14,165,200,.60) 0%,transparent 58%); animation:intro-aura-inner 2.2s ease-in-out 1.0s infinite} @keyframes intro-aura-inner{ 0% {transform:scale(.82);opacity:0} 22% {opacity:.96;transform:scale(1.02)} 60% {transform:scale(1.55);opacity:0} 100% {transform:scale(1.70);opacity:0}} /* ─ Logo image: entrance + pulse + glow ─────────────────────────────── */ .pg-intro__logo{ width:clamp(140px,22vw,220px); /* entrance at 0-0.7s, then pulse+glow from 0.72s, period 2.2s */ animation: intro-logo .7s var(--out) forwards, intro-logo-pulse 2.2s ease-in-out 0.72s infinite} @keyframes intro-logo{ from{opacity:0;transform:translateY(20px)} to {opacity:1;transform:translateY(0)}} @keyframes intro-logo-pulse{ 0%,100%{ transform:scale(1); filter:drop-shadow(0 0 8px rgba(14,165,200,.50)) drop-shadow(0 0 26px rgba(14,165,200,.22))} 44%{ transform:scale(1.042); filter:drop-shadow(0 0 20px rgba(14,165,200,.95)) drop-shadow(0 0 54px rgba(14,165,200,.45))}} .pg-intro__tagline{ font-family:var(--ff-sans);font-size:.7rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45); animation:intro-logo .7s var(--out) .2s both} /* ── Animated waves canvas — replaces old static SVG wave ── */ .pg-intro__canvas{ position:absolute;inset:0;display:block; pointer-events:none;width:100%;height:100%} /* ── Freeze child animations when curtain rises ─────────────────────────── Prevents logo/tagline/aura from drifting independently of the container's intro-rise translateY, eliminating the visible pre-movement glitch. */ .pg-intro.is-out .pg-intro__logo, .pg-intro.is-out .pg-intro__tagline, .pg-intro.is-out .pg-intro__logo-wrap::before, .pg-intro.is-out .pg-intro__logo-wrap::after{ animation-play-state:paused} /* ══════════════════════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════════════════════ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h); display:flex;align-items:center; transition:background 300ms var(--ease),box-shadow 300ms var(--ease), border-color 300ms var(--ease)} .nav--hero{background:transparent;border-bottom:none} .nav--scrolled,.nav--white{ background:rgba(255,255,255,.98);border-bottom:1px solid var(--border); box-shadow:0 2px 20px rgba(8,22,34,.06)} /* nav__links centrato in assoluto rispetto al wrap — logo e actions mantengono la loro dimensione naturale */ .nav__wrap{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative} /* Logo */ .nav__logo{display:flex;align-items:center;transition:opacity 200ms; position:relative} .nav__logo:hover{opacity:.8} /* Expanding aura orb behind the logo */ .nav__logo::after{ content:'';position:absolute;inset:-8px;border-radius:50%; background:radial-gradient(ellipse at 50% 50%,rgba(14,165,200,.38) 0%,transparent 65%); animation:logo-aura 4.6s ease-in-out 1.8s infinite; pointer-events:none;opacity:0;will-change:transform,opacity} @keyframes logo-aura{ 0%,100%{transform:scale(0.85);opacity:0} 28% {opacity:.80;transform:scale(1.05)} 72% {transform:scale(1.6); opacity:0}} .nav__logo-img{height:44px;width:auto;display:block; transition:filter 800ms var(--ease); animation:logo-pulse 4.6s ease-in-out 1.8s infinite; will-change:transform} @keyframes logo-pulse{ 0%,100%{transform:scale(1)} 42% {transform:scale(1.034)}} .nav--hero .nav__logo-img{filter:none} .nav--scrolled .nav__logo-img,.nav--white .nav__logo-img{filter:none} /* Links — centrati in assoluto nel nav wrap, indipendenti dal peso di logo e actions */ .nav__links{display:flex;align-items:center;gap:var(--s1); position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); pointer-events:auto} .nav__link{font-family:var(--ff-sans);font-size:.82rem;font-weight:600; letter-spacing:.03em;padding:var(--s2) var(--s3);border-radius:var(--r1); transition:color 160ms,background 160ms;color:rgba(255,255,255,.85); position:relative} .nav--scrolled .nav__link,.nav--white .nav__link{color:var(--t2)} .nav__link:hover{color:#fff;background:rgba(255,255,255,.1)} .nav--scrolled .nav__link:hover,.nav--white .nav__link:hover{color:var(--navy);background:var(--bg-light)} .nav__link--active{color:#fff!important} .nav--scrolled .nav__link--active,.nav--white .nav__link--active{color:var(--navy)!important;background:var(--bg-light)} /* Active page indicator — small centered line inside bottom padding */ .nav__link--active::after{ content:''; position:absolute;bottom:1px;left:50%; transform:translateX(-50%); width:16px;height:2px; background:rgba(255,255,255,.75); border-radius:var(--rF)} .nav--scrolled .nav__link--active::after, .nav--white .nav__link--active::after{ background:var(--navy);opacity:.4} /* Dropdown */ .nav__item{position:relative} .nav__dropdown{ position:absolute;top:100%;left:50%; transform:translateX(-50%) translateY(10px) scale(.9); transform-origin:top center; background:#fff;border-radius:var(--r2);box-shadow:var(--sh4); border:1px solid var(--border);min-width:max-content; padding:var(--s2);padding-top:calc(var(--s2) + 12px); opacity:0;pointer-events:none; transition:opacity 220ms ease, transform 440ms cubic-bezier(0.34,1.62,0.64,1)} .nav__item:hover .nav__dropdown{ opacity:1;pointer-events:all; transform:translateX(-50%) translateY(0) scale(1)} .nav__dropdown a{display:flex;align-items:center;gap:var(--s3); font-size:.85rem;font-weight:600;color:var(--t2);padding:var(--s3) var(--s4); border-radius:var(--r1);white-space:nowrap; transition:background 140ms,color 140ms} .nav__dropdown a:hover{background:var(--bg-light);color:var(--navy)} .nav__link--game{color:var(--wave)!important} .nav__link--game:hover{color:#fff!important} /* doppia classe: vince sul justify-content:space-between della base, che è definita più avanti nel foglio (stessa specificità = perdeva) */ .nav-drawer__link.nav-drawer__link--game{color:var(--wave)!important; justify-content:flex-start;gap:var(--s4)} .nav-drawer__link--game:hover{color:var(--wave-light,#7EE8E8)!important} /* Logo Clean Hero nel drawer: piccolo, scritta alla sua destra, pulsazione leggera per attirare l'occhio (ferma se l'utente riduce le animazioni) */ .nav-drawer__game-logo{width:64px;height:auto;flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(8,22,34,.35)); animation:chLogoPulse 2.2s ease-in-out infinite} @keyframes chLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} @media (prefers-reduced-motion:reduce){.nav-drawer__game-logo{animation:none}} /* Actions — margin-left:auto li spinge a destra senza alterare le dimensioni del logo */ .nav__actions{display:flex;align-items:center;gap:var(--s3);margin-left:auto} /* Icona SVG carrello — sistema di taglie condiviso */ .cart-icon{display:block;flex-shrink:0;pointer-events:none} /* Bolla nav: fill da currentColor (bianco su hero, navy su nav bianca — già gestito) */ .nav__cart-icon,.cart-icon--nav{width:20px;height:20px;fill:currentColor} /* Bottone testo drawer mobile: sfondo scuro → bianco */ .cart-icon--inline{width:16px;height:16px;display:inline-block;vertical-align:-.15em;fill:rgba(255,255,255,.88)} /* Header drawer: sfondo navy → bianco */ .cart-icon--md{width:22px;height:22px;fill:rgba(255,255,255,.88)} /* Stato carrello vuoto su sfondo chiaro → teal del brand, sfumato */ .cart-icon--xl{width:52px;height:52px;fill:var(--teal,#0094A0);opacity:.38} /* ── Cart bubble — HeroBubble in miniatura: corpo quasi trasparente, ─ */ /* ── film iridescente sul bordo, riflesso speculare bianco in alto a sin. ─ */ .nav__cart{ position:relative;width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:1.1rem; color:#fff; /* Corpo bolla: quasi trasparente, solo leggero film interno */ background: radial-gradient(ellipse 50% 28% at 32% 26%, rgba(255,255,255,.72) 0%, transparent 100%), radial-gradient(circle at 50% 50%, rgba(200,240,255,.08) 0%, rgba(14,165,200,.05) 100%); /* Bordo iridescente bianco come le HeroBubble */ border:1.8px solid rgba(255,255,255,.42); box-shadow: 0 0 0 1.2px rgba(179,229,240,.48), /* secondo anello teal */ 0 4px 20px rgba(14,165,200,.36), /* bagliore esterno */ inset 0 1px 6px rgba(255,255,255,.18); animation:cart-bubble-float 3.4s ease-in-out infinite; will-change:transform; transition:box-shadow 200ms} /* Su nav bianco / scrolled: bordo leggermente più visibile */ .nav--scrolled .nav__cart, .nav--white .nav__cart{ background: radial-gradient(ellipse 50% 28% at 32% 26%, rgba(255,255,255,.80) 0%, transparent 100%), radial-gradient(circle at 50% 50%, rgba(200,240,255,.12) 0%, rgba(14,165,200,.07) 100%); border-color:rgba(14,165,200,.48); box-shadow: 0 0 0 1.2px rgba(14,165,200,.28), 0 4px 16px rgba(14,165,200,.26), inset 0 1px 6px rgba(255,255,255,.28); color:var(--navy)} /* Hover */ .nav__cart:hover{ animation-play-state:paused; transform:scale(1.1) translateY(-2px)!important; box-shadow: 0 0 0 1.5px rgba(179,229,240,.65), 0 8px 28px rgba(14,165,200,.52), inset 0 1px 6px rgba(255,255,255,.22)} /* Ring pulse iridescente — come la rim delle HeroBubble */ .nav__cart::before{ content:'';position:absolute;inset:-5px;border-radius:50%; border:1.5px solid rgba(179,229,240,.50); animation:cart-bubble-ring 2.8s ease-out infinite; pointer-events:none} @keyframes cart-bubble-float{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-5px)}} @keyframes cart-bubble-ring{ 0% {transform:scale(1); opacity:.60} 100%{transform:scale(1.72);opacity:0}} /* ── Cart badge – animated white/blue bubble ──────────────────────────────── */ .nav__cart-badge{ position:absolute;top:-9px;right:-9px; min-width:24px;height:24px;border-radius:50%;padding:0 5px; background:radial-gradient(circle at 36% 28%, #ffffff 0%, #b3e5f0 42%, #0ea5c8 100%); color:#052436;font-family:var(--ff-sans);font-size:.6rem;font-weight:900; display:none;align-items:center;justify-content:center; box-shadow:0 0 0 2.5px rgba(14,165,200,.3), 0 4px 14px rgba(14,165,200,.65); animation:badge-bob 2.7s ease-in-out infinite; overflow:visible;z-index:10} /* Expanding ring ripple */ .nav__cart-badge::before{ content:'';position:absolute;inset:-4px;border-radius:50%; border:1.5px solid rgba(14,165,200,.6); animation:badge-ring 2.3s ease-out infinite;pointer-events:none} /* Single micro-bubble drifting up via CSS */ .nav__cart-badge::after{ content:'';position:absolute; width:5px;height:5px;border-radius:50%;top:0;left:4px; background:radial-gradient(circle at 38% 28%, #fff 0%, rgba(14,165,200,.7) 100%); animation:badge-micro-css 4s ease-out infinite;pointer-events:none} @keyframes badge-bob{ 0%,100%{transform:scale(1) translateY(0)} 33% {transform:scale(1.14) translateY(-2.5px)} 66% {transform:scale(.96) translateY(1px)}} @keyframes badge-ring{ 0% {transform:scale(1); opacity:.72} 100%{transform:scale(2.4);opacity:0}} @keyframes badge-micro-css{ 0%,52%{transform:translateY(0) scale(0);opacity:0} 57% {transform:translateY(0) scale(1);opacity:.9} 100% {transform:translateY(-19px) translateX(4px) scale(0);opacity:0}} /* JS-spawned micro-bubbles */ .badge-bubble{ position:fixed;border-radius:50%;pointer-events:none;z-index:9999; background:radial-gradient(circle at 35% 28%, #ffffff 0%, #7EEEFF 48%, rgba(14,165,200,.55) 100%); border:1px solid rgba(14,165,200,.35); transform:translate(-50%,-50%)} /* Hamburger */ .nav__burger{display:none;flex-direction:column;gap:5px;width:38px;height:38px; align-items:center;justify-content:center;border-radius:var(--r1)} .nav__burger span{display:block;width:22px;height:2px;background:#fff; border-radius:2px;transition:transform 280ms var(--ease),opacity 280ms} .nav--scrolled .nav__burger span,.nav--white .nav__burger span{background:var(--navy)} .nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger.open span:nth-child(2){opacity:0} .nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── Bubble-mode toggle (homepage, mobile only) ─────────────────────────── */ .nav__right-col{display:contents} /* always transparent wrapper — no layout effect */ .nav__bubble-btn{display:none} /* hidden on desktop */ @media(max-width:768px){ /* nav__right-col stays display:contents — burger flows normally in nav__actions */ .nav__right-col{display:contents} /* Bubble btn: icona occhio nuda, senza bolla o sfondo */ .nav__bubble-btn{ position:fixed; top:calc(var(--nav-h) + 8px); right:var(--s4); z-index:195; display:flex;align-items:center;justify-content:center; width:34px;height:34px; background:none;border:none; color:rgba(255,255,255,.80); outline:none;cursor:pointer; transition:opacity 220ms,color 200ms,transform 200ms} /* Nasconde il pulsante quando l'hero è scrollato fuori dal viewport */ .nav__bubble-btn--offscreen{ opacity:0; pointer-events:none; transform:translateY(-5px)} .nav__bubble-btn:active{transform:scale(.88)} /* Active state: piena opacità */ .nav__bubble-btn.is-active{color:#fff} /* SVG icon switching */ .nbb__icon{display:block;pointer-events:none;width:22px;height:22px} .nbb__icon--restore{display:none} .nav__bubble-btn.is-active .nbb__icon--play{display:none} .nav__bubble-btn.is-active .nbb__icon--restore{display:block} } /* Hero bubble-mode: text fades out, pointer-events off */ .hero__text{transition:opacity 320ms ease} .hero--bubble-mode .hero__text{ opacity:0;pointer-events:none;user-select:none} /* Logo watermark — centro hero, visibile solo in bubble-mode su mobile */ .hero__bubble-logo{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; z-index:0; /* sotto il canvas bolle (z-index:1) */ pointer-events:none; opacity:0; transition:opacity 450ms ease} .hero__bubble-logo-img{ width:min(68vw, 340px); display:block; opacity:0.08} /* In bubble-mode su mobile: hero non scrollabile e touch libero per le bolle */ @media(max-width:768px){ .hero--bubble-mode{ touch-action:none; user-select:none} .hero--bubble-mode .hero__bubble-logo{ opacity:1} /* logo compare con il bubble-mode */ /* WhatsApp e lang-switcher: transizione fluida */ .whatsapp-btn, .lang-switcher{ transition:opacity 280ms ease, transform 280ms ease, box-shadow 200ms} /* Si nascondono in bubble-mode */ body.hero-bubble-mode .whatsapp-btn, body.hero-bubble-mode .lang-switcher{ opacity:0; pointer-events:none; transform:scale(0.82) translateY(10px)} } /* Mobile drawer */ .nav-drawer{ position:fixed;top:var(--nav-h);left:0;right:0;bottom:0; background:rgba(8,22,34,.90);z-index:199; display:flex;flex-direction:column;padding:var(--s8) var(--s6); transform:translateX(100%);transition:transform 380ms cubic-bezier(.76,0,.24,1); overflow-y:auto} .nav-drawer.open{transform:translateX(0)} /* I figli del drawer NON si comprimono: il menu scorre (overflow-y:auto) invece di schiacciare le voci. Senza questo, l'accordion Shop (overflow:hidden → minimo flex 0) veniva collassato a 0 dal flex-shrink quando il contenuto supera l'altezza → "non si apre". */ .nav-drawer > *{flex-shrink:0} .nav-drawer__link{font-family:var(--ff-sans);font-size:1.5rem;font-weight:800; color:#fff;padding:var(--s5) 0; display:flex;justify-content:space-between;align-items:center; transition:color 160ms} .nav-drawer__link:hover{color:var(--wave)} .nav-drawer__sub{padding-left:var(--s5);overflow:hidden;max-height:0; transition:max-height 360ms var(--ease)} /* Tetto abbondante: 300px tagliava la terza categoria (Panni Magici) */ .nav-drawer__sub.open{max-height:70vh} .nav-drawer__sub a{display:flex;align-items:center;gap:var(--s3);font-size:1rem;font-weight:600; color:rgba(255,255,255,.65);padding:var(--s3) 0;transition:color 160ms} .nav-drawer__sub a:hover{color:var(--wave-light)} /* Accesso account nel drawer: riga a due bottoni sotto le voci di menu. flex-basis 0 + min-width:0 → due colonne SEMPRE uguali e simmetriche; padding e font ridotti/fluidi così "Area personale" + "Esci" non sfondano mai il bordo destro (succedeva con flex:1 + padding 2.2em del .btn base). */ .nav-drawer__auth{display:flex;gap:var(--s3);margin-top:var(--s6); padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.14)} .nav-drawer__auth .btn{flex:1 1 0;min-width:0;padding-inline:.9em; font-size:clamp(.64rem,3.4vw,.85rem)} .nav-drawer__cta{margin-top:auto;padding-top:var(--s8);display:flex;flex-direction:column;gap:var(--s3)} /* ══════════════════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════════════════ */ .hero{ position:relative;min-height:100svh; background:linear-gradient(150deg,var(--navy) 0%,#0d2a4f 55%,#0a3060 100%); display:flex;align-items:center;overflow:hidden; isolation:isolate; /* keeps z-index:-1 bg-bubble canvas inside this context */ padding-top:var(--nav-h); -webkit-user-select:none;user-select:none; -webkit-touch-callout:none} /* iOS: blocca selezione testo e callout su long-press */ /* Background depth orbs ─ Wrapper carries will-change:transform + animation → compositor layer. ─ Inner div carries filter:blur only (no will-change, no animation). ─ Browser rasterises the blurred content once into the compositor layer; on every animation tick the GPU translates the pre-blurred texture without reapplying blur → eliminates the per-frame GPU convolution pass. */ .hero__orb-wrap{position:absolute;pointer-events:none;will-change:transform} .hero__orb-wrap--1{top:-10%;right:-5%;animation:orb-drift 14s ease-in-out infinite} .hero__orb-wrap--2{bottom:10%;left:-5%;animation:orb-drift 18s ease-in-out infinite reverse} .hero__orb-wrap--3{top:45%;left:45%;animation:orb-drift 22s ease-in-out infinite} /* Inner: static blur — baked once into the parent compositor layer */ .hero__orb{border-radius:50%;pointer-events:none;filter:blur(90px)} .hero__orb--1{width:clamp(300px,40vw,600px);height:clamp(300px,40vw,600px);background:var(--wave);opacity:.18} .hero__orb--2{width:clamp(200px,25vw,400px);height:clamp(200px,25vw,400px);background:var(--ocean);opacity:.22} .hero__orb--3{width:200px;height:200px;background:var(--gold);opacity:.08} /* Reduce blur cost on mobile GPUs */ @media (pointer:coarse){.hero__orb{filter:blur(60px)}} @keyframes orb-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-40px)}} /* Grid */ .hero__grid{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem);align-items:center; width:100%; padding-top:clamp(4rem,8vw,8rem); padding-bottom:clamp(7rem,12vw,11rem); position:relative} /* Text side */ .hero__text{position:relative;z-index:3} .hero__eyebrow{display:flex;align-items:center;gap:var(--s3); font-family:var(--ff-sans);font-size:.72rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.6);margin-bottom:var(--s5)} /* Eyebrow geyser nozzle — tiny blue-white sphere, no animation on itself */ .hero__eyebrow-dot{ width:5px;height:5px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 38% 32%, #ffffff 0%, #7EEEFF 45%, #0EA5C8 100%); box-shadow:0 0 5px rgba(14,165,200,.65)} /* JS-spawned geyser bubbles */ .eyebrow-bubble{ position:fixed;border-radius:50%;pointer-events:none;z-index:9999; background:radial-gradient(circle at 38% 32%, #ffffff 0%, #b3e5f0 50%, rgba(14,165,200,.5) 100%); border:.5px solid rgba(14,165,200,.35); transform:translate(-50%,-50%)} .hero__title{ font-family:var(--ff-sans);font-size:clamp(3rem,6.5vw,7rem); font-weight:900;line-height:1.02;letter-spacing:-.04em; text-transform:uppercase;color:#fff; padding-bottom:.06em; margin-bottom:var(--s6)} .hero__title em{font-style:normal;display:inline-block; line-height:1.15; /* own line-height > parent 1.02, expands element box */ overflow:visible; /* never clip descendant ink */ /* Gradiente animato: scorre lento e morbido lungo la parola. Gradiente simmetrico (chiaro→scuro→chiaro) + ping-pong 0↔100% = loop senza scatti. */ background:linear-gradient(100deg,#7EEEFF 0%,#22B8D9 18%,#0EA5C8 38%,#0B7E9B 55%,#0EA5C8 72%,#22B8D9 86%,#7EEEFF 100%); background-size:220% auto; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; animation:hero-pulito-flow 9s ease-in-out infinite; padding-bottom:.38em;padding-right:.08em} @keyframes hero-pulito-flow{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } @media (prefers-reduced-motion:reduce){.hero__title em{animation:none}} /* Sottotitolo: piu' grande e nitido, parole chiave nell'azzurro del brand. `max-width` in ch e l'interruzione nel markup tengono le due frasi su due righe pulite; le parole chiave non si spezzano mai a meta'. */ .hero__sub{font-size:clamp(1.05rem,1.55vw,1.35rem); color:rgba(255,255,255,.9);line-height:1.62;font-weight:500; max-width:52ch;margin-bottom:var(--s8);text-wrap:pretty} .hero__sub b{color:#7EEEFF;font-weight:800;white-space:nowrap} .hero__sub br{content:'';display:block;height:.15em} .hero__cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s10)} .hero__trust{display:flex;flex-wrap:wrap;gap:var(--s5)} .hero__trust-item{display:flex;align-items:center;gap:var(--s2); font-family:var(--ff-sans);font-size:.78rem;font-weight:600; color:rgba(255,255,255,.55)} .hero__trust-item svg,.hero__trust-item span:first-child{flex-shrink:0} /* Visual side */ .hero__visual{position:relative;display:flex;align-items:center;justify-content:center} /* Container bubble removed — canvas bubbles are the only visual element */ .hero__visual-bg{ width:clamp(340px,50vw,620px);height:clamp(340px,50vw,620px); position:relative;display:flex;align-items:center;justify-content:center; overflow:visible; animation:visual-float 9s ease-in-out infinite} @keyframes visual-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}} .hero__prod-grid{position:absolute;inset:0;width:100%;height:100%} /* Mini soap bubble cards */ .hero__prod-card{ position:absolute;width:27%;aspect-ratio:1; border-radius:50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.22) 0%, transparent 40%), radial-gradient(circle at 60% 65%, rgba(14,165,200,.12) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(13,58,110,.3) 0%, rgba(8,22,34,.08) 100%); border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 0 20px rgba(14,165,200,.12),0 4px 24px rgba(0,0,0,.18); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem; cursor:pointer;z-index:1;overflow:hidden; transition:border-color 250ms,box-shadow 250ms,transform 200ms var(--spring),z-index 0ms} .hero__prod-card:hover{ border-color:rgba(255,255,255,.5); box-shadow:inset 0 0 30px rgba(14,165,200,.2),0 8px 36px rgba(14,165,200,.28); transform:scale(1.08);z-index:3} /* Positions set dynamically by JS — nth-child as fallback. will-change removed: CSS animation:transform already triggers layer promotion. */ .hero__prod-card:nth-child(1){top:3%;left:28%;animation:bubble-float 6s ease-in-out infinite} .hero__prod-card:nth-child(2){top:5%;left:57%;animation:bubble-float 4.8s ease-in-out -1.2s infinite} .hero__prod-card:nth-child(3){top:38%;left:66%;animation:bubble-float 7.2s ease-in-out -2.8s infinite} .hero__prod-card:nth-child(4){top:63%;left:40%;animation:bubble-float 5.4s ease-in-out -1.6s infinite} .hero__prod-card:nth-child(5){top:60%;left:6%;animation:bubble-float 6.8s ease-in-out -3.4s infinite} @keyframes bubble-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)}} .hero__prod-card:hover{animation-play-state:paused} /* Icon / photo area inside bubble card */ .hero__prod-icon{ display:flex;align-items:center;justify-content:center; width:72%;flex-shrink:0;position:relative} /* Real product photo — fills the bubble */ .hero__prod-img{ width:100%;height:auto;object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); transition:transform 220ms var(--spring)} .hero__prod-card:hover .hero__prod-img{transform:scale(1.07) translateY(-3px)} /* Emoji fallback — small pill */ .hero__prod-emoji{ width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:1.55rem; background:rgba(255,255,255,.12)} .hero__prod-name{font-family:var(--ff-sans);font-size:.55rem;font-weight:700; color:rgba(255,255,255,.9);text-align:center;line-height:1.3;padding-inline:.4rem; margin-top:.1rem} .hero__prod-price{font-family:var(--ff-sans);font-size:.68rem;font-weight:800;color:var(--wave-light)} /* 3D Wave at bottom of hero */ .hero__waves{position:absolute;bottom:-2px;left:-6%;right:-6%;width:112%;overflow:hidden;pointer-events:none;z-index:2} .hero__waves svg{display:block;width:100%;overflow:visible} .hero__wave--3{animation:wave-slide-3 20s ease-in-out infinite;will-change:transform} .hero__wave--2{animation:wave-slide-2 14s ease-in-out -4s infinite;will-change:transform} .hero__wave--1{animation:wave-slide-1 9s ease-in-out -2s infinite;will-change:transform} @keyframes wave-slide-3{ 0% {transform:translateX(0) scaleY(1)} 30% {transform:translateX(-2.5%) scaleY(1.06)} 60% {transform:translateX(-4%) scaleY(.94)} 100%{transform:translateX(0) scaleY(1)}} @keyframes wave-slide-2{ 0% {transform:translateX(0) scaleY(1)} 40% {transform:translateX(3%) scaleY(.96)} 70% {transform:translateX(-2%) scaleY(1.05)} 100%{transform:translateX(0) scaleY(1)}} @keyframes wave-slide-1{ 0% {transform:translateX(0) scaleY(1)} 50% {transform:translateX(-3.5%) scaleY(1.04)} 100%{transform:translateX(0) scaleY(1)}} /* ══════════════════════════════════════════════════════════════════════════ TRUST STRIP ══════════════════════════════════════════════════════════════════════════ */ .trust-strip{padding-block:var(--s5)} /* se sotto c'e' un'onda, questa risale di 7vw e coprirebbe l'ultima riga della fascia (evidente quando le voci vanno a capo): si compensa con altrettanto spazio in basso */ .trust-strip:has(+ .sec-wave){padding-bottom:calc(var(--s5) + 7vw)} /* la fascia garanzie fa gia' da respiro: la sezione che segue non ha bisogno del padding pieno, altrimenti resta troppo vuoto tra le due */ .trust-strip + .sec{padding-top:clamp(1.8rem,3vw,2.8rem)} .trust-strip__list{display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:var(--s4) clamp(2rem,5vw,5rem)} .trust-strip__item{display:flex;align-items:center;gap:var(--s3); font-family:var(--ff-sans);font-size:.8rem;font-weight:600;color:var(--t2)} .trust-strip__icon{font-size:1.1rem} /* ══════════════════════════════════════════════════════════════════════════ PRODUCT CARD (R5Living style) ══════════════════════════════════════════════════════════════════════════ */ .prod-card{ background:var(--bg);border:1px solid var(--border); border-radius:16px;overflow:hidden; transition:transform 280ms var(--ease),box-shadow 280ms var(--ease); display:flex;flex-direction:column;position:relative} .prod-card:hover{transform:translateY(-6px);box-shadow:var(--sh3)} .prod-card__badge{position:absolute;top:var(--s3);left:var(--s3);z-index:2} .prod-card__img-wrap{ position:relative;aspect-ratio:1;overflow:hidden; border-top-left-radius:15px;border-top-right-radius:15px; background:var(--bg-warm);display:block;cursor:pointer} .prod-card__img{ width:100%;height:100%;object-fit:contain;padding:1.5rem; transition:transform 500ms var(--ease)} .prod-card__img--cover{object-fit:cover;padding:0} .prod-card__img-wrap:hover .prod-card__img{transform:scale(1.06)} /* ── Product card carousel ────────────────────────────────────────────────── */ .prod-card__carousel{ position:relative;width:100%;height:100%;overflow:hidden} /* Crossfade images stacked on top of each other */ .prod-card__ci{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; opacity:0; transition:opacity .55s ease, transform .55s ease; transform:scale(1.0)} .prod-card__ci.active{ opacity:1} /* Card hover: active image gets a very subtle zoom-in */ .prod-card__img-wrap:hover .prod-card__ci.active{ transform:scale(1.04)} /* Bottom vignette — appears on hover to give dots legibility */ .prod-card__carousel::after{ content:'';position:absolute;inset:0; background:linear-gradient( to bottom, transparent 55%, rgba(8,22,34,.32) 100%); pointer-events:none;z-index:1; opacity:0;transition:opacity .35s ease} .prod-card__img-wrap:hover .prod-card__carousel::after{opacity:1} /* Slide indicator dots */ .prod-card__cdots{ position:absolute;bottom:10px;left:50%; transform:translateX(-50%); display:flex;gap:6px;z-index:2; opacity:0;transition:opacity .3s ease; pointer-events:none} .prod-card__img-wrap:hover .prod-card__cdots{opacity:1} .prod-card__cdot{ width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,.45); box-shadow:0 1px 4px rgba(0,0,0,.35); transition:background .3s, transform .3s} .prod-card__cdot.active{ background:rgba(255,255,255,.95); transform:scale(1.35)} /* Gradient placeholder when no real image */ .prod-card__img-placeholder{ width:100%;height:100%;display:flex;align-items:center; justify-content:center;font-size:3.5rem; transition:transform 500ms var(--ease)} .prod-card__img-wrap:hover .prod-card__img-placeholder{transform:scale(1.06)} /* ── Coming Soon product card ──────────────────────────────────────────────── */ .prod-card__img-coming-soon{ width:100%;height:100%;position:relative;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--s3);transition:transform 500ms var(--ease)} .prod-card__img-wrap:hover .prod-card__img-coming-soon{transform:scale(1.04)} .cs-glow{ position:absolute;inset:0; background:radial-gradient(circle at 50% 45%,rgba(14,165,200,.22) 0%,rgba(14,165,200,.06) 45%,transparent 70%); animation:cs-pulse 2.6s ease-in-out infinite} .cs-glow--lg{position:absolute;inset:0; background:radial-gradient(circle at 50% 45%,rgba(14,165,200,.28) 0%,rgba(14,165,200,.08) 50%,transparent 72%); animation:cs-pulse 2.6s ease-in-out infinite} @keyframes cs-pulse{0%,100%{opacity:.6}50%{opacity:1}} .cs-icon{position:relative;z-index:1;font-size:2.4rem; filter:drop-shadow(0 0 10px rgba(14,165,200,.7)); animation:cs-float 3s ease-in-out infinite} @keyframes cs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .cs-label{position:relative;z-index:1; font-family:var(--ff-sans);font-size:.6rem;font-weight:900; letter-spacing:.22em;text-align:center;line-height:1.5; background:linear-gradient(100deg,#7EEEFF 0%,#0EA5C8 50%,#075A8C 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .cs-label--lg{font-size:1.1rem;letter-spacing:.28em} /* raggio interno (card 16px meno il bordo 1px): senza, lo sfondo del body dipinge un rettangolo squadrato sopra gli angoli inferiori arrotondati della card, che ha overflow:visible per le animazioni. */ .prod-card__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1; border-bottom-left-radius:15px;border-bottom-right-radius:15px} .prod-card__cat{font-size:.68rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--t3)} .prod-card__name{font-family:var(--ff-sans);font-size:.92rem;font-weight:700; color:var(--t1);line-height:1.3} .prod-card__short{font-size:.8rem;color:var(--t3);line-height:1.5;flex:1} .prod-card__rating{display:flex;align-items:center;gap:var(--s2)} .prod-card__rating-count{font-size:.75rem;color:var(--t3)} .prod-card__foot{display:flex;align-items:center;justify-content:space-between; margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--border);gap:var(--s3)} .prod-card__prices{display:flex;align-items:baseline;gap:var(--s2)} .prod-card__price{font-family:var(--ff-sans);font-size:1.2rem;font-weight:800;color:var(--t1)} .prod-card__old{font-size:.82rem;color:var(--t3);text-decoration:line-through} .prod-card__btn{ width:38px;height:38px;flex-shrink:0;border-radius:var(--r1); background:var(--navy);color:#fff;font-size:1.1rem;font-weight:700; display:flex;align-items:center;justify-content:center; transition:background 160ms,transform var(--spring) 200ms,box-shadow 160ms} .prod-card__btn:hover{background:var(--ocean);transform:scale(1.12); box-shadow:0 4px 14px rgba(13,58,110,.4)} .prod-card__btn:active{transform:scale(.95)} /* Contains (box products) */ .prod-card__contains{display:flex;flex-wrap:wrap;gap:var(--s1)} .prod-card__contains-tag{font-size:.68rem;font-weight:600; background:var(--bg-warm);color:var(--t3); padding:2px 8px;border-radius:var(--rF)} a.prod-card__contains-tag{text-decoration:none;cursor:pointer; transition:opacity .18s,filter .18s} a.prod-card__contains-tag:hover{opacity:.82;filter:brightness(1.08)} /* ══ TEMA COLORE PRODOTTO (.prod-card--pc) ═══════════════════════════════════ Ogni casella riprende il colore del suo prodotto: --pc (solido) e --pcg (gradiente) arrivano inline da js/product-accents.js. Detergenti = colore del flacone; Box = gradiente dei prodotti contenuti (panni esclusi = niente --pc). */ /* corpo con sfumatura del colore prodotto ben visibile e diagonale (come nel PDF) */ .prod-card--pc .prod-card__body{ background:linear-gradient(150deg, color-mix(in srgb, var(--pc) 20%, #fff) 0%, color-mix(in srgb, var(--pc) 8%, #fff) 46%, #fff 100%)} /* bordino colorato sotto la foto (come nel design di riferimento) */ .prod-card--pc .prod-card__img-wrap::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:4px; background:var(--pcg);z-index:3} /* pill etichetta-tipo nel colore del prodotto (uppercase, glossy come nel PDF) */ .prod-card--pc .prod-card__cat{ align-self:flex-start;margin-bottom:.15rem;color:var(--ptc,#fff);background:var(--pcg); padding:.42em .95em;border-radius:999px; font-size:.64rem;font-weight:800;letter-spacing:.1em; box-shadow:0 4px 12px -3px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.28)} /* titolo grande e in grassetto navy (come nel PDF) */ .prod-card--pc .prod-card__name{ font-size:1.12rem;font-weight:800;color:var(--t1);line-height:1.18;letter-spacing:-.01em} /* descrizione piu' leggibile + parola chiave nel colore del prodotto */ .prod-card--pc .prod-card__short{color:var(--t2);font-size:.84rem;line-height:1.5} /* scurita rispetto all'accento: con i gialli e gli azzurri chiari della tabella il colore pieno non sarebbe leggibile su bianco */ .prod-card--pc .prod-card__hl{color:color-mix(in srgb, var(--pc) 72%, #000);font-weight:800} /* CTA "+" nel colore del prodotto */ /* il + resta SEMPRE bianco, anche sui colori chiari (scelta di Oliver) */ .prod-card--pc .prod-card__btn{background:var(--pcg);color:#fff} .prod-card--pc .prod-card__btn:hover{ filter:brightness(1.07);transform:scale(1.12); box-shadow:0 5px 16px -3px color-mix(in srgb, var(--pc) 60%, transparent)} /* ombra hover della card sfumata nel colore prodotto */ .prod-card--pc:hover{ box-shadow:0 16px 34px -12px color-mix(in srgb, var(--pc) 34%, transparent), var(--sh3)} /* ── Colori tag Box Convenienza — palette ufficiale Tsunami Pulito ── */ /* tonalità più chiara → pastello bg; variante scura → testo leggibile */ .pct--deghiacciante{background:color-mix(in srgb, #81c3eb 42%, #fff);color:#0A1622} .pct--tessuti{background:color-mix(in srgb, #f15a30 42%, #fff);color:#0A1622} .pct--stufe{background:color-mix(in srgb, #b07656 42%, #fff);color:#0A1622} .pct--universale{background:color-mix(in srgb, #ffe850 42%, #fff);color:#0A1622} .pct--professionale{background:color-mix(in srgb, #faac77 42%, #fff);color:#0A1622} .pct--vetri{background:color-mix(in srgb, #42c8f5 42%, #fff);color:#002c57} .pct--barbecue{background:color-mix(in srgb, #a84152 42%, #fff);color:#0A1622} .pct--acciaio{background:color-mix(in srgb, #e2e3e4 42%, #fff);color:#5e6264} .pct--igienizzante{background:color-mix(in srgb, #9084bf 42%, #fff);color:#0A1622} .pct--remover{background:color-mix(in srgb, #bc91c2 42%, #fff);color:#40196e} .pct--antimuffa{background:color-mix(in srgb, #93cc82 42%, #fff);color:#0A1622} .pct--purisan{background:color-mix(in srgb, #a5d7d5 42%, #fff);color:#0A1622} .pct--disincrostante{background:color-mix(in srgb, #abd3db 42%, #fff);color:#0A1622} .pct--sgrassatore{background:color-mix(in srgb, #baae73 42%, #fff);color:#0A1622} /* i panni non sono in tabella: tengono il colore reale della microfibra, ora flat */ .pct--panno{background:#dff2fa;color:#134b63} /* Grid layouts */ .prod-grid{display:grid;gap:var(--s6)} .prod-grid--4{grid-template-columns:repeat(4,1fr)} .prod-grid--3{grid-template-columns:repeat(3,1fr)} .prod-grid--auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} /* ══════════════════════════════════════════════════════════════════════════ BEST SELLERS SECTION ══════════════════════════════════════════════════════════════════════════ */ .bestsellers__head{ display:flex;align-items:flex-end;justify-content:space-between; margin-bottom:clamp(2rem,4vw,3.5rem);gap:var(--s8);flex-wrap:wrap} /* ══════════════════════════════════════════════════════════════════════════ PRESS / MEDIA BAR ══════════════════════════════════════════════════════════════════════════ */ .press-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding-block:var(--s6);background:var(--bg-warm);overflow:hidden} .press-bar__label{font-family:var(--ff-sans);font-size:.72rem;font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--t3); text-align:center;margin-bottom:var(--s5)} .press-bar__scroll{display:flex;align-items:center;gap:clamp(2rem,5vw,5rem); flex-wrap:wrap;justify-content:center} .press-bar__item{font-family:var(--ff-sans);font-weight:800;font-size:clamp(.9rem,1.5vw,1.1rem); letter-spacing:.04em;color:var(--t3);text-transform:uppercase;white-space:nowrap; transition:color 200ms} .press-bar__item:hover{color:var(--navy)} /* ══════════════════════════════════════════════════════════════════════════ FULL-BLEED FEATURE SECTION (R5Living: impactful mid-page) ══════════════════════════════════════════════════════════════════════════ */ /* il fondo del contenitore e' cio' che si vede dove l'immagine sfuma: deve combaciare con lo sfondo del testo accanto (--dark lo sovrascrive) */ .feature-split{display:grid;grid-template-columns:1fr 1fr;min-height:520px;background:var(--bg-warm)} .feature-split--reverse .feature-split__img{order:2} .feature-split--reverse .feature-split__content{order:1} .feature-split__img{ position:relative;overflow:hidden;background:var(--bg-warm);min-height:400px} /* ── Sfumatura del SOLO bordo interno dell'immagine (quello verso il testo) ── I bordi che coincidono col confine della sezione restano netti: sfumarli creava aloni. Non esiste `--reverse` nell'HTML, quindi il lato dipende dall'ordine nel DOM: :first-child = immagine a sinistra (desktop) o in alto (impilato); :last-child = immagine a destra o in basso. Rampa a più stop per una caduta morbida, senza bande. */ .feature-split__img{ -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%} /* desktop, 2 colonne */ .feature-split__img:first-child{ /* Due maschere in intersezione: il lato verso il testo E il bordo inferiore, dove la foto finirebbe con un taglio dritto dentro alla sezione seguente. */ -webkit-mask-image:linear-gradient(to right,var(--fs-ramp)), linear-gradient(to top, transparent 0%, #000 13%); mask-image:linear-gradient(to right,var(--fs-ramp)), linear-gradient(to top, transparent 0%, #000 13%); -webkit-mask-composite:source-in; mask-composite:intersect} .feature-split__img:last-child{ -webkit-mask-image:linear-gradient(to left,var(--fs-ramp)); mask-image:linear-gradient(to left,var(--fs-ramp))} /* NB: in alto l'immagine NON va sfumata. La continuita' col blocco precedente la crea l'onda, che scavalca leggermente la sezione seguente e ne copre il bordo superiore (vedi il margine inferiore negativo di .sec-wave). */ .feature-split__img-inner{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; font-size:8rem; transition:transform 600ms var(--ease)} .feature-split:hover .feature-split__img-inner{transform:scale(1.04)} /* ── Wave / feature-split overlap ───────────────────────────────────────────── No entry wave above feature-split sections (removed from HTML). Exit wave only: min(5.5vw,65px) → section bottom lands inside the wd-1 solid fill zone, cleanly capping the photo edge at all viewport sizes. 375 px: exit 21 px (wave ≈ 26 px ✓) 768 px: exit 42 px (wave ≈ 54 px ✓) 1440 px: exit 65 px (wave ≈ 101 px ✓) ── */ .feature-split + .sec-wave{margin-top:-7vw} .page-hero + .sec-wave{margin-top:-7vw} /* L'onda ha lo sfondo trasparente e va SEMPRE sovrapposta alla sezione che la precede: senza il margine negativo la zona libera in alto lascia vedere il bianco del body e compare una banda chiara. */ .sec + .sec-wave, main + .sec-wave, .trust-strip + .sec-wave{margin-top:-7vw} /* dopo un'onda il respiro c'e' gia': la sezione seguente non ha bisogno del padding pieno, altrimenti resta troppo vuoto prima del titolo */ .sec-wave + .sec{padding-top:clamp(2.4rem,5vw,4.4rem)} /* L'onda risale di 7vw sulla sezione precedente: senza aria in fondo la cresta scura arriva addosso ai contenuti. Il max() garantisce che il padding non scenda mai sotto quello di serie (sui viewport stretti 7vw e' poca cosa). */ /* Vale ANCHE per le onde capovolte: pure quelle risalgono di 7vw dentro alla sezione, e il loro riempimento opaco tagliava di netto l'ombra delle schede (restavano 14px, all'ombra ne servono ~12 piu' un margine). */ .sec:has(+ .sec-wave){ padding-bottom:max(var(--sec-y), calc(var(--s8) + 7vw))} /* Compensate bottom padding so text clears the exit wave overlay */ .feature-split .feature-split__content{ padding-bottom:calc(clamp(2.5rem,6vw,6rem) + min(5.5vw,65px))} /* Dark section background – used as fill fallback under the photo. Il gradiente sta sul contenitore: figli trasparenti così scorre continuo. */ .feature-split--dark{background:var(--bg-deep)} .feature-split--dark .feature-split__img{background:transparent} .feature-split__content{ display:flex;flex-direction:column;justify-content:center; padding:clamp(2.5rem,6vw,6rem)} .feature-split--dark .feature-split__content{background:transparent;color:#fff} .feature-split--dark .h2,.feature-split--dark h2{color:#fff} .feature-split--dark .lead,.feature-split--dark p{color:rgba(255,255,255,.75)} .feature-split--warm .feature-split__content{background:var(--bg-warm)} /* ══════════════════════════════════════════════════════════════════════════ VALUES (3 columns) ══════════════════════════════════════════════════════════════════════════ */ /* Stessa scheda di "I nostri numeri" sulla superficie chiara (vedi .cert-card): icona in pastiglia, numero grande, etichetta, nota. */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch} .value-card{position:relative;overflow:hidden;border-radius:16px; border:1px solid var(--border); background:linear-gradient(150deg, color-mix(in srgb, var(--wave) 15%, #fff) 0%, color-mix(in srgb, var(--wave) 5%, #fff) 48%, #fff 100%); padding:clamp(1.5rem,2.4vw,2rem) var(--s5) clamp(1.3rem,2.2vw,1.7rem); text-align:center;display:flex;flex-direction:column;align-items:center; box-shadow:0 16px 36px -22px rgba(8,22,34,.4); transition:transform 280ms var(--ease),box-shadow 280ms var(--ease), border-color 280ms var(--ease)} .value-card:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--wave) 38%, #fff); box-shadow:0 18px 38px -16px color-mix(in srgb, var(--wave) 40%, transparent), 0 16px 36px -22px rgba(8,22,34,.4)} .value-card__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb, var(--wave) 13%, #fff); border:1px solid color-mix(in srgb, var(--wave) 32%, #fff); color:var(--ocean);margin-bottom:var(--s4);flex-shrink:0} .value-card__num{font-family:var(--ff-sans);font-size:clamp(2.2rem,4vw,3.1rem); font-weight:900;line-height:1;letter-spacing:-.035em;color:var(--navy)} .value-card__title{font-family:var(--ff-sans);font-size:.95rem;font-weight:800; letter-spacing:.01em;color:var(--t1);line-height:1.3;margin-top:var(--s3)} .value-card__text{font-size:.79rem;line-height:1.55;color:var(--t2); margin:var(--s2) 0 0;max-width:30ch} /* ══════════════════════════════════════════════════════════════════════════ CATEGORY CARDS (R5Living 4-column grid) ══════════════════════════════════════════════════════════════════════════ */ .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)} /* Stesso linguaggio delle card prodotto/recensione: foto in alto (con dentro le animazioni, invariate), corpo con la sfumatura del colore di categoria, pill uppercase, titolo navy. --pc/--pcg arrivano inline dall'HTML. */ .cat-card{ position:relative;border-radius:16px;overflow:hidden; border:1px solid var(--border); display:flex;flex-direction:column;cursor:pointer; background:linear-gradient(150deg, color-mix(in srgb, var(--pc) 18%, #fff) 0%, color-mix(in srgb, var(--pc) 7%, #fff) 46%, #fff 100%); transition:transform 280ms var(--ease),box-shadow 280ms var(--ease)} .cat-card:hover{transform:translateY(-6px); box-shadow:0 16px 34px -12px color-mix(in srgb, var(--pc) 34%, transparent),var(--sh3)} /* zona immagine: contiene sfondo e animazioni */ .cat-card__media{position:relative;aspect-ratio:4/3;overflow:hidden; border-top-left-radius:15px;border-top-right-radius:15px} .cat-card__media::after{content:'';position:absolute;inset:0;z-index:3; background:linear-gradient(to top,rgba(8,22,34,.34) 0%,transparent 46%)} .cat-card__media::before{content:'';position:absolute;left:0;right:0;bottom:0;height:4px; background:var(--pcg);z-index:4} .cat-card__bg{ position:absolute;inset:0; background-size:cover;background-position:center; transition:transform 600ms var(--ease)} .cat-card:hover .cat-card__bg{transform:scale(1.06)} /* corpo */ .cat-card__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1; border-bottom-left-radius:15px;border-bottom-right-radius:15px} .cat-card__pill{align-self:flex-start;color:var(--ptc,#fff);background:var(--pcg); padding:.42em .95em;border-radius:999px; font-family:var(--ff-sans);font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; box-shadow:0 4px 12px -3px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.28)} .cat-card__title{font-family:var(--ff-sans);font-size:1.12rem;font-weight:800; color:var(--t1);line-height:1.18;letter-spacing:-.01em} .cat-card__link{display:inline-flex;align-items:center;gap:var(--s2); font-family:var(--ff-sans);font-size:.75rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--wave);transition:gap 200ms,color 200ms} .cat-card:hover .cat-card__link{gap:var(--s3);color:var(--wave-light)} /* Category card product composition */ .cat-card__prods{ position:absolute;left:0;right:0;top:8%;bottom:6%; display:flex;align-items:flex-end;justify-content:center; pointer-events:none;overflow:hidden;z-index:2} .cat-card__prod{ flex-shrink:0;width:auto;object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); transition:transform 600ms var(--ease);position:relative} /* 3-bottle fan */ .cat-card__prod:nth-child(1){height:72%;transform:rotate(-13deg) translateX(6%);z-index:1;align-self:flex-end} .cat-card__prod:nth-child(2){height:92%;transform:rotate(-2deg);z-index:3;align-self:flex-end} .cat-card__prod:nth-child(3){height:72%;transform:rotate(13deg) translateX(-6%);z-index:1;align-self:flex-end} .cat-card:hover .cat-card__prod:nth-child(1){transform:rotate(-13deg) translateX(6%) translateY(-5%)} .cat-card:hover .cat-card__prod:nth-child(2){transform:rotate(-2deg) translateY(-5%)} .cat-card:hover .cat-card__prod:nth-child(3){transform:rotate(13deg) translateX(-6%) translateY(-5%)} /* 2-product variant (panni duo) */ .cat-card__prods--duo .cat-card__prod:nth-child(1){height:64%;transform:rotate(-10deg) translateX(18%)} .cat-card__prods--duo .cat-card__prod:nth-child(2){height:64%;transform:rotate(10deg) translateX(-18%)} .cat-card:hover .cat-card__prods--duo .cat-card__prod:nth-child(1){transform:rotate(-10deg) translateX(18%) translateY(-5%)} .cat-card:hover .cat-card__prods--duo .cat-card__prod:nth-child(2){transform:rotate(10deg) translateX(-18%) translateY(-5%)} /* cloths: full opacity, no blend */ .cat-card__prod--cloth{mix-blend-mode:normal;opacity:1} /* Float animation for Card Panni — mirrors fs-float (bottles in LA NOSTRA PROMESSA) Uses individual CSS `translate` property so it composes with the existing `transform:rotate() translateX()` without overriding it. */ @keyframes cloth-float{ 0%,100%{translate:0 0} 50% {translate:0 -14px}} .cat-card__prods--duo .cat-card__prod:nth-child(1){ animation:cloth-float 3.4s ease-in-out infinite;will-change:transform} .cat-card__prods--duo .cat-card__prod:nth-child(2){ animation:cloth-float 3.4s ease-in-out .6s infinite;will-change:transform} /* Feature-split product lineup — 5-bottle tight animated fan ───────────── */ .fs-lineup{ position:absolute;inset:0; display:flex;align-items:flex-end;justify-content:center; pointer-events:none;overflow:hidden} /* Slot outer wrapper: rotation + z-index + overlap */ .fs-slot{flex-shrink:0;display:flex;align-items:flex-end} /* Heights in vmin so they always render regardless of container height */ .fs-slot--1{transform:rotate(-19deg);z-index:1;margin-right:-22%} .fs-slot--2{transform:rotate(-9deg); z-index:3;margin-right:-14%} .fs-slot--3{z-index:5} .fs-slot--4{transform:rotate(9deg); z-index:3;margin-left:-14%} .fs-slot--5{transform:rotate(19deg); z-index:1;margin-left:-22%} /* Hide extra slots */ .fs-slot--6,.fs-slot--7{display:none} /* Prod inner img: explicit vmin height + float animation */ .fs-prod{ width:auto;object-fit:contain; filter:drop-shadow(0 12px 30px rgba(0,0,0,.55)); animation:fs-float 3.4s ease-in-out infinite; will-change:transform} /* Center bottle tallest, outer shortest */ .fs-slot--3 .fs-prod{height:clamp(300px,48vmin,560px);animation-delay:0s} .fs-slot--2 .fs-prod,.fs-slot--4 .fs-prod{height:clamp(245px,39vmin,455px);animation-delay:.55s} .fs-slot--1 .fs-prod,.fs-slot--5 .fs-prod{height:clamp(198px,31vmin,365px);animation-delay:1.1s} @keyframes fs-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}} /* ══════════════════════════════════════════════════════════════════════════ CERTIFICATIONS / TRUST BADGES ══════════════════════════════════════════════════════════════════════════ */ /* Stessa scheda di "I nostri numeri", tradotta sulla superficie chiara: il velo azzurro che li' e' rgba su fondo scuro qui diventa una sfumatura diagonale dal ciano al bianco, il resto (angoli, bordo, pastiglia icona, sollevamento in hover) e' identico. */ .cert-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch} .cert-card{position:relative;overflow:hidden;border-radius:16px; border:1px solid var(--border); background:linear-gradient(150deg, color-mix(in srgb, var(--wave) 15%, #fff) 0%, color-mix(in srgb, var(--wave) 5%, #fff) 48%, #fff 100%); padding:clamp(1.5rem,2.4vw,2rem) var(--s5) clamp(1.3rem,2.2vw,1.7rem); text-align:center;display:flex;flex-direction:column;align-items:center; box-shadow:0 16px 36px -22px rgba(8,22,34,.4); transition:transform 280ms var(--ease),box-shadow 280ms var(--ease), border-color 280ms var(--ease)} .cert-card:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--wave) 38%, #fff); box-shadow:0 18px 38px -16px color-mix(in srgb, var(--wave) 40%, transparent), 0 16px 36px -22px rgba(8,22,34,.4)} .cert-card__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb, var(--wave) 13%, #fff); border:1px solid color-mix(in srgb, var(--wave) 32%, #fff); color:var(--ocean);margin-bottom:var(--s4);flex-shrink:0} .cert-card__title{font-family:var(--ff-sans);font-size:.95rem;font-weight:800; letter-spacing:.01em;color:var(--t1);line-height:1.3;margin-bottom:var(--s2)} .cert-card__text{font-size:.79rem;line-height:1.55;color:var(--t2); margin:0;max-width:30ch} /* ══════════════════════════════════════════════════════════════════════════ TESTIMONIALS ══════════════════════════════════════════════════════════════════════════ */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} .testi-card{background:var(--bg);border:1px solid var(--border); border-radius:var(--r3);padding:clamp(1.5rem,2.5vw,2.5rem); transition:transform 250ms var(--ease),box-shadow 250ms;position:relative} .testi-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)} .testi-card__quote{position:absolute;top:var(--s4);right:var(--s5); font-size:4rem;font-family:Georgia,serif;line-height:1; color:var(--bg-light);pointer-events:none} .testi-card__stars{margin-bottom:var(--s4)} .testi-card__text{font-size:.9rem;color:var(--t2);line-height:1.75;margin-bottom:var(--s6)} .testi-card__author{display:flex;align-items:center;gap:var(--s4)} .testi-card__avatar{width:44px;height:44px;border-radius:50%; background:var(--bg-light);display:flex;align-items:center;justify-content:center; font-family:var(--ff-sans);font-weight:700;font-size:1rem;color:var(--ocean);flex-shrink:0} .testi-card__name{font-family:var(--ff-sans);font-size:.85rem;font-weight:700;color:var(--t1)} .testi-card__loc{font-size:.75rem;color:var(--t3);margin-top:2px} /* ══════════════════════════════════════════════════════════════════════════ STORY / ABOUT SPLIT ══════════════════════════════════════════════════════════════════════════ */ .about-grid{display:grid;grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,7rem);align-items:center} .about-img{ position:relative;border-radius:var(--r3); background:linear-gradient(135deg,var(--ocean) 0%,var(--wave) 100%); min-height:480px;display:flex;align-items:center;justify-content:center; font-size:7rem;box-shadow:var(--sh4)} /* Portrait variant — transparent PNG sits directly on white background */ .about-img--portrait{ background:transparent; box-shadow:none; border-radius:0; overflow:visible; align-items:flex-end} .about-img--portrait .about-portrait{ width:100%;height:auto;max-height:540px; object-fit:contain;object-position:bottom; display:block;pointer-events:none} .about-img__float{ position:absolute;background:#fff;border-radius:var(--r2); padding:var(--s4) var(--s5);box-shadow:var(--sh3); display:flex;align-items:center;gap:var(--s3)} .about-img__float--1{bottom:-24px;right:-24px} .about-img__float--2{top:28px;left:-28px} .about-img__float-icon{font-size:1.4rem} .about-img__float-text{font-family:var(--ff-sans);font-size:.76rem;font-weight:700; color:var(--t1);line-height:1.3} .about-img__float-text span{display:block;font-weight:400;color:var(--t3);font-size:.7rem} .about-content__sig{font-family:Georgia,serif;font-size:1.4rem; font-style:italic;color:var(--ocean);margin-block:var(--s6) var(--s8); display:flex;align-items:center;gap:.55rem} .about-content__sig-icon{ width:36px;height:36px;border-radius:50%; object-fit:cover;object-position:center top; flex-shrink:0;display:block} /* ── La Fondatrice – full-bleed portrait fills entire left column ───────── The section is a 2-col CSS grid with no padding; the image column fills the full section height (object-fit:cover). Content column handles its own vertical padding. Badges are positioned inside the image column. */ /* Blocco di apertura di "Chi siamo": la pagina non ha header, quindi questa sezione parte subito sotto la nav fissa e porta lei il titolo di pagina. Nel documento il testo viene PRIMA della foto (titolo in cima, per lettori di schermo e motori di ricerca): e' l'ordine visivo a metterla a sinistra. Per invertire foto e testo basta aggiungere .fondatrice-sec--img-right. */ .fondatrice-sec{ display:grid;grid-template-columns:1fr 1fr; background:var(--bg-warm); min-height:clamp(500px,60vw,720px); margin-top:var(--nav-h); overflow:hidden;position:relative} .fondatrice-sec__img{ position:relative;overflow:hidden;order:1; /* Il lato che confina col testo si dissolve invece di tagliare netto. Stessa rampa gia' calibrata per .feature-split__img: parte piena fino al 76% e poi scende con passi ravvicinati, cosi' non si vedono bande. */ -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-image:linear-gradient(to right,var(--fs-ramp)), linear-gradient(to top, transparent 0%, #000 13%); mask-image:linear-gradient(to right,var(--fs-ramp)), linear-gradient(to top, transparent 0%, #000 13%); /* due strati in intersezione: lato verso il testo E bordo inferiore, dove la foto finirebbe con un taglio dritto nella sezione seguente */ -webkit-mask-composite:source-in; mask-composite:intersect} /* foto a destra: la sfumatura passa sull'altro lato */ .fondatrice-sec--img-right .fondatrice-sec__img{ -webkit-mask-image:linear-gradient(to left,var(--fs-ramp)), linear-gradient(to top, transparent 0%, #000 13%); mask-image:linear-gradient(to left,var(--fs-ramp)), linear-gradient(to top, transparent 0%, #000 13%); -webkit-mask-composite:source-in; mask-composite:intersect} /* L'onda che segue risale di 7vw sulla sezione: senza aria in fondo arriva addosso ai pulsanti della colonna di testo. */ .fondatrice-sec:has(+ .sec-wave) .fondatrice-sec__body{ padding-bottom:max(var(--sec-y), calc(var(--s8) + 7vw))} .fondatrice-sec__body{order:2} .fondatrice-sec--img-right .fondatrice-sec__img{order:2} .fondatrice-sec--img-right .fondatrice-sec__body{order:1; padding-inline:var(--fs-gutter) clamp(1.5rem,3vw,3rem)} .fondatrice-sec__cta{display:flex;flex-wrap:wrap;gap:var(--s3)} /* In assoluto, non in flusso: altrimenti e' il rapporto naturale dell'immagine (2:3 = 1080px su una colonna da 720) a dettare l'altezza della sezione, e la colonna di testo, piu' corta, si ritrova centrata con un vuoto sopra. Cosi' l'altezza la detta il testo e la foto la riempie, qualunque sia il formato della foto che prendera' il suo posto. */ .fondatrice-sec__img .about-portrait{ position:absolute;inset:0; width:100%;height:100%;max-height:none; object-fit:cover;object-position:top center;display:block} .fondatrice-sec__img .about-img__float{position:absolute;z-index:2} .fondatrice-sec__img .about-img__float--1{bottom:var(--s8);right:var(--s6)} .fondatrice-sec__img .about-img__float--2{top:var(--s8);left:var(--s6)} .fondatrice-sec__body{ background:var(--bg-warm); display:flex;align-items:center; padding-block:var(--page-open-top) var(--sec-y); /* Stretto verso il centro (dove c'e' la foto); verso il bordo pagina si allinea al contenitore .wrap delle altre pagine, cosi' le briciole partono dalla stessa x. La colonna e' meta' pagina, quindi 200% = larghezza pagina. */ --fs-gutter:calc(max(0px, (200% - var(--wrap)) / 2) + clamp(1rem,3vw,2.5rem)); padding-inline:clamp(1.5rem,3vw,3rem) var(--fs-gutter)} /* ══════════════════════════════════════════════════════════════════════════ STATS / COUNTER ══════════════════════════════════════════════════════════════════════════ */ .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem); align-items:stretch} /* Schede numeri: stessa grammatica delle schede prodotto/categoria (angoli 16px, barra d'accento in alto, sollevamento in hover) ma su fondo scuro, quindi la superficie e' un velo azzurro invece del bianco. */ .stat-card{position:relative;overflow:hidden;border-radius:16px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(150deg, rgba(14,165,200,.20) 0%, rgba(255,255,255,.06) 48%, rgba(255,255,255,.028) 100%); padding:clamp(1.5rem,2.4vw,2rem) var(--s5) clamp(1.3rem,2.2vw,1.7rem); text-align:center;display:flex;flex-direction:column;align-items:center; box-shadow:0 16px 36px -20px rgba(0,0,0,.75); transition:transform 280ms var(--ease),box-shadow 280ms var(--ease), border-color 280ms var(--ease)} .stat-card:hover{transform:translateY(-6px);border-color:rgba(179,229,240,.42); box-shadow:0 18px 38px -14px rgba(14,165,200,.42),0 16px 36px -20px rgba(0,0,0,.75)} .stat-card__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(14,165,200,.2);border:1px solid rgba(179,229,240,.3); color:var(--wave-light);margin-bottom:var(--s4)} .stat-card__icon .site-icon{width:20px;height:20px} .stat-card__num{font-family:var(--ff-sans);font-size:clamp(2.2rem,4vw,3.1rem); font-weight:900;line-height:1;letter-spacing:-.035em;color:#fff; text-shadow:0 6px 26px rgba(14,165,200,.55)} .stat-card__stars{display:flex;gap:.15em;justify-content:center;color:var(--wave-light); margin-top:.55rem;line-height:0} .stat-card__stars svg{width:14px;height:14px;fill:currentColor} .stat-card__label{font-family:var(--ff-sans);font-size:.85rem;font-weight:800; letter-spacing:.03em;color:#fff;margin-top:var(--s3)} .stat-card__note{font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.62); margin:var(--s2) 0 0;max-width:26ch} /* ══════════════════════════════════════════════════════════════════════════ CTA BAND (full-width colored strip) ══════════════════════════════════════════════════════════════════════════ */ /* Nessuna aura decorativa: i cerchi luminosi venivano tagliati da `overflow:hidden` sul bordo inferiore e creavano uno stacco visibile contro il footer. La fascia usa il solo fondale condiviso, quindi prosegue nel footer senza soluzione di continuita'. */ .cta-band{ background:var(--bg-deep); padding:clamp(4rem,7vw,7rem) clamp(1.5rem,4vw,4rem); text-align:center;position:relative;overflow:hidden} .cta-band__inner{position:relative;z-index:1} .cta-band__title{font-family:var(--ff-sans);font-weight:800; font-size:clamp(1.8rem,3.5vw,3rem);color:#fff; letter-spacing:-.025em;margin-bottom:var(--s4)} .cta-band__sub{font-size:1.05rem;color:rgba(255,255,255,.82); margin-bottom:var(--s8);max-width:520px;margin-inline:auto} .cta-band__btns{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap} /* ══════════════════════════════════════════════════════════════════════════ NEWSLETTER ══════════════════════════════════════════════════════════════════════════ */ .nl-form{display:flex;gap:var(--s3);max-width:460px;margin-inline:auto} .nl-form input{flex:1;padding:.85em 1.4em;border:1.5px solid var(--border); border-radius:var(--r2);font-size:.95rem;outline:none; transition:border-color 160ms,box-shadow 160ms;background:var(--bg)} .nl-form input:focus{border-color:var(--wave);box-shadow:0 0 0 3px rgba(14,165,200,.12)} .nl-note{font-size:.75rem;color:var(--t3);text-align:center;margin-top:var(--s3)} /* ══════════════════════════════════════════════════════════════════════════ WAVE SECTION DIVIDERS (3D animated) ══════════════════════════════════════════════════════════════════════════ */ .wave-div{position:relative;overflow:hidden;line-height:0;z-index:1} .wave-div svg{display:block;width:112%;margin-left:-6%;overflow:visible} .wave-div--anim .wd-1{animation:wave-slide 10s cubic-bezier(.36,.45,.63,.53) infinite} .wave-div--anim .wd-2{animation:wave-slide 16s cubic-bezier(.36,.45,.63,.53) -5s infinite reverse} .wave-div--anim .wd-3{animation:wave-slide 22s cubic-bezier(.36,.45,.63,.53) -10s infinite} @keyframes wave-slide{ 0%,100%{transform:translateX(0) scaleY(1)} 50%{transform:translateX(-22px) scaleY(1.03)}} /* ── Section wave transitions ────────────────────────────────────────────── */ /* Note: contain:layout paint removed — caused black line artifact and broke SVG path animations in Safari (compositing layer with opaque black default). */ /* Ogni onda si sovrappone SEMPRE alla sezione che la precede: ha lo sfondo trasparente, quindi senza il margine negativo la sua zona libera in alto lascerebbe vedere il bianco del body come una banda chiara. */ .sec-wave{position:relative;overflow:hidden;line-height:0;z-index:2;margin:-7vw 0 -1.6vw;padding:0} .sec-wave svg{display:block;width:112%;margin-left:-6%;overflow:visible} .sec-wave--anim .wd-1{animation:wave-slide 10s cubic-bezier(.36,.45,.63,.53) infinite;will-change:transform} .sec-wave--anim .wd-2{animation:wave-slide 16s cubic-bezier(.36,.45,.63,.53) -5s infinite reverse;will-change:transform} .sec-wave--anim .wd-3{animation:wave-slide 22s cubic-bezier(.36,.45,.63,.53) -10s infinite;will-change:transform} /* Onda CAPOVOLTA: e' la sezione CHIARA che scende sopra quella seguente. Si usa quando sotto c'e' una foto: un fronte scuro lascerebbe una banda dritta sopra l'immagine (combacia col pannello scuro ma non con la foto). Qui la sovrapposizione e' verso il basso, non verso l'alto. */ .sec-wave--top svg{transform:scaleY(-1)} .sec-wave--top{margin:0 0 -7vw} /* Transparent backgrounds: the SVG's upper clear zone lets the adjacent section show through naturally instead of painting a flat coloured strip over photos. */ .sec-wave--from-white{background:transparent} .sec-wave--from-warm{background:transparent} .sec-wave--from-light{background:transparent} .sec-wave--from-dark{background:transparent} /* ── 7-bottle feature lineup ─────────────────────────────────────────────── */ /* Push bottles off the wave-overlap zone at the image bottom. padding-bottom in vw (not %) because on position:absolute elements % is relative to the containing block WIDTH, not height — so at 1440px a 20% equalled 144px (image half-width), far too much. 8vw = wave-height (7vw) + ~1vw buffer: precise at every breakpoint. */ .feature-split--dark .fs-lineup{padding-bottom:8vw} .fs-lineup--7 .fs-slot--1{transform:rotate(-26deg);z-index:1;margin-right:-35%} .fs-lineup--7 .fs-slot--2{transform:rotate(-15deg);z-index:3;margin-right:-27%} .fs-lineup--7 .fs-slot--3{transform:rotate(-6deg); z-index:5;margin-right:-20%} .fs-lineup--7 .fs-slot--4{z-index:7} .fs-lineup--7 .fs-slot--5{transform:rotate(6deg); z-index:5;margin-left:-20%} .fs-lineup--7 .fs-slot--6{transform:rotate(15deg); z-index:3;margin-left:-27%} .fs-lineup--7 .fs-slot--7{transform:rotate(26deg); z-index:1;margin-left:-35%} .fs-lineup--7 .fs-slot--6,.fs-lineup--7 .fs-slot--7{display:flex} .fs-lineup--7 .fs-slot--4 .fs-prod{height:clamp(250px,40vmin,465px);animation-delay:0s} .fs-lineup--7 .fs-slot--3 .fs-prod, .fs-lineup--7 .fs-slot--5 .fs-prod{height:clamp(208px,33vmin,385px);animation-delay:.45s} .fs-lineup--7 .fs-slot--2 .fs-prod, .fs-lineup--7 .fs-slot--6 .fs-prod{height:clamp(168px,27vmin,315px);animation-delay:.9s} .fs-lineup--7 .fs-slot--1 .fs-prod, .fs-lineup--7 .fs-slot--7 .fs-prod{height:clamp(130px,21vmin,245px);animation-delay:1.35s} /* ── Box card: falling products gravity animation ───────────────────────── */ @keyframes fall-down{ 0% {transform:translateY(-115%)} 100%{transform:translateY(210%)}} @keyframes fall-down-b{ 0% {transform:translateY(-115%) rotate(8deg)} 100%{transform:translateY(210%) rotate(-6deg)}} .fall-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; contain:layout paint} /* scope gravity animation repaints inside the card */ .fall-item{ position:absolute;top:0;height:52%;width:auto; will-change:transform; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); animation:fall-down 4.6s linear infinite; opacity:1} /* ── Category card infinite product scroll ──────────────────────────────── */ /* contain:layout+paint isolates the scrolling track from the rest of the card's paint surface — the infinite marquee animation never dirtifies its siblings. */ .cat-scroll{position:absolute;left:0;right:0;top:5%;bottom:5%;overflow:hidden;pointer-events:none; contain:layout paint} .cat-scroll__track{ width:max-content;display:flex;align-items:flex-end;height:100%; /* 10.8s × 1.15 = 12.42 → 12.4s | will-change promotes to GPU layer */ animation:cat-scroll-belt 12.4s linear infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden} .cat-scroll--tutti .cat-scroll__track{animation-name:cat-scroll-belt-rtl;animation-duration:17.0s} /* 14.8s × 1.15 = 17.02 → 17.0s — direction reversed (L→R) */ .cat-scroll__img{ height:78%;width:auto;object-fit:contain;flex-shrink:0; filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)); margin-right:-30px} @keyframes cat-scroll-belt{ 0% {transform:translateX(0)} 100%{transform:translateX(-50%)}} @keyframes cat-scroll-belt-rtl{ 0% {transform:translateX(-50%)} 100%{transform:translateX(0)}} /* ══════════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════════ */ .footer{background:var(--bg-deep);color:rgba(255,255,255,.65);padding-top:var(--s16); position:relative;z-index:1} .footer__logo-img{height:38px;width:auto;filter:brightness(0) invert(1); opacity:.85;margin-bottom:var(--s5);display:block} .footer__logo-img:hover{opacity:1} .footer__desc{font-size:.85rem;line-height:1.8;max-width:280px;margin-bottom:var(--s6)} .footer__socials{display:flex;gap:var(--s3)} .footer__soc{ width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:transform var(--spring) 200ms,box-shadow 200ms; text-decoration:none;flex-shrink:0} .footer__soc svg{pointer-events:none} .footer__soc:hover{transform:scale(1.13) translateY(-2px)} /* Brand colours — stesso stile del tasto WhatsApp */ .footer__soc--ig{ background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); box-shadow:0 3px 14px rgba(188,24,136,.40)} .footer__soc--ig:hover{box-shadow:0 5px 22px rgba(188,24,136,.62)} .footer__soc--fb{ background:#1877F2; box-shadow:0 3px 14px rgba(24,119,242,.42)} .footer__soc--fb:hover{box-shadow:0 5px 22px rgba(24,119,242,.62)} .footer__soc--tt{ background:linear-gradient(135deg,#69C9D0 0%,#EE1D52 100%); box-shadow:0 3px 14px rgba(238,29,82,.36)} .footer__soc--tt:hover{box-shadow:0 5px 22px rgba(238,29,82,.55)} .footer__soc--yt{ background:#FF0000; box-shadow:0 3px 14px rgba(255,0,0,.36)} .footer__soc--yt:hover{box-shadow:0 5px 22px rgba(255,0,0,.55)} .footer__grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr); gap:clamp(2rem,4vw,4rem);padding-bottom:var(--s12); border-bottom:1px solid rgba(255,255,255,.07)} .footer__col-title{font-family:var(--ff-sans);font-size:.72rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:var(--s5)} .footer__links{display:flex;flex-direction:column;gap:var(--s3)} .footer__links a{font-size:.85rem;color:rgba(255,255,255,.55);transition:color 160ms} .footer__links a:hover{color:rgba(255,255,255,.9)} .footer__contact-item{display:flex;gap:var(--s3);font-size:.85rem;margin-bottom:var(--s4); align-items:flex-start;color:rgba(255,255,255,.55)} .footer__contact-icon{font-size:.95rem;margin-top:2px;flex-shrink:0} .footer__bottom{padding-block:var(--s6);display:flex; align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)} .footer__copy{font-size:.78rem;color:rgba(255,255,255,.3)} .footer__policies{display:flex;gap:var(--s5)} .footer__policies a{font-size:.78rem;color:rgba(255,255,255,.3);transition:color 160ms} .footer__policies a:hover{color:rgba(255,255,255,.7)} /* Payment icons */ .footer__payments{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s5)} .footer__pay-icon{display:flex;align-items:center;line-height:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.42)); transition:filter 160ms,transform var(--spring) 200ms} .footer__pay-icon:hover{filter:drop-shadow(0 3px 10px rgba(0,0,0,.58));transform:translateY(-1px)} /* ══════════════════════════════════════════════════════════════════════════ SHOP PAGE ══════════════════════════════════════════════════════════════════════════ */ .shop-header{ background:linear-gradient(150deg,var(--navy) 0%,#0d2a4f 100%); padding-top:calc(var(--nav-h) + clamp(3rem,6vw,6rem)); padding-bottom:clamp(8rem,13vw,12rem); position:relative;overflow:hidden;isolation:isolate} .shop-header__inner{text-align:center;position:relative;z-index:1} /* Shop filters */ /* La bottega non ha piu' un header: questa barra e' la prima cosa che si vede ed e' l'unico strumento di navigazione del catalogo. Quindi respiro sopra, bersagli da 44px e un bordo che la stacca quando resta appiccicata in alto. */ .shop-filters{ position:sticky;top:var(--nav-h);z-index:50; background:rgba(244,247,249,.99); /* --bg-warm aggiornato */ scroll-margin-top:var(--nav-h); /* arrivando da #prodotti resta sotto la nav */ padding-block:var(--s5)} /* Lo stacco dalla nav fissa NON puo' stare sulla barra: essendo sticky se lo porterebbe dietro, diventando altissima una volta agganciata in alto. */ .shop-top-space{height:var(--nav-h)} /* ESATTAMENTE la nav fissa: la barra parte subito sotto, senza striscia chiara, e restando gia' alla quota di `top` non ha nessuno scatto quando diventa appiccicata. */ /* La griglia prodotti attacca sotto ai filtri: col padding di sezione pieno restavano ~135px di vuoto fra la barra e la prima riga di schede. */ .shop-filters + .sec{padding-top:clamp(1.4rem,2.4vw,2.2rem)} .shop-filters__inner{display:flex;align-items:center; justify-content:space-between;gap:var(--s5);flex-wrap:wrap} .filter-tabs{display:flex;gap:var(--s3);flex-wrap:wrap} .filter-tab{display:inline-flex;align-items:center;gap:.5em; font-family:var(--ff-sans);font-size:.88rem;font-weight:700; min-height:44px;padding:.6em 1.35em;border-radius:var(--r2); border:1.5px solid var(--border);color:var(--t1);background:var(--bg); cursor:pointer;box-shadow:var(--sh1); transition:background 180ms var(--ease),border-color 180ms var(--ease), color 180ms var(--ease),transform 180ms var(--ease),box-shadow 180ms var(--ease)} .filter-tab .site-icon{width:17px;height:17px;flex-shrink:0} .filter-tab:hover{border-color:var(--wave);color:var(--ocean);transform:translateY(-2px); background:color-mix(in srgb, var(--wave) 9%, #fff); box-shadow:0 6px 16px -8px color-mix(in srgb, var(--wave) 60%, transparent)} .filter-tab:focus-visible{outline:3px solid color-mix(in srgb, var(--wave) 45%, transparent); outline-offset:2px} /* Niente bordo trasparente qui: sugli angoli arrotondati l'antialiasing lo rende un filo nero. Si toglie del tutto e i 1.5px si recuperano nel padding, cosi' la pillola resta grande esattamente come le altre. */ .filter-tab.active{color:#fff;border:0; padding:calc(.6em + 1.5px) calc(1.35em + 1.5px);border-radius:calc(var(--r2) + 1.5px); background:var(--ocean); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--wave) 75%, transparent)} .filter-tab.active:hover{color:#fff;transform:translateY(-2px)} /* quanti prodotti ci sono dietro ogni filtro: si sceglie sapendo cosa si trova */ .filter-tab__n{font-size:.72rem;font-weight:800;line-height:1; padding:.3em .52em;border-radius:6px; background:var(--bg-light);color:var(--t2)} .filter-tab.active .filter-tab__n{background:rgba(255,255,255,.24);color:#fff} .shop-search-wrap{position:relative} .shop-search-wrap input{ padding:.7em 1em .7em 2.5em;border:1.5px solid var(--border); border-radius:var(--r2);font-size:.88rem;outline:none;width:240px;min-height:44px; background:var(--bg);color:var(--t1);box-shadow:var(--sh1); transition:border-color 160ms,box-shadow 160ms} .shop-search-wrap input:focus{border-color:var(--wave);box-shadow:0 0 0 3px rgba(14,165,200,.14)} .shop-search-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%); color:var(--t3);pointer-events:none;font-size:.9rem} .shop-count{font-size:.85rem;color:var(--t2);font-family:var(--ff-sans);font-weight:700} /* ══════════════════════════════════════════════════════════════════════════ CART PAGE ══════════════════════════════════════════════════════════════════════════ */ .cart-page-header{ background:linear-gradient(150deg,var(--navy) 0%,#0d2a4f 100%); padding-top:calc(var(--nav-h) + var(--s12));padding-bottom:var(--s12)} .cart-layout{display:grid;grid-template-columns:1fr 360px; gap:var(--s8);align-items:start} .cart-box{background:var(--bg);border:1px solid var(--border); border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1)} .cart-box__head{padding:var(--s6);border-bottom:1px solid var(--border)} .cart-box__head h3{font-family:var(--ff-sans);font-weight:700;font-size:1.05rem;color:var(--t1)} .cart-item{display:grid;grid-template-columns:80px 1fr auto auto auto; gap:var(--s4);align-items:center;padding:var(--s5) var(--s6); border-bottom:1px solid var(--border);transition:background 160ms} .cart-item:hover{background:var(--bg-warm)} .cart-item:last-child{border-bottom:none} .cart-item__img{width:72px;height:72px;border-radius:var(--r2); display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0} .cart-item__img--png{border:1px solid var(--border)} .cart-item__prod-img{width:100%;height:100%;object-fit:contain;padding:6px} .cart-item__name{font-family:var(--ff-sans);font-weight:700;font-size:.92rem;color:var(--t1)} .cart-item__subprice{font-size:.8rem;color:var(--t3);margin-top:2px} .cart-item__qty{display:flex;align-items:center;gap:var(--s3); background:var(--bg-warm);border:1px solid var(--border);border-radius:var(--rF); padding:var(--s1) var(--s2)} .cart-item__qty span{font-family:var(--ff-sans);font-weight:700;min-width:22px;text-align:center} .qty-btn{width:26px;height:26px;border-radius:50%;background:var(--bg); border:1px solid var(--border);display:flex;align-items:center;justify-content:center; font-size:.9rem;color:var(--t1);transition:background 140ms,color 140ms,border-color 140ms} .qty-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .cart-item__line{font-family:var(--ff-sans);font-weight:800;font-size:.95rem; color:var(--t1);min-width:55px;text-align:right} .cart-item__del{color:var(--t3);padding:var(--s2);border-radius:var(--r1); font-size:.85rem;transition:color 140ms,background 140ms;flex-shrink:0} .cart-item__del:hover{color:#E53935;background:#FEF2F2} /* Touch: bersagli quantità/cestino a misura di dito (linee guida ≥40px). Solo puntatori "coarse": col mouse restano le misure compatte. */ @media (pointer:coarse){ .qty-btn{width:38px;height:38px;font-size:1.05rem} .cart-item__del{padding:var(--s3);font-size:1rem} } /* Schermi stretti: il padding 2.8em dei bottoni grandi faceva sbordare di 2px il contenuto di "Scopri i prodotti" (hero Bottega) oltre la colonna. */ @media (max-width:480px){ .btn--lg{padding-inline:2em} } .cart-empty{text-align:center;padding:clamp(4rem,8vw,8rem) 2rem} .cart-empty__icon{font-size:4rem;margin-bottom:var(--s4)} .cart-empty h2{font-family:var(--ff-sans);font-size:1.6rem;margin-bottom:var(--s3)} .cart-empty p{color:var(--t3);margin-bottom:var(--s8)} .summary-box{background:var(--bg);border:1px solid var(--border); border-radius:var(--r3);padding:var(--s6);box-shadow:var(--sh1)} .summary-box h3{font-family:var(--ff-sans);font-weight:700;font-size:1rem; color:var(--t1);margin-bottom:var(--s5)} .summary-row{display:flex;justify-content:space-between;align-items:center; padding-block:var(--s3);border-bottom:1px solid var(--bg-warm); font-size:.88rem;color:var(--t2)} .summary-row--total{border-bottom:none;border-top:2px solid var(--border); padding-top:var(--s4);font-family:var(--ff-sans);font-weight:800; font-size:1.1rem;color:var(--t1)} .shipping-bar{background:var(--gold-lt);border-radius:var(--r2); padding:var(--s4);margin-bottom:var(--s4)} .shipping-bar__text{font-size:.82rem;font-family:var(--ff-sans);font-weight:600; color:var(--t1);margin-bottom:var(--s2)} .shipping-bar__track{height:5px;background:rgba(201,147,58,.2); border-radius:var(--rF);overflow:hidden} .shipping-bar__fill{height:100%;background:linear-gradient(90deg,var(--gold),#e8a820); border-radius:var(--rF);transition:width .5s var(--ease)} .shipping-ok{background:#D1FAE5;border-radius:var(--r2);padding:var(--s4); font-family:var(--ff-sans);font-weight:700;color:#065F46;font-size:.85rem; text-align:center;margin-bottom:var(--s4)} .payment-icons{display:flex;gap:var(--s2);justify-content:center; margin-top:var(--s5);font-size:1.3rem;opacity:.45} /* ══════════════════════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════════════════════ */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:start} .contact-form-box{background:var(--bg);border:1px solid var(--border); border-radius:var(--r3);padding:clamp(2rem,4vw,4rem);box-shadow:var(--sh1)} .form-group{margin-bottom:var(--s5)} .form-label{display:block;font-family:var(--ff-sans);font-size:.78rem;font-weight:700; letter-spacing:.05em;color:var(--t1);margin-bottom:var(--s2);text-transform:uppercase} .form-input{width:100%;padding:.8em 1.1em;border:1.5px solid var(--border); border-radius:var(--r1);font-size:.92rem;color:var(--t1);outline:none; background:var(--bg-warm);transition:border-color 160ms,box-shadow 160ms,background 160ms} .form-input:focus{border-color:var(--wave);background:var(--bg); box-shadow:0 0 0 3px rgba(14,165,200,.1)} textarea.form-input{resize:vertical;min-height:130px} /* G-10: validation error state */ .form-input--error{border-color:#e53935!important;box-shadow:0 0 0 3px rgba(229,57,53,.12)!important} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)} .contact-info-box{background:var(--bg-deep);border-radius:var(--r3); padding:clamp(2rem,4vw,4rem);color:#fff;position:relative;overflow:hidden} .contact-info-box::before{content:'';position:absolute;width:300px;height:300px; border-radius:50%;background:var(--wave);opacity:.08;top:-80px;right:-80px} .ci-item{display:flex;gap:var(--s4);margin-bottom:var(--s6);align-items:flex-start} .ci-item__icon{width:46px;height:46px;background:rgba(14,165,200,.2); border-radius:var(--r2);display:flex;align-items:center;justify-content:center; font-size:1.2rem;flex-shrink:0} .ci-item__label{font-family:var(--ff-sans);font-size:.72rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--wave-light);margin-bottom:4px} .ci-item__value{font-size:.9rem;color:rgba(255,255,255,.8);line-height:1.5} .ci-faq{margin-top:var(--s8)} .ci-faq summary{font-family:var(--ff-sans);font-size:.88rem;font-weight:700; color:rgba(255,255,255,.8);cursor:pointer;list-style:none; padding-block:var(--s4);border-bottom:1px solid rgba(255,255,255,.08)} .ci-faq details p{font-size:.82rem;color:rgba(255,255,255,.6); line-height:1.65;padding:var(--s3) 0} /* ══════════════════════════════════════════════════════════════════════════ CONTACT PAGE — v2 (modern redesign 2026) ══════════════════════════════════════════════════════════════════════════ */ /* ── Channel cards (3-up quick-access row) ──────────────────────────────── */ /* ── Apertura pagina Contatti (senza header) ────────────────────────────── Pannello scuro come la scheda della pagina recensioni: titolo e biglietto di Debora nello STESSO blocco. Prima stavano ai due lati con del vuoto in mezzo e non si parlavano. */ .cch-open{margin-top:var(--nav-h);padding-top:var(--page-open-top)} .cch-hero{position:relative;overflow:hidden;border-radius:var(--r4);color:#fff; box-shadow:var(--sh4); background:linear-gradient(135deg,var(--navy) 0%,var(--ocean) 58%,#0B5C90 100%); padding:clamp(1.8rem,3.4vw,3rem) clamp(1.5rem,3.5vw,3.2rem); display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,25rem); gap:clamp(1.4rem,3vw,3rem);align-items:center; margin-bottom:clamp(2rem,4vw,3.4rem)} .cch-hero__glow{position:absolute;inset:0;pointer-events:none; background: radial-gradient(60% 90% at 88% 0%,rgba(14,165,200,.5),transparent 60%), radial-gradient(45% 70% at 6% 100%,rgba(179,229,240,.22),transparent 60%)} /* il bagliore resta fuori flusso: non deve occupare una cella della griglia */ .cch-hero>*:not(.cch-hero__glow){position:relative;z-index:1} .cch-hero__eyebrow{display:block;font-family:var(--ff-sans);font-size:.7rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--wave-light)} .cch-hero__title{font-family:var(--ff-sans);font-weight:900;letter-spacing:-.035em; line-height:1.02;color:#fff;font-size:clamp(2.1rem,5vw,3.1rem);margin:.35rem 0 0} .cch-hero__title em{font-style:normal; background:linear-gradient(100deg,#7EEEFF 0%,#0EA5C8 55%,#0B5C90 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .cch-hero__lead{max-width:58ch;margin:.85rem 0 0; font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.62;font-weight:500; color:rgba(255,255,255,.82);text-wrap:balance} /* una frase per riga, con lo stesso respiro dell'header in home */ .cch-hero__lead br{content:'';display:block;height:.15em} /* parole in evidenza come nel sottotitolo dell'header in home */ .cch-hero__lead b{color:#7EEEFF;font-weight:800;white-space:nowrap} /* Biglietto di Debora: fumetto chiaro dentro al pannello scuro */ .cch-bolla{position:relative;display:flex;gap:clamp(.8rem,1.5vw,1.1rem);align-items:flex-start; margin:0;background:#fff;border-radius:18px; padding:clamp(1rem,1.8vw,1.3rem) clamp(1.1rem,2vw,1.4rem); box-shadow:0 18px 40px -18px rgba(0,0,0,.55)} /* codina rivolta verso il titolo */ .cch-bolla::before{content:'';position:absolute;left:-9px;top:34px;width:18px;height:18px; background:#fff;transform:rotate(45deg);border-radius:3px} .cch-bolla__avatar{position:relative;z-index:1; width:clamp(54px,5vw,62px);height:clamp(54px,5vw,62px);flex-shrink:0; border-radius:50%;object-fit:cover; background:color-mix(in srgb, var(--wave) 14%, #fff); border:1px solid color-mix(in srgb, var(--wave) 32%, #fff)} .cch-bolla__body{position:relative;z-index:1;margin:0;min-width:0} .cch-bolla__msg{margin:0;font-size:.92rem;line-height:1.6;color:var(--t2)} .cch-bolla__msg b{color:var(--ocean);font-weight:800} .cch-bolla__firma{display:block;margin-top:.5rem; font-family:Georgia,serif;font-style:italic;font-size:1.02rem;color:var(--ocean)} @media (max-width:900px){ .cch-hero{grid-template-columns:1fr;gap:1.6rem} .cch-hero__lead{max-width:none} /* impilato la codina punta in alto, verso il titolo */ .cch-bolla::before{left:36px;top:-8px} } @media (max-width:900px){ .cch-open__head{grid-template-columns:1fr;align-items:start;gap:var(--s5)} } .cch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} /* Schede canale: stesso linguaggio delle card prodotto/recensione — ogni canale ha il suo colore (--cc), sfumatura diagonale, barra d'accento in alto che si accende all'hover e icona con gradiente. */ .cch-card{ --cc:var(--wave); --ccg:linear-gradient(135deg,var(--wave) 0%,var(--ocean) 100%); position:relative;overflow:hidden; display:flex;flex-direction:column;gap:var(--s2); padding:clamp(1.5rem,3vw,2.5rem); border:1.5px solid var(--border);border-radius:16px; background:linear-gradient(150deg, color-mix(in srgb, var(--cc) 14%, #fff) 0%, color-mix(in srgb, var(--cc) 5%, #fff) 46%, #fff 100%); transition:border-color 220ms,box-shadow 260ms,transform 260ms var(--ease)} /* Al posto della riga colorata che si allungava: bolle leggere che salgono dal basso, del colore della scheda. Stesso linguaggio delle bolle gia' usate nell'hero, e coerente col tema del pulito. Due pseudo-elementi, ognuno con tre bolle di misura diversa, sfasati fra loro: nessun markup in piu'. */ .cch-card::before, .cch-card::after{content:"";position:absolute;inset:0;pointer-events:none; opacity:0;transition:opacity 260ms var(--ease)} .cch-card::before{ background: radial-gradient(circle at 17% 106%, color-mix(in srgb, var(--cc) 30%, transparent) 0 7px, transparent 8px), radial-gradient(circle at 61% 112%, color-mix(in srgb, var(--cc) 22%, transparent) 0 4px, transparent 5px), radial-gradient(circle at 88% 104%, color-mix(in srgb, var(--cc) 26%, transparent) 0 9px, transparent 10px)} .cch-card::after{ background: radial-gradient(circle at 34% 108%, color-mix(in srgb, var(--cc) 24%, transparent) 0 5px, transparent 6px), radial-gradient(circle at 74% 104%, color-mix(in srgb, var(--cc) 28%, transparent) 0 7px, transparent 8px), radial-gradient(circle at 7% 110%, color-mix(in srgb, var(--cc) 20%, transparent) 0 3px, transparent 4px)} @keyframes cch-bolle{ 0% {transform:translateY(8%);opacity:0} 16% {opacity:1} 82% {opacity:1} 100% {transform:translateY(-118%);opacity:0} } .cch-card:hover::before{animation:cch-bolle 3.4s linear infinite} .cch-card:hover::after {animation:cch-bolle 4.3s linear .8s infinite} @media (prefers-reduced-motion:reduce){ .cch-card:hover::before, .cch-card:hover::after{animation:none;opacity:1;transform:translateY(-40%)} } .cch-card:hover{border-color:color-mix(in srgb, var(--cc) 55%, transparent); transform:translateY(-6px); box-shadow:0 18px 38px -14px color-mix(in srgb, var(--cc) 40%, transparent),var(--sh3)} .cch-card__icon{ width:52px;height:52px;border-radius:14px;color:#fff;background:var(--ccg); display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--s3); box-shadow:0 8px 18px -6px color-mix(in srgb, var(--cc) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.3); transition:transform 320ms var(--spring)} .cch-card:hover .cch-card__icon{transform:translateY(-2px) rotate(-6deg) scale(1.06)} /* colore proprio di ogni canale */ .cch-card--wa{--cc:#20B558;--ccg:linear-gradient(135deg,#2BD46B 0%,#128C42 100%)} .cch-card--social{--cc:#C13584;--ccg:linear-gradient(135deg,#F09433 0%,#C13584 55%,#833AB4 100%)} .cch-card__title{font-family:var(--ff-sans);font-size:1.05rem;font-weight:800;color:var(--t1)} .cch-card__desc{font-size:.87rem;color:var(--t2);line-height:1.65;flex:1} .cch-card__cta{ display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4); font-family:var(--ff-sans);font-size:.74rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--cc); transition:gap 160ms} .cch-card:hover .cch-card__cta{gap:10px} /* ── Topic chips (visual subject selector above form) ───────────────────── */ .topic-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)} .topic-chip{ display:inline-flex;align-items:center;gap:.45em; font-family:var(--ff-sans);font-size:.78rem;font-weight:700;letter-spacing:.03em; padding:.5em 1.15em;border-radius:var(--rF); border:1.5px solid var(--border);background:var(--bg);color:var(--t2); cursor:pointer; transition:border-color 150ms,background 150ms,color 150ms, transform var(--spring) 160ms,box-shadow 150ms} .topic-chip:hover{border-color:var(--wave);color:var(--wave);box-shadow:var(--sh1)} .topic-chip.active{ border-color:var(--wave);background:var(--wave);color:#fff; box-shadow:0 4px 14px rgba(14,165,200,.35);transform:scale(1.05)} /* ── Debora personal card ───────────────────────────────────────────────── */ /* Stesso pannello scuro degli altri del sito (scheda recensioni, apertura contatti): il gradiente diagonale --tide invece di --bg-deep, che dentro a un riquadro stretto si comprime e sembra sbilanciato. Niente cerchio decorativo in alto a destra. */ .debora-card{ background:linear-gradient(135deg,var(--navy) 0%,var(--ocean) 58%,#0B5C90 100%); color:#fff;border-radius:var(--r4);box-shadow:var(--sh4); padding:clamp(2rem,3.5vw,3.5rem);position:relative;overflow:hidden;height:100%} .debora-card__avatar{ width:64px;height:64px;border-radius:50%; background:rgba(14,165,200,.22);border:2px solid rgba(14,165,200,.42); overflow:hidden;flex-shrink:0;margin-bottom:var(--s5)} .debora-card__avatar img{ width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .debora-card__quote{ font-size:.97rem;line-height:1.82;color:rgba(255,255,255,.88); font-style:italic; border-left:3px solid var(--wave);padding-left:var(--s5);margin-bottom:var(--s3)} .debora-card__sig{ font-family:var(--ff-sans);font-size:.75rem;font-weight:700; color:var(--wave-light);letter-spacing:.06em;margin-bottom:var(--s8)} .debora-card__items{ display:flex;flex-direction:column;gap:var(--s4); padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.1)} .debora-card__item{display:flex;align-items:flex-start;gap:var(--s3)} .debora-card__item-icon{ width:36px;height:36px;border-radius:var(--r1);flex-shrink:0; background:rgba(14,165,200,.18); display:flex;align-items:center;justify-content:center;margin-top:1px} .debora-card__item-label{ font-family:var(--ff-sans);font-size:.67rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--wave-light);margin-bottom:3px} .debora-card__item-value{font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.55} /* ── Contact grid v2 — slightly wider form column ───────────────────────── */ .contact-grid--v2{grid-template-columns:1.12fr 1fr} /* ── FAQ — full-width light accordion ───────────────────────────────────── */ .faq-list{max-width:760px;margin-inline:auto;margin-top:clamp(2rem,4vw,3.5rem)} .faq-item{border-bottom:1px solid var(--border)} .faq-item:first-child{border-top:1px solid var(--border)} .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:var(--s6); font-family:var(--ff-sans);font-size:.95rem;font-weight:700;color:var(--t1); padding-block:var(--s5);cursor:pointer;list-style:none;transition:color 160ms} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--wave)} .faq-item__chevron{ width:28px;height:28px;border-radius:50%;flex-shrink:0; background:var(--bg-light);display:flex;align-items:center;justify-content:center; transition:background 200ms,transform 240ms var(--ease)} .faq-item[open] .faq-item__chevron{background:var(--wave);transform:rotate(180deg)} .faq-item[open] .faq-item__chevron svg{stroke:#fff} .faq-item p{ font-size:.9rem;color:var(--t2);line-height:1.8; padding-bottom:var(--s6);padding-right:clamp(0px,5vw,3rem);max-width:640px} /* ── Responsive overrides for contact v2 ───────────────────────────────── */ @media(max-width:900px){ .cch-grid{grid-template-columns:1fr 1fr} .contact-grid--v2{grid-template-columns:1fr} } @media(max-width:540px){ .cch-grid{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════════════════ PAGE HERO (inner pages) ══════════════════════════════════════════════════════════════════════════ */ .page-hero{ background:linear-gradient(150deg,var(--navy) 0%,#0d2a4f 100%); padding-top:calc(var(--nav-h) + clamp(3.5rem,7vw,7rem)); padding-bottom:clamp(5rem,16vw,18rem); position:relative;overflow:hidden;isolation:isolate} .page-hero__orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none} .page-hero__orb--1{width:400px;height:400px;background:var(--wave);opacity:.15;top:-100px;right:-80px} .page-hero__orb--2{width:280px;height:280px;background:var(--gold);opacity:.08;bottom:-50px;left:15%} /* ── Fondale animato pagine utente ───────────────────────────────────────── Stessa scena della pagina Consigli (navy + bolle di hero-bg-bubbles + orb) ma come SFONDO FISSO dell'intera pagina: le card dei contenuti galleggiano sopra (z-index:1). Il motore hero-bg-bubbles.js aggancia il canvas al selettore .user-bg. Gli orb restano fissi nel viewport (parent fixed). */ .user-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; isolation:isolate; background:linear-gradient(150deg,var(--navy) 0%,#0d2a4f 100%)} .user-bg .page-hero__orb--1{top:-120px;right:-60px;opacity:.18} .user-bg .page-hero__orb--2{bottom:8%;left:10%;opacity:.10} /* onda morbida in fondo al viewport, come chiusura della scena Consigli */ .user-bg__wave{position:fixed;left:-6%;right:-6%;bottom:-2px;width:112%; z-index:0;pointer-events:none;opacity:.5} .user-bg__wave svg{display:block;width:100%;height:auto} /* Il contenuto della pagina utente sale sopra il fondale */ .user-onbg{position:relative;z-index:1;background:transparent} /* Animazione entrata titoli pagine */ @keyframes title-rise{ from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)}} .page-hero__inner{position:relative;z-index:1} .page-hero__inner .eyebrow{animation:title-rise .6s var(--out) .05s both} .page-hero__inner h1{animation:title-rise .7s var(--out) .15s both} .page-hero__inner p{animation:title-rise .7s var(--out) .25s both} .shop-header__inner .eyebrow{animation:title-rise .6s var(--out) .05s both} .shop-header__inner h1,.shop-header__inner h2{animation:title-rise .7s var(--out) .15s both} .shop-header__inner p{animation:title-rise .7s var(--out) .25s both} /* ══════════════════════════════════════════════════════════════════════════ SOAP BUBBLE PARTICLES (hover on product cards) ══════════════════════════════════════════════════════════════════════════ */ .soap-bubble{ position:absolute;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7),rgba(14,165,200,.15)); border:1px solid rgba(14,165,200,.4); animation:soap-rise linear forwards;will-change:transform,opacity; bottom:8%;z-index:10} @keyframes soap-rise{ 0% {transform:translate(0,0) scale(1);opacity:.75} 30% {transform:translate(6px,-28px) scale(.88);opacity:.6} 65% {transform:translate(-5px,-56px) scale(.65);opacity:.35} 100%{transform:translate(9px,-85px) scale(.3);opacity:0}} .prod-card{position:relative;overflow:visible} /* Fly-to-cart: product PNG image (Web Animations API) */ .cart-fly-img{ position:fixed;z-index:9999;pointer-events:none; object-fit:contain;border-radius:8px; filter:drop-shadow(0 4px 16px rgba(0,0,0,.22)); will-change:transform,opacity; user-select:none;-webkit-user-select:none} /* Fly-to-cart: coloured dot fallback (CSS transition) */ .cart-fly{ position:fixed;border-radius:50%;z-index:9999;pointer-events:none; background:var(--fly-color, var(--wave)); display:flex;align-items:center;justify-content:center; transition:all .7s cubic-bezier(.25,.46,.45,.94)} /* Water trail droplets spawned along the flight path */ .cart-trail-drop{ position:fixed;border-radius:50%;z-index:9998;pointer-events:none; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.82) 0%,var(--drop-color,rgba(14,165,200,.6)) 100%); transform:translate(-50%,-50%); animation:trail-drop-fade .48s ease-out forwards} @keyframes trail-drop-fade{ 0% {opacity:.85;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) scale(.2)}} /* Cart arrival water-splash droplets */ .cart-splash-drop{ position:fixed;border-radius:50%;z-index:9999;pointer-events:none; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.88) 0%,var(--splash-color,rgba(14,165,200,.7)) 100%); transform:translate(-50%,-50%); animation:splash-fly .42s ease-out forwards} @keyframes splash-fly{ 0% {opacity:.9;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(calc(-50% + var(--sx,0px)),calc(-50% + var(--sy,0px))) scale(.25)}} /* Cursor soap bubble trail */ .cursor-bubble{ position:fixed;border-radius:50%;pointer-events:none;z-index:9998; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.8) 0%,rgba(178,229,240,.35) 40%,rgba(14,165,200,.08) 100%); border:1px solid rgba(14,165,200,.45); animation:cursor-bubble-rise linear forwards;will-change:transform,opacity} @keyframes cursor-bubble-rise{ 0% {transform:translate(0,0) scale(1);opacity:.7} 40% {transform:translate(var(--dx),calc(var(--dy) - 22px)) scale(.82);opacity:.5} 75% {transform:translate(calc(var(--dx)*1.4),calc(var(--dy) - 42px)) scale(.55);opacity:.25} 100%{transform:translate(calc(var(--dx)*1.7),calc(var(--dy) - 60px)) scale(.2);opacity:0}} /* ══════════════════════════════════════════════════════════════════════════ TOAST NOTIFICATION ══════════════════════════════════════════════════════════════════════════ */ .toast{position:fixed;bottom:var(--s6);right:var(--s6); background:var(--t1);color:#fff;padding:var(--s4) var(--s6); border-radius:var(--r2);box-shadow:var(--sh4); display:flex;align-items:center;gap:var(--s3); font-family:var(--ff-sans);font-size:.85rem;font-weight:600; z-index:9000;max-width:320px; transform:translateY(80px);opacity:0; transition:transform var(--spring) 300ms,opacity 280ms var(--ease)} .toast.show{transform:translateY(0);opacity:1} .toast__check{width:32px;height:32px;border-radius:50%; overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:transparent} .toast__check img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:50%} /* ══════════════════════════════════════════════════════════════════════════ SCROLL REVEAL ══════════════════════════════════════════════════════════════════════════ */ .reveal{opacity:0;transform:translateY(36px); transition:opacity .65s var(--ease),transform .65s var(--ease)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal--left{transform:translateX(-36px)} .reveal--right{transform:translateX(36px)} .reveal--left.visible,.reveal--right.visible{transform:translateX(0)} .reveal--scale{transform:scale(.94)} .reveal--scale.visible{transform:scale(1)} .rd1{transition-delay:.1s}.rd2{transition-delay:.2s} .rd3{transition-delay:.3s}.rd4{transition-delay:.4s}.rd5{transition-delay:.5s} /* ══════════════════════════════════════════════════════════════════════════ SCROLL TO TOP ══════════════════════════════════════════════════════════════════════════ */ .scroll-top{position:fixed;bottom:var(--s6);left:var(--s6); width:42px;height:42px;border-radius:var(--rF); background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center; font-size:1.1rem;box-shadow:var(--sh3);z-index:80; opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity 280ms,transform var(--spring) 300ms,background 160ms; border:2px solid rgba(255,255,255,.1)} .scroll-top.show{opacity:1;transform:translateY(0);pointer-events:all} .scroll-top:hover{background:var(--wave);transform:translateY(-3px)} /* ══════════════════════════════════════════════════════════════════════════ CART DRAWER (slide-in panel) ══════════════════════════════════════════════════════════════════════════ */ .cart-drawer{ position:fixed;inset:0;z-index:8500; pointer-events:none;visibility:hidden; transition:visibility 0s 360ms} .cart-drawer.is-open{pointer-events:all;visibility:visible;transition:visibility 0s} .cart-drawer__backdrop{ position:absolute;inset:0; background:rgba(8,22,34,.58); opacity:0;transition:opacity 330ms var(--ease)} .cart-drawer.is-open .cart-drawer__backdrop{opacity:1} .cart-drawer__panel{ position:absolute;right:0;top:0;bottom:0; width:min(460px,100vw);background:#fff; transform:translateX(102%); transition:transform 360ms var(--ease); display:flex;flex-direction:column; box-shadow:-10px 0 50px rgba(8,22,34,.2)} .cart-drawer.is-open .cart-drawer__panel{transform:translateX(0)} /* First-paint guard: never let the drawer animate (slide/close) on initial page load. The class is added at injection and removed after the first frame. */ .cart-drawer.is-preload, .cart-drawer.is-preload .cart-drawer__panel, .cart-drawer.is-preload .cart-drawer__backdrop{transition:none!important} /* Header */ .cart-drawer__hd{ display:flex;align-items:center;justify-content:space-between; padding:var(--s5) var(--s6);border-bottom:2px solid var(--border); flex-shrink:0;background:var(--bg-deep)} .cart-drawer__hd-left{display:flex;align-items:center;gap:var(--s3)} .cart-drawer__icon{font-size:1.25rem} .cart-drawer__title{ font-family:var(--ff-sans);font-size:1.05rem;font-weight:800;color:#fff} .cart-drawer__badge{ background:var(--gold);color:#fff; font-family:var(--ff-sans);font-size:.65rem;font-weight:800; min-width:20px;height:20px;border-radius:var(--rF);padding:0 5px; display:flex;align-items:center;justify-content:center} .cart-drawer__close{ width:40px;height:40px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; cursor:pointer;background:none;border:none;outline:none; color:rgba(255,255,255,.6); transition:color 150ms,transform 150ms} .cart-drawer__close:hover{color:#fff;transform:scale(1.15)} .cart-drawer__close svg{display:block;pointer-events:none} /* Body scroll area */ .cart-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain} /* Cart items inside drawer */ .cd-item{ display:grid;grid-template-columns:64px 1fr auto; gap:var(--s4);align-items:center; padding:var(--s4) var(--s6); border-bottom:1px solid var(--border); transition:background 140ms} .cd-item:last-child{border-bottom:none} .cd-item:hover{background:var(--bg-warm)} .cd-item__img{ width:64px;height:64px;border-radius:var(--r2); display:flex;align-items:center;justify-content:center; font-size:1.7rem;flex-shrink:0} .cd-item__img--png{border:1px solid var(--border)} .cd-item__prod-img{width:100%;height:100%;object-fit:contain;padding:5px} .cd-item__name{ font-family:var(--ff-sans);font-size:.85rem;font-weight:700; color:var(--t1);line-height:1.3;margin-bottom:3px} .cd-item__price{font-size:.78rem;color:var(--t3)} .cd-item__actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)} .cd-item__qty{ display:flex;align-items:center;gap:var(--s2); background:var(--bg-warm);border:1px solid var(--border); border-radius:var(--rF);padding:2px var(--s2)} .cd-item__qty span{ font-family:var(--ff-sans);font-weight:800;font-size:.85rem; min-width:20px;text-align:center} .cd-qty-btn{ width:24px;height:24px;border-radius:50%; background:var(--bg);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:.95rem;cursor:pointer;color:var(--t1);line-height:1; transition:background 140ms,color 140ms} .cd-qty-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .cd-item__del{ background:none;border:none;cursor:pointer; color:var(--t3);font-size:.95rem;padding:3px; transition:color 150ms;line-height:1} .cd-item__del:hover{color:#e53e3e} /* Touch: bersagli del mini-carrello a misura di dito. Il blocco sta QUI, dopo le regole base: a parità di specificità vince l'ultima dichiarata. */ @media (pointer:coarse){ .cd-qty-btn{width:36px;height:36px} .cd-item__del{padding:8px;font-size:1.05rem} } /* Empty state */ .cd-empty{ display:flex;flex-direction:column;align-items:center; justify-content:center;gap:var(--s5); padding:clamp(3rem,8vw,5rem) var(--s6);text-align:center} .cd-empty__icon{font-size:3.5rem;opacity:.35} .cd-empty__text{color:var(--t2);font-size:.95rem;line-height:1.65} /* Footer panel */ .cart-drawer__ft{ flex-shrink:0;border-top:2px solid var(--border); padding:var(--s5) var(--s6); display:flex;flex-direction:column;gap:var(--s4); background:var(--bg-warm)} /* Shipping progress bar */ .cd-ship-bar{ background:#fff;border-radius:var(--r2); padding:var(--s3) var(--s4);border:1px solid var(--border)} .cd-ship-bar__text{font-size:.78rem;color:var(--t2);margin-bottom:var(--s2)} .cd-ship-bar__track{ height:6px;background:var(--border); border-radius:var(--rF);overflow:hidden} .cd-ship-bar__fill{ height:100%; background:linear-gradient(90deg,var(--wave),var(--teal)); border-radius:var(--rF);transition:width 400ms var(--ease)} .cd-ship-ok{ text-align:center;font-size:.82rem;font-weight:600; color:var(--teal);background:#fff; border-radius:var(--r2);padding:var(--s3);border:1px solid rgba(0,172,193,.2)} /* Coupon input */ .cd-coupon{display:flex;gap:var(--s2)} .cd-coupon__input{ flex:1;border:1.5px solid var(--border);border-radius:var(--r2); padding:var(--s3) var(--s4);font-size:.83rem;font-family:var(--ff-body); transition:border-color 150ms;outline:none;background:#fff; min-width:0} .cd-coupon__input:focus{border-color:var(--wave)} .cd-coupon__btn{ padding:var(--s3) var(--s5);background:var(--ocean);color:#fff; border:none;border-radius:var(--r2);font-family:var(--ff-sans); font-size:.78rem;font-weight:700;cursor:pointer; transition:background 150ms;white-space:nowrap;flex-shrink:0} .cd-coupon__btn:hover{background:var(--navy)} .cd-coupon__msg{font-size:.76rem;margin-top:calc(-1*var(--s2))} .cd-coupon__msg--err{color:#e53e3e} .cd-coupon__msg--ok{color:var(--teal);font-weight:600} /* Totals */ .cd-totals{display:flex;flex-direction:column;gap:var(--s2)} .cd-total-row{ display:flex;justify-content:space-between;align-items:center; font-size:.88rem;color:var(--t2)} .cd-total-row--total{ font-family:var(--ff-sans);font-weight:800; font-size:1.05rem;color:var(--t1); border-top:2px solid var(--border); padding-top:var(--s3);margin-top:var(--s1)} /* Action buttons */ .cd-checkout-btn{ display:block;text-align:center;text-decoration:none; padding:var(--s4);border-radius:var(--r3)} .cd-continue-btn{ background:none;border:none;color:var(--t3);font-size:.8rem; cursor:pointer;text-align:center;font-family:var(--ff-body); padding:var(--s2);transition:color 150ms;width:100%} .cd-continue-btn:hover{color:var(--ocean)} /* Mobile tweaks */ @media(max-width:480px){ .cart-drawer__panel{width:100vw} .cd-item{grid-template-columns:56px 1fr auto;gap:var(--s3);padding:var(--s3) var(--s4)} } /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:1200px){ .prod-grid--4{grid-template-columns:repeat(3,1fr)} .cat-grid{grid-template-columns:repeat(2,1fr)} .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s8)} .stats-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:1024px){ .hero__grid{grid-template-columns:1fr;text-align:center} .hero__visual{display:none} .hero__sub,.hero__cta,.hero__trust{justify-content:center;max-width:100%} .hero__cta{display:flex} .about-grid{grid-template-columns:1fr} .about-img{display:none} /* Fondatrice a colonna unica. La foto NON si nasconde piu': senza header e' l'unica immagine di apertura della pagina, quindi diventa una fascia sopra al testo. Qui l'ordine e' fisso anche col modificatore --img-right: in verticale la foto sta sempre in cima. */ .fondatrice-sec{grid-template-columns:1fr;min-height:0} .fondatrice-sec .fondatrice-sec__img{display:block;order:1; aspect-ratio:4/3;max-height:52vh; -webkit-mask-image:linear-gradient(to bottom,var(--fs-ramp)); mask-image:linear-gradient(to bottom,var(--fs-ramp))} .fondatrice-sec .fondatrice-sec__body{order:2; padding-block:var(--sec-y);padding-inline:clamp(1rem,3vw,2.5rem)} .feature-split{grid-template-columns:1fr} .feature-split--reverse .feature-split__img{order:unset} .feature-split--reverse .feature-split__content{order:unset} /* impilato: il testo sta sotto (img prima) o sopra (img dopo): la sfumatura passa dall'asse orizzontale a quello verticale, sempre sul lato interno */ .feature-split__img:first-child{ -webkit-mask-image:linear-gradient(to bottom,var(--fs-ramp)); mask-image:linear-gradient(to bottom,var(--fs-ramp))} .feature-split__img:last-child{ -webkit-mask-image:linear-gradient(to top,var(--fs-ramp)); mask-image:linear-gradient(to top,var(--fs-ramp))} .cart-layout{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .testi-grid{grid-template-columns:1fr 1fr} .values-grid{grid-template-columns:1fr 1fr} .cert-grid{grid-template-columns:1fr 1fr} .prod-grid--4{grid-template-columns:repeat(2,1fr)} .prod-grid--3{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ :root{--nav-h:64px} .nav__links{display:none} .nav__burger{display:flex} .nav .btn--sm{display:none} .hero__cta{flex-direction:column;align-items:center} .testi-grid{grid-template-columns:1fr} .values-grid{grid-template-columns:1fr} .cert-grid{grid-template-columns:1fr} .cat-grid{grid-template-columns:1fr 1fr;gap:var(--s3)} .cat-card{aspect-ratio:4/5} .stats-grid{grid-template-columns:1fr 1fr} .footer__grid{grid-template-columns:1fr} .nl-form{flex-direction:column} .bestsellers__head{flex-direction:column;align-items:flex-start} .form-row{grid-template-columns:1fr} .cart-item{grid-template-columns:60px 1fr} .cart-item__line,.cart-item__del{grid-column:2} .cart-item__qty{grid-column:2;justify-self:start} } @media(max-width:480px){ /* minmax(0,1fr) prevents item min-content from expanding columns beyond 1fr. Without this, Box products with an oldPrice (wider flex row) push both columns wider than their share, shifting the whole grid off-centre on mobile. */ .prod-grid--4,.prod-grid--3,.prod-grid--auto{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)} /* Constrain each grid item so its content never forces column expansion */ .prod-grid .prod-card{min-width:0;overflow:hidden} /* Allow current + old price to stack vertically on narrow mobile columns */ .prod-card__prices{flex-wrap:wrap;gap:var(--s1)} .cat-grid{grid-template-columns:1fr} .trust-strip__list{gap:var(--s4)} .press-bar__scroll{gap:var(--s6)} } /* ══════════════════════════════════════════════════════════════════════════ WHATSAPP FLOATING BUTTON ══════════════════════════════════════════════════════════════════════════ */ .whatsapp-btn{ position:fixed;bottom:var(--s6);right:var(--s6); width:54px;height:54px;border-radius:50%; background:#25D366; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 18px rgba(37,211,102,.52); z-index:82;cursor:pointer; animation:wa-float 3.0s ease-in-out infinite; transition:transform var(--spring) 200ms,box-shadow 200ms; text-decoration:none;will-change:transform} .whatsapp-btn:hover{ transform:scale(1.12) translateY(-3px)!important; box-shadow:0 8px 28px rgba(37,211,102,.68); animation-play-state:paused} .whatsapp-btn svg{width:28px;height:28px;fill:#fff;pointer-events:none} @keyframes wa-float{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-9px)}} /* ══════════════════════════════════════════════════════════════════════════ LANGUAGE SWITCHER BUBBLE Positioned above the WhatsApp button. Main bubble = same soap-bubble design as the nav cart. Satellites appear on click in a natural cluster. No ring pulse on either (removed per design spec). ══════════════════════════════════════════════════════════════════════════ */ .lang-switcher{ position:fixed; /* WA is at bottom:--s6 (1.5rem), height 54px, gap --s4 (1rem) */ bottom:calc(var(--s6) + 54px + var(--s4)); /* Centre-align with WA (54px wide): WA centre = right + 27px; lang centre = right + 20px → offset by 7px */ right:calc(var(--s6) + 7px); width:40px;height:40px; z-index:83} /* ── Shared bubble base — plain circle, no border/glow ── */ .lang-bubble--main, .lang-bubble--sat{ position:relative; overflow:hidden; /* clips flag SVG to circle */ border-radius:50%; display:flex;align-items:center;justify-content:center; background:transparent; border:none; box-shadow:none; cursor:pointer} /* Flag image — fills 100% of bubble */ .lang-bubble__flag{ position:absolute; inset:0;width:100%;height:100%; object-fit:cover; border-radius:50%; pointer-events:none; z-index:0; display:block} /* ── Main bubble ── */ .lang-bubble--main{ width:40px;height:40px; box-shadow:0 4px 18px rgba(0,172,193,.52); animation:wa-float 3.2s ease-in-out .3s infinite; will-change:transform; transition:transform var(--spring) 200ms,box-shadow 200ms} .lang-bubble--main:hover{ animation-play-state:paused; transform:scale(1.1) translateY(-3px)!important; box-shadow:0 8px 28px rgba(0,172,193,.68)} .lang-bubble--main.lang-bubble--active{ outline:2px solid rgba(255,255,255,.70); outline-offset:2px} /* ── Satellite container (zero-size anchor at bottom-right of wrapper) ── */ .lang-sats{ position:absolute;bottom:0;right:0; width:0;height:0;pointer-events:none} .lang-sats.open{pointer-events:auto} /* ── Position wrapper for each satellite (handles translate + appear) ── */ .lang-sat-pos{ position:absolute;bottom:0;right:0; /* start collapsed at main bubble centre */ transform:translate(0,0) scale(0); opacity:0; transition: transform 380ms var(--spring), opacity 260ms var(--ease)} /* Staggered open positions — fan upward-left (safe within screen edge) */ .lang-sats.open .lang-sat-pos:nth-child(1){ transform:translate(-5px,-82px) scale(1);opacity:1;transition-delay:0ms} .lang-sats.open .lang-sat-pos:nth-child(2){ transform:translate(-64px,-48px) scale(1);opacity:1;transition-delay:55ms} .lang-sats.open .lang-sat-pos:nth-child(3){ transform:translate(-16px,-138px) scale(1);opacity:1;transition-delay:110ms} .lang-sats.open .lang-sat-pos:nth-child(4){ transform:translate(-70px,-110px) scale(1);opacity:1;transition-delay:165ms} /* ── Satellite bubble ── */ .lang-bubble--sat{ width:34px;height:34px; will-change:transform; transition:transform var(--spring) 160ms} .lang-bubble--sat:hover{ transform:scale(1.14) translateY(-2px)} /* Individual float oscillations — each on its own inner bubble */ .lang-sats.open .lang-sat-pos:nth-child(1) .lang-bubble--sat{ animation:lang-f1 3.6s ease-in-out .1s infinite} .lang-sats.open .lang-sat-pos:nth-child(2) .lang-bubble--sat{ animation:lang-f2 3.1s ease-in-out .5s infinite} .lang-sats.open .lang-sat-pos:nth-child(3) .lang-bubble--sat{ animation:lang-f3 3.9s ease-in-out .0s infinite} .lang-sats.open .lang-sat-pos:nth-child(4) .lang-bubble--sat{ animation:lang-f4 3.4s ease-in-out .7s infinite} @keyframes lang-f1{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}} @keyframes lang-f2{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}} @keyframes lang-f3{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}} @keyframes lang-f4{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}} /* G-08: .toast--lang{} empty rule removed */ /* Reduced-motion: disable satellite floats + main float */ @media(prefers-reduced-motion:reduce){ .lang-bubble--main, .lang-sats.open .lang-sat-pos:nth-child(1) .lang-bubble--sat, .lang-sats.open .lang-sat-pos:nth-child(2) .lang-bubble--sat, .lang-sats.open .lang-sat-pos:nth-child(3) .lang-bubble--sat, .lang-sats.open .lang-sat-pos:nth-child(4) .lang-bubble--sat{ animation:none!important;will-change:auto}} /* Mobile: match WhatsApp responsive offsets */ @media(max-width:480px){ .lang-switcher{ bottom:calc(var(--s4) + 48px + var(--s3)); right:var(--s4)}} /* ══════════════════════════════════════════════════════════════════════════ INTRO BURST BUBBLES (released when loading curtain rises) ══════════════════════════════════════════════════════════════════════════ */ .intro-bubble{ position:fixed;border-radius:50%;pointer-events:none;z-index:10000; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.82) 0%,rgba(178,229,240,.38) 40%,rgba(14,165,200,.09) 100%); border:1px solid rgba(14,165,200,.42); animation:intro-bub-rise linear forwards; will-change:transform,opacity} @keyframes intro-bub-rise{ 0% {transform:translate(0,0) scale(1);opacity:.82} 20% {opacity:.72} 65% {opacity:.38} 100%{transform:translate(var(--ibdx,0px),var(--iby,-110vh)) scale(.22);opacity:0}} /* ── Product Detail Carousel (pd-car) ────────────────────────────────────── */ .pd-car{width:100%;position:relative} /* Badge — floats over the top-left corner of the image, same pattern as prod-card__badge (positioned on the outer wrapper, not inside overflow:hidden) */ .pd-car__badge{ position:absolute; top:var(--s3);left:var(--s3); z-index:5} .pd-car__badge .badge{ font-size:.82rem; padding:.38em 1.15em; box-shadow:0 2px 10px rgba(0,0,0,.18)} .pd-car__main{ position:relative; border-radius:var(--r4); aspect-ratio:1; overflow:hidden} .pd-car__slide{ position:absolute;inset:0; width:100%;height:100%; object-fit:contain; opacity:0; transition:opacity .6s ease,transform .6s ease; transform:scale(1.0)} .pd-car__slide.active{opacity:1} /* Dot indicators */ .pd-car__dots{ position:absolute;bottom:12px;left:50%; transform:translateX(-50%); display:flex;gap:7px;z-index:2} .pd-car__dot{ width:8px;height:8px;border-radius:50%; background:rgba(8,22,34,.22); box-shadow:0 1px 3px rgba(255,255,255,.6); transition:background .3s,transform .3s} .pd-car__dot.active{ background:var(--wave); transform:scale(1.4)} /* Thumbnail strip — no container box; thumbnails appear directly at 65% opacity */ .pd-car__thumbs{ display:flex;gap:10px; margin-top:14px; flex-wrap:wrap; justify-content:center} .pd-car__thumb{ width:72px;height:72px; cursor:pointer;padding:0; flex-shrink:0; opacity:.65; border-radius:var(--r2); overflow:hidden; isolation:isolate; transition:opacity .2s,transform .2s} .pd-car__thumb img{ width:100%;height:100%; object-fit:contain;padding:4px; display:block; border-radius:var(--r2)} .pd-car__thumb.active{opacity:1} .pd-car__thumb:hover:not(.active){ opacity:1; transform:scale(1.07)} @media(max-width:600px){ .pd-car__thumb{width:52px;height:52px} .pd-car__thumbs{gap:8px;margin-top:18px}} /* ── GHS Pictograms ─────────────────────────────────────────────────────── */ .pd-warn{ /* Contrasto alzato: sul velo colorato della sezione il rosso al 5% quasi spariva. Fondo piu' presente + bordo che ne definisce il perimetro. */ background:rgba(220,38,38,.085); border:1px solid rgba(220,38,38,.22); border-radius:var(--r2); padding:var(--s5); margin-bottom:var(--s6)} .pd-warn__pictos{ display:flex;gap:var(--s5);flex-wrap:wrap; margin-bottom:var(--s4)} .pd-warn__pictos:empty{display:none} .picto{ display:flex;flex-direction:column;align-items:center; gap:var(--s2);min-width:64px} .picto__img{ width:60px;height:60px; display:block;object-fit:contain} .picto__label{ font-family:var(--ff-sans);font-size:.62rem; font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:#dc2626;text-align:center} .pd-warn__badge{ display:inline-block; font-family:var(--ff-sans);font-size:.68rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase; color:#dc2626;margin-bottom:var(--s2)} .pd-warn__text p{ font-size:.85rem;color:var(--t1);line-height:1.75;margin:0} /* ── Presidio Medico Chirurgico badge ───────────────────────────────────── */ .pd-presidio{ display:flex;align-items:center;gap:var(--s4); background:linear-gradient(135deg,rgba(11,60,93,.06) 0%,rgba(14,165,200,.08) 100%); border-radius:var(--r2);padding:var(--s4) var(--s5); margin-bottom:var(--s6)} .pd-presidio__logo{ width:64px;height:64px;flex-shrink:0; object-fit:contain} .pd-presidio__text{flex:1} .pd-presidio__title{ font-family:var(--ff-sans);font-size:.72rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--ocean); margin-bottom:var(--s1)} .pd-presidio__desc{ font-size:.82rem;color:var(--t2);line-height:1.55;margin:0} /* ── Perché sceglierci ──────────────────────────────────────────────────── */ .pd-why{ border-top:1px solid var(--border); padding-top:var(--s5); margin-bottom:var(--s6)} .pd-why__title{ font-family:var(--ff-sans);font-size:.72rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--ocean);margin-bottom:var(--s4)} .pd-why__list{ list-style:none;padding:0;margin:0; display:flex;flex-direction:column;gap:var(--s3)} .pd-why__list li{ display:flex;align-items:flex-start;gap:var(--s3); font-size:.88rem;color:var(--t2);line-height:1.6} .pd-why__icon{font-size:1.1rem;flex-shrink:0;line-height:1.4} /* ── Product detail tabs ─────────────────────────────────────────────────── */ .pd-tabs-sec{padding-top:0!important} /* Correlati e recensioni hanno lo stesso grigio e si toccano, ma il blocco recensioni e' iniettato in un contenitore proprio: la regola di adiacenza fra sezioni non lo vede. Il respiro si riduce qui. */ .pd-related{padding-bottom:clamp(2.2rem,3.6vw,3.6rem)} /* ── Pagina prodotto: velo del colore + accenti ───────────────────────────── Le prime due sezioni prendono un velo del colore del prodotto (--pc, messo inline da app.js). Il velo e' lo STESSO su entrambe cosi' non si vede la giunzione; solo la hero aggiunge in cima un accenno piu' acceso che si spegne a meta' sezione, dove ritrova esattamente il tono dell'altra. */ /* Velo dimezzato (3%) con la STESSA sfumatura diagonale della scheda prodotto: piu' presente in alto a sinistra, spenta in basso a destra. Sta sul contenitore che avvolge le due sezioni, non su ognuna: cosi' la diagonale e' una sola e la giunzione fra le due non si vede. Le sezioni sono trasparenti e servono solo a portare gli accenti. */ .pd-top{ background:linear-gradient(152deg, color-mix(in srgb, var(--pc, transparent) 8%, #fff) 0%, color-mix(in srgb, var(--pc, transparent) 3.5%, var(--bg-warm)) 38%, var(--bg-warm) 100%)} .pd-themed{background:transparent} /* Gli accenti si scuriscono rispetto al colore pieno: con i gialli e gli azzurri chiari della tabella il colore puro non si leggerebbe. */ .pd-themed .pd-eyebrow{color:color-mix(in srgb, var(--pc) 74%, #000)} .pd-themed .pd-tabs__btn.active{ color:color-mix(in srgb, var(--pc) 74%, #000); border-bottom-color:var(--pc)} .pd-themed .pd-tabs__usage{border-left-color:var(--pc)} .pd-themed .pd-tabs__usage-title{color:color-mix(in srgb, var(--pc) 74%, #000)} .pd-themed .pd-why__icon{color:color-mix(in srgb, var(--pc) 74%, #000)} .pd-tabs{max-width:860px} .pd-tabs__nav{ display:flex;gap:0; border-bottom:2px solid var(--border); margin-bottom:var(--s8)} .pd-tabs__btn{ background:none;border:none;cursor:pointer; font-family:var(--ff-sans);font-size:.8rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase; color:var(--t2);padding:var(--s4) var(--s6); position:relative;transition:color .2s; border-bottom:2px solid transparent;margin-bottom:-2px} .pd-tabs__btn:hover{color:var(--navy)} .pd-tabs__btn.active{color:var(--navy);border-bottom-color:var(--navy)} .pd-tabs__btn--pdf{color:var(--ocean)} .pd-tabs__btn--pdf.active{border-bottom-color:var(--ocean);color:var(--ocean)} .pd-tabs__panel{display:none} .pd-tabs__panel.active{display:block} .pd-tabs__panel p{ font-size:.95rem;color:var(--t2);line-height:1.9; margin-bottom:var(--s5)} .pd-tabs__usage{ background:#fff; border:1px solid var(--border); border-left:3px solid var(--wave); border-radius:0 var(--r2) var(--r2) 0; padding:var(--s4) var(--s5); margin-top:var(--s6)} .pd-tabs__usage-title{ font-family:var(--ff-sans);font-size:.7rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--wave);margin-bottom:var(--s2)} .pd-tabs__usage p{margin-bottom:0} .pd-tabs__table{ width:100%;border-collapse:collapse; font-size:.9rem} .pd-tabs__table th,.pd-tabs__table td{ padding:var(--s3) var(--s4); text-align:left;border-bottom:1px solid var(--border)} .pd-tabs__table th{ font-family:var(--ff-sans);font-weight:700;font-size:.78rem; text-transform:uppercase;letter-spacing:.06em; color:var(--t2);width:40%;background:#fff} .pd-tabs__table td{color:var(--t1);font-weight:500} .pd-tabs__table tr:last-child th, .pd-tabs__table tr:last-child td{border-bottom:none} .pd-tabs__pdf-body{ display:flex;align-items:center;gap:var(--s6); background:#fff;border:1px solid var(--border);border-radius:var(--r2); padding:var(--s6) var(--s8);flex-wrap:wrap} .pd-tabs__pdf-icon{font-size:2.8rem;flex-shrink:0} .pd-tabs__pdf-text{flex:1;min-width:160px} .pd-tabs__pdf-text strong{ display:block;font-family:var(--ff-sans);font-size:.95rem; font-weight:800;color:var(--navy);margin-bottom:var(--s2)} .pd-tabs__pdf-text p{ font-size:.85rem;color:var(--t3);margin:0;line-height:1.5} @media(max-width:600px){ .pd-tabs__btn{padding:var(--s3) var(--s4);font-size:.72rem} .pd-tabs__pdf-body{padding:var(--s5)} .pd-tabs__pdf-body .btn{width:100%}} /* ── Wave section dividers — compositor hint ────────────────────────────── */ .wave-div--anim .wd-1, .wave-div--anim .wd-2, .wave-div--anim .wd-3{will-change:transform} /* ── Tsunami User Widget (nav) ───────────────────────────────────────────── */ /* Container nel nav — nessun layout extra, si adatta al flex di nav__actions */ .nav__user-widget{display:flex;align-items:center} /* Widget guest: Accedi e Registrati IMPILATI (uno sopra l'altro). In riga finivano appiccicati a "Mini Game" quando la nav si restringe. */ .tsunami-user-widget{display:flex;align-items:center;gap:0} .tsunami-user-widget--guest{flex-direction:column;align-items:stretch;gap:1px;margin-left:var(--s2)} .tsunami-user-widget--guest .tuw__link{padding:2px var(--s3);font-size:.74rem;line-height:1.35} .tsunami-user-widget--guest .tuw__sep{display:none} /* Link base — stessa metrica tipografica di .nav__link */ .tuw__link{ display:inline-flex;align-items:center;gap:5px; font-family:var(--ff-sans);font-size:.79rem;font-weight:600; letter-spacing:.03em; padding:var(--s2) var(--s3);border-radius:var(--r1); transition:color 160ms,background 160ms; color:rgba(255,255,255,.82); white-space:nowrap;cursor:pointer;text-decoration:none} /* Su nav bianco / scrolled: colore scuro */ .nav--scrolled .tuw__link, .nav--white .tuw__link{color:var(--t2)} /* Hover su hero scuro */ .tuw__link:hover{color:#fff;background:rgba(255,255,255,.1)} /* Hover su nav bianco */ .nav--scrolled .tuw__link:hover, .nav--white .tuw__link:hover{color:var(--navy);background:var(--bg-light)} /* Icona persona — SVG inline via currentColor, stessa riga del testo */ .tuw__icon{display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;flex-shrink:0} .tuw__icon svg{width:15px;height:15px;fill:currentColor;display:block} /* Separatore · tra Accedi e Registrati */ .tuw__sep{ font-size:1.7rem;padding:0 3px; color:rgba(255,255,255,.6);user-select:none;pointer-events:none; line-height:1} .nav--scrolled .tuw__sep, .nav--white .tuw__sep{color:var(--t3)} /* Stato loggato — widget più ricco */ .tsunami-user-widget--logged{gap:var(--s2)} .tuw__avatar-wrap{width:28px;height:28px;border-radius:50%;overflow:hidden; border:2px solid rgba(255,255,255,.35);flex-shrink:0} .nav--scrolled .tuw__avatar-wrap, .nav--white .tuw__avatar-wrap{border-color:var(--teal)} .tuw__avatar{width:100%;height:100%;object-fit:cover;display:block} .tuw__avatar-fallback{width:100%;height:100%;display:flex;align-items:center; justify-content:center;font-size:.85rem;background:rgba(255,255,255,.1)} .tuw__info{display:flex;flex-direction:column;gap:1px} .tuw__name{font-family:var(--ff-sans);font-size:.78rem;font-weight:700; color:rgba(255,255,255,.9);line-height:1.1} .nav--scrolled .tuw__name, .nav--white .tuw__name{color:var(--navy)} .tuw__points{font-size:.68rem;font-weight:600; color:rgba(255,255,255,.6);line-height:1} .nav--scrolled .tuw__points, .nav--white .tuw__points{color:var(--t3)} .tuw__menu{display:none} /* futura dropdown utente */ .tuw__link--logout{opacity:.7} /* Avatar utente loggato accanto al carrello → porta all'area personale */ .tuw__me{display:inline-flex;align-items:center;text-decoration:none; transition:transform var(--spring) 200ms} .tuw__me:hover{transform:translateY(-1px) scale(1.06)} .tuw__me .tuw__avatar-wrap{width:34px;height:34px; box-shadow:0 2px 8px rgba(8,22,34,.18)} /* Mobile: i link Accedi/Registrati usano il drawer, ma l'AVATAR del loggato resta visibile accanto al carrello anche sotto 768px */ @media(max-width:768px){ .nav__user-widget{display:none} .nav__user-widget.has-user{display:flex} } /* ── Reduced motion — stop all decorative animations ────────────────────── */ @media(prefers-reduced-motion:reduce){ .hero__orb, .hero__wave--1,.hero__wave--2,.hero__wave--3, .hero__prod-card, .nav__logo::after,.nav__logo-img, .fs-prod, .wave-div--anim .wd-1,.wave-div--anim .wd-2,.wave-div--anim .wd-3, .sec-wave--anim .wd-1,.sec-wave--anim .wd-2,.sec-wave--anim .wd-3, .cat-scroll__track, .whatsapp-btn,.whatsapp-btn::before, .cart-badge,.cart-badge::before{ animation:none!important; will-change:auto} } /* ── Site Icons (inline SVG replacing emoji) ─────────────────────────────── */ .site-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; pointer-events: none; } .value-card__icon .site-icon, .cert-card__icon .site-icon, .stat-card__icon .site-icon { display: block; width: 20px; height: 20px; margin: 0 auto; } .club-login-gate__icon .site-icon, .club-section__icon .site-icon { display: block; width: 1em; height: 1em; margin: 0 auto; } .shop-search-icon .site-icon { width: 1rem; height: 1rem; vertical-align: -0.1em; color: var(--t3); } .pd-tabs__pdf-icon .site-icon { width: 1em; height: 1em; } .payment-icons .site-icon { width: 1.4em; height: 1.4em; vertical-align: middle; color: var(--t2); } /* ══════════════════════════════════════════════════════════════════════════ BLOG — "Consigli" (lista articoli + pagina articolo) Brand-coerente: riusa i token del design system. Mappabile a WordPress. ══════════════════════════════════════════════════════════════════════════ */ /* ── Lista (blog.html) ─────────────────────────────────────────────────── */ .blog-main{padding-block:clamp(2.5rem,5vw,4rem) var(--sec-y);background:var(--bg)} .blog-filters{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center; margin-bottom:clamp(2rem,4vw,3rem)} /* Stessa forma dei filtri della bottega e dei pulsanti del sito: rettangolo arrotondato, non pillola. Bersaglio da 44px come gli altri filtri. */ .blog-chip{ display:inline-flex;align-items:center; font-family:var(--ff-sans);font-size:.82rem;font-weight:700; letter-spacing:.02em;min-height:44px;padding:.6em 1.35em; border-radius:var(--r2); border:1.5px solid var(--border);background:#fff;color:var(--t1);cursor:pointer; box-shadow:var(--sh1); transition:color .18s,background .18s,border-color .18s,transform .18s,box-shadow .18s} .blog-chip:hover{border-color:var(--wave);color:var(--ocean);transform:translateY(-2px); background:color-mix(in srgb, var(--wave) 9%, #fff); box-shadow:0 6px 16px -8px color-mix(in srgb, var(--wave) 60%, transparent)} /* niente bordo trasparente sull'attivo: sugli angoli arrotondati diventa un filo nero. I 1.5px si recuperano nel padding, come nei filtri della bottega. */ .blog-chip.is-active{background:var(--ocean);border:0;color:#fff; padding:calc(.6em + 1.5px) calc(1.35em + 1.5px); border-radius:calc(var(--r2) + 1.5px); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--wave) 75%, transparent)} .blog-chip.is-active:hover{color:#fff;transform:translateY(-2px)} .blog-chip:focus-visible{outline:3px solid color-mix(in srgb, var(--wave) 45%, transparent); outline-offset:2px} .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:clamp(1.4rem,2.5vw,2rem)} .blog-card{display:flex;flex-direction:column;background:#fff; border:1px solid var(--border);border-radius:var(--r3);overflow:hidden; text-decoration:none;color:inherit;box-shadow:var(--sh1); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .blog-card:hover{transform:translateY(-5px);box-shadow:var(--sh3)} /* Card in evidenza — larga, orizzontale su desktop */ .blog-card--featured{grid-column:1 / -1;flex-direction:row} .blog-card--featured .blog-card__cover{width:46%;aspect-ratio:auto;min-height:340px} .blog-card--featured .blog-card__body{flex:1;justify-content:center;padding:clamp(1.5rem,3vw,2.6rem)} .blog-card--featured .blog-card__title{font-size:clamp(1.4rem,2.4vw,2rem)} .blog-card--featured .blog-card__excerpt{font-size:1.02rem;-webkit-line-clamp:4} /* Copertina (gradiente brand + icona) — WP: diventa the_post_thumbnail() */ .blog-card__cover{position:relative;aspect-ratio:16/10;display:flex; align-items:center;justify-content:center;overflow:hidden} .blog-cover__icon{width:34%;max-width:120px;height:auto;color:#fff;opacity:.55; filter:drop-shadow(0 4px 14px rgba(0,0,0,.18))} .blog-card__badge{position:absolute;top:14px;left:14px;font-family:var(--ff-sans); font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--navy);background:#fff;padding:.4em .9em;border-radius:var(--rF); box-shadow:var(--sh2)} /* Copertine articoli: foto reali (WebP ottimizzati, q82). Colore brand come fallback se l'immagine non carica. WP: sostituibile con the_post_thumbnail(). 'cucina' resta a gradiente (nessun articolo la usa). */ .blog-cover--bagno {background:#0B6E96 url('../img/blog-bagno.webp') center/cover no-repeat} .blog-cover--casa {background:#153F6E url('../img/blog-vetri.webp') center/cover no-repeat} .blog-cover--cucina {background:#B8763A url('../img/blog-cucina.webp') center/cover no-repeat} .blog-cover--acciaio{background:#546B80 url('../img/blog-calcare.webp') center/cover no-repeat} .blog-cover--salute {background:#1C7A62 url('../img/blog-guide.webp') center/cover no-repeat} .blog-cover--camini {background:#B23A1E url('../img/blog-barbecue.webp') center/cover no-repeat} .blog-cover--tessuti{background:#4C6478 url('../img/blog-tessuti.webp') center/cover no-repeat} /* Icona placeholder nascosta solo dove c'è la foto */ .blog-cover--bagno .blog-cover__icon, .blog-cover--casa .blog-cover__icon, .blog-cover--acciaio .blog-cover__icon, .blog-cover--salute .blog-cover__icon, .blog-cover--camini .blog-cover__icon, .blog-cover--cucina .blog-cover__icon, .blog-cover--tessuti .blog-cover__icon{display:none} .blog-card__body{padding:clamp(1.2rem,2vw,1.6rem);display:flex;flex-direction:column;gap:.55rem} .blog-card__cat{font-family:var(--ff-sans);font-size:.68rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:var(--wave)} .blog-card__title{font-family:var(--ff-sans);font-weight:800;line-height:1.25; color:var(--t1);font-size:1.18rem;margin:0} .blog-card__excerpt{color:var(--t2);font-size:.92rem;line-height:1.6;margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:auto; padding-top:.5rem;font-family:var(--ff-sans);font-size:.78rem;font-weight:600;color:var(--t3)} .blog-card__author{display:inline-flex;align-items:center;gap:.4rem;color:var(--t2)} .blog-card__author img{width:22px;height:22px;border-radius:50%;object-fit:cover; background:var(--bg-light)} /* Newsletter */ .blog-news{margin-top:clamp(3rem,6vw,5rem);background:var(--bg-warm); border-radius:var(--r4);padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem);text-align:center} .blog-news__inner{max-width:640px;margin-inline:auto} .blog-news__form{display:flex;gap:.6rem;max-width:460px;margin-inline:auto;flex-wrap:wrap} .blog-news__form input{flex:1;min-width:200px;font-family:var(--ff-body);font-size:.95rem; padding:.85em 1.2em;border:1.5px solid var(--border);border-radius:var(--rF);background:#fff;color:var(--t1)} .blog-news__form input:focus{outline:none;border-color:var(--wave);box-shadow:0 0 0 3px rgba(14,165,200,.12)} /* ── Articolo (articolo.html) ──────────────────────────────────────────── */ .article{padding-top:calc(var(--nav-h) + clamp(2rem,4vw,3.5rem)); padding-bottom:clamp(3rem,6vw,5rem);background:var(--bg)} .article__wrap{max-width:760px} .article__crumb{font-family:var(--ff-sans);font-size:.78rem;font-weight:600; color:var(--t3);margin-bottom:var(--s8)} .article__crumb a{color:var(--t3);text-decoration:none} .article__crumb a:hover{color:var(--wave)} .article__crumb span{margin-inline:.45rem} .article__head{margin-bottom:clamp(1.5rem,3vw,2.4rem)} .article__cat{display:inline-block;font-family:var(--ff-sans);font-size:.7rem; font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff; background:var(--wave);padding:.4em 1em;border-radius:var(--rF);margin-bottom:var(--s5)} .article__title{font-family:var(--ff-sans);font-weight:900;line-height:1.15; color:var(--t1);font-size:clamp(1.9rem,4vw,3rem);margin:0 0 var(--s6)} .article__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem; font-family:var(--ff-sans);font-size:.86rem;font-weight:600;color:var(--t3)} .article__author{display:inline-flex;align-items:center;gap:.5rem;color:var(--t2)} .article__author img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--bg-light)} .article__author strong{color:var(--t1);font-weight:700} .article__dot{color:var(--t3)} .article__cover{aspect-ratio:16/9;border-radius:var(--r3);overflow:hidden; display:flex;align-items:center;justify-content:center; margin-bottom:clamp(2rem,4vw,3rem)} .article__cover .blog-cover__icon{width:22%;max-width:150px} /* Tipografia del corpo — leggibilità da rivista */ .article__body{font-family:var(--ff-body);font-size:1.08rem;line-height:1.85;color:var(--t2)} .article__lead{font-size:1.22rem;line-height:1.7;color:var(--t1);font-weight:500; margin:0 0 var(--s8)} .article__body h2{font-family:var(--ff-sans);font-weight:800;color:var(--t1); font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.25; margin:clamp(2.2rem,4vw,3rem) 0 var(--s5)} .article__body p{margin:0 0 var(--s6)} .article__body strong{color:var(--t1);font-weight:700} .article__body em{font-style:italic} .article__body ol,.article__body ul{margin:0 0 var(--s6);padding-left:1.4rem} .article__body li{margin-bottom:var(--s4);padding-left:.3rem} .article__body ol{counter-reset:step} .article__body blockquote{margin:clamp(2rem,4vw,2.6rem) 0;padding:1.2rem 1.6rem; border-left:4px solid var(--wave);background:var(--bg-light);border-radius:0 var(--r2) var(--r2) 0; font-family:var(--ff-sans);font-size:1.15rem;font-weight:600;font-style:italic;color:var(--ocean);line-height:1.5} /* Box prodotto consigliato */ .article-product{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2rem); background:linear-gradient(135deg,var(--bg-warm) 0%,var(--bg-light) 100%); border:1px solid var(--border);border-radius:var(--r3); padding:clamp(1.4rem,3vw,2rem);margin:clamp(2.4rem,5vw,3.4rem) 0} .article-product__img{flex-shrink:0;width:120px;height:120px;display:flex; align-items:center;justify-content:center} .article-product__img img{max-width:100%;max-height:100%;object-fit:contain; filter:drop-shadow(0 8px 20px rgba(8,22,34,.18))} .article-product__eyebrow{font-family:var(--ff-sans);font-size:.68rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--wave)} .article-product__name{font-family:var(--ff-sans);font-weight:800;color:var(--t1); font-size:1.3rem;margin:.3rem 0 .5rem} .article-product__desc{font-size:.95rem;line-height:1.55;color:var(--t2);margin:0 0 var(--s5)} /* Tag + condivisione */ .article__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:clamp(2.4rem,4vw,3rem) 0 var(--s8); padding-top:var(--s8);border-top:1px solid var(--border)} .article__tag{font-family:var(--ff-sans);font-size:.78rem;font-weight:600;color:var(--t3); background:var(--bg-warm);padding:.4em 1em;border-radius:var(--rF)} .article__share{display:flex;align-items:center;gap:.6rem;margin-bottom:clamp(2.4rem,4vw,3rem)} .article__share-label{font-family:var(--ff-sans);font-size:.85rem;font-weight:700;color:var(--t2);margin-right:.2rem} .article__share-btn{display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%;background:var(--bg-warm);color:var(--ocean); border:1px solid var(--border);transition:background .18s,color .18s,transform .18s} .article__share-btn:hover{background:var(--wave);color:#fff;border-color:var(--wave);transform:translateY(-2px)} /* Box autore */ .article-author{display:flex;gap:clamp(1rem,2.5vw,1.6rem);align-items:flex-start; background:var(--bg-warm);border-radius:var(--r3);padding:clamp(1.4rem,3vw,2rem)} .article-author__avatar{flex-shrink:0;width:72px;height:72px;border-radius:50%; overflow:hidden;background:var(--wave);display:flex;align-items:center;justify-content:center; color:#fff;font-family:var(--ff-sans);font-weight:900;font-size:1.8rem} .article-author__avatar img{width:100%;height:100%;object-fit:cover} .article-author__label{font-family:var(--ff-sans);font-size:.7rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--t3)} .article-author__name{font-family:var(--ff-sans);font-weight:800;color:var(--t1);font-size:1.25rem;margin:.2rem 0 .5rem} .article-author__bio{font-size:.92rem;line-height:1.6;color:var(--t2);margin:0} .related-articles{border-top:1px solid var(--border)} /* ── Responsive ────────────────────────────────────────────────────────── */ @media(max-width:780px){ .blog-card--featured{flex-direction:column} .blog-card--featured .blog-card__cover{width:100%;min-height:0;aspect-ratio:16/10} .article-product{flex-direction:column;text-align:center} .article-product__desc{margin-inline:auto} } @media(max-width:520px){ .blog-grid{grid-template-columns:1fr} .article-author{flex-direction:column;text-align:center;align-items:center} } /* ══════════════════════════════════════════════════════════════════════════ HERO SPONGE + BANNER — messaggio subacqueo che attraversa l'header (homepage) Spugna che nuota R→L trascinando uno striscione "punti onda". Non interagibile. ══════════════════════════════════════════════════════════════════════════ */ .hsb-layer{ position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3} /* Padella + spaghi + striscione cliccabili (solo le forme, non l'area vuota) → aprono la registrazione. clip-path/visiblePainted delimitano l'area attiva. */ .hsb-sponge,.hsb-ropes,.hsb-banner{pointer-events:auto;cursor:pointer} .hsb-convoy{ position:absolute;left:0;top:50%; transform:translateX(112vw); /* a riposo: fuori schermo a destra */ will-change:transform} .hsb-convoy.hsb-run{ animation:hsb-travel var(--hsb-dur,16s) linear forwards} @keyframes hsb-travel{ from{transform:translateX(112vw)} to {transform:translateX(calc(-100% - 60px))}} .hsb-inner{ display:flex;align-items:center;position:relative; transform-origin:center; animation:hsb-bob 3.6s ease-in-out infinite;will-change:transform} @keyframes hsb-bob{ 0% {transform:translateY(-7px) rotate(-1.8deg)} 30% {transform:translateY(2px) rotate(0deg)} 50% {transform:translateY(7px) rotate(1.4deg)} 70% {transform:translateY(1px) rotate(.2deg)} 100%{transform:translateY(-7px) rotate(-1.8deg)}} /* Spugna: piccolo "nuoto" indipendente (perno verso il punto di traino) */ .hsb-sponge{display:block;flex:none;width:148px;height:auto; filter:drop-shadow(0 5px 9px rgba(0,0,0,.28)); transform-origin:62% 50%; animation:hsb-sponge-wob 2.6s ease-in-out infinite;will-change:transform} @keyframes hsb-sponge-wob{ 0%,100%{transform:rotate(-2deg)} 50% {transform:rotate(2.6deg)}} /* Spaghi: ondeggio morbido dal lato spugna */ .hsb-ropes{display:block;flex:none;margin:0 -5px;align-self:center; transform-origin:left center; animation:hsb-rope-sway 3s ease-in-out infinite;will-change:transform} @keyframes hsb-rope-sway{ 0%,100%{transform:rotate(-1deg) skewX(2deg)} 50% {transform:rotate(1.4deg) skewX(-2deg)}} /* Striscione dorato-crema con testo navy + coda a bandiera (lato di traino) */ .hsb-banner{ flex:none;position:relative; background:linear-gradient(180deg,#FFFBF1 0%,#FBEDCB 50%,#F2DEAC 100%); padding:14px 36px 14px 24px; clip-path:polygon(0 0, 100% 0, calc(100% - 26px) 50%, 100% 100%, 0 100%); filter:url(#hsb-cloth) drop-shadow(0 5px 9px rgba(0,0,0,.24)); /* stoffa che ondeggia in acqua */ transform-origin:left center; animation:hsb-ripple 3.4s ease-in-out infinite;will-change:transform} .hsb-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none} .hsb-banner::before{ /* cuciture orizzontali (effetto tela) */ content:'';position:absolute;left:9px;right:11px;top:5px;bottom:5px; border-top:1.3px dashed rgba(193,140,40,.42); border-bottom:1.3px dashed rgba(193,140,40,.42);pointer-events:none} .hsb-banner__text{ display:block;white-space:nowrap;position:relative; font-family:var(--ff-sans);font-weight:800;font-size:16px;letter-spacing:.01em; color:var(--navy);line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.55)} @keyframes hsb-ripple{ 0% {transform:skewY(-1.1deg) rotate(.35deg)} 50% {transform:skewY(1.1deg) rotate(.55deg)} 100%{transform:skewY(-1.1deg) rotate(.35deg)}} /* Bolle di scia dalla spugna */ /* Scia: vere bolle di sapone (stile SinkBubble di Debora Sub) — centro quasi trasparente, bordo bianco + cerchio iridescente azzurro, riflesso speculare. */ .hsb-wake{position:absolute;border-radius:50%;pointer-events:none;opacity:0; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.85) 0 13%, rgba(255,255,255,0) 30%), radial-gradient(circle, rgba(255,255,255,.05) 0 54%, rgba(179,229,240,.5) 70%, rgba(14,165,200,.42) 100%); border:.7px solid rgba(255,255,255,.3); animation:hsb-wake-rise var(--d,2.4s) ease-out forwards; will-change:transform,opacity} @keyframes hsb-wake-rise{ 0% {opacity:0;transform:translate(0,0) scale(.45)} 12% {opacity:.92} 50% {transform:translate(var(--wob,4px), -22px) scale(1)} 100%{opacity:0;transform:translate(var(--dx,6px), -44px) scale(1.05)}} @media(max-width:640px){ .hsb-sponge{width:86px;height:auto} .hsb-ropes{width:26px;height:auto} .hsb-banner{padding:10px 22px 10px 16px} .hsb-banner__text{font-size:12px} } @media(prefers-reduced-motion:reduce){ .hsb-layer{display:none} } /* ══════════════════════════════════════════════════════════════════════════ SCROLL PROGRESS — barra verticale brand al posto della scrollbar grigia. La scrollbar nativa viene nascosta; a destra una barra che si RIEMPIE (gradiente wave→ocean) man mano che si scorre. Creata da app.js. ══════════════════════════════════════════════════════════════════════════ */ html{scrollbar-width:none} /* Firefox */ body{-ms-overflow-style:none} /* legacy Edge/IE */ html::-webkit-scrollbar,body::-webkit-scrollbar{ /* Chrome/Safari */ display:none;width:0;height:0} .scroll-progress{ position:fixed;top:0;right:0;width:5px;height:100vh;height:100dvh; z-index:300;pointer-events:none; background:rgba(133,150,163,.16); /* traccia: visibile su bianco e su navy */ opacity:0;transition:opacity 450ms ease 120ms} /* a riposo: invisibile (fade-out morbido) */ .scroll-progress.is-scrolling{ opacity:1;transition:opacity 140ms ease} /* mentre scorri: appare subito */ .scroll-progress__fill{ width:100%;height:0%; background:linear-gradient(180deg,var(--wave-light) 0%,var(--wave) 45%,var(--ocean) 100%); border-radius:0 0 4px 4px; box-shadow:0 0 10px rgba(14,165,200,.45); transition:height 80ms linear} /* micro-smoothing del riempimento */ /* ═══════════════════════════════════════════════════════════════════════════ LA SQUADRA DEL PULITO — collezione calamite (home + area personale + carrello) Le immagini calamita (img/magnets/) hanno stroke bianco die-cut: le tessere hanno una base azzurrina cosi' il bordo bianco stacca su sfondo chiaro o scuro. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tessera singola (condivisa) ─────────────────────────────────────────── */ .sqp-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center} .sqp-tile__img{ position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center; padding:14% 12%;border-radius:18px; background:linear-gradient(160deg,#eaf2f8 0%,#d3e2ec 100%); box-shadow:0 8px 20px rgba(8,22,34,.16), inset 0 1px 0 rgba(255,255,255,.6); overflow:hidden;transition:transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s} .sqp-tile__img img{width:100%;height:100%;object-fit:contain;display:block; transition:filter .18s, opacity .18s} .sqp-tile.is-owned .sqp-tile__img:hover{transform:translateY(-4px) scale(1.03); box-shadow:0 14px 28px rgba(8,22,34,.24), inset 0 1px 0 rgba(255,255,255,.6)} /* mancante: silhouette spenta + lucchetto */ .sqp-tile.is-locked .sqp-tile__img{background:linear-gradient(160deg,#dfe6ec 0%,#c3ccd4 100%)} .sqp-tile.is-locked .sqp-tile__img img{filter:grayscale(1) brightness(.5) contrast(.85);opacity:.5} .sqp-tile__lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.92);background:rgba(12,28,42,.28)} .sqp-tile__name{font-family:var(--ff-sans);font-weight:700;font-size:.8rem;line-height:1.2;color:var(--t1)} .sqp-tile.is-locked .sqp-tile__name{color:var(--t2);opacity:.75} .sqp-tile__rar{display:inline-block;font-family:var(--ff-sans);font-weight:800;font-size:.6rem; letter-spacing:.05em;text-transform:uppercase;color:var(--rc,#0EA5C8); border:1.5px solid var(--rc,#0EA5C8);border-radius:999px;padding:.12rem .5rem;line-height:1} .sqp-tile.is-locked .sqp-tile__rar{opacity:.55} /* varianti dimensione */ .sqp-tile--sm .sqp-tile__name{font-size:.72rem} .sqp-tile--lg .sqp-tile__name{font-size:.9rem} /* ── Barra di completamento (condivisa) ──────────────────────────────────── */ .sqp-progress{display:flex;align-items:center;gap:.9rem} .sqp-progress__bar{flex:1;height:10px;border-radius:999px;background:rgba(14,165,200,.18);overflow:hidden;min-width:120px} .sqp-progress__fill{height:100%;border-radius:999px; background:linear-gradient(90deg,#0EA5C8,#7EEEFF);transition:width .5s cubic-bezier(.34,1.2,.64,1)} .sqp-progress__txt{font-family:var(--ff-sans);font-weight:800;font-size:.95rem;white-space:nowrap} /* ── Sezione HOME (banda scura, sostituisce la vecchia CTA) ───────────────── */ /* I glow sono LIVELLI DELLO SFONDO della sezione, non pseudo-elementi: un box decorativo con gradiente che non fa in tempo a sfumare prima del proprio bordo lascia una riga netta (era il caso del vecchio ::before, bordo al 62%). */ /* il fondo ha piu' respiro: l'onda che segue si sovrappone di 7vw e senza questo margine finirebbe addosso ai pulsanti */ .sqp-home{position:relative;overflow:hidden;color:#fff; padding:clamp(4.2rem,8vw,6.8rem) 0 clamp(4.5rem,9vw,7rem); /* base = fondale condiviso, così il fronte dell'onda sopra combacia esattamente e non si vede la banda dritta alla giunzione; sopra restano i bagliori. */ background: radial-gradient(58% 40% at 50% 56%, rgba(14,165,200,.15) 0%, rgba(14,165,200,.05) 45%, transparent 72%), radial-gradient(50% 45% at 86% 26%, rgba(14,165,200,.16) 0%, transparent 68%), var(--bg-deep)} .sqp-home__head{max-width:660px;margin:0 auto;text-align:center;position:relative} .sqp-home__eyebrow{display:inline-block;font-family:var(--ff-sans);font-weight:800; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wave-light);margin-bottom:.7rem} .sqp-home__title{font-family:var(--ff-sans);font-weight:900;line-height:1.05; font-size:clamp(1.9rem,4.4vw,3rem);margin:0 0 .7rem;letter-spacing:-.02em;color:#fff} .sqp-home__sub{font-size:clamp(.95rem,1.6vw,1.08rem);line-height:1.6;color:rgba(255,255,255,.8);margin:0} /* colonne con TETTO massimo: su schermi larghi le calamite non diventano enormi, la griglia resta centrata e compatta come una vetrina */ .sqp-home__shelf{position:relative;display:grid; grid-template-columns:repeat(7,minmax(0,128px));justify-content:center; gap:clamp(.7rem,1.8vw,1.35rem); margin:clamp(1.8rem,4vw,2.8rem) auto} .sqp-home__shelf .sqp-tile__name{display:none} /* pulito: i nomi stanno nella bacheca */ /* calamite in home LIBERE e fluttuanti, come nella bacheca (senza casella) */ .sqp-home__shelf .sqp-tile__img{background:none;box-shadow:none;border-radius:0;overflow:visible;padding:6% 10%} .sqp-home__shelf .sqp-tile__img img{filter:drop-shadow(0 10px 13px rgba(0,0,0,.42))} .sqp-home__shelf .sqp-tile.is-owned .sqp-tile__img{animation:sqp-float 5s ease-in-out infinite;will-change:transform} .sqp-home__shelf .sqp-tile:nth-child(2n) .sqp-tile__img{animation-duration:5.6s;animation-delay:-1.1s} .sqp-home__shelf .sqp-tile:nth-child(3n) .sqp-tile__img{animation-duration:4.7s;animation-delay:-2.3s} .sqp-home__shelf .sqp-tile:nth-child(4n+1) .sqp-tile__img{animation-delay:-.6s} .sqp-home__shelf .sqp-tile.is-owned .sqp-tile__img:hover{box-shadow:none} .sqp-home__shelf .sqp-tile.is-owned:hover .sqp-tile__img{animation-play-state:paused} .sqp-home__shelf .sqp-tile.is-owned:hover .sqp-tile__img img{transform:scale(1.06)} .sqp-home__foot{display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:relative} /* Feature "chip": icona + due righe (non si spezzano mai a meta' frase) */ .sqp-home__features{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem} .sqp-feat{display:flex;align-items:center;gap:.65rem; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); border-radius:14px;padding:.5rem .95rem .5rem .55rem} .sqp-feat__ico{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:50%;color:#04222f; background:linear-gradient(135deg,#0EA5C8 0%,#7EEEFF 100%); box-shadow:0 5px 16px rgba(14,165,200,.4),inset 0 1px 0 rgba(255,255,255,.5)} .sqp-feat__ico svg{width:19px;height:19px} .sqp-feat__txt{font-size:.8rem;line-height:1.25;color:rgba(255,255,255,.6)} .sqp-feat__txt strong{display:block;color:#fff;font-weight:800;font-family:var(--ff-sans);font-size:.98rem} .sqp-home__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem} @media(max-width:820px){.sqp-home__shelf{grid-template-columns:repeat(5,minmax(0,120px))}} @media(max-width:520px){.sqp-home__shelf{grid-template-columns:repeat(4,minmax(0,96px));gap:.6rem} .sqp-home__foot{align-items:stretch} .sqp-home__features{width:100%}.sqp-feat{flex:1 1 100%} /* ⚠️ CORRETTO: qui c'era `flex:1`, e con due bottoni affiancati significa «dividetevi lo spazio in due parti uguali» — anche quando il testo non ci sta. Sommato a `white-space:nowrap` e `padding:.9em 2.2em` della .btn, il risultato era «SCOPRI LE BOX» che diventava «COPRI LE BOX»: il testo non andava a capo e usciva dal riquadro. Sotto i 520px i due bottoni vanno uno sotto l'altro, a tutta larghezza. Non e' un ripiego: su un telefono due bottoni affiancati sono comunque stretti, e quello che conta si preme meglio se e' largo. */ .sqp-home__btns{flex-direction:column;align-items:stretch;width:100%} .sqp-home__btns .btn{flex:none;width:100%;justify-content:center; padding-left:1rem;padding-right:1rem}} /* ── Bacheca in AREA PERSONALE (sfondo chiaro) ───────────────────────────── */ .sqp-board__head{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-bottom:1.4rem} .sqp-board__head .sqp-progress{flex:1;min-width:220px} .sqp-board__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:clamp(.8rem,2vw,1.3rem)} .sqp-board__grid .sqp-tile__rar{margin-top:.15rem} .sqp-hint{font-size:.78rem;color:var(--t2);margin-top:.15rem;min-height:1em} .sqp-hint a{color:var(--wave);font-weight:700;text-decoration:none} .sqp-hint a:hover{text-decoration:underline} /* card "completa la collezione" */ .sqp-cta-card{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:var(--r3); background:linear-gradient(135deg,var(--bg-light),var(--bg-warm));border:1px solid var(--border); display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between} .sqp-cta-card__txt{font-size:.92rem;color:var(--t2);line-height:1.5} .sqp-cta-card__txt strong{color:var(--t1)} /* legendario / premio */ .sqp-tile[data-magnet="disincrostante"].is-locked .sqp-tile__img{ background:linear-gradient(160deg,#efe2c6 0%,#d8c193 100%)} /* ═══ Bacheca "La mia Squadra": calamite LIBERE e fluttuanti (area personale) ══ Le calamite galleggiano sul fondo navy SENZA la casella bianca, con una fluttuazione leggerissima e un'ombra morbida. Testo sotto riordinato e leggibile (chiaro sul navy) con altezze costanti per allineare le celle. */ .sqp-board__grid .sqp-board__cell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem} .sqp-board__grid .sqp-tile{gap:.45rem} /* niente casella: la calamita galleggia con un'ombra morbida */ .sqp-board__grid .sqp-tile__img{order:1;background:none;box-shadow:none;border-radius:0; overflow:visible;padding:6% 9%} .sqp-board__grid .sqp-tile__img img{filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));transition:transform .22s ease} .sqp-board__grid .sqp-tile.is-owned .sqp-tile__img{animation:sqp-float 5s ease-in-out infinite;will-change:transform} .sqp-board__cell:nth-child(3n) .sqp-tile.is-owned .sqp-tile__img{animation-duration:5.8s;animation-delay:-1.3s} .sqp-board__cell:nth-child(3n+1) .sqp-tile.is-owned .sqp-tile__img{animation-duration:4.6s;animation-delay:-.7s} .sqp-board__cell:nth-child(4n) .sqp-tile.is-owned .sqp-tile__img{animation-delay:-2.2s} /* hover: la calamita si ferma e cresce appena */ .sqp-board__grid .sqp-tile.is-owned .sqp-tile__img:hover{box-shadow:none} .sqp-board__grid .sqp-tile.is-owned:hover .sqp-tile__img{animation-play-state:paused} .sqp-board__grid .sqp-tile.is-owned:hover .sqp-tile__img img{transform:scale(1.07)} /* mancante: silhouette spenta + lucchetto, senza casella ne' scrim */ .sqp-board__grid .sqp-tile.is-locked .sqp-tile__img, .sqp-board__grid .sqp-tile[data-magnet="disincrostante"].is-locked .sqp-tile__img{background:none} .sqp-board__grid .sqp-tile.is-locked .sqp-tile__img img{ filter:grayscale(1) brightness(1.15) opacity(.34) drop-shadow(0 10px 12px rgba(0,0,0,.3))} .sqp-board__grid .sqp-tile__lock{background:none;color:rgba(255,255,255,.85)} @keyframes sqp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* testo: ordine nome → rarita' → suggerimento, chiaro e ad altezza costante */ .sqp-board__grid .sqp-tile__name{order:2;min-height:2.4em; display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700} .sqp-board__grid .sqp-tile.is-locked .sqp-tile__name{color:rgba(255,255,255,.6)} .sqp-board__grid .sqp-tile__rar{order:3;margin-top:0} .sqp-board__grid .sqp-hint{margin-top:0;min-height:2.4em;color:rgba(255,255,255,.6);line-height:1.35} @media (prefers-reduced-motion:reduce){ .sqp-board__grid .sqp-tile.is-owned .sqp-tile__img, .sqp-home__shelf .sqp-tile.is-owned .sqp-tile__img{animation:none} } /* ── Selettore calamita nel CARRELLO ─────────────────────────────────────── */ .sqp-pick{margin-top:.7rem;padding:.75rem .85rem;border-radius:var(--r2); background:var(--bg-light);border:1px dashed rgba(14,165,200,.5)} .sqp-pick__lbl{display:flex;align-items:center;gap:.45rem;font-family:var(--ff-sans);font-weight:800; font-size:.82rem;color:var(--t1);margin-bottom:.55rem} .sqp-pick__lbl svg{color:var(--wave);flex-shrink:0} .sqp-pick__opts{display:flex;flex-wrap:wrap;gap:.5rem} .sqp-pick__opt{position:relative;cursor:pointer;border:2px solid transparent;border-radius:14px; background:#fff;padding:.3rem;width:60px;transition:border-color .15s, transform .15s} .sqp-pick__opt img{width:100%;display:block} .sqp-pick__opt:hover{transform:translateY(-2px)} .sqp-pick__opt.is-sel{border-color:var(--wave);box-shadow:0 4px 12px rgba(14,165,200,.3)} .sqp-pick__opt.is-dup{opacity:.6} .sqp-pick__opt .sqp-pick__tag{position:absolute;top:-7px;right:-7px;font-size:.55rem;font-weight:800; background:var(--wave);color:#fff;border-radius:999px;padding:.05rem .35rem;line-height:1.3;white-space:nowrap} .sqp-pick__opt.is-dup .sqp-pick__tag{background:#8895a0} .sqp-pick__hint{font-size:.74rem;color:var(--t2);margin-top:.5rem} /* ── Espressioni di Debora nelle notifiche (js/debora-mood.js) ─────────────── L'avatar tondo sostituisce le icone generiche nei momenti chiave. */ .toast__check img{border-radius:50%} .ckb__face{border-radius:50%;vertical-align:-8px;margin-right:.2em} .cd-empty__icon--face,.cart-empty__icon--face{display:flex;justify-content:center} .cd-empty__icon--face img,.cart-empty__icon--face img{border-radius:50%; filter:drop-shadow(0 8px 18px rgba(8,22,34,.16))} /* Card senza recensioni reali: nessuna stella, solo una nota discreta */ .prod-card__rating--none .prod-card__rating-count{font-style:italic;opacity:.75} /* ── Gruppi di metodi di pagamento (v13) ───────────────────────────────── Quindici metodi in fila non sono difficili perche' sono tanti: sono difficili perche' sono tutti allo stesso livello. Raggruppati per come si paga davvero, le stesse voci diventano due o tre decisioni brevi. Nomi e ordine dei gruppi arrivano dalla Dashboard, non da qui. */ .ck-paygroups{display:flex;flex-direction:column;gap:var(--s3)} .ck-paygroup{ border:1px solid var(--border,#E4EAF0); border-radius:var(--r2,14px); overflow:hidden; background:var(--bg-card,#fff)} .ck-paygroup--soli{border:0;background:none;overflow:visible} .ck-paygroup__head{ display:flex;align-items:center;gap:var(--s3);width:100%; padding:var(--s4) var(--s5);border:0;background:none;cursor:pointer; font-family:inherit;text-align:left;color:inherit} .ck-paygroup__head:hover{background:var(--bg-light,#F6F9FB)} .ck-paygroup__head:focus-visible{outline:2px solid var(--ocean,#0B7E9B);outline-offset:-2px} .ck-paygroup__txt{flex:1;min-width:0} .ck-paygroup__name{ display:block;font-family:Montserrat,sans-serif;font-weight:700; font-size:.95rem;color:var(--navy,#081624)} .ck-paygroup__hint{ display:block;font-size:.78rem;color:var(--t3,#7A8894);margin-top:.15em} .ck-paygroup__n{ flex:none;font-size:.72rem;font-weight:700;color:var(--t3,#7A8894); background:var(--bg-light,#F1F5F8);border-radius:99px;padding:.1em .55em} .ck-paygroup__chev{ flex:none;width:9px;height:9px;border-right:2px solid var(--t3,#7A8894); border-bottom:2px solid var(--t3,#7A8894);transform:rotate(45deg); margin-right:2px;transition:transform .18s ease} .ck-paygroup.is-open .ck-paygroup__chev{transform:rotate(-135deg);margin-top:4px} .ck-paygroup__body{ padding:0 var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3)} .ck-paygroup--soli .ck-paygroup__body{padding:0} @media (prefers-reduced-motion: reduce){.ck-paygroup__chev{transition:none}} /* ══ GALLERIA PRODOTTO CON VIDEO ═══════════════════════════════════════════ Da quando la scheda puo' contenere video (js/tsunami-prodotti.js), servono tre regole in piu'. I video usano le stesse classi delle immagini, cosi' il carosello non deve distinguerli. */ /* Un