/* ========================================================================= I'M BACK — Cliché stampa a caldo Foglio di stile unico. Nessun framework, nessun build. Ordine: token · reset · tipografia · componenti · sezioni · responsive ========================================================================= */ /* ── FONT ───────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Archivo'; src: url('../font/archivo-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } /* ── TOKEN ──────────────────────────────────────────────────────────────── */ :root { /* colori — tema scuro (predefinito) */ --col-fondo: #0B0C0E; --col-fondo-alt: #14161A; --col-fondo-alt2: #1C1F25; --col-testo: #F3F5F8; --col-testo-soft: #A2ABB8; --col-bordo: rgba(255,255,255,.11); --col-bordo-forte: rgba(255,255,255,.22); /* colori vivi, richiesti dal cliente */ --col-brand: #C6F531; /* verde fosforescente */ --col-brand-ink: #C6F531; /* versione leggibile come testo */ --col-brand-2: #FF2E7E; /* fucsia */ --col-accento: #FFB020; /* arancione/oro — richiama il foil */ --col-su-brand: #0B0C0E; --metallo: linear-gradient(135deg,#F2F5F9 0%,#AEB9C6 26%,#EEF2F7 48%,#8E9AA8 70%,#D6DDE6 100%); /* tipografia */ --font-titolo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-testo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-xs: clamp(.72rem, .70rem + .10vw, .80rem); --t-s: clamp(.86rem, .83rem + .15vw, .95rem); --t-m: clamp(1rem, .96rem + .20vw, 1.10rem); --t-l: clamp(1.20rem, 1.10rem + .50vw, 1.55rem); --t-xl: clamp(1.65rem, 1.30rem + 1.60vw, 2.80rem); --t-hero: clamp(2.15rem, 1.35rem + 3.40vw, 4.40rem); --t-num: clamp(2.20rem, 1.40rem + 3.40vw, 4.20rem); /* spaziatura */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sezione-y: clamp(3.5rem, 2rem + 6vw, 7.5rem); /* forme e ombre */ --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-tonda: 999px; --ombra-1: 0 2px 10px rgba(0,0,0,.30); --ombra-2: 0 18px 50px rgba(0,0,0,.45); /* movimento */ --dur-veloce: .18s; --dur-media: .38s; --dur-lenta: .8s; --ease-out: cubic-bezier(.22,.68,.36,1); /* layout */ --max-larghezza: 1220px; --gutter: clamp(1rem, .4rem + 2.4vw, 2.5rem); --header-h: 68px; } /* ══ LE ALTRE 3 PALETTE ═══════════════════════════════════════════════════ Il selettore in basso a sinistra scrive data-theme sull'. :root senza attributo = "magnesio" (la predefinita, qui sopra). */ /* ── SCURO 2 · FOIL ORO ──────────────────────────────────────────────────── */ :root[data-theme="foil"] { --col-fondo: #0C0A07; --col-fondo-alt: #16120C; --col-fondo-alt2: #211A11; --col-testo: #F8F4EC; --col-testo-soft: #B5A98F; --col-bordo: rgba(255,214,150,.14); --col-bordo-forte: rgba(255,214,150,.28); --col-brand: #FFB020; /* oro: è il colore del foil */ --col-brand-ink: #FFC44D; --col-brand-2: #FF4D6D; --col-accento: #C6F531; --col-su-brand: #161004; } /* ── CHIARO 1 · CARTA ────────────────────────────────────────────────────── */ :root[data-theme="carta"] { --col-fondo: #F4F1E9; /* carta calda, non bianco */ --col-fondo-alt: #EAE5D9; --col-fondo-alt2: #DED8C8; --col-testo: #16181C; --col-testo-soft: #575F6B; --col-bordo: rgba(0,0,0,.13); --col-bordo-forte: rgba(0,0,0,.26); --col-brand: #C6F531; --col-brand-ink: #5A7600; /* il lime come TESTO su carta non si legge: qui scurito */ --col-brand-2: #D6006A; --col-accento: #B8760A; --col-su-brand: #0B0C0E; --ombra-1: 0 2px 10px rgba(60,50,20,.10); --ombra-2: 0 18px 50px rgba(60,50,20,.16); } /* ── CHIARO 2 · FUCSIA ───────────────────────────────────────────────────── */ :root[data-theme="fucsia"] { --col-fondo: #FCFAF8; --col-fondo-alt: #F3EDEA; --col-fondo-alt2: #E7DFDA; --col-testo: #17141A; --col-testo-soft: #5C5460; --col-bordo: rgba(23,20,26,.13); --col-bordo-forte: rgba(23,20,26,.26); --col-brand: #FF2E7E; --col-brand-ink: #C4005C; --col-brand-2: #F5581D; /* qui il "negativo" va sull'arancio: il fucsia è già il principale */ --col-accento: #7C3AED; /* scuro e non bianco: bianco su #FF2E7E dà ~3,5:1 e le etichette piccole della barra dei numeri diventavano illeggibili. Così siamo a ~5,9:1. */ --col-su-brand: #2A0716; --ombra-1: 0 2px 10px rgba(90,20,60,.10); --ombra-2: 0 18px 50px rgba(90,20,60,.16); } /* ── RESET ──────────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--col-fondo); color: var(--col-testo); font-family: var(--font-testo); font-size: var(--t-m); line-height: 1.62; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color var(--dur-media) var(--ease-out), color var(--dur-media) var(--ease-out); } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 3px solid var(--col-brand); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── TIPOGRAFIA ─────────────────────────────────────────────────────────── */ h1,h2,h3,h4 { font-family: var(--font-titolo); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; } h1 { font-size: var(--t-hero); font-weight: 900; letter-spacing: -.04em; } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-l); letter-spacing: -.02em; } p { text-wrap: pretty; } strong { font-weight: 700; color: var(--col-testo); } .occhiello { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--col-brand-ink); display: flex; align-items: flex-start; gap: .7em; max-width: 52ch; line-height: 1.5; } /* il trattino resta agganciato alla PRIMA riga anche quando il testo va a capo */ .occhiello::before { content:''; width: 26px; height: 2px; background: var(--col-brand); flex: none; margin-top: .72em; } .sommario { font-size: var(--t-l); color: var(--col-testo-soft); font-weight: 500; line-height: 1.42; letter-spacing: -.012em; } .piccolo { font-size: var(--t-s); color: var(--col-testo-soft); } .evidenza { color: var(--col-brand-ink); } /* ── LAYOUT ─────────────────────────────────────────────────────────────── */ .contenitore { width: 100%; max-width: var(--max-larghezza); margin-inline: auto; padding-inline: var(--gutter); } .sezione { padding-block: var(--sezione-y); } .sezione--alt { background: var(--col-fondo-alt); } .testa-sezione { max-width: 46ch; margin-bottom: var(--sp-7); } .testa-sezione h2 { margin-top: var(--sp-3); } .testa-sezione p { margin-top: var(--sp-4); color: var(--col-testo-soft); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--col-brand); color: var(--col-su-brand); padding: .8rem 1.2rem; font-weight: 700; border-radius: 0 0 var(--r-s) 0; } .skip:focus { left: 0; } /* ── PULSANTI ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .95em 1.6em; border-radius: var(--r-tonda); font-weight: 700; font-size: var(--t-s); letter-spacing: -.01em; text-align: center; transition: transform var(--dur-veloce) var(--ease-out), box-shadow var(--dur-veloce) var(--ease-out), background-color var(--dur-veloce) var(--ease-out), color var(--dur-veloce) var(--ease-out); will-change: transform; } .btn svg { width: 1.15em; height: 1.15em; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primario { background: var(--col-brand); color: var(--col-su-brand); box-shadow: 0 6px 20px rgba(198,245,49,.22); } .btn--primario:hover { box-shadow: 0 12px 30px rgba(198,245,49,.34); } .btn--secondario { border: 1.5px solid var(--col-bordo-forte); color: var(--col-testo); } .btn--secondario:hover { border-color: var(--col-brand); color: var(--col-brand-ink); } .btn--scuro { background: var(--col-testo); color: var(--col-fondo); } .btn--grande { padding: 1.1em 2em; font-size: var(--t-m); } /* ── HEADER ─────────────────────────────────────────────────────────────── */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background-color var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out), border-color var(--dur-media) var(--ease-out); border-bottom: 1px solid transparent; } .header.attaccato { background: var(--col-fondo); border-bottom-color: var(--col-bordo); box-shadow: var(--ombra-1); } .header__riga { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; } .logo { display: inline-flex; align-items: center; gap: .6rem; flex: none; } .logo svg, .logo img { width: 34px; height: 34px; } .logo__testo { display: flex; flex-direction: column; line-height: 1; } .logo__nome { font-family: var(--font-titolo); font-weight: 900; font-size: 1.06rem; letter-spacing: -.03em; } .logo__sotto { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--col-testo-soft); margin-top: .28rem; font-weight: 600; } .nav { display: flex; align-items: center; gap: clamp(.6rem, .2rem + 1vw, 1.6rem); } .nav a { font-size: var(--t-s); font-weight: 600; color: var(--col-testo-soft); position: relative; padding: .3em 0; } .nav a::after { content:''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--col-brand); transition: right var(--dur-media) var(--ease-out); } .nav a:hover, .nav a[aria-current="page"] { color: var(--col-testo); } .nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; } .header__azioni { display: flex; align-items: center; gap: .5rem; flex: none; } .icona-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-tonda); border: 1px solid var(--col-bordo); color: var(--col-testo-soft); transition: color var(--dur-veloce), border-color var(--dur-veloce), background-color var(--dur-veloce); } .icona-btn svg { width: 19px; height: 19px; } .icona-btn:hover { color: var(--col-brand-ink); border-color: var(--col-brand); } .hamburger { display: none; } /* menu mobile */ .menu-mobile { position: fixed; inset: 0; z-index: 99; background: var(--col-fondo); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); padding: var(--sp-8) var(--gutter); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-media) var(--ease-out), transform var(--dur-media) var(--ease-out), visibility var(--dur-media); } .menu-mobile[data-aperto="true"] { opacity: 1; visibility: visible; transform: none; } .menu-mobile a { font-family: var(--font-titolo); font-size: clamp(1.7rem,1rem + 3vw,2.6rem); font-weight: 800; letter-spacing: -.03em; border-bottom: 1px solid var(--col-bordo); padding-bottom: var(--sp-3); } .menu-mobile a:hover { color: var(--col-brand-ink); } .menu-mobile .btn { margin-top: var(--sp-4); align-self: flex-start; } /* ── HERO ───────────────────────────────────────────────────────────────── */ .hero { position: relative; padding-top: calc(var(--header-h) + var(--sp-7)); padding-bottom: var(--sp-8); overflow: hidden; } .hero__sfondo { position: absolute; inset: 0; z-index: 0; } .hero__sfondo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; } /* velo orizzontale: il testo sta a sinistra, la foto resta leggibile a destra */ .hero__sfondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--col-fondo) 22%, rgba(11,12,14,.72) 56%, rgba(11,12,14,.20) 100%), linear-gradient(180deg, var(--col-fondo) 0%, transparent 26%, transparent 74%, var(--col-fondo) 100%); } /* sulle due palette chiare la foto va tenuta più indietro, altrimenti mangia il testo */ :root[data-theme="carta"] .hero__sfondo img, :root[data-theme="fucsia"] .hero__sfondo img { opacity: .32; } :root[data-theme="carta"] .hero__sfondo::after { background: linear-gradient(100deg, var(--col-fondo) 22%, rgba(244,241,233,.80) 56%, rgba(244,241,233,.34) 100%), linear-gradient(180deg, var(--col-fondo) 0%, transparent 26%, transparent 74%, var(--col-fondo) 100%); } :root[data-theme="fucsia"] .hero__sfondo::after { background: linear-gradient(100deg, var(--col-fondo) 22%, rgba(252,250,248,.84) 56%, rgba(252,250,248,.38) 100%), linear-gradient(180deg, var(--col-fondo) 0%, transparent 26%, transparent 74%, var(--col-fondo) 100%); } /* ⚠️ max-width in rem, NON in ch: l'unità ch si calcola sul font-size del contenitore (piccolo), non su quello dell'h1 — e il titolo finirebbe a una parola per riga. */ .hero__contenuto { position: relative; z-index: 1; max-width: 44rem; } .hero__contenuto.largo { max-width: 56rem; } .hero h1 { margin-top: var(--sp-4); } .hero .sommario { margin-top: var(--sp-5); max-width: 46ch; } .hero__pulsanti { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } /* il testo che "prende il foil": è la firma grafica del sito */ .foil { background: linear-gradient(100deg, var(--col-testo) 0%, var(--col-testo) 32%, var(--col-brand) 44%, #ffffff 50%, var(--col-accento) 56%, var(--col-testo) 68%, var(--col-testo) 100%); background-size: 280% 100%; background-position: 160% 0; /* a riposo il testo è pieno: senza questo, con animazioni disattivate la banda metallica resterebbe ferma sul testo */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: passaggio-foil 6.5s var(--ease-out) 1.1s infinite; } @keyframes passaggio-foil { 0%, 62%, 100% { background-position: 160% 0; } 22% { background-position: -40% 0; } } .hero__dati { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-6); font-size: var(--t-s); color: var(--col-testo-soft); font-weight: 600; } .hero__dati li { display: inline-flex; align-items: center; gap: .5em; } .hero__dati li::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--col-brand); flex: none; } /* ── BARRA DEI NUMERI ───────────────────────────────────────────────────── */ .numeri { background: var(--col-brand); color: var(--col-su-brand); } .numeri__griglia { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); padding-block: clamp(2rem,1rem + 3vw,3.2rem); } .numeri__voce { text-align: center; } .numeri__voce b { display: block; font-family: var(--font-titolo); font-size: var(--t-num); font-weight: 900; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } /* ⚠️ figlio DIRETTO: dentro c'è lo span del contatore, che non va rimpicciolito */ .numeri__voce > span { display: block; margin-top: .5rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .82; } .numeri__voce b span { font: inherit; letter-spacing: inherit; text-transform: none; opacity: 1; } /* ── CARD CATEGORIA ─────────────────────────────────────────────────────── */ .griglia-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: var(--sp-4); } .cat { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--col-bordo); border-radius: var(--r-l); background: var(--col-fondo-alt); transition: border-color var(--dur-media) var(--ease-out), transform var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out); } .cat:hover { border-color: var(--col-brand); transform: translateY(-5px); box-shadow: var(--ombra-2); } .cat__foto { aspect-ratio: 4/3; overflow: hidden; background: var(--col-fondo-alt2); position: relative; } .cat__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--ease-out); } .cat:hover .cat__foto img { transform: scale(1.06); } .cat__corpo { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .cat__corpo h3 { transition: color var(--dur-veloce); } .cat:hover .cat__corpo h3 { color: var(--col-brand-ink); } .cat__spec { font-size: var(--t-s); color: var(--col-testo-soft); flex: 1; } .cat__vai { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-s); font-weight: 700; color: var(--col-brand-ink); } .cat__vai svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-media) var(--ease-out); } .cat:hover .cat__vai svg { transform: translateX(5px); } .cat__link { position: absolute; inset: 0; z-index: 2; } /* etichetta per le immagini provvisorie — si toglieranno a settembre */ .esempio { position: absolute; left: .7rem; top: .7rem; z-index: 3; background: rgba(11,12,14,.82); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .34em .7em; border-radius: var(--r-tonda); border: 1px solid rgba(255,255,255,.24); } /* ── LO SCAVO (la sezione chiave) ───────────────────────────────────────── */ .scavo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: center; } .scavo__testo p { margin-top: var(--sp-4); color: var(--col-testo-soft); } .scavo__testo p strong { color: var(--col-testo); } .scavo__colpo { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-m); background: var(--col-brand); color: var(--col-su-brand); font-family: var(--font-titolo); font-size: var(--t-l); font-weight: 800; letter-spacing: -.02em; line-height: 1.24; } .scavo__figura { position: relative; } .scavo__figura img { width: 100%; border-radius: var(--r-l); border: 1px solid var(--col-bordo); } /* confronto 1-2 mm vs 4 mm */ .confronto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-7); } .confronto__box { border: 1px solid var(--col-bordo); border-radius: var(--r-l); padding: var(--sp-5); background: var(--col-fondo); } .confronto__box--male { opacity: .74; } .confronto__box--bene { border-color: var(--col-brand); } .confronto__box h3 { font-size: var(--t-m); display: flex; align-items: center; gap: .5em; } .confronto__box p { margin-top: var(--sp-3); font-size: var(--t-s); color: var(--col-testo-soft); } .confronto__disegno { width: 100%; height: auto; margin-bottom: var(--sp-4); border-radius: var(--r-s); overflow: hidden; } .pastiglia { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .3em .7em; border-radius: var(--r-tonda); } .pastiglia--male { background: var(--col-brand-2); color: #fff; } .pastiglia--bene { background: var(--col-brand); color: var(--col-su-brand); } /* ── PREZZO ─────────────────────────────────────────────────────────────── */ .prezzo { text-align: center; max-width: 720px; margin-inline: auto; } .prezzo__cifra { font-family: var(--font-titolo); font-size: clamp(3.2rem,2rem + 6vw,6.5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; margin-block: var(--sp-4); background: linear-gradient(120deg, var(--col-brand), var(--col-accento)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .prezzo__cifra small { font-size: .26em; font-weight: 700; letter-spacing: -.01em; -webkit-text-fill-color: var(--col-testo-soft); color: var(--col-testo-soft); } .prezzo__righe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); } .prezzo__riga { border: 1px solid var(--col-bordo); border-radius: var(--r-tonda); padding: .7em 1.3em; font-size: var(--t-s); } .prezzo__riga b { color: var(--col-brand-ink); } .nota-file { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-m); border: 1px dashed var(--col-bordo-forte); background: var(--col-fondo-alt); font-size: var(--t-s); color: var(--col-testo-soft); text-align: left; display: flex; gap: var(--sp-4); align-items: flex-start; } .nota-file svg { width: 26px; height: 26px; flex: none; color: var(--col-brand-ink); } /* ── PASSI ──────────────────────────────────────────────────────────────── */ .passi { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: var(--sp-6); counter-reset: passo; } .passo { position: relative; padding-top: var(--sp-6); border-top: 2px solid var(--col-bordo); } .passo::before { counter-increment: passo; content: counter(passo); position: absolute; top: calc(-1 * var(--sp-4)); left: 0; font-family: var(--font-titolo); font-size: clamp(2.6rem,2rem + 2vw,3.6rem); font-weight: 900; color: var(--col-brand); letter-spacing: -.06em; line-height: .8; opacity: .30; } .passo h3 { font-size: var(--t-m); } .passo p { margin-top: var(--sp-3); font-size: var(--t-s); color: var(--col-testo-soft); } /* ── TABELLA ────────────────────────────────────────────────────────────── */ .tabella-avvolgi { overflow-x: auto; border: 1px solid var(--col-bordo); border-radius: var(--r-m); } .tabella th, .tabella td { padding: 1.05rem 1.3rem; text-align: left; border-bottom: 1px solid var(--col-bordo); } .tabella tr:last-child th, .tabella tr:last-child td { border-bottom: 0; } .tabella th { font-weight: 700; width: 46%; } .tabella td { color: var(--col-testo-soft); } .tabella tr:hover { background: var(--col-fondo-alt); } .tabella .spicca { color: var(--col-brand-ink); font-weight: 700; } /* ── ELENCO MOTIVI ──────────────────────────────────────────────────────── */ /* 5 motivi: a 210px stanno tutti su una riga sul desktop, senza il buco della quinta card */ .motivi { display: grid; grid-template-columns: repeat(auto-fit,minmax(208px,1fr)); gap: var(--sp-4); } .motivo { padding: var(--sp-5); border: 1px solid var(--col-bordo); border-radius: var(--r-m); background: var(--col-fondo); } .motivo__icona { width: 42px; height: 42px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--col-fondo-alt2); color: var(--col-brand-ink); margin-bottom: var(--sp-4); } .motivo__icona svg { width: 21px; height: 21px; } .motivo h3 { font-size: var(--t-m); } .motivo p { margin-top: var(--sp-2); font-size: var(--t-s); color: var(--col-testo-soft); } /* ── BANDA CTA ──────────────────────────────────────────────────────────── */ .banda { background: var(--col-fondo-alt); border-block: 1px solid var(--col-bordo); text-align: center; } .banda h2 { max-width: 20ch; margin-inline: auto; } .banda p { margin-top: var(--sp-4); color: var(--col-testo-soft); max-width: 48ch; margin-inline: auto; } .banda .btn { margin-top: var(--sp-6); } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .faq { max-width: 800px; } .faq details { border-bottom: 1px solid var(--col-bordo); } .faq summary { cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 0; position: relative; font-family: var(--font-titolo); font-weight: 700; font-size: var(--t-m); letter-spacing: -.015em; transition: color var(--dur-veloce); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--col-brand-ink); } .faq summary::after { content: ''; position: absolute; right: .4rem; top: 50%; width: 13px; height: 13px; border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-media) var(--ease-out); } .faq details[open] summary { color: var(--col-brand-ink); } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq__risposta { padding-bottom: 1.5rem; color: var(--col-testo-soft); font-size: var(--t-s); max-width: 66ch; } .faq__risposta p + p { margin-top: var(--sp-3); } /* ── CONTATTI ───────────────────────────────────────────────────────────── */ .contatti { text-align: center; max-width: 640px; margin-inline: auto; } .contatti__numero { display: inline-flex; align-items: center; gap: .5em; margin-block: var(--sp-5); font-family: var(--font-titolo); font-size: clamp(1.5rem,1rem + 2.4vw,2.4rem); font-weight: 800; letter-spacing: -.03em; } .contatti__numero svg { width: .9em; height: .9em; color: var(--col-brand-ink); } .contatti__sede { margin-top: var(--sp-6); font-size: var(--t-s); color: var(--col-testo-soft); } /* ── GALLERIA ───────────────────────────────────────────────────────────── */ .galleria { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: var(--sp-3); } .galleria figure { margin: 0; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--col-bordo); position: relative; background: var(--col-fondo-alt2); } .galleria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--dur-lenta) var(--ease-out); } .galleria figure:hover img { transform: scale(1.05); } /* ── SCHEDA MACCHINARIO ─────────────────────────────────────────────────── */ .macchine { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: var(--sp-5); } .macchina { border: 1px solid var(--col-bordo); border-radius: var(--r-l); overflow: hidden; background: var(--col-fondo-alt); display: flex; flex-direction: column; } .macchina__foto { aspect-ratio: 16/10; overflow: hidden; background: var(--col-fondo-alt2); } .macchina__foto img { width: 100%; height: 100%; object-fit: cover; } .macchina__corpo { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; } .macchina__spec { font-size: var(--t-s); color: var(--col-testo-soft); display: flex; flex-direction: column; gap: .5rem; flex: 1; } .macchina__spec li { display: flex; gap: .6em; } .macchina__spec li::before { content:'—'; color: var(--col-brand-ink); flex: none; } .macchina__prezzo { font-weight: 800; font-family: var(--font-titolo); font-size: var(--t-m); color: var(--col-brand-ink); } /* ── COLORI FOIL ────────────────────────────────────────────────────────── */ .foil-colori { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: var(--sp-4); } .foil-colore { text-align: center; } .foil-colore i { display: block; aspect-ratio: 1; border-radius: var(--r-m); border: 1px solid var(--col-bordo); box-shadow: inset 0 2px 14px rgba(255,255,255,.30), inset 0 -8px 18px rgba(0,0,0,.34); transition: transform var(--dur-media) var(--ease-out); } .foil-colore:hover i { transform: translateY(-4px) rotate(-1.4deg); } .foil-colore b { display: block; margin-top: var(--sp-3); font-size: var(--t-s); font-weight: 700; } .fc-oro { background: linear-gradient(140deg,#FFF0B8,#D6A11C 38%,#FFF3C4 52%,#B8860B 72%,#F6D77A); } .fc-argento { background: linear-gradient(140deg,#FFFFFF,#B7C0C9 38%,#FDFEFF 52%,#8A939C 72%,#E4E9EE); } .fc-nero { background: linear-gradient(140deg,#5C6068,#16181C 38%,#6F757E 52%,#0B0C0E 72%,#3A3E45); } .fc-rosso { background: linear-gradient(140deg,#FF8A8A,#C0121C 38%,#FF9E9E 52%,#8C0B12 72%,#E8434B); } .fc-blu { background: linear-gradient(140deg,#8FC4FF,#12459E 38%,#A7D2FF 52%,#0A2C68 72%,#3F7FD4); } .fc-verde { background: linear-gradient(140deg,#A6F0B4,#0F8A3C 38%,#B9F5C4 52%,#0A5C28 72%,#43C46B); } /* ── VIDEO ──────────────────────────────────────────────────────────────── */ .video-riquadro { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--col-bordo); background: #0a0a0a; } /* i filmati dei costruttori arrivano uno verticale e uno orizzontale: si ritagliano tutti alla stessa proporzione, altrimenti la griglia si sfonda */ .video-riquadro video { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; } .video-riquadro figcaption { border-top: 1px solid var(--col-bordo); } /* ── FOOTER ─────────────────────────────────────────────────────────────── */ .footer { background: var(--col-fondo-alt); border-top: 1px solid var(--col-bordo); padding-block: var(--sp-8) var(--sp-5); } .footer__griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); } .footer h4 { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--col-testo-soft); margin-bottom: var(--sp-4); font-weight: 700; } .footer p, .footer li { font-size: var(--t-s); color: var(--col-testo-soft); } .footer li + li { margin-top: .55rem; } .footer a:hover { color: var(--col-brand-ink); } .footer__marchio p { margin-top: var(--sp-4); max-width: 34ch; } .footer__legale { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--col-bordo); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; font-size: var(--t-xs); color: var(--col-testo-soft); } /* ── WHATSAPP FLOTTANTE ─────────────────────────────────────────────────── */ .flottante { position: fixed; right: clamp(1rem,.5rem + 1.5vw,1.8rem); bottom: clamp(1rem,.5rem + 1.5vw,1.8rem); z-index: 90; display: inline-flex; align-items: center; gap: .55em; background: #25D366; color: #06301A; font-weight: 800; font-size: var(--t-s); padding: .9em 1.25em; border-radius: var(--r-tonda); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform var(--dur-veloce) var(--ease-out), box-shadow var(--dur-veloce) var(--ease-out); } .flottante:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.45); } .flottante svg { width: 1.35em; height: 1.35em; } .flottante span { display: none; } @media (min-width: 700px) { .flottante span { display: inline; } } /* ── SELETTORE PALETTE (in basso a sinistra) ────────────────────────────── */ .palette { position: fixed; left: clamp(1rem,.5rem + 1.5vw,1.8rem); bottom: clamp(1rem,.5rem + 1.5vw,1.8rem); z-index: 92; } .palette__apri { width: 48px; height: 48px; border-radius: var(--r-tonda); display: grid; place-items: center; background: var(--col-fondo-alt); border: 1px solid var(--col-bordo-forte); color: var(--col-testo); box-shadow: var(--ombra-1); transition: transform var(--dur-veloce) var(--ease-out), border-color var(--dur-veloce), color var(--dur-veloce), box-shadow var(--dur-veloce); } .palette__apri svg { width: 21px; height: 21px; } .palette__apri:hover { transform: translateY(-3px); border-color: var(--col-brand); color: var(--col-brand-ink); box-shadow: var(--ombra-2); } .palette__apri[aria-expanded="true"] { border-color: var(--col-brand); color: var(--col-brand-ink); } .palette__menu { position: absolute; left: 0; bottom: calc(100% + .7rem); width: 268px; max-width: calc(100vw - 2 * clamp(1rem,.5rem + 1.5vw,1.8rem)); background: var(--col-fondo-alt); border: 1px solid var(--col-bordo-forte); border-radius: var(--r-m); box-shadow: var(--ombra-2); padding: .55rem; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97); transform-origin: 0 100%; transition: opacity var(--dur-media) var(--ease-out), transform var(--dur-media) var(--ease-out), visibility var(--dur-media); } .palette[data-aperto="true"] .palette__menu { opacity: 1; visibility: visible; transform: none; } .palette__titolo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--col-testo-soft); padding: .5rem .6rem .6rem; } .palette__voce { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .55rem .6rem; border-radius: var(--r-s); transition: background-color var(--dur-veloce); } .palette__voce:hover { background: var(--col-fondo-alt2); } .palette__campioni { display: flex; flex: none; border-radius: 6px; overflow: hidden; border: 1px solid var(--col-bordo-forte); } .palette__campioni i { width: 15px; height: 30px; display: block; } .palette__nome { flex: 1; font-size: var(--t-s); font-weight: 700; line-height: 1.25; } .palette__nome small { display: block; font-size: .68rem; font-weight: 600; color: var(--col-testo-soft); text-transform: uppercase; letter-spacing: .1em; margin-top: .18rem; } .palette__spunta { width: 17px; height: 17px; flex: none; color: var(--col-brand-ink); opacity: 0; transition: opacity var(--dur-veloce); } .palette__voce[aria-checked="true"] .palette__spunta { opacity: 1; } .palette__voce[aria-checked="true"] .palette__nome { color: var(--col-brand-ink); } @media (max-width: 700px) { .palette__apri { width: 44px; height: 44px; } } /* ── BANNER COOKIE ──────────────────────────────────────────────────────── */ /* sta SOPRA il selettore delle palette, che occupa l'angolo in basso a sinistra */ .cookie { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 4.2rem); z-index: 95; max-width: 640px; background: var(--col-fondo-alt); border: 1px solid var(--col-bordo-forte); border-radius: var(--r-m); padding: var(--sp-5); box-shadow: var(--ombra-2); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; transform: translateY(140%); transition: transform .5s var(--ease-out); } .cookie[data-visibile="true"] { transform: none; } .cookie p { font-size: var(--t-s); color: var(--col-testo-soft); flex: 1 1 240px; } .cookie a { color: var(--col-brand-ink); text-decoration: underline; } .cookie__azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .cookie .btn { padding: .7em 1.1em; font-size: var(--t-xs); } @media (max-width: 700px) { .cookie { bottom: 5.2rem; } } /* ── BRICIOLE ───────────────────────────────────────────────────────────── */ .briciole { font-size: var(--t-xs); color: var(--col-testo-soft); display: flex; gap: .5em; flex-wrap: wrap; } .briciole a:hover { color: var(--col-brand-ink); } .briciole span { opacity: .5; } /* ── COMPARSA ALLO SCROLL ───────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: .07s; } .reveal:nth-child(3) { transition-delay: .14s; } .reveal:nth-child(4) { transition-delay: .21s; } /* ── 404 ────────────────────────────────────────────────────────────────── */ .pagina-404 { min-height: 76vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); } .pagina-404 .cifra { font-family: var(--font-titolo); font-size: clamp(5rem,3rem + 12vw,12rem); font-weight: 900; letter-spacing: -.06em; line-height: .9; color: var(--col-brand); opacity: .22; } /* ── PAGINA DI TESTO (privacy) ──────────────────────────────────────────── */ .testo-lungo { max-width: 72ch; } .testo-lungo h2 { font-size: var(--t-l); margin-top: var(--sp-7); } .testo-lungo h2:first-of-type { margin-top: var(--sp-6); } .testo-lungo p, .testo-lungo li { margin-top: var(--sp-4); color: var(--col-testo-soft); font-size: var(--t-s); } .testo-lungo ul { padding-left: 1.2rem; list-style: disc; } .testo-lungo a { color: var(--col-brand-ink); text-decoration: underline; } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 980px) { .scavo { grid-template-columns: 1fr; } .scavo__figura { order: -1; } .footer__griglia { grid-template-columns: 1fr 1fr; } .numeri__griglia { grid-template-columns: repeat(2,1fr); gap: var(--sp-6) var(--sp-4); } } @media (max-width: 860px) { .nav { display: none; } .hamburger { display: grid; } .hero__contenuto, .hero__contenuto.largo { max-width: none; } } @media (max-width: 640px) { .confronto { grid-template-columns: 1fr; } .footer__griglia { grid-template-columns: 1fr; gap: var(--sp-5); } .prezzo__righe { flex-direction: column; align-items: stretch; } .tabella th { width: 50%; } .tabella th, .tabella td { padding: .9rem 1rem; font-size: var(--t-s); } } /* ── STAMPA ─────────────────────────────────────────────────────────────── */ @media print { .header, .flottante, .cookie, .menu-mobile, .banda, .palette { display: none !important; } body { background: #fff; color: #000; } .reveal { opacity: 1; transform: none; } }