/* ========================================================= Amaro Re Laurino — Landing page Derivato dai frame Figma: desktop 1728 × 15133 mobile 393 × 11333 ========================================================= */ /* ---------- Font brand ---------- DISPLAY — "kensington" arriva da Adobe Fonts (Typekit), caricato in con . Il kit fornisce i pesi 400 e 700, tondo e corsivo: nel Figma il display è a 500, che i browser risolvono su 400. Qui si usa 400. ⚠️ I kit Typekit sono vincolati ai domini: il dominio di produzione va aggiunto nelle impostazioni del kit su Adobe Fonts, altrimenti il font non viene servito. ETICHETTE — Gravesend Sans è proprietaria e non è nel kit. Colloca il file in /fonts e la regola qui sotto lo usa automaticamente; fino a quel momento vale il fallback Barlow Semi Condensed da Google Fonts. --------------------------------- */ /* ---------- Token ---------- */ :root{ /* colori */ --dark:#35312E; --dark-2:#35302B; --gold:#B9A061; --cream:#FFFAF1; --magenta:#E2004B; --black:#000; /* famiglie */ --ff-display:"kensington","Barlow Semi Condensed","Helvetica Neue",Arial,sans-serif; --ff-label:"gravesend-sans","Barlow Semi Condensed","Helvetica Neue",Arial,sans-serif; --ff-body:"Montserrat","Helvetica Neue",Arial,sans-serif; /* scala tipografica fluida: ancorata ai due frame Figma (393px → mobile, 1728px → desktop) */ --fs-display:clamp(70px, 53.81px + 4.12vw, 125px); /* 70 → 125 */ --fs-lead: clamp(26px, 21.29px + 1.199vw, 42px); /* 26 → 42 */ --fs-quote: clamp(21px, 18.35px + 0.674vw, 30px); /* 21 → 30 */ --fs-body: clamp(17px, 16.12px + 0.225vw, 20px); /* 17 → 20 */ --fs-label: clamp(16px, 14.82px + 0.300vw, 20px); /* 16 → 20 */ --fs-small: 14px; /* interlinee rilevate dal Figma */ --lh-display:0.856; --lh-lead:1.095; --lh-quote:1.133; --lh-body:1.3; --lh-small:1.214; /* spaziature verticali fluide */ --sp-1:clamp(8px, 0.7vw, 12px); --sp-2:clamp(14px, 1.4vw, 24px); --sp-3:clamp(22px, 2.3vw, 40px); --sp-4:clamp(32px, 3.5vw, 60px); --sp-5:clamp(46px, 5.2vw, 90px); --sp-6:clamp(60px, 8vw, 138px); --sp-7:clamp(76px, 11vw, 190px); /* griglia */ --gap:clamp(24px, 2.31vw, 40px); --container:1540px; /* controlli: bottoni ed etichette fra due filetti hanno la stessa altezza e lo stesso spessore di tratto, così si allineano fra loro */ --ctrl-h:36px; --ctrl-stroke:3px; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip} /* age gate come layer: finché non ha la classe "age-ok" (aggiunta dallo script in testa al se già confermato, o da js/age-gate-layer.js al clic su "Sì/Ja"), la pagina sotto il layer resta bloccata */ html:not(.age-ok){overflow-y:hidden} body{ margin:0; background:var(--dark); color:var(--gold); font-family:var(--ff-body); font-weight:300; font-size:var(--fs-body); line-height:var(--lh-body); overflow-x:clip; overflow-wrap:break-word; /* rete di sicurezza: una parola/etichetta più lunga del previsto va a capo invece di uscire dal container (tagliata da overflow-x:clip qui sopra) */ } img,picture,svg{display:block;max-width:100%} img{height:auto} ul{margin:0;padding:0;list-style:none} p{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} hr{border:0;margin:0} .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--cream);color:var(--dark);padding:.75em 1.25em; } .skip-link:focus{left:0} :focus-visible{outline:2px solid var(--magenta);outline-offset:3px} /* ---------- Layout ---------- */ .container{ width:min(89.12%,var(--container)); margin-inline:auto; } @media (max-width:767px){ .container{width:85.24%} /* 335 / 393 */ } /* colonne 480 / 480 / 500 con gap 40 su contenitore 1540, come nel Figma */ .grid-3{ display:grid; grid-template-columns:480fr 480fr 500fr; gap:var(--gap); } .col-1{grid-column:1} .col-2{grid-column:2} .col-3{grid-column:3} /* i blocchi introduttivi (42px) occupano due colonne, come nel Figma */ .grid-3 > .col-1:only-child{grid-column:1/3} @media (max-width:900px){ .grid-3{grid-template-columns:1fr} .col-1,.col-2,.col-3,.grid-3 > .col-1:only-child{grid-column:1} } .section{padding-block:var(--sp-6)} /* spazio ridotto fra la galleria fotografica (ultimo elemento di #leggenda) e "La ricetta": senza questi due override lo spazio totale è la somma di tre margini/padding pensati per sezioni normali, troppo per una galleria che ha già un suo margine inferiore */ #leggenda{padding-bottom:var(--sp-4)} /* padding-block: riduce sia il gap con #leggenda sopra (già var(--sp-4)) sia quello con #gusto sotto, insieme al padding-top di #gusto qui sotto */ #ricetta{padding-block:var(--sp-4)} #gusto{padding-top:var(--sp-4)} /* margine del titolo ridotto solo in questi due punti (non su .display in generale, riusato in tutte le sezioni): il gap con l'elemento successivo nasce dal margin-collapse fra questo e il margine superiore dell'elemento che segue, quindi va abbassato anche quello (.collage--ricetta, .botaniche) */ #ricetta h2.display, #gusto h2.display{margin-bottom:var(--sp-4)} /* fondi */ .intro{background:var(--black);padding-block:var(--sp-5) var(--sp-6)} .cream{background:var(--cream);color:var(--gold);position:relative} .acquista{background:var(--gold);color:var(--cream);position:relative; padding-block:var(--sp-6) 0;overflow:hidden} /* ---------- Pagina di contenuto generica (template) ---------- Layout per pagine "di servizio" a solo testo — Privacy Policy, Cookie Policy, Credits e simili — derivato dal frame Figma "Re Laurino - Pag contenuto - Desktop". Header e footer sono identici alla landing page; qui c'è solo il contenuto centrale: titolo + blocchi ripetuti di sottotitolo (.lead) + paragrafi (.body). Non essendoci un frame mobile dedicato, gli spazi sono adattati in scala con la stessa formula clamp usata altrove (v1728 → v393). Pagina sempre color cream (nessuna fascia nera come nell'hero): l'header parte già nello stato "is-scrolled" (classe statica in HTML, non serve JS — vedi commento in js/main.js). */ .page-content{ background:var(--cream); color:var(--dark); /* spazio per l'header fisso + margine: 202px a 1728, 110px a 393 */ padding-top:clamp(110px, calc(83px + 6.89vw), 202px); padding-bottom:var(--sp-6); } .page-block{margin-top:var(--sp-5)} .page-block:first-child{margin-top:0} .page-block__subtitle{margin-bottom:var(--sp-3)} /* ---------- Tipografia ---------- */ .display{ font-family:var(--ff-display); font-weight:400; /* il kit Typekit ha 400 e 700; nel Figma è 500 */ font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:0; text-transform:uppercase; color:var(--gold); margin:0 0 var(--sp-6); text-wrap:balance; /* rete di sicurezza: se il font condensato non è disponibile, il titolo va a capo invece di sfondare la viewport */ overflow-wrap:break-word; } .display span{display:block} .display span + span{margin-top:0} .display--center{text-align:center} .display--cream{color:var(--cream)} .lead{ font-weight:300; /* esplicito: senza, un tag h1-h6 con questa classe (come il sottotitolo di .page-block) prende il grassetto di default del browser */ font-size:var(--fs-lead); line-height:var(--lh-lead); letter-spacing:-.05em; color:var(--gold); } .lead + .lead{margin-top:1.1em} .lead--gold{color:var(--gold)} .lead--cream{color:#fff} .quote{ font-size:var(--fs-quote); line-height:var(--lh-quote); letter-spacing:-.05em; } .quote + .quote{margin-top:var(--sp-2)} .quote--dark{color:var(--dark)} .body{ font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:0; color:var(--dark); } .body strong{font-weight:700} .body--light{color:#fff} .body + .body{margin-top:1.3em} .small{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--gold); } .eyebrow{ font-family:var(--ff-label); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); line-height:1; } .eyebrow--cream{color:var(--cream)} .eyebrow--center{text-align:center} /* etichetta con filetto sopra e sotto: stessa altezza dei bottoni */ .eyebrow--rules{ display:block; width:fit-content; margin:0 auto var(--sp-5); height:var(--ctrl-h); padding-block:0; border-top:var(--ctrl-stroke) solid currentColor; border-bottom:var(--ctrl-stroke) solid currentColor; align-content:center; text-align:center; } /* filetti orizzontali */ .rule{height:1px;background:var(--gold);margin-block:var(--sp-4)} .rule--gold{background:var(--gold)} .rule--cream{background:var(--cream)} .intro .rule{margin-block:var(--sp-5)} /* ---------- Header ---------- */ /* fixed: logo, bottone Acquista e voce Menu restano visibili durante lo scroll. Trasparente in cima alla pagina (per non coprire l'hero); al primo scroll (classe .has-scrolled) diventa nero; appena lo sfondo della pagina passa a cream (classe .is-scrolled, via JS, quando si raggiunge la prima sezione .cream) il colore cambia gradualmente in cream, per restare coerente con lo sfondo sottostante. */ .site-header{ position:fixed;inset:0 0 auto; z-index:60; /* sopra l'overlay del menu */ padding-block:clamp(18px,2vw,35px); background:transparent; transition:background-color .4s ease, box-shadow .4s ease; } .site-header.has-scrolled{background:var(--black)} .site-header.is-scrolled{ background:var(--cream); box-shadow:0 1px 0 rgb(0 0 0 / .08); } .site-header.is-scrolled .logo__light{display:none} .site-header.is-scrolled .logo__dark{display:block} .header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)} .logo{display:block} .logo img{width:clamp(150px,13.8vw,239px)} .logo__dark{display:none} .header-actions{display:flex;align-items:center;gap:clamp(16px,2.3vw,40px)} /* selettore lingua: solo dentro il menu, centrato nella riga */ .lang-switch{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); margin:0; font-family:var(--ff-label); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--dark); white-space:nowrap; display:none; /* visibile solo a menu aperto */ } .lang-switch .is-active{color:var(--magenta)} .lang-switch a:hover{color:var(--magenta)} /* stato "menu aperto": il logo passa alla versione scura, compare il selettore lingua, MENU diventa CHIUDI (via JS) */ .menu-open .logo__light{display:none} .menu-open .logo__dark{display:block} .menu-open .lang-switch{display:block} /* a menu aperto l'header deve restare coerente con lo sfondo cream dell'overlay sottostante, indipendentemente dallo stato di scroll (.has-scrolled/.is-scrolled) raggiunto prima di aprirlo: altrimenti, se il menu si apre mentre la pagina è ancora sulla fascia nera, l'header resta nero sopra un overlay cream */ .menu-open .site-header{background:var(--cream);box-shadow:none} @media (max-width:900px){ /* sotto i 900px non c'è spazio per centrarlo nella riga dell'header: va su una riga propria, sotto logo/Chiudi e sopra le voci di menu */ .header-inner{flex-wrap:wrap;row-gap:var(--sp-3)} .logo{order:1} .header-actions{order:2} .lang-switch{ position:static;transform:none; order:3;flex-basis:100%; text-align:center; } } .menu-toggle{ display:inline-block; align-content:center; text-align:center; font-family:var(--ff-label); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--magenta); height:var(--ctrl-h); padding-block:0; border-top:var(--ctrl-stroke) solid currentColor; border-bottom:var(--ctrl-stroke) solid currentColor; min-width:clamp(53px,3.9vw,67px); transition:color .25s; } /* scritta e filetti (currentColor) diventano oro all'hover, solo desktop */ @media (hover:hover) and (pointer:fine){ .menu-toggle:hover{color:var(--gold)} } @media (max-width:767px){ /* su mobile l'acquisto vive nella barra sticky in basso */ .header-actions .header-buy{display:none} } /* ---------- Overlay menu (frame "Re Laurino - Menu - Desktop") ---------- */ .site-nav{ position:fixed;inset:0;z-index:50; background:var(--cream); display:flex;flex-direction:column; padding-top:clamp(96px,8.1vw,140px); /* spazio per la riga dell'header */ padding-bottom:clamp(20px,1.7vw,29px); overflow:hidden auto; overscroll-behavior:contain; } .site-nav[hidden]{display:none} .site-nav__list{ flex:1 1 auto; display:flex;flex-direction:column;justify-content:center; text-align:center; padding-inline:5.44%; } .site-nav__list li{line-height:0.992} @media (min-width:901px){ /* spazio fra le voci leggermente ridotto: su monitor bassi il passo di 124px del Figma faceva uscire le ultime voci dalla viewport */ .site-nav__list li + li{margin-top:-.42em} } .site-nav__list a{ display:inline-block;position:relative; font-family:var(--ff-display); font-weight:400; /* 125px → 70px, come i display; il min() è solo una rete di sicurezza se il font condensato non è disponibile */ font-size:min(var(--fs-display), 18vw); line-height:0.992; /* passo baseline 124 su 125 */ overflow-wrap:break-word; text-transform:uppercase; color:var(--dark); transition:color .2s; } .site-nav__list .site-nav__buy{color:var(--gold)} .site-nav__list a:hover, .site-nav__list a:focus-visible{color:var(--magenta)} /* indicatore voce attiva disabilitato */ .site-nav__list a::after{display:none} .site-nav__foot{margin-top:auto} .site-nav__foot .rule{margin-block:0 clamp(18px,1.5vw,25px)} .site-nav__foot .socials{justify-content:center;gap:clamp(28px,3.8vw,66px)} /* ---------- Centratura ottica delle maiuscole ---------- Con `line-height` normale il box di riga comprende anche lo spazio dei discendenti, che nelle scritte tutte-maiuscole resta vuoto: il testo risulta leggermente basso. `text-box` taglia il box di riga esattamente fra altezza delle maiuscole e linea di base, così la centratura diventa ottica e si adatta da sé a qualunque font (compresa Gravesend Sans, quando arriverà). Chrome 133+ e Safari 18.2+; dove non è supportato resta una compensazione fissa, più grossolana. */ .btn, .menu-toggle, .eyebrow--rules{ text-box:trim-both cap alphabetic; } @supports not (text-box: trim-both cap alphabetic){ .btn, .menu-toggle, .eyebrow--rules{padding-bottom:.08em} } /* ---------- Bottoni ---------- */ .btn{ display:inline-block; align-content:center; text-align:center; font-family:var(--ff-label); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; line-height:1; height:var(--ctrl-h); padding:0 clamp(.6em,1.1vw,1.1em); border:var(--ctrl-stroke) solid currentColor; white-space:nowrap; /* nel Figma le etichette sono su una riga */ transition:background-color .25s, color .25s; } /* le etichette tedesche (es. "IN UNSEREM ONLINESHOP KAUFEN") sono più lunghe di quelle italiane: su mobile, dove il container è più stretto, "nowrap" può far uscire il testo dal bottone (e quindi dal container, invisibilmente tagliato da overflow-x:clip su body). Sotto i 767px si passa a un'altezza minima invece che fissa, per lasciar andare a capo il testo quando non ci sta su una riga sola, senza toccare il container né il layout desktop. */ @media (max-width:767px){ .btn{ white-space:normal; height:auto; min-height:var(--ctrl-h); padding-block:.55em; line-height:1.15; } } /* il bordo (3px, box-sizing:border-box) non altera mai l'altezza di 36px; in hover lo coloriamo come il riempimento (non come lo sfondo esterno) così il bottone resta un blocco pieno e uniforme, senza un filetto che lo faccia sembrare più basso */ .btn--outline-gold{color:var(--gold)} .btn--outline-gold:hover{background:var(--gold);color:var(--dark);border-color:var(--gold)} .btn--outline-dark{color:var(--dark)} .btn--outline-dark:hover{background:var(--dark);color:var(--gold);border-color:var(--dark)} .btn--outline-cream{color:#fff} .btn--outline-cream:hover{background:#fff;color:var(--gold);border-color:#fff} .header-buy{width:clamp(110px,8.68vw,150px);padding-inline:0} .buttons{display:grid;gap:clamp(12px,1.7vw,29px);margin-top:var(--sp-5);max-width:483px} /* ---------- Hero ---------- */ .hero{ position:relative; aspect-ratio:1728/1138; min-height:clamp(420px,65.8vw,1138px); background:var(--black); overflow:hidden; } .hero__img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center 45%; } @media (max-width:767px){ .hero{aspect-ratio:393/795;min-height:0} } /* ---------- Intro ---------- */ .intro__lead{margin-top:0} /* ---------- Fustella (transizione nero → crema) ---------- La sagoma è alta 736px nel Figma, ma la campitura crema parte a 490px: il resto è coperto dal fondo crema. Riproduco il taglio. */ .fustella{ background:var(--black); line-height:0; aspect-ratio:1728/491; overflow:hidden; } .fustella img{width:100%;height:auto} /* ---------- Blocchi "pitch" centrati ---------- */ .pitch{ text-align:center; max-width:min(100%,700px); /* larghezza di colonna rilevata dal Figma */ margin-inline:auto; padding-top:var(--sp-3); } .intro .pitch{margin-top:var(--sp-6)} /* la rosellina prende il colore del blocco tramite mask */ .pitch__mark{ display:block; width:clamp(26px,2.2vw,38px); aspect-ratio:38/19; margin:0 auto var(--sp-2); background-color:currentColor; -webkit-mask-image:url("../assets/icon-rosellina.svg"); mask-image:url("../assets/icon-rosellina.svg"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .pitch--gold{color:var(--gold)} .pitch--magenta{color:var(--magenta);margin-top:var(--sp-6)} /* ---------- Link CTA con chevron ---------- */ .cta-link{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--ff-label); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; margin-top:var(--sp-3); } .cta-link::after{ content:""; width:.62em;height:.62em; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-.15em) rotate(45deg); transition:transform .25s; } .cta-link:hover::after{transform:translateY(.1em) rotate(45deg)} .cta-link--gold{color:var(--gold)} .cta-link--magenta{color:var(--magenta)} /* ---------- Collage "La leggenda" ---------- */ .collage{position:relative;width:100%} .collage__item{position:absolute;top:0;left:0} /* i collage sbordano dal proprio riquadro: i testi che seguono restano sopra, come nell'ordine di sovrapposizione del Figma */ .collage ~ .grid-3, .collage ~ .rule, .collage ~ .pitch{position:relative;z-index:1} .collage--leggenda{ aspect-ratio:1728/412; margin-block:var(--sp-5) var(--sp-6); /* il collage esce dal contenitore, come nel Figma */ width:100vw;margin-inline:calc(50% - 50vw); } .collage--leggenda__peak {left:40.97%;top:0; width:18.11%} .collage--leggenda__rose-sx{left:26.27%;top:49.03%;width:10.66%} .collage--leggenda__rose-dx{left:63.01%;top:49.03%;width:10.66%} @media (max-width:767px){ .collage--leggenda{aspect-ratio:393/171} .collage--leggenda__peak {left:33.95%;width:33.02%} .collage--leggenda__rose-sx{left:7.12%;top:49.1%;width:19.46%} .collage--leggenda__rose-dx{left:74.18%;top:49.1%;width:19.46%} } /* ---------- Collage "La ricetta" ---------- */ .collage--ricetta{ aspect-ratio:1728/757; /* margine superiore ridotto: si somma per collapse al margin-bottom del titolo che precede (vedi #ricetta h2.display) */ margin-block:var(--sp-3) var(--sp-6); width:100vw;margin-inline:calc(50% - 50vw); } .collage--ricetta .collage__item{transform-origin:top left} /* sovrapposizione esplicita: illustrazioni sotto, foglio, poi camomilla */ .c-bacche,.c-fiori,.c-gigli{z-index:1} .c-ricetta-1,.c-ricetta-2{z-index:2} .c-camomilla{z-index:3} /* rametto con foglie e bacche, a sinistra del foglio */ .c-bacche {left:26.5%; top:19%; width:11%; transform:rotate(-6deg)} .c-gigli {left:64.08%;top:0; width:14.26%;transform:rotate(41.15deg)} .c-ricetta-1{left:38.14%;top:16.70%;width:25.35%;transform:rotate(2.44deg)} .c-ricetta-2{left:38.43%;top:16.39%;width:25.35%;transform:rotate(3.70deg)} .c-fiori {left:71.45%;top:95.92%;width:15.88%;transform:rotate(8.20deg) scaleX(-1)} .c-camomilla{left:58.09%;top:91.96%;width:39.98%;transform:rotate(35.20deg) scaleX(-1)} /* nel Figma questi due scatti su fondo bianco sono in Moltiplica: il bianco si fonde col crema e resta solo il soggetto */ .c-camomilla, .botaniche img{mix-blend-mode:multiply} @media (max-width:767px){ .collage--ricetta{aspect-ratio:393/337} .c-bacche {left:17.9%; top:20%; width:19.8%} .c-gigli {left:80.79%;top:0; width:28.22%} .c-ricetta-1{left:29.45%;top:16.90%;width:50.18%} .c-ricetta-2{left:30.03%;top:16.59%;width:50.18%} .c-fiori {left:95.38%;top:96.99%;width:31.43%} .c-camomilla{left:68.93%;top:92.99%;width:79.12%} } /* ---------- Botaniche ---------- */ .botaniche{ width:min(84.72%,1464px); /* margini ridotti sopra (collassa col titolo che precede, vedi #gusto h2.display) e sotto (verso il testo che segue) */ margin:var(--sp-3) auto var(--sp-4); } @media (max-width:767px){ .botaniche{width:138.7%;margin-inline:-18.3%} } /* ---------- Note di degustazione ---------- */ .notes{ margin-top:var(--sp-5); display:grid; gap:clamp(20px,1.6vw,27px); grid-column:1/-1; } @media (min-width:901px){ .notes{margin-left:calc((100% + var(--gap))/3)} } .note{display:flex;align-items:center;gap:clamp(18px,2.4vw,42px)} .note__icon{ flex:0 0 auto; width:clamp(77px,6.83vw,118px); height:auto; aspect-ratio:1; } /* ---------- Usi (fine pasto / mixology) ---------- */ .usi{margin-top:var(--sp-4);display:grid;gap:clamp(18px,1.4vw,24px)} .uso{display:flex;align-items:center;gap:clamp(14px,1.15vw,20px)} .uso__icon{flex:0 0 auto;width:clamp(38px,2.84vw,49px)} /* ---------- Ordine mobile: in "Bevilo così" e "Acquista" il secondo paragrafo (colonna di destra su desktop) va inserito, su mobile, prima dell'elenco Fine pasto/Mixology o dei bottoni — non dopo, come uscirebbe dal semplice impilamento delle colonne. .col-2 diventa "contents" solo qui sotto i 900px, così il suo paragrafo e l'elemento successivo (lista o bottoni) tornano ad essere item di griglia indipendenti, riordinabili con "order" insieme al paragrafo di .col-3. Il desktop non è toccato. */ @media (max-width:900px){ #bevilo .grid-3 .col-2{display:contents} #bevilo .grid-3 .col-2 > p.body{order:1} #bevilo .grid-3 .col-3{order:2} #bevilo .grid-3 .col-2 > .usi{order:3} #acquista .grid-3 .col-2{display:contents} #acquista .grid-3 .col-2 > p.body{order:1} #acquista .grid-3 .col-3{order:2} #acquista .grid-3 .col-2 > .buttons{order:3} } /* ---------- Galleria orizzontale ---------- */ .gallery{ /* margine inferiore ridotto: la galleria è l'ultimo elemento di #leggenda, e la somma di questo margine + il padding-bottom della sezione + il padding-top di #ricetta creava troppo spazio prima di "La ricetta" */ margin-block:var(--sp-6) var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .gallery::-webkit-scrollbar{display:none} .gallery__track{ display:flex; gap:var(--gap); padding-inline:5.44%; width:max-content; } /* le 5 foto prodotto hanno proporzioni diverse fra loro (orizzontali e verticali): altezza fissa e larghezza libera, così ogni scatto resta intero invece di essere tagliato in una fascia unica (come nel Figma, pensato per due segnaposto con un altro rapporto) */ .gallery__slide{ margin:0; flex:0 0 auto; height:clamp(320px,34vw,620px); width:auto; scroll-snap-align:center; overflow:hidden; background:var(--black); } .gallery__slide picture{display:block;height:100%} .gallery__slide img{display:block;height:100%;width:auto} @media (max-width:767px){ .gallery__track{padding-inline:7.38%} .gallery__slide{height:56vw} } /* ---------- Bevilo così: silhouette Dolomiti ---------- */ .section--bevilo{padding-top:0} .dolomiti{ width:106.77%; margin-inline:-2.2%; margin-bottom:calc(var(--sp-6) * -1); position:relative; pointer-events:none; } .section--bevilo > .container{position:relative;padding-top:var(--sp-6)} @media (max-width:767px){ .dolomiti{width:209.4%;margin-inline:-52.4%} } /* ---------- Acquista: rose decorative ---------- */ .acquista__rose{margin-top:var(--sp-4);width:100%} .acquista__rose img{width:100%} /* ---------- Footer ---------- */ .site-footer{ background:var(--dark); color:var(--gold); padding-block:var(--sp-4) var(--sp-3); } .site-footer__logo{display:block;width:fit-content;margin-inline:auto} .site-footer__logo img{width:clamp(200px,16.6vw,287px)} .site-footer .rule{margin-block:var(--sp-3)} .site-footer__cols{align-items:start;row-gap:var(--sp-3)} .site-footer__links{display:grid;gap:.55em} .site-footer a:hover{color:var(--cream)} .site-footer__contact{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start} @media (min-width:901px){ .site-footer__contact{align-items:flex-start} } .socials{display:flex;gap:clamp(18px,1.7vw,29px);align-items:center} .socials img{width:auto;height:clamp(18px,1.45vw,25px)} @media (min-width:901px){ .site-footer__contact{grid-column:3;flex-direction:row;justify-content:space-between;width:100%} } /* ---------- CTA sticky mobile ---------- */ .mobile-cta{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:40; background:var(--gold); padding:15px 19px; padding-bottom:calc(15px + env(safe-area-inset-bottom)); } .mobile-cta .btn{width:100%} @media (max-width:767px){ .mobile-cta{display:block} body{padding-bottom:0} } /* ---------- Accordion capitoli ---------- */ .chapters{margin-top:var(--sp-6);border-top:1px solid var(--gold)} .chapter{border-bottom:1px solid var(--gold)} .chapter__head{ display:grid; grid-template-columns:480fr 480fr 500fr; gap:0 var(--gap); align-items:start; padding-block:var(--sp-4) var(--sp-5); } .chapter__num{grid-column:1;grid-row:1;margin-bottom:var(--sp-2)} .chapter__title{grid-column:1;grid-row:2;margin:0;font-weight:300;text-transform:uppercase} .chapter__body{grid-column:2/4;grid-row:2;max-width:668px} .chapter__toggle{ grid-row:1;grid-column:3; justify-self:end; display:inline-flex;align-items:center;gap:.7em; font-family:var(--ff-label);font-weight:700; font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase; color:var(--gold); border-bottom:1px solid currentColor; padding-bottom:.4em; } .chevron{ width:.62em;height:.62em; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-.15em) rotate(45deg); transition:transform .25s; } .chapter__toggle[aria-expanded="true"] .chevron{transform:translateY(.1em) rotate(225deg)} .chapter__panel{padding-bottom:var(--sp-4)} @media (min-width:901px){ .chapter__panel{ margin-left:calc((100% + var(--gap))/3); max-width:calc((200% + var(--gap))/3); } } @media (max-width:900px){ .chapter__head{grid-template-columns:1fr;gap:var(--sp-2)} .chapter__num{grid-row:auto} .chapter__title{grid-row:auto} .chapter__body{grid-column:1;grid-row:auto;max-width:none} .chapter__toggle{grid-row:auto;grid-column:1;justify-self:start;margin-top:var(--sp-2)} .chapter__title{margin-bottom:var(--sp-1)} } /* pannello con illustrazione (Capitolo 1): stessa griglia 480/480/500 dell'head, colonna 1 per l'immagine, 2-4 per il testo. Annulla il margin-left/max-width del pannello semplice qui sopra. */ .chapter__panel--media{margin-left:0;max-width:none} .chapter__panel-grid{ display:grid; grid-template-columns:480fr 480fr 500fr; gap:var(--sp-4) var(--gap); align-items:start; } .chapter__illustration{grid-column:1;width:74%;height:auto;margin-top:var(--sp-1)} .chapter__text{grid-column:2/4;max-width:668px} @media (max-width:900px){ .chapter__panel-grid{grid-template-columns:1fr;gap:var(--sp-4)} .chapter__illustration{grid-column:1;width:63%;margin-inline:auto;display:block} .chapter__text{grid-column:1;max-width:none} } /* immagine che segue il cursore sull'anteprima del capitolo (come nel menu di riferimento indicato dall'utente): agganciata al mouse, appare in dissolvenza sull'hover del testo di anteprima. Solo desktop con mouse. */ .chapter-follow{ position:fixed; top:0;left:0; /* dimensione naturale del PNG, non ridotta */ width:auto;height:auto; pointer-events:none; z-index:5; opacity:0; /* la posizione e la scala sono impostate frame per frame dal JS (che interpola già verso il cursore): qui si anima solo la dissolvenza, altrimenti la transition entrerebbe in conflitto con l'inseguimento */ transition:opacity .3s ease; } .chapter-follow.is-visible{opacity:1} @media (max-width:900px), (hover:none), (pointer:coarse){ .chapter-follow{display:none !important} } /* ---------- Riduzione movimento ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important} } /* ========================================================================== Age gate — verifica età legale. Layer (.age-gate-overlay) mostrato sopra index.html/index-de.html finché l'utente non conferma: sfondo nero fisso a piena viewport, nessuno scroll; logo in alto, domanda + bottoni al centro, selettore lingua in basso. La classe .age-gate da sola (senza .age-gate-overlay) resta anche il markup di riferimento per il layout interno; .age-gate-overlay aggiunge solo il posizionamento a layer. ========================================================================== */ .age-gate{ min-height:100vh; background:var(--black); color:var(--gold); display:flex; flex-direction:column; } .age-gate-overlay{ position:fixed; inset:0; /* deve stare sopra l'header (60), l'overlay del menu (50) e anche sopra il banner cookie di Iubenda (z-index 99999998): finché l'età non è confermata, nessun altro layer della pagina può stare davanti */ z-index:2147483647; overflow-y:auto; /* se il layer stesso non entra in una viewport bassa */ } /* confermata l'età (classe su , impostata dallo script in head o da js/age-gate-layer.js al clic su "Sì/Ja"): il layer sparisce */ html.age-ok .age-gate-overlay{display:none} .age-gate__header{ padding-block:clamp(18px,2vw,35px); text-align:center; } .age-gate__header img{width:clamp(150px,13.8vw,239px);margin-inline:auto} .age-gate__main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4); padding-inline:var(--sp-3); text-align:center; } .age-gate__question{max-width:1140px;margin:0} .age-gate__break{display:none} @media (min-width:901px){ .age-gate__break{display:block} } .age-gate__actions{display:flex;gap:clamp(12px,1.7vw,29px)} .age-gate__actions .btn{cursor:pointer;background:transparent;min-width:clamp(150px,11vw,190px)} .age-gate__notice{ max-width:520px; margin:0; font-family:var(--ff-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--gold); } .age-gate__footer{padding-block:clamp(18px,2vw,35px);text-align:center} .age-gate__lang{ margin:0; font-family:var(--ff-label); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; line-height:1; color:var(--gold); } .age-gate__lang .is-active{color:var(--magenta)} .age-gate__lang a:hover{color:var(--magenta)} @media (max-width:767px){ .iubenda-tp-alert-btn[data-tp-float="bottom-left"], .iubenda-tp-alert-btn[data-tp-float="bottom-right"], .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float="bottom-left"], .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float="bottom-right"], .iubenda-uspr-btn[data-tp-float="bottom-left"], .iubenda-uspr-btn[data-tp-float="bottom-right"]{bottom:4rem} /* JS overrides with exact CTA height */ }