/* ═══════════════════════════════════════════════════════════════════════
ANNA DIAMONDS — impianto grafico ricalcato sul riferimento inviato dal
committente (maison de joaillerie): fondo #F4F0ED, blocchi bordeaux
#4A1A1D, tessere prodotto su fondo greige, etichette maiuscole spaziate,
richiami testuali con la freccia. Caratteri in locale: nessuna chiamata
esterna, nessun cookie.
═══════════════════════════════════════════════════════════════════════ */
/* ── 1 · Caratteri ───────────────────────────────────────────────────── */
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-300.woff2")format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-300-italic.woff2")format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-300.woff2")format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Mono";src:url("../fonts/ibm-plex-mono-400-latin.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* ── 2 · Colori e misure — campionati dal riferimento ────────────────── */
:root{
--fondo:#F4F0ED; /* fondo pagina */
--fondo-2:#EFEAE5; /* fascia alternata */
--tessera:#EAE4DD; /* riquadro sotto la fotografia */
--bordeaux:#4A1A1D; /* blocchi pieni */
--bordeaux-scuro:#3E1417;
--testo:#2A2320;
--testo-tenue:#6E625C;
--richiamo:#6B4F42; /* «explore →» */
--fregio:#8A5A63; /* il fregio sopra il marchio */
--chiaro:#F0E7E3; /* testo sul bordeaux */
--chiaro-tenue:#CDB9B5;
--bordo:rgba(42,35,32,.14);
--bordo-chiaro:rgba(240,231,227,.28);
--titolo:"Cormorant",Garamond,"Times New Roman",serif;
--corpo:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--dati:"Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
--misura:min(1360px,100% - clamp(2.5rem,7vw,7rem));
--p1:.5rem; --p2:1rem; --p3:1.5rem; --p4:2rem; --p5:3rem; --p6:4.5rem;
--sezione:clamp(3.5rem,6.5vw,6rem);
/* compatibilita con i nomi usati nelle altre pagine */
--colore-fondo:var(--fondo); --colore-fondo-alt:var(--fondo-2);
--colore-fondo-scuro:var(--bordeaux); --colore-testo:var(--testo);
--colore-testo-tenue:var(--testo-tenue); --colore-testo-chiaro:var(--chiaro);
--colore-accento:var(--bordeaux); --colore-oro:var(--richiamo);
--colore-bordo:var(--bordo); --colore-bordo-tenue:var(--bordo);
}
/* ── 3 · Fondamenta ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--fondo);color:var(--testo);
font-family:var(--corpo);font-weight:300;font-size:clamp(.95rem,.35vw + .87rem,1.0625rem);
line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titolo);font-weight:300;margin:0;line-height:1.1;letter-spacing:-.005em;overflow-wrap:break-word}
h1{font-size:clamp(1.9rem,5.2vw,4.25rem)}
h2{font-size:clamp(1.65rem,3.4vw,3rem)}
h3{font-size:clamp(1.25rem,1.6vw,1.6rem)}
p{margin:0 0 var(--p2)}
p:last-child{margin-bottom:0}
::selection{background:var(--bordeaux);color:var(--chiaro)}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.salta{position:absolute;left:-9999px}
.salta:focus{left:var(--p3);top:var(--p3);z-index:99;background:var(--bordeaux);color:var(--chiaro);padding:var(--p2) var(--p3)}
.misura{width:var(--misura);margin-inline:auto}
.dato{font-family:var(--dati);font-size:.78em;letter-spacing:.02em}
/* etichetta maiuscola spaziata — ricorre ovunque nel riferimento */
.occhiello,.etichetta{
font-family:var(--corpo);font-weight:400;font-size:.6875rem;
text-transform:uppercase;letter-spacing:.22em;color:var(--testo-tenue);
margin:0 0 var(--p3);
}
/* ── 4 · Richiami testuali con la freccia ───────────────────────────── */
.bottone,.richiamo{
display:inline-flex;align-items:center;gap:.7em;
font-family:var(--corpo);font-weight:400;font-size:.75rem;
text-transform:uppercase;letter-spacing:.19em;text-decoration:none;
color:var(--testo);padding-bottom:.55rem;position:relative;
}
.bottone::before,.richiamo::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:currentColor;opacity:.55;transform-origin:left;
transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.bottone::after,.richiamo::after{
content:"\2192";font-size:1.05em;line-height:1;
transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.bottone:hover::after,.richiamo:hover::after{transform:translateX(.4em)}
.bottone:hover::before,.richiamo:hover::before{transform:scaleX(.94)}
.bottone--secondario{color:var(--richiamo)}
.azioni{display:flex;flex-wrap:wrap;gap:var(--p3) var(--p5);margin-top:var(--p4)}
/* ── 5 · Testa ──────────────────────────────────────────────────────── */
.filetto{display:none}
.nav{
position:sticky;top:0;z-index:40;background:var(--fondo);
border-bottom:1px solid var(--bordo);
}
.nav__interno{
width:var(--misura);margin-inline:auto;
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:var(--p4);min-height:96px;
}
.marchio{
display:block;text-decoration:none;text-align:center;line-height:1;
font-family:var(--titolo);font-weight:400;font-size:1.5rem;
text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;color:var(--testo);
padding-top:1.6rem;position:relative;
}
.marchio::before{ /* il fregio sopra il marchio */
content:"";position:absolute;top:0;left:50%;translate:-50% 0;
width:16px;height:16px;background:var(--fregio);
clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.marchio span{
display:block;margin-top:.6rem;
font-family:var(--corpo);font-weight:400;font-size:.5625rem;
text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;color:var(--testo-tenue);
}
.nav__voci{
list-style:none;margin:0;padding:0;display:flex;justify-content:center;
gap:clamp(1.1rem,2.4vw,2.6rem);
}
.nav__voci a{
text-decoration:none;font-size:.72rem;font-weight:400;
text-transform:uppercase;letter-spacing:.15em;color:var(--testo);
padding:.4rem 0;position:relative;white-space:nowrap;
}
.nav__voci a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:right;
transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.nav__voci a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__coda{
display:flex;align-items:center;gap:var(--p3);
font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;
}
.nav__coda a{text-decoration:none;display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.nav__apri{
display:none;background:none;border:0;padding:.6rem 0;color:var(--testo);
font-family:var(--corpo);font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;
}
/* ── 6 · Apertura a tutta immagine ──────────────────────────────────── */
.apertura{
position:relative;isolation:isolate;background:var(--fondo);
min-height:clamp(460px,64vh,660px);display:flex;align-items:center;
overflow:hidden;
}
.apertura__foto{position:absolute;inset:0}
.apertura::after{ /* velo a sinistra: il testo resta leggibile sulla foto */
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(244,240,237,.95) 0%,rgba(244,240,237,.90) 20%,rgba(244,240,237,.62) 33%,rgba(244,240,237,.22) 45%,rgba(244,240,237,0) 60%);
}
.apertura__testo{position:relative;z-index:2;width:var(--misura);margin-inline:auto;padding:var(--p5) 0}
.apertura__testo>*{max-width:min(32ch,46%)}
.apertura h1{margin-bottom:var(--p3)}
.apertura .guida{color:var(--testo-tenue);font-size:1rem;max-width:min(34ch,44%)}
@media (max-width:900px){
.apertura{min-height:0;display:block}
.apertura__foto{position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
.apertura::after{display:none}
.apertura__testo{padding:var(--p5) 0}
.apertura__testo>*,.apertura .guida{max-width:none}
}
/* ── 7 · Fasce e testate di sezione ─────────────────────────────────── */
.fascia{width:var(--misura);margin-inline:auto;padding-block:var(--sezione)}
.fascia-alt{background:var(--fondo-2)}
.testata{
display:flex;align-items:baseline;justify-content:space-between;
gap:var(--p4);padding-bottom:var(--p4);margin-bottom:var(--p4);
}
.testata h2{
font-family:var(--titolo);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);
text-transform:uppercase;letter-spacing:.19em;
}
.testata a{
text-decoration:none;font-size:.7rem;text-transform:uppercase;
letter-spacing:.17em;color:var(--richiamo);white-space:nowrap;
}
.testata a:hover{color:var(--testo)}
.guida{color:var(--testo-tenue);max-width:56ch}
/* ── 8 · Griglia prodotti — 4 per riga, 2 da cellulare ──────────────── */
.griglia,.categorie,.mosaico{list-style:none;margin:0;padding:0;display:grid;gap:var(--p4) var(--p3)}
.griglia{grid-template-columns:repeat(4,1fr)}
.categorie{grid-template-columns:repeat(3,1fr)}
@media (max-width:1040px){.griglia{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
.griglia,.categorie{grid-template-columns:repeat(2,1fr);gap:var(--p3) var(--p2)}
}
.pezzo{position:relative}
.pezzo__telaio,.telaio{
display:block;background:var(--tessera);aspect-ratio:5/4;overflow:hidden;
}
.pezzo__telaio img,.telaio img{
width:100%;height:100%;object-fit:contain;padding:13%;
transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.pezzo:hover .pezzo__telaio img,.categorie a:hover .telaio img{transform:scale(1.05)}
.pezzo__corpo{padding-top:var(--p2)}
.pezzo__nome{
font-family:var(--corpo);font-weight:400;font-size:.75rem;
text-transform:uppercase;letter-spacing:.13em;line-height:1.5;margin:0 0 .45rem;
}
.pezzo__nome a{text-decoration:none}
.pezzo__nome a::after{content:"";position:absolute;inset:0} /* tutta la scheda e cliccabile */
.pezzo__prezzo{
font-family:var(--corpo);font-weight:400;font-size:.75rem;
letter-spacing:.06em;color:var(--testo);margin:0 0 .35rem;
}
.pezzo__meta{
font-size:.66rem;text-transform:uppercase;letter-spacing:.17em;
color:var(--richiamo);margin:0;display:flex;align-items:center;gap:.5em;
}
.pezzo__meta::after{content:"\2192";transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pezzo:hover .pezzo__meta::after{transform:translateX(.35em)}
.venduto{
position:absolute;top:var(--p2);left:var(--p2);z-index:2;
background:var(--bordeaux);color:var(--chiaro);
font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;padding:.35rem .7rem;
}
.pezzo[data-stato="sold"] .pezzo__telaio img{opacity:.55}
.categorie a{display:block;text-decoration:none}
.categorie a>span:last-child{
display:flex;align-items:center;gap:.5em;padding-top:var(--p2);
font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
}
.categorie a>span:last-child::after{content:"\2192";color:var(--richiamo);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.categorie a:hover>span:last-child::after{transform:translateX(.35em)}
/* ── 9 · Blocco bordeaux affiancato alla fotografia ─────────────────── */
.fascia-bordeaux{display:grid;grid-template-columns:38% 1fr;align-items:stretch}
.fascia-bordeaux--rovescia{grid-template-columns:1fr 44%}
.fascia-bordeaux__testo{
background:var(--bordeaux);color:var(--chiaro);
padding:clamp(2.5rem,4.5vw,4.5rem) clamp(1.75rem,3.5vw,3.5rem);
display:flex;flex-direction:column;justify-content:center;
}
.fascia-bordeaux__testo h2{color:var(--chiaro);margin-bottom:var(--p3)}
.fascia-bordeaux__testo p{color:var(--chiaro-tenue);font-size:.9375rem;max-width:40ch}
.fascia-bordeaux__testo .occhiello{color:var(--chiaro-tenue);opacity:.85}
.fascia-bordeaux__testo .bottone{color:var(--chiaro);margin-top:var(--p3)}
.fascia-bordeaux__testo .elenco{color:var(--chiaro-tenue)}
.fascia-bordeaux__testo .elenco li{border-color:var(--bordo-chiaro)}
.fascia-bordeaux--centro .fascia-bordeaux__testo{text-align:center;align-items:center}
.fascia-bordeaux--centro p{max-width:44ch}
.fascia-bordeaux--centro h2::before{ /* fregio sopra il titolo */
content:"";display:block;width:18px;height:18px;margin:0 auto var(--p3);
background:var(--chiaro-tenue);
clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.fascia-bordeaux__foto{position:relative;min-height:clamp(300px,34vw,480px);background:var(--fondo-2);overflow:hidden}
.fascia-bordeaux__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
.fascia-bordeaux,.fascia-bordeaux--rovescia{grid-template-columns:1fr}
.fascia-bordeaux--rovescia .fascia-bordeaux__foto{order:-1}
.fascia-bordeaux__foto{min-height:0;aspect-ratio:4/3}
}
/* ── 10 · Elenchi, domande, coppie ──────────────────────────────────── */
.elenco{list-style:none;margin:0;padding:0;color:var(--testo-tenue)}
.elenco li{padding:var(--p2) 0;border-bottom:1px solid var(--bordo);font-size:.9375rem}
.elenco li:last-child{border-bottom:0}
.faq{margin:0}
.faq>div{border-top:1px solid var(--bordo);padding:var(--p3) 0}
.faq>div:last-child{border-bottom:1px solid var(--bordo)}
.faq dt{font-family:var(--titolo);font-size:1.2rem;font-weight:400;margin-bottom:.4rem}
.faq dd{margin:0;color:var(--testo-tenue);font-size:.9375rem;max-width:62ch}
.coppie{list-style:none;margin:0;padding:0;display:grid;gap:var(--p3);grid-template-columns:repeat(3,1fr)}
.coppia figure{margin:0}
.coppia__due{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.coppia__due>div{
aspect-ratio:1;display:grid;place-items:center;background:var(--tessera);
font-size:.62rem;text-transform:uppercase;letter-spacing:.15em;color:var(--testo-tenue);
}
.coppia__due>div[data-esito="no"]{background:#DED6CE;color:#9C8F86}
.coppia figcaption{
padding-top:.65rem;font-size:.66rem;text-transform:uppercase;
letter-spacing:.17em;color:var(--richiamo);
}
@media (max-width:700px){.coppie{grid-template-columns:1fr}}
/* ── 11 · La lente sul punzone — la firma del sito ──────────────────── */
.lente-blocco{background:var(--tessera);padding:var(--p4)}
.lente-scena{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--fondo-2)}
.lente-scena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lente-legenda{
padding-top:var(--p2);font-size:.7rem;text-transform:uppercase;
letter-spacing:.15em;color:var(--richiamo);min-height:1.6em;
}
.lettore{margin-top:var(--p3)}
.campo label{
display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.19em;
color:var(--testo-tenue);margin-bottom:.5rem;
}
.campo input,.campo select,.campo textarea{
width:100%;background:transparent;border:0;border-bottom:1px solid var(--bordo);
padding:.6rem 0;font-family:var(--dati);font-size:1.05rem;color:var(--testo);
}
.campo input:focus{outline:0;border-bottom-color:var(--bordeaux)}
.scorciatoie{list-style:none;margin:var(--p3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.scorciatoie button{
background:transparent;border:1px solid var(--bordo);padding:.45rem .9rem;cursor:pointer;
font-family:var(--dati);font-size:.8rem;color:var(--testo);transition:all .3s ease;
}
.scorciatoie button:hover,.scorciatoie button[aria-pressed="true"]{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--chiaro)}
.esito-punzone{margin-top:var(--p3);font-size:.9375rem;color:var(--testo-tenue)}
/* ── 12 · Filtro del catalogo ───────────────────────────────────────── */
.filtro{
list-style:none;margin:0 0 var(--p4);padding:0 0 var(--p3);
display:flex;flex-wrap:wrap;gap:var(--p1) var(--p4);border-bottom:1px solid var(--bordo);
}
.filtro button{
background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--testo-tenue);
font-family:var(--corpo);font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;
position:relative;transition:color .3s ease;
}
.filtro button::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.filtro button[aria-pressed="true"]{color:var(--testo)}
.filtro button[aria-pressed="true"]::after,.filtro button:hover::after{transform:scaleX(1)}
.filtro .dato{color:var(--richiamo);margin-left:.35em}
.conteggio{font-size:.7rem;text-transform:uppercase;letter-spacing:.17em;color:var(--testo-tenue)}
/* ── 13 · Chiusura ──────────────────────────────────────────────────── */
.riga-cta{background:var(--bordeaux);color:var(--chiaro);padding-block:var(--sezione);text-align:center}
.riga-cta h2{color:var(--chiaro);margin-bottom:var(--p2)}
.riga-cta p{color:var(--chiaro-tenue)}
.riga-cta .azioni{justify-content:center}
.riga-cta .bottone{color:var(--chiaro)}
.riga-cta .bottone--secondario{color:var(--chiaro-tenue)}
/* ── 14 · Piede a cinque colonne ────────────────────────────────────── */
.pie{background:var(--fondo);border-top:1px solid var(--bordo);padding-block:var(--sezione) var(--p4)}
.pie__interno{
width:var(--misura);margin-inline:auto;display:grid;gap:var(--p5) var(--p4);
grid-template-columns:1.5fr repeat(4,1fr);
}
.pie .marchio{text-align:left;font-size:1.3rem;margin:0 0 var(--p2)}
.pie .marchio::before{left:0;translate:0 0}
.pie .marchio span{text-align:left}
.pie p{color:var(--testo-tenue);font-size:.85rem;max-width:32ch}
.pie h4{
font-family:var(--corpo);font-weight:400;font-size:.68rem;text-transform:uppercase;
letter-spacing:.19em;color:var(--testo);margin:0 0 var(--p3);
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pie a{text-decoration:none;color:var(--testo-tenue);font-size:.85rem;transition:color .3s ease}
.pie a:hover{color:var(--testo)}
.pie__coda{
width:var(--misura);margin:var(--p5) auto 0;padding-top:var(--p3);
border-top:1px solid var(--bordo);display:flex;flex-wrap:wrap;gap:var(--p2) var(--p4);
justify-content:space-between;font-size:.68rem;text-transform:uppercase;
letter-spacing:.15em;color:var(--testo-tenue);
}
.avviso-punzoni{
max-width:none;width:var(--misura);margin:var(--p4) auto 0;font-size:.8rem;color:var(--testo-tenue);
border-left:2px solid var(--richiamo);padding-left:var(--p2);
}
@media (max-width:960px){.pie__interno{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pie__interno{grid-template-columns:1fr}}
/* ── 15 · Banner cookie, una riga sola ──────────────────────────────── */
.cookie{
position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bordeaux);color:var(--chiaro);
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:var(--p3);padding:.85rem var(--p3);font-size:.8rem;
}
.cookie a{color:var(--chiaro)}
.cookie button{
background:none;border:1px solid var(--bordo-chiaro);color:var(--chiaro);cursor:pointer;
padding:.4rem 1.1rem;font-family:var(--corpo);font-size:.68rem;
text-transform:uppercase;letter-spacing:.15em;
}
.cookie button:hover{background:var(--chiaro);color:var(--bordeaux)}
/* ── 16 · Note di cantiere (visibili solo a noi) ────────────────────── */
.nota{
font-size:.78rem;color:var(--richiamo);border-left:2px solid var(--richiamo);
padding-left:var(--p2);margin-top:var(--p3);
}
/* ── 17 · Movimento — comparsa progressiva ──────────────────────────── */
.entra{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.entra.visibile{opacity:1;transform:none}
.sfalsa>*{opacity:0;transform:translateY(16px)}
.sfalsa.visibile>*{
opacity:1;transform:none;
transition:opacity .8s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 70ms),
transform .8s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 70ms);
}
@media (prefers-reduced-motion:reduce){
.entra,.sfalsa>*{opacity:1!important;transform:none!important;transition:none!important}
}
/* ── 18 · Pagina di un pezzo ────────────────────────────────────────── */
.scheda{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--p6)}
.scheda__foto{background:var(--tessera)}
.scheda__foto img{width:100%;aspect-ratio:1;object-fit:contain;padding:10%}
.scheda__dati{list-style:none;margin:var(--p4) 0 0;padding:0}
.scheda__dati li{display:flex;justify-content:space-between;gap:var(--p3);padding:.75rem 0;border-bottom:1px solid var(--bordo);font-size:.875rem}
.scheda__dati b{font-weight:400;color:var(--testo-tenue);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem}
.scheda__prezzo{font-family:var(--titolo);font-size:2rem;margin:var(--p2) 0 0}
@media (max-width:860px){.scheda{grid-template-columns:1fr;gap:var(--p4)}}
/* ── 19 · Impianto a due colonne, riusato dalle pagine interne ──────── */
.banco{display:grid;grid-template-columns:var(--sx,44%) 1fr;gap:var(--p6);align-items:start;
width:var(--misura);margin-inline:auto;padding-block:var(--sezione)}
@media (max-width:860px){.banco{grid-template-columns:1fr;gap:var(--p4)}}
/* ── 20 · Da cellulare: il menu ─────────────────────────────────────── */
@media (max-width:1040px){
.nav__interno{grid-template-columns:1fr auto;min-height:76px}
.nav__apri{display:block;order:2}
.nav__coda{display:none}
.nav__voci{
order:3;grid-column:1/-1;display:none;flex-direction:column;align-items:flex-start;
gap:var(--p2);padding:var(--p3) 0 var(--p4);border-top:1px solid var(--bordo);
}
.nav__voci.aperto{display:flex}
.marchio{text-align:left;font-size:1.15rem}
.marchio::before{left:0;translate:0 0;width:13px;height:13px}
.marchio span{text-align:left;font-size:.5rem}
}
/* ── 21 · Le fotografie sono scontornate su bianco: il bianco si fonde ──
con il fondo caldo e il gioiello resta a galleggiare, come nel riferimento. */
.pezzo__telaio img,.telaio img,.scheda__foto img{mix-blend-mode:multiply}
.apertura__foto{display:block}
.apertura__foto img{width:100%;height:100%;object-fit:cover;object-position:center}
/* ── 22 · Le pagine interne, nello stesso linguaggio ─────────────────── */
.banco__lato{min-width:0}
.banco--esce{}
.stretta{max-width:62ch}
.tenue{color:var(--testo-tenue)}
.briciole{
width:var(--misura);margin-inline:auto;padding-top:var(--p4);
font-size:.66rem;text-transform:uppercase;letter-spacing:.17em;color:var(--testo-tenue);
}
.briciole a{text-decoration:none}
.briciole a:hover{color:var(--testo)}
.registro{font-family:var(--dati);font-size:.72rem;color:var(--testo-tenue);margin-top:var(--p4)}
/* elenco di dati, letto come un documento */
.documento{margin:0;border-top:1px solid var(--bordo)}
.documento div{
display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;gap:var(--p3);
padding-block:var(--p2);border-bottom:1px solid var(--bordo);
}
.documento dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.17em;color:var(--testo-tenue)}
.documento dd{margin:0;font-size:.9375rem}
@media (max-width:560px){.documento div{grid-template-columns:1fr;gap:.25rem}}
.numeri{display:grid;gap:var(--p4);margin:0}
.numeri div{border-top:1px solid var(--bordo);padding-top:var(--p2)}
.numeri dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.19em;color:var(--testo-tenue);margin-bottom:.4rem}
.numeri dd{margin:0;max-width:50ch;font-size:.9375rem}
.passaggi{list-style:none;padding:0;margin:0;counter-reset:p;display:grid;gap:var(--p4)}
.passaggi li{counter-increment:p;display:grid;grid-template-columns:2.6rem 1fr;gap:var(--p3)}
.passaggi li::before{
content:counter(p,decimal-leading-zero);font-family:var(--dati);
font-size:.75rem;color:var(--richiamo);padding-top:.3rem;
}
.passaggi p{margin:0}
.griglia--tre{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.griglia--tre{grid-template-columns:repeat(3,1fr)}}
/* fascia scura: stesso bordeaux dei blocchi pieni */
.fascia-scura{background:var(--bordeaux);color:var(--chiaro)}
.fascia-scura h1,.fascia-scura h2,.fascia-scura h3{color:var(--chiaro)}
.fascia-scura p,.fascia-scura .guida{color:var(--chiaro-tenue)}
.fascia-scura .occhiello{color:var(--chiaro-tenue);opacity:.85}
.fascia-scura .bottone{color:var(--chiaro)}
.fascia-scura .documento,.fascia-scura .documento div{border-color:var(--bordo-chiaro)}
.fascia-scura .campo input,.fascia-scura .campo textarea,.fascia-scura .campo select{
color:var(--chiaro);border-bottom-color:var(--bordo-chiaro);
}
.fascia-scura .campo label{color:var(--chiaro-tenue)}
/* moduli */
.modulo{display:grid;gap:var(--p4);max-width:36rem}
.campo{display:grid;gap:.5rem}
.campo small{font-size:.8125rem;color:var(--testo-tenue)}
.campo textarea{min-height:8rem;resize:vertical;font-family:var(--corpo);font-size:.9375rem}
.campo select{font-family:var(--corpo);font-size:.9375rem}
.modulo .bottone{justify-self:start}
/* pagina «vendi il tuo gioiello» */
.caricamento{border:1px dashed var(--bordo);padding:var(--p5);text-align:center;background:var(--tessera)}
.anteprime{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--p1);margin-top:var(--p2)}
.anteprime img{aspect-ratio:1;object-fit:cover;background:var(--tessera)}
details.dettagli{border-top:1px solid var(--bordo);padding-top:var(--p3);margin-top:var(--p3)}
details.dettagli summary{
cursor:pointer;font-size:.66rem;text-transform:uppercase;
letter-spacing:.19em;color:var(--testo-tenue);
}
.esito{padding:var(--p3);background:var(--tessera);border-left:2px solid var(--bordeaux)}
/* ═══════════════════════════════════════════════════════════════════════
23 · IL VELLUTO — il bordeaux non e piu una tinta piatta
Tre strati sovrapposti: la luce che cade dall'alto a sinistra, l'ombra
che si raccoglie in basso a destra, e una grana finissima che fa il pelo
del tessuto. Sopra scorre un riflesso lento, come quando si gira un
cofanetto verso la finestra.
═══════════════════════════════════════════════════════════════════════ */
:root{
--bordeaux:#59122A; /* il colore pieno, piu vivo e meno bruno */
--bordeaux-luce:#7C1E3A; /* dove batte la luce */
--bordeaux-ombra:#33081A; /* la piega in ombra */
--bordeaux-scuro:#33081A;
--chiaro:#FBF3F1;
--chiaro-tenue:#DFC3C8;
}
.velluto{
position:relative;isolation:isolate;overflow:hidden;
background:
radial-gradient(130% 100% at 16% 4%, rgba(255,208,220,.20), rgba(255,208,220,0) 58%),
radial-gradient(110% 90% at 92% 96%, rgba(0,0,0,.42), rgba(0,0,0,0) 62%),
linear-gradient(152deg, var(--bordeaux-luce) 0%, var(--bordeaux) 46%, var(--bordeaux-ombra) 100%);
}
/* la grana: velluto, non plastica */
.velluto::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
opacity:.34;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* il riflesso che scorre: lento, largo, quasi impercettibile */
.velluto::after{
content:"";position:absolute;top:-60%;left:0;width:46%;height:220%;z-index:0;
pointer-events:none;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.045) 38%,
rgba(255,236,240,.10) 50%, rgba(255,255,255,.045) 62%, rgba(255,255,255,0) 100%);
transform:rotate(9deg) translate3d(-160%,0,0);
animation:velo 17s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes velo{
0% {transform:rotate(9deg) translate3d(-160%,0,0)}
55% {transform:rotate(9deg) translate3d(340%,0,0)}
100% {transform:rotate(9deg) translate3d(340%,0,0)}
}
.velluto>*{position:relative;z-index:1}
/* le fasce e la chiusura diventano velluto */
.fascia-bordeaux__testo,.riga-cta,.fascia-scura{
background:
radial-gradient(130% 100% at 16% 4%, rgba(255,208,220,.20), rgba(255,208,220,0) 58%),
radial-gradient(110% 90% at 92% 96%, rgba(0,0,0,.42), rgba(0,0,0,0) 62%),
linear-gradient(152deg, var(--bordeaux-luce) 0%, var(--bordeaux) 46%, var(--bordeaux-ombra) 100%);
}
.fascia-bordeaux__testo,.riga-cta,.fascia-scura{position:relative;isolation:isolate;overflow:hidden}
/* senza questo il riflesso esce dal blocco e da telefono la pagina scorre di lato */
.fascia-bordeaux__testo::before,.riga-cta::before,.fascia-scura::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
opacity:.34;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.fascia-bordeaux__testo::after,.riga-cta::after,.fascia-scura::after{
content:"";position:absolute;top:-60%;left:0;width:46%;height:220%;z-index:0;
pointer-events:none;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.045) 38%,
rgba(255,236,240,.10) 50%, rgba(255,255,255,.045) 62%, rgba(255,255,255,0) 100%);
transform:rotate(9deg) translate3d(-160%,0,0);
animation:velo 17s cubic-bezier(.45,0,.55,1) infinite;
}
.fascia-bordeaux__testo>*,.riga-cta>*,.fascia-scura>*{position:relative;z-index:1}
.riga-cta{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(0,0,0,.25)}
/* ═══════════════════════════════════════════════════════════════════════
24 · LA LUCE SULLE SCRITTE — un riflesso attraversa il titolo, come su
una faccetta. Passa una volta ogni dieci secondi: si nota, non disturba.
═══════════════════════════════════════════════════════════════════════ */
.brilla{color:var(--brilla-base,var(--testo))}
/* il riflesso si accende solo dove il ritaglio sul testo funziona davvero:
altrove resta un titolo normale, mai un titolo invisibile */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
/* due strati: sotto il colore pieno, che non manca mai da nessuna lettera;
sopra la lama di luce, che passa e se ne va. Un solo strato lasciava
mezzo titolo senza fondo, e quindi invisibile. */
.brilla{
background-image:
linear-gradient(104deg,
rgba(255,255,255,0) 41%, var(--brilla-luce,#FFFFFF) 47%,
var(--brilla-luce,#FFFFFF) 52%, rgba(255,255,255,0) 58%),
linear-gradient(var(--brilla-base,var(--testo)),var(--brilla-base,var(--testo)));
background-size:330% 100%, 100% 100%;
background-position:125% 0, 0 0;
background-repeat:no-repeat, no-repeat;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:brilla 10s ease-in-out infinite;
}
}
@keyframes brilla{
0%, 62% {background-position:125% 0, 0 0}
86%,100% {background-position:-25% 0, 0 0}
}
.velluto .brilla,.fascia-bordeaux__testo .brilla,.riga-cta .brilla{
--brilla-base:var(--chiaro);--brilla-luce:#FFFFFF;
}
/* ═══════════════════════════════════════════════════════════════════════
25 · LE SCINTILLE — quattro punte, come il lampo di una faccetta.
Solo opacita e scala: non tolgono un fotogramma.
═══════════════════════════════════════════════════════════════════════ */
.scintille{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.scintilla{
position:absolute;width:var(--d,18px);height:var(--d,18px);
opacity:0;transform:scale(.2) rotate(0deg);
animation:scintilla var(--t,7s) ease-in-out infinite;animation-delay:var(--r,0s);
}
.scintilla::before,.scintilla::after{
content:"";position:absolute;inset:0;
background:var(--luce,rgba(255,255,255,.95));
clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
}
.scintilla::after{transform:rotate(45deg) scale(.62);opacity:.75}
@keyframes scintilla{
0%, 86%,100%{opacity:0;transform:scale(.2) rotate(0deg)}
91% {opacity:1;transform:scale(1) rotate(22deg)}
95% {opacity:.35;transform:scale(.7) rotate(38deg)}
}
@media (prefers-reduced-motion:reduce){
.velluto::after,.fascia-bordeaux__testo::after,.riga-cta::after,
.fascia-scura::after,.scintilla{animation:none}
.scintilla{opacity:0}
.brilla{animation:none;background:none;color:var(--brilla-base,var(--testo));
-webkit-text-fill-color:currentColor}
.velluto .brilla,.fascia-bordeaux__testo .brilla,.riga-cta .brilla{color:var(--chiaro)}
}
/* ═══════════════════════════════════════════════════════════════════════
26 · SEZIONI EDITORIALI — una fotografia grande, poche parole accanto.
Servono per i pezzi che il cliente vuole raccontare uno per uno.
═══════════════════════════════════════════════════════════════════════ */
.editoriale{
display:grid;grid-template-columns:repeat(2,1fr);align-items:center;
gap:clamp(2rem,5vw,5rem);width:var(--misura);margin-inline:auto;
padding-block:var(--sezione);
}
.editoriale--rovescia .editoriale__foto{order:2}
.editoriale__foto{position:relative;background:var(--tessera);overflow:hidden;aspect-ratio:4/5}
.editoriale__foto img,.editoriale__foto video{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.editoriale:hover .editoriale__foto img{transform:scale(1.04)}
.editoriale__testo h2{margin-bottom:var(--p3)}
.editoriale__testo .guida{margin-bottom:var(--p4)}
@media (max-width:860px){
.editoriale{grid-template-columns:1fr;gap:var(--p4)}
.editoriale--rovescia .editoriale__foto{order:0}
.editoriale__foto{aspect-ratio:4/3}
}
/* tre fotografie in fila, per un insieme */
.terzetto{
list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:var(--p3);
}
.terzetto figure{margin:0}
.terzetto .telaio{aspect-ratio:3/4}
.terzetto figcaption{
padding-top:var(--p2);font-size:.7rem;text-transform:uppercase;
letter-spacing:.17em;color:var(--testo-tenue);
}
@media (max-width:700px){.terzetto{grid-template-columns:1fr 1fr;gap:var(--p2)}
.terzetto li:last-child{display:none}}
/* ═══════════════════════════════════════════════════════════════════════
27 · APERTURA IN VIDEO — parte da sola, muta, in cerchio, senza comandi.
Se il video non c'e o non parte, resta la fotografia sotto.
═══════════════════════════════════════════════════════════════════════ */
.apertura__foto video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;display:block;
}
.audio{
position:absolute;right:var(--p3);bottom:var(--p3);z-index:3;
display:inline-flex;align-items:center;gap:.55em;cursor:pointer;
background:rgba(51,8,26,.72);color:var(--chiaro);border:0;
padding:.55rem 1rem;font-family:var(--corpo);font-size:.62rem;
text-transform:uppercase;letter-spacing:.17em;
backdrop-filter:blur(6px);transition:background .3s ease;
}
.audio:hover{background:rgba(51,8,26,.9)}
/* ── 28 · La doppia pagina: una fotografia larga, e sotto due colonne ──
Serve alle fotografie orizzontali, che ritagliate in verticale perdono
meta di quello che raccontano. */
.doppia{margin:0;background:var(--tessera);overflow:hidden}
.doppia img{width:100%;height:auto;display:block;transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.doppia:hover img{transform:scale(1.03)}
.doppia__coda{
display:grid;grid-template-columns:1fr 1fr;gap:var(--p5);
padding-top:var(--p4);align-items:start;
}
.doppia__coda h2{font-size:clamp(1.6rem,2.8vw,2.5rem)}
@media (max-width:760px){.doppia__coda{grid-template-columns:1fr;gap:var(--p3)}}
/* il riquadro che ospita un video verticale si allunga: con il taglio 4:5
di una fotografia si perderebbe un terzo dell'inquadratura */
.editoriale__foto:has(video){aspect-ratio:2/3}
@media (max-width:860px){.editoriale__foto:has(video){aspect-ratio:3/4}}
/* ── 29 · Il testo dell'apertura porta il bordeaux del sito ────────────
Misurato sul fondo vero della fotografia (#AF9E8E) sotto il velo:
il bordeaux pieno sta a 5,25:1, il sottotitolo cupo a 4,1:1. Il
bordeaux chiaro invece scendeva a 3,8:1 e non si legge: non si usa. */
.apertura h1{--brilla-base:var(--bordeaux);--brilla-luce:#8E2340}
.apertura .guida{color:#563040}
.apertura .occhiello{color:#7C3348}
.apertura .bottone{color:var(--bordeaux)}
.apertura .bottone--secondario{color:#7C3348}
.apertura .bottone::before{opacity:.42}
/* ── 30 · Due riquadri affiancati: due categorie in poco spazio ────────
La fotografia riempie il riquadro (non e scontornata su bianco come
quelle del catalogo), quindi niente fusione del bianco qui. */
.coppia-sezioni{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:var(--p4) var(--p3)}
.coppia-sezioni a{display:block;text-decoration:none}
.telaio-pieno{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--tessera)}
.telaio-pieno img{width:100%;height:100%;object-fit:cover;
transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.coppia-sezioni a:hover .telaio-pieno img{transform:scale(1.04)}
.coppia-sezioni h3{font-family:var(--titolo);font-weight:300;
font-size:clamp(1.3rem,2vw,1.9rem);margin:var(--p3) 0 .5rem;color:var(--bordeaux)}
.coppia-sezioni p{color:var(--testo-tenue);font-size:.9375rem;margin:0 0 .9rem;max-width:38ch}
@media (max-width:760px){.coppia-sezioni{grid-template-columns:1fr;gap:var(--p5)}}
/* ── 31 · Il fondo delle tessere: seta, non grigio piatto ──────────────
I pezzi del catalogo sono scontornati su bianco. Con la fusione del
bianco (multiply) il bianco sparisce dentro la seta e il gioiello
sembra appoggiato sulla stoffa. La chiazza di luce al centro serve a
staccare il pezzo dalla piega. */
.pezzo__telaio,.telaio,.scheda__foto{
background-color:var(--tessera);
background-image:
radial-gradient(58% 54% at 50% 44%, rgba(255,255,255,.74), rgba(255,255,255,0) 72%),
url("../img/fondo-seta.jpg?v=51");
background-size:auto, cover;
background-position:center, center;
background-repeat:no-repeat, no-repeat;
}
/* al passaggio la luce si allarga appena: il pezzo si alza dalla stoffa */
.pezzo__telaio,.telaio{transition:background-size .9s cubic-bezier(.22,1,.36,1)}
.pezzo:hover .pezzo__telaio,.categorie a:hover .telaio{background-size:auto, 112%}
/* ── 32 · Apertura col video ───────────────────────────────────────────
Il video e verticale: a tutta fascia se ne perderebbero due terzi.
Sta quindi a colonna sulla destra, nella sua forma, e il testo a
sinistra su fondo crema. Da telefono si impila, video sopra. */
.apertura--video{
display:grid;grid-template-columns:1fr min(39%,540px);
align-items:stretch;gap:0;
/* il video e 646x1280, quasi il doppio di alto: la colonna si stringe
e l'apertura si alza, sennò il ritaglio ne mangia meta */
min-height:clamp(560px,86vh,880px);background:var(--fondo);
}
.apertura--video::after{display:none} /* niente velo: il testo e su crema */
.apertura--video .apertura__testo{
align-self:center;width:auto;margin:0;
padding:var(--p5) clamp(1.5rem,4vw,4rem) var(--p5) max(1.5rem,calc((100vw - 1360px)/2 + 1.5rem));
}
.apertura--video .apertura__testo>*,
.apertura--video .apertura .guida,
.apertura--video .guida{max-width:34ch}
.apertura__film{position:relative;overflow:hidden;background:var(--tessera)}
.apertura__film video,.apertura__film img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
@media (max-width:900px){
.apertura--video{grid-template-columns:1fr;min-height:0}
.apertura__film{order:-1;aspect-ratio:4/5}
.apertura--video .apertura__testo{
padding:var(--p5) 0;width:var(--misura);margin-inline:auto;
}
.apertura--video .guida{max-width:none}
}
/* nell'apertura col video il titolo puo crescere: ha una colonna sua */
.apertura--video h1{font-size:clamp(2rem,5.6vw,5rem)}
.apertura--video .guida{font-size:1.0625rem}
/* ── 33 · Due video verticali affiancati, e i riquadri orizzontali ─────
Una fotografia orizzontale dentro un riquadro verticale perde i lati:
e quello che succedeva all'anello. Il riquadro segue la fotografia. */
.editoriale__foto--larga{aspect-ratio:3/2}
.editoriale__foto--larga img{object-fit:cover}
@media (max-width:860px){.editoriale__foto--larga{aspect-ratio:4/3}}
.coppia-film{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:var(--p4) var(--p3)}
.coppia-film li{margin:0}
.riquadro-film{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--tessera)}
.riquadro-film video,.riquadro-film img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.didascalia{
padding-top:var(--p2);margin:0;font-size:.7rem;text-transform:uppercase;
letter-spacing:.17em;color:var(--testo-tenue);
}
@media (max-width:700px){.coppia-film{gap:var(--p3) var(--p2)}}
/* ── 34 · Il video sfuma nel crema, niente stacco netto ────────────────
Una maschera sfuma il bordo sinistro del video fino a trasparente: sotto
c'e il fondo crema della sezione, quindi il filmato ci si scioglie dentro
invece di finire di taglio. Da telefono il video sta sopra il testo, e
allora a sfumare e il bordo di sotto. */
@media (min-width:901px){
.apertura__film{
-webkit-mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 6%, rgba(0,0,0,.72) 15%,
rgba(0,0,0,.95) 24%, #000 32%);
mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 6%, rgba(0,0,0,.72) 15%,
rgba(0,0,0,.95) 24%, #000 32%);
}
}
@media (max-width:900px){
.apertura__film{
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.6) 90%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.6) 90%,rgba(0,0,0,0) 100%);
}
}
/* ── 35 · Apertura a tutta fascia col filmato ──────────────────────────
Il video orizzontale riempie la fascia e il titolo ci sta sopra: sotto
il testo il velo crema arriva al 95%, quindi si legge qualunque cosa
passi nell'inquadratura. */
.apertura{min-height:clamp(460px,68vh,700px)}
.apertura__foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
/* Da telefono l'apertura resta un'apertura: il filmato riempie lo
schermo e il titolo ci sta sopra, in basso, come sul desktop. Prima
il video era una fascia e il testo veniva sotto: sembrava una
fotografia qualsiasi, non l'ingresso del sito. */
.apertura{
display:flex;align-items:flex-end;
height:82vh;min-height:520px;max-height:760px;
position:relative;overflow:hidden;
}
.apertura__foto{
position:absolute;inset:0;aspect-ratio:auto;height:100%;
background-position:center;background-size:cover;background-repeat:no-repeat;
}
.apertura__foto video,.apertura__foto img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* il velo sale dal basso: il titolo appoggia sul crema, la fotografia
resta pulita in alto */
.apertura::after{
display:block;z-index:1;
background:linear-gradient(0deg,
rgba(244,240,237,.97) 0%, rgba(244,240,237,.93) 22%,
rgba(244,240,237,.68) 38%, rgba(244,240,237,.22) 54%,
rgba(244,240,237,0) 70%);
}
.apertura__testo{
position:relative;z-index:2;width:var(--misura);margin-inline:auto;
padding-block:0 var(--p5);
}
.apertura__testo>*,.apertura .guida{max-width:none}
.apertura h1{font-size:clamp(2.1rem,10vw,3.2rem)}
.apertura .guida{max-width:30ch}
.apertura .azioni{gap:var(--p2) var(--p4);margin-top:var(--p3)}
}
@supports (height:82svh){@media (max-width:900px){.apertura{height:82svh}}}
/* ── 36 · Un passo solo per tutte le sezioni editoriali ────────────────
I riquadri verticali arrivavano a 960 px e le sezioni col filmato erano
alte il doppio di quelle con la fotografia orizzontale: si scendeva a
scatti. Un tetto all'altezza rimette tutte sullo stesso passo. */
.editoriale__foto{max-height:min(74vh,700px)}
.editoriale__foto:has(video){aspect-ratio:2/3;max-height:min(74vh,700px)}
.editoriale__foto--larga{aspect-ratio:3/2;max-height:min(74vh,700px)}
.telaio-pieno{max-height:min(70vh,660px)}
@media (max-width:860px){
.editoriale__foto,.editoriale__foto:has(video),
.editoriale__foto--larga,.telaio-pieno{max-height:none}
}
/* ═══════════════════════════════════════════════════════════════════════
37 · LA RIFINITURA — quello che separa un sito fatto bene da un sito bello
Filetti sottili, numeri d'archivio, un capolettera che si apre, e il
dettaglio che si scopre solo passandoci sopra.
═══════════════════════════════════════════════════════════════════════ */
/* ── Il filetto che si tira ─────────────────────────────────────────────
Sopra ogni etichetta di sezione compare una riga sottile che si allunga
da sola quando la sezione entra nello schermo. E il gesto che tiene
insieme tutto il sito: una riga che si apre, come un cassetto. */
.occhiello{position:relative;padding-top:var(--p3)}
.occhiello::before{
content:"";position:absolute;top:0;left:0;height:1px;width:clamp(48px,5vw,72px);
background:var(--richiamo);transform:scaleX(0);transform-origin:left;
transition:transform 1.1s cubic-bezier(.22,1,.36,1) .1s;
}
.entra.visibile .occhiello::before,
.visibile .occhiello::before,
.occhiello:where(.visibile)::before{transform:scaleX(1)}
.fascia-bordeaux__testo .occhiello::before,.riga-cta .occhiello::before{background:var(--chiaro-tenue)}
/* ── Il numero d'archivio ───────────────────────────────────────────────
Ogni sezione editoriale porta il suo numero, in mono, piccolo, in alto a
destra della colonna del testo. Da rivista, non da modulo. */
.editoriale__testo{position:relative;counter-increment:capitolo}
.editoriale__testo::before{
content:counter(capitolo,decimal-leading-zero);
position:absolute;top:-.4rem;right:0;
font-family:var(--dati);font-size:.72rem;letter-spacing:.1em;
color:var(--richiamo);opacity:.55;
}
main{counter-reset:capitolo}
@media (max-width:860px){.editoriale__testo::before{display:none}}
/* ── Il capolettera in corsivo ──────────────────────────────────────────
La prima riga di testo di ogni sezione editoriale prende un corsivo:
basta quello a far sentire la mano di qualcuno che ha scritto. */
/* il primo p della colonna e l'occhiello, non il testo: si aggancia
al paragrafo che segue il titolo, sennò la regola non tocca niente */
.editoriale__testo h2 + .guida,
.doppia__coda .guida:first-child{
font-family:var(--titolo);font-style:italic;font-weight:300;
font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--testo);
max-width:30ch;
}
/* ── Le testate di sezione: il filetto arriva fino al richiamo ──────────*/
.testata{
position:relative;align-items:end;
border-bottom:1px solid var(--bordo);
}
.testata::after{
content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
background:var(--testo);transform:scaleX(0);transform-origin:left;
transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}
.testata.visibile::after{transform:scaleX(1)}
.testata h2{padding-bottom:0}
/* ── Le tessere del catalogo ────────────────────────────────────────────
Un filetto sotto che si tira al passaggio, il numero del pezzo in mono,
e il prezzo che scivola su. */
.pezzo{padding-bottom:var(--p2)}
.pezzo::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--testo);transform:scaleX(0);transform-origin:left;
transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.pezzo:hover::after{transform:scaleX(1)}
.pezzo__telaio{position:relative}
.pezzo__telaio::after{
content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(42,35,32,0);
transition:box-shadow .6s ease;
}
.pezzo:hover .pezzo__telaio::after{box-shadow:inset 0 0 0 1px var(--bordo)}
.pezzo__corpo{display:grid;gap:.35rem}
.pezzo__prezzo{
font-family:var(--dati);font-size:.78rem;letter-spacing:.02em;
color:var(--testo-tenue);transition:color .4s ease;
}
.pezzo:hover .pezzo__prezzo{color:var(--bordeaux)}
.pezzo__meta{opacity:0;transform:translateY(4px);
transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.pezzo:hover .pezzo__meta{opacity:1;transform:none}
@media (hover:none){.pezzo__meta{opacity:1;transform:none}}
/* ── Le categorie: il nome scivola, il filetto lo accompagna ────────────*/
.categorie a>span:last-child{position:relative;padding-bottom:.7rem}
.categorie a>span:last-child::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--bordo);
}
.categorie a:hover>span:last-child::before{background:var(--testo)}
/* ── I richiami: la freccia esce da dentro ──────────────────────────────*/
.bottone,.richiamo{overflow:hidden}
.bottone::after,.richiamo::after{will-change:transform}
/* ── Il fregio che divide, al posto del nulla ───────────────────────────
Fra due sezioni chiare uguali ci vuole un respiro, non un salto. */
.diamante{
display:block;width:100%;text-align:center;padding-block:var(--p5);
line-height:0;
}
.diamante span{
display:inline-block;width:9px;height:9px;background:var(--richiamo);opacity:.5;
clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
/* ── La lente sul punzone: la sezione piu debole diventa la piu bella ───*/
.lente-blocco{
background:linear-gradient(168deg,var(--fondo) 0%,var(--tessera) 100%);
border:1px solid var(--bordo);padding:clamp(1.5rem,2.5vw,2.25rem);
}
.lente-scena{
aspect-ratio:16/9;background:transparent;
border-bottom:1px solid var(--bordo);
}
.lente-legenda{
padding-top:var(--p3);font-family:var(--titolo);font-style:italic;
font-size:1.05rem;line-height:1.5;letter-spacing:0;text-transform:none;
color:var(--testo);min-height:3.2em;
}
.lettore{margin-top:var(--p4);padding-top:var(--p3);border-top:1px solid var(--bordo)}
.campo input{font-size:1.5rem;letter-spacing:.08em}
.scorciatoie{gap:0;border:1px solid var(--bordo);border-radius:0}
.scorciatoie li{flex:1}
.scorciatoie li+li button{border-left:1px solid var(--bordo)}
.scorciatoie button{
width:100%;border:0;padding:.7rem .4rem;background:transparent;
font-size:.82rem;letter-spacing:.06em;
}
.esito-punzone{font-family:var(--titolo);font-size:1.1rem;font-style:italic}
/* ── Le domande: si aprono, non stanno tutte spalancate ─────────────────*/
.faq>div{transition:background .4s ease}
.faq>div:hover{background:rgba(255,255,255,.5)}
.faq dt{
display:flex;align-items:baseline;gap:.9rem;
}
.faq dt::before{
content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.5em;
background:var(--richiamo);opacity:.6;
clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.faq dd{padding-left:calc(5px + .9rem)}
/* ── Il piede: un filetto sopra il marchio, e piu aria ──────────────────*/
.pie__interno{padding-top:var(--p2)}
.pie h4{position:relative;padding-top:var(--p2)}
.pie h4::before{
content:"";position:absolute;top:0;left:0;width:22px;height:1px;
background:var(--richiamo);opacity:.6;
}
/* ── I titoli grandi: piu stretti, come si stampa ───────────────────────*/
h1,.editoriale__testo h2,.doppia__coda h2,.riga-cta h2,.fascia-bordeaux__testo h2{
letter-spacing:-.018em;
}
h1{line-height:1.04}
.editoriale__testo h2,.doppia__coda h2{line-height:1.08}
/* ── Selezione del testo e barra di scorrimento, gia che ci siamo ───────*/
html{scrollbar-color:var(--richiamo) var(--fondo-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--fondo-2)}
::-webkit-scrollbar-thumb{background:var(--bordo);border:3px solid var(--fondo-2)}
::-webkit-scrollbar-thumb:hover{background:var(--richiamo)}
/* ── 38 · Quello che e nascosto deve sparire davvero ───────────────────
Il banner dei cookie aveva display:flex, che batte l'attributo hidden:
il pulsante «Got it» salvava la scelta ma la striscia restava in fondo
allo schermo. Vale per tutto: se un elemento porta hidden, sparisce. */
[hidden]{display:none!important}
/* ── 39 · Lo sconto ────────────────────────────────────────────────────
Il prezzo di prima sbarrato, quello di adesso pieno, e di quanto e
sceso. Sobrio: e pur sempre una gioielleria, non un volantino. */
.pezzo__prezzo s,[data-pezzo-prezzo] s{
color:var(--testo-tenue);opacity:.75;text-decoration-thickness:1px;margin-right:.45em;
}
.sconto{
display:inline-block;margin-left:.6em;padding:.12em .5em;
background:var(--bordeaux);color:var(--chiaro);
font-family:var(--corpo);font-size:.62rem;font-weight:400;
letter-spacing:.12em;vertical-align:.12em;
}