/* --- Font self-hosted (nessuna chiamata a Google Fonts) --- */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations'),url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations'),url('../fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations'),url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-latin-ext-wght-italic.woff2') format('woff2-variations'),url('../fonts/fraunces-latin-ext-wght-italic.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations'),url('../fonts/archivo-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'),url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ========================================================================= MARTINI CARNI — Design System Token e linguaggio visivo ereditati dalla versione one-page e consolidati. Ordine: token · reset · tipografia · componenti · sezioni · responsive ========================================================================= */ /* ---------------------------------------------------------------- 1. TOKEN */ /* --------------------------------------------------------------------------- DESIGN TOKEN — Martini Carni Un solo posto per colore, ritmo, tipografia e movimento. Regola: nei componenti si usano i token, non valori grezzi. I valori preesistenti NON sono stati cambiati: l'intero foglio vi dipende. --------------------------------------------------------------------------- */ :root{ /* --- COLORE ------------------------------------------------------------ */ /* Il fondo chiaro NON e' bianco: e' un avorio caldo. Il bianco puro resta disponibile come superficie rara (--white), non come sfondo automatico della maggioranza della pagina. E' la correzione di direzione artistica piu' importante: il bianco dominante raffreddava tutto e allontanava il sito dal registro food/carne. */ --paper:#F7F2EA; /* avorio: fondo chiaro primario */ --paper-deep:#F0E7DB; /* avorio piu' profondo, sezioni alternate */ --stone:#E8DACB; /* terzo livello, ancora piu' caldo */ --white:#FFFFFF; /* superficie pura: usata di rado, mai di default */ --hide:#2A1112; /* bruno profondo, tono carne scura */ --cream:#FFFFFF; /* testo su fondo scuro */ --ink:#1A0C0D; /* testo primario / fondo scuro */ --ink-soft:#54393B; /* testo secondario */ --wine:#9E1B2E; /* accento del marchio: UNO solo */ --wine-dark:#4A0A10; --brass:#9E1B2E; --brass-light:#FFFFFF; --line:rgba(26,12,13,.14); /* filetti su chiaro */ --line-light:rgba(255,255,255,.22); /* filetti su scuro */ /* Scrim fotografici: gradienti FUNZIONALI, servono alla leggibilita'. Mai un velo piatto steso su tutta l'immagine. */ --scrim-bottom:linear-gradient(to top,rgba(20,9,10,.86) 0%,rgba(20,9,10,.60) 26%,rgba(20,9,10,.18) 56%,rgba(20,9,10,0) 80%); --scrim-left:linear-gradient(to right,rgba(20,9,10,.88) 0%,rgba(20,9,10,.62) 30%,rgba(20,9,10,.20) 56%,rgba(20,9,10,0) 78%); --scrim-soft:linear-gradient(to top,rgba(20,9,10,.52) 0%,rgba(20,9,10,0) 58%); --scrim-top:linear-gradient(to bottom,rgba(20,9,10,.52) 0%,rgba(20,9,10,.22) 42%,rgba(20,9,10,0) 100%); /* --- TIPOGRAFIA -------------------------------------------------------- */ --f-display:'Fraunces', Georgia, serif; --f-body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Scala: il salto fra display e testo e' volutamente ampio. E' la leva principale del carattere editoriale. */ --t-num:clamp(64px, 16vw, 210px); /* numeri editoriali: anni, 01/02/03 */ --t-display:clamp(44px, 9vw, 124px); /* apertura, momenti forti */ --t-hero:clamp(38px, 7vw, 92px); --t-h1:clamp(34px, 5.4vw, 72px); --t-h2:clamp(30px, 4.2vw, 54px); --t-h3:clamp(21px, 2.4vw, 28px); --t-lead:clamp(16px, 1.4vw, 18.5px); --t-body:clamp(14.5px, 1.05vw, 16px); --t-small:13.5px; --t-eyebrow:12px; --lh-display:.94; /* titoli grandi: interlinea stretta */ --lh-title:1.06; --lh-lead:1.5; --lh-body:1.65; --ls-display:-.022em; /* display: tracking negativo */ --ls-title:-.012em; --ls-eyebrow:.16em; /* occhiello: tracking ampio */ --ls-btn:.05em; /* Misura di riga: 60-75 caratteri desktop, 35-60 mobile */ --measure:66ch; --measure-narrow:52ch; --measure-lead:38ch; /* --- CONTENITORI E GRIGLIA --------------------------------------------- */ --container:1240px; --container-narrow:860px; --container-wide:1480px; /* composizioni quasi a pieno schermo */ --pad:clamp(20px, 5vw, 64px); --gutter:clamp(20px, 3vw, 40px); /* --- RITMO VERTICALE --------------------------------------------------- */ --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:52px; --sp-6:80px; --sp-7:120px; --section-y:clamp(72px, 10vw, 140px); --section-y-sm:clamp(52px, 7vw, 96px); --section-y-lg:clamp(96px, 14vw, 200px); /* respiro prima di un momento forte */ /* --- PROPORZIONI FOTOGRAFICHE ------------------------------------------ */ /* Una fotografia puo' cambiare taglio fra desktop e mobile: e' voluto. */ --ar-portrait:4/5; --ar-portrait-tall:3/4; --ar-landscape:3/2; --ar-landscape-wide:16/9; --ar-square:1/1; --ar-cinema:21/9; /* --- FILETTI, BORDI, OMBRE --------------------------------------------- */ --rule:1px; --rule-strong:2px; --radius:0px; /* scelta: nessun raggio, non una dimenticanza */ --shadow-lift:0 20px 40px -14px rgba(26,12,13,.35); /* --- MOVIMENTO --------------------------------------------------------- */ --e-out:cubic-bezier(.2,.7,.2,1); --m-ease:cubic-bezier(.22,.61,.24,1); --d-fast:.28s; --d-base:.4s; --d-slow:.7s; --m-dur:.95s; /* reveal ampio */ --m-dur-s:.7s; /* reveal breve */ --m-stagger:.06s; /* ritardo fra elementi di una griglia */ --m-cta:.34s; /* CTA: rapida, non deve farsi aspettare */ /* --- Z-INDEX ------------------------------------------------------------ */ /* Scala dichiarata: non inventare valori fuori da questa. */ --z-media:1; --z-content:10; --z-sticky:20; --z-header:40; --z-drawer:60; --z-overlay:80; --z-modal:100; /* --- HEADER ------------------------------------------------------------- */ --header-h:84px; --header-h-sm:72px; } /* --- BREAKPOINT ------------------------------------------------------------ Non esistono come custom property: le media query non le leggono. Documentati qui perche' siano gli stessi in tutto il foglio. 360 · 390 · 430 telefono 768 tablet verticale 1024 tablet orizzontale / desktop piccolo 1280 · 1440 desktop --------------------------------------------------------------------------- */ /* ---------------------------------------------------------------- 2. RESET */ *,*::before,*::after{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); -webkit-text-size-adjust:100%;} body{ font-family:var(--f-body); font-size:var(--t-body); line-height:1.65; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.is-locked{overflow:hidden;} img,svg,video{display:block; max-width:100%;} img{height:auto;} a{color:inherit; text-decoration:none;} ul,ol{list-style:none;} button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;} input,textarea,select{font:inherit; color:inherit;} ::selection{background:var(--wine); color:var(--cream);} :focus-visible{outline:2px solid var(--wine); outline-offset:3px;} .on-dark :focus-visible,.is-dark :focus-visible{outline-color:var(--cream);} .skip-link{ position:absolute; left:-9999px; top:0; z-index:2000; background:var(--wine); color:var(--cream); padding:14px 22px; font-size:14px; font-weight:600; } .skip-link:focus{left:0;} .visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ------------------------------------------------------------ 3. LAYOUT */ .wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); width:100%;} .wrap-narrow{max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--pad); width:100%;} .pad{padding-block:var(--section-y);} .pad-sm{padding-block:var(--section-y-sm);} .pad-t0{padding-top:0;} .pad-b0{padding-bottom:0;} section{position:relative;} .bleed{width:100%;} .s-paper{background:var(--paper);} .s-deep{background:var(--paper-deep);} .s-stone{background:var(--stone);} .s-ink{background:var(--ink); color:var(--cream);} .s-wine{background:var(--wine-dark); color:var(--cream);} .s-ink .lead,.s-wine .lead{color:rgba(255,255,255,.78);} .s-ink .eyebrow,.s-wine .eyebrow{color:var(--brass-light);} .s-ink .eyebrow::before,.s-wine .eyebrow::before{background:var(--brass-light);} /* --------------------------------------------------------- 4. TIPOGRAFIA */ h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; line-height:1.05; letter-spacing:-.01em; text-wrap:balance;} h1{font-size:var(--t-h1);} h2{font-size:var(--t-h2);} h3{font-size:var(--t-h3); line-height:1.15;} h4{font-size:19px; line-height:1.2;} p{text-wrap:pretty;} .eyebrow{ font-family:var(--f-body); font-weight:700; font-size:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--wine); display:flex; align-items:center; gap:12px; margin-bottom:18px; } .eyebrow::before{content:''; width:28px; height:1px; background:var(--wine); flex:none;} .eyebrow--center{justify-content:center;} .eyebrow--center::before{display:none;} .title-lg{font-size:var(--t-h2); max-width:15ch;} .title-lg--wide{max-width:22ch;} .lead{font-size:var(--t-lead); line-height:1.75; color:var(--ink-soft); max-width:52ch;} .lead--center{margin-inline:auto; text-align:center;} .body-copy p + p{margin-top:var(--sp-3);} .body-copy{color:var(--ink-soft); max-width:62ch;} .s-ink .body-copy,.s-wine .body-copy{color:rgba(255,255,255,.78);} .section-intro{max-width:640px;} .section-intro--center{margin-inline:auto; text-align:center;} .section-intro--center .eyebrow{justify-content:center;} .section-intro--center .eyebrow::before{display:none;} .section-intro--center .title-lg, .section-intro--center .lead{margin-inline:auto;} .section-intro .lead{margin-top:20px;} /* ------------------------------------------------------------- 5. BOTTONI */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-body); font-weight:600; font-size:14px; letter-spacing:.03em; padding:15px 28px; border:1px solid currentColor; min-height:50px; transition:background var(--d-base) ease,color var(--d-base) ease,border-color var(--d-base) ease; white-space:nowrap; text-align:center; } .btn svg{width:14px; height:14px; flex:none; transition:transform var(--d-base) var(--e-out);} .btn:hover svg{transform:translateX(4px);} .btn-solid{background:var(--wine); border-color:var(--wine); color:var(--cream);} .btn-solid:hover{background:var(--wine-dark); border-color:var(--wine-dark);} .btn-ghost{color:var(--cream); border-color:rgba(255,255,255,.55);} .btn-ghost:hover{background:rgba(255,255,255,.14); border-color:var(--cream);} .btn-line{color:var(--ink); border-color:var(--ink);} .btn-line:hover{background:var(--ink); color:var(--cream);} .btn-group{display:flex; gap:16px; flex-wrap:wrap;} .link-arrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wine); padding-block:6px; border-bottom:1px solid currentColor; transition:gap var(--d-fast) var(--e-out); } .link-arrow svg{width:13px; height:13px;} .link-arrow:hover{gap:16px;} .s-ink .link-arrow,.s-wine .link-arrow,.on-dark .link-arrow{color:var(--cream);} /* --------------------------------------------------------------- 6. HEADER */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; padding-block:22px; transition:padding var(--d-base) ease,background var(--d-base) ease,box-shadow var(--d-base) ease; } .site-header > .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;} .site-header.is-solid{background:var(--paper); box-shadow:0 1px 0 var(--line); padding-block:12px;} body.nav-open .site-header{background:transparent; box-shadow:none; z-index:1200;} body.nav-open .brand-text,body.nav-open .brand-text span{color:var(--cream)!important;} .brand{display:flex; align-items:center; gap:12px; flex:none;} .brand img{width:44px; height:auto; transition:width var(--d-base) ease;} .site-header.is-solid .brand img{width:38px;} .brand-text{font-family:var(--f-display); font-size:21px; font-weight:600; color:var(--cream); line-height:1; display:flex; flex-direction:column; transition:color var(--d-base) ease;} .brand-text span{font-family:var(--f-body); font-size:9px; letter-spacing:.26em; font-weight:600; margin-top:5px; color:var(--brass-light);} .site-header.is-solid .brand-text{color:var(--wine-dark);} .site-header.is-solid .brand-text span{color:var(--wine);} .page-solid-header .site-header{background:var(--paper); box-shadow:0 1px 0 var(--line);} /* --- navigazione desktop --- */ .nav{display:flex; align-items:center; gap:30px;} .nav-item{position:relative;} .nav-link,.nav-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--cream); padding-block:8px; position:relative; transition:color var(--d-base) ease; } .nav-link::after,.nav-toggle::after{ content:''; position:absolute; left:0; bottom:2px; width:0; height:1px; background:var(--brass-light); transition:width var(--d-fast) ease; } .nav-link:hover::after,.nav-toggle:hover::after, .nav-item.is-open .nav-toggle::after, .nav-link[aria-current="page"]::after{width:100%;} .nav-toggle .chev{width:9px; height:9px; transition:transform var(--d-fast) ease;} .nav-item.is-open .nav-toggle .chev{transform:rotate(180deg);} .site-header.is-solid .nav-link,.site-header.is-solid .nav-toggle{color:var(--ink);} .site-header.is-solid .nav-link::after,.site-header.is-solid .nav-toggle::after{background:var(--wine);} .dropdown{ position:absolute; top:calc(100% + 14px); left:-22px; min-width:252px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-lift); padding:10px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--d-fast) ease,transform var(--d-fast) var(--e-out),visibility var(--d-fast); } .nav-item.is-open .dropdown{opacity:1; visibility:visible; transform:translateY(0);} /* Il pannello e' staccato di 14px dalla voce di menu. Senza questo ponte invisibile il puntatore attraversa il vuoto, esce da .nav-item e la tendina si chiude prima di poterla raggiungere. */ .dropdown::before{content:''; position:absolute; left:0; right:0; top:-16px; height:16px;} .dropdown a{ display:block; padding:12px 16px; font-size:14px; font-weight:500; color:var(--ink); border-left:2px solid transparent; transition:background var(--d-fast) ease,border-color var(--d-fast) ease,padding var(--d-fast) ease; } .dropdown a small{display:block; font-size:11.5px; color:var(--ink-soft); font-weight:400; margin-top:3px; letter-spacing:0; text-transform:none;} .dropdown a:hover,.dropdown a[aria-current="page"]{background:var(--stone); border-left-color:var(--wine); padding-left:20px;} .nav-cta{ font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--cream); border:1px solid rgba(255,255,255,.5); padding:11px 20px; transition:all var(--d-fast) ease; white-space:nowrap; } .nav-cta:hover{background:var(--cream); color:var(--ink); border-color:var(--cream);} .site-header.is-solid .nav-cta{color:var(--ink); border-color:var(--ink);} .site-header.is-solid .nav-cta:hover{background:var(--ink); color:var(--cream);} /* --- switch lingua --- */ .lang{display:flex; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.4); padding:3px; border-radius:20px; transition:border-color var(--d-base) ease;} .site-header.is-solid .lang{border-color:var(--line);} .lang a{ font-size:11px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.65); padding:7px 11px; border-radius:16px; transition:all var(--d-fast) ease; min-width:38px; text-align:center; } .site-header.is-solid .lang a{color:var(--ink-soft);} .lang a[aria-current="true"]{background:var(--cream); color:var(--ink);} .site-header.is-solid .lang a[aria-current="true"]{background:var(--wine); color:var(--cream);} /* --- burger --- */ .burger{ display:none; width:46px; height:46px; position:relative; z-index:1200; flex:none; align-items:center; justify-content:center; } .burger i{position:absolute; left:11px; right:11px; height:2px; background:var(--cream); transition:transform var(--d-base) var(--e-out),opacity var(--d-fast) ease;} .site-header.is-solid .burger i{background:var(--ink);} .burger i:nth-child(1){top:15px;} .burger i:nth-child(2){top:22px;} .burger i:nth-child(3){top:29px;} body.nav-open .burger i{background:var(--cream)!important;} body.nav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg);} body.nav-open .burger i:nth-child(2){opacity:0;} body.nav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* --- drawer mobile --- */ .drawer{ position:fixed; inset:0; z-index:1100; background:var(--wine-dark); color:var(--cream); display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden; transition:transform .5s var(--e-out),visibility .5s; overscroll-behavior:contain; } body.nav-open .drawer{transform:translateX(0); visibility:visible;} .drawer-scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(var(--header-h) + 24px) 24px 24px;} .drawer-group + .drawer-group{border-top:1px solid var(--line-light);} .drawer-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 4px; font-family:var(--f-display); font-size:23px; font-weight:500; color:var(--cream); min-height:60px; text-align:left; } .drawer-head .chev{width:15px; height:15px; transition:transform var(--d-base) var(--e-out); flex:none; opacity:.7;} .drawer-group.is-open .drawer-head .chev{transform:rotate(180deg);} .drawer-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-base) var(--e-out);} .drawer-group.is-open .drawer-panel{grid-template-rows:1fr;} .drawer-panel > div{overflow:hidden;} .drawer-panel a{ display:block; padding:14px 4px 14px 18px; font-size:16px; color:rgba(255,255,255,.86); border-left:1px solid var(--line-light); min-height:52px; } .drawer-panel a[aria-current="page"]{color:var(--cream); border-left-color:var(--cream); font-weight:600;} .drawer-single{ display:block; padding:20px 4px; font-family:var(--f-display); font-size:23px; color:var(--cream); border-top:1px solid var(--line-light); min-height:60px; } .drawer-lang{display:flex; gap:10px; margin-top:32px;} .drawer-lang a{ flex:1; text-align:center; padding:14px 0; border:1px solid var(--line-light); font-size:12px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.7); } .drawer-lang a[aria-current="true"]{background:var(--cream); color:var(--wine-dark); border-color:var(--cream);} .drawer-actions{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-light); border-top:1px solid var(--line-light); flex:none; padding-bottom:env(safe-area-inset-bottom); } .drawer-actions a{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--wine-dark); padding:20px 10px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; min-height:62px; } .drawer-actions a:last-child{background:var(--wine);} .drawer-actions svg{width:16px; height:16px;} /* ---------------------------------------------------------- 7. PAGE HERO */ .page-hero{ position:relative; display:flex; align-items:flex-end; color:var(--cream); min-height:clamp(460px, 62svh, 640px); padding-top:calc(var(--header-h) + 40px); overflow:hidden; background:var(--ink); } .page-hero--tall{min-height:100svh;} .page-hero__media{position:absolute; inset:0; z-index:0;} .page-hero__media img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);} .page-hero::after{ content:''; position:absolute; inset:0; z-index:1; /* doppio velo: verticale per il testo in basso, laterale per la colonna sinistra, così i titoli restano leggibili anche su foto molto chiare */ background: linear-gradient(100deg,rgba(18,7,8,.72) 0%,rgba(18,7,8,.42) 42%,rgba(18,7,8,0) 72%), linear-gradient(180deg,rgba(40,10,14,.34) 0%,rgba(24,8,10,.42) 46%,rgba(16,6,7,.9) 100%); } .page-hero__inner{position:relative; z-index:2; width:100%; padding-bottom:clamp(44px, 7vw, 88px);} .page-hero h1{font-size:var(--t-h1); max-width:18ch;} .page-hero--home h1{font-size:var(--t-hero); max-width:17ch;} .page-hero h1 em{font-style:italic; color:var(--brass-light); font-weight:400;} .page-hero__tag{font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-light); margin-bottom:20px;} .page-hero__sub{font-size:clamp(15px,1.6vw,19px); max-width:48ch; margin-top:24px; color:rgba(255,255,255,.88); line-height:1.6;} .page-hero .btn-group{margin-top:38px;} .hero-scroll{ position:absolute; right:var(--pad); bottom:32px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); } .hero-scroll .line{width:1px; height:46px; background:rgba(255,255,255,.45); position:relative; overflow:hidden;} .hero-scroll .line::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--brass-light); animation:scrollline 2.2s ease-in-out infinite;} @keyframes scrollline{0%{top:-100%}60%{top:100%}100%{top:100%}} /* ------------------------------------------------------- 8. BREADCRUMB */ .crumbs{font-size:12px; letter-spacing:.08em; color:var(--ink-soft); padding-block:18px; border-bottom:1px solid var(--line);} .crumbs ol{display:flex; flex-wrap:wrap; gap:8px; align-items:center;} .crumbs li::after{content:'/'; margin-left:8px; opacity:.4;} .crumbs li:last-child::after{display:none;} .crumbs a:hover{color:var(--wine);} .crumbs [aria-current]{color:var(--ink);} /* ------------------------------------------------------- 9. SPLIT MEDIA */ .split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,6vw,90px); align-items:center;} .split--reverse .split__media{order:2;} .split--media-lead{grid-template-columns:.9fr 1.1fr;} .split__media{position:relative;} .split__media img{width:100%; aspect-ratio:var(--ar,4/5); object-fit:cover; object-position:var(--pos,50% 50%);} .split__media--wide img{aspect-ratio:var(--ar,5/4);} .split__tag{ position:absolute; bottom:-22px; left:-22px; max-width:250px; background:var(--wine); color:var(--cream); padding:16px 22px; font-family:var(--f-display); font-size:15px; font-style:italic; line-height:1.4; box-shadow:var(--shadow-lift); } .split__caption{margin-top:12px; font-size:12px; color:var(--ink-soft); letter-spacing:.04em;} .s-ink .split__caption,.s-wine .split__caption{color:rgba(255,255,255,.55);} .era{font-family:var(--f-display); font-weight:300; font-size:clamp(76px,11vw,158px); line-height:.86; /* attenuazione nel colore, non in opacity: così l'animazione di reveal non può riportare l'elemento a piena intensità */ color:rgba(158,27,46,.5); margin-bottom:14px; letter-spacing:-.03em;} /* ------------------------------------------------------- 10. LIGNAGGIO */ .lineage{display:flex; gap:28px; margin-top:36px; flex-wrap:wrap;} .lineage > div{border-left:2px solid var(--brass); padding-left:14px;} .lineage b{display:block; font-family:var(--f-display); font-size:17px; font-weight:500;} .lineage span{font-size:12.5px; color:var(--ink-soft); letter-spacing:.03em;} .s-ink .lineage span{color:rgba(255,255,255,.7);} /* --------------------------------------------------------- 11. TIMELINE */ .timeline{position:relative; margin-top:var(--sp-5);} .timeline::before{content:''; position:absolute; left:8px; top:8px; bottom:8px; width:1px; background:var(--line);} .timeline li{position:relative; padding:0 0 var(--sp-5) 46px;} .timeline li:last-child{padding-bottom:0;} .timeline li::before{content:''; position:absolute; left:2px; top:7px; width:15px; height:15px; border-radius:50%; background:var(--paper); border:2px solid var(--wine);} .timeline .yr{font-family:var(--f-display); font-size:clamp(28px,3.4vw,40px); color:var(--wine); line-height:1; display:block; margin-bottom:8px;} .timeline h3{margin-bottom:8px;} .timeline p{color:var(--ink-soft); max-width:56ch;} /* ------------------------------------------------------------- 12. CARD */ .card{background:var(--paper); position:relative; display:flex; flex-direction:column;} .card img{width:100%; aspect-ratio:var(--ar,5/4); object-fit:cover; object-position:var(--pos,50% 50%);} .card__body{padding:clamp(24px,3.2vw,40px); flex:1; display:flex; flex-direction:column;} .card__body h3{margin-bottom:14px;} .card__body p{font-size:14.5px; line-height:1.75; color:var(--ink-soft);} .card__body .link-arrow{margin-top:auto; padding-top:22px; align-self:flex-start;} .card__num{ position:absolute; top:20px; left:20px; z-index:2; font-family:var(--f-display); font-style:italic; font-size:14px; color:var(--cream); background:var(--wine); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,40px);} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px);} .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px);} /* --------------------------------------------------- 13. TEASER (home) */ .teaser{position:relative; display:block; overflow:hidden; background:var(--ink);} .teaser img{width:100%; aspect-ratio:var(--ar,4/5); object-fit:cover; object-position:var(--pos,50% 50%); transition:transform var(--d-slow) var(--e-out);} .teaser::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,7,8,0) 30%,rgba(20,7,8,.9) 100%); z-index:1;} .teaser:hover img{transform:scale(1.06);} .teaser__body{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(20px,2.6vw,30px); color:var(--cream);} .teaser__body .n{font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--brass-light);} .teaser__body h3{margin:8px 0 6px; font-size:clamp(19px,2vw,24px);} .teaser__body p{font-size:13.5px; color:rgba(255,255,255,.8); line-height:1.6;} .teaser__body .go{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;} .teaser__body .go svg{width:12px; height:12px; transition:transform var(--d-fast) var(--e-out);} .teaser:hover .go svg{transform:translateX(4px);} /* --------------------------------------------------------- 14. DIET BAR */ .diet{margin-top:44px;} .diet-bar{display:flex; width:100%; height:10px; overflow:hidden; margin-bottom:22px;} .diet-bar span{height:100%; display:block;} .diet-legend{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px 24px;} .diet-legend li{display:flex; align-items:baseline; gap:10px; font-size:13px; color:rgba(255,255,255,.75);} .diet-legend b{font-family:var(--f-display); font-size:20px; font-weight:500; color:var(--cream); min-width:46px;} /* --------------------------------------------------------- 15. I TAGLI */ .cutmap{max-width:940px; margin-inline:auto; position:relative;} .cutmap svg{width:100%; height:auto; overflow:visible;} .cut-label{font-family:var(--f-body); font-weight:600; font-size:12.5px; letter-spacing:.02em; fill:var(--ink);} .cut-line{stroke:var(--brass); stroke-width:1.4; fill:none;} .cut-dot{fill:var(--wine);} .beef-outline{fill:var(--stone); stroke:var(--ink); stroke-width:1.6;} .beef-seam{stroke:var(--paper); stroke-width:1.6; fill:none;} .cut{cursor:pointer;} .cut:hover .cut-dot,.cut.is-active .cut-dot{r:7;} .cut:hover .cut-label,.cut.is-active .cut-label{fill:var(--wine);} .cutmap-note{text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:26px;} .cutlist{display:grid; gap:2px; background:var(--line); border-block:1px solid var(--line);} .cutlist__item{background:var(--paper);} .cutlist__head{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; padding:18px 4px; min-height:64px; } .cutlist__head .idx{font-family:var(--f-display); font-size:13px; color:var(--wine); min-width:26px;} .cutlist__head .nm{font-family:var(--f-display); font-size:19px; font-weight:500; flex:1;} .cutlist__head .pr{font-size:13px; font-weight:600; color:var(--wine); white-space:nowrap;} .cutlist__head .chev{width:13px; height:13px; opacity:.5; transition:transform var(--d-fast) ease; flex:none;} .cutlist__item.is-open .chev{transform:rotate(180deg);} .cutlist__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-base) var(--e-out);} .cutlist__item.is-open .cutlist__panel{grid-template-rows:1fr;} .cutlist__panel > div{overflow:hidden;} .cutlist__panel dl{padding:0 4px 22px; display:grid; gap:12px;} .cutlist__panel dt{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--wine); margin-bottom:3px;} .cutlist__panel dd{font-size:14px; color:var(--ink-soft); line-height:1.6;} /* ------------------------------------------------------- 16. CATALOGO */ .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--ink);} .cat-card{background:var(--paper-deep); position:relative; overflow:hidden; aspect-ratio:3/3.6; display:block;} .cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--e-out);} .cat-card::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(20,7,8,0) 35%,rgba(20,7,8,.88) 100%);} .cat-card:hover img{transform:scale(1.08);} .cat-card__info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; color:var(--cream);} .cat-card__info .n{font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--brass-light);} .cat-card__info h3{font-size:19px; margin:6px 0 8px;} .cat-card__info .ex{font-size:12px; color:rgba(255,255,255,.82); display:flex; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.25); padding-top:8px;} .cat-note{margin-top:34px; padding-top:26px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13.5px; color:var(--ink-soft);} /* accordion catalogo (mobile + dettaglio) */ .acc{border-top:1px solid var(--line);} .acc__item{border-bottom:1px solid var(--line);} .acc__head{width:100%; display:flex; align-items:center; gap:16px; padding:20px 2px; min-height:68px; text-align:left;} .acc__head img{width:56px; height:56px; object-fit:cover; flex:none;} .acc__head .t{flex:1;} .acc__head .t b{display:block; font-family:var(--f-display); font-size:19px; font-weight:500;} .acc__head .t span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--wine); font-weight:700;} .acc__head .chev{width:13px; height:13px; opacity:.5; transition:transform var(--d-fast) ease; flex:none;} .acc__item.is-open .chev{transform:rotate(180deg);} .acc__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-base) var(--e-out);} .acc__item.is-open .acc__panel{grid-template-rows:1fr;} .acc__panel > div{overflow:hidden;} /* --------------------------------------------------------- 17. GALLERY */ .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} .gallery-item{position:relative; overflow:hidden;} .gallery-item img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform var(--d-slow) var(--e-out);} .gallery-item:hover img{transform:scale(1.06);} .gallery-item figcaption{position:absolute; left:10px; bottom:10px; background:var(--paper); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.03em; padding:6px 12px;} .strip{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;} .strip img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:var(--pos,50% 50%);} .strip--2{grid-template-columns:repeat(2,1fr);} .mosaic{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;} .mosaic img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);} .mosaic > *{overflow:hidden;} .m-a{grid-column:span 4; aspect-ratio:16/10;} .m-b{grid-column:span 2; aspect-ratio:4/5;} .m-c{grid-column:span 2; aspect-ratio:1/1;} .m-d{grid-column:span 2; aspect-ratio:1/1;} .m-e{grid-column:span 2; aspect-ratio:1/1;} /* -------------------------------------------------------- 18. FEATURES */ /* Erano riquadri bordati affiancati: la forma tipica di un template aziendale. Ora sono colonne separate solo da un filetto in alto, con il contrassegno in evidenza. Stessa informazione, nessuna scatola. */ .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,52px) clamp(24px,4vw,64px); } .feature{padding:var(--sp-3) 0 0; border-top:var(--rule-strong) solid var(--ink);} .s-ink .feature,.s-wine .feature{border-top-color:var(--cream);} .feature .k{ font-family:var(--f-display); font-weight:200; font-style:normal; font-size:clamp(26px,3vw,40px); line-height:.95; color:var(--wine); margin-bottom:var(--sp-2); letter-spacing:-.02em; } .s-ink .feature .k,.s-wine .feature .k{color:var(--brass-light);} .feature h3{font-size:var(--t-h3); margin-bottom:var(--sp-1);} .feature p{font-size:14px; color:var(--ink-soft); line-height:1.7;} .s-ink .feature p,.s-wine .feature p{color:rgba(255,255,255,.75);} .features--2{grid-template-columns:repeat(2,1fr);} .features--5{grid-template-columns:repeat(5,1fr);} @media (max-width:1023px){ .features--5{grid-template-columns:repeat(3,1fr);} } @media (max-width:767px){ .features{grid-template-columns:1fr 1fr;} .features--2,.features--5{grid-template-columns:1fr 1fr;} } @media (max-width:479px){ .features,.features--2,.features--5{grid-template-columns:1fr;} } .ticklist{display:grid; gap:14px; margin-top:28px;} .ticklist li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6;} .ticklist li::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--wine); margin-top:9px; flex:none;} .s-ink .ticklist li::before,.s-wine .ticklist li::before{background:var(--brass-light);} .inline-list{display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:30px;} .inline-list li{display:flex; align-items:center; gap:10px; font-size:13.5px;} .inline-list li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--wine); flex:none;} .s-ink .inline-list li::before,.s-wine .inline-list li::before{background:var(--brass-light);} /* ------------------------------------------------------- 19. CTA BAND */ .cta-band{background:var(--ink); color:var(--cream); padding-block:clamp(52px,7vw,90px);} .cta-band--wine{background:var(--wine-dark);} .cta-band__inner{display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,60px); flex-wrap:wrap;} .cta-band h2{font-size:clamp(26px,3.4vw,42px); max-width:20ch;} .cta-band p{color:rgba(255,255,255,.75); margin-top:14px; max-width:48ch; font-size:15px;} /* ----------------------------------------------------- 20. RISTORANTE */ .menu-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-5);} .menu-nav a{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:11px 18px; border:1px solid var(--line); color:var(--ink-soft); min-height:44px; display:inline-flex; align-items:center; transition:all var(--d-fast) ease; } .menu-nav a:hover{border-color:var(--wine); color:var(--wine);} .course + .course{margin-top:var(--sp-6);} .course__title{display:flex; align-items:center; gap:18px; margin-bottom:var(--sp-4);} .course__title h3{font-size:clamp(24px,3vw,34px); white-space:nowrap;} .course__title::after{content:''; flex:1; height:1px; background:var(--line);} .dish{padding:20px 0; border-bottom:1px solid var(--line);} .dish:last-child{border-bottom:0;} .dish h4{font-family:var(--f-display); font-size:clamp(18px,1.9vw,21px); font-weight:500; margin-bottom:6px;} .dish p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; max-width:62ch;} .dish .note{display:inline-block; margin-top:8px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--wine); font-weight:700;} .menu-cols{columns:2; column-gap:clamp(40px,6vw,80px);} .menu-cols > .course{break-inside:avoid; margin-top:0;} .menu-foot{margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft);} /* --------------------------------------------------------- 21. EVENTI */ .event-card{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);} .event-card img{width:100%; aspect-ratio:3/2; object-fit:cover;} .event-card__body{padding:26px; flex:1; display:flex; flex-direction:column;} .event-card .date{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--wine); margin-bottom:10px;} .event-card h3{font-size:22px; margin-bottom:10px;} .event-card p{font-size:14px; color:var(--ink-soft); line-height:1.7;} .event-card .link-arrow{margin-top:auto; padding-top:20px; align-self:flex-start;} /* gli eventi passati restano più quieti senza usare opacity, che verrebbe sovrascritta dall'animazione di entrata */ .event-card--past .event-card__body{border-top-color:var(--line);} .event-card--past img{filter:grayscale(.3) saturate(.9);} .event-card--past h3{color:var(--ink-soft);} /* Stato vuoto: un blocco caldo, non un riquadro bordato al centro del bianco */ .empty-state{ text-align:center; padding:clamp(56px,9vw,110px) var(--pad); background:var(--paper-deep); } .empty-state .mark{width:54px; height:54px; margin:0 auto 24px; border:1px solid var(--wine); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--wine);} .empty-state h3{font-size:clamp(22px,2.6vw,30px); margin-bottom:14px;} .empty-state p{color:var(--ink-soft); max-width:46ch; margin:0 auto 28px;} /* ------------------------------------------------------- 22. CONTATTI */ .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px);} /* min-width:0 e' necessario: dentro una griglia una colonna non si stringe sotto la larghezza del suo contenuto piu' lungo, e in francese le stringhe sono piu' lunghe. Senza, a 1024 px la scheda sbordava di 7 px. */ .contact-card{border:1px solid var(--line); padding:clamp(26px,3.4vw,40px); min-width:0;} .contact-card a,.contact-card p{overflow-wrap:anywhere;} .contact-card h3{margin-bottom:6px;} .contact-card .role{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--wine); margin-bottom:18px;} .info-list{display:grid; gap:14px;} .info-list li{display:grid; grid-template-columns:minmax(0,110px) minmax(0,1fr); gap:14px; font-size:14.5px; align-items:baseline;} .info-list dt,.info-list .k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);} .info-list a:hover{color:var(--wine);} /* Recapiti: su touch sono i collegamenti piu' importanti della pagina (telefono, mail, mappa). Area sensibile ad almeno 44 px. */ @media (max-width:767px){ .info-list li{align-items:center;} .info-list a{display:inline-flex; align-items:center; min-height:44px;} } .map-embed{aspect-ratio:21/9; width:100%; background:var(--stone); border:1px solid var(--line); position:relative; overflow:hidden;} .map-embed > img,.map-embed picture{position:absolute; inset:0; width:100%; height:100%;} .map-embed picture img{width:100%; height:100%; object-fit:cover; object-position:50% 55%;} .map-embed::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,7,8,.15),rgba(20,7,8,.62));} .map-card{position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--paper); padding:clamp(24px,3vw,38px); text-align:center; max-width:min(420px,86%); box-shadow:var(--shadow-lift);} .map-card strong{display:block; font-family:var(--f-display); font-size:clamp(17px,1.6vw,21px); font-weight:500; margin:14px 0 16px; line-height:1.35;} @media (max-width:767px){ .map-embed{aspect-ratio:4/3;} } .map-embed iframe{width:100%; height:100%; border:0;} .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;} .field{display:flex; flex-direction:column; gap:8px;} .field--full{grid-column:1/-1;} .field label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);} .field input,.field textarea,.field select{ border:1px solid var(--line); background:var(--paper); padding:14px 16px; font-size:15px; min-height:52px; width:100%; border-radius:0; transition:border-color var(--d-fast) ease; } .field textarea{min-height:140px; resize:vertical;} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--wine); outline:none;} .field .hint{font-size:12px; color:var(--ink-soft);} .check{display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--ink-soft);} .check input{width:20px; height:20px; min-height:0; flex:none; margin-top:2px; accent-color:var(--wine);} /* ---------------------------------------------------- 23. PLACEHOLDER */ .placeholder{ border:2px dashed var(--wine); background:repeating-linear-gradient(135deg,rgba(158,27,46,.045) 0 12px,transparent 12px 24px); padding:clamp(22px,3vw,34px); color:var(--wine-dark); } .placeholder .tagname{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; background:var(--wine); color:var(--cream); padding:5px 10px; margin-bottom:14px; } .placeholder p{font-size:14px; line-height:1.7; color:var(--wine-dark);} .placeholder ul{margin-top:10px; display:grid; gap:6px;} .placeholder li{font-size:13.5px; padding-left:16px; position:relative;} .placeholder li::before{content:'›'; position:absolute; left:0;} .placeholder--media{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; aspect-ratio:var(--ar,4/5); min-height:220px;} .s-ink .placeholder,.s-wine .placeholder{border-color:var(--brass-light); color:var(--cream);} .s-ink .placeholder p,.s-wine .placeholder p,.s-ink .placeholder li,.s-wine .placeholder li{color:rgba(255,255,255,.85);} /* --------------------------------------------------------- 24. FOOTER */ .site-footer{background:var(--ink); color:var(--cream);} .foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:clamp(56px,8vw,90px) 0 60px;} .foot-brand img{width:64px; margin-bottom:18px;} .foot-brand p{font-size:14px; color:rgba(255,255,255,.65); max-width:34ch; line-height:1.7;} .foot-col h2,.foot-col h3{font-family:var(--f-body); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-light); margin-bottom:20px; font-weight:700;} .foot-col li{margin-bottom:12px; font-size:14px; color:rgba(255,255,255,.82);} .foot-col a:hover{color:var(--brass-light);} /* Su schermi tattili i collegamenti del pie' di pagina erano alti 15 px: impossibili da centrare col pollice. L'area sensibile viene portata a 44 px senza cambiare la spaziatura visibile, compensando col margine. */ @media (max-width:767px){ .foot-col li{margin-bottom:0;} .foot-col li a,.foot-col li > span{ display:inline-flex; align-items:center; min-height:44px; padding-block:2px; } .foot-brand p + .info-list li{margin-bottom:0;} } .foot-social{display:flex; gap:14px; margin-top:22px;} .foot-social a{width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--d-fast) ease;} .foot-social a:hover{background:var(--cream); border-color:var(--cream); color:var(--ink);} .foot-bottom{border-top:1px solid rgba(255,255,255,.15); padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(255,255,255,.5);} /* ------------------------------------------------------------ 25. 404 */ .err{min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--ink); color:var(--cream);} .err .code{font-family:var(--f-display); font-size:clamp(90px,18vw,220px); line-height:.8; color:var(--wine); opacity:.8;} /* ------------------------------------------------------ 26. ANIMAZIONI */ /* Il motion system vive in fondo al file (sezione 30). */ /* ==================================================== 27. RESPONSIVE ==== */ @media (max-width:1180px){ .nav{gap:22px;} .grid-4{grid-template-columns:repeat(2,1fr);} } @media (max-width:1023px){ :root{--header-h:72px;} .nav,.lang--desktop{display:none;} .burger{display:flex;} .split,.split--media-lead{grid-template-columns:1fr; gap:var(--sp-5);} .split--reverse .split__media,.split__media{order:-1;} .split__tag{position:static; max-width:none; margin-top:0; box-shadow:none;} .grid-2,.grid-3{grid-template-columns:1fr 1fr;} .features{grid-template-columns:1fr 1fr;} .cat-grid{grid-template-columns:repeat(2,1fr);} .contact-grid{grid-template-columns:1fr;} .menu-cols{columns:1;} .mosaic{grid-template-columns:repeat(4,1fr);} .m-a{grid-column:span 4;} .m-b,.m-c,.m-d,.m-e{grid-column:span 2;} .foot-top{grid-template-columns:1fr 1fr;} .cutmap{display:none;} .cutlist-wrap{display:block;} } @media (min-width:1024px){ .cutlist-wrap{display:none;} .drawer{display:none;} } @media (max-width:767px){ .grid-3,.features{grid-template-columns:1fr;} .gallery-grid{grid-template-columns:repeat(2,1fr);} .strip{grid-template-columns:repeat(2,1fr);} .form-grid{grid-template-columns:1fr;} .page-hero{min-height:clamp(420px,70svh,560px);} .page-hero--home{min-height:92svh;} .hero-scroll{display:none;} .cta-band__inner{flex-direction:column; align-items:flex-start;} .timeline li{padding-left:36px;} } @media (max-width:599px){ :root{--pad:20px;} .grid-2{grid-template-columns:1fr;} .cat-grid{grid-template-columns:1fr; gap:2px;} .cat-card{aspect-ratio:3/2.2;} .strip,.mosaic{grid-template-columns:1fr; gap:8px;} .m-a,.m-b,.m-c,.m-d,.m-e{grid-column:span 1; aspect-ratio:4/3;} .foot-top{grid-template-columns:1fr; gap:34px;} .diet-legend{grid-template-columns:1fr;} .btn{width:100%;} .btn-group{flex-direction:column; align-items:stretch;} .cta-band .btn{width:auto;} .info-list li{grid-template-columns:1fr; gap:3px;} .menu-nav{gap:6px;} .menu-nav a{padding:10px 14px; font-size:11px;} .lineage{gap:18px;} .acc__head img{width:48px; height:48px;} } /* ------------------------------------------------ 28. REDUCED MOTION Rimosso il 1 ottobre 2026 su richiesta del cliente: le animazioni restano attive anche con prefers-reduced-motion (vedi motion.js). */ /* -------------------------------------------------------- 29. PRINT */ @media print{ .site-header,.drawer,.hero-scroll,.cta-band,.site-footer{display:none!important;} body{color:#000; background:#fff;} .reveal{opacity:1; transform:none;} } /* ========================================================================= 30. MOTION SYSTEM ------------------------------------------------------------------------- Regola d'oro: lo stato iniziale nascosto esiste SOLO sotto `html.motion`, classe che il JS aggiunge unicamente quando GSAP è caricato e ScrollTrigger è registrato. Conseguenza: senza JS, con JS in errore o con GSAP non caricato, nulla è mai invisibile. Il contenuto è il default; l'animazione è l'eccezione. ========================================================================= */ /* ---- stati iniziali: attivi solo a motion abilitato ---- */ html.motion [data-anim="text"], html.motion [data-anim="fade"], html.motion [data-anim="cta"], html.motion [data-anim-child]{ opacity:0; } html.motion [data-anim="media"] .m-mask{ clip-path:inset(0 0 100% 0); } html.motion [data-anim="media"] img, html.motion [data-anim="media"] picture{ transform:scale(1.07); } html.motion [data-anim="line"]{ transform:scaleX(0); transform-origin:left center; } /* Numeri editoriali: salgono da dentro una maschera, non sfumano. Il contenitore taglia, il numero trasla. Serve display:block per entrambi. */ html.motion [data-anim="num"]{ display:block; overflow:hidden; } html.motion [data-anim="num"] > .num-i{ display:block; transform:translateY(106%); will-change:transform; } html.motion [data-anim="bar"] > span{ transform:scaleX(0); transform-origin:left center; } /* i titoli: le righe vengono mascherate dal JS dopo lo split */ html.motion [data-anim="title"] .ln{ display:block; overflow:hidden; } html.motion [data-anim="title"] .ln-i{ display:block; will-change:transform; } html.motion [data-anim="title"]:not(.is-split){ opacity:0; } [data-anim="title"] .w{ display:inline-block; } /* ---- contenitore media: il vero componente di reveal ---- */ .m-media{ position:relative; overflow:hidden; } .m-mask{ display:block; overflow:hidden; will-change:clip-path; } /* l'hero usa lo stesso componente media ma a tutto schermo: queste regole devono venire DOPO .m-media, altrimenti position:relative lo rimpicciolisce */ .page-hero__media.m-media{ position:absolute; inset:0; } .page-hero__media .m-mask, .page-hero__media picture{ display:block; width:100%; height:100%; } .page-hero__media img{ width:100%; height:100%; object-fit:cover; } .m-media img{ will-change:transform; backface-visibility:hidden; } /* il parallax muove l'immagine DENTRO il contenitore: niente vuoti ai bordi */ .m-media--px .m-mask img{ transform:scale(1.14); } /* ---- utility ---- */ .m-clip{ overflow:hidden; } [data-anim]{ backface-visibility:hidden; } /* ---- reduced motion: nessuna eccezione, scelta del cliente (1 ottobre 2026) ---- */ /* ========================================================================= 31. HEADER REATTIVO ========================================================================= */ .site-header{ will-change:transform; transition:transform .5s var(--e-out), padding var(--d-base) ease, background var(--d-base) ease, box-shadow var(--d-base) ease; } .site-header.is-hidden{ transform:translateY(-100%); } body.nav-open .site-header.is-hidden{ transform:none; } .site-header.is-solid{ backdrop-filter:saturate(1.1) blur(6px); background:rgba(255,255,255,.94); } @supports not (backdrop-filter:blur(2px)){ .site-header.is-solid{ background:var(--paper); } } /* voci del drawer: entrata scaglionata */ html.motion .drawer .drawer-group, html.motion .drawer .drawer-single, html.motion .drawer .drawer-lang{ opacity:0; transform:translateY(14px); } body.nav-open .drawer .drawer-group, body.nav-open .drawer .drawer-single, body.nav-open .drawer .drawer-lang{ opacity:1; transform:none; transition:opacity .45s ease var(--dly,0s), transform .55s var(--e-out) var(--dly,0s); } /* ========================================================================= 32. MICROINTERAZIONI ========================================================================= */ .link-arrow{ position:relative; border-bottom:0; } .link-arrow::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:right center; transition:transform .45s var(--e-out); } .link-arrow:hover::after{ transform:scaleX(0); transform-origin:left center; } .link-arrow::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:.28; } .btn{ position:relative; overflow:hidden; isolation:isolate; } .btn::after{ content:''; position:absolute; inset:0; z-index:-1; background:currentColor; transform:scaleY(0); transform-origin:bottom center; transition:transform .42s var(--e-out); } .btn-line:hover::after,.btn-ghost:hover::after{ transform:scaleY(1); } .btn-line{ transition:color .3s ease .08s, border-color var(--d-base) ease; } .btn-line:hover{ color:var(--cream); background:transparent; } .btn-ghost:hover{ background:transparent; color:var(--ink); } .btn-solid::after{ background:var(--wine-dark); transform:scaleY(0); } .btn-solid:hover::after{ transform:scaleY(1); } .btn-solid:hover{ background:var(--wine); } .teaser img,.cat-card img,.gallery-item img,.card img{ will-change:transform; } .teaser:hover img,.cat-card:hover img{ transform:scale(1.045); } .gallery-item:hover img{ transform:scale(1.04); } .nav-link::after,.nav-toggle::after{ transform-origin:left center; } /* card cliccabili */ a.card,a.cat-card,a.teaser,a.event-card{ transition:transform .5s var(--e-out); } a.card:hover,a.event-card:hover{ transform:translateY(-4px); } /* ========================================================================= 33. COMPONENTI NUOVI ========================================================================= */ /* --- griglia fotografica dei tagli --- */ .cutgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); } .cut-tile{ display:block; } .cut-tile figcaption{ font-family:var(--f-display); font-size:clamp(17px,1.7vw,21px); font-weight:500; margin-top:14px; letter-spacing:-.01em; } .cut-tile .idx{ display:block; font-family:var(--f-body); font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--wine); margin-top:10px; } .cut-tile img{ width:100%; aspect-ratio:4/5; object-fit:cover; } /* riquadro sobrio per la fotografia non ancora disponibile */ /* --- marchio secondario: identita' del macello (Dutto Carni) ------------- Sempre subordinato a Martini Carni, mai in homepage. Il marchio non viene ridisegnato: solo rifilato ai bordi trasparenti. */ .brandnote{display:flex; align-items:center; gap:clamp(20px,3vw,40px); flex-wrap:wrap;} /* L'originale DUTTO CARNI e' un raster di 214x187 px: oltre i 96 px di larghezza CSS non regge su schermi a densita' doppia. La dimensione e' quindi limitata al massimo che resta nitido. Per usarlo piu' grande serve il file vettoriale: vedi documentation/MATERIALI-DA-RICHIEDERE.md */ .brandnote__logo{width:clamp(72px,8vw,96px); height:auto; flex:none;} .brandnote__body{flex:1 1 300px; min-width:0; padding-left:clamp(20px,3vw,40px); border-left:1px solid var(--line);} .brandnote__claim{ font-family:var(--f-display); font-weight:500; font-size:clamp(17px,1.9vw,21px); line-height:1.4; color:var(--ink); margin-top:8px; max-width:46ch; overflow-wrap:anywhere; } .brandnote__gloss{font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-top:8px; max-width:52ch;} @media (max-width:600px){ .brandnote__body{flex-basis:100%; padding-left:0; border-left:0; padding-top:18px; border-top:1px solid var(--line);} } .img-soon{ aspect-ratio:var(--ar,4/5); width:100%; background:var(--stone); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } .img-soon::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(158,27,46,.045) 0 14px,transparent 14px 28px); } .img-soon span{ position:relative; font-family:var(--f-display); font-style:italic; font-size:clamp(13px,1.3vw,15px); color:var(--wine); opacity:.75; text-align:center; padding:0 18px; line-height:1.4; } .s-ink .img-soon,.s-wine .img-soon{ background:rgba(255,255,255,.05); border-color:var(--line-light); } .s-ink .img-soon span,.s-wine .img-soon span{ color:rgba(255,255,255,.62); } /* --- dieta Unica: barra + voci --- */ .diet-bar span{ will-change:transform; } .diet-groups{ display:grid; gap:0; margin-top:26px; } .diet-group{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--line-light); align-items:baseline; } .diet-group:last-child{ border-bottom:1px solid var(--line-light); } .diet-group b{ font-family:var(--f-display); font-size:22px; font-weight:500; color:var(--cream); } .diet-group .nm{ font-size:15px; color:var(--cream); display:block; margin-bottom:4px; } .diet-group .it{ font-size:13px; color:rgba(255,255,255,.62); line-height:1.6; } /* --- fascia dati / numeri --- */ .figures{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); } .figure{ background:var(--paper); padding:clamp(26px,3.2vw,40px); } .s-ink .figures,.s-wine .figures{ background:var(--line-light); } .s-ink .figure,.s-wine .figure{ background:transparent; } .figure .v{ font-family:var(--f-display); font-size:clamp(30px,3.6vw,46px); font-weight:500; line-height:1; color:var(--wine); display:block; margin-bottom:12px; } .s-ink .figure .v,.s-wine .figure .v{ color:var(--brass-light); } .figure .k{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; } .s-ink .figure .k,.s-wine .figure .k{ color:rgba(255,255,255,.72); } /* --- blocco full-bleed fotografico --- */ .bleed-media{ position:relative; min-height:clamp(340px,54svh,560px); overflow:hidden; display:flex; align-items:flex-end; color:var(--cream); } .bleed-media .m-media{ position:absolute; inset:0; } .bleed-media .m-media img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); } .bleed-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,7,8,.12) 0%,rgba(20,7,8,.72) 100%); } .bleed-media__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(38px,5vw,64px); } .bleed-media h2{ max-width:18ch; } .bleed-media p{ color:rgba(255,255,255,.82); max-width:46ch; margin-top:16px; } /* --- eventi --- */ /* Eventi: la fotografia comanda, il testo sta sotto. Niente riquadro bordato, niente fondo: un evento non e' una scheda di un gestionale. Il primo evento in programma occupa due colonne ed e' panoramico. */ .event-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,32px); } .event-grid--2{ grid-template-columns:repeat(2,1fr); } .event-card{ background:none; border:0; overflow:hidden; display:flex; flex-direction:column; } .event-card .m-media{ overflow:hidden; } .event-card .m-media img{ aspect-ratio:4/5; width:100%; object-fit:cover; transition:transform var(--d-slow) var(--e-out); } .event-card:hover .m-media img{ transform:scale(1.04); } .event-card__body{ padding:var(--sp-3) 0 0; display:flex; flex-direction:column; flex:1; border-top:var(--rule-strong) solid var(--ink); } @media (min-width:768px){ .event-card--lead{ grid-column:span 2; } .event-card--lead .m-media img{ aspect-ratio:3/2; } .event-card--lead h3{ font-size:clamp(24px,2.8vw,34px); } } .event-card .date{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--wine); margin-bottom:10px; } .event-card h3{ font-size:clamp(19px,2vw,23px); margin-bottom:10px; } .event-card p{ font-size:14px; color:var(--ink-soft); line-height:1.65; } .event-list{ display:grid; gap:2px; background:var(--line); border-block:1px solid var(--line); } .event-row{ background:var(--paper); display:grid; grid-template-columns:150px 1fr auto; gap:24px; align-items:center; padding:20px 4px; } .event-row .m-media{ width:150px; } .event-row .m-media img{ aspect-ratio:3/2; width:100%; object-fit:cover; } .event-row h3{ font-size:19px; margin-bottom:5px; } .event-row .date{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; } .event-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .event-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .event-hero-meta{ display:flex; gap:28px; flex-wrap:wrap; margin-top:20px; font-size:13.5px; letter-spacing:.04em; } .event-hero-meta span{ display:flex; align-items:center; gap:9px; } .event-hero-meta span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brass-light); } /* --- timeline animata --- */ .timeline{ position:relative; } .timeline .spine{ position:absolute; left:8px; top:10px; bottom:10px; width:1px; background:var(--line); transform-origin:top center; } .timeline::before{ display:none; } /* ========================================================================= 34. RESPONSIVE DEI NUOVI COMPONENTI ========================================================================= */ @media (max-width:1023px){ .cutgrid{ grid-template-columns:repeat(3,1fr); } .event-grid{ grid-template-columns:repeat(2,1fr); } .figures{ grid-template-columns:1fr; } .event-gallery{ grid-template-columns:repeat(3,1fr); } } @media (max-width:767px){ .cutgrid{ grid-template-columns:repeat(2,1fr); gap:14px; } .event-grid,.event-grid--2{ grid-template-columns:1fr; } .event-row{ grid-template-columns:110px 1fr; gap:16px; } .event-row .m-media{ width:110px; } .event-row .btn{ grid-column:1/-1; width:100%; } .event-gallery{ grid-template-columns:repeat(2,1fr); gap:8px; } .diet-group{ grid-template-columns:52px 1fr; gap:14px; } .bleed-media{ min-height:clamp(300px,62svh,460px); } /* niente parallax da mobile: lo scroll resta nativo */ .m-media--px .m-mask img{ transform:none; } } @media (max-width:429px){ .cutgrid{ grid-template-columns:1fr 1fr; } .cut-tile figcaption{ font-size:16px; } } /* ========================================================================= EDITORIALE — componenti di composizione (2026) Nascono per rompere la sequenza "contenitore / contenitore / contenitore". Ogni componente ha una ragione compositiva dichiarata: non sono varianti estetiche intercambiabili. Usano solo i token gia' definiti in :root. ========================================================================= */ /* ---------------------------------------------------------- HERO EDITORIALE La fotografia cambia TAGLIO fra desktop e telefono, non solo dimensione: orizzontale in orizzontale, verticale in verticale. Lo scrim e' laterale su desktop (il testo sta a sinistra, la fotografia respira a destra) e dal basso su telefono, dove il testo occupa tutta la larghezza. --------------------------------------------------------------------- */ .ed-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; isolation:isolate; } .ed-hero__media{position:absolute; inset:0; z-index:var(--z-media);} .ed-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 42%); } /* Tre gradienti, ognuno con un compito: il basso regge il testo, l'alto regge l'header (senza, il menu bianco sparisce sulle zone chiare della fotografia), il laterale entra solo da desktop. Nessun velo piatto. */ .ed-hero::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--scrim-bottom), var(--scrim-top); } .ed-hero__inner{ position:relative; z-index:var(--z-content); width:100%; padding-bottom:clamp(96px,13vh,150px); color:var(--cream); } .ed-hero__tag{ font-size:var(--t-eyebrow); font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--cream); opacity:.82; display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,2.4vw,28px); } .ed-hero__tag::before{content:''; width:34px; height:1px; background:currentColor; flex:none;} .ed-hero h1{ font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); max-width:13ch; font-weight:400; } .ed-hero h1 em{font-style:italic; font-weight:300;} .ed-hero__sub{ margin-top:clamp(20px,2.6vw,30px); max-width:44ch; font-size:var(--t-lead); line-height:var(--lh-lead); color:rgba(255,255,255,.86); } .ed-hero .btn-group{margin-top:clamp(28px,3.4vw,42px);} /* Su desktop il testo occupa la meta' sinistra: lo scrim diventa laterale, cosi' la fotografia resta leggibile a destra invece di essere velata. */ @media (min-width:1024px){ .ed-hero::after{background:var(--scrim-left), var(--scrim-soft), var(--scrim-top);} .ed-hero__inner{padding-bottom:clamp(110px,15vh,180px);} .ed-hero h1{max-width:11ch;} } /* ------------------------------------------------------------------ SCORRI Microinterazione dedicata: una linea verticale percorsa da un segmento di luce. Non e' un fadeUp. Reagisce allo scorrimento tramite .is-scrolled, impostata da martini.js: si accorcia e si spegne. Con reduced-motion il segmento si ferma e resta un semplice indicatore statico. --------------------------------------------------------------------- */ .scorri{ position:absolute; z-index:var(--z-content); left:var(--pad); bottom:clamp(26px,4vh,46px); display:flex; align-items:center; gap:14px; color:var(--cream); font-size:10.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; opacity:.9; transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); } .scorri__rail{ position:relative; display:block; width:1px; height:var(--scorri-h,52px); background:rgba(255,255,255,.34); overflow:hidden; transition:height var(--d-slow) var(--e-out); } .scorri__rail::after{ content:''; position:absolute; left:0; width:100%; height:42%; background:linear-gradient(to bottom,rgba(255,255,255,0),var(--cream)); animation:scorri-run 2.4s cubic-bezier(.65,0,.35,1) infinite; } @keyframes scorri-run{ 0% {transform:translateY(-110%); opacity:0;} 22% {opacity:1;} 78% {opacity:1;} 100% {transform:translateY(240%); opacity:0;} } /* Appena l'utente scorre, si ritrae e sparisce: ha gia' fatto il suo lavoro. */ body.is-scrolled .scorri{opacity:0; transform:translateY(10px); pointer-events:none;} body.is-scrolled .scorri__rail{height:0;} @media (min-width:1024px){ .scorri{left:auto; right:var(--pad); --scorri-h:74px; flex-direction:column; gap:16px;} .scorri span:first-child{writing-mode:vertical-rl; letter-spacing:.3em;} } /* ------------------------------------------------------------- MANIFESTO Sezione volutamente SENZA fotografia: serve a interrompere la catena immagine-testo e a dare respiro prima del blocco successivo. --------------------------------------------------------------------- */ .ed-manifesto{padding-block:var(--section-y);} /* Su telefono e tablet verticale la doppia colonna ridurrebbe il testo a una striscia di sei parole: si impila. La griglia a due colonne entra solo quando c'e' davvero larghezza per due misure di riga leggibili. */ .ed-manifesto__grid{display:grid; gap:clamp(20px,4vw,34px); align-items:start;} @media (min-width:900px){ .ed-manifesto__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(24px,5vw,80px); } } .ed-year{ font-family:var(--f-display); font-weight:200; font-size:var(--t-num); line-height:.8; letter-spacing:-.04em; color:var(--wine); display:block; margin-left:-.06em; } .ed-manifesto__say{ font-family:var(--f-display); font-weight:300; font-size:clamp(25px,3.4vw,46px); line-height:1.18; letter-spacing:var(--ls-title); max-width:20ch; } .ed-manifesto__body{margin-top:var(--sp-4); max-width:var(--measure-narrow); color:var(--ink-soft); line-height:var(--lh-body);} .ed-manifesto .btn-group{margin-top:var(--sp-4);} /* ------------------------------------------------------------------ OFFSET Split asimmetrico: la colonna fotografica e' piu' stretta, sfalsata verso il basso e sconfina oltre il contenitore. Il testo resta allineato alla griglia. E' il contrario di due colonne uguali centrate. --------------------------------------------------------------------- */ .ed-offset{display:grid; grid-template-columns:1fr; gap:var(--sp-5);} .ed-offset__fig{position:relative; margin:0;} .ed-offset__fig img{width:100%; aspect-ratio:var(--ar,4/5); object-fit:cover; object-position:var(--pos,50% 50%);} .ed-offset__cap{ margin-top:var(--sp-2); font-size:var(--t-small); color:var(--ink-soft); letter-spacing:.03em; max-width:34ch; } .s-ink .ed-offset__cap,.s-wine .ed-offset__cap{color:rgba(255,255,255,.62);} .ed-offset__txt h2{font-size:var(--t-h2); line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:14ch;} .ed-offset__txt .lead{margin-top:var(--sp-3);} .ed-offset__txt .btn-group{margin-top:var(--sp-4);} @media (min-width:1024px){ .ed-offset{grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center;} .ed-offset--figfirst .ed-offset__fig{order:-1;} /* Lo sfalsamento verticale: la fotografia non parte alla stessa quota del testo. */ .ed-offset__fig{margin-block:calc(var(--sp-6) * -1) 0; transform:translateY(var(--sp-5));} .ed-offset--flat .ed-offset__fig{margin-block:0; transform:none;} } /* --------------------------------------------------------------- PASSAGGI 01 / 02 / 03 della filiera. NON tre card: una sequenza editoriale, con il numero come elemento strutturale e le fotografie di peso diverso. --------------------------------------------------------------------- */ .ed-steps{display:grid; gap:var(--sp-4); counter-reset:passo;} .ed-step{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); padding-top:var(--sp-4); border-top:var(--rule) solid var(--line); } .s-ink .ed-step,.s-wine .ed-step{border-top-color:var(--line-light);} .ed-step__n{ font-family:var(--f-display); font-weight:200; line-height:.9; font-size:clamp(40px,6vw,86px); color:var(--wine); letter-spacing:-.03em; } .s-ink .ed-step__n,.s-wine .ed-step__n{color:var(--cream); opacity:.9;} .ed-step h3{font-size:var(--t-h3); margin-bottom:var(--sp-1);} .ed-step p{color:var(--ink-soft); line-height:var(--lh-body); max-width:40ch;} .s-ink .ed-step p,.s-wine .ed-step p{color:rgba(255,255,255,.76);} .ed-step__fig{margin:0;} .ed-step__fig img{width:100%; aspect-ratio:var(--ar,3/2); object-fit:cover; object-position:var(--pos,50% 50%);} @media (min-width:768px){ .ed-step{grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr); gap:clamp(20px,3.5vw,52px); align-items:start;} /* Senza testo descrittivo la colonna centrale resterebbe un buco: si stringe al nome e la fotografia prende il resto. */ .ed-step--bare{grid-template-columns:auto max-content minmax(0,1fr); align-items:center;} .ed-step--bare:nth-child(even){grid-template-columns:auto max-content minmax(0,1fr);} .ed-step__n{min-width:2.2ch;} /* Alternanza del peso fotografico: 3/2, poi 4/5, poi 3/2. Il ritmo nasce dalla proporzione, non da una decorazione. */ .ed-step:nth-child(even) .ed-step__fig img{aspect-ratio:var(--ar-portrait);} .ed-step:nth-child(even){grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);} } /* ------------------------------------------------------------------ INDICE Elenco editoriale: numero, nome, filetto. Sostituisce una griglia di card dove il contenuto e' in realta' un elenco di nomi. --------------------------------------------------------------------- */ .ed-index{border-top:var(--rule) solid var(--line);} .s-ink .ed-index,.s-wine .ed-index,.s-deep .ed-index{border-top-color:var(--line);} .s-ink .ed-index{border-top-color:var(--line-light);} .ed-index__row{ display:grid; grid-template-columns:3.4ch minmax(0,1fr) auto; gap:var(--sp-3); align-items:baseline; padding-block:clamp(13px,1.5vw,19px); border-bottom:var(--rule) solid var(--line); } .s-ink .ed-index__row{border-bottom-color:var(--line-light);} .ed-index__n{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--wine); font-variant-numeric:tabular-nums; } .s-ink .ed-index__n{color:var(--cream); opacity:.65;} .ed-index__name{ font-family:var(--f-display); font-weight:400; font-size:clamp(18px,2.1vw,26px); line-height:1.2; letter-spacing:var(--ls-title); } .ed-index__meta{font-size:var(--t-small); color:var(--ink-soft); letter-spacing:.03em;} .s-ink .ed-index__meta{color:rgba(255,255,255,.6);} a.ed-index__row{transition:padding-left var(--d-base) var(--e-out), background var(--d-base) ease;} a.ed-index__row:hover{padding-left:12px; background:rgba(158,27,46,.045);} .s-ink a.ed-index__row:hover{background:rgba(255,255,255,.05);} a.ed-index__row .ed-index__meta svg{width:12px; height:12px; vertical-align:-1px;} /* Indice a due colonne quando le voci sono molte e brevi. */ @media (min-width:900px){ .ed-index--two{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(30px,4vw,64px);} .ed-index--two .ed-index__row:nth-child(-n+2){border-top:0;} } /* -------------------------------------------------------------- BANDA PIENA Fotografia a tutta larghezza con il testo dentro la griglia. Lo scrim c'e' solo dove serve al testo. --------------------------------------------------------------------- */ .ed-band{position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(420px,62vh,720px); overflow:hidden;} .ed-band__media{position:absolute; inset:0; z-index:var(--z-media);} .ed-band__media img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);} .ed-band::after{content:''; position:absolute; inset:0; z-index:2; background:var(--scrim-bottom); pointer-events:none;} .ed-band__inner{position:relative; z-index:var(--z-content); width:100%; color:var(--cream); padding-block:clamp(40px,7vw,86px);} .ed-band__inner h2{font-size:clamp(28px,4.4vw,58px); line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:16ch;} .ed-band__inner p{margin-top:var(--sp-3); max-width:46ch; color:rgba(255,255,255,.86); line-height:var(--lh-lead);} .ed-band__inner .btn-group{margin-top:var(--sp-4);} .ed-band--tall{min-height:clamp(520px,82vh,860px);} /* ------------------------------------------------------------------ DIVIDER Filetto che entra con scaleX. Serve a chiudere un ragionamento, non a riempire uno spazio: si usa con parsimonia. --------------------------------------------------------------------- */ .ed-rule{height:1px; background:var(--line); transform-origin:left center;} .s-ink .ed-rule,.s-wine .ed-rule{background:var(--line-light);} /* ------------------------------------------------------------ MICRO-GRIGLIA Packshot piccoli in fila: il catalogo come indice visivo, non come otto card grandi che occupano due schermate. --------------------------------------------------------------------- */ .ed-chips{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.6vw,18px);} .ed-chip{display:block; position:relative; background:var(--ink); overflow:hidden;} .ed-chip img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform var(--d-slow) var(--e-out); opacity:.92;} .ed-chip:hover img{transform:scale(1.05); opacity:1;} .ed-chip__l{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(10px,1.4vw,16px); color:var(--cream); background:linear-gradient(to top,rgba(20,9,10,.88) 0%,rgba(20,9,10,.55) 52%,rgba(20,9,10,0) 100%); font-size:clamp(12px,1.25vw,14.5px); font-weight:600; letter-spacing:.02em; line-height:1.25; } .ed-chip__n{display:block; font-size:10px; font-weight:700; letter-spacing:.16em; opacity:.72; margin-bottom:3px;} @media (min-width:600px){ .ed-chips{grid-template-columns:repeat(4,1fr);} } /* ------------------------------------------------------------------- COPPIA Due fotografie di formato diverso accostate: la verticale regge la composizione, l'orizzontale la chiude. Niente didascalie inventate. --------------------------------------------------------------------- */ .ed-pair{display:grid; grid-template-columns:1fr; gap:clamp(12px,2vw,22px);} .ed-pair figure{margin:0;} .ed-pair img{width:100%; object-fit:cover; object-position:var(--pos,50% 50%);} .ed-pair__tall img{aspect-ratio:var(--ar-portrait-tall);} .ed-pair__wide img{aspect-ratio:var(--ar-landscape);} @media (min-width:768px){ .ed-pair{grid-template-columns:1.15fr .85fr; align-items:end;} .ed-pair__wide{padding-bottom:clamp(20px,4vw,56px);} } /* ---------------------------------------------------------------- GENERAZIONI La storia di famiglia come racconto, non come timeline da cruscotto: niente spina verticale, niente pallini, niente riquadri. Un anno o un nome in grande, il testo accanto, un filetto a separare. Le voci alternano il peso tipografico perche' non sono tutte della stessa natura: '1929' e' una data, 'Tommaso' e' una persona. --------------------------------------------------------------------- */ .ed-saga{display:grid; gap:0;} .ed-saga__row{ display:grid; grid-template-columns:1fr; gap:var(--sp-2); padding-block:clamp(26px,3.4vw,44px); border-top:var(--rule) solid var(--line); } .ed-saga__row:last-child{border-bottom:var(--rule) solid var(--line);} .ed-saga__k{ font-family:var(--f-display); font-weight:200; line-height:.92; font-size:clamp(34px,5.6vw,76px); letter-spacing:-.03em; color:var(--wine); } .ed-saga__row--name .ed-saga__k{font-weight:300; font-style:italic; color:var(--ink);} .ed-saga__t{font-family:var(--f-body); font-size:11.5px; font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--sp-1);} .ed-saga__b{color:var(--ink-soft); line-height:var(--lh-body); max-width:52ch;} @media (min-width:768px){ .ed-saga__row{grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:baseline;} } /* -------------------------------------------------------- TRE MOMENTI FORTI Macello, laboratorio, punto vendita. Non tre card: tre fotografie a piena altezza con il numero e il nome sopra, affiancate su desktop e impilate su telefono. La composizione alterna l'altezza perche' il blocco non sembri una griglia di prodotti. --------------------------------------------------------------------- */ .ed-trio{display:grid; grid-template-columns:1fr; gap:clamp(14px,2.4vw,26px);} .ed-trio__cell{position:relative; isolation:isolate; overflow:hidden; background:var(--ink);} .ed-trio__cell img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); aspect-ratio:var(--ar,4/5); transition:transform var(--d-slow) var(--e-out); } .ed-trio__cell::after{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(20,9,10,.90) 0%,rgba(20,9,10,.52) 42%,rgba(20,9,10,.06) 78%);} .ed-trio__txt{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(20px,2.4vw,32px); color:var(--cream);} .ed-trio__n{font-family:var(--f-display); font-weight:200; font-size:clamp(30px,3.4vw,48px); line-height:.9; display:block; margin-bottom:var(--sp-2); opacity:.85;} .ed-trio__txt h3{font-size:var(--t-h3); margin-bottom:var(--sp-1);} .ed-trio__txt p{font-size:14px; line-height:1.6; color:rgba(255,255,255,.8); max-width:34ch;} @media (min-width:768px){ .ed-trio{grid-template-columns:repeat(3,1fr); align-items:end;} /* Altezze diverse: la colonna centrale scende, le laterali salgono. */ .ed-trio__cell:nth-child(2){--ar:3/4;} .ed-trio__cell:nth-child(1),.ed-trio__cell:nth-child(3){--ar:4/5;} } /* ------------------------------------------------------ RITRATTO EDITORIALE Una fotografia di persone non si tratta come uno sfondo: cambia proporzione e punto focale a ogni formato, dichiarati qui e non lasciati al caso di object-fit. Nessuna didascalia con nomi o ruoli: non sono stati forniti. --------------------------------------------------------------------- */ .ed-portrait{margin:0;} .ed-portrait img{ width:100%; object-fit:cover; aspect-ratio:var(--ar-m,4/5); object-position:var(--pos-m,50% 34%); } @media (min-width:768px){ .ed-portrait img{aspect-ratio:var(--ar-t,3/2); object-position:var(--pos-t,50% 34%);} } @media (min-width:1280px){ .ed-portrait img{aspect-ratio:var(--ar-d,21/9); object-position:var(--pos-d,50% 32%);} } .ed-portrait figcaption{ margin-top:var(--sp-2); font-size:var(--t-small); color:var(--ink-soft); letter-spacing:.03em; max-width:60ch; } /* ========================================================================= QUATTRO FAMIGLIE DI LAYOUT — linguaggio Martini ------------------------------------------------------------------------- La varieta' non nasce da undici layout diversi: nasce da quattro famiglie riusate con intenzione. La ripetizione qui e' voluta, perche' e' cio' che rende una pagina riconoscibile. A .lf-photo fotografia a tutto campo, testo dentro la griglia B .lf-duo split editoriale: la fotografia arriva al bordo pagina C .lf-index indice tipografico su fondo caldo D .lf-feature blocco scuro o bordeaux, con la fotografia dentro Regola fotografica: una fotografia o riempie meta' sezione arrivando al bordo, oppure riempie tutto. Non galleggia dentro il bianco. ========================================================================= */ /* Il contenitore fotografico deve arrivare fino in fondo: la maschera del reveal e' un a blocco, e senza queste righe l'immagine conserva la propria proporzione, object-fit non entra mai in gioco e il taglio finisce altrove. E' il difetto che rendeva la hero irriconoscibile. */ .lf-photo__media,.lf-photo__media .m-mask,.lf-photo__media picture, .lf-duo__fig .m-mask,.lf-duo__fig picture, .lf-feature__fig .m-mask,.lf-feature__fig picture{ position:absolute; inset:0; display:block; } .lf-photo__media img,.lf-duo__fig img,.lf-feature__fig img{ width:100%; height:100%; object-fit:cover; } /* ─────────────────────────────────────────────── A · FOTOGRAFIA A TUTTO CAMPO */ .lf-photo{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; min-height:clamp(420px,66vh,760px); background:var(--ink); } .lf-photo--tall{min-height:clamp(560px,88vh,900px);} .lf-photo--hero{min-height:100svh;} .lf-photo__media{position:absolute; inset:0; z-index:var(--z-media);} .lf-photo__media img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);} .lf-photo::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--scrim-bottom), var(--scrim-top); } .lf-photo__in{ position:relative; z-index:var(--z-content); width:100%; color:var(--cream); padding-block:clamp(40px,6vw,76px); } .lf-photo__in h2,.lf-photo__in h1{ font-size:clamp(30px,4.6vw,62px); line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:15ch; } .lf-photo__in p{margin-top:var(--sp-3); max-width:44ch; color:rgba(255,255,255,.88); line-height:var(--lh-lead);} .lf-photo__in .btn-group{margin-top:var(--sp-4);} /* La hero ha lo scrim laterale da desktop: il testo sta a sinistra e la fotografia resta leggibile a destra invece di essere velata tutta. */ .lf-photo--hero .lf-photo__in{padding-bottom:clamp(96px,13vh,150px);} .lf-photo--hero h1{ font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); font-weight:400; max-width:13ch; } .lf-photo--hero h1 em{font-style:italic; font-weight:300;} @media (min-width:1024px){ .lf-photo--hero::after{background:var(--scrim-left), var(--scrim-soft), var(--scrim-top);} .lf-photo--hero h1{max-width:11ch;} } /* ──────────────────────────────────────────────────── B · SPLIT EDITORIALE */ /* La colonna fotografica arriva al bordo della pagina e riempie l'altezza della sezione: e' il contrario della foto piccola dentro il contenitore. */ .lf-duo{display:grid; grid-template-columns:1fr; background:var(--paper);} .lf-duo--ink{background:var(--ink); color:var(--cream);} .lf-duo--deep{background:var(--paper-deep);} .lf-duo--stone{background:var(--stone);} .lf-duo__fig{position:relative; margin:0; overflow:hidden; min-height:clamp(320px,52vw,560px);} .lf-duo__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); } .lf-duo__txt{ padding:clamp(40px,6vw,96px) var(--pad); display:flex; flex-direction:column; justify-content:center; } .lf-duo__txt > * {max-width:46ch;} .lf-duo__txt .btn-group{max-width:none;} .lf-duo__txt h2{font-size:var(--t-h2); line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:15ch;} .lf-duo__txt .lead{margin-top:var(--sp-3);} .lf-duo__txt .btn-group{margin-top:var(--sp-4);} .lf-duo--ink .lf-duo__txt .lead{color:rgba(255,255,255,.8);} @media (min-width:900px){ .lf-duo{grid-template-columns:1fr 1fr; align-items:stretch;} .lf-duo__fig{min-height:clamp(520px,58vw,760px);} .lf-duo--rev .lf-duo__fig{order:2;} /* Il testo si allinea alla griglia del sito, non al bordo dello schermo. */ .lf-duo__txt{padding-inline:clamp(40px,5vw,84px);} .lf-duo:not(.lf-duo--rev) .lf-duo__txt{padding-right:max(var(--pad),calc((100vw - var(--container))/2 + var(--pad)));} .lf-duo--rev .lf-duo__txt{padding-left:max(var(--pad),calc((100vw - var(--container))/2 + var(--pad)));} } /* Proporzione fotografica dichiarata: 5/8 desktop, 4/5 telefono. */ @media (max-width:899px){ .lf-duo__fig{aspect-ratio:4/5; min-height:0;} } /* Anno editoriale dentro la colonna di testo: grande, ma non isolato. E' la data di fondazione, non un esercizio tipografico. */ .lf-year{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-3); color:var(--wine); } .lf-year b{ font-family:var(--f-display); font-weight:200; font-size:clamp(54px,6.4vw,104px); line-height:.82; letter-spacing:-.04em; } .lf-year span{ font-size:var(--t-eyebrow); font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-soft); } .lf-duo--ink .lf-year span{color:rgba(255,255,255,.7);} /* Citazione: filetto bordeaux, corpo contenuto. Non e' un titolo. */ .lf-quote{ margin-top:var(--sp-4); padding-left:var(--sp-3); border-left:var(--rule-strong) solid var(--wine); font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(17px,1.7vw,22px); line-height:1.45; color:var(--ink); max-width:34ch; } .lf-duo--ink .lf-quote{color:var(--cream); border-left-color:var(--brass-light);} /* ─────────────────────────────────────────────── C · INDICE TIPOGRAFICO */ .lf-index{background:var(--stone); padding-block:var(--section-y);} /* Separatore fra macro-blocchi: un filetto bordeaux sopra l'occhiello. Serve a dare uno stacco senza aprire una voragine bianca fra le sezioni. */ .lf-open{padding-top:clamp(52px,6vw,88px);} .lf-open .lf-rule{margin-bottom:clamp(26px,3vw,44px);} .lf-index__head{display:grid; gap:var(--sp-3); align-items:end; margin-bottom:var(--sp-5);} .lf-index__head h2{font-size:var(--t-h2); line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:13ch;} @media (min-width:900px){ .lf-index__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px);} } /* ─────────────────────────────────── D · BLOCCO SCURO / BORDEAUX CON FOTO */ /* Il bordeaux non e' un rettangolo pieno appoggiato in mezzo alla pagina: contiene la fotografia, cosi' colore e immagine sono un blocco solo. */ .lf-feature{background:var(--wine-dark); color:var(--cream); overflow:hidden;} .lf-feature--ink{background:var(--ink);} .lf-feature__grid{display:grid; grid-template-columns:1fr; align-items:stretch;} .lf-feature__fig{position:relative; margin:0; min-height:clamp(280px,46vw,440px); overflow:hidden;} .lf-feature__fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);} /* Una velatura del colore della sezione lega la fotografia al fondo. */ .lf-feature__fig::after{ content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(74,10,16,.62),rgba(74,10,16,.16) 62%,rgba(74,10,16,.34) 100%); mix-blend-mode:multiply; } .lf-feature--ink .lf-feature__fig::after{background:linear-gradient(to right,rgba(26,12,13,.5),rgba(26,12,13,0) 55%);} .lf-feature__txt{padding:clamp(40px,6vw,88px) clamp(40px,5vw,84px); display:flex; flex-direction:column; justify-content:center;} .lf-feature__txt h2{font-size:var(--t-h2); line-height:var(--lh-title); letter-spacing:var(--ls-title); max-width:14ch;} .lf-feature__txt .lead{margin-top:var(--sp-3); color:rgba(255,255,255,.82); max-width:46ch;} .lf-feature__txt .btn-group{margin-top:var(--sp-4);} @media (min-width:900px){ .lf-feature__grid{grid-template-columns:.92fr 1.08fr;} .lf-feature__fig{min-height:clamp(440px,48vw,620px);} .lf-feature__txt{padding-right:max(var(--pad),calc((100vw - var(--container))/2 + var(--pad)));} } /* ───────────────────────────────────────────── TRITTICO FOTOGRAFICO PIENO */ /* I tre passaggi della filiera: tre fotografie accostate senza spazi, a tutta larghezza. Il numero e il nome stanno dentro la fotografia. Nessun bianco fra un passaggio e l'altro: la filiera e' continua, e si vede. */ .lf-chain{display:grid; grid-template-columns:1fr;} .lf-chain__cell{position:relative; isolation:isolate; overflow:hidden; background:var(--ink);} .lf-chain__cell img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); aspect-ratio:var(--ar,3/2); transition:transform var(--d-slow) var(--e-out); } .lf-chain__cell::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(20,9,10,.88) 0%,rgba(20,9,10,.34) 46%,rgba(20,9,10,0) 78%); } .lf-chain__txt{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px,2.6vw,40px); color:var(--cream); display:flex; align-items:baseline; gap:var(--sp-3); } .lf-chain__n{ font-family:var(--f-display); font-weight:200; font-size:clamp(28px,3vw,44px); line-height:.9; opacity:.92; } .lf-chain__l{font-size:clamp(15px,1.5vw,19px); font-weight:600; letter-spacing:.01em;} @media (min-width:768px){ .lf-chain{grid-template-columns:repeat(3,1fr);} /* Piu' altezza: le tre fotografie della filiera sono il momento in cui si vede il mestiere, e a 3/4 restavano compresse. Restano attaccate: il respiro arriva dalla proporzione, non da uno spazio fra una e l'altra. */ .lf-chain__cell{--ar:2/3;} } /* Variante del trittico con un testo dentro la fotografia: serve dove i tre passaggi hanno una spiegazione e non solo un nome (Chi siamo, "Tutto sotto lo stesso controllo"). Stessa famiglia, stesso impianto attaccato. */ .lf-chain--rich .lf-chain__txt{display:block;} .lf-chain--rich .lf-chain__n{display:block; margin-bottom:var(--sp-2);} .lf-chain--rich .lf-chain__l{display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(19px,2.1vw,26px); line-height:1.15; margin-bottom:var(--sp-1);} .lf-chain--rich .lf-chain__b{ display:block; font-size:14px; line-height:1.6; color:rgba(255,255,255,.82); max-width:36ch; } @media (min-width:768px){ .lf-chain--rich .lf-chain__cell{--ar:3/4;} } /* ───────────────────────────────────────── MOSAICO DI GAMMA (catalogo) */ /* Otto famiglie: un mosaico fotografico continuo a tutta larghezza, non otto schede da e-commerce. Nessuno spazio fra le tessere: e' una gamma, si legge come un blocco solo. */ .lf-range{display:grid; grid-template-columns:repeat(2,1fr);} .lf-range__cell{position:relative; display:block; overflow:hidden; background:var(--ink); isolation:isolate;} /* La griglia era corretta ma troppo regolare: otto quadrati identici leggono "catalogo". La prima riga e' verticale, la seconda quadrata: la gamma si apre e si chiude. Nessuna tessera cambia dimensione dentro la riga, quindi non si aprono buchi fra le fotografie. */ .lf-range__cell:nth-child(-n+4) img{aspect-ratio:var(--ar-r1,4/5);} .lf-range__cell img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform var(--d-slow) var(--e-out), opacity var(--d-base) ease; opacity:.9; } .lf-range__cell::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top,rgba(20,9,10,.9) 0%,rgba(20,9,10,.3) 48%,rgba(20,9,10,0) 76%); } /* I packshot sono su fondo chiaro da studio: senza una velatura calda il mosaico si spezzerebbe in otto quadrati pallidi invece di leggersi come un blocco solo. La velatura tocca il fondo, non la carne. */ .lf-range__cell::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(232,218,203,.55),rgba(232,218,203,0) 62%); mix-blend-mode:multiply; } .lf-range__cell:hover img{transform:scale(1.05); opacity:1;} .lf-range__t{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(14px,1.6vw,22px); color:var(--cream); } .lf-range__t b{display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(15px,1.5vw,20px); line-height:1.2;} .lf-range__t span{display:block; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.72; margin-bottom:4px;} @media (max-width:767px){ .lf-range__cell:nth-child(-n+4) img{aspect-ratio:1/1;} } @media (min-width:768px){ .lf-range{grid-template-columns:repeat(4,1fr);} /* Sette voci su quattro colonne lascerebbero un buco in fondo: l'ultima tessera occupa due colonne e la riga si chiude. */ .lf-range--sette .lf-range__cell:last-child{grid-column:span 2;} .lf-range--sette .lf-range__cell:last-child img{aspect-ratio:2/1;} } /* Il filetto bordeaux compare al passaggio del puntatore: e' l'accento del marchio usato come dettaglio, non come rettangolo. */ .lf-range__cell::after{transition:background var(--d-base) ease;} .lf-range__t b{transition:transform var(--d-base) var(--e-out);} .lf-range__cell:hover .lf-range__t b{transform:translateX(4px);} .lf-range__cell:hover .lf-range__t::before{transform:scaleX(1);} .lf-range__t::before{ content:''; display:block; width:26px; height:var(--rule-strong); background:var(--wine); margin-bottom:8px; transform:scaleX(0); transform-origin:left center; transition:transform var(--d-base) var(--e-out); } /* Numeri chiave su fondo scuro: tre voci separate da un filetto, senza riquadri. Usato in Porzionatura. */ .lf-figs{display:grid; gap:var(--sp-4); grid-template-columns:1fr;} .lf-fig__v{font-family:var(--f-display); font-weight:200; font-size:clamp(34px,4.4vw,62px); line-height:.94; letter-spacing:-.02em; color:var(--cream);} .lf-fig__k{margin-top:var(--sp-2); font-size:14px; line-height:1.6; color:rgba(255,255,255,.76); max-width:34ch;} @media (min-width:768px){ .lf-figs{grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px);} .lf-figs > div + div{border-left:var(--rule) solid var(--line-light); padding-left:clamp(20px,3vw,44px);} } /* ────────────────────────────────────────────────────── FILETTO BORDEAUX */ /* Divisore sistemico: compare fra due sezioni chiare, mai a caso. */ .lf-rule{height:var(--rule-strong); background:var(--wine); transform-origin:left center;} /* ========================================================================= FASE 1 — CORREZIONI GRAFICHE (1 ottobre 2026) ------------------------------------------------------------------------- Strato unico in fondo al foglio: si legge in un punto solo e si toglie in un punto solo. Cinque interventi: 1. un solo fondo chiaro (avorio scuro e sabbia diventano avorio) 2. etichette rosé leggibili sui fondi scuri (7,2:1 sul bruno) 3. testo corrente minimo 15px, etichette maiuscole minimo 13px 4. gli split foto/testo dividono tutti la pagina a meta' 5. il primo bottone di ogni gruppo e' l'azione principale, piena ========================================================================= */ :root{ --paper-deep:var(--paper); /* 1. niente piu' tre toni di avorio vicini */ --stone:var(--paper); --rose:#E8818D; /* 2. accento su fondo scuro */ --t-eyebrow:13px; /* 3. scala tipografica */ --t-small:15px; --t-body:clamp(16px, 1.15vw, 17px); --t-lead:clamp(17px, 1.45vw, 19.5px); } /* 1 · due sezioni chiare consecutive: un filetto le separa, non un cambio di colore. Se la seconda ha gia' il filetto bordeaux (.lf-open) non serve. */ :is(.s-paper,.s-deep,.s-stone,.lf-index,.lf-duo:not(.lf-duo--ink)) + :is(.s-paper,.s-deep,.s-stone,.lf-index,.lf-duo:not(.lf-duo--ink)):not(.lf-open){ border-top:var(--rule) solid var(--line); } /* 2 · occhielli sui fondi bruno e bordeaux */ .lf-feature .eyebrow,.lf-duo--ink .eyebrow,.cta-band .eyebrow, .s-ink .eyebrow,.s-wine .eyebrow{color:var(--rose);} .lf-feature .eyebrow::before,.lf-duo--ink .eyebrow::before,.cta-band .eyebrow::before, .s-ink .eyebrow::before,.s-wine .eyebrow::before{background:var(--rose);} .lf-duo--ink .lf-year span{color:rgba(255,255,255,.78);} /* 3 · testo corrente: minimo 15px */ .split__caption,.lineage span,.teaser__body p,.diet-legend li,.cut-label,.cutmap-note, .cat-card__info .ex,.cat-note,.gallery-item figcaption,.inline-list li,.dish .note, .menu-foot,.field .hint,.placeholder li,.brandnote__gloss,.diet-group .it,.figure .k, .event-hero-meta,.feature p,.lf-chain--rich .lf-chain__b,.lf-fig__k,.cta-band p, .ed-offset__cap,.ed-index__meta,.ed-portrait figcaption{font-size:15px;} .check,.foot-bottom{font-size:14px;} .diet-legend li,.diet-group .it{color:rgba(255,255,255,.82);} /* etichette maiuscole: minimo 13px */ .dropdown a small,.lang a,.drawer-lang a,.page-hero__tag,.hero-scroll,.crumbs, .teaser__body .n,.teaser__body .go,.cutlist__panel dt,.cat-card__info .n,.acc__head .t span, .menu-nav a,.event-card .date,.event-row .date,.contact-card .role,.info-list dt,.info-list .k, .field label,.placeholder .tagname,.foot-col h2,.foot-col h3,.scorri,.ed-index__n, .ed-chip__n,.ed-saga__t,.lf-range__t span,.cut-tile .idx,.ed-chip__l{font-size:13px;} .brand-text span{font-size:11px;} /* 4 · split: stessa proporzione dei blocchi foto/testo chiari (meta' e meta'), cosi' il bordo della fotografia non salta da un blocco all'altro */ @media (min-width:900px){ .lf-feature__grid{grid-template-columns:1fr 1fr;} .lf-feature__txt{padding-left:clamp(40px,5vw,84px);} } /* 5 · azione principale: il primo bottone del gruppo e' pieno */ .btn-group > .btn:first-child:is(.btn-line,.btn-ghost){ background:var(--wine); border-color:var(--wine); color:var(--cream); transition:color .3s ease, border-color var(--d-base) ease; } .btn-group > .btn:first-child:is(.btn-line,.btn-ghost)::after{background:var(--wine-dark);} .btn-group > .btn:first-child:is(.btn-line,.btn-ghost):hover{color:var(--cream); border-color:var(--wine-dark);} /* sul bordeaux il bottone pieno bordeaux sparirebbe: diventa chiaro */ :is(.lf-feature:not(.lf-feature--ink),.cta-band--wine,.s-wine) .btn-group > .btn:first-child:is(.btn-line,.btn-ghost){ background:var(--cream); border-color:var(--cream); color:var(--wine-dark); } :is(.lf-feature:not(.lf-feature--ink),.cta-band--wine,.s-wine) .btn-group > .btn:first-child:is(.btn-line,.btn-ghost)::after{background:var(--paper);} :is(.lf-feature:not(.lf-feature--ink),.cta-band--wine,.s-wine) .btn-group > .btn:first-child:is(.btn-line,.btn-ghost):hover{color:var(--wine-dark); border-color:var(--paper);} /* correzione: con le etichette a 13px "PRENOTAZIONI" non stava nei 110px della colonna e finiva sopra il numero (Contatti) */ .info-list li{grid-template-columns:minmax(0,136px) minmax(0,1fr);} .info-list dt,.info-list .k{font-family:var(--f-body);} @media (max-width:767px){ .info-list li{grid-template-columns:1fr;} } /* ========================================================================= PAGINE LEGALI — privacy e cookie (1 ottobre 2026) ========================================================================= */ .legal{background:var(--paper); padding-block:calc(var(--header-h) + clamp(48px,7vw,96px)) var(--section-y);} .legal__head{max-width:68ch; margin-bottom:clamp(40px,5vw,64px);} .legal__head h1{font-size:var(--t-h1); line-height:var(--lh-title); letter-spacing:var(--ls-title);} .legal__head .lead{margin-top:var(--sp-3); max-width:62ch;} .legal__sec{display:grid; gap:var(--sp-2) clamp(24px,5vw,80px); padding-block:clamp(26px,3vw,40px); border-top:var(--rule) solid var(--line);} .legal__sec h2{font-size:clamp(20px,1.9vw,24px); line-height:1.25;} .legal__body{max-width:68ch; color:var(--ink-soft); line-height:var(--lh-body);} .legal__body > * + *{margin-top:var(--sp-3);} .legal__body ul{padding-left:1.2em; list-style:disc; display:grid; gap:10px;} .legal__body strong{color:var(--ink); font-weight:600;} .legal__body a{color:var(--wine); text-decoration:underline; text-underline-offset:3px;} .legal__body code{font-size:.92em; background:var(--white); padding:2px 6px; border:1px solid var(--line);} .legal-table{overflow-x:auto; border-top:var(--rule-strong) solid var(--ink);} .legal-table table{border-collapse:collapse; width:100%; min-width:620px; font-size:15px;} .legal-table th,.legal-table td{text-align:left; vertical-align:top; padding:12px 14px 12px 0; border-bottom:var(--rule) solid var(--line);} .legal-table th{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); font-weight:700;} @media (min-width:900px){ .legal__sec{grid-template-columns:minmax(0,4fr) minmax(0,8fr);} } /* ========================================================================= FOOTER — ridisegno (1 ottobre 2026) Quattro colonne di pari peso, orari in tabella che non vanno a capo a meta' orario, pagine su una riga, note legali e lingua in fondo. ========================================================================= */ .foot-top{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr)); gap:clamp(32px,4vw,64px); padding:clamp(64px,7vw,96px) 0 clamp(40px,5vw,56px); align-items:start;} .foot-brand img{width:56px;} .foot-brand p{font-size:15px; color:rgba(255,255,255,.72);} .foot-col h2,.foot-col h3{color:var(--rose); margin-bottom:18px;} .foot-col li{font-size:15px; line-height:1.5; margin-bottom:10px;} .foot-col a{transition:color var(--d-fast) ease;} .foot-col a:hover{color:var(--cream); text-decoration:underline; text-underline-offset:3px;} .foot-hours{display:grid; gap:12px; margin:0;} .foot-hours > div{display:grid; gap:2px;} .foot-hours dt{font-size:15px; color:var(--cream); font-weight:600;} .foot-hours dd{margin:0; font-size:15px; color:rgba(255,255,255,.78); display:flex; flex-wrap:wrap; gap:0 10px;} .foot-hours dd span{white-space:nowrap;} .foot-hours dd span + span::before{content:'·'; margin-right:10px; opacity:.5;} .foot-nav{border-top:1px solid rgba(255,255,255,.15); padding-block:22px;} .foot-nav ul{display:flex; flex-wrap:wrap; gap:6px clamp(18px,2.4vw,34px);} .foot-nav a{display:inline-flex; align-items:center; min-height:36px; font-size:15px; color:rgba(255,255,255,.86);} .foot-nav a:hover{color:var(--cream); text-decoration:underline; text-underline-offset:3px;} .foot-bottom{align-items:center; font-size:14px; color:rgba(255,255,255,.6);} .foot-legal{display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px;} .foot-legal a{display:inline-flex; align-items:center; min-height:36px; color:rgba(255,255,255,.78);} .foot-legal a:hover{color:var(--cream); text-decoration:underline; text-underline-offset:3px;} .foot-legal .foot-lang:first-of-type{margin-left:10px; padding-left:22px; border-left:1px solid rgba(255,255,255,.2);} .foot-legal .foot-lang + .foot-lang{margin-left:-8px;} .foot-lang a{font-weight:700; letter-spacing:.08em; font-size:13px; padding-inline:4px;} .foot-lang a[aria-current]{color:var(--cream); text-decoration:underline; text-underline-offset:4px;} @media (max-width:1199px){ .foot-top{grid-template-columns:repeat(3,minmax(0,1fr));} .foot-brand{grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 24px; align-items:start;} .foot-brand img{grid-row:span 2; margin-bottom:0;} .foot-brand .foot-social{margin-top:6px;} } @media (max-width:767px){ .foot-top{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px;} .foot-brand{display:block;} .foot-brand img{margin-bottom:18px;} .foot-col:last-child{grid-column:1 / -1;} .foot-col li{margin-bottom:0;} .foot-nav ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px;} .foot-nav a{min-height:44px;} .foot-bottom{flex-direction:column; align-items:flex-start;} .foot-legal a{min-height:44px;} } /* ========================================================================= BOX E SPAZI — correzioni (1 ottobre 2026) ========================================================================= */ /* Un solo respiro fra le sezioni: prima ogni famiglia aveva il suo (132 sopra, 140 / 96 / 90 sotto). Ora sopra e sotto si equivalgono. */ :root{ --section-y:clamp(64px, 8vw, 112px); --section-y-sm:clamp(64px, 8vw, 112px); } .lf-open{padding-top:clamp(40px, 5vw, 68px);} /* Una galleria a tutta larghezza chiude la sezione: niente striscia vuota color avorio sotto le fotografie. */ section:has(> .lf-range:last-child), section:has(> .lf-chain:last-child){padding-bottom:0;} /* Fotografie senza didascalia: niente velo scuro, non c'e' testo da leggere */ .lf-range__cell:not(:has(.lf-range__t))::after, .lf-range__cell:not(:has(.lf-range__t))::before{display:none;} .lf-range__cell:not(:has(.lf-range__t)) img{opacity:1;} /* Elenco degli 11 tagli: tre colonne lette dall'alto in basso (4 + 4 + 3), nessuna voce resta sola nell'ultima riga. */ @media (min-width:1024px){ .ed-index--two{grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-auto-flow:column;} .ed-index--two .ed-index__row:nth-child(-n+2){border-top:0;} } /* "In breve" (Porzionatura) dentro il blocco scuro a meta' pagina: i tre numeri in colonna, cifra accanto al testo, invece di tre colonne strette. */ .lf-feature .lf-figs{grid-template-columns:1fr; gap:0;} .lf-feature .lf-figs > div{display:grid; grid-template-columns:minmax(0,5.2ch) minmax(0,1fr); gap:clamp(16px,2.4vw,32px); align-items:baseline; padding-block:clamp(16px,1.8vw,22px); border-top:1px solid var(--line-light);} .lf-feature .lf-figs > div + div{border-left:0; padding-left:0;} .lf-feature .lf-figs > div:last-child{border-bottom:1px solid var(--line-light);} .lf-feature .lf-fig__v{font-size:clamp(28px,3vw,42px); white-space:nowrap;} .lf-feature .lf-fig__k{margin-top:0; max-width:40ch;} /* Due bottoni in una colonna stretta: se vanno a capo, stessa larghezza */ .lf-feature__txt .btn-group .btn,.lf-duo__txt .btn-group .btn{flex:1 1 auto;} /* Ritratto della squadra a tutta larghezza */ .ed-portrait--bleed{margin-top:var(--sp-5);} .ed-portrait--bleed img{width:100%;} /* Orari in Contatti: giorno sopra, fasce orarie che non vanno a capo */ .hours-list{display:grid; gap:10px; margin:0;} .hours-list dt{font-weight:600; color:var(--ink);} .hours-list dd{margin:0; display:flex; flex-wrap:wrap; gap:0 8px; color:var(--ink-soft);} .hours-list dd span{white-space:nowrap;} .hours-list dd span + span::before{content:'·'; margin-right:8px; opacity:.5;} /* rifinitura dopo il controllo visivo */ .lf-feature .lf-figs > div{grid-template-columns:1fr; gap:6px;} .info-list li:has(.hours-list){grid-template-columns:1fr; gap:8px;} .hours-list dt,.info-list .hours-list dt{text-transform:none; letter-spacing:0; font-size:15px; font-family:var(--f-body); font-weight:600; color:var(--ink);} .check{text-transform:none; letter-spacing:0; font-size:15px; line-height:1.5;} .check a{color:var(--wine); text-decoration:underline; text-underline-offset:3px;} section:has(> .ed-portrait--bleed:last-child){padding-bottom:0;} /* un bottone da solo resta della sua misura; si allargano solo in coppia */ .lf-feature__txt .btn-group .btn,.lf-duo__txt .btn-group .btn{flex:0 1 auto;} .lf-feature__txt .btn-group:has(> .btn + .btn) .btn, .lf-duo__txt .btn-group:has(> .btn + .btn) .btn{flex:1 1 auto;} /* Titoli divisi in righe: la "finestra" di ogni riga era alta quanto l'interlinea (0,94-1,06) e tagliava le discendenti di g, q, p, j e gli accenti delle maiuscole. Ora ha margine sopra e sotto, compensato, cosi' l'impaginazione non cambia. (1 ottobre 2026) */ html.motion [data-anim="title"] .ln{padding-block:.08em .2em; margin-block:-.08em -.2em;} /* ========================================================================= CONTATTI — recapiti riordinati (1 ottobre 2026) ========================================================================= */ .cx{display:grid; gap:clamp(40px,5vw,72px);} .cx-title{font-size:var(--t-h2); line-height:var(--lh-title); letter-spacing:var(--ls-title);} .cx-addr{display:inline-block; margin-top:var(--sp-3); font-family:var(--f-display); font-size:clamp(22px,2.2vw,30px); line-height:1.25; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:6px; transition:text-decoration-color var(--d-fast) ease;} .cx-addr:hover{text-decoration-color:var(--wine);} .cx-rows{display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:var(--sp-3) clamp(32px,5vw,72px); margin:var(--sp-4) 0 0;} .cx-rows dt{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;} .cx-rows dd{margin:0; display:grid; gap:4px;} .cx-rows a{font-size:18px; color:var(--ink);} .cx-rows a:hover,.cx-big:hover{color:var(--wine);} .cx-table{width:100%; border-collapse:collapse; margin-top:var(--sp-2);} .cx-table th,.cx-table td{padding:14px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:baseline;} .cx-table tr:first-child th,.cx-table tr:first-child td{border-top:var(--rule-strong) solid var(--ink);} .cx-table th{font-weight:600; font-size:17px; color:var(--ink); padding-right:20px;} .cx-table td{font-size:17px; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums;} .cx-table td span{white-space:nowrap;} .cx-table td span + span::before{content:'·'; margin-inline:10px; opacity:.5;} .cx-pair{display:grid; gap:clamp(32px,4vw,56px); margin-top:clamp(56px,7vw,96px);} .cx-card{border-top:var(--rule-strong) solid var(--ink); padding-top:var(--sp-4); display:flex; flex-direction:column; align-items:flex-start;} .cx-card h3{font-size:var(--t-h3);} .cx-big{margin-top:var(--sp-2); font-family:var(--f-display); font-size:clamp(24px,2.6vw,34px); line-height:1.15; color:var(--wine); overflow-wrap:anywhere;} .cx-card p:not(.eyebrow){margin-top:var(--sp-2); color:var(--ink-soft); max-width:46ch;} .cx-card .link-arrow{margin-top:var(--sp-3);} @media (min-width:900px){ .cx{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start;} .cx-pair{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:599px){ .cx-rows{grid-template-columns:1fr;} .cx-table td{text-align:left;} .cx-table th,.cx-table td{display:block; padding:0;} .cx-table tr{display:block; padding-block:12px; border-bottom:1px solid var(--line);} .cx-table th,.cx-table td{border:0!important;} .cx-table tr:first-child{border-top:var(--rule-strong) solid var(--ink);} } .cx-table th{white-space:nowrap;} @media (min-width:600px) and (max-width:1199px){ .cx-table td span{display:block;} .cx-table td span + span::before{content:none;} } /* --- Contatti: rifinitura (stato, icone, cartello orari, azioni rapide) --- */ .cx-status{display:inline-flex; align-items:center; gap:10px; margin-top:var(--sp-2); font-size:15px; font-weight:600; color:var(--ink);} .cx-status::before{content:''; width:9px; height:9px; border-radius:50%; flex:none; background:var(--ink-soft);} .cx-status.is-open::before{background:#2F7A4B; box-shadow:0 0 0 4px rgba(47,122,75,.16);} .cx-status.is-closed::before{background:var(--wine);} .cx-lines{display:grid; gap:2px; margin-top:var(--sp-4);} .cx-lines a{display:grid; grid-template-columns:22px minmax(0,1fr); gap:16px; align-items:start; padding-block:12px; min-height:44px; color:var(--ink); border-bottom:1px solid var(--line); touch-action:manipulation; transition:color var(--d-fast) ease;} .cx-lines li:first-child a{border-top:1px solid var(--line);} .cx-lines a span{font-size:18px; line-height:1.4;} .cx-lines li:first-child a span{font-family:var(--f-display); font-size:clamp(20px,1.9vw,24px); line-height:1.3;} .cx-lines a:hover{color:var(--wine);} .cx-lines a:focus-visible,.cx-actions a:focus-visible{outline:2px solid var(--wine); outline-offset:3px;} .cx-ico{width:22px; height:22px; color:var(--wine); margin-top:2px;} .cx-rows{display:none;} /* il "cartello" degli orari: superficie bianca, come alla porta del negozio */ .cx-hours{background:var(--white); padding:clamp(24px,3vw,40px); box-shadow:0 1px 0 var(--line), 0 18px 40px -28px rgba(26,12,13,.35);} .cx-hours .eyebrow{margin-bottom:var(--sp-3);} .cx-table th small{display:none; margin-left:10px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--white); background:var(--wine); padding:3px 7px; vertical-align:2px;} .cx-table tr.is-today th,.cx-table tr.is-today td{color:var(--ink); font-weight:700;} .cx-table tr.is-today th small{display:inline-block;} /* azioni rapide: solo su telefono */ .cx-actions{display:none;} @media (max-width:767px){ .cx-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:var(--sp-4);} .cx-actions a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:64px; padding:10px 6px; border:1px solid var(--ink); color:var(--ink); font-size:14px; font-weight:600; touch-action:manipulation;} .cx-actions a:first-child{background:var(--wine); border-color:var(--wine); color:var(--white);} .cx-actions a:first-child .cx-ico{color:var(--white);} .cx-actions .cx-ico{margin:0;} .cx-hours{padding:20px;} } /* nel cartello: fasce orarie una sotto l'altra, "Oggi" sotto il giorno */ .cx-hours .cx-table td span{display:block;} .cx-hours .cx-table td span + span::before{content:none;} .cx-table tr.is-today th small{display:block; width:max-content; margin:6px 0 0;} .cx-table th{white-space:normal;} /* ========================================================================= VERIFICA UI/UX (skill ui-ux-pro-max) — correzioni del 1 ottobre 2026 ========================================================================= */ /* esito del modulo contatti */ .form-msg{margin-top:var(--sp-4); padding:18px 20px; display:grid; gap:4px; border-left:4px solid; font-size:16px; line-height:1.55; scroll-margin-top:calc(var(--header-h) + 24px);} .form-msg strong{font-size:17px;} .form-msg.is-ok{background:#E9F3EC; border-color:#2F7A4B; color:#1D4A2E;} .form-msg.is-err{background:#F8E7E9; border-color:var(--wine); color:#5A0F1A;} .form-msg:focus{outline:2px solid currentColor; outline-offset:3px;} /* campi obbligatori segnalati */ .form-req{margin-top:var(--sp-3); font-size:15px; color:var(--ink-soft);} .field:has([required]) > label::after{content:' *'; color:var(--wine);} .field label.check::after{content:none;} .check:has(input[required]) > span::after{content:' *'; color:var(--wine);} .check input{width:24px; height:24px; margin-top:0;} button[disabled]{opacity:.6; cursor:progress;} /* bersagli da toccare: almeno 24px ovunque, 44px su telefono */ .foot-col li a{display:inline-block; padding-block:4px;} .foot-lang a{padding-inline:9px;} .foot-social a{width:44px; height:44px;} @media (max-width:767px){ .cx-big,.cx-card .link-arrow{min-height:44px; display:inline-flex; align-items:center;} } /* tocco reattivo e risposta visiva alla pressione */ a,button,label,select,input[type=checkbox]{touch-action:manipulation;} .btn:active,.cx-actions a:active{transform:scale(.98);} /* elenchi senza numero (l'ordine non conta): il titolo apre la colonna */ .feature--plain h3{margin-top:2px;} /* ========================================================================= FASE 2 — CATALOGO FOTOGRAFICO DEI TAGLI (1 ottobre 2026) Schede: foto intera su fondo bianco (il marmo e' la firma), nome sotto. Nessuna velatura, nessun ritaglio. Usate in I tagli, Catalogo, Home e Porzionatura. ========================================================================= */ .cg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px) clamp(12px,2vw,24px);} @media (min-width:768px){ .cg--4{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:1100px){ .cg--4{grid-template-columns:repeat(4,minmax(0,1fr));} } .cg-card{display:flex; flex-direction:column; gap:12px; color:var(--ink);} .cg-card[hidden]{display:none;} .cg-ph{display:block; background:var(--white); aspect-ratio:4/3; overflow:hidden;} .cg-ph picture,.cg-ph img{display:block; width:100%; height:100%;} .cg-ph img{object-fit:contain; transition:transform var(--d-slow) var(--e-out);} .cg-name{font-family:var(--f-display); font-size:clamp(17px,1.5vw,21px); line-height:1.2; font-weight:500;} a.cg-card .cg-name{display:inline-flex; align-items:center; gap:8px;} a.cg-card .cg-name::after{content:'→'; font-family:var(--f-body); font-size:.8em; color:var(--wine); transition:transform var(--d-base) var(--e-out);} a.cg-card:hover .cg-ph img{transform:scale(1.04);} a.cg-card:hover .cg-name{color:var(--wine);} a.cg-card:hover .cg-name::after{transform:translateX(4px);} a.cg-card:focus-visible{outline:2px solid var(--wine); outline-offset:4px;} /* filtri per famiglia (I tagli) */ .cg-filters{display:flex; flex-wrap:wrap; gap:8px; padding-block:16px; margin-bottom:var(--sp-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .cg-filters button{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; font:500 15px/1 var(--f-body); color:var(--ink); background:transparent; border:1px solid rgba(26,12,13,.28); border-radius:999px; cursor:pointer; touch-action:manipulation; transition:background var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease;} .cg-filters button span{font-size:13px; opacity:.65; font-variant-numeric:tabular-nums;} .cg-filters button:hover{border-color:var(--ink);} .cg-filters button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--cream);} .cg-filters button:focus-visible{outline:2px solid var(--wine); outline-offset:2px;} .cg-count{font-size:14px; color:var(--ink-soft); margin-bottom:var(--sp-3); min-height:1.4em;} @media (max-width:767px){ .cg-filters{flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scrollbar-width:none;} .cg-filters button{flex:none;} } /* foto di un taglio dentro un blocco editoriale (Stalla, l'agnello) */ .m-media--pack{background:var(--white);} .m-media--pack img{object-fit:contain;} .m-media--pack img{width:100%; height:auto; aspect-ratio:var(--ar,3/2);} /* Chi siamo: la nota del macello e' la didascalia delle tre foto sopra */ .brandnote-bar{background:var(--paper); padding-block:clamp(22px,3vw,34px); border-bottom:1px solid var(--line);} .brandnote-bar .brandnote__logo{width:clamp(56px,6vw,72px);} /* Le serate: due foto con il loro testo (Ristomacelleria, Eventi) */ .ev-duo{display:grid; gap:clamp(28px,3vw,48px);} @media (min-width:768px){ .ev-duo{grid-template-columns:repeat(2,minmax(0,1fr));} } .ev-duo__item{margin:0; display:flex; flex-direction:column; gap:var(--sp-3);} .ev-duo__ph{display:block; overflow:hidden; aspect-ratio:4/3; background:var(--ink);} .ev-duo__ph picture,.ev-duo__ph img{display:block; width:100%; height:100%;} .ev-duo__ph img{object-fit:cover; object-position:var(--pos,50% 50%); transition:transform var(--d-slow) var(--e-out);} .ev-duo__item:hover .ev-duo__ph img{transform:scale(1.03);} .ev-duo__item h3{font-size:var(--t-h3);} .ev-duo__item p{margin-top:var(--sp-1); color:var(--ink-soft); max-width:46ch;} /* sicurezza: una foto con animazione propria dentro un elemento che entra in sequenza non deve mai restare chiusa (1 ottobre 2026) */ html.motion [data-anim-child] [data-anim="media"] .m-mask{clip-path:none;} /* ========================================================================= SCHEDE DEI TAGLI E DELLE FAMIGLIE — versione "cartellino" (1 ottobre 2026) Superficie bianca con filo sottile, foto piu' vicina al prodotto, nome in Fraunces sotto un filetto; nelle famiglie un occhiello ("Da lesso") e il numero di tagli. Al passaggio il filo si scurisce e compare l'ombra. ========================================================================= */ .cg{gap:clamp(14px,1.6vw,22px);} .cg-card{gap:0; background:var(--white); border:1px solid var(--line); transition:border-color var(--d-base) ease, box-shadow var(--d-base) ease;} .cg-ph{aspect-ratio:5/4; background:var(--white);} .cg-ph img{object-fit:cover; transform:scale(1.06); transition:transform var(--d-slow) var(--e-out);} .cg-body{position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 16px 16px; border-top:1px solid var(--line);} .cg-kick{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wine);} .cg-name{font-size:clamp(17px,1.45vw,21px); line-height:1.2;} .cg-meta{font-size:14px; color:var(--ink-soft);} a.cg-card .cg-name::after{content:none;} .cg-card--link .cg-body{padding-right:44px;} .cg-card--link .cg-body::after{content:'→'; position:absolute; right:16px; bottom:15px; font-size:18px; color:var(--wine); transition:transform var(--d-base) var(--e-out);} a.cg-card:hover{border-color:var(--ink); box-shadow:0 18px 36px -26px rgba(26,12,13,.45);} a.cg-card:hover .cg-ph img{transform:scale(1.11);} a.cg-card:hover .cg-name{color:var(--ink);} a.cg-card:hover .cg-body::after{transform:translateX(4px);} /* I tagli: griglia piu' fitta (5 per riga su schermo largo) */ .cg--5{grid-template-columns:repeat(2,minmax(0,1fr));} @media (min-width:600px){ .cg--5{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:900px){ .cg--5{grid-template-columns:repeat(4,minmax(0,1fr));} } @media (min-width:1200px){ .cg--5{grid-template-columns:repeat(5,minmax(0,1fr));} } .cg--5 .cg-body{padding:11px 13px 13px;} .cg--5 .cg-name{font-size:clamp(16px,1.25vw,18px);} /* taglio senza fotografia: il logo al posto della foto (2 novembre 2026) */ .cg-ph--logo{display:flex; align-items:center; justify-content:center; background:var(--paper-deep);} .cg-ph--logo img{width:auto; height:46%; object-fit:contain; transform:none; opacity:.3;} .cg-more{display:flex; justify-content:center; margin-top:var(--sp-4);} .cg-more[hidden]{display:none;} @media (max-width:767px){ .cg-body{padding:10px 12px 12px;} .cg-card--link .cg-body{padding-right:36px;} .cg-card--link .cg-body::after{right:12px; bottom:11px;} } /* =========================================================================== FOTOGRAFIE SENZA ANIMAZIONE D'ENTRATA (1 ottobre 2026, richiesta del cliente) Le foto non partono piu' nascoste: niente maschera che si apre, niente zoom. Anche le schede con fotografia (tagli, catalogo, eventi) sono visibili da subito; si animano solo i testi. =========================================================================== */ html.motion [data-anim="media"] .m-mask{clip-path:none;} /* 9 ott 2026: escluse le foto con parallax (.m-media--px). Senza il loro ingrandimento il movimento scopriva una fascia scura sotto la foto. */ html.motion [data-anim="media"]:not(.m-media--px) img, html.motion [data-anim="media"]:not(.m-media--px) picture{transform:none;} html.motion [data-anim-child]:has(img){opacity:1;} /* credito "Design by StandUp" nel fondo del footer (1 ottobre 2026) */ .foot-credit{color:rgba(255,255,255,.78); text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; padding-block:10px;} .foot-credit:hover{color:var(--cream); text-decoration-color:currentColor;} /* =========================================================================== APERTURA CON TESTO A DESTRA (home, 9 ottobre 2026) Il soggetto della foto sta a sinistra: da desktop il testo si sposta nella metà destra e la velatura scura parte da destra, così la carne resta libera. Sotto i 1024 px vale l'impaginazione normale (testo in basso). =========================================================================== */ @media (min-width:1024px){ .lf-photo--right::after{ background: linear-gradient(to left,rgba(20,9,10,.74) 0%,rgba(20,9,10,.50) 30%,rgba(20,9,10,.10) 52%,rgba(20,9,10,0) 64%), var(--scrim-soft), var(--scrim-top); } .lf-photo--right .lf-photo__in > *{margin-left:50%;} /* la colonna e' mezza pagina: il titolo scala su quella, non sullo schermo */ .lf-photo--right h1{font-size:clamp(48px,6vw,96px);} /* "Scorri" passa a sinistra, sopra il tagliere, lontano dai pulsanti */ .lf-photo--right .scorri{right:auto; left:var(--pad);} } /* =========================================================================== "100 ANNI" (9 ottobre 2026, testo della brochure) Il contenitore dell'animazione (.num-i) e' uno : prendeva lo stile dell'etichetta piccola (.lf-year span) e il numero diventava marrone. Qui il titolo torna rosso del marchio, maiuscolo e piu' deciso, come nella brochure. =========================================================================== */ /* 9 ott 2026: il titolo entra come un normale testo (niente maschera, che tagliava "ANNI" nelle colonne strette e lo sovrapponeva al titolo durante l'animazione) e la misura segue la colonna, non lo schermo. */ .lf-year{display:block; overflow:visible;} .lf-year b{display:block; color:var(--wine); font-weight:400; text-transform:uppercase; font-size:clamp(46px,4.9vw,86px); line-height:.95; letter-spacing:-.02em; overflow-wrap:normal; max-width:100%;} .lf-duo--ink .lf-year b{color:#F3C9CF;} /* =========================================================================== LA STALLA, "Sua Maestà il Bue" e "L'agnello nostrano" (14 ottobre 2026) Le due foto hanno proporzioni diverse (3:2 e 4:3): stessa forma 3:2 per entrambe, cosi' titoli e testi partono alla stessa altezza. =========================================================================== */ .page-stalla .grid-2 > article > .m-media img{ width:100%; height:auto; aspect-ratio:var(--ar,3/2); object-fit:cover; object-position:var(--pos,50% 50%); }