/* Not Compliance · la loro veste, le nostre dinamiche · AdVille Sfondo, inchiostro, bottoni e font sono quelli del loro tema live (Dawn 15.4.1, "copia editoriale di Colouridentity240426"): carta #FDFDFC, inchiostro #121212, bottoni neri squadrati, Assistant. Cambia cosa c'e' in pagina, non come e' vestito. */ :root{ --carta:#FDFDFC; /* --gradient-background del loro color-scheme-1 */ --carta-2:#F4F4F1; /* il fondo delle loro fasce a colonne */ --inchiostro:#121212; /* --color-foreground */ --azzurro:#8499A6; /* il loro color-scheme-2 */ --nero:#000; /* --color-button */ --allarme:#DC3131; /* la banda annuncio rossa */ --fumo:rgba(18,18,18,.62); --fumo-2:rgba(18,18,18,.60); /* .42 dava 2,7:1 su carta: sotto la soglia */ --hair:rgba(18,18,18,.11); --hair-2:rgba(18,18,18,.22); --c:#7A6C59; /* colore fragranza, riscritto per pagina e per carta */ --sans:Assistant,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* I derivati stanno sull'universale: cosi' una carta prodotto che ridichiara --c ricalcola anche i suoi. --ct e' il colore per il TESTO, tirato verso l'inchiostro perche' su bianco i sei colori nudi non tengono il 4,5:1 (la sabbia di Shirta si ferma a 2,4). Al 58% il piu' chiaro dei sei sta a 5,4 su carta e regge anche sopra --cw. --cw e --cl sono aloni e fondi. */ *{box-sizing:border-box;margin:0;padding:0; --ct:color-mix(in srgb,var(--c) 58%,var(--inchiostro)); --cw:color-mix(in srgb,var(--c) 13%,transparent); --cl:color-mix(in srgb,var(--c) 6%,#FFFFFF)} html{scroll-behavior:smooth;background:var(--carta)} body{background:var(--carta);color:var(--inchiostro);font-family:var(--sans); font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--inchiostro);outline-offset:3px} .wrap{width:min(1200px,90vw);margin-inline:auto} /* --page-width: 120rem */ .narrow{width:min(760px,90vw);margin-inline:auto} .k{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fumo)} .k.acc{color:var(--ct)} h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;line-height:1.15} .tit{font-size:clamp(1.55rem,3.2vw,2.5rem);text-wrap:balance} .tit-xl{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;text-wrap:balance} .lead{color:var(--fumo);max-width:60ch;margin-top:1em;font-size:clamp(15.5px,1.4vw,17.5px)} .lead.forte{color:var(--inchiostro)} section{padding-block:clamp(46px,6vw,78px)} section.stretta{padding-block:clamp(34px,4vw,52px)} .banda{background:var(--carta-2)} .banda-riga{border-block:1px solid var(--hair)} .centro{text-align:center} .centro .lead{margin-inline:auto} /* Rivelazione allo scorrimento. Nascondere e' condizionato a `.js` sull', che mette lo script in testa alla pagina. Senza quella condizione, se il JavaScript non gira — estensione che blocca gli script in linea, errore prima dell'IntersectionObserver, scheda senza memoria — TUTTO quello che ha classe .rv resta a opacita' zero e la pagina sembra vuota. Il difetto non si vede mai in prova, perche' in prova il JavaScript gira sempre. */ .js .rv{opacity:0;transform:translateY(18px); transition:opacity .8s cubic-bezier(.22,.7,.25,1),transform .8s cubic-bezier(.22,.7,.25,1)} .js .rv.on{opacity:1;transform:none} .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s} .js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s} @media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} /* bottoni · i loro: nero pieno, spigolo vivo, 1px di bordo, testo normale */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--nero);color:#fff;padding:14px 30px;font-size:15px;font-weight:400; border:1px solid var(--nero);border-radius:0;min-height:46px;transition:.25s} .btn:hover{background:var(--carta);color:var(--inchiostro)} .btn.g{background:transparent;color:var(--inchiostro);border-color:var(--inchiostro)} .btn.g:hover{background:var(--inchiostro);color:#fff} .btn.big{width:100%;padding-block:16px;font-size:16px} .link{font-size:14px;color:var(--inchiostro);border-bottom:1px solid var(--hair-2); padding-bottom:2px;display:inline-block;transition:.25s} .link:hover{border-color:var(--inchiostro)} .stars{color:#121212;letter-spacing:1px;font-size:13px} .stars i{font-style:normal;color:var(--fumo-2)} /* barra di servizio del mockup. Non e' fissa: da telefono va a capo su due righe e, fissa, copriva la banda annuncio rossa. Sta in cima e spinge giu' il resto, come una barra vera. */ .demo{position:relative;z-index:300;background:var(--inchiostro); color:rgba(255,255,255,.66);display:flex;align-items:center;justify-content:space-between; gap:16px;padding:8px 20px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase} .demo .r{color:rgba(255,255,255,.5)} @media(max-width:900px){.demo .r,.demo .d{display:none} .demo{justify-content:center;padding:7px 12px;font-size:9.5px}} /* ===== bande annuncio · le due che hanno loro, nell'ordine che hanno loro ===== */ .annalert{background:var(--allarme);color:#fff;text-align:center;padding:9px 20px; font-size:13px;line-height:1.4} .ann{background:var(--carta);border-bottom:1px solid var(--hair);overflow:hidden;padding:10px 0; font-size:12.5px;color:var(--fumo)} .ann .track{display:flex;justify-content:center;align-items:center;flex-wrap:wrap} .ann .it{padding:0 clamp(12px,1.4vw,22px);white-space:nowrap;display:flex;align-items:center;gap:9px} .ann .it+.it::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--fumo-2)} @media(max-width:620px){.ann .it:nth-child(n+3){display:none}} /* ===== header · logo centrato in alto, come il loro header--top-center ===== */ header.top{position:sticky;top:0;z-index:250;background:var(--carta); border-bottom:1px solid var(--hair)} .trow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 0} .trow .sx{justify-self:start;display:flex;align-items:center;gap:14px} .trow .dx{justify-self:end;display:flex;align-items:center;gap:16px} .brand{display:block;line-height:0;justify-self:center} /* Il logo e' un logotipo largo e sottile (1000x59 dopo il ritaglio): si dimensiona in LARGHEZZA. Vincolandone l'altezza, come si fa di solito, il marchio veniva reso alto 6,7px dentro un riquadro di vuoto. */ .brand img{width:clamp(210px,24vw,280px);height:auto;display:block} .tnav{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding-bottom:12px} .tnav a{font-size:14px;color:var(--inchiostro);padding-bottom:3px; border-bottom:1px solid transparent;transition:border-color .25s} .tnav a:hover,.tnav a[aria-current]{border-bottom-color:var(--inchiostro)} .ico{display:inline-flex;align-items:center;gap:7px} .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linejoin:round;stroke-linecap:round} .cartn .n{font-size:12px;font-variant-numeric:tabular-nums} @media(max-width:860px){.tnav{display:none}.brand img{width:min(200px,52vw)}} /* ===== HOME · hero · la loro foto, il loro bottone ===== La loro foto ha molto bianco in basso: il riquadro si stringe (2:1 invece del 37:27 originale) e taglia proprio quella parte, cosi' il bottone sta sulla foto e non su un campo vuoto. */ /* padding-block:0 e' obbligatorio: `.hero` e' una
e prendeva i 78px della regola generale, che aggiunti sopra e sotto alla foto staccavano il bottone dall'immagine e lo lasciavano su un campo bianco. */ .hero{position:relative;background:var(--carta);padding-block:0} .hero .ph{position:relative;aspect-ratio:2/1;overflow:hidden} .hero .ph img{width:100%;height:100%;object-fit:cover;object-position:center 42%} .hero .in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(22px,3.6vh,42px); text-align:center} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1; background:linear-gradient(180deg,rgba(253,253,252,0),rgba(253,253,252,.82) 58%,var(--carta))} .hero h1{font-size:clamp(1.5rem,3.4vw,2.4rem);text-wrap:balance;max-width:18ch; margin:0 auto 6px} .hero .rate{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--fumo); margin-bottom:14px} .hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} @media(max-width:749px){ .hero .ph{aspect-ratio:1/1} .hero::after{height:56%} .hero .cta .btn{padding:13px 22px;font-size:14px} } /* fascia fiducia scorrevole · le loro rassicurazioni, in movimento. Fondo #F4F4F1: e' il loro `color-scheme-premium-button`, non un grigio qualunque. Lo sfondo resta chiaro come sul loro store. */ .trustmq{background:var(--carta-2);color:var(--fumo);overflow:hidden;padding:12px 0; border-block:1px solid var(--hair)} .trustmq .track{display:flex;width:max-content;animation:scorri 48s linear infinite} .trustmq .it{padding:0 26px;white-space:nowrap;font-size:12.5px;letter-spacing:.06em; display:flex;align-items:center;gap:11px} .trustmq .it::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--fumo-2)} @keyframes scorri{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.trustmq .track{animation:none;width:auto;flex-wrap:wrap; justify-content:center}} /* manifesto · il loro blocco di testo centrato */ .manifesto{text-align:center} /* h1 e h2 insieme: in home questo blocco porta l'h1 della pagina, altrove e' un h2. Legarlo al solo h2 lasciava il titolo della home senza misura. */ .manifesto h1,.manifesto h2{font-size:clamp(1.5rem,3.4vw,2.3rem);max-width:22ch; margin-inline:auto;text-wrap:balance} .manifesto .r{margin-top:1.1em;font-size:clamp(16px,1.6vw,19px);font-style:italic;font-weight:700} .manifesto .r+.r{font-size:clamp(15px,1.35vw,16.5px);margin-top:.3em;color:var(--fumo)} /* ===== Discovery Kit · immagine e testo, come il loro image_with_text ===== */ .iwt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center} @media(max-width:860px){.iwt{grid-template-columns:1fr;gap:26px}} .iwt .im{background:var(--carta-2)} .iwt .im img{width:100%;aspect-ratio:1;object-fit:cover} .iwt h2{font-size:clamp(1.5rem,3.2vw,2.3rem)} .iwt p{color:var(--fumo);margin-top:1em;font-size:16.5px} .iwt .btn{margin-top:1.6em} /* i tre passi del kit: parole loro, dal testo della scheda */ .passi{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2em; border:1px solid var(--hair)} @media(max-width:760px){.passi{grid-template-columns:1fr}} .passo{padding:20px 22px;border-right:1px solid var(--hair)} .passo:last-child{border-right:0} @media(max-width:760px){.passo{border-right:0;border-bottom:1px solid var(--hair)} .passo:last-child{border-bottom:0}} .passo b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--fumo-2);margin-bottom:8px} .passo .t{font-weight:700;font-size:15.5px} .passo .d{color:var(--fumo);font-size:14.5px;margin-top:5px} .credito{margin-top:1.4em;border:1px solid var(--inchiostro);padding:16px 20px; display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px} .credito b{font-size:19px} .credito span{color:var(--fumo);font-size:14.5px} /* ===== recensioni · rese in pagina, non caricate da uno script ===== */ .rectesta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px} .recscore{display:flex;align-items:center;gap:12px} .recscore b{font-size:2.2rem;line-height:1;font-weight:700} .recscore span{color:var(--fumo);font-size:13.5px} /* Le recensioni scorrono in orizzontale invece di impilarsi: cosi' si vede subito che sono tante, e la pagina non si allunga di sei riquadri. */ .recs{display:flex;gap:clamp(14px,1.8vw,22px);margin-top:2em;overflow-x:auto; scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent} .recs>.rec{flex:0 0 clamp(268px,30%,340px);scroll-snap-align:start} @media(max-width:620px){.recs>.rec{flex:0 0 min(82vw,320px)}} .recs::-webkit-scrollbar{height:3px} .recs::-webkit-scrollbar-thumb{background:var(--hair-2)} .recs::-webkit-scrollbar-track{background:var(--hair)} .recs-nota{margin-top:8px;font-size:12.5px;color:var(--fumo-2)} .rec{border:1px solid var(--hair);padding:22px;display:flex;flex-direction:column} .rec q{display:block;quotes:none;margin-top:12px;font-size:15.5px;line-height:1.55} .rec .pie{margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--fumo)} .rec .pie b{display:block;color:var(--inchiostro);font-weight:700;font-size:13.5px} .rec .pr{display:block;margin-top:6px;font-size:11.5px;color:var(--fumo-2)} .verif{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.06em; color:var(--fumo)} .verif::before{content:"✓";font-weight:700;color:#1a7f4b} /* ===== griglia e carte prodotto · qui entra il colore di ogni fragranza ===== */ .testa-riga{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px} .griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-top:2em} .griglia.quattro{grid-template-columns:repeat(4,1fr)} @media(max-width:960px){.griglia,.griglia.quattro{grid-template-columns:1fr 1fr}} @media(max-width:560px){.griglia,.griglia.quattro{grid-template-columns:1fr}} .card{position:relative;display:flex;flex-direction:column;background:var(--carta); border:1px solid var(--hair);transition:border-color .3s,box-shadow .3s} .card:hover{border-color:var(--hair-2);box-shadow:0 6px 30px rgba(18,18,18,.06)} /* il colore della fragranza: un filetto in alto, non un fondo */ .card::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px; background:var(--c);z-index:3} .card .ph{display:block;aspect-ratio:2/3;overflow:hidden;background:var(--cl)} .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s} .card:hover .ph img{transform:scale(1.03)} .card .bd{padding:20px;display:flex;flex-direction:column;gap:7px;flex:1} .card .sens{font-style:italic;color:var(--ct);font-size:15px;line-height:1.35} .card h3{font-size:1.15rem} .card h3 small{display:block;font-weight:400;font-size:13.5px;color:var(--fumo);margin-top:3px} .card .fam{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fumo)} .card .sh{color:var(--fumo);font-size:14.5px} .card .pie{margin-top:auto;padding-top:16px;border-top:1px solid var(--hair); display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .card .pz{font-size:1.05rem;font-weight:700} .card .add{border:1px solid var(--inchiostro);padding:9px 16px;font-size:13.5px;transition:.25s} .card .add:hover{background:var(--inchiostro);color:#fff} .card .bdg{position:absolute;top:12px;left:12px;z-index:2;background:var(--cw);color:var(--ct); border:1px solid var(--ct);border-radius:40px;padding:4px 12px;font-size:11px; font-weight:700;letter-spacing:.06em} /* la fila che scorre da telefono, invece di tre carte impilate */ .fila{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-top:2em} @media(max-width:760px){ .fila{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px; gap:14px;scrollbar-width:thin} .fila>.card{flex:0 0 min(78vw,300px);scroll-snap-align:start} } .fila-nota{margin-top:10px;font-size:12px;color:var(--fumo-2)} @media(min-width:761px){.fila-nota{display:none}} /* ===== le tre rassicurazioni · le loro, con l'icona ===== */ /* Tre colonne a ogni larghezza, anche sul telefono: impilate diventavano tre blocchi da scorrere, affiancate si leggono in un colpo d'occhio. */ .trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,3vw,40px); text-align:center} .trust3 .t svg{width:34px;height:34px;margin:0 auto 14px;fill:none;stroke:var(--inchiostro); stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;display:block} .trust3 .t h3{font-size:1.05rem} .trust3 .t p{color:var(--fumo);margin-top:8px;font-size:14.5px;max-width:34ch;margin-inline:auto} @media(max-width:760px){ .trust3{gap:14px} .trust3 .t svg{width:26px;height:26px;margin-bottom:10px} .trust3 .t h3{font-size:.9rem;text-wrap:balance} .trust3 .t p{font-size:12.5px;margin-top:6px;line-height:1.4} } /* ===== schede chiave/valore ===== */ .schede{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair); margin-top:2em} .schede.tre{grid-template-columns:repeat(3,1fr)} .schede.quattro{grid-template-columns:repeat(4,1fr)} /* .quattro va elencata anche qui, non solo nella regola base: dimenticarla lasciava quattro colonne fisse sulla scheda dei kit e mandava la pagina fuori di 270px a 360 */ @media(max-width:860px){.schede,.schede.tre,.schede.quattro{grid-template-columns:1fr 1fr}} @media(max-width:520px){.schede,.schede.tre,.schede.quattro{grid-template-columns:1fr}} .scheda{padding:22px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)} .scheda .kk{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumo)} .scheda .vv{margin-top:8px;font-size:16px;font-weight:700} .scheda .vv small{display:block;font-weight:400;font-size:14px;color:var(--fumo);margin-top:4px} /* ===== storia / sostenibilita' ===== */ .storia{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,60px);align-items:center} @media(max-width:860px){.storia{grid-template-columns:1fr}} .storia .im{background:var(--carta);border:1px solid var(--hair);padding:clamp(18px,2.6vw,34px)} .storia .im img{width:100%;aspect-ratio:1;object-fit:contain} .storia q{display:block;quotes:none;font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700; line-height:1.3;margin-top:.6em;text-wrap:balance} /* ===== chiusura ===== */ .chiusa{text-align:center} .chiusa h2{font-size:clamp(1.5rem,3.4vw,2.4rem);max-width:20ch;margin-inline:auto; font-style:italic;text-wrap:balance} .chiusa .btn{margin-top:1.6em} /* ===== intestazione pagina interna ===== */ .pagehero{padding-block:clamp(30px,4vw,52px) 0} .pagehero h1{font-size:clamp(1.7rem,3.6vw,2.6rem)} .briciole{font-size:13px;color:var(--fumo);margin-bottom:10px} .briciole a:hover{text-decoration:underline} /* filtri */ .filtri{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.4em;align-items:center} .filtro{border:1px solid var(--hair-2);padding:8px 16px;font-size:13.5px;transition:.2s} .filtro:hover{border-color:var(--inchiostro)} .filtro[aria-pressed="true"]{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)} .conta{color:var(--fumo);font-size:13.5px;margin-left:auto} /* ===== PDP ===== */ body.prodotto{background: radial-gradient(120% 40% at 50% 0,var(--cw),transparent 70%) no-repeat,var(--carta)} .pdp{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,64px); padding-block:clamp(24px,3.4vw,46px) clamp(30px,4vw,56px)} @media(max-width:960px){.pdp{grid-template-columns:1fr;gap:22px}} .pgal .m{aspect-ratio:2/3;overflow:hidden;background:var(--cl);border:1px solid var(--hair)} .pgal .m img{width:100%;height:100%;object-fit:cover} .pstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px} .pstrip button{border:1px solid var(--hair);aspect-ratio:1;overflow:hidden;background:var(--cl); padding:0;transition:border-color .2s} .pstrip button[aria-current="true"]{border-color:var(--inchiostro)} .pstrip img{width:100%;height:100%;object-fit:cover} .pinfo .marca{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumo)} .pinfo h1{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:8px;line-height:1.2} .pinfo .sens{font-style:italic;color:var(--ct);font-size:clamp(1.05rem,1.9vw,1.35rem); margin-top:10px} .prate{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;color:var(--fumo)} .prate a{border-bottom:1px solid var(--hair-2)} .pprice{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)} .pprice .n{font-size:1.7rem;font-weight:700;line-height:1} .pprice .tax{color:var(--fumo);font-size:13px;margin-top:8px} .pprice .kl{margin-top:10px;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pprice .kl b{font-weight:700} .pprice .kl .marchio{border:1px solid var(--hair-2);border-radius:40px;padding:2px 10px; font-size:11.5px;letter-spacing:.04em} /* quanti pezzi restano del lotto: il dato in chiaro, non un timer finto */ .pstock .t{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .pstock .t b{font-size:1.15rem;font-weight:700} .pstock .t span{font-size:13px;color:var(--fumo)} .pstock .barra{height:5px;background:rgba(18,18,18,.09);margin-top:10px;overflow:hidden} .pstock .barra i{display:block;height:100%;width:var(--p);background:var(--c)} .pstock .n{font-size:13px;color:var(--fumo);margin-top:9px} .pstock.poco{border-color:var(--ct)} .pstock.poco .t b{color:var(--ct)} .pstock.poco .t b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--c);margin-right:8px;vertical-align:middle;animation:pulsa 2.2s ease-in-out infinite} @keyframes pulsa{50%{opacity:.25}} @media(prefers-reduced-motion:reduce){.pstock.poco .t b::before{animation:none}} /* quantita' e aggiungi, come stanno da loro */ .qtyrow{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:16px} @media(max-width:420px){.qtyrow{grid-template-columns:1fr}} .qty{display:inline-flex;align-items:center;border:1px solid var(--inchiostro);min-height:46px} .qty button{padding:0 14px;font-size:17px;line-height:1;color:var(--fumo)} .qty button:hover{color:var(--inchiostro)} .qty span{padding:0 8px;min-width:34px;text-align:center;font-size:15px} /* bundle: la collezione intera a un quarto in meno */ .pbundle .bt{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700} .pbundle .et{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:4px 10px;border-radius:40px;background:var(--cw);color:var(--ct); border:1px solid var(--ct)} .pbundle .bf{display:flex;gap:6px;margin-top:12px} .pbundle .bf img{width:50px;aspect-ratio:2/3;object-fit:cover;background:var(--cl); border:1px solid var(--hair)} .pbundle .bn{margin-top:10px;font-size:13.5px;color:var(--fumo)} .pbundle .bp{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-top:10px} .pbundle .ora{font-size:1.5rem;font-weight:700;line-height:1} .pbundle .pri{color:var(--fumo);text-decoration:line-through;font-size:14.5px} .pbundle .ris{font-size:12px;font-weight:700;color:var(--ct)} .pbundle .bbtn{width:100%;margin-top:12px} .pbundle .bk{color:var(--fumo);font-size:13px;margin-top:9px;text-align:center} /* il richiamo al kit, con le loro parole */ .pkit{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center; border:1px solid var(--hair);padding:12px 14px;margin-top:12px;transition:border-color .25s} .pkit .t{font-size:14.5px} .pkit .t b{font-weight:700} .pkit .t small{display:block;color:var(--fumo);font-size:13px;margin-top:2px} .pkit .a{font-size:13px;white-space:nowrap;border-bottom:1px solid var(--hair-2)} .ptrust{margin-top:16px;display:grid;gap:6px} .ptrust span{font-size:14px;color:var(--fumo)} .pacc{margin-top:20px;border-top:1px solid var(--hair)} .pacc details{border-bottom:1px solid var(--hair)} .pacc summary{list-style:none;cursor:pointer;padding:14px 0;font-size:15.5px;font-weight:700; display:flex;justify-content:space-between;align-items:center;gap:14px} .pacc summary::-webkit-details-marker{display:none} .pacc summary::after{content:"+";font-size:20px;font-weight:400;color:var(--fumo)} .pacc details[open] summary::after{content:"–"} .pacc .c{padding-bottom:16px;color:var(--fumo);font-size:14.5px} .pacc .c b{color:var(--inchiostro)} /* claim con l'atmosfera dietro */ .claim{position:relative;overflow:hidden;border-block:1px solid var(--hair)} .claim .atm{position:absolute;inset:0;z-index:0} .claim .atm img{width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.5} .claim::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, var(--carta) 0%,rgba(253,253,252,.95) 34%,rgba(253,253,252,.6) 66%,rgba(253,253,252,.25) 100%)} @media(max-width:760px){.claim::after{background:linear-gradient(180deg, rgba(253,253,252,.92) 0%,rgba(253,253,252,.86) 55%,var(--carta) 100%)}} .claim .in{position:relative;z-index:2;padding-block:clamp(46px,7vw,86px)} .claim .frase{font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.15;max-width:17ch; margin-top:12px;text-wrap:balance} .prove{display:flex;flex-wrap:wrap;border:1px solid var(--hair);background:var(--carta); margin-top:2em;max-width:660px} .prova{padding:16px 20px;flex:1 1 0;min-width:0;border-right:1px solid var(--hair)} .prova:last-child{border-right:0} /* `flex:1 1 190px` mandava a capo la terza prova: due sopra e una sotto. Con base 0 e min-width:0 le tre stanno sempre sulla stessa riga, anche a 360px, dove si stringono invece di spezzarsi. */ @media(max-width:620px){ .prove{max-width:none} .prova{padding:12px 10px} .prova .kk{font-size:9.5px;letter-spacing:.08em} .prova .vv{font-size:12.5px;margin-top:4px;line-height:1.35} } .prova .kk{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ct); font-weight:700} .prova .vv{margin-top:6px;font-size:15px} /* racconto */ .racconto p{font-size:clamp(16px,1.5vw,17.5px);margin-top:1em;color:var(--fumo)} .racconto p:first-child{margin-top:0} .racconto p.forte{color:var(--inchiostro);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.55rem); line-height:1.3;margin-top:1.2em} /* ===== piramide olfattiva con le immagini ===== */ .olf .blocco+.blocco{margin-top:clamp(34px,4.6vw,58px)} .fase{display:flex;align-items:baseline;gap:14px;margin-top:1.8em} .fase .n{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ct);white-space:nowrap} .fase .l{flex:1;height:1px;background:linear-gradient(90deg,var(--c),var(--hair) 65%)} .mat{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin-top:1.1em} .mat .it{text-align:center} .mat .box{display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--hair); background:var(--carta-2);transition:border-color .3s} .mat .it:hover .box{border-color:var(--ct)} .mat .box img{width:100%;height:100%;object-fit:cover;transition:transform .9s} .mat .it:hover .box img{transform:scale(1.05)} .mat .ph{display:grid;place-items:center;height:100%;font-size:1.5rem;font-weight:700; color:var(--fumo-2)} .mat .nm{margin-top:9px;font-size:12.5px;color:var(--fumo)} @media(max-width:860px){.duefrasi{grid-template-columns:1fr;gap:24px}} /* evoluzione sulla pelle */ @media(max-width:860px){.evo{grid-template-columns:1fr}} .evo .f{padding:clamp(20px,2.4vw,28px);position:relative;border-right:1px solid var(--hair)} .evo .f:last-child{border-right:0} @media(max-width:860px){.evo .f{border-right:0;border-bottom:1px solid var(--hair)} .evo .f:last-child{border-bottom:0}} .evo .f::before{content:"";position:absolute;left:0;top:0;height:3px;background:var(--c); width:var(--w,33%)} .evo .f .t{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ct)} .evo .f .tx{margin-top:12px;font-size:15.5px} .evo .f .nt{margin-top:12px;color:var(--fumo);font-size:13.5px} /* richiamo all'acquisto in pagina */ .pcta{text-align:center;border-block:1px solid var(--hair)} .pcta .frase{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:700;max-width:24ch; margin-inline:auto;text-wrap:balance;font-style:italic} .pcta .btn{margin-top:1.5em} /* nota del naso */ .naso .in{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,48px);align-items:center} @media(max-width:760px){.naso .in{grid-template-columns:1fr}} .naso .foto{width:clamp(92px,11vw,132px);aspect-ratio:1;border-radius:50%;overflow:hidden; border:1px solid var(--hair-2);background:var(--cl);display:grid;place-items:center; font-size:2rem;font-weight:700;color:var(--ct)} .naso .foto img{width:100%;height:100%;object-fit:cover} .naso q{display:block;quotes:none;font-style:italic;font-size:clamp(1.15rem,2.4vw,1.75rem); line-height:1.35;margin-top:12px;max-width:32ch} .naso .firma{margin-top:16px;font-size:13px;color:var(--fumo)} .naso .firma b{color:var(--inchiostro);font-weight:700} /* cross sell */ .xs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:2em} @media(max-width:860px){.xs{grid-template-columns:1fr}} /* barra acquisto fissa da telefono */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:280;background:var(--carta); border-top:1px solid var(--hair-2);padding:10px 16px;display:none; align-items:center;justify-content:space-between;gap:12px; transform:translateY(120%);transition:transform .28s; box-shadow:0 -6px 24px rgba(18,18,18,.07)} .sticky.on{transform:none} .sticky .n{font-size:13.5px;line-height:1.25} .sticky .n small{display:block;color:var(--fumo);font-size:12px} .sticky .btn{padding:12px 20px;font-size:14px;min-height:42px} @media(max-width:960px){.sticky{display:flex}} /* ===== footer ===== */ footer{border-top:1px solid var(--hair);padding-block:44px 26px;background:var(--carta)} .fg{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px} @media(max-width:860px){.fg{grid-template-columns:1fr 1fr}} @media(max-width:520px){.fg{grid-template-columns:1fr}} footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px} footer ul{list-style:none;display:grid;gap:8px} footer a,footer li{color:var(--fumo);font-size:14.5px} footer a:hover{color:var(--inchiostro)} /* il piede porta il logo vero, non il nome scritto in maiuscoletto */ footer img.marchio{width:250px;max-width:100%;height:auto;margin-bottom:16px} .social{display:flex;gap:14px;margin-top:14px} .social a{display:inline-flex} .social svg{width:19px;height:19px;fill:none;stroke:var(--fumo);stroke-width:1.4} .social a:hover svg{stroke:var(--inchiostro)} .pag{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .pag span{border:1px solid var(--hair);padding:3px 9px;font-size:10.5px;letter-spacing:.06em; color:var(--fumo-2)} .fl{margin-top:32px;padding-top:18px;border-top:1px solid var(--hair);color:var(--fumo-2); font-size:12px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between} /* ===== carrello a cassetto ===== */ body.bloccato{overflow:hidden} .cassetto{position:fixed;inset:0;z-index:400} .cassetto[hidden]{display:none} .cassetto .velo{position:absolute;inset:0;background:rgba(18,18,18,.4);opacity:0; transition:opacity .3s} .cassetto.on .velo{opacity:1} .cassetto .pannello{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw); background:var(--carta);border-left:1px solid var(--hair); display:flex;flex-direction:column;transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.7,.25,1)} .cassetto.on .pannello{transform:none} @media(prefers-reduced-motion:reduce){.cassetto .velo,.cassetto .pannello{transition:none}} .ctesta{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:18px 20px;border-bottom:1px solid var(--hair)} .ctesta .k{color:var(--inchiostro)} .chiudi{width:32px;height:32px;display:grid;place-items:center;color:var(--fumo)} .chiudi:hover{color:var(--inchiostro)} .chiudi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round} .csped{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--carta-2); border-bottom:1px solid var(--hair);font-size:13px;color:var(--fumo)} .csped svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--inchiostro);stroke-width:1.3; stroke-linejoin:round} .csped b{color:var(--inchiostro);font-weight:700;font-size:13.5px} .csped span{display:block;font-size:12.5px} .csoglia .barra{height:4px;background:rgba(18,18,18,.09);margin-top:10px;overflow:hidden} .csoglia .barra i{display:block;height:100%;width:var(--p);background:var(--inchiostro)} .crighe{flex:1;overflow-y:auto;padding:4px 20px} .criga{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center; padding:16px 0;border-bottom:1px solid var(--hair)} .criga img{width:58px;aspect-ratio:2/3;object-fit:cover;background:var(--carta-2)} .criga h4{font-size:.98rem} .criga .me{color:var(--fumo);font-size:12px;margin-top:3px} .criga .cp{font-size:1rem;font-weight:700} .criga .qta{display:inline-flex;align-items:center;gap:12px;margin-top:8px; border:1px solid var(--hair-2);padding:3px 9px} .criga .qta button{color:var(--fumo);font-size:14px;line-height:1} .criga .qta button:hover{color:var(--inchiostro)} .criga .qta span{font-size:13px} .cpiede{padding:18px 20px;border-top:1px solid var(--hair);background:var(--carta-2)} .cpiede .cr{display:flex;justify-content:space-between;align-items:baseline;gap:14px; font-size:14px;margin-bottom:7px} .cpiede .cr b{font-size:1.3rem;font-weight:700} .cpiede .cr.muto{color:var(--fumo);font-size:12.5px} .cpiede .btn{width:100%;margin-top:10px} .csic{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px; color:var(--fumo);font-size:12px;text-align:center} .csic svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4} .cpag{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:10px} .cpag span{border:1px solid var(--hair);padding:3px 8px;font-size:10px;color:var(--fumo-2)}