/* Il Duo · gelato artigianale italiano · Loviisa Step 6-quater, giro 2: IL SALTO DI LIVELLO VERO (Design/SALTO-DI-LIVELLO.md). Un sistema: i token qui sotto, una griglia di 12 colonne su un contenitore di 1216 px, una scala tipografica vera. Colori misurati sul design; caratteri del marchio serviti dal sito (Anton, Inter, Allura, Barlow Condensed). Il kit e il copy sono quelli di sempre. */ @font-face { font-family: "Anton"; src: url("/assets/fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Allura"; src: url("/assets/fonts/allura-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ═══ I TOKEN ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* colori misurati sul design */ --crema: #FDFDF4; --bianco: #FFFFFF; --nero: #0A0A0A; --testo: #444C5C; --testo-forte: #3A4150; --testo-2: #6C707C; --rosso: #E20D2A; --verde: #027D4A; --verde-banda: #027544; --salvia: #D6E3BF; --salvia-chiaro: #E9F0D9; --linea: #E8E8E0; /* stati (non nel design statico) */ --rosso-hover: #C40A23; --verde-hover: #01643B; /* caratteri del marchio */ --f-titolo: "Anton", "Impact", "Arial Narrow", sans-serif; --f-script: "Allura", "Segoe Script", cursive; --f-testo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-stretto: "Barlow Condensed", "Arial Narrow", sans-serif; /* la scala tipografica (1440 → 390) */ --fs-hero: clamp(48px, calc(33.7px + 4.19vw), 104px); /* H1 della home: 94 px a 1440, 87 a 1280, 50 a 390 */ --fs-h1: clamp(38px, calc(28.9px + 2.857vw), 80px); /* H1 delle pagine interne: 70 a 1440, 40 a 390 */ --fs-h2: clamp(36px, calc(29.1px + 2.286vw), 70px); /* H2 di sezione: 62 a 1440, 38 a 390 */ --fs-h3: clamp(21px, calc(18.7px + 0.857vw), 35px); /* H3 e titoli di scheda: 31 a 1440 */ --fs-script: clamp(30px, calc(25.3px + 1.714vw), 58px); /* la scritta a mano nelle sezioni: 50 a 1440 */ --fs-script-hero: clamp(26px, calc(20px + 2.36vw), 56px); /* la scritta a mano della hero: 54 a 1440, su una riga */ --fs-lead: clamp(17.5px, calc(16.7px + 0.333vw), 23px); /* attacco: 21,5 a 1440, 18 a 390 */ --fs-corpo: clamp(16.5px, calc(16.33px + 0.1714vw), 19.6px); /* corpo: 18,8 a 1440, 17 a 390 */ --fs-piccolo: clamp(15px, calc(14.6px + 0.1vw), 16.5px); --fs-nav: 16px; --fs-btn: 17px; --lh-titolo: 0.96; --lh-corpo: 1.55; /* gli spazi, a gradini di 4/8 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --sezione: clamp(72px, 8vw, 128px); --respiro: clamp(88px, 10vw, 160px); /* la griglia */ --largo: clamp(1216px, calc(67vw + 355px), 1380px); /* 1320 a 1440, 1380 da 1530 in su */ --margine: clamp(20px, 4vw, 48px); --colonne: 12; --gap: clamp(16px, 2vw, 32px); /* forme */ --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --ombra-1: 0 1px 2px rgba(40, 50, 30, 0.06), 0 10px 24px -14px rgba(40, 50, 30, 0.28); --ombra-2: 0 2px 4px rgba(40, 50, 30, 0.05), 0 30px 60px -32px rgba(40, 50, 30, 0.42); --ombra-piena: 12px 12px 0 var(--salvia); /* il movimento (Emil Kowalski) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --t-tocco: 140ms; --t-hover: 220ms; --t-entrata: 700ms; --testata-h: 116px; --logo-w: clamp(90px, 10vw, 156px); /* 144 a 1440, 128 a 1280 */ --formato-h: clamp(120px, 21.5vw, 340px); /* i prodotti dei formati in home: 310 a 1440 */ } /* ═══ BASE ══════════════════════════════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } html.menu-aperto { overflow: hidden; } body { margin: 0; background: var(--crema); color: var(--testo); font-family: var(--f-testo); font-size: var(--fs-corpo); line-height: var(--lh-corpo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } a, button { touch-action: manipulation; } p { margin: 0; text-wrap: pretty; } h1, h2, h3 { margin: 0; font-weight: 400; } ul, ol { margin: 0; padding: 0; list-style: none; } figure, blockquote { margin: 0; } :focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; } .contenitore { width: 100%; max-width: calc(var(--largo) + 2 * var(--margine)); margin-inline: auto; padding-left: max(var(--margine), env(safe-area-inset-left, 0px)); padding-right: max(var(--margine), env(safe-area-inset-right, 0px)); } .nascosto, .salta:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .salta:focus { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--nero); color: var(--bianco); border-radius: var(--r-s); text-decoration: none; } /* ═══ TIPOGRAFIA ════════════════════════════════════════════════════════════════════════════════════════════════ */ .titolo { font-family: var(--f-titolo); font-weight: 400; color: var(--nero); text-transform: uppercase; line-height: var(--lh-titolo); letter-spacing: 0.004em; text-wrap: balance; } .titolo--basso { text-transform: none; } .titolo--bianco { color: var(--bianco); } .verde { color: var(--verde); } .script { display: block; font-family: var(--f-script); font-weight: 400; line-height: 1; -webkit-text-stroke: 0.02em currentColor; paint-order: stroke fill; } .script--rosso { color: var(--rosso); } .script--verde { color: var(--verde); } .script--bianco { color: var(--bianco); } .freccia { display: inline-block; margin-left: 0.4em; font-family: var(--f-testo); font-weight: 600; line-height: 1; transition: transform var(--t-hover) var(--ease-out); } /* ═══ PULSANTI E LINK ═══════════════════════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font: 600 15.5px/1.2 var(--f-testo); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease, transform var(--t-tocco) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn--rosso { background: var(--rosso); color: var(--bianco); box-shadow: 0 10px 22px -12px rgba(226, 13, 42, 0.7); } .btn--grande { min-height: 56px; padding: 0 28px; font-size: 16.5px; } .btn--pieno { width: 100%; } .link-verde { position: relative; display: inline-flex; align-items: center; padding-bottom: 10px; color: var(--verde); font-weight: 600; font-size: var(--fs-corpo); text-decoration: none; user-select: none; -webkit-user-select: none; transition: color var(--t-hover) ease; } .link-verde::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 8px; background: url("/assets/img/sottolineatura-verde.webp") center / 100% 100% no-repeat; transform-origin: left; transition: transform 700ms var(--ease-in-out); } .link-verde:active { opacity: 0.7; } @media (hover: hover) and (pointer: fine) { .btn--rosso:hover { background: var(--rosso-hover); box-shadow: 0 14px 28px -12px rgba(226, 13, 42, 0.75); } .btn:hover .freccia, .link-verde:hover .freccia { transform: translate(2px, -2px); } .link-verde:hover { color: var(--verde-hover); } } /* ═══ INTESTAZIONE ══════════════════════════════════════════════════════════════════════════════════════════════ */ .testata { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; transition: transform 320ms var(--ease-out); } .testata__fondo { position: absolute; inset: 0; background: var(--crema); transform-origin: top; box-shadow: 0 10px 24px -18px rgba(40, 45, 30, 0); transition: transform 340ms var(--ease-out), box-shadow 240ms ease; } .testata__in { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s6); max-width: calc(var(--largo) + 2 * var(--margine)); margin-inline: auto; padding: 10px max(var(--margine), env(safe-area-inset-right, 0px)) 6px max(var(--margine), env(safe-area-inset-left, 0px)); } .testata__in > * { pointer-events: auto; } .testata__logo { flex: none; display: block; width: clamp(96px, 9.6vw, 140px); transform-origin: left top; transition: transform 340ms var(--ease-out); } .testata__logo img { width: 100%; } .menu { flex: 1; display: flex; justify-content: center; } .menu__voci { display: flex; gap: clamp(16px, 1.9vw, 30px); transition: transform 340ms var(--ease-out); } .menu__voci a { position: relative; display: inline-block; padding: 10px 1px; color: var(--testo-forte); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; user-select: none; -webkit-user-select: none; transition: color var(--t-hover) ease; } .menu__voci a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--rosso); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-out); } .menu__voci a[aria-current="page"] { color: var(--nero); } .menu__voci a[aria-current="page"]::after { transform: scaleX(1); } .menu__cta { display: none; } @media (hover: hover) and (pointer: fine) { .menu__voci a:hover { color: var(--nero); } .menu__voci a:hover::after { transform: scaleX(1); } } .testata__azioni { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--s4); transition: transform 340ms var(--ease-out); } .lingue-posto { display: flex; align-items: center; } .lingue-posto:empty { display: none; } .btn--testata { min-height: 44px; padding: 0 18px; font-size: 14.5px; } .burger { display: none; position: relative; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--nero); cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform var(--t-tocco) var(--ease-out); } .burger:active { transform: scale(0.94); } .burger span { position: absolute; left: 12px; width: 24px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ease-out), opacity 160ms ease; } .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 23px; } .burger span:nth-child(3) { top: 30px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .testata.is-compatta .testata__fondo { transform: scaleY(var(--quota, 0.7)); box-shadow: 0 10px 24px -18px rgba(40, 45, 30, 0.35); } .testata.is-compatta .testata__logo { transform: scale(var(--logo, 0.72)); } .testata.is-compatta .testata__azioni { transform: translateY(var(--su, -12px)); } @media (min-width: 1180px) { .testata.is-compatta .menu__voci { transform: translateY(var(--su, -12px)); } } .testata.is-nascosta { transform: translateY(-110%); transition-duration: 240ms; } /* ═══ HOME · 01 HERO (la prima schermata, intera) ════════════════════════════════════════════════════════════════ */ .hero { position: relative; overflow-x: clip; } .hero__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: clamp(540px, calc(100svh - var(--testata-h) - 104px), 720px); /* tetto: sugli schermi alti niente vuoto sopra la hero (Domenico, 31/10) */ } .hero__testo { grid-column: 1 / 7; position: relative; z-index: 2; padding: var(--s5) 0 var(--s9); } .hero__h1 { margin: 0; } .hero__script { font-size: clamp(30px, 2.9vw, 44px); margin: 0 0 var(--s3) 0.04em; transform: rotate(-4deg); transform-origin: left bottom; } .hero__titolo { display: block; font-size: var(--fs-hero); line-height: 0.93; transform: skewY(-3deg); transform-origin: left center; } .hero__titolo .riga { display: block; } .hero__script br { display: none; } .hero__segno { width: clamp(200px, 21vw, 300px); margin: var(--s3) 0 0 clamp(24px, 3.6vw, 52px); transform: rotate(-3deg); } .hero__lead { max-width: 30em; margin: var(--s4) 0 var(--s6); font-size: var(--fs-lead); line-height: 1.5; color: var(--testo); } .hero__visual { grid-column: 7 / -1; position: relative; align-self: stretch; min-height: 480px; } .hero__cerchio { position: absolute; left: 50%; top: 52%; width: min(88%, calc(100svh - 300px), 560px); aspect-ratio: 1; transform: translate(-50%, -50%); filter: saturate(1.9) brightness(0.955); } .hero__orbita { position: absolute; left: 50%; top: 52%; height: auto; translate: -50% -50%; pointer-events: none; } .hero__orbita--verde { width: min(98%, calc(100svh - 240px), 620px); rotate: -14deg; } .hero__orbita--rossa { width: min(70%, calc(100svh - 380px), 440px); rotate: 32deg; opacity: 0.6; } .hero__cono { position: absolute; left: 52%; bottom: 0; height: min(calc(100svh - 220px), 640px); width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 30px 40px rgba(90, 60, 40, 0.2)); } .hero__guarnizione { position: absolute; width: clamp(48px, 5.4vw, 82px); filter: drop-shadow(0 12px 12px rgba(60, 40, 20, 0.2)); } .hero__guarnizione--suklaa { top: 16%; left: 6%; rotate: -18deg; } .hero__guarnizione--nocciola { top: 34%; right: 2%; width: clamp(44px, 4.6vw, 70px); rotate: 12deg; } .hero__guarnizione--pistaasi { top: 66%; left: 10%; width: clamp(46px, 5vw, 76px); rotate: -8deg; } /* ═══ HOME · 02 PUNTI DI FORZA (la scheda che si affaccia in fondo alla prima schermata) ════════════════════════ */ .punti { position: relative; z-index: 3; margin-top: calc(-1 * var(--s9)); padding-bottom: var(--sezione); } .punti__lista { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr 1.15fr; padding: var(--s5) var(--s5); border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-2); } .punto { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--s3); padding: var(--s2) var(--s4); text-align: center; border-left: 1px solid var(--linea); } .punto:first-child { border-left: 0; align-items: flex-start; text-align: left; } .punto__marchio { width: clamp(118px, 10.4vw, 150px); } .punto__nome { color: var(--testo-forte); font-size: 15px; font-weight: 500; line-height: 1.38; } .punto__link { font-size: 14.5px; padding-bottom: 8px; } .punto__icone { display: flex; align-items: center; justify-content: center; } .punto__icone img { box-sizing: content-box; width: 40px; height: 40px; padding: 15px; object-fit: contain; border-radius: 50%; background: var(--salvia-chiaro); transition: transform 400ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .punto:hover .punto__icone img { transform: translateY(-3px) rotate(-6deg); } } /* ═══ HOME · 03 FORMATI (il banco) ══════════════════════════════════════════════════════════════════════════════ */ .formati { padding: var(--s5) 0 var(--sezione); overflow-x: clip; } .formati__testa { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); } .formati__h2 { grid-column: 1 / 9; } .formati__script { font-size: var(--fs-script); margin-bottom: var(--s2); transform: rotate(-3deg); transform-origin: left bottom; } .formati__titolo { display: block; font-size: var(--fs-h2); transform: skewY(-3deg); transform-origin: left center; } .formati__lista { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.35fr 0.9fr 1.15fr; align-items: end; gap: var(--gap); margin-top: var(--s7); padding: 0 var(--s7) var(--s6); } .formati__lista::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 150px; bottom: 0; border-radius: var(--r-xl); background: var(--salvia-chiaro); } .formato { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .formato__img { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 220px; } .formato__img::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -6px; width: 72%; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 50, 30, 0.26), transparent); } .formato__img img { height: 100%; width: auto; transition: transform 500ms var(--ease-out); } .formato--vaschetta .formato__img img { height: 92%; } .formato__barattolo--2 { height: 82% !important; margin-left: -6%; } .formato__nome { margin-top: var(--s5); color: var(--testo-forte); font-family: var(--f-titolo); font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; text-align: center; } @media (hover: hover) and (pointer: fine) { .formato:hover .formato__img img { transform: translateY(-6px); } } .formati__clienti { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s6); color: var(--testo-2); font-size: var(--fs-piccolo); } .formati__intro { margin-right: var(--s2); color: var(--testo-forte); font-weight: 600; } .formati__voce { padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco); white-space: nowrap; } .formati__link { margin-left: var(--s3); color: var(--verde); font-weight: 600; white-space: nowrap; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .formati__link:hover { color: var(--verde-hover); } .formati__link:hover .freccia { transform: translate(2px, -2px); } } /* ═══ HOME · 04 GUSTI (il 44, i quattro gusti, il nastro dei 44) ══════════════════════════════════════════════════ */ .gusti { padding: var(--s7) 0 var(--s7); overflow-x: clip; } .gusti__titolo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); } .gusti__titolo .titolo { font-size: var(--fs-h2); } .gusti__titolo .script { font-size: var(--fs-script); transform: rotate(-4deg); } .conta-cerchio { position: relative; display: inline-block; margin-right: 0.1em; padding: 0 0.16em; color: var(--rosso); font-size: 2.1em; line-height: 0.9; vertical-align: -0.12em; } .gusti__cerchio { position: absolute; left: 50%; top: 50%; width: 136%; max-width: none; height: auto; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none; } .conta { position: relative; display: inline-block; color: var(--rosso); } .conta.is-contando { color: transparent; } .conta.is-contando::before { content: attr(data-mostra); position: absolute; left: 0; top: 0; color: var(--rosso); } .gusti__riga { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin-top: var(--s7); } .gusti__lista { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } .gusto { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s2) var(--s3); border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-1); transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out); } .gusto img { height: 96px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(60, 40, 20, 0.12)); } .gusto > span { color: var(--testo-forte); font-size: 15px; font-weight: 600; } .gusto:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .gusto:hover { transform: translateY(-5px); box-shadow: var(--ombra-2); } } .gusti__lato { grid-column: 9 / -1; padding-left: var(--s6); border-left: 1px solid var(--linea); } .gusti__testo { margin-bottom: var(--s4); font-size: var(--fs-corpo); line-height: 1.55; } /* il nastro dei 44 gusti del kit: scorre piano, non si ferma mai */ @keyframes nastro { to { transform: translateX(-50%); } } .gusti__nastro { margin-top: var(--s8); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .gusti__nastro-binario { display: flex; width: max-content; gap: var(--s6); animation: nastro 140s linear infinite; } .gusti__nastro-binario img { height: 64px; width: auto; flex: none; opacity: 0.92; } /* ═══ HOME · 05 TRAILER (la foto e la scheda che la sormonta, sulla fascia salvia) ═══════════════════════════════ */ .trailer { position: relative; padding: var(--sezione) 0; background: var(--salvia-chiaro); overflow-x: clip; clip-path: polygon(0.0% 2.3px, 0.67% 4.6px, 1.33% 2.5px, 2.0% 0.9px, 2.67% 3.1px, 3.33% 0.5px, 4.0% 0.5px, 4.67% 10.9px, 5.33% 4.8px, 6.0% 3.1px, 6.67% 0.1px, 7.33% 0.3px, 8.0% 7.8px, 8.67% 2.2px, 9.33% 2.6px, 10.0% 2.5px, 10.67% 2.3px, 11.33% 5.0px, 12.0% 4.2px, 12.67% 1.6px, 13.33% 9.6px, 14.0% 2.0px, 14.67% 1.9px, 15.33% 6.3px, 16.0% 4.6px, 16.67% 4.9px, 17.33% 0.4px, 18.0% 3.9px, 18.67% 0.4px, 19.33% 4.8px, 20.0% 0.6px, 20.67% 9.8px, 21.33% 0.9px, 22.0% 2.2px, 22.67% 3.7px, 23.33% 3.2px, 24.0% 2.1px, 24.67% 1.3px, 25.33% 4.0px, 26.0% 4.4px, 26.67% 2.0px, 27.33% 3.2px, 28.0% 4.9px, 28.67% 1.3px, 29.33% 1.6px, 30.0% 8.5px, 30.67% 1.2px, 31.33% 1.9px, 32.0% 4.8px, 32.67% 2.9px, 33.33% 0.9px, 34.0% 4.5px, 34.67% 1.2px, 35.33% 3.7px, 36.0% 1.0px, 36.67% 4.4px, 37.33% 2.1px, 38.0% 0.2px, 38.67% 1.2px, 39.33% 1.3px, 40.0% 3.0px, 40.67% 0.9px, 41.33% 0.3px, 42.0% 2.8px, 42.67% 3.1px, 43.33% 4.6px, 44.0% 0.1px, 44.67% 6.1px, 45.33% 1.8px, 46.0% 0.7px, 46.67% 4.5px, 47.33% 3.3px, 48.0% 2.9px, 48.67% 10.5px, 49.33% 3.5px, 50.0% 0.1px, 50.67% 2.4px, 51.33% 1.6px, 52.0% 0.4px, 52.67% 3.7px, 53.33% 3.7px, 54.0% 4.0px, 54.67% 1.8px, 55.33% 4.5px, 56.0% 2.1px, 56.67% 4.3px, 57.33% 3.1px, 58.0% 2.9px, 58.67% 0.4px, 59.33% 5.0px, 60.0% 3.6px, 60.67% 3.7px, 61.33% 2.2px, 62.0% 0.4px, 62.67% 0.1px, 63.33% 2.4px, 64.0% 3.5px, 64.67% 3.1px, 65.33% 6.8px, 66.0% 3.4px, 66.67% 0.8px, 67.33% 3.3px, 68.0% 4.5px, 68.67% 3.3px, 69.33% 2.2px, 70.0% 4.6px, 70.67% 1.9px, 71.33% 1.6px, 72.0% 2.5px, 72.67% 4.2px, 73.33% 4.8px, 74.0% 0.8px, 74.67% 1.4px, 75.33% 2.1px, 76.0% 2.5px, 76.67% 4.2px, 77.33% 5.2px, 78.0% 9.3px, 78.67% 2.9px, 79.33% 5.8px, 80.0% 10.0px, 80.67% 1.2px, 81.33% 0.2px, 82.0% 2.2px, 82.67% 3.3px, 83.33% 4.8px, 84.0% 1.0px, 84.67% 7.8px, 85.33% 3.6px, 86.0% 1.4px, 86.67% 3.5px, 87.33% 3.1px, 88.0% 2.0px, 88.67% 10.6px, 89.33% 3.6px, 90.0% 2.3px, 90.67% 4.5px, 91.33% 2.8px, 92.0% 4.0px, 92.67% 2.3px, 93.33% 1.0px, 94.0% 4.1px, 94.67% 3.6px, 95.33% 4.5px, 96.0% 4.9px, 96.67% 4.0px, 97.33% 4.5px, 98.0% 7.6px, 98.67% 2.8px, 99.33% 9.9px, 100.0% 0.3px, 100.0% calc(100% - 2.4px), 99.33% calc(100% - 3.3px), 98.67% calc(100% - 0.1px), 98.0% calc(100% - 1.4px), 97.33% calc(100% - 3.5px), 96.67% calc(100% - 2.8px), 96.0% calc(100% - 0.7px), 95.33% calc(100% - 0.8px), 94.67% calc(100% - 0.3px), 94.0% calc(100% - 0.4px), 93.33% calc(100% - 1.7px), 92.67% calc(100% - 5.4px), 92.0% calc(100% - 4.6px), 91.33% calc(100% - 0.5px), 90.67% calc(100% - 4.7px), 90.0% calc(100% - 2.1px), 89.33% calc(100% - 1.6px), 88.67% calc(100% - 0.8px), 88.0% calc(100% - 0.3px), 87.33% calc(100% - 4.1px), 86.67% calc(100% - 2.1px), 86.0% calc(100% - 2.4px), 85.33% calc(100% - 0.2px), 84.67% calc(100% - 4.8px), 84.0% calc(100% - 3.3px), 83.33% calc(100% - 1.8px), 82.67% calc(100% - 3.4px), 82.0% calc(100% - 1.2px), 81.33% calc(100% - 2.6px), 80.67% calc(100% - 9.9px), 80.0% calc(100% - 2.2px), 79.33% calc(100% - 1.1px), 78.67% calc(100% - 1.9px), 78.0% calc(100% - 0.5px), 77.33% calc(100% - 0.9px), 76.67% calc(100% - 0.2px), 76.0% calc(100% - 1.7px), 75.33% calc(100% - 0.3px), 74.67% calc(100% - 1.0px), 74.0% calc(100% - 2.4px), 73.33% calc(100% - 2.4px), 72.67% calc(100% - 0.8px), 72.0% calc(100% - 1.8px), 71.33% calc(100% - 3.7px), 70.67% calc(100% - 0.0px), 70.0% calc(100% - 3.9px), 69.33% calc(100% - 5.2px), 68.67% calc(100% - 3.1px), 68.0% calc(100% - 5.0px), 67.33% calc(100% - 0.1px), 66.67% calc(100% - 3.9px), 66.0% calc(100% - 3.2px), 65.33% calc(100% - 2.6px), 64.67% calc(100% - 3.1px), 64.0% calc(100% - 4.7px), 63.33% calc(100% - 0.8px), 62.67% calc(100% - 4.4px), 62.0% calc(100% - 4.7px), 61.33% calc(100% - 3.5px), 60.67% calc(100% - 1.1px), 60.0% calc(100% - 1.3px), 59.33% calc(100% - 3.5px), 58.67% calc(100% - 4.4px), 58.0% calc(100% - 1.2px), 57.33% calc(100% - 4.9px), 56.67% calc(100% - 3.1px), 56.0% calc(100% - 4.8px), 55.33% calc(100% - 2.1px), 54.67% calc(100% - 4.5px), 54.0% calc(100% - 2.9px), 53.33% calc(100% - 1.8px), 52.67% calc(100% - 9.3px), 52.0% calc(100% - 4.5px), 51.33% calc(100% - 4.5px), 50.67% calc(100% - 2.7px), 50.0% calc(100% - 7.1px), 49.33% calc(100% - 1.6px), 48.67% calc(100% - 3.4px), 48.0% calc(100% - 3.1px), 47.33% calc(100% - 2.7px), 46.67% calc(100% - 2.0px), 46.0% calc(100% - 2.0px), 45.33% calc(100% - 3.4px), 44.67% calc(100% - 0.5px), 44.0% calc(100% - 3.5px), 43.33% calc(100% - 3.3px), 42.67% calc(100% - 7.9px), 42.0% calc(100% - 2.2px), 41.33% calc(100% - 3.3px), 40.67% calc(100% - 1.2px), 40.0% calc(100% - 7.2px), 39.33% calc(100% - 1.4px), 38.67% calc(100% - 2.2px), 38.0% calc(100% - 4.6px), 37.33% calc(100% - 3.5px), 36.67% calc(100% - 2.3px), 36.0% calc(100% - 4.2px), 35.33% calc(100% - 2.3px), 34.67% calc(100% - 4.2px), 34.0% calc(100% - 2.7px), 33.33% calc(100% - 2.0px), 32.67% calc(100% - 3.3px), 32.0% calc(100% - 2.8px), 31.33% calc(100% - 1.8px), 30.67% calc(100% - 1.6px), 30.0% calc(100% - 1.8px), 29.33% calc(100% - 0.7px), 28.67% calc(100% - 2.7px), 28.0% calc(100% - 0.2px), 27.33% calc(100% - 1.4px), 26.67% calc(100% - 3.0px), 26.0% calc(100% - 4.4px), 25.33% calc(100% - 1.6px), 24.67% calc(100% - 3.2px), 24.0% calc(100% - 3.0px), 23.33% calc(100% - 2.1px), 22.67% calc(100% - 1.3px), 22.0% calc(100% - 1.9px), 21.33% calc(100% - 2.0px), 20.67% calc(100% - 0.8px), 20.0% calc(100% - 1.3px), 19.33% calc(100% - 10.0px), 18.67% calc(100% - 4.4px), 18.0% calc(100% - 1.8px), 17.33% calc(100% - 1.5px), 16.67% calc(100% - 4.3px), 16.0% calc(100% - 1.1px), 15.33% calc(100% - 0.1px), 14.67% calc(100% - 0.1px), 14.0% calc(100% - 0.8px), 13.33% calc(100% - 1.5px), 12.67% calc(100% - 0.9px), 12.0% calc(100% - 4.3px), 11.33% calc(100% - 0.5px), 10.67% calc(100% - 2.7px), 10.0% calc(100% - 2.6px), 9.33% calc(100% - 4.0px), 8.67% calc(100% - 3.2px), 8.0% calc(100% - 3.2px), 7.33% calc(100% - 2.1px), 6.67% calc(100% - 3.6px), 6.0% calc(100% - 4.6px), 5.33% calc(100% - 4.3px), 4.67% calc(100% - 4.8px), 4.0% calc(100% - 2.1px), 3.33% calc(100% - 3.0px), 2.67% calc(100% - 4.2px), 2.0% calc(100% - 0.3px), 1.33% calc(100% - 5.1px), 0.67% calc(100% - 1.2px), 0.0% calc(100% - 3.4px)); } .trailer__griglia { position: relative; display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } .trailer__foto { position: relative; overflow: hidden; border-radius: var(--r-l); box-shadow: 12px 12px 0 var(--verde-banda), var(--ombra-2); } .trailer__foto img { width: 100%; aspect-ratio: var(--rapporto, 4 / 3); object-fit: cover; transition: transform 600ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .trailer__foto:hover img { transform: scale(1.04); } } #trailer .trailer__foto { grid-column: 1 / 9; grid-row: 1; } #trailer .trailer__foto img { aspect-ratio: auto; height: min(500px, 40vw); } .trailer__testo { grid-column: 8 / -1; grid-row: 1; position: relative; z-index: 2; align-self: end; margin-bottom: calc(-1 * var(--s7)); padding: var(--s7) var(--s6) var(--s6); border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-2); } .trailer__sole { position: absolute; top: -34px; right: 28px; width: 68px; animation: gira 40s linear infinite; } .trailer__h2 { margin: 0; } .trailer__titolo { display: block; font-size: clamp(30px, 3vw, 44px); } .trailer__script { font-size: var(--fs-script); margin: var(--s2) 0 var(--s4); transform: rotate(-4deg); transform-origin: left bottom; } .trailer__corpo { font-size: var(--fs-corpo); } .trailer__corpo strong, .trailer__solo strong { color: var(--nero); font-weight: 650; } .trailer__azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s5); margin-top: var(--s5); } .trailer__solo { font-size: var(--fs-piccolo); line-height: 1.45; } /* ═══ HOME · 06 LABORATORIO (il video che esce dal bordo destro) ═════════════════════════════════════════════════ */ .laboratorio { padding: var(--respiro) 0 var(--sezione); overflow-x: clip; } .laboratorio__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: center; } #laboratorio .video-box { grid-column: 6 / -1; grid-row: 1; margin-right: calc(-1 * max(var(--margine), (100vw - var(--largo)) / 2)); border-radius: var(--r-l) 0 0 var(--r-l); box-shadow: var(--ombra-2); } #laboratorio .laboratorio__testo { grid-column: 1 / 6; grid-row: 1; } #laboratorio .video-box__nota { right: calc(max(var(--margine), (100vw - var(--largo)) / 2) + var(--s5)); } .video-box { position: relative; overflow: hidden; border-radius: var(--r-l); background: #1d1d1b; box-shadow: var(--ombra-piena), var(--ombra-2); } .video-box__video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: inherit; } .video-box__nota { position: absolute; right: var(--s5); bottom: var(--s4); padding-bottom: 6px; color: var(--bianco); font-family: var(--f-script); font-size: clamp(22px, 2vw, 30px); line-height: 1; -webkit-text-stroke: 0.02em currentColor; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); pointer-events: none; } .video-box__nota::after { content: ""; position: absolute; left: -6%; bottom: -2px; width: 115%; height: 7px; background: url("/assets/img/sottolineatura-rossa.webp") center / 100% 100% no-repeat; } .laboratorio__titolo { font-size: var(--fs-h2); } .laboratorio__corpo { max-width: 30em; margin: var(--s4) 0 0; font-size: var(--fs-lead); line-height: 1.5; } .laboratorio__testo .link-verde { margin-top: var(--s5); } /* ═══ HOME · 07 PREMIO E CHIOSCHI (bento) ═══════════════════════════════════════════════════════════════════════ */ .premio-chioschi { padding: var(--s7) 0 var(--sezione); overflow-x: clip; } .pc__griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--gap); } .pc__blocco { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 360px; } .pc__premio { grid-column: 1 / 6; display: grid; grid-template-rows: auto 1fr; padding: var(--s6); background: var(--verde-banda); color: var(--bianco); overflow: visible; } .pc__attestato { width: 52%; max-width: 200px; margin: calc(-1 * var(--s7)) 0 var(--s5); rotate: -5deg; border-radius: var(--r-s); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.5); transition: rotate 500ms var(--ease-out), scale 500ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .pc__attestato:hover { rotate: -1deg; scale: 1.03; } } .pc__titolo-premio { color: var(--bianco); font-family: var(--f-stretto); font-weight: 600; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.05; } .pc__testo p { margin-top: var(--s3); font-size: var(--fs-corpo); line-height: 1.5; } .pc__premio .pc__testo p { color: rgba(255, 255, 255, 0.88); } .pc__chioschi { grid-column: 6 / -1; display: flex; align-items: flex-end; padding: var(--s6); color: var(--bianco); box-shadow: var(--ombra-2); } .pc__foto { position: absolute; inset: 0; z-index: 0; } .pc__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 10, 0.78), rgba(10, 20, 10, 0.1) 62%); } .pc__chiosco { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: transform 700ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .pc__chioschi:hover .pc__chiosco { transform: scale(1.04); } } .pc__chioschi .pc__testo { position: relative; z-index: 1; } .pc__h2-chioschi { margin: 0; } .pc__titolo-chioschi { color: var(--bianco); font-size: var(--fs-script); transform: rotate(-4deg); transform-origin: left bottom; } .pc__sotto { display: block; margin-top: var(--s2); font-family: var(--f-titolo); font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; color: var(--bianco); } .pc__chioschi .link-verde { margin-top: var(--s4); color: var(--bianco); } .pc__chioschi .link-verde::after { filter: brightness(0) invert(1); } /* ═══ HOME · 08 CONTATTI (la fascia verde, più compatta) ═════════════════════════════════════════════════════════ */ .contatti { padding: var(--s6) 0 var(--sezione); } .contatti .contenitore { position: relative; } .contatti__banda { position: relative; display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: var(--s8) clamp(28px, 5vw, 72px); background: var(--verde-banda); clip-path: polygon(0.0% 1.6px, 0.83% 8.8px, 1.67% 8.6px, 2.5% 0.2px, 3.33% 8.0px, 4.17% 4.1px, 5.0% 1.1px, 5.83% 4.7px, 6.67% 2.0px, 7.5% 0.2px, 8.33% 1.4px, 9.17% 0.6px, 10.0% 4.1px, 10.83% 2.9px, 11.67% 1.9px, 12.5% 6.4px, 13.33% 3.4px, 14.17% 1.6px, 15.0% 2.3px, 15.83% 4.0px, 16.67% 1.2px, 17.5% 2.6px, 18.33% 3.6px, 19.17% 4.9px, 20.0% 2.1px, 20.83% 0.8px, 21.67% 0.2px, 22.5% 3.8px, 23.33% 4.4px, 24.17% 3.5px, 25.0% 2.9px, 25.83% 4.2px, 26.67% 2.4px, 27.5% 0.3px, 28.33% 3.2px, 29.17% 4.1px, 30.0% 1.9px, 30.83% 0.1px, 31.67% 0.8px, 32.5% 0.3px, 33.33% 0.6px, 34.17% 2.0px, 35.0% 0.4px, 35.83% 2.7px, 36.67% 4.1px, 37.5% 1.4px, 38.33% 1.8px, 39.17% 4.8px, 40.0% 0.9px, 40.83% 1.2px, 41.67% 2.9px, 42.5% 0.0px, 43.33% 1.8px, 44.17% 4.8px, 45.0% 2.6px, 45.83% 11.3px, 46.67% 3.9px, 47.5% 4.0px, 48.33% 2.0px, 49.17% 5.5px, 50.0% 1.0px, 50.83% 5.0px, 51.67% 0.8px, 52.5% 11.1px, 53.33% 3.1px, 54.17% 1.3px, 55.0% 1.8px, 55.83% 4.2px, 56.67% 2.3px, 57.5% 0.4px, 58.33% 1.7px, 59.17% 4.1px, 60.0% 0.1px, 60.83% 2.6px, 61.67% 8.7px, 62.5% 4.9px, 63.33% 3.5px, 64.17% 1.8px, 65.0% 3.9px, 65.83% 3.9px, 66.67% 1.1px, 67.5% 4.9px, 68.33% 4.0px, 69.17% 3.7px, 70.0% 2.6px, 70.83% 7.0px, 71.67% 1.3px, 72.5% 4.8px, 73.33% 4.7px, 74.17% 4.8px, 75.0% 1.1px, 75.83% 1.0px, 76.67% 3.1px, 77.5% 4.2px, 78.33% 3.3px, 79.17% 0.4px, 80.0% 4.5px, 80.83% 3.8px, 81.67% 0.9px, 82.5% 1.7px, 83.33% 4.9px, 84.17% 2.0px, 85.0% 3.6px, 85.83% 0.6px, 86.67% 4.5px, 87.5% 0.7px, 88.33% 4.9px, 89.17% 1.8px, 90.0% 11.8px, 90.83% 3.2px, 91.67% 4.7px, 92.5% 4.4px, 93.33% 1.1px, 94.17% 1.5px, 95.0% 2.9px, 95.83% 2.1px, 96.67% 4.6px, 97.5% 2.3px, 98.33% 4.5px, 99.17% 4.6px, 100.0% 2.7px, calc(100% - 3.5px) 3.85%, calc(100% - 4.9px) 7.69%, calc(100% - 3.9px) 11.54%, calc(100% - 3.1px) 15.38%, calc(100% - 1.5px) 19.23%, calc(100% - 13.7px) 23.08%, calc(100% - 3.6px) 26.92%, calc(100% - 1.7px) 30.77%, calc(100% - 2.7px) 34.62%, calc(100% - 4.0px) 38.46%, calc(100% - 4.6px) 42.31%, calc(100% - 5.8px) 46.15%, calc(100% - 7.2px) 50.0%, calc(100% - 5.6px) 53.85%, calc(100% - 2.2px) 57.69%, calc(100% - 1.9px) 61.54%, calc(100% - 11.3px) 65.38%, calc(100% - 5.1px) 69.23%, calc(100% - 1.3px) 73.08%, calc(100% - 0.2px) 76.92%, calc(100% - 4.9px) 80.77%, calc(100% - 3.2px) 84.62%, calc(100% - 0.9px) 88.46%, calc(100% - 2.2px) 92.31%, calc(100% - 0.7px) 96.15%, 100.0% calc(100% - 1.1px), 99.17% calc(100% - 0.6px), 98.33% calc(100% - 0.4px), 97.5% calc(100% - 5.0px), 96.67% calc(100% - 3.2px), 95.83% calc(100% - 2.3px), 95.0% calc(100% - 1.0px), 94.17% calc(100% - 0.4px), 93.33% calc(100% - 0.1px), 92.5% calc(100% - 2.0px), 91.67% calc(100% - 1.9px), 90.83% calc(100% - 1.3px), 90.0% calc(100% - 0.3px), 89.17% calc(100% - 1.9px), 88.33% calc(100% - 1.7px), 87.5% calc(100% - 2.5px), 86.67% calc(100% - 4.5px), 85.83% calc(100% - 11.6px), 85.0% calc(100% - 2.4px), 84.17% calc(100% - 4.7px), 83.33% calc(100% - 3.6px), 82.5% calc(100% - 1.4px), 81.67% calc(100% - 4.4px), 80.83% calc(100% - 9.8px), 80.0% calc(100% - 3.5px), 79.17% calc(100% - 4.2px), 78.33% calc(100% - 1.0px), 77.5% calc(100% - 2.6px), 76.67% calc(100% - 0.4px), 75.83% calc(100% - 2.5px), 75.0% calc(100% - 1.1px), 74.17% calc(100% - 0.1px), 73.33% calc(100% - 1.3px), 72.5% calc(100% - 1.9px), 71.67% calc(100% - 4.5px), 70.83% calc(100% - 2.0px), 70.0% calc(100% - 3.3px), 69.17% calc(100% - 1.0px), 68.33% calc(100% - 10.4px), 67.5% calc(100% - 1.7px), 66.67% calc(100% - 2.2px), 65.83% calc(100% - 2.1px), 65.0% calc(100% - 2.1px), 64.17% calc(100% - 5.6px), 63.33% calc(100% - 0.5px), 62.5% calc(100% - 1.8px), 61.67% calc(100% - 2.5px), 60.83% calc(100% - 5.1px), 60.0% calc(100% - 0.7px), 59.17% calc(100% - 2.9px), 58.33% calc(100% - 1.8px), 57.5% calc(100% - 0.0px), 56.67% calc(100% - 1.1px), 55.83% calc(100% - 0.2px), 55.0% calc(100% - 3.8px), 54.17% calc(100% - 2.9px), 53.33% calc(100% - 4.8px), 52.5% calc(100% - 0.4px), 51.67% calc(100% - 2.5px), 50.83% calc(100% - 0.8px), 50.0% calc(100% - 2.9px), 49.17% calc(100% - 0.6px), 48.33% calc(100% - 3.6px), 47.5% calc(100% - 2.4px), 46.67% calc(100% - 1.8px), 45.83% calc(100% - 1.0px), 45.0% calc(100% - 0.5px), 44.17% calc(100% - 3.5px), 43.33% calc(100% - 0.1px), 42.5% calc(100% - 11.8px), 41.67% calc(100% - 3.8px), 40.83% calc(100% - 3.5px), 40.0% calc(100% - 1.1px), 39.17% calc(100% - 3.7px), 38.33% calc(100% - 0.0px), 37.5% calc(100% - 4.5px), 36.67% calc(100% - 4.6px), 35.83% calc(100% - 1.1px), 35.0% calc(100% - 2.7px), 34.17% calc(100% - 1.8px), 33.33% calc(100% - 4.3px), 32.5% calc(100% - 3.1px), 31.67% calc(100% - 3.9px), 30.83% calc(100% - 4.2px), 30.0% calc(100% - 1.8px), 29.17% calc(100% - 4.2px), 28.33% calc(100% - 1.5px), 27.5% calc(100% - 4.2px), 26.67% calc(100% - 4.7px), 25.83% calc(100% - 4.1px), 25.0% calc(100% - 1.8px), 24.17% calc(100% - 2.4px), 23.33% calc(100% - 4.2px), 22.5% calc(100% - 0.3px), 21.67% calc(100% - 1.4px), 20.83% calc(100% - 0.6px), 20.0% calc(100% - 1.4px), 19.17% calc(100% - 4.0px), 18.33% calc(100% - 1.4px), 17.5% calc(100% - 2.1px), 16.67% calc(100% - 4.8px), 15.83% calc(100% - 3.7px), 15.0% calc(100% - 4.1px), 14.17% calc(100% - 4.1px), 13.33% calc(100% - 3.9px), 12.5% calc(100% - 1.9px), 11.67% calc(100% - 3.9px), 10.83% calc(100% - 4.6px), 10.0% calc(100% - 0.7px), 9.17% calc(100% - 8.2px), 8.33% calc(100% - 4.3px), 7.5% calc(100% - 9.2px), 6.67% calc(100% - 4.3px), 5.83% calc(100% - 11.4px), 5.0% calc(100% - 4.3px), 4.17% calc(100% - 1.8px), 3.33% calc(100% - 4.1px), 2.5% calc(100% - 3.0px), 1.67% calc(100% - 1.5px), 0.83% calc(100% - 1.6px), 0.0% calc(100% - 0.6px), 0.8px 96.15%, 0.0px 92.31%, 11.0px 88.46%, 9.4px 84.62%, 4.2px 80.77%, 4.4px 76.92%, 1.4px 73.08%, 3.0px 69.23%, 3.5px 65.38%, 2.3px 61.54%, 0.6px 57.69%, 4.0px 53.85%, 8.4px 50.0%, 1.3px 46.15%, 4.9px 42.31%, 5.3px 38.46%, 0.3px 34.62%, 9.8px 30.77%, 5.4px 26.92%, 3.6px 23.08%, 3.5px 19.23%, 6.8px 15.38%, 6.8px 11.54%, 3.0px 7.69%, 2.5px 3.85%); } .contatti__testo { grid-column: 1 / 7; position: relative; padding-bottom: var(--s7); } .contatti__banda .titolo { font-size: clamp(34px, 3.4vw, 48px); } .contatti__segno { width: clamp(180px, 18vw, 260px); margin: var(--s3) 0 0 -4px; filter: brightness(0) invert(1); opacity: 0.95; transform: rotate(-2deg); } .contatti__script { position: absolute; right: 0; bottom: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; transform: rotate(-10deg); } .contatti__coppetta { position: absolute; z-index: 4; left: clamp(4px, 1vw, 24px); top: -84px; width: clamp(84px, 7.6vw, 110px); rotate: -10deg; filter: drop-shadow(0 20px 22px rgba(0, 40, 20, 0.3)); pointer-events: none; } .modulo { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s5); border-radius: var(--r-l); background: var(--bianco); box-shadow: 0 30px 60px -30px rgba(0, 40, 20, 0.55); } .modulo__campo--scelta, .modulo .btn, .modulo .thk-avviso-modulo, .modulo .modulo__esito { grid-column: 1 / -1; } .modulo input, .modulo select, .modulo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #DCDFD6; border-radius: var(--r-s); background: var(--bianco); color: var(--nero); font: 500 16px/1.3 var(--f-testo); transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease; } .modulo textarea { min-height: 116px; line-height: 1.45; resize: vertical; } .modulo input::placeholder { color: var(--testo); opacity: 1; } .modulo textarea::placeholder { color: var(--testo-2); opacity: 1; } .modulo select { appearance: none; -webkit-appearance: none; padding-right: 40px; color: var(--nero); background-image: linear-gradient(45deg, transparent 50%, var(--testo) 50%), linear-gradient(135deg, var(--testo) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14.5px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(2, 125, 74, 0.18); } .modulo [aria-invalid="true"] { border-color: var(--rosso); } .modulo .btn { min-height: 52px; margin-top: var(--s1); } .modulo__campo label:not(.nascosto) { display: block; margin-bottom: 6px; color: var(--testo-forte); font-size: 14px; font-weight: 600; } .modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .thk-avviso-modulo { color: var(--testo-2); font-size: 13px; line-height: 1.45; } .thk-avviso-modulo a { color: var(--testo); text-underline-offset: 2px; } .modulo__esito { font-size: 14px; line-height: 1.4; color: var(--verde); } .modulo__esito:empty { display: none; } .modulo__esito.errore { color: var(--rosso); } /* ═══ PIEDE ═════════════════════════════════════════════════════════════════════════════════════════════════════ */ .piede { padding: var(--s6) 0 calc(var(--s5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); } .piede__riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--s5); } .piede__marca { display: flex; align-items: center; gap: var(--s4); } .piede__logo { flex: none; display: block; width: 104px; } .piede__descrizione { max-width: 17em; color: var(--testo-2); font-size: 13.5px; line-height: 1.45; } .piede__menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--s5); } .piede__menu a { display: inline-block; padding: 6px 2px; color: var(--testo-forte); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color var(--t-hover) ease; } .piede__contatti { justify-self: end; text-align: right; color: var(--testo); font-size: 14px; line-height: 1.75; } .piede__contatti a { color: var(--testo); text-decoration: none; transition: color var(--t-hover) ease; } .piede__social { color: var(--testo-2); } .piede__legale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linea); color: var(--testo-2); font-size: 13px; } .piede__legale a { color: var(--testo); text-underline-offset: 2px; } .piede__link a { text-decoration: none; } .credit a { font-weight: 600; } .piede a:active { opacity: 0.7; } @media (hover: hover) and (pointer: fine) { .piede__menu a:hover, .piede__contatti a:hover, .piede__legale a:hover { color: var(--rosso); } } /* il pulsante WhatsApp fisso, da telefono: compare solo dopo la prima schermata */ .whatsapp-fisso { display: none; } /* ═══ PAGINE INTERNE · IL SISTEMA (body.interna, coi pezzi della home) ══════════════════════════════════════════ */ body.interna main > section:not(.hero):not(.contatti) { padding: var(--sezione) 0; overflow-x: clip; } body.interna main > section.trailer { padding: calc(var(--sezione) + var(--s3)) 0; } body.interna .hero { padding: var(--s6) 0 var(--sezione); } body.interna .hero__griglia { min-height: 0; row-gap: var(--s6); } body.interna .hero__testo { padding: 0; } body.interna .hero h1.titolo { font-size: var(--fs-h1); line-height: 0.95; transform: skewY(-3deg); transform-origin: left center; text-wrap: balance; } body.interna .hero h1.titolo::after { content: ""; display: block; width: clamp(180px, 17vw, 250px); height: 11px; margin-top: var(--s4); background: url("/assets/img/sottolineatura-verde.webp") left center / 100% 100% no-repeat; } body.interna .hero__lead { max-width: 32em; margin: var(--s5) 0 0; } body.interna .hero__lead + .hero__lead { margin-top: var(--s3); } body.interna .hero__griglia > div:last-child { position: relative; } body.interna .trailer__azioni { justify-content: flex-start; gap: var(--s4) var(--s6); } body.interna .trailer__azioni .link-verde { font-size: var(--fs-corpo); } body.interna main section h2.titolo { font-size: var(--fs-h2); margin-bottom: var(--s5); } body.interna main section h2.formati__titolo { transform: skewY(-2.5deg); transform-origin: left center; } body.interna .laboratorio__testo { max-width: 34em; } body.interna .laboratorio__testo p, body.interna p.laboratorio__corpo { max-width: 34em; margin: 0; font-size: var(--fs-lead); line-height: 1.55; } body.interna .laboratorio__testo p + p { margin-top: var(--s3); } body.interna .laboratorio__testo .trailer__azioni { margin-top: var(--s5); } body.interna p.laboratorio__corpo[style*="text-align"] { margin-top: var(--s6); max-width: 40em; color: var(--testo-2); font-size: var(--fs-corpo); } body.interna ul.laboratorio__corpo { margin: var(--s4) 0 0; } body.interna ul.laboratorio__corpo li { position: relative; padding: var(--s3) 0 var(--s3) 38px; border-bottom: 1px solid var(--linea); font-size: var(--fs-corpo); line-height: 1.45; } body.interna ul.laboratorio__corpo li::before { content: ""; position: absolute; left: 0; top: calc(var(--s3) + 0.15em); width: 24px; height: 18px; background: url("/assets/img/simbolo-check.webp") center / contain no-repeat; } /* i due lati: laboratorio__griglia (testo poi immagine), trailer__griglia (l'immagine a sinistra) */ body.interna .laboratorio__griglia, body.interna .trailer__griglia { grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); } body.interna .laboratorio__griglia > :first-child { grid-column: 1 / 6; } body.interna .laboratorio__griglia > :last-child { grid-column: 7 / -1; } body.interna .trailer__griglia > :first-child { grid-column: 7 / -1; grid-row: 1; } body.interna .trailer__griglia > :last-child { grid-column: 1 / 6; grid-row: 1; } body.interna .laboratorio__griglia > *, body.interna .trailer__griglia > * { min-width: 0; } /* le cornici: mai più alte di 520 px */ body.interna .trailer__foto { box-shadow: var(--ombra-piena), var(--ombra-2); } body.interna .trailer .trailer__foto { box-shadow: 12px 12px 0 var(--verde-banda), var(--ombra-2); } body.interna .trailer__foto img { max-height: 520px; } /* la scheda bianca dei punti (righe di icone e passi) */ body.interna .punti__lista { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: var(--s6); padding: var(--s6) var(--s5); } body.interna .punto, body.interna .punto:first-child { align-items: center; text-align: center; gap: var(--s3); padding: var(--s2) var(--s5); border-left: 1px solid var(--linea); } body.interna .punto:first-child { border-left: 0; } body.interna .punto__nome { font-size: var(--fs-corpo); line-height: 1.45; } body.interna .punto__nome b { display: block; margin-bottom: 2px; color: var(--nero); font-weight: 650; } body.interna .trailer .punti__lista .punto__icone img { background: var(--salvia-chiaro); } body.interna ol.punti__lista { counter-reset: passo; position: relative; } body.interna ol.punti__lista > li { counter-increment: passo; } body.interna ol.punti__lista > li::before { content: counter(passo); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rosso); color: var(--bianco); font-family: var(--f-titolo); font-size: 28px; line-height: 1; box-shadow: 0 10px 20px -10px rgba(226, 13, 42, 0.7); } /* i formati e i mosaici di foto */ body.interna .formati__lista { padding: 0; margin-top: var(--s6); align-items: start; } body.interna .formati__lista::before { content: none; } body.interna .formato { justify-content: flex-start; align-items: stretch; } body.interna .formato__nome { margin-top: var(--s4); font-family: var(--f-testo); font-size: var(--fs-corpo); text-transform: none; text-align: left; line-height: 1.45; color: var(--testo-forte); } body.interna[data-pagina="forniture"] .formati__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } body.interna[data-pagina="forniture"] .formati__lista .trailer__foto img { aspect-ratio: 1; max-height: 380px; } body.interna[data-pagina="forniture"] .formati__lista .formato:nth-child(2) { translate: 0 var(--s7); } body.interna[data-pagina="forniture"] .formati__lista { margin-bottom: var(--s7); } body.interna [data-mosaico] { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 0; padding: 0; } body.interna [data-mosaico] > .trailer__foto:first-child { grid-column: 1 / 9; grid-row: 1; } body.interna [data-mosaico] > .trailer__foto:nth-child(2) { grid-column: 5 / 11; grid-row: 1; align-self: end; margin-bottom: -18%; z-index: 2; border: 8px solid var(--bianco); box-shadow: var(--ombra-2); } body.interna [data-mosaico] > .trailer__foto:first-child img { aspect-ratio: 4 / 3; } body.interna [data-mosaico] > .trailer__foto:nth-child(2) img { aspect-ratio: 4 / 3; } body.interna [data-mosaico]:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s4); } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto { grid-column: auto; grid-row: auto; margin: 0; border: 0; align-self: stretch; box-shadow: var(--ombra-1); } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:first-child { grid-row: 1 / 3; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto img { aspect-ratio: auto; height: 100%; max-height: 420px; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:not(:first-child) img { height: 202px; } body.interna section:has([data-mosaico]:not(:has(> :nth-child(3)))) { padding-bottom: calc(var(--sezione) + var(--s7)); } /* i gusti: schede piccole e raffinate (8 · 6 · 3 per riga) */ body.interna [data-gusti] { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); } body.interna [data-gusti] .gusto { position: relative; gap: 6px; padding: var(--s3) 6px var(--s3); border-radius: var(--r-m); } body.interna [data-gusti] .gusto > img { height: 58px; } body.interna [data-gusti] .gusto > span { font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } body.interna [data-gusti] .gusto .verde { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; } body.interna [data-gusti] .gusto span img { position: absolute; top: -10px; right: -6px; width: 34px; height: auto; rotate: 10deg; filter: drop-shadow(0 4px 6px rgba(60, 40, 90, 0.25)); } body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) > .contenitore { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); } body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) .laboratorio__testo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: end; max-width: none; } body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) .laboratorio__testo h2 { grid-column: 1 / 6; margin: 0; } body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) .laboratorio__testo p { grid-column: 7 / -1; } body.interna[data-pagina="gusti"] [data-gusti] { grid-column: 1 / -1; } /* le recensioni: una riga che scorre */ body.interna [data-recensioni] { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 23.5%); gap: var(--s4); margin-top: var(--s5); padding: 4px 4px var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; } body.interna [data-recensioni] .gusto { position: relative; align-items: stretch; gap: var(--s3); padding: var(--s6) var(--s5) var(--s5); text-align: left; scroll-snap-align: start; } body.interna [data-recensioni] .gusto::before { content: "\201D"; position: absolute; right: 18px; top: -4px; color: var(--salvia); font-family: var(--f-titolo); font-size: 80px; line-height: 1; } body.interna [data-recensioni] .script--rosso { letter-spacing: 3px; font-size: 16px; } body.interna [data-recensioni] blockquote { color: var(--testo-forte); font-size: var(--fs-corpo); line-height: 1.5; } body.interna [data-recensioni] cite { margin-top: auto; color: var(--testo-2); font-size: 14px; font-style: normal; font-weight: 600; } /* le schede bianche: confronto, domande, recapiti */ body.interna .pc__griglia { gap: var(--gap); } body.interna .pc__blocco { min-height: 0; overflow: visible; padding: var(--s6); border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-1); color: var(--testo); } body.interna [data-confronto] { grid-column: 7 / -1; grid-template-columns: minmax(0, 1fr); gap: var(--s4); } body.interna [data-confronto] .pc__blocco { display: grid; grid-template-columns: 96px 1fr 1fr; align-items: end; gap: 6px var(--s5); padding: var(--s5) var(--s6); } body.interna [data-confronto] .titolo { align-self: center; font-size: var(--fs-h3); } body.interna [data-confronto] .pc__blocco > span:not(.titolo) { display: block; color: var(--testo); font-size: var(--fs-piccolo); line-height: 1.3; } body.interna [data-confronto] strong { display: block; color: var(--testo-2); font-family: var(--f-titolo); font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.05; } body.interna [data-confronto] .verde strong { color: var(--verde); font-size: clamp(36px, 3.4vw, 50px); } body.interna [data-domande] { margin-top: 0; padding: var(--s2) var(--s6); } body.interna [data-domande] details { border-bottom: 1px solid var(--linea); } body.interna [data-domande] details:last-child { border-bottom: 0; } body.interna [data-domande] summary { position: relative; display: block; padding: var(--s5) 52px var(--s5) 0; cursor: pointer; list-style: none; color: var(--nero); font-size: var(--fs-lead); font-weight: 650; line-height: 1.35; user-select: none; -webkit-user-select: none; touch-action: manipulation; } body.interna [data-domande] summary::-webkit-details-marker { display: none; } body.interna [data-domande] summary::after { content: "+"; position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; translate: 0 -50%; border-radius: 50%; background: var(--salvia-chiaro); color: var(--verde); font-size: 22px; line-height: 1; transition: rotate var(--t-hover) var(--ease-out), background-color var(--t-hover) ease; } body.interna [data-domande] details[open] summary::after { rotate: 45deg; background: var(--rosso); color: var(--bianco); } body.interna [data-domande] summary:active { opacity: 0.7; } body.interna [data-domande] details p { padding: 0 0 var(--s5); max-width: 46em; font-size: var(--fs-corpo); line-height: 1.55; } body.interna [data-domande] details[open] p { animation: entra-su 320ms var(--ease-out) both; } body.interna section:has([data-domande]) .contenitore { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } body.interna section:has([data-domande]) h2 { grid-column: 1 / 5; grid-row: 1; } body.interna section:has([data-domande]) [data-domande] { grid-column: 5 / -1; grid-row: 1 / 3; } body.interna section:has([data-domande]) .contenitore > .trailer__azioni { grid-column: 1 / 5; grid-row: 2; align-self: start; margin-top: 0; } body.interna .pc__griglia:not([data-confronto]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.interna .pc__griglia:not([data-confronto]) .pc__blocco { border-top: 6px solid var(--verde); } body.interna .pc__blocco h2 { margin-bottom: var(--s4); color: var(--nero); font-family: var(--f-titolo); font-size: var(--fs-h3); line-height: 1; text-transform: uppercase; } body.interna .pc__blocco p, body.interna .pc__blocco li { font-size: var(--fs-corpo); line-height: 1.55; } body.interna .pc__blocco p + p, body.interna .pc__blocco ul { margin-top: var(--s2); } body.interna .pc__blocco a { color: var(--verde); font-weight: 650; text-underline-offset: 3px; } body.interna .pc__blocco a[href^="tel:"], body.interna .pc__blocco a[href*="wa.me"] { font-size: 1.15em; } /* le composizioni: il pezzo del kit sul tondo salvia, con l'orbita */ body.interna .hero__visual { grid-column: auto; position: relative; isolation: isolate; align-self: center; width: 100%; max-width: 440px; min-height: 0; aspect-ratio: 1; margin: 0 auto; } body.interna .hero__visual::after { content: ""; position: absolute; z-index: -1; inset: -3% -5%; background: url("/assets/img/cerchio-rosso.webp") center / contain no-repeat; rotate: 24deg; opacity: 0.75; pointer-events: none; animation: orbita-indietro 140s linear infinite; } body.interna [data-logo]::after { background-image: url("/assets/img/cerchio-verde.webp"); } body.interna .hero__visual .hero__cerchio { left: 4%; top: 4%; width: 92%; transform: none; } body.interna .hero__visual .hero__cono { left: 50%; bottom: 6%; width: 62%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 22px 26px rgba(60, 40, 20, 0.18)); } body.interna [data-logo] .hero__cono { top: 50%; bottom: auto; width: 74%; transform: translate(-50%, -50%); filter: none; } body.interna .hero__visual .punto__marchio { position: absolute; z-index: 2; left: 0; top: 4%; width: 34%; padding: 8px 10px; border-radius: var(--r-m); background: var(--bianco); box-shadow: var(--ombra-1); rotate: -6deg; } /* l'arco salvia della coppetta alla fragola: un'altra forma, non un secondo tondo */ body.interna section:not(.hero) .hero__visual:not([data-logo]) { max-width: 340px; aspect-ratio: 4 / 5; } body.interna section:not(.hero) .hero__visual:not([data-logo])::before { content: ""; position: absolute; z-index: -1; inset: 10% 6% 0; border-radius: 999px 999px var(--r-xl) var(--r-xl); background: var(--salvia-chiaro); } body.interna section:not(.hero) .hero__visual:not([data-logo])::after { content: none; } body.interna section:not(.hero) .hero__visual:not([data-logo]) .hero__cerchio { display: none; } body.interna section:not(.hero) .hero__visual:not([data-logo]) .hero__cono { width: 78%; bottom: 4%; } /* il premio */ body.interna [data-premio] { display: block; position: relative; height: auto; max-width: 300px; margin: 0 auto; } body.interna [data-premio] .pc__attestato { width: 100%; max-width: none; margin: 0; rotate: -4deg; } body.interna [data-premio] .hero__guarnizione { right: -16%; bottom: -12%; width: 34%; rotate: 10deg; animation: galleggia 6.5s ease-in-out infinite; } /* la frase dell'obiettivo */ body.interna div:has(> [data-citazione]) { position: relative; isolation: isolate; max-width: 860px; } body.interna div:has(> [data-citazione])::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 60%; width: min(80vw, 520px); aspect-ratio: 1; translate: -50% -50%; background: url("/assets/img/cerchio-salvia.webp") center / contain no-repeat; opacity: 0.85; } body.interna [data-citazione] { margin: var(--s2) auto 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; } body.interna div:has(> [data-citazione]) .hero__segno { display: block; width: clamp(180px, 20vw, 280px); margin: var(--s5) auto 0; transform: none; animation: none; } /* le icone grandi del kit */ body.interna [data-icone-grandi] { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; gap: var(--s7); padding: var(--s7) 0; } body.interna [data-icone-grandi]::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(100%, 360px); aspect-ratio: 1; translate: -50% -50%; background: url("/assets/img/cerchio-salvia.webp") center / contain no-repeat; } body.interna .trailer [data-icone-grandi]::before { background-image: none; border-radius: 50%; background-color: var(--bianco); } body.interna [data-icone-grandi] img { box-sizing: border-box; width: clamp(88px, 8.4vw, 120px); height: auto; padding: 0; border-radius: 0; background: none; } /* la fascia verde dei richiami */ body.interna [data-richiamo] .contatti__testo { grid-column: 1 / 7; padding-bottom: 0; } body.interna [data-richiamo] > div:last-child { grid-column: 8 / -1; } body.interna .contatti__banda p { color: var(--bianco); font-size: var(--fs-corpo); line-height: 1.55; } body.interna .contatti__banda p + p { margin-top: var(--s2); } body.interna .contatti__banda .modulo p.thk-avviso-modulo { color: var(--testo-2); font-size: 13px; line-height: 1.45; text-align: left; } body.interna .contatti__banda .modulo p.modulo__esito { color: var(--verde); font-size: 14px; } body.interna .contatti__banda .modulo p.modulo__esito.errore { color: var(--rosso); } body.interna .contatti__banda .trailer__azioni { margin-top: var(--s5); } body.interna .contatti__banda .link-verde, body.interna .contatti__banda .link-verde .freccia { color: var(--bianco); } body.interna .contatti__banda .link-verde::after { filter: brightness(0) invert(1); } body.interna [data-modulo] { align-items: start; } body.interna [data-modulo] .contatti__testo { grid-column: 1 / 5; padding-bottom: 0; } body.interna [data-modulo] .contatti__testo p { margin-top: var(--s4); } body.interna #modulo-contatti { grid-column: 6 / -1; } /* ═══ PAGINE INTERNE · OGNI PAGINA LA SUA HERO ══════════════════════════════════════════════════════════════════ */ /* Forniture: la fascia fotografica a tutta larghezza, col testo su una scheda che la sormonta */ body.interna[data-pagina="forniture"] .hero__griglia { grid-template-rows: auto; } body.interna[data-pagina="forniture"] .hero__griglia > div:last-child { grid-column: 1 / -1; grid-row: 1; } body.interna[data-pagina="forniture"] .hero__griglia > div:last-child .trailer__foto { box-shadow: var(--ombra-2); } body.interna[data-pagina="forniture"] .hero__griglia > div:last-child .trailer__foto img { aspect-ratio: auto; height: clamp(320px, 36vw, 500px); max-height: none; } body.interna[data-pagina="forniture"] .hero__testo { grid-column: 1 / 8; grid-row: 1; align-self: end; margin: 0 0 calc(-1 * var(--s8)) var(--s6); padding: var(--s7) var(--s7) var(--s6); border-radius: var(--r-l); background: var(--crema); box-shadow: var(--ombra-2); } body.interna[data-pagina="forniture"] .hero { padding-bottom: calc(var(--sezione) + var(--s8)); } /* Il nostro gelato: il prodotto sul tondo salvia con le orbite */ body.interna[data-pagina="il-nostro-gelato"] .hero__testo { grid-column: 1 / 7; } body.interna[data-pagina="il-nostro-gelato"] .hero__griglia > div:last-child { grid-column: 7 / -1; } /* Gusti: un bento con la vetrina e quattro gusti del kit */ body.interna[data-pagina="gusti"] .hero__testo { grid-column: 1 / 6; } body.interna[data-pagina="gusti"] .hero__griglia > div:last-child { grid-column: 6 / -1; display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s4); height: clamp(360px, 34vw, 480px); } body.interna[data-pagina="gusti"] .hero__griglia > div:last-child .trailer__foto { grid-row: 1 / 3; height: 100%; } body.interna[data-pagina="gusti"] .hero__griglia > div:last-child .trailer__foto img { height: 100%; max-height: none; aspect-ratio: auto; } body.interna[data-pagina="gusti"] [data-bento] { grid-column: 2 / 4; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: 0; } body.interna[data-pagina="gusti"] [data-bento] .gusto { justify-content: center; padding: var(--s3); border-radius: var(--r-l); } body.interna[data-pagina="gusti"] [data-bento] .gusto:nth-child(2), body.interna[data-pagina="gusti"] [data-bento] .gusto:nth-child(3) { background: var(--salvia-chiaro); box-shadow: none; } body.interna[data-pagina="gusti"] [data-bento] .gusto img { height: 70%; max-height: 120px; } /* Trailer a noleggio: la foto che esce dal bordo destro, col sole del kit */ body.interna[data-pagina="noleggio-trailer"] .hero__testo { grid-column: 1 / 6; } body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child { grid-column: 7 / -1; margin-right: calc(-1 * max(var(--margine), (100vw - var(--largo)) / 2)); } body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child .trailer__foto { border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--ombra-2); } body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child .trailer__foto img { aspect-ratio: auto; height: clamp(320px, 36vw, 500px); max-height: none; } body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child .trailer__sole { top: -30px; left: -30px; right: auto; z-index: 2; width: 84px; } /* Chioschi ed eventi: la foto come una polaroid, nell'orbita rossa */ body.interna[data-pagina="chioschi-ed-eventi"] .hero__testo { grid-column: 1 / 7; } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child { grid-column: 7 / -1; padding: var(--s6) var(--s5); } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child .trailer__foto { padding: 12px 12px 48px; border-radius: 6px; background: var(--bianco); box-shadow: var(--ombra-2); rotate: 3deg; } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child .trailer__foto img { border-radius: 2px; max-height: 420px; } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child .hero__orbita { z-index: -1; width: 110%; top: 48%; left: 50%; rotate: -10deg; animation: orbita 120s linear infinite; } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child { isolation: isolate; } /* Chi siamo: il titolo al centro, il video in una fascia a tutta larghezza */ body.interna[data-pagina="chi-siamo"] .hero__testo { grid-column: 2 / 12; text-align: center; } body.interna[data-pagina="chi-siamo"] .hero h1.titolo { transform: none; } body.interna[data-pagina="chi-siamo"] .hero h1.titolo::after { margin-inline: auto; } body.interna[data-pagina="chi-siamo"] .hero__lead { margin-inline: auto; } body.interna[data-pagina="chi-siamo"] .hero .trailer__azioni { justify-content: center; } body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child { grid-column: 2 / 12; } body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child .video-box { border-radius: var(--r-xl); box-shadow: var(--ombra-piena), var(--ombra-2); } body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child .video-box__video { aspect-ratio: 16 / 9; height: auto; } body.interna[data-pagina="chi-siamo"] .hero { padding-bottom: var(--sezione); } /* Contatti: la coppetta in un oblò, con l'orbita verde */ body.interna[data-pagina="contatti"] .hero__testo { grid-column: 1 / 7; } body.interna[data-pagina="contatti"] .hero__griglia > div:last-child { grid-column: 8 / -1; justify-self: center; width: min(100%, 380px); isolation: isolate; } body.interna[data-pagina="contatti"] .hero__griglia > div:last-child .trailer__foto { aspect-ratio: 1; border-radius: 50%; box-shadow: var(--ombra-2); } body.interna[data-pagina="contatti"] .hero__griglia > div:last-child .trailer__foto img { height: 100%; aspect-ratio: 1; } body.interna[data-pagina="contatti"] .hero__griglia > div:last-child .hero__orbita { z-index: -1; width: 122%; animation: orbita 120s linear infinite; } /* ═══ PAGINE LEGALI E 404 ═══════════════════════════════════════════════════════════════════════════════════════ */ .pagina { padding: var(--s7) 0 var(--s9); } .legale { max-width: 760px; color: var(--testo); font-size: 16.5px; line-height: 1.65; } .legale h1 { margin-bottom: 8px; color: var(--nero); font-family: var(--f-titolo); font-size: var(--fs-h1); line-height: 1; text-transform: uppercase; } .legale h2 { margin: 34px 0 10px; color: var(--nero); font-family: var(--f-testo); font-size: 20px; font-weight: 700; line-height: 1.3; } .legale p, .legale ul { margin: 0 0 12px; } .legale ul { padding-left: 1.2em; list-style: disc; } .legale li { margin-bottom: 6px; } .legale a { color: var(--verde); text-underline-offset: 2px; overflow-wrap: anywhere; } .tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); background: var(--bianco); box-shadow: var(--ombra-1); } .legale table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; } .legale th, .legale td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; } .legale th { color: var(--nero); font-weight: 650; background: var(--salvia-chiaro); } .errore404 { text-align: center; padding-top: var(--s7); padding-bottom: var(--s9); } .errore404 .btn--grande { width: auto; max-width: 360px; } .errore404 .titolo { font-size: var(--fs-h1); margin-top: var(--s4); } .errore404 p { max-width: 36ch; margin: var(--s4) auto var(--s6); font-size: var(--fs-lead); } .errore404 .azioni { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: center; align-items: center; } .errore404__visual { position: relative; width: clamp(180px, 18vw, 240px); aspect-ratio: 1; margin: 0 auto var(--s2); } .errore404__cerchio { position: absolute; inset: 6%; width: 88%; filter: saturate(1.9) brightness(0.955); } .errore404__orbita { position: absolute; left: 50%; top: 50%; width: 104%; translate: -50% -50%; } .errore404__orbita--verde { rotate: -14deg; animation: orbita 90s linear infinite; } .errore404__orbita--rossa { width: 84%; rotate: 32deg; opacity: 0.85; animation: orbita-indietro 120s linear infinite; } .errore404__cono { position: absolute; left: 50%; bottom: 0; height: 112%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 20px 26px rgba(90, 60, 40, 0.2)); } /* ═══ IL MOVIMENTO (poco e preciso: Emil Kowalski) ══════════════════════════════════════════════════════════════ */ @keyframes entra-su { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } } @keyframes scrivi { from { clip-path: inset(-30% 100% -45% -6%); } to { clip-path: inset(-30% -6% -45% -6%); } } @keyframes traccia { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } } @keyframes compare { from { opacity: 0; scale: 0.95; } to { opacity: 1; scale: 1; } } @keyframes sale { from { translate: 0 4%; } to { translate: 0 0; } } @keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes gira { to { rotate: 1turn; } } @keyframes orbita { to { rotate: 1turn; } } @keyframes orbita-indietro { to { rotate: -1turn; } } @keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } } /* la hero della home entra al caricamento, col CSS */ .hero__script { animation: scrivi 1000ms var(--ease-in-out) 100ms both; } .hero__titolo .riga { animation: entra-su var(--t-entrata) var(--ease-out) both; } .hero__titolo .riga:nth-child(1) { animation-delay: 300ms; } .hero__titolo .riga:nth-child(2) { animation-delay: 360ms; } .hero__titolo .riga:nth-child(3) { animation-delay: 420ms; } .hero__segno { animation: traccia 800ms var(--ease-in-out) 700ms both; } body:not(.interna) .hero__lead { animation: entra-su var(--t-entrata) var(--ease-out) 600ms both; } body:not(.interna) .hero__testo .btn--grande { animation: entra-su var(--t-entrata) var(--ease-out) 680ms both; } body:not(.interna) .hero__cerchio { animation: compare 900ms var(--ease-out) 120ms both; } body:not(.interna) .hero__cono { animation: sale 1000ms var(--ease-out) both; } .hero__orbita--verde { animation: compare 900ms var(--ease-out) 260ms both, orbita 100s linear 1.2s infinite; } .hero__orbita--rossa { animation: compare 900ms var(--ease-out) 380ms both, orbita-indietro 130s linear 1.3s infinite; } .hero__guarnizione { animation: compare 600ms var(--ease-out) both, galleggia 6.5s ease-in-out infinite; } .hero__guarnizione--suklaa { animation-delay: 600ms, 1.4s; } .hero__guarnizione--nocciola { animation-delay: 700ms, 2.2s; animation-duration: 600ms, 7.5s; } .hero__guarnizione--pistaasi { animation-delay: 800ms, 0.6s; animation-duration: 600ms, 5.8s; } /* le entrate allo scroll (.reveal → .is-in), visibili senza JavaScript */ .js .reveal { opacity: 0; translate: 0 24px; transition: opacity var(--t-entrata) var(--ease-out), translate var(--t-entrata) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } .js .reveal.scrivi, .js .reveal.traccia { translate: none; opacity: 1; clip-path: inset(-30% 100% -45% -6%); transition: clip-path 900ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 60ms); } .js .reveal.svela { translate: none; opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); } .js .reveal.in, .js .reveal.is-in { opacity: 1; translate: 0 0; } .js .reveal.scrivi.in, .js .reveal.scrivi.is-in, .js .reveal.traccia.in, .js .reveal.traccia.is-in { clip-path: inset(-30% -6% -45% -6%); } .js .reveal.svela.in, .js .reveal.svela.is-in { clip-path: inset(-40px -40px -70px -40px); } .js .link-verde.reveal::after, .js .reveal .link-verde::after { transform: scaleX(0); transition-delay: 300ms; } .js .link-verde.reveal.is-in::after, .js .reveal.is-in .link-verde::after { transform: scaleX(1); } .trailer__sole { animation: gira 40s linear infinite; } /* ═══ TABLET (fino a 1179 px: il menu a tutto schermo) ═════════════════════════════════════════════════════════ */ @media (max-width: 1179px) { .menu { position: fixed; inset: 0; z-index: 25; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: var(--s6); height: 100dvh; padding: calc(104px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); background: var(--crema); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 180ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms; } .menu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s; } .menu__voci { flex-direction: column; gap: 0; } .menu__voci li { border-bottom: 1px solid var(--linea); } .menu__voci a { display: block; padding: 14px 0; color: var(--nero); font-family: var(--f-titolo); font-size: clamp(30px, 7vw, 40px); font-weight: 400; line-height: 1.05; text-transform: uppercase; } .menu__voci a::after { content: none; } .menu__voci a:active { color: var(--rosso); } .menu__cta { display: inline-flex; align-self: flex-start; min-height: 54px; font-size: 16.5px; } .testata__logo, .testata__azioni { position: relative; z-index: 30; } .burger { display: block; } .btn--testata { display: none; } } /* ═══ TABLET STRETTO E TELEFONO (fino a 959 px) ════════════════════════════════════════════════════════════════ */ @media (max-width: 959px) { :root { --testata-h: 76px; } .hero__griglia { grid-template-columns: 1fr; min-height: 0; } .hero__testo { grid-column: 1; padding: var(--s5) 0 var(--s2); } .hero__visual { grid-column: 1; height: clamp(300px, 72vw, 520px); min-height: 0; } .hero__cerchio { width: min(78%, 400px); top: 54%; } .hero__orbita--verde { width: min(88%, 450px); top: 54%; } .hero__orbita--rossa { width: min(70%, 360px); top: 54%; } .hero__cono { height: 100%; left: 50%; } .punti { margin-top: calc(-1 * var(--s6)); } .punti__lista { grid-template-columns: 1fr 1fr; row-gap: var(--s4); } .punto:first-child { grid-column: 1 / -1; align-items: center; text-align: center; padding-bottom: var(--s4); border-bottom: 1px solid var(--linea); } .punto:nth-child(even) { border-left: 0; } .formati__h2 { grid-column: 1 / -1; } .formati__lista { padding: 0 var(--s4) var(--s5); gap: var(--s3); } .formati__lista::before { top: 110px; } .formato__img { height: 150px; } .gusti__lista { grid-column: 1 / -1; } .gusti__lato { grid-column: 1 / -1; margin-top: var(--s5); padding: 0; border: 0; text-align: center; } #trailer .trailer__foto, .trailer__testo { grid-column: 1 / -1; } #trailer .trailer__foto img { height: auto; aspect-ratio: 4 / 3; } .trailer__testo { grid-row: 2; margin: calc(-1 * var(--s7)) var(--s3) 0; padding: var(--s6) var(--s5) var(--s5); } #laboratorio .video-box, #laboratorio .laboratorio__testo { grid-column: 1 / -1; } #laboratorio .video-box { grid-row: 1; margin-inline: calc(-1 * max(var(--margine), env(safe-area-inset-left, 0px))); border-radius: 0; } #laboratorio .laboratorio__testo { grid-row: 2; margin-top: var(--s6); } #laboratorio .video-box__nota { right: var(--margine); } .pc__premio, .pc__chioschi { grid-column: 1 / -1; } .pc__blocco { min-height: 300px; } .contatti__banda { grid-template-columns: 1fr; padding: var(--s7) max(var(--margine), env(safe-area-inset-right, 0px)) var(--s6) max(var(--margine), env(safe-area-inset-left, 0px)); margin-inline: calc(-1 * max(var(--margine), env(safe-area-inset-left, 0px))); } .contatti__testo, .modulo { grid-column: 1; } .contatti__testo { padding-bottom: 64px; } .contatti__script { right: auto; left: 40%; } .modulo { margin-top: var(--s4); } .contatti__coppetta { left: auto; right: 16px; top: -58px; width: 84px; rotate: 8deg; } .piede__riga { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s4); } .piede__marca { flex-direction: column; gap: 6px; } .piede__descrizione { max-width: 24em; } .piede__contatti { justify-self: center; text-align: center; line-height: 1.6; } .piede__legale { flex-direction: column; text-align: center; justify-content: center; } /* pagine interne */ body.interna .hero__testo, body.interna .hero__griglia > div:last-child, body.interna .laboratorio__griglia > *, body.interna .trailer__griglia > * { grid-column: 1 / -1 !important; grid-row: auto !important; } body.interna .hero { padding-top: var(--s5); } body.interna [data-confronto] { grid-column: 1 / -1; } body.interna .punti__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.interna .punto:nth-child(odd) { border-left: 0; } body.interna .punto:last-child:nth-child(odd) { grid-column: 1 / -1; } body.interna [data-gusti] { grid-template-columns: repeat(6, minmax(0, 1fr)); } body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) .laboratorio__testo h2, body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) .laboratorio__testo p { grid-column: 1 / -1; } body.interna[data-pagina="gusti"] main > section:not(.hero):not(.contatti) .laboratorio__testo h2 { margin-bottom: var(--s3); } body.interna[data-pagina="forniture"] .formati__lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4); overscroll-behavior-x: contain; } body.interna[data-pagina="forniture"] .formati__lista .formato { scroll-snap-align: start; } body.interna[data-pagina="forniture"] .formati__lista .formato:nth-child(2) { translate: none; } body.interna[data-pagina="forniture"] .formati__lista { margin-bottom: 0; } body.interna section:has([data-domande]) h2, body.interna section:has([data-domande]) [data-domande], body.interna section:has([data-domande]) .contenitore > .trailer__azioni { grid-column: 1 / -1; grid-row: auto; } body.interna section:has([data-domande]) .contenitore > .trailer__azioni { margin-top: var(--s5); } body.interna .pc__griglia:not([data-confronto]) { grid-template-columns: 1fr; } body.interna [data-richiamo] .contatti__testo, body.interna [data-richiamo] > div:last-child, body.interna [data-modulo] .contatti__testo, body.interna #modulo-contatti { grid-column: 1 / -1; } body.interna [data-richiamo] .contatti__testo, body.interna [data-modulo] .contatti__testo { padding-bottom: var(--s3); } body.interna #modulo-contatti { margin-top: var(--s5); } body.interna .hero__visual { max-width: 360px; } body.interna[data-pagina="forniture"] .hero__testo { margin: calc(-1 * var(--s8)) var(--s3) 0; padding: var(--s6) var(--s5) var(--s5); } body.interna[data-pagina="forniture"] .hero__griglia > div:last-child { grid-row: 1 !important; } body.interna[data-pagina="forniture"] .hero__testo { grid-row: 2 !important; } body.interna[data-pagina="forniture"] .hero { padding-bottom: var(--sezione); } body.interna[data-pagina="gusti"] .hero__griglia > div:last-child { height: clamp(280px, 70vw, 420px); } body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child { margin-right: calc(-1 * max(var(--margine), env(safe-area-inset-right, 0px))); } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child { padding: var(--s4) var(--s5); } body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child .video-box { border-radius: var(--r-l); } body.interna[data-pagina="contatti"] .hero__griglia > div:last-child { width: min(78%, 320px); margin-top: var(--s4); } } /* ═══ TELEFONO (fino a 600 px) ═════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { :root { --gap: 12px; } .hero__script br { display: inline; } .hero__lead { margin: var(--s3) 0 var(--s5); } .btn--grande { width: 100%; } .punti__lista { grid-template-columns: 1fr; row-gap: 0; padding: var(--s3) var(--s4); } .punto:not(:first-child) { flex-direction: row; align-items: center; text-align: left; gap: var(--s4); padding: var(--s3) 2px; border-left: 0; border-top: 1px solid var(--linea); } .punto:first-child { border-bottom: 0; padding-bottom: var(--s3); } .punto__icone img { width: 32px; height: 32px; padding: 12px; } .formati__lista { grid-template-columns: 1.25fr 0.85fr 1.1fr; padding: 0 var(--s2) var(--s4); } .formati__lista::before { top: 74px; border-radius: var(--r-l); } .formato__img { height: 104px; } .formato--barattolini .formato__img img { height: auto !important; width: 56%; } .formato--barattolini .formato__barattolo--2 { width: 46%; } .formato__nome { margin-top: var(--s3); font-size: 15px; } .formati__clienti { gap: 6px; } .formati__intro { width: 100%; margin: 0 0 2px; text-align: center; } .formati__link { width: 100%; margin: var(--s2) 0 0; text-align: center; } .gusti__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .gusto img { height: 84px; } .gusti__nastro { margin-top: var(--s6); } .gusti__nastro-binario img { height: 48px; } .trailer__azioni { flex-direction: column; align-items: flex-start; } .trailer__azioni .btn { width: 100%; } .trailer__sole { width: 56px; top: -28px; right: 18px; } .pc__blocco { min-height: 0; padding: var(--s5); border-radius: var(--r-l); } .pc__premio { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; gap: var(--s4); align-items: center; } .pc__attestato { width: 100%; margin: 0; } .pc__chioschi { min-height: 300px; } .contatti__banda .titolo { font-size: 34px; } .modulo { grid-template-columns: 1fr; padding: var(--s4); } .contatti__script { left: auto; right: 0; } .whatsapp-fisso { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; width: max-content; margin-inline: auto; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--verde); color: var(--bianco); font-weight: 600; font-size: 15px; white-space: nowrap; text-decoration: none; box-shadow: 0 14px 28px -12px rgba(2, 80, 45, 0.6); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity 240ms ease, translate 360ms var(--ease-out), transform var(--t-tocco) var(--ease-out); } html.oltre-hero .whatsapp-fisso { opacity: 1; translate: 0 0; pointer-events: auto; } html.menu-aperto .whatsapp-fisso { opacity: 0; pointer-events: none; } .whatsapp-fisso:active { transform: scale(0.97); } /* con la barra dei cookie aperta (in basso, larga quasi tutto lo schermo) il pulsante sale sopra di lei: 12 px di margine, al massimo 56 di barra, 8 di respiro (03/11/2026, 9-bis: «la barra copre il pulsante WhatsApp») */ html:has(#thk-barra-cookie) .whatsapp-fisso { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .piede { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } /* pagine interne */ body.interna .punti__lista { grid-template-columns: 1fr; row-gap: 0; padding: var(--s2) var(--s4); } body.interna .punto, body.interna .punto:first-child, body.interna .punto:last-child:nth-child(odd) { grid-column: auto; flex-direction: row; align-items: center; text-align: left; gap: var(--s4); padding: var(--s3) 2px; border-left: 0; border-top: 1px solid var(--linea); } body.interna .punto:first-child { border-top: 0; } body.interna .punto__icone { flex: none; } body.interna ol.punti__lista > li::before { flex: none; width: 44px; height: 44px; font-size: 22px; } body.interna [data-gusti] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.interna [data-gusti] .gusto > img { height: 52px; } body.interna [data-gusti] { gap: 8px; } body.interna [data-gusti] .gusto { padding: 10px 4px; } body.interna [data-gusti] .gusto > span { font-size: 11.5px; letter-spacing: -0.005em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } body.interna [data-recensioni] { grid-auto-columns: 86%; } body.interna [data-recensioni] blockquote { font-size: 15.5px; } body.interna [data-confronto] .pc__blocco { grid-template-columns: 1fr 1fr; padding: var(--s4) var(--s5); } body.interna [data-confronto] .titolo { grid-column: 1 / -1; } body.interna [data-confronto] strong { white-space: nowrap; } body.interna [data-domande] { padding: var(--s1) var(--s4); } body.interna [data-domande] summary { font-size: 16.5px; } body.interna .pc__blocco { padding: var(--s5); } body.interna #modulo-contatti { grid-template-columns: 1fr; } body.interna #modulo-contatti .modulo__campo { grid-column: 1 / -1; } body.interna .trailer__azioni .btn--rosso { width: 100%; } body.interna [data-mosaico]:not(:has(> :nth-child(3))) > .trailer__foto:nth-child(2) { border-width: 5px; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:first-child img { max-height: 300px; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:not(:first-child) img { height: 142px; } body.interna [data-citazione] { font-size: 21px; text-transform: none; } body.interna .hero__lead { font-size: 16.5px; } body.interna[data-pagina="gusti"] .hero__griglia > div:last-child { gap: var(--s2); } body.interna[data-pagina="gusti"] [data-bento] { gap: var(--s2); } } /* ═══ RIDUCI ANIMAZIONI: meno movimento, non zero ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__script, .hero__segno, .hero__titolo .riga, .hero__lead, .hero__testo .btn--grande, .hero__cerchio, .hero__cono, .hero__orbita, .hero__guarnizione { animation: dissolvi 500ms ease both !important; } .trailer__sole, .errore404__orbita, body.interna .hero__visual::after, [data-pagina] .hero__orbita { animation: none !important; } .gusti__nastro-binario { animation-duration: 900s; } .js .reveal, .js .reveal.scrivi, .js .reveal.traccia, .js .reveal.svela { translate: none; clip-path: none; transition: opacity 500ms ease; } .js .reveal.scrivi:not(.is-in), .js .reveal.traccia:not(.is-in), .js .reveal.svela:not(.is-in) { opacity: 0; } .menu, .menu.aperto { transform: none; } .testata, .testata__fondo, .testata__logo, .testata__azioni, .menu__voci { transition-duration: 1ms; } .gusto, .trailer__foto img, .pc__chiosco, .formato__img img, .punto__icone img { transition: none; } body.interna [data-premio] .hero__guarnizione { animation: none; } } /* ═══ GIRO 2 · RIFINITURA (Design/SALTO-DI-LIVELLO.md, «Giro 2 · rifinitura») ══════════════════════════════════════ Il ritmo nel corpo delle pagine interne: due sezioni brevi accostate in un'unica fascia a due schede ([data-coppia]), l'immagine che esce dal bordo, la scheda che sormonta il video, la numerazione editoriale. Stesse sezioni, stesso ordine, stesso testo; i decori sono pezzi del kit (aria-hidden). */ /* il logo dell'intestazione, più leggero */ .testata__logo { width: clamp(84px, 7.7vw, 112px); } @media (max-width: 600px) { .testata__logo { width: 86px; } } /* il video del laboratorio (848 × 478) non va mai oltre i 900 px */ .video-box { max-width: 900px; } #laboratorio .video-box { justify-self: end; width: 100%; } /* ── le coppie: due schede in una fascia ── */ body.interna main > section[data-coppia]:not(.hero):not(.contatti) { position: relative; margin: var(--s5) max(var(--margine), env(safe-area-inset-left, 0px)); padding: 0; border-radius: var(--r-xl); overflow: hidden; clip-path: none; background: var(--bianco); box-shadow: var(--ombra-1); } body.interna main > section[data-coppia].trailer:not(.hero):not(.contatti) { background: var(--salvia-chiaro); box-shadow: none; } body.interna main > section[data-coppia] > .contenitore { max-width: none; height: 100%; padding: var(--s7) clamp(24px, 3.4vw, 52px); } body.interna [data-coppia] .laboratorio__griglia, body.interna [data-coppia] .trailer__griglia { display: flex; flex-direction: column; align-items: stretch; gap: var(--s5); } body.interna [data-coppia] [data-inverso] > .laboratorio__testo { order: -1; } body.interna [data-coppia] .laboratorio__testo { max-width: none; text-align: left !important; margin: 0 !important; } body.interna main [data-coppia] h2.titolo { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: var(--s4); } body.interna [data-coppia] .laboratorio__testo p { font-size: var(--fs-corpo); } body.interna [data-coppia] .punti__lista { grid-template-columns: 1fr; margin-top: var(--s4); padding: 0; background: none; box-shadow: none; border-radius: 0; } body.interna [data-coppia] .punto, body.interna [data-coppia] .punto:first-child { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s4); padding: var(--s4) 0; text-align: left; border-left: 0; border-top: 1px solid var(--linea); } body.interna [data-coppia] .punto:first-child { border-top: 0; padding-top: var(--s2); } body.interna [data-coppia] .punto__icone { flex: none; } body.interna [data-coppia] .pc__griglia { grid-template-columns: 1fr !important; gap: var(--s4); } body.interna [data-coppia] .pc__blocco { padding: var(--s5) var(--s6); } body.interna [data-coppia] .gusti__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); } body.interna [data-coppia] .gusti__lista .gusto img { height: 64px; } /* le icone del percorso (Loviisa → consegna), unite da una linea tratteggiata */ body.interna [data-coppia] [data-icone-grandi] { justify-content: space-between; align-items: center; gap: var(--s5); padding: var(--s3) var(--s4) 0; margin: 0 !important; } body.interna [data-coppia] [data-icone-grandi]::before { width: auto; aspect-ratio: auto; height: 0; left: 18%; right: 18%; top: 58%; translate: none; border-radius: 0; background: none !important; border-top: 3px dashed currentColor; opacity: 0.45; } body.interna [data-coppia] [data-icone-grandi] img { width: clamp(72px, 6.4vw, 96px); background: transparent; } body.interna [data-coppia] [data-icone-grandi] img:last-child { width: clamp(80px, 7vw, 104px); } /* la scheda verde */ body.interna main > section[data-composizione="verde"]:not(.hero):not(.contatti) { background: var(--verde-banda); color: var(--bianco); box-shadow: var(--ombra-2); } body.interna [data-composizione="verde"] .titolo, body.interna [data-composizione="verde"] p { color: var(--bianco) !important; } body.interna [data-composizione="verde"] [data-icone-grandi] img { filter: brightness(0) invert(1); } body.interna [data-composizione="verde"] div:has(> [data-citazione])::before { content: none; } body.interna [data-composizione="verde"] [data-citazione] { font-size: clamp(26px, 2.4vw, 36px); max-width: none; } body.interna [data-composizione="verde"] .hero__segno { filter: brightness(0) invert(1); opacity: 0.9; } /* l'oblò: la foto del banco frigo, tonda, nell'angolo della scheda */ body.interna [data-composizione="oblo"] .laboratorio__griglia > div:last-child { position: absolute; top: var(--s6); right: var(--s6); width: clamp(120px, 11vw, 160px); margin: 0 !important; } body.interna [data-composizione="oblo"] .trailer__foto { border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 0 6px var(--salvia-chiaro), var(--ombra-2); } body.interna [data-composizione="oblo"] .trailer__foto img { aspect-ratio: 1 !important; height: 100%; max-height: none; } body.interna [data-composizione="oblo"] .laboratorio__testo { padding-right: clamp(140px, 13vw, 184px); } /* il decoro del kit che si affaccia dall'angolo */ [data-decoro] { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 24px 24px rgba(60, 40, 20, 0.2)); } body.interna [data-composizione="decoro"] [data-decoro="vaschetta"] { right: -36px; bottom: -28px; width: clamp(180px, 17vw, 250px); rotate: -8deg; } body.interna [data-composizione="decoro"] .laboratorio__testo { position: relative; z-index: 2; max-width: 74%; } body.interna main > section[data-composizione="decoro"]:not(.hero):not(.contatti) { background: var(--bianco); } /* ── la numerazione editoriale (Come funziona la fornitura) ── */ body.interna [data-composizione="numeri"] ol.punti__lista { background: none; box-shadow: none; border-radius: 0; padding: 0; gap: var(--gap); margin-top: var(--s6); } body.interna [data-composizione="numeri"] .punto, body.interna [data-composizione="numeri"] .punto:first-child { align-items: flex-start; justify-content: flex-start; text-align: left; gap: var(--s3); padding: var(--s4) 0 0; border-left: 0; border-top: 2px solid var(--nero); } body.interna [data-composizione="numeri"] ol.punti__lista > li::before { content: counter(passo, decimal-leading-zero); display: block; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--rosso); font-family: var(--f-titolo); font-size: clamp(56px, 6vw, 92px); line-height: 0.9; } body.interna [data-composizione="numeri"] .punto__nome { font-size: var(--fs-lead); line-height: 1.45; color: var(--testo-forte); } /* ── l'immagine che esce dal bordo destro, col fondo salvia a pillola (Ingredienti) ── */ body.interna [data-composizione="sbordo"] .trailer__griglia > :first-child { align-self: stretch; } body.interna section[data-composizione="sbordo"] .hero__visual:not([data-logo]) { max-width: none; width: auto; height: clamp(380px, 36vw, 500px); aspect-ratio: auto; margin: 0 calc(-1 * max(var(--margine), (100vw - var(--largo)) / 2)) 0 0; } body.interna section[data-composizione="sbordo"] .hero__visual:not([data-logo])::before { inset: 0; border-radius: 999px 0 0 999px; background: var(--salvia-chiaro); } body.interna section[data-composizione="sbordo"] .hero__visual:not([data-logo]) .hero__cono { left: 38%; bottom: 6%; width: auto; height: 84%; } body.interna [data-composizione="sbordo"] [data-decoro="fragole"] { left: 64%; top: 14%; width: clamp(110px, 10vw, 150px); rotate: 10deg; animation: galleggia 6.5s ease-in-out infinite; } /* ── la scheda dei passi che sormonta il video (Come nasce il gelato) ── */ body.interna [data-composizione="video-scheda"] .laboratorio__griglia { align-items: center; } body.interna [data-composizione="video-scheda"] .laboratorio__griglia > .video-box { grid-column: 1 / 8 !important; grid-row: 1; justify-self: end; width: calc(100% + max(var(--margine), (100vw - var(--largo)) / 2)); max-width: 900px; margin-left: calc(-1 * max(var(--margine), (100vw - var(--largo)) / 2)); border-radius: 0 var(--r-xl) var(--r-xl) 0; box-shadow: var(--ombra-2); } body.interna [data-composizione="video-scheda"] .laboratorio__griglia > .laboratorio__testo { grid-column: 7 / -1 !important; grid-row: 1; position: relative; z-index: 2; max-width: none; padding: var(--s6); border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-2); } body.interna [data-composizione="video-scheda"] ol.punti__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s3); padding: 0; background: none; box-shadow: none; gap: var(--s4) var(--s5); } body.interna [data-composizione="video-scheda"] .punto, body.interna [data-composizione="video-scheda"] .punto:first-child { align-items: flex-start; text-align: left; gap: var(--s2); padding: var(--s3) 0 0; border-left: 0; border-top: 2px solid var(--linea); } body.interna [data-composizione="video-scheda"] ol.punti__lista > li::before { content: counter(passo, decimal-leading-zero); display: block; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--rosso); font-family: var(--f-titolo); font-size: 44px; line-height: 0.9; } body.interna [data-composizione="video-scheda"] .punto__nome { font-size: var(--fs-corpo); } /* ── l'elenco accanto al titolo (Cosa comprende il noleggio) ── */ @media (min-width: 960px) { body.interna [data-composizione="elenco"] > .contenitore { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } body.interna [data-composizione="elenco"] h2 { grid-column: 1 / 6; grid-row: 1; } body.interna [data-composizione="elenco"] p.laboratorio__corpo { grid-column: 1 / 6; grid-row: 2; margin: 0 !important; text-align: left !important; } body.interna [data-composizione="elenco"] .punti__lista { grid-column: 7 / -1; grid-row: 1 / 4; grid-template-columns: 1fr; margin: 0; padding: var(--s3) var(--s6); } body.interna [data-composizione="elenco"] .punto, body.interna [data-composizione="elenco"] .punto:first-child { flex-direction: row; align-items: center; text-align: left; gap: var(--s5); padding: var(--s5) 0; border-left: 0; border-top: 1px solid var(--linea); } body.interna [data-composizione="elenco"] .punto:first-child { border-top: 0; } body.interna [data-composizione="elenco"] .punto__nome { font-size: var(--fs-lead); } } /* ── la foto che esce dal bordo destro, col decoro del kit (Trailer e gelato, sempre insieme) ── */ body.interna [data-composizione="sbordo-destra"] .trailer__griglia { position: relative; } body.interna [data-composizione="sbordo-destra"] .trailer__griglia > .trailer__foto { margin-right: calc(-1 * max(var(--margine), (100vw - var(--largo)) / 2)); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--ombra-2); } body.interna [data-composizione="sbordo-destra"] .trailer__griglia > .trailer__foto img { aspect-ratio: auto; height: clamp(360px, 36vw, 500px); max-height: none; object-position: 50% 62%; } body.interna [data-composizione="sbordo-destra"] [data-decoro="vaschetta"] { left: calc(50% - 30px); bottom: -48px; width: clamp(170px, 15vw, 230px); rotate: -6deg; z-index: 3; } /* ── chi siamo: il video su otto colonne (≈ 800 px) ── */ body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child { grid-column: 3 / 11; } @media (min-width: 960px) { /* le coppie, affiancate: la griglia della pagina con due mezze colonne del contenitore */ body.interna main:has(> [data-coppia]) { display: grid; grid-template-columns: [pieno-start] minmax(max(var(--margine), env(safe-area-inset-left, 0px)), 1fr) [c-start] minmax(0, calc(var(--largo) / 2)) [mezzo] minmax(0, calc(var(--largo) / 2)) [c-end] minmax(max(var(--margine), env(safe-area-inset-right, 0px)), 1fr) [pieno-end]; } body.interna main:has(> [data-coppia]) > * { grid-column: pieno; min-width: 0; } body.interna main > section[data-coppia="sx"]:not(.hero):not(.contatti) { grid-column: c-start / mezzo; margin: var(--gap) calc(var(--gap) / 2) 0 0; } body.interna main > section[data-coppia="dx"]:not(.hero):not(.contatti) { grid-column: mezzo / c-end; margin: var(--gap) 0 0 calc(var(--gap) / 2); } body.interna main > :not([data-coppia]) + section[data-coppia="sx"]:not(.hero):not(.contatti), body.interna main > :not([data-coppia]) + [data-coppia="sx"] + section[data-coppia="dx"]:not(.hero):not(.contatti) { margin-top: calc(var(--sezione) * 0.7); } body.interna main > section[data-coppia]:has(+ :not([data-coppia])):not(.hero):not(.contatti), body.interna main > section[data-coppia="sx"]:has(+ [data-coppia="dx"] + :not([data-coppia])):not(.hero):not(.contatti), body.interna main > section[data-coppia]:last-child:not(.hero):not(.contatti), body.interna main > section[data-coppia="sx"]:has(+ [data-coppia="dx"]:last-child):not(.hero):not(.contatti) { margin-bottom: calc(var(--sezione) * 0.7); } } @media (max-width: 959px) { body.interna section[data-composizione="sbordo"] .hero__visual:not([data-logo]) { height: 340px; margin-right: calc(-1 * max(var(--margine), env(safe-area-inset-right, 0px))); } body.interna [data-composizione="video-scheda"] .laboratorio__griglia > .video-box { width: auto; max-width: none; margin-inline: calc(-1 * max(var(--margine), env(safe-area-inset-left, 0px))); border-radius: 0; } body.interna [data-composizione="video-scheda"] .laboratorio__griglia > .laboratorio__testo { margin: calc(-1 * var(--s7)) var(--s3) 0; padding: var(--s5); } body.interna [data-composizione="sbordo-destra"] .trailer__griglia > .trailer__foto { margin-right: calc(-1 * max(var(--margine), env(safe-area-inset-right, 0px))); } body.interna [data-composizione="sbordo-destra"] .trailer__griglia > .trailer__foto img { height: 300px; } body.interna [data-composizione="sbordo-destra"] [data-decoro="vaschetta"] { left: auto; right: 10px; bottom: auto; top: 250px; width: 140px; } body.interna [data-composizione="elenco"] p.laboratorio__corpo { text-align: left !important; } body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child { grid-column: 1 / -1; } } @media (max-width: 600px) { body.interna main > section[data-coppia]:not(.hero):not(.contatti) { margin: var(--s4) var(--margine); border-radius: var(--r-l); } body.interna main > section[data-coppia] > .contenitore { padding: var(--s6) var(--s5); } body.interna [data-composizione="oblo"] .laboratorio__griglia > div:last-child { top: var(--s5); right: var(--s5); width: 96px; } body.interna [data-composizione="oblo"] .laboratorio__testo { padding-right: 0; } body.interna [data-composizione="oblo"] h2.titolo { padding-right: 104px; } body.interna [data-composizione="decoro"] .laboratorio__testo { max-width: 100%; padding-bottom: 96px; } body.interna [data-composizione="decoro"] [data-decoro="vaschetta"] { width: 150px; right: -20px; bottom: -18px; } body.interna [data-composizione="numeri"] ol.punti__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); padding: 0; } body.interna [data-composizione="numeri"] .punto, body.interna [data-composizione="numeri"] .punto:first-child { flex-direction: column; align-items: flex-start; border-top: 2px solid var(--nero); padding: var(--s3) 0 0; } body.interna [data-composizione="numeri"] ol.punti__lista > li::before { width: auto; height: auto; font-size: 52px; text-align: left; } body.interna [data-composizione="numeri"] .punto__nome { font-size: 15.5px; } body.interna [data-composizione="video-scheda"] ol.punti__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; } body.interna [data-composizione="video-scheda"] .punto, body.interna [data-composizione="video-scheda"] .punto:first-child { flex-direction: column; align-items: flex-start; padding: var(--s3) 0 0; border-top: 2px solid var(--linea); } body.interna [data-composizione="video-scheda"] ol.punti__lista > li::before { width: auto; height: auto; font-size: 36px; text-align: left; } body.interna [data-composizione="video-scheda"] .punto__nome { font-size: 15px; } body.interna [data-coppia] .gusti__lista .gusto img { height: 56px; } body.interna [data-coppia] .gusti__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* forniture: il titolo della hero entro le quattro righe, nella scheda */ body.interna[data-pagina="forniture"] .hero h1.titolo { font-size: 33px; } body.interna[data-pagina="forniture"] .hero__testo { margin: calc(-1 * var(--s8)) 0 0 !important; padding: var(--s5) var(--s5) var(--s5); } } @media (prefers-reduced-motion: reduce) { body.interna [data-decoro="fragole"] { animation: none; } } /* il video di «Come nasce»: la scritta a sinistra, fuori dalla scheda che lo sormonta */ body.interna [data-composizione="video-scheda"] .video-box__nota { right: auto; left: calc(max(var(--margine), (100vw - var(--largo)) / 2) + var(--s5)); } @media (max-width: 959px) { body.interna [data-composizione="video-scheda"] .video-box__nota { left: auto; right: var(--margine); bottom: calc(var(--s7) + var(--s3)); } } /* chi siamo · la nostra storia: meno aria, il testo più presente */ body.interna[data-pagina="chi-siamo"] main > section.trailer:nth-of-type(2) { padding: var(--sezione) 0; } body.interna[data-pagina="chi-siamo"] main > section.trailer:nth-of-type(2) .laboratorio__testo p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 26em; } body.interna[data-pagina="chi-siamo"] main > section.trailer:nth-of-type(2) .laboratorio__griglia > :first-child { grid-column: 1 / 7; } body.interna[data-pagina="chi-siamo"] main > section.trailer:nth-of-type(2) .hero__visual { max-width: 380px; } @media (max-width: 959px) { body.interna section[data-composizione="video-scheda"] .laboratorio__griglia > .video-box, body.interna section[data-composizione="video-scheda"] .laboratorio__griglia > .laboratorio__testo { grid-column: 1 / -1 !important; } body.interna section[data-composizione="video-scheda"] .laboratorio__griglia > .video-box { grid-row: 1 !important; } body.interna section[data-composizione="video-scheda"] .laboratorio__griglia > .laboratorio__testo { grid-row: 2 !important; } } @media (max-width: 600px) { body.interna [data-premio] .hero__guarnizione { right: -4%; bottom: -10%; width: 32%; } } /* ═══ COLLAUDO GIRO 3 ═══ */ /* i decori del kit: la garnizione della home, ferma (si muove solo nella hero) */ body.interna [data-decoro="vaschetta"] { animation: compare 600ms var(--ease-out) both; } /* gusti: i nomi con «&» vanno a capo dopo la «&», mai dentro la parola */ body.interna [data-gusti] .gusto > span:has(wbr) { hyphens: manual; -webkit-hyphens: manual; } @media (max-width: 600px) { .errore404 .btn--grande { width: 100%; } /* forniture · tutto l'anno: l'oblò nel suo spazio, sopra il titolo */ body.interna [data-composizione="oblo"] .laboratorio__griglia > div:last-child { position: static; order: -1; width: 112px; margin: 0 !important; } body.interna [data-composizione="oblo"] h2.titolo { padding-right: 0; } /* chi siamo · l'obiettivo nella scheda verde, entro tre righe */ body.interna main > section[data-composizione="verde"] > .contenitore { padding-left: var(--s5); padding-right: var(--s5); } body.interna [data-composizione="verde"] [data-citazione] { font-size: calc((100vw - 88px) * 0.058); line-height: 1.22; text-transform: none; } /* trailer a noleggio: il sole dentro lo schermo */ body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child .trailer__sole { left: 8px; top: -26px; width: 64px; } /* home · gusti: il cerchio del 44 lontano dalla scritta a mano */ .gusti__titolo { row-gap: var(--s5); } .gusti__cerchio { width: 118%; } } @media (prefers-reduced-motion: reduce) { body.interna [data-decoro] { animation: dissolvi 500ms ease both !important; } } /* chioschi · il mosaico dei tre prodotti in una riga sola, sfalsata (la foto grande, poi due più strette) */ body.interna [data-mosaico]:has(> :nth-child(3)) { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: none; align-items: start; gap: var(--s4); padding-bottom: var(--s6); } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:first-child { grid-row: auto; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto img, body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:not(:first-child) img { height: auto; aspect-ratio: 3 / 4; max-height: none; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:nth-child(2) { translate: 0 var(--s6); } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:nth-child(3) { translate: 0 calc(var(--s4) * -1); } @media (max-width: 600px) { body.interna [data-mosaico]:has(> :nth-child(3)) { gap: var(--s2); padding-bottom: var(--s5); } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:first-child img, body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:not(:first-child) img { height: auto; max-height: none; } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:nth-child(2) { translate: 0 var(--s4); } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto:nth-child(3) { translate: 0 calc(var(--s2) * -1); } /* home · la scheda del trailer entro le tre righe */ .trailer__testo { margin: calc(-1 * var(--s7)) 0 0; padding: var(--s6) var(--s5) var(--s5); } .trailer__corpo { font-size: 15.5px; } /* le recensioni un po' più larghe */ body.interna [data-recensioni] { grid-auto-columns: 90%; } body.interna [data-recensioni] .gusto { padding-left: 14px; padding-right: 14px; } } body.interna [data-mosaico]:has(> :nth-child(3)) > .trailer__foto { align-self: start; } /* ═══ LE MISURE DI MEZZO (Domenico, 30/10: «una via di mezzo… un sito web scritto normale») ═══════════════════════ I token di :root sono a metà fra il primo salto e il secondo e crescono fluidi fino a 1920 px. Qui sotto le misure dei pezzi che non leggevano già i token. */ .testata__logo { width: var(--logo-w); } .menu__voci a { font-size: var(--fs-nav); } .btn { min-height: 56px; padding: 0 26px; font-size: var(--fs-btn); } .btn--grande { min-height: 60px; padding: 0 32px; font-size: 18px; } .btn--testata { min-height: 50px; padding: 0 22px; font-size: 16px; } .modulo .btn { min-height: 56px; } .punto__nome { font-size: var(--fs-corpo); } .punto__link { font-size: var(--fs-piccolo); } .punto__icone img { width: 48px; height: 48px; padding: 18px; } .piede__menu a { font-size: 15.5px; } .piede__contatti, .piede__descrizione { font-size: 15px; } /* la hero: «Gelato artigianale italiano» su una riga, «Per le aziende in Finlandia» su due */ .hero__script { font-size: var(--fs-script-hero); white-space: nowrap; } .hero__script br { display: none !important; } .hero__titolo { text-wrap: balance; animation: entra-su var(--t-entrata) var(--ease-out) 300ms both; } .hero__titolo .riga { display: inline; animation: none; } .hero__lead { max-width: 28em; } @media (min-width: 960px) { .hero__cono { height: min(calc(100svh - 210px), 680px); } } /* i formati in vetrina, più grandi */ .formati__lista { --altezza: var(--formato-h); } .formato__img { height: var(--formato-h); } .formati__lista::before { top: calc(var(--formato-h) * 0.62); } .formati__clienti { font-size: var(--fs-piccolo); } /* i gusti della home e il nastro, più grandi */ .gusto img { height: clamp(96px, 8.4vw, 136px); } .gusto > span { font-size: var(--fs-piccolo); } .gusti__nastro-binario img { height: clamp(56px, 5.6vw, 92px); } /* le immagini delle pagine interne: si leggono a colpo d'occhio */ body.interna .trailer__foto img { max-height: 620px; } body.interna[data-pagina="forniture"] .hero__griglia > div:last-child .trailer__foto img, body.interna[data-pagina="noleggio-trailer"] .hero__griglia > div:last-child .trailer__foto img, body.interna [data-composizione="sbordo-destra"] .trailer__griglia > .trailer__foto img { height: clamp(340px, 40vw, 600px); } body.interna[data-pagina="forniture"] .formati__lista .trailer__foto img { max-height: 460px; } body.interna[data-pagina="chioschi-ed-eventi"] .hero__griglia > div:last-child .trailer__foto img { max-height: 520px; } body.interna[data-pagina="gusti"] .hero__griglia > div:last-child { height: clamp(400px, 38vw, 580px); } body.interna section[data-composizione="sbordo"] .hero__visual:not([data-logo]) { height: clamp(400px, 40vw, 580px); } body.interna .hero__visual { max-width: 520px; } body.interna section:not(.hero) .hero__visual:not([data-logo]) { max-width: 400px; } body.interna[data-pagina="chi-siamo"] main > section.trailer:nth-of-type(2) .hero__visual { max-width: 460px; } body.interna [data-premio] { max-width: 380px; } body.interna[data-pagina="contatti"] .hero__griglia > div:last-child { width: min(100%, 460px); } body.interna[data-pagina="chi-siamo"] .hero__griglia > div:last-child .video-box { margin-inline: auto; } /* l'oblò del banco frigo: sotto il testo, grande abbastanza da leggersi */ body.interna [data-composizione="oblo"] .laboratorio__testo { padding-right: 0; } body.interna [data-composizione="oblo"] .laboratorio__griglia > div:last-child { position: static; align-self: flex-end; width: clamp(200px, 17vw, 260px); margin: calc(-1 * var(--s4)) 0 0 !important; } /* i 44 gusti: 6 per riga, immagini più grandi */ body.interna [data-gusti] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); } body.interna [data-gusti] .gusto > img { height: clamp(64px, 6.4vw, 104px); } body.interna [data-gusti] .gusto > span { font-size: 14.5px; } body.interna [data-gusti] .gusto span img { width: 42px; } body.interna [data-coppia] .gusti__lista .gusto img { height: clamp(64px, 5.6vw, 92px); } /* i titoli H1 delle pagine interne: al massimo due righe da computer */ body.interna[data-pagina="forniture"] .hero__testo { grid-column: 1 / 11; } @media (min-width: 960px) { body.interna:is([data-pagina="il-nostro-gelato"], [data-pagina="gusti"], [data-pagina="noleggio-trailer"], [data-pagina="chioschi-ed-eventi"], [data-pagina="contatti"]) .hero__griglia { grid-template-rows: auto auto auto auto 1fr; align-items: start; row-gap: 0; } body.interna:is([data-pagina="il-nostro-gelato"], [data-pagina="gusti"], [data-pagina="noleggio-trailer"], [data-pagina="chioschi-ed-eventi"], [data-pagina="contatti"]) .hero__testo { display: contents; } body.interna:is([data-pagina="il-nostro-gelato"], [data-pagina="gusti"], [data-pagina="noleggio-trailer"], [data-pagina="chioschi-ed-eventi"], [data-pagina="contatti"]) .hero__testo > h1 { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--s7); } body.interna:is([data-pagina="il-nostro-gelato"], [data-pagina="gusti"], [data-pagina="noleggio-trailer"], [data-pagina="chioschi-ed-eventi"], [data-pagina="contatti"]) .hero__testo > :not(h1) { grid-column: 1 / 6; } body.interna:is([data-pagina="il-nostro-gelato"], [data-pagina="gusti"], [data-pagina="noleggio-trailer"], [data-pagina="chioschi-ed-eventi"], [data-pagina="contatti"]) .hero__griglia > div:last-child { grid-row: 2 / -1; align-self: center; } } @media (max-width: 959px) { .formato__img { height: 170px; } .formati__lista::before { top: 110px; } body.interna [data-gusti] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 600px) { .testata__logo { width: 90px; } .formato__img { height: 120px; } .formati__lista::before { top: 80px; } .formato__nome { font-size: 15.5px; } .gusto img { height: 92px; } .gusti__nastro-binario img { height: 56px; } .btn { padding: 0 22px; } body.interna [data-gusti] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.interna [data-gusti] .gusto > img { height: 62px; } body.interna [data-gusti] .gusto > span { font-size: 12px; } body.interna [data-composizione="oblo"] .laboratorio__griglia > div:last-child { width: 150px; align-self: flex-start; margin: 0 !important; } } @media (prefers-reduced-motion: reduce) { .hero__titolo { animation: dissolvi 500ms ease both !important; } } @media (max-width: 600px) { .punto__icone img { width: 36px; height: 36px; padding: 13px; } } /* gli H1 interni da computer: due righe bilanciate, mai una riga lunga e storta */ @media (min-width: 960px) { body.interna .hero h1.titolo { max-width: 15em; } body.interna .hero { padding-top: var(--s7); } body.interna[data-pagina="chi-siamo"] .hero h1.titolo { margin-inline: auto; } } /* il copy col «noi», da telefono entro le tre righe */ @media (max-width: 600px) { body.interna .laboratorio__testo p, body.interna p.laboratorio__corpo { font-size: 16px; } body.interna [data-coppia] .laboratorio__testo p { font-size: 15.5px; } body.interna [data-domande] details p { font-size: 15.5px; } body.interna [data-composizione="video-scheda"] ol.punti__lista { grid-template-columns: 1fr; gap: 0; } body.interna [data-composizione="video-scheda"] .punto, body.interna [data-composizione="video-scheda"] .punto:first-child { flex-direction: row; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; } body.interna [data-composizione="video-scheda"] .punto:first-child { border-top: 0; } body.interna [data-composizione="video-scheda"] ol.punti__lista > li::before { flex: none; width: 44px; font-size: 32px; } } /* ═══ COLLAUDO GIRO 5 ═══ */ /* le orbite girano attorno al loro centro: centrate con la proprietà translate, mai con transform */ .hero__orbita { transform: none; } @media (max-width: 600px) { /* il premio in home entro le tre righe */ .pc__premio { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s3); } .pc__premio .pc__testo p { font-size: 15px; line-height: 1.45; } /* le schede di icone delle pagine interne entro le tre righe anche a 375 */ body.interna .punto__nome { font-size: 15.5px; } /* i pulsanti: la freccia resta accanto all'ultima parola, il testo centrato */ .btn { display: inline-block; padding: 16px 20px; font-size: 16px; line-height: 1.3; text-align: center; min-height: 0; } .btn--grande { padding: 18px 22px; font-size: 17px; } .btn .freccia { margin-left: 0.3em; } } @media (max-width: 600px) { .btn--testata { display: none; } .link-verde { display: inline-block; } .link-verde .freccia { margin-left: 0.3em; } } @media (max-width: 400px) { .btn { padding-left: 14px; padding-right: 14px; } } @media (max-width: 600px) { body.interna .trailer__azioni .link-verde { font-size: 15.5px; } } /* ═══ 2 STEP (30/10/2026) · i bollini verdi, il pulsante più spesso ═════════════════════════════════════════════ */ /* Bollini «Laktoositon» e «Vegaaninen», come le gocce verdi dei cartelli dei gusti del cliente (fb-060, fb-082): gusto per gusto, la macchia piena del kit (cerchio-salvia) nel verde del kit, testo bianco. È testo vero: al 9-ter nelle altre lingue («Senza lattosio», «Vegano»…). */ .bollini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; pointer-events: none; } .bollino { position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none; width: 96px; aspect-ratio: 1; padding: 10px; color: var(--bianco); font: 400 13px/1 var(--f-titolo); letter-spacing: 0.04em; text-align: center; text-transform: uppercase; rotate: -9deg; filter: drop-shadow(0 6px 8px rgba(2, 80, 48, 0.22)); } .bollino::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--verde); -webkit-mask: url("/assets/img/cerchio-salvia.webp") center / contain no-repeat; mask: url("/assets/img/cerchio-salvia.webp") center / contain no-repeat; } .bollino--due { rotate: 8deg; } /* sulle schede dei gusti: nell'angolo in alto, affiancati, sopra l'immagine e mai sul nome */ .gusti__lista .gusto { position: relative; } .bollini--scheda { position: absolute; z-index: 2; top: 6px; right: 6px; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 0; } .bollini--scheda .bollino { width: 58px; padding: 5px; font-size: 9px; letter-spacing: 0.02em; } .bollini--scheda .bollino + .bollino { margin-left: -10px; } /* sul gusto premiato il bollino del premio sta a destra: i nostri vanno a sinistra */ .gusto:has(img[src*="bollino-vuoden"]) .bollini--scheda { right: auto; left: 6px; align-items: flex-start; } /* /il-nostro-gelato: accanto alla coppetta alla fragola */ body.interna .hero__visual > .bollini { position: absolute; z-index: 3; right: 0; bottom: 6%; flex-direction: column; gap: 0; } body.interna .hero__visual > .bollini .bollino + .bollino { margin-top: -14px; margin-right: 22px; } .gusti__su-misura { color: var(--testo-forte); font-weight: 600; } .gusti__cta { margin-top: var(--s4); } .formati__azione { display: flex; justify-content: center; margin-top: var(--s5); } @media (max-width: 600px) { .bollino { width: 78px; padding: 8px; font-size: 11px; } .bollini--scheda { top: 4px; right: 4px; flex-direction: row; } .bollini--scheda .bollino { width: 46px; padding: 4px; font-size: 7.5px; } .bollini--scheda .bollino + .bollino { margin-top: 0; margin-left: -8px; } .btn--grande { padding-left: 20px; padding-right: 20px; font-size: 15.5px; } } @media (max-width: 360px) { .bollini--scheda { right: 2px; } .bollini--scheda .bollino + .bollino { margin-left: -16px; } .gusto:has(img[src*="bollino-vuoden"]) .bollini--scheda { left: 2px; } } /* Il pulsante lungo: sempre su una riga; «per la tua azienda» solo dove c'è spazio (main.js mette .cta-corta) */ :is(a, button):has(> .cta-testo) { white-space: nowrap; } .cta-corta .cta-lungo { display: none; } @media (min-width: 1180px) and (max-width: 1299px) { .btn--testata .cta-lungo { display: none; } } @media (max-width: 600px) { .cta-lungo { display: none; } } /* (7-bis, audit del 31/10/2026, M3) la prima riga del pulsante la scrive il cliente dal pannello: se non ci sta, il pulsante va a capo e resta dentro lo schermo (sui telefoni lo fa il CSS; più larghi main.js mette .cta-a-capo). Con il testo di oggi, che ci sta su una riga, non cambia niente: né misure né allineamento. */ /* 20em e non una percentuale: anche la testata (flex: none) prende la misura del pulsante andato a capo */ :is(a, button).cta-a-capo:has(> .cta-testo) { white-space: normal !important; max-width: 20em; } :is(a, button).cta-a-capo:has(> .cta-testo) > .cta-testo { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 600px) { :is(a, button):has(> .cta-testo), :is(a, button).cta-a-capo:has(> .cta-testo) { white-space: normal; max-width: 100%; } :is(a, button):has(> .cta-testo) > .cta-testo { min-width: 0; overflow-wrap: anywhere; } }