@charset "UTF-8"; /* Variabili e token */ /* ─── Tokens ─── */ :root { --slate: #111827; --slate-surface: #1a2235; --slate-border: #22304a; --ink-on-dark: #eef0f5; --ink-soft-dark: #a0a8be; --cool-light: #eef0f5; --cool-mid: #d4d8e2; --ink-deep: #0e1420; --ink-soft: #5a6380; --ink-mute: #939aad; --border-light: #c4c9d6; --red: #d9000d; --green: #22c55e; /* ── Sector accent tokens — da .lockup > .vertical dei prototipi Cleve/Mixer/Alicon/tr.asset ── */ --sector-ambientali-rgb: 86,196,55; --sector-ambientali-bg: #ecf6dd; --sector-ambientali-border: #4b8d2f; --sector-ambientali-text: #2d5e1f; --sector-ambientali-dark: #9be57e; --sector-edilizia-rgb: 232,160,46; --sector-edilizia-bg: #f7ead0; --sector-edilizia-border: #b58324; --sector-edilizia-text: #6f4a0c; --sector-edilizia-dark: #e1b864; --sector-animali-rgb: 57,144,216; --sector-animali-bg: #d8e6f2; --sector-animali-border: #4a7cc2; --sector-animali-text: #2d4f87; --sector-animali-dark: #9ab8df; --sector-trasset-rgb: 155,108,223; --sector-trasset-bg: #e9dff5; --sector-trasset-border: #7c5cc2; --sector-trasset-text: #4f3787; --sector-trasset-dark: #bda6e0; --font: 'Satoshi', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace; --px: 52px; --px-m: 20px; /* ── Shared button tokens (main.css riga 401-405) — richiesti da .nav-cta ── */ --btn-ease: cubic-bezier(0.22, 1, 0.36, 1); --btn-lift: translateY(-3px) scale(1.01); --btn-dur: .22s; } /* Base layout 2026 (condiviso: header, nav, footer, componenti comuni) */ @property --btn-angle { syntax: ""; inherits: false; initial-value: 0deg; } .layout-2026 { /* ─── Reset ─── .layout-2026 è la classe sul stesso (vedi core::public.master_2026), non un contenitore che avvolge un separato: le regole che nella sorgente main.css puntano a `html`/`body` vanno applicate qui direttamente su `&`, non annidate come `body { }` (che compilerebbe in un selettore discendente `.layout-2026 body`, impossibile da matchare). */ scroll-behavior: smooth; font-family: var(--font); background: var(--slate); color: var(--ink-on-dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; box-sizing: border-box; margin: 0; padding: 0; } .layout-2026 *, .layout-2026 *::before, .layout-2026 *::after { box-sizing: border-box; margin: 0; padding: 0; } .layout-2026 a { text-decoration: none; } .layout-2026 img { display: block; max-width: 100%; } .layout-2026 button { cursor: pointer; font: inherit; border: none; } .layout-2026 { /* ─── Utilities ─── */ } .layout-2026 .eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.11em; text-transform: uppercase; display: block; margin-bottom: 22px; } .layout-2026 .eyebrow--red { color: oklch(65% 0.07 248deg); } .layout-2026 .eyebrow--mute { color: var(--ink-mute); } .layout-2026 .eyebrow--soft { color: var(--ink-soft); } .layout-2026 { /* ─── Nav ─── */ } .layout-2026 .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--px); height: 64px; background: rgba(17, 24, 39, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--slate-border); transition: background 0.3s, border-color 0.3s; } .layout-2026 .nav--light { background: rgba(238, 240, 245, 0.96); border-bottom-color: var(--border-light); } .layout-2026 .nav-logo { height: 55px; width: auto; } .layout-2026 .nav-logo--dark { display: block; mix-blend-mode: screen; } .layout-2026 .nav-logo--light { display: none; } .layout-2026 .nav--light .nav-logo--dark { display: none; } .layout-2026 .nav--light .nav-logo--light { display: block; } .layout-2026 .nav-menu { display: flex; align-items: center; gap: 6px; list-style: none; } .layout-2026 .nav-item { position: relative; } .layout-2026 .nav-link { display: flex; align-items: center; gap: 5px; padding: 8px 14px; font-weight: 500; font-size: 13px; color: var(--ink-soft-dark); letter-spacing: -0.01em; border-radius: 6px; transition: color 0.2s, background 0.2s; white-space: nowrap; } .layout-2026 .nav-link:hover { color: var(--ink-on-dark); background: rgba(255, 255, 255, 0.06); } .layout-2026 .nav--light .nav-link { color: var(--ink-soft); } .layout-2026 .nav--light .nav-link:hover { color: var(--ink-deep); background: rgba(14, 20, 32, 0.06); } .layout-2026 .nav-link.active { color: var(--ink-on-dark); background: rgba(255, 255, 255, 0.1); } .layout-2026 .nav--light .nav-link.active { color: var(--ink-deep); background: rgba(14, 20, 32, 0.08); } .layout-2026 button.nav-link { appearance: none; -webkit-appearance: none; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 500; font-family: var(--font); letter-spacing: -0.01em; } .layout-2026 { /* Language selector */ } .layout-2026 .nav-lang { display: flex; align-items: center; gap: 3px; font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; padding: 8px 14px; color: var(--ink-soft-dark); } .layout-2026 .nav-lang-active { font-weight: 700; color: var(--ink-on-dark); } .layout-2026 .nav--light .nav-lang-active { color: var(--ink-deep); } .layout-2026 .nav-lang-sep { opacity: 0.35; } .layout-2026 .nav-lang-link { color: var(--ink-soft-dark); text-decoration: none; transition: color 0.18s; } .layout-2026 .nav-lang-link:hover { color: var(--ink-on-dark); } .layout-2026 .nav--light .nav-lang { color: var(--ink-mute); } .layout-2026 .nav--light .nav-lang-link { color: var(--ink-mute); } .layout-2026 .nav--light .nav-lang-link:hover { color: var(--ink-deep); } .layout-2026 .nav-chevron { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; flex-shrink: 0; } .layout-2026 .nav-item:hover .nav-chevron, .layout-2026 .nav-item--open .nav-chevron { transform: rotate(225deg) translateY(-2px); } .layout-2026 { /* Dropdown */ } .layout-2026 .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 220px; background: var(--slate-surface); border: 1px solid var(--slate-border); border-radius: 10px; padding: 6px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; pointer-events: none; } .layout-2026 { /* transparent bridge that covers the gap between trigger and panel. Scoped a .nav-item--has-dropdown (non a #navSettori/#navProdotti): quegli id sono generati da Str::studly($menulink->title), che cambia con la traduzione — in inglese il titolo non è più "Settori"/"Prodotti", l'id non combacia più con questi selettori, il ponte sparisce e il mouse perde l'hover passando dal pulsante al menu a tendina. La classe non dipende dal testo, quindi funziona in qualunque lingua. */ } .layout-2026 .nav-item--has-dropdown::after { content: ""; position: absolute; top: 100%; left: -8px; right: -8px; height: 12px; } .layout-2026 .nav-item:hover .nav-dropdown, .layout-2026 .nav-item--open .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .layout-2026 .nav--light .nav-dropdown { background: #fff; border-color: var(--border-light); } .layout-2026 .nav-dropdown-item { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 7px; transition: background 0.15s; } .layout-2026 .nav-dropdown-item:hover { background: rgba(255, 255, 255, 0.07); } .layout-2026 .nav--light .nav-dropdown-item:hover { background: rgba(14, 20, 32, 0.05); } .layout-2026 .nav-dropdown-item.active { background: rgba(255, 255, 255, 0.1); } .layout-2026 .nav--light .nav-dropdown-item.active { background: rgba(14, 20, 32, 0.06); } .layout-2026 .nav-dropdown-item.active .nav-dropdown-label { text-decoration: underline; text-underline-offset: 3px; } .layout-2026 .nav-dropdown-label { font-weight: 600; font-size: 13px; color: var(--ink-on-dark); letter-spacing: -0.01em; margin-bottom: 2px; } .layout-2026 .nav--light .nav-dropdown-label { color: var(--ink-deep); } .layout-2026 .nav-dropdown-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; } .layout-2026 .nav-cta { background: rgba(238, 240, 245, 0.1); border: 1.5px solid rgba(238, 240, 245, 0.28); color: var(--ink-on-dark) !important; font-weight: 700 !important; font-size: 11.5px !important; letter-spacing: 0.04em !important; text-transform: uppercase; padding: 8px 18px !important; border-radius: 6px; transition: background var(--btn-dur) var(--btn-ease), border-color var(--btn-dur) var(--btn-ease), color var(--btn-dur) var(--btn-ease), transform var(--btn-dur) var(--btn-ease), box-shadow var(--btn-dur) var(--btn-ease) !important; margin-left: 6px; } .layout-2026 .nav-cta:hover { background: var(--cool-light) !important; border-color: transparent !important; color: var(--ink-deep) !important; transform: var(--btn-lift); box-shadow: 0 10px 30px -4px rgba(14, 20, 32, 0.22); } .layout-2026 .nav--light .nav-cta { background: var(--ink-deep) !important; border-color: transparent !important; color: var(--ink-on-dark) !important; } .layout-2026 .nav--light .nav-cta:hover { background: var(--slate-surface) !important; } .layout-2026 { /* Mobile hamburger */ } .layout-2026 .nav-hamburger { display: none; flex-direction: column; gap: 4px; padding: 8px; background: none; border: none; cursor: pointer; } .layout-2026 .nav-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--ink-soft-dark); transition: transform 0.2s, opacity 0.2s; } .layout-2026 .nav--light .nav-hamburger span { background: var(--ink-soft); } .layout-2026 .nav-hamburger--open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .layout-2026 .nav-hamburger--open span:nth-child(2) { opacity: 0; } .layout-2026 .nav-hamburger--open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } @media (max-width: 960px) { .layout-2026 .nav { padding: 0 var(--px-m); } .layout-2026 .nav-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; height: calc(100dvh - 64px); background: var(--cool-light); z-index: 199; flex-direction: column; overflow-y: auto; padding: 0; gap: 0; list-style: none; align-items: stretch; } .layout-2026 .nav-menu--open { display: flex; } .layout-2026 .nav-hamburger { display: flex; padding: 10px 0 10px 14px; } .layout-2026 .nav-item { border-bottom: 1px solid var(--border-light); } .layout-2026 .nav-link { width: 100%; font-size: 16px; font-weight: 600; padding: 16px var(--px-m); border-radius: 0; letter-spacing: -0.02em; color: var(--ink-deep); justify-content: space-between; } .layout-2026 .nav-link:hover { color: var(--ink-deep); background: rgba(14, 20, 32, 0.06); } .layout-2026 button.nav-link { width: 100%; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink-deep); } .layout-2026 { /* override nav--light which has higher specificity outside media query */ } .layout-2026 .nav--light .nav-menu .nav-link { color: var(--ink-deep); } .layout-2026 .nav--light .nav-menu button.nav-link { color: var(--ink-deep); } .layout-2026 { /* Disable CSS hover dropdown on mobile — only JS class */ } .layout-2026 .nav-item:hover .nav-dropdown { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px); pointer-events: none; } .layout-2026 { /* Accordion dropdown */ } .layout-2026 .nav-dropdown { position: static; transform: none !important; left: auto; width: 100%; min-width: 0; border: none; border-radius: 0; background: oklch(93% 0.01 248deg); padding: 4px 0; display: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; } .layout-2026 .nav-item--open .nav-dropdown { display: block; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .layout-2026 .nav-item--open .nav-chevron { transform: rotate(225deg) translateY(-2px); } .layout-2026 .nav-dropdown-item { padding: 12px var(--px-m) 12px calc(var(--px-m) + 20px); border-radius: 0; border-bottom: 1px solid oklch(88% 0.012 248deg); } .layout-2026 .nav-dropdown-item:last-child { border-bottom: none; } .layout-2026 .nav-dropdown-item.active { background: oklch(88% 0.012 248deg); } .layout-2026 .nav-dropdown-label { color: var(--ink-deep); font-size: 14px; font-weight: 600; } .layout-2026 .nav-dropdown-sub { font-size: 11px; color: var(--ink-soft); } .layout-2026 .nav--light .nav-dropdown-label { color: var(--ink-deep); } .layout-2026 #navSettori::after, .layout-2026 #navProdotti::after { display: none; } .layout-2026 .nav-lang { padding: 16px var(--px-m); border-bottom: 1px solid var(--border-light); color: var(--ink-soft); font-size: 16px; font-weight: 600; gap: 10px; } .layout-2026 .nav-lang-sep { font-size: 16px; } .layout-2026 .nav-lang-active { color: var(--ink-deep); font-size: 16px; } .layout-2026 .nav-lang-link { color: var(--ink-soft); font-size: 16px; padding: 4px 6px; } .layout-2026 .nav-cta { width: calc(100% - 2 * var(--px-m)) !important; margin: 20px var(--px-m) !important; border-radius: 8px !important; justify-content: center; background: var(--ink-deep) !important; border: none !important; color: var(--ink-on-dark) !important; padding: 14px 18px !important; font-size: 14px !important; font-weight: 600 !important; } } .layout-2026 { /* ─── Hero (copy/azioni + mockup timeline .hero-visual/.hero__photo) ─── */ } .layout-2026 .hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 100px var(--px) 80px; gap: 72px; position: relative; overflow: hidden; background: var(--cool-light); } .layout-2026 .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(180, 190, 210, 0.38) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(164, 174, 196, 0.18) 0%, transparent 60%); } .layout-2026 .hero__photo { background: url("/img/public/2026/bg-hero-home.jpg") left top no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .layout-2026 .hero__photo::before { content: ""; background: #FFF; background: linear-gradient(90deg, rgb(238, 240, 245) 5%, rgba(238, 240, 245, 0) 100%); position: absolute; top: 0; left: 0; width: 90%; height: 100%; } .layout-2026 .hero__photo::after { content: ""; background: #FFF; background: linear-gradient(90deg, rgba(238, 240, 245, 0) 0%, rgb(238, 240, 245) 90%); position: absolute; top: 0; right: 0; width: 90%; height: 100%; } .layout-2026 .hero-copy { position: relative; z-index: 1; padding-left: 24px; } .layout-2026 .hero-copy::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cool-mid); border-radius: 2px; } .layout-2026 .hero-copy::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 72px; background: oklch(65% 0.07 248deg); border-radius: 2px; } .layout-2026 .hero-copy > * { opacity: 0; animation: hero-el-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .layout-2026 .hero-copy > *:nth-child(1) { animation-delay: 60ms; } .layout-2026 .hero-copy > *:nth-child(2) { animation-delay: 150ms; } .layout-2026 .hero-copy > *:nth-child(3) { animation-delay: 280ms; } .layout-2026 .hero-copy > *:nth-child(4) { animation-delay: 350ms; } .layout-2026 .hero-copy > *:nth-child(5) { animation-delay: 460ms; } .layout-2026 .hero-copy > *:nth-child(6) { animation-delay: 550ms; } .layout-2026 .hero-copy > *:nth-child(7) { animation-delay: 620ms; } @keyframes hero-el-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .layout-2026 .hero-title { font-weight: 900; font-size: clamp(3.2rem, 6vw, 4.5rem); line-height: 0.92; letter-spacing: -0.046em; color: var(--ink-deep); margin-bottom: 26px; } .layout-2026 .hero-title em { font-style: italic; font-weight: 300; color: var(--ink-soft); } .layout-2026 .hero--simple { grid-template-columns: 1fr; min-height: auto; padding: 140px var(--px) 64px; } .layout-2026 .hero--simple .hero-copy { max-width: 640px; } .layout-2026 .hero--simple .hero-title, .layout-2026 .hero--simple .section-title { margin-bottom: 0; } @media (max-width: 960px) { .layout-2026 .hero--simple { padding: 96px var(--px-m) 48px; } } .layout-2026 .breadcrumb-2026 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } .layout-2026 .breadcrumb-2026 a { color: var(--ink-mute); transition: color 0.2s; } .layout-2026 .breadcrumb-2026 a:hover { color: var(--ink-deep); } .layout-2026 .breadcrumb-2026 span[aria-current] { color: var(--ink-soft); } .layout-2026 .hero-sub { font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft); max-width: 43ch; margin-bottom: 36px; } .layout-2026 .hero-sub strong { color: var(--ink-deep); font-weight: 600; } .layout-2026 .hero-finale { margin-top: 20px; font-size: 13px; font-family: var(--mono); letter-spacing: 0.04em; color: var(--ink-mute); opacity: 0.8; } .layout-2026 .hero-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 44px; flex-wrap: wrap; } .layout-2026 { /* ── Shared button system (usato da .hero-actions; --btn-ease/--btn-lift/--btn-dur in _variables-2026.scss) ── */ } .layout-2026 .btn-primary { background: var(--ink-deep); color: var(--ink-on-dark); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 15px 26px; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; position: relative; transition: background var(--btn-dur) var(--btn-ease), transform var(--btn-dur) var(--btn-ease), box-shadow var(--btn-dur) var(--btn-ease); box-shadow: 0 2px 16px rgba(14, 20, 32, 0.22); } .layout-2026 .btn-primary:hover { background: var(--slate); transform: var(--btn-lift); box-shadow: 0 14px 40px -4px rgba(14, 20, 32, 0.4), 0 4px 12px rgba(14, 20, 32, 0.18); } .layout-2026 .btn-ghost { color: var(--ink-soft); font-weight: 500; font-size: 13.5px; letter-spacing: -0.01em; position: relative; display: inline-flex; align-items: center; gap: 4px; transition: color var(--btn-dur) var(--btn-ease), transform var(--btn-dur) var(--btn-ease); } .layout-2026 .btn-ghost::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0%; height: 1px; background: currentColor; transition: width 0.28s var(--btn-ease); } .layout-2026 .btn-ghost:hover { color: var(--ink-deep); transform: var(--btn-lift); } .layout-2026 .btn-ghost:hover::after { width: 90%; } .layout-2026 .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1.5px solid rgba(14, 20, 32, 0.1); color: var(--ink-deep); font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 15px 26px; border-radius: 7px; transition: background var(--btn-dur) var(--btn-ease), border-color var(--btn-dur) var(--btn-ease), transform var(--btn-dur) var(--btn-ease), box-shadow var(--btn-dur) var(--btn-ease); text-decoration: none; } .layout-2026 .btn-outline:hover { background: rgba(14, 20, 32, 0.06); border-color: rgba(14, 20, 32, 0.18); transform: var(--btn-lift); box-shadow: 0 10px 30px -4px rgba(14, 20, 32, 0.18), 0 4px 12px rgba(14, 20, 32, 0.1); } .layout-2026 { /* ── Shared arrow behaviour across all button types (.cosa-statement-cta non ancora presente: task futura) ── */ } .layout-2026 .btn-primary .btn-arr, .layout-2026 .btn-ghost .btn-arr, .layout-2026 .btn-outline .btn-arr, .layout-2026 .cosa-statement-cta .btn-arr, .layout-2026 .nav-cta .btn-arr { display: inline-block; transition: transform var(--btn-dur) var(--btn-ease); } .layout-2026 .btn-primary:hover .btn-arr, .layout-2026 .btn-ghost:hover .btn-arr, .layout-2026 .btn-outline:hover .btn-arr, .layout-2026 .cosa-statement-cta:hover .btn-arr, .layout-2026 .nav-cta:hover .btn-arr { transform: translateX(5px); } .layout-2026 { /* ── .btn--comet: reusable running-border mixin ───────────────────── Pure CSS — no JS. @property (registrato in cima al file, fuori da .layout-2026: non può stare annidato in un selettore) lets the browser animate --btn-angle in conic-gradient natively on the compositor. Customise per-instance: --comet-r : border-radius of host (default 7px) --comet-w : ring thickness (default 2px) --comet-bg : dark "off" colour (default ink-deep) Il colore della scia segue --accent-vivid (impostato da ogni pagina prodotto, es. _cleve-2026.scss/_alicon-2026.scss — vedi _product-2026.scss) — non più un verde fisso: prima era hardcoded sulla tonalità di Cleve anche su Alicon/Mixer/ tr.asset/Home. Su Home, dove non esiste un accent di prodotto, ricade sul rosso strutturale del brand (--red). ────────────────────────────────────────────────────────────────── */ } @keyframes comet-spin { to { --btn-angle: 360deg; } } .layout-2026 .btn--comet { position: relative; } .layout-2026 .btn--comet::before { content: ""; position: absolute; inset: calc(var(--comet-w, 2px) * -1); border-radius: calc(var(--comet-r, 7px) + var(--comet-w, 2px)); padding: var(--comet-w, 2px); background: conic-gradient(from var(--btn-angle), var(--comet-bg, oklch(9% 0.027 259deg)) 0deg, var(--comet-bg, oklch(9% 0.027 259deg)) 288deg, color-mix(in srgb, var(--accent-vivid, var(--red)) 50%, transparent) 315deg, var(--accent-vivid, var(--red)) 336deg, color-mix(in srgb, var(--accent-vivid, var(--red)) 50%, transparent) 354deg, var(--comet-bg, oklch(9% 0.027 259deg)) 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; animation: comet-spin 3s linear infinite; } .layout-2026 .btn--comet:hover::before { animation-play-state: paused; opacity: 0; transition: opacity 0.18s ease; } @media (prefers-reduced-motion: reduce) { .layout-2026 .btn--comet::before { display: none; } } .layout-2026 .hero-sectors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .layout-2026 .hero-sectors-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .layout-2026 .sector-tag { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); background: rgba(14, 20, 32, 0.07); border: 1px solid var(--border-light); padding: 4px 10px; border-radius: 20px; } .layout-2026 .sector-tag.sector--ambientali { background: rgba(var(--sector-ambientali-rgb), 0.1); border-color: var(--sector-ambientali-border); color: var(--sector-ambientali-text); } .layout-2026 .sector-tag.sector--edilizia { background: rgba(var(--sector-edilizia-rgb), 0.1); border-color: var(--sector-edilizia-border); color: var(--sector-edilizia-text); } .layout-2026 .sector-tag.sector--animali { background: rgba(var(--sector-animali-rgb), 0.1); border-color: var(--sector-animali-border); color: var(--sector-animali-text); } .layout-2026 .sector-tag.sector--trasset { background: rgba(var(--sector-trasset-rgb), 0.1); border-color: var(--sector-trasset-border); color: var(--sector-trasset-text); } .layout-2026 { /* ─── Hero visual: timeline mockup ─── */ } .layout-2026 .hero-visual { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; background: var(--slate); border-radius: 18px; padding: 22px 22px 0; box-shadow: 0 32px 80px rgba(14, 20, 32, 0.2), 0 4px 16px rgba(14, 20, 32, 0.12); overflow: hidden; } .layout-2026 .tl-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--slate-border); } .layout-2026 .tl-header-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .layout-2026 .badge-live { display: inline-flex; align-items: center; gap: 5px; background: rgba(67, 113, 51, 0.25); color: var(--green); border: 1px solid rgba(67, 113, 51, 0.25); font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 20px; } .layout-2026 .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } .layout-2026 .tl-viewport { position: relative; height: min(500px, 100vh - 260px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); } .layout-2026 .tl-line-base { position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--slate-border); z-index: 1; pointer-events: none; } .layout-2026 .tl-line-green { position: absolute; left: 7px; top: 100%; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(34, 197, 94, 0.5), rgba(34, 197, 94, 0.2)); z-index: 1; pointer-events: none; will-change: top, opacity; } .layout-2026 .tl-inner { position: relative; z-index: 2; will-change: transform, opacity; } .layout-2026 .tl-zone { padding-left: 26px; } .layout-2026 .tl-zone-label { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; padding: 0 0 20px 0; } .layout-2026 .tl-zone--campo .tl-zone-label { color: var(--ink-mute); } .layout-2026 .tl-zone--ufficio .tl-zone-label { color: rgba(34, 197, 94, 0.7); } .layout-2026 .tl-zone-num { color: var(--green); } .layout-2026 .tl-sep { display: flex; align-items: center; gap: 12px; padding: 6px 0 22px 26px; } .layout-2026 .tl-sep-line { flex: 1; height: 1px; background: var(--slate-border); } .layout-2026 .tl-sep-text { font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .layout-2026 .tl-event { display: flex; align-items: flex-start; gap: 14px; padding: 0 0 42px 0; position: relative; } .layout-2026 .tl-event::before { content: ""; position: absolute; left: -22px; top: 10px; width: 7px; height: 7px; border-radius: 50%; } .layout-2026 .tl-zone--campo .tl-event::before { background: var(--ink-soft-dark); } .layout-2026 .tl-zone--ufficio .tl-event::before { background: var(--green); box-shadow: 0 0 7px rgba(34, 197, 94, 0.5); } .layout-2026 .tl-time { font-family: var(--mono); font-size: 10px; min-width: 38px; padding-top: 2px; flex-shrink: 0; } .layout-2026 .tl-zone--campo .tl-time { color: var(--ink-mute); } .layout-2026 .tl-zone--ufficio .tl-time { color: rgba(34, 197, 94, 0.55); } .layout-2026 .tl-body { flex: 1; min-width: 0; } .layout-2026 .tl-card { background: var(--slate-surface); border: 1px solid var(--slate-border); border-radius: 10px; padding: 12px 14px; } .layout-2026 .tl-card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .layout-2026 .tl-card-title { font-weight: 700; font-size: 14px; color: var(--ink-on-dark); letter-spacing: -0.01em; } .layout-2026 .tl-card-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft-dark); margin-bottom: 8px; } .layout-2026 .tl-client { margin: 0 0 8px; padding: 6px 0 8px; border-top: 1px solid var(--slate-border); display: flex; flex-direction: column; gap: 3px; } .layout-2026 .tl-client-row { display: flex; align-items: baseline; gap: 8px; } .layout-2026 .tl-client-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); min-width: 38px; flex-shrink: 0; } .layout-2026 .tl-client-val { flex: 1; min-width: 0; font-size: 10px; font-weight: 600; color: var(--ink-on-dark); line-height: 1.3; } .layout-2026 .tl-pills { display: flex; flex-wrap: wrap; gap: 6px; } .layout-2026 .tl-pill { flex: 1 1 84px; min-width: 0; background: var(--slate); border: 1px solid var(--slate-border); border-radius: 7px; padding: 7px 8px; } .layout-2026 .tl-pill-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; } .layout-2026 .tl-pill-val { font-weight: 700; font-size: 13px; color: var(--ink-on-dark); overflow-wrap: break-word; } .layout-2026 .tl-title { font-weight: 600; font-size: 15px; color: var(--ink-on-dark); line-height: 1.3; margin-bottom: 3px; } .layout-2026 .tl-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft-dark); line-height: 1.4; } .layout-2026 .badge-auto { display: inline-flex; align-items: center; gap: 4px; background: rgba(34, 197, 94, 0.1); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.2); font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 20px; margin-top: 5px; } .layout-2026 .tl-card--uff { background: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.18); margin-top: 8px; } .layout-2026 .tl-card--uff .tl-client { border-top-color: rgba(34, 197, 94, 0.18); } .layout-2026 .tl-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; } .layout-2026 .tl-check-item { min-width: 0; background: var(--slate); border: 1px solid var(--slate-border); border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; } .layout-2026 .tl-check-count { font-weight: 700; font-size: 14px; color: var(--ink-on-dark); letter-spacing: -0.02em; flex-shrink: 0; } .layout-2026 .tl-check-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft-dark); flex: 1; min-width: 0; line-height: 1.3; } .layout-2026 .tl-check-ok { font-size: 10px; color: var(--green); flex-shrink: 0; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.28); border-radius: 4px; padding: 5px 6px; line-height: 1; font-weight: 700; } .layout-2026 .tl-stats { display: flex; gap: 6px; margin-top: 8px; } .layout-2026 .tl-stat { flex: 1; background: var(--slate); border: 1px solid var(--slate-border); border-radius: 7px; padding: 7px 8px; text-align: center; } .layout-2026 .tl-stat-val { font-weight: 900; font-size: 16px; color: var(--ink-on-dark); letter-spacing: -0.03em; line-height: 1; } .layout-2026 .tl-stat-val.green { color: var(--green); } .layout-2026 .tl-stat-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; } .layout-2026 .tl-progress { height: 2px; background: var(--slate-border); border-radius: 2px; overflow: hidden; } .layout-2026 .tl-progress-bar { height: 100%; width: 0%; background: var(--red); border-radius: 2px; } .layout-2026 { /* ─── Title word-compose (usato da hero-title tramite base-2026.js) ─── */ } .layout-2026 .title-word { display: inline-block; } .layout-2026 .title-word-inner { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--wd, 0ms), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--wd, 0ms); } .layout-2026 .title-word-inner.wrd-visible { opacity: 1; transform: translateY(0); } .layout-2026 .hero-copy .hero-title { opacity: 1 !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .layout-2026 .hero-copy > * { animation: none; opacity: 1; } .layout-2026 .title-word-inner { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; } .layout-2026 .tl-inner { transform: none !important; opacity: 1 !important; transition: none !important; } .layout-2026 .tl-line-green { opacity: 1 !important; transition: none !important; } .layout-2026 .badge-dot { animation: none; } .layout-2026 .settori-card-bg, .layout-2026 .settori-card-content { transition: none; } .layout-2026 .logos-inner { animation: none; } } .layout-2026 { /* ══════════════════════════════════════════ LOGO STRIP ══════════════════════════════════════════ */ } .layout-2026 .logos { background: var(--slate); padding: 36px var(--px); display: flex; align-items: center; gap: 32px; } .layout-2026 .logos-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(238, 240, 245, 0.35); white-space: nowrap; flex-shrink: 0; } .layout-2026 .logos-divider { width: 1px; height: 32px; background: rgba(238, 240, 245, 0.1); flex-shrink: 0; } .layout-2026 .logos-track { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .layout-2026 .logos-inner { display: flex; align-items: center; gap: 15px 45px; width: max-content; animation: logos-scroll 28s linear infinite; } @keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .layout-2026 .logo-pill { font-family: var(--font); font-size: 15px; letter-spacing: -0.01em; font-weight: 500; color: rgba(238, 240, 245, 0.5); white-space: nowrap; } .layout-2026 { /* ══════════════════════════════════════════ COSA FACCIAMO ══════════════════════════════════════════ */ } .layout-2026 .cosa { background: var(--cool-light); padding: 100px var(--px); } .layout-2026 .cosa-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 80px; align-items: start; } .layout-2026 .section-title { font-weight: 900; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 0.96; letter-spacing: -0.04em; } .layout-2026 .section-title em { font-style: italic; font-weight: 300; } .layout-2026 .section-title--lg { font-size: clamp(2.4rem, 4.5vw, 4.2rem); } .layout-2026 .section-title--dark { color: var(--ink-deep); } .layout-2026 .section-title--dark em { color: var(--ink-soft); } .layout-2026 .section-title--light { color: var(--ink-on-dark); } .layout-2026 .section-title--light em { color: var(--ink-soft-dark); } .layout-2026 .cosa-body { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; } .layout-2026 .cosa-body + .cosa-body { margin-top: 16px; } .layout-2026 .cosa-body strong { color: var(--ink-deep); font-weight: 600; } .layout-2026 .cosa-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .layout-2026 .pillar { background: oklch(65% 0.07 248deg); padding: 40px 36px; border-top: 3px solid var(--ink-deep); } .layout-2026 .pillar:first-child { border-radius: 12px 0 0 12px; } .layout-2026 .pillar:last-child { border-radius: 0 12px 12px 0; } .layout-2026 .pillar-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); display: block; margin-bottom: 18px; } .layout-2026 .pillar-title { font-weight: 900; font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 0.96; letter-spacing: -0.04em; color: #fff; margin-bottom: 12px; } .layout-2026 .pillar-title em { font-style: italic; font-weight: 400; } .layout-2026 .pillar-lead { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.85); margin-bottom: 20px; } .layout-2026 .pillar-list { list-style: none; display: flex; flex-direction: column; gap: 7px; } .layout-2026 .pillar-list li { font-size: 1rem; color: rgba(255, 255, 255, 0.85); padding-left: 16px; position: relative; line-height: 1.5; } .layout-2026 .pillar-list li::before { content: "\2014"; position: absolute; left: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; } .layout-2026 .cosa-statement { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .layout-2026 .cosa-statement-text { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 55ch; font-weight: 400; } .layout-2026 .cosa-statement-text strong { color: var(--ink-deep); font-weight: 700; } .layout-2026 .cosa-statement-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--ink-deep); color: var(--ink-on-dark); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 26px; border-radius: 8px; text-decoration: none; transition: background var(--btn-dur) var(--btn-ease), transform var(--btn-dur) var(--btn-ease), box-shadow var(--btn-dur) var(--btn-ease); } .layout-2026 .cosa-statement-cta:hover { background: var(--slate); transform: var(--btn-lift); box-shadow: 0 14px 40px -4px rgba(14, 20, 32, 0.4), 0 4px 12px rgba(14, 20, 32, 0.18); } .layout-2026 .cosa-closing { margin-top: 60px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; } .layout-2026 .cosa-closing strong { color: var(--ink-deep); font-weight: 600; } .layout-2026 { /* ── Sector product badges — dark card context (forward-referenced by .settori-card) ── */ } .layout-2026 .settori-card .settori-product-badge.sector--ambientali { background: rgba(var(--sector-ambientali-rgb), 0.16); border: 1px solid rgba(var(--sector-ambientali-rgb), 0.42); color: var(--sector-ambientali-dark); } .layout-2026 .settori-card .settori-product-badge.sector--edilizia { background: rgba(var(--sector-edilizia-rgb), 0.16); border: 1px solid rgba(var(--sector-edilizia-rgb), 0.42); color: var(--sector-edilizia-dark); } .layout-2026 .settori-card .settori-product-badge.sector--animali { background: rgba(var(--sector-animali-rgb), 0.16); border: 1px solid rgba(var(--sector-animali-rgb), 0.42); color: var(--sector-animali-dark); } .layout-2026 .settori-card .settori-product-badge.sector--trasset { background: rgba(var(--sector-trasset-rgb), 0.16); border: 1px solid rgba(var(--sector-trasset-rgb), 0.42); color: var(--sector-trasset-dark); } .layout-2026 { /* ══════════════════════════════════════════ SETTORI ══════════════════════════════════════════ */ } .layout-2026 .settori-intro { background: var(--slate); padding: 96px var(--px) 0; } .layout-2026 .settori-intro-inner { max-width: 820px; } .layout-2026 .settori-negation { margin: 20px 0 28px; } .layout-2026 .settori-neg { font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; color: var(--ink-on-dark); margin-bottom: 6px; } .layout-2026 .settori-neg--1 { font-size: clamp(1.3rem, 2vw, 1.9rem); opacity: 0.45; } .layout-2026 .settori-neg--2 { font-size: clamp(1.5rem, 2.4vw, 2.3rem); opacity: 0.7; } .layout-2026 .settori-neg--3 { font-size: clamp(1.7rem, 2.8vw, 2.8rem); opacity: 1; } .layout-2026 .settori-intro-body { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft-dark); max-width: 58ch; } .layout-2026 .settori-intro-body em { font-style: italic; } .layout-2026 .settori-intro-body strong { font-weight: 600; color: var(--ink-on-dark); } .layout-2026 .settori-cards { background: var(--slate); padding: 48px var(--px) 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .layout-2026 .settori-card { border-radius: 18px; overflow: hidden; position: relative; height: 58vh; min-height: 360px; } .layout-2026 .settori-card-stretched-link { position: absolute; inset: 0; z-index: 3; } .layout-2026 .settori-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6s ease; } .layout-2026 .settori-card:hover .settori-card-bg { transform: scale(1.04); } .layout-2026 .settori-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 10, 18, 0.88) 0%, rgba(6, 10, 18, 0.62) 40%, rgba(6, 10, 18, 0.18) 70%, rgba(6, 10, 18, 0) 92%); } .layout-2026 .settori-card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 28px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .layout-2026 .settori-card:hover .settori-card-content { transform: translateY(-8px); } .layout-2026 .settori-card .settori-num { font-family: var(--font); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; text-transform: none; color: var(--ink-on-dark); margin-bottom: 8px; display: block; } .layout-2026 .settori-card .settori-title { font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.3; color: rgba(238, 240, 245, 0.9); margin-bottom: 12px; } .layout-2026 .settori-card .settori-title em { color: rgba(238, 240, 245, 0.95); font-style: italic; font-weight: 300; } .layout-2026 .settori-card .settori-desc { font-size: 15px; line-height: 1.6; color: rgba(238, 240, 245, 0.8); margin-bottom: 16px; max-width: 70%; } .layout-2026 .settori-card .settori-product { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .layout-2026 .settori-card .settori-product-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238, 240, 245, 0.4); } .layout-2026 .settori-card .settori-product-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(238, 240, 245, 0.1); border: 1px solid rgba(238, 240, 245, 0.18); color: var(--ink-on-dark); padding: 3px 9px; border-radius: 4px; } .layout-2026 .settori-card .settori-link { font-size: 13px; font-weight: 600; color: var(--ink-on-dark); display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; margin: -10px 0; transition: gap 0.2s; } .layout-2026 .settori-card .settori-link:hover { gap: 10px; } .layout-2026 .numeri { background: var(--slate); padding: 50px var(--px) 100px; } .layout-2026 .numeri-header { margin-bottom: 72px; } .layout-2026 .numeri-title { font-weight: 900; font-size: clamp(2.4rem, 4.5vw, 4.2rem); line-height: 0.95; letter-spacing: -0.045em; color: var(--ink-on-dark); } .layout-2026 .numeri-title em { font-style: italic; font-weight: 300; color: var(--ink-soft-dark); } .layout-2026 .numeri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--slate-border); border: 1px solid var(--slate-border); border-radius: 12px; overflow: hidden; } .layout-2026 .numeri-cell { background: var(--slate); padding: 48px 40px; } .layout-2026 .numeri-value { font-weight: 900; font-size: clamp(3rem, 5.5vw, 5.5rem); letter-spacing: -0.05em; line-height: 0.9; color: var(--ink-on-dark); margin-bottom: 14px; } .layout-2026 .numeri-value em { font-style: italic; font-weight: 300; color: var(--green); } .layout-2026 .numeri-desc { font-size: 1rem; line-height: 1.6; color: var(--ink-soft-dark); max-width: 24ch; } .layout-2026 .come { background: var(--cool-mid); padding: 100px var(--px); } .layout-2026 .come-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .layout-2026 .testimonial-carousel { position: relative; margin-bottom: 28px; } .layout-2026 .testimonial { background: #fff; border-radius: 12px; padding: 36px; border: 1px solid var(--border-light); position: relative; transition: opacity 0.38s ease; display: none; } .layout-2026 .testimonial.is-active { display: block; } .layout-2026 .testimonial.is-fading { opacity: 0; } @media (min-width: 961px) { .layout-2026 .testimonial { display: block; } .layout-2026 .testimonial + .testimonial { margin-top: 16px; } .layout-2026 .testimonial-nav { display: none !important; } } .layout-2026 .testimonial-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 0; } .layout-2026 .testimonial-dots { display: flex; gap: 4px; } .layout-2026 .t-arrow { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-light); background: #fff; color: var(--ink-deep); display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .layout-2026 .t-arrow svg { width: 16px; height: 16px; } .layout-2026 .t-arrow:active { background: rgba(14, 20, 32, 0.08); } .layout-2026 .t-dot { width: 30px; height: 30px; position: relative; background: none; border: none; cursor: pointer; padding: 0; } .layout-2026 .t-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--border-light); transform: translate(-50%, -50%); transition: background 0.3s, transform 0.3s; } .layout-2026 .t-dot.t-dot--active::before { background: var(--ink-deep); transform: translate(-50%, -50%) scale(1.45); } .layout-2026 .testimonial::before { content: "\201C"; position: absolute; top: 14px; left: 32px; font-size: 5.5rem; line-height: 1; color: var(--border-light); font-family: var(--font); font-weight: 900; letter-spacing: -0.04em; } .layout-2026 .testimonial-quote { font-size: 1.125rem; line-height: 1.7; color: var(--ink-deep); padding-top: 32px; margin-bottom: 24px; } .layout-2026 .testimonial-author { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; color: var(--ink-mute); text-transform: uppercase; } .layout-2026 .come-copy .section-title { margin-bottom: 24px; } .layout-2026 .come-body { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); } .layout-2026 .come-body + .come-body { margin-top: 14px; } .layout-2026 .come-closing { margin-top: 18px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); } .layout-2026 .come-closing strong { color: var(--ink-deep); font-weight: 600; } .layout-2026 .come-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 48px; } .layout-2026 .come-step { background: oklch(99.4% 0.006 248deg); border: 1.5px solid oklch(87% 0.016 248deg); padding: 28px 24px 24px; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 2px 10px oklch(18% 0.025 252deg / 0.07); transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s; } .layout-2026 .come-step:hover { box-shadow: 0 12px 32px oklch(18% 0.025 252deg / 0.13), 0 2px 8px oklch(18% 0.025 252deg / 0.05); transform: translateY(-2px); border-color: oklch(74% 0.018 248deg); } .layout-2026 .come-step-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(58% 0.08 248deg); display: block; margin-bottom: 10px; } .layout-2026 .come-step-title { font-weight: 800; font-size: 1.18rem; color: var(--ink-deep); letter-spacing: -0.03em; line-height: 1.2; position: relative; } .layout-2026 .come-step-icon { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; color: oklch(58% 0.08 248deg); opacity: 0.18; pointer-events: none; } .layout-2026 .come-link { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 -10px; padding: 10px 0; font-weight: 600; font-size: 13.5px; color: var(--ink-deep); letter-spacing: -0.01em; transition: gap 0.2s; } .layout-2026 .come-link:hover { gap: 12px; } .layout-2026 { /* ══ CTA ══ */ } .layout-2026 .cta-section { background: url("/img/public/2026/bg-cta-footer.jpg") center 40% no-repeat; background-size: cover; padding: 100px var(--px); position: relative; overflow: hidden; } .layout-2026 .cta-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--slate); opacity: 0.8; pointer-events: none; } .layout-2026 .cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .layout-2026 .cta-copy .section-title { margin-bottom: 22px; } .layout-2026 .cta-copy-body { font-size: 1rem; line-height: 1.65; color: var(--ink-soft-dark); max-width: 44ch; margin-bottom: 20px; } .layout-2026 .cta-note { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--ink-mute); line-height: 1.8; } .layout-2026 .cta-note a { color: var(--ink-soft-dark); text-decoration: underline; } .layout-2026 { /* Form — adapted from the proposal's `.form`/`.field` selectors to the real BootForm-generated markup (form-group/form-control/custom-control) */ } .layout-2026 .cta-form-wrap { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 40px; } .layout-2026 .cta-form { display: flex; flex-direction: column; gap: 4px; } .layout-2026 .cta-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; } .layout-2026 .cta-form .row > [class*=col-] { padding: 0; } .layout-2026 .cta-form .row > .col-sm-12 { grid-column: 1/-1; } .layout-2026 .cta-form .row.visually-hidden { display: none; } .layout-2026 .cta-form .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .layout-2026 .cta-form label.sr-only, .layout-2026 .cta-form label:not(.sr-only) { position: static !important; left: auto !important; width: auto !important; height: auto !important; overflow: visible !important; display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; } .layout-2026 .cta-form .form-control { width: 100%; background: #fff; border: 1px solid var(--border-light); border-radius: 7px; padding: 11px 14px; font-family: var(--font); font-size: 16px; color: var(--ink-deep); transition: border-color 0.2s; outline: none; } .layout-2026 .cta-form .form-control::placeholder { color: var(--ink-mute); } .layout-2026 .cta-form select.form-control { cursor: pointer; } .layout-2026 .cta-form select.form-control option { background: #fff; } .layout-2026 .cta-form .form-control:focus { border-color: var(--ink-deep); box-shadow: 0 0 0 3px rgba(14, 20, 32, 0.07); } .layout-2026 .cta-form textarea.form-control { resize: vertical; min-height: 88px; } .layout-2026 .cta-form .custom-control { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 4px; } .layout-2026 .cta-form .custom-control-input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--slate); flex-shrink: 0; } .layout-2026 .cta-form .custom-control-label { font-size: 13px; color: var(--ink-mute); line-height: 1.55; } .layout-2026 .cta-form .custom-control-label a { color: var(--ink-soft-dark); text-decoration: underline; } .layout-2026 .form-submit { width: 100%; margin-top: 8px; background: linear-gradient(90deg, oklch(24% 0.025 252deg) 50%, var(--ink-deep) 50%); background-size: 200% 100%; background-position: 100% 0; color: var(--ink-on-dark); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 17px 28px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background-position 0.32s var(--btn-ease), box-shadow 0.25s; border: none; cursor: pointer; box-shadow: 0 2px 12px rgba(14, 20, 32, 0.18); } .layout-2026 .form-submit:hover { background-position: 0% 0; box-shadow: 0 8px 28px rgba(14, 20, 32, 0.3); } .layout-2026 .form-submit .btn-arr { display: inline-block; transition: transform var(--btn-dur) var(--btn-ease); } .layout-2026 .form-submit:hover .btn-arr { transform: translateX(6px); } .layout-2026 .cta-form-wrap .form-reassurance { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--ink-mute); text-align: center; margin-top: 16px; } .layout-2026 .cta-form-wrap .form-reassurance strong { color: var(--ink-soft-dark); } .layout-2026 { /* ─── Footer ─── */ } .layout-2026 .footer-2026 { background: var(--slate-surface); border-top: 1px solid var(--slate-border); padding: 64px var(--px) 32px; } .layout-2026 .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--slate-border); margin-bottom: 32px; } .layout-2026 .footer-brand img { height: 50px; mix-blend-mode: screen; margin-bottom: 18px; } .layout-2026 .footer-brand-desc { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft-dark); max-width: 32ch; } .layout-2026 .footer-col-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; display: block; } .layout-2026 .footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; } .layout-2026 .footer-links a { font-size: 0.88rem; color: var(--ink-soft-dark); transition: color 0.2s; line-height: 1.3; } .layout-2026 .footer-links a:hover { color: var(--ink-on-dark); } .layout-2026 { /* Fascia bando fondi UE/Regione (solo IT): contenitore chiaro obbligatorio perché i loghi ufficiali non sono ricolorabili e non reggerebbero sul fondo scuro del footer. Sta tra .footer-top e .footer-bottom, come nel footer attuale (bando sopra i credits). */ } .layout-2026 .footer-bando { background: #fff; border-radius: 12px; padding: 10px 28px; margin: 0 auto 32px; /* centrata, larghezza stretta attorno ai loghi (641px + padding) */ max-width: 720px; text-align: center; } .layout-2026 .footer-bando img { max-width: 100%; /* immagine 641×64: resta alla dimensione naturale, centrata */ height: auto; display: inline-block; vertical-align: middle; } .layout-2026 .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .layout-2026 .footer-legal { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-mute); } .layout-2026 .footer-legal-links { display: flex; gap: 20px; list-style: none; } .layout-2026 .footer-legal-links a { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-mute); padding: 10px 0; margin: -10px 0; transition: color 0.2s; } .layout-2026 .footer-legal-links a:hover { color: var(--ink-soft-dark); } @media (max-width: 960px) { .layout-2026 .hero { grid-template-columns: 1fr; padding: 96px var(--px-m) 60px; gap: 52px; min-height: auto; } .layout-2026 .hero-actions { flex-direction: column; align-items: stretch; } .layout-2026 .hero-actions .btn-primary, .layout-2026 .hero-actions .btn-outline { width: 100%; justify-content: center; } .layout-2026 .tl-viewport { height: min(420px, 55vh); } .layout-2026 .tl-checklist { grid-template-columns: 1fr; } .layout-2026 .cosa { padding: 72px var(--px-m); } .layout-2026 .cosa-intro { grid-template-columns: 1fr; gap: 32px; } .layout-2026 .cosa-pillars { grid-template-columns: 1fr; gap: 2px; } .layout-2026 .pillar:first-child { border-radius: 12px 12px 0 0; } .layout-2026 .pillar:last-child { border-radius: 0 0 12px 12px; } .layout-2026 .settori-cards { grid-template-columns: 1fr; padding: 32px var(--px-m) 40px; gap: 16px; } .layout-2026 .settori-card { height: 50vh; min-height: 340px; } .layout-2026 .settori-card-content { padding: 22px 22px 24px; } .layout-2026 .settori-card .settori-title { line-height: 1.2; margin-bottom: 8px; } .layout-2026 .settori-card .settori-desc { line-height: 1.45; margin-bottom: 12px; max-width: 100%; } .layout-2026 .numeri { padding: 72px var(--px-m); } .layout-2026 .numeri-grid { grid-template-columns: 1fr; border-radius: 10px; } .layout-2026 .come { padding: 72px var(--px-m); } .layout-2026 .come-grid { grid-template-columns: 1fr; gap: 48px; } .layout-2026 .come-steps { grid-template-columns: 1fr; } .layout-2026 .testimonial-carousel { display: grid; } .layout-2026 .testimonial-carousel .testimonial { grid-area: 1/1; display: block; opacity: 0; visibility: hidden; pointer-events: none; } .layout-2026 .testimonial-carousel .testimonial.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .layout-2026 .testimonial-carousel .testimonial.is-fading { opacity: 0; } .layout-2026 .cta-section { padding: 72px var(--px-m); } .layout-2026 .cta-inner { grid-template-columns: 1fr; gap: 48px; } .layout-2026 .cta-form .row { grid-template-columns: 1fr; } .layout-2026 .cta-form-wrap { padding: 28px 24px; } .layout-2026 .footer-2026 { padding: 48px var(--px-m) 28px; } .layout-2026 .footer-top { grid-template-columns: 1fr 1fr; } .layout-2026 .footer-brand { grid-column: 1/-1; } .layout-2026 .footer-legal-links a { font-size: 12px; } .layout-2026 .footer-bando { padding: 16px; } .layout-2026 { /* meno padding: più spazio ai loghi su schermi stretti */ } } @media (max-width: 580px) { .layout-2026 .hero-title { font-size: 2.6rem; } .layout-2026 .numeri-value { font-size: 3.2rem; } .layout-2026 .hero-sectors { flex-direction: column; align-items: flex-start; gap: 10px; } .layout-2026 .hero-sectors-label { margin-bottom: 2px; } .layout-2026 .sector-tag { width: 100%; box-sizing: border-box; } .layout-2026 .footer-top { grid-template-columns: 1fr; } } .layout-2026 { /* ══════════════════════════════════════════ COOKIE CONSENT + POPUP DI NOTIFICA/ERRORE Portati (non riusati per intero) dal bundle vecchio (resources/scss/public/_cookie.scss, _popup.scss): iniettati globalmente da App\Http\Middleware\CookieConsent e da core::public.master_2026 (blocchi #info-msg), quindi servono anche nelle pagine 2026. Valori Sass del vecchio bundle risolti qui in locale, per non dipendere da esso. ══════════════════════════════════════════ */ } .layout-2026 .cookie-consent { z-index: 9999; position: fixed; bottom: 15px; right: 15px; width: 500px; max-width: 100%; padding: 20px 20px 30px 20px; background-color: #2a4977; color: #fff; font-size: 13px; line-height: 20px; border-radius: 4px; box-shadow: 5px 5px 15px -2px rgb(135, 135, 135); } .layout-2026 .cookie-consent p { margin-bottom: 10px; } .layout-2026 .cookie-consent p a { font-weight: 600; text-decoration: underline; } .layout-2026 .cookie-consent span.title { font-size: 21px; font-weight: bold; color: #fff; } .layout-2026 .cookie-consent div.description { margin-top: 15px; } .layout-2026 .cookie-consent a { color: #fff; } .layout-2026 .cookie-consent .buttons { padding-top: 10px; line-height: 30px; } .layout-2026 .cookie-consent .buttons span.thanks { font-weight: bold; color: #74bc74; line-height: 1rem !important; } .layout-2026 .cookie-consent .buttons a.cookie-btn { background-color: #0168c1; padding: 10px 20px; color: #fff; text-transform: uppercase; margin-right: 10px; font-weight: bold; text-decoration: none; border-radius: 4px; } .layout-2026 .cookie-consent .buttons a.cookie-btn:hover { background-color: rgb(42.1030927835, 155.7216494845, 253.8969072165); } .layout-2026 .cookie-consent .manage-cookies-container { margin-bottom: 15px; display: none; } .layout-2026 .cookie-consent .manage-cookies-container .accordion { background-color: rgb(35.347826087, 61.4378881988, 100.152173913); color: #fff; font-weight: bold; cursor: pointer; padding: 10px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; margin-top: 5px; border-radius: 4px; } .layout-2026 .cookie-consent .manage-cookies-container .accordion .counter { font-weight: normal; } .layout-2026 .cookie-consent .manage-cookies-container .accordion .icon-right { float: right; font-size: 18px; line-height: 18px; } .layout-2026 .cookie-consent .manage-cookies-container .panel { padding: 15px; display: none; overflow: hidden; border: 1px solid rgb(35.347826087, 61.4378881988, 100.152173913); background-color: rgb(35.347826087, 61.4378881988, 100.152173913); border-radius: 0 0 4px 4px; } .layout-2026 .cookie-consent .manage-cookies-container .panel input[type=checkbox] { -webkit-appearance: none !important; color: #fff; background-color: #2a4977; border: 1px solid #0168c1; box-shadow: none; padding: 10px; border-radius: 0; display: inline-block; position: relative; text-align: center; } .layout-2026 .cookie-consent .manage-cookies-container .panel input[type=checkbox]:disabled { border: rgb(229.5, 229.5, 229.5) !important; background-color: rgb(31.3565217391, 54.500621118, 88.8434782609) !important; } .layout-2026 .cookie-consent .manage-cookies-container .panel input[type=checkbox]:disabled:after { color: rgb(229.5, 229.5, 229.5) !important; } .layout-2026 .cookie-consent .manage-cookies-container .panel input[type=checkbox]:checked { color: #fff; -webkit-appearance: none !important; } .layout-2026 .cookie-consent .manage-cookies-container .panel input[type=checkbox]:checked:after { content: "\2714"; font-size: 16px !important; position: absolute; top: -3px; left: 0; color: #fff; height: 22px !important; width: 22px !important; -webkit-appearance: none !important; } .layout-2026 .cookie-consent .manage-cookies-container .panel span { font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #ec4a4a; position: relative; top: -5px; left: 5px; } .layout-2026 .cookie-consent .manage-cookies-container .panel span.activated { color: #74bc74; } .layout-2026 .cookie-consent .manage-cookies-container .panel ul.cookie-list { padding-left: 0; margin-top: 10px; margin-bottom: 0; } .layout-2026 .cookie-consent .manage-cookies-container .panel ul.cookie-list li { list-style-type: none; } .layout-2026 .cookie-consent .manage-cookies-container .panel ul.cookie-list li i { position: relative; top: -7px; left: 5px; } .layout-2026 .cookie-consent .manage-cookies-container .panel ul.cookie-list li i span { font-weight: normal; font-size: 12px; color: #ec4a4a; top: 0; } .layout-2026 .cookie-consent .manage-cookies-container .panel ul.cookie-list li i span.activated { color: #74bc74; } @media screen and (max-width: 768px) { .layout-2026 .cookie-consent { bottom: 0; right: 0; padding-bottom: 10px; } .layout-2026 .cookie-consent .buttons { text-align: right; } .layout-2026 .cookie-consent .buttons a.cookie-btn { float: left; width: 100%; text-align: center; padding: 5px 20px; } } .layout-2026 .overlay-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 8; } .layout-2026 .white-popup { position: fixed; top: 25%; left: 50%; background-color: #fff; padding: 30px; font-size: 16px; text-align: center; max-width: 500px; margin: 20px 0 20px -250px; z-index: 9; color: #333; -webkit-font-smoothing: antialiased; } @media screen and (max-width: 640px) { .layout-2026 .white-popup { width: 96% !important; margin: 20px auto !important; left: 2%; } } .layout-2026 .flash-alert { background-color: #fff; display: block; text-align: center; padding: 30px; width: auto; max-width: 500px !important; } .layout-2026 .flash-alert a { text-decoration: underline; } .layout-2026 .flash-alert h3 { font-weight: 700; font-size: 21px; text-transform: uppercase; color: #F48024; } .layout-2026 .flash-alert .btn-block { display: block; max-width: 200px; padding: 0; margin: 20px auto 0; text-align: center; line-height: 40px; background-color: #F48024; font-size: 16px; color: #fff; text-decoration: none !important; } .layout-2026 .flash-error { background-color: #fff; display: block; text-align: center; padding: 30px; width: auto; max-width: 500px !important; } .layout-2026 .flash-error a { text-decoration: underline; } .layout-2026 .flash-error h3 { font-weight: 700; font-size: 21px; text-transform: uppercase; color: #D9534F; } .layout-2026 .flash-error .btn-block { display: block; max-width: 200px; padding: 0; margin: 20px auto 0; text-align: center; line-height: 40px; background-color: #D9534F; font-size: 16px; color: #fff; text-decoration: none !important; } .layout-2026 .flash-notice { background-color: #fff; display: block; text-align: center; padding: 30px; width: auto; max-width: 500px !important; } .layout-2026 .flash-notice a { text-decoration: underline; } .layout-2026 .flash-notice h3 { font-weight: 700; font-size: 21px; text-transform: uppercase; color: #337AB7; } .layout-2026 .flash-notice .btn-block { display: block; max-width: 200px; padding: 0; margin: 20px auto 0; text-align: center; line-height: 40px; background-color: #337AB7; font-size: 16px; color: #fff; text-decoration: none !important; } .layout-2026 .flash-success { background-color: #fff; display: block; text-align: center; padding: 30px; width: auto; max-width: 500px !important; } .layout-2026 .flash-success a { text-decoration: underline; } .layout-2026 .flash-success h3 { font-weight: 700; font-size: 21px; text-transform: uppercase; color: #3c763d; } .layout-2026 .flash-success .btn-block { display: block; max-width: 200px; padding: 0; margin: 20px auto 0; text-align: center; line-height: 40px; background-color: #3c763d; font-size: 16px; color: #fff; text-decoration: none !important; } .layout-2026 .flash-info { background-color: #fff; display: block; text-align: center; padding: 30px; width: auto; max-width: 500px !important; } .layout-2026 .flash-info a { text-decoration: underline; } .layout-2026 .flash-info h3 { font-weight: 700; font-size: 21px; text-transform: uppercase; color: #333333; } .layout-2026 .flash-info .btn-block { display: block; max-width: 200px; padding: 0; margin: 20px auto 0; text-align: center; line-height: 40px; background-color: #333333; font-size: 16px; color: #fff; text-decoration: none !important; } .layout-2026.page-cleve { --accent: var(--sector-ambientali-text); /* verde scuro · testo su light */ --accent-mid: var(--sector-ambientali-border); /* verde medio · bordi/linee */ --accent-soft: var(--sector-ambientali-dark); /* verde chiaro · su dark */ --accent-bg: var(--sector-ambientali-bg); /* tint verde chiarissimo */ --accent-vivid: oklch(70% 0.21 135); /* verde vivo ≈ logo · linee/dot */ } .layout-2026.page-cleve .eyebrow--cleve { color: var(--accent-soft); } .layout-2026.page-cleve .section--light .eyebrow--cleve { color: var(--accent); } .layout-2026.page-cleve .hero-title em { color: var(--accent-mid); } .layout-2026.page-cleve .cleve-sec { padding: 100px var(--px); position: relative; } .layout-2026.page-cleve .cleve-sec--light { background: var(--cool-light); } .layout-2026.page-cleve .cleve-sec--mid { background: var(--cool-mid); } .layout-2026.page-cleve .cleve-sec--dark { background: var(--slate); } .layout-2026.page-cleve .cleve-intro-body { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; } .layout-2026.page-cleve .cleve-intro-body strong { color: var(--ink-deep); font-weight: 600; } .layout-2026.page-cleve .cleve-head { max-width: 760px; margin-bottom: 56px; } .layout-2026.page-cleve .cleve-head .section-title { margin-bottom: 22px; } .layout-2026.page-cleve .cleve-head .section-title em { color: var(--accent-mid); } .layout-2026.page-cleve .hero__photo { background-image: url("/img/public/2026/bg-hero-cleve.jpg"); background-position: center top; } .layout-2026.page-cleve .cleve-lockup { margin-bottom: 26px; } .layout-2026.page-cleve .cleve-breadcrumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } .layout-2026.page-cleve .cleve-breadcrumb a { color: var(--ink-mute); transition: color 0.2s; } .layout-2026.page-cleve .cleve-breadcrumb a:hover { color: var(--accent); } .layout-2026.page-cleve .cleve-breadcrumb span[aria-current] { color: var(--ink-soft); } .layout-2026.page-cleve .cleve-lockup-mark { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .layout-2026.page-cleve .cleve-logo { height: 34px; width: auto; } .layout-2026.page-cleve .cleve-vertical { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 5px 11px; border: 1px solid var(--accent-mid); border-radius: 20px; background: var(--accent-bg); } .layout-2026.page-cleve .hero-sub + .hero-sub { margin-top: 18px; } .layout-2026.page-cleve .hero-sub:last-of-type { margin-bottom: 36px; } .layout-2026.page-cleve .cleve-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .layout-2026.page-cleve .cleve-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border-light); padding: 7px 13px; border-radius: 7px; } .layout-2026.page-cleve .cleve-badge svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; } .layout-2026.page-cleve .flowmap { padding: 22px 24px 26px; gap: 18px; } .layout-2026.page-cleve .flowmap { background-image: linear-gradient(to right, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.85) 45%, rgba(17, 24, 39, 0.7) 100%), url("/img/public/2026/cleve_flusso.jpg"); background-size: cover; background-position: center bottom; } .layout-2026.page-cleve .flowmap-track { position: relative; padding-left: 8px; } .layout-2026.page-cleve .flowmap-line { position: absolute; left: 21px; top: 14px; bottom: 14px; width: 2px; background: var(--slate-border); border-radius: 2px; } .layout-2026.page-cleve .flowmap-fill { position: absolute; left: 21px; top: 14px; width: 2px; height: 0%; background: linear-gradient(to bottom, var(--accent-vivid), oklch(72% 0.17 135deg)); border-radius: 2px; box-shadow: 0 0 12px oklch(70% 0.21 135deg / 0.55); transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .layout-2026.page-cleve .flowmap-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; } .layout-2026.page-cleve .flowmap-step { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; padding: 9px 0; opacity: 0.42; transition: opacity 0.45s ease; } .layout-2026.page-cleve .flowmap-step.is-on { opacity: 1; } .layout-2026.page-cleve .flowmap-marker { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--slate-surface); border: 1.5px solid var(--slate-border); font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-soft-dark); transition: border-color 0.45s ease, color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease; } .layout-2026.page-cleve .flowmap-step.is-on .flowmap-marker { border-color: var(--accent-vivid); color: var(--accent-soft); box-shadow: 0 0 0 4px oklch(70% 0.21 135deg / 0.12); } .layout-2026.page-cleve .flowmap-step--hub .flowmap-marker { font-size: 13px; } .layout-2026.page-cleve .flowmap-step.is-on.flowmap-step--hub .flowmap-marker { background: var(--accent-vivid); color: var(--slate); border-color: var(--accent-vivid); } .layout-2026.page-cleve .flowmap-body { padding-top: 1px; } .layout-2026.page-cleve .flowmap-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 3px; } .layout-2026.page-cleve .flowmap-title { font-size: 14px; font-weight: 700; color: var(--ink-on-dark); letter-spacing: -0.01em; margin-bottom: 4px; } .layout-2026.page-cleve .flowmap-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em; color: var(--ink-soft-dark); line-height: 1.5; } .layout-2026.page-cleve .flowmap-loop { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 44px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); opacity: 0.8; } .layout-2026.page-cleve .flowmap-loop svg { width: 13px; height: 13px; } .layout-2026.page-cleve .sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; } .layout-2026.page-cleve .sub-cell { background: #fff; padding: 38px 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; transition: background 0.3s, opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layout-2026.page-cleve .sub-cell-text { display: flex; flex-direction: column; gap: 12px; } .layout-2026.page-cleve .sub-icon { width: 150px; height: auto; flex-shrink: 0; opacity: 0.88; pointer-events: none; user-select: none; } .layout-2026.page-cleve .cleve-sec--mid .sub-cell { background: var(--cool-mid); } .layout-2026.page-cleve .sub-cell:hover { background: var(--accent-bg); } .layout-2026.page-cleve .sub-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); } .layout-2026.page-cleve .sub-title { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink-deep); line-height: 1.08; } .layout-2026.page-cleve .sub-title em { font-style: italic; font-weight: 300; color: var(--accent); } .layout-2026.page-cleve .sub-desc { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 42ch; } .layout-2026.page-cleve .sub-tag { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; } .layout-2026.page-cleve .sub-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-vivid); } .layout-2026.page-cleve .caso-banner { margin-top: 28px; background: var(--accent-bg); border: 1px solid var(--accent-mid); border-radius: 14px; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .layout-2026.page-cleve .caso-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; } .layout-2026.page-cleve .caso-text { font-size: 1.08rem; line-height: 1.55; color: var(--ink-deep); max-width: 62ch; font-weight: 500; } .layout-2026.page-cleve .caso-text strong { font-weight: 700; } .layout-2026.page-cleve .shift-list { display: flex; flex-direction: column; gap: 30px; } .layout-2026.page-cleve .shift-item { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 48px; background: rgba(255, 255, 255, 0.35); border: 1px solid var(--border-light); border-radius: 16px; align-items: center; position: relative; overflow: hidden; transition: background 0.3s, box-shadow 0.3s, opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layout-2026.page-cleve .shift-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--accent-mid); border-radius: 0 2px 2px 0; transform: translateY(-50%); transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .layout-2026.page-cleve .shift-item:hover { background: #fff; box-shadow: 0 18px 50px -18px rgba(14, 20, 32, 0.22); } .layout-2026.page-cleve .shift-item:hover::before { height: 100%; } .layout-2026.page-cleve .shift-lead { position: relative; } .layout-2026.page-cleve .shift-num { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); display: block; margin-bottom: 16px; } .layout-2026.page-cleve .shift-solution { font-size: clamp(1.4rem, 2.2vw, 1.95rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.03em; color: var(--ink-deep); margin-bottom: 14px; } .layout-2026.page-cleve .shift-solution strong { font-weight: 900; } .layout-2026.page-cleve .shift-solution em { font-style: italic; font-weight: 300; color: var(--accent); } .layout-2026.page-cleve .shift-detail { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 50ch; margin-bottom: 20px; } .layout-2026.page-cleve .shift-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--accent); transition: gap 0.2s; } .layout-2026.page-cleve .shift-link:hover { gap: 12px; } .layout-2026.page-cleve .hero-copy { padding-left: 24px; } .layout-2026.page-cleve .hero-copy::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cool-mid); border-radius: 2px; } .layout-2026.page-cleve .hero-copy::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 72px; background: var(--accent-soft); border-radius: 2px; } .layout-2026.page-cleve .shift-num-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; } .layout-2026.page-cleve .shift-num-row .shift-num { margin-bottom: 0; } .layout-2026.page-cleve .shift-badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); background: transparent; border: 1px solid var(--border-light); padding: 3px 9px; border-radius: 20px; line-height: 1; white-space: normal; font-weight: 400; margin-bottom: 4px; } .layout-2026.page-cleve .shift-client { display: flex; align-items: center; gap: 14px; } .layout-2026.page-cleve .shift-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink-on-dark); color: var(--ink-soft-dark); border: 1.5px solid var(--ink-soft-dark); display: grid; place-items: center; font-family: var(--font); font-size: 18px; font-weight: 900; flex-shrink: 0; letter-spacing: -0.01em; } .layout-2026.page-cleve .shift-client-info { display: flex; flex-direction: column; gap: 4px; } .layout-2026.page-cleve .shift-client-name { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; color: var(--ink-soft); line-height: 1.4; } .layout-2026.page-cleve .shift-cost-metric { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.04em; color: var(--accent); line-height: 1; flex-shrink: 0; } .layout-2026.page-cleve .shift-cost-metric small { font-size: 0.7rem; letter-spacing: 0; font-weight: 700; opacity: 0.85; margin-left: 5px; } .layout-2026.page-cleve .shift-aside { display: flex; flex-direction: column; gap: 14px; } .layout-2026.page-cleve .shift-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .layout-2026.page-cleve .shift-tag svg { width: 14px; height: 14px; flex-shrink: 0; } .layout-2026.page-cleve .shift-problem { background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 24px 26px; } .layout-2026.page-cleve .shift-tag--voice { color: var(--ink-mute); margin-bottom: 0; } .layout-2026.page-cleve .shift-problem figcaption { margin-bottom: 16px; } .layout-2026.page-cleve .shift-problem blockquote { font-size: 1.08rem; line-height: 1.5; color: var(--ink-deep); font-weight: 500; font-style: italic; } .layout-2026.page-cleve .shift-cost { display: flex; gap: 16px; align-items: center; background: var(--accent-bg); border: 1px solid var(--accent-mid); border-radius: 14px; padding: 18px 22px; } .layout-2026.page-cleve .shift-cost-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 1px; } .layout-2026.page-cleve .shift-cost-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px; } .layout-2026.page-cleve .shift-cost p { font-size: 0.98rem; line-height: 1.45; color: var(--ink-deep); font-weight: 500; } .layout-2026.page-cleve .cta-band { padding: 84px var(--px); background: var(--slate); text-align: center; } .layout-2026.page-cleve .cta-band-inner { max-width: 720px; margin: 0 auto; } .layout-2026.page-cleve .cta-band-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); display: block; margin-bottom: 22px; } .layout-2026.page-cleve .cta-band-title { font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--ink-on-dark); margin-bottom: 16px; } .layout-2026.page-cleve .cta-band-title em { font-style: italic; font-weight: 300; color: var(--accent-soft); } .layout-2026.page-cleve .cta-band-text { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft-dark); max-width: 56ch; margin: 0 auto 32px; } .layout-2026.page-cleve .cta-band .btn-primary { background: var(--accent-vivid); color: var(--slate); } .layout-2026.page-cleve .cta-band .btn-primary:hover { background: oklch(72% 0.21 135deg); } .layout-2026.page-cleve .cta-band--img { min-height: 70vh; display: flex; align-items: center; background-image: linear-gradient(100deg, rgb(17, 24, 39) 0%, rgba(17, 24, 39, 0.92) 30%, rgba(17, 24, 39, 0.72) 62%, rgba(17, 24, 39, 0.48) 100%), url("/img/public/2026/sfondo-cleve.jpg"); background-size: cover; background-position: center center; background-attachment: fixed; } @supports (-webkit-touch-callout: none) { .layout-2026.page-cleve .cta-band--img { background-attachment: scroll; } } .layout-2026.page-cleve .flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .layout-2026.page-cleve .flow-step { padding: 0 22px; position: relative; } .layout-2026.page-cleve .flow-step:first-child { padding-left: 0; } .layout-2026.page-cleve .flow-step:not(:first-child)::before { content: ""; position: absolute; top: 13px; left: 0; width: 1px; height: calc(100% - 13px); background: var(--border-light); } .layout-2026.page-cleve .flow-step-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .layout-2026.page-cleve .flow-step-num::after { content: ""; flex: 1; height: 1px; background: var(--border-light); } .layout-2026.page-cleve .flow-step-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-deep); line-height: 1.15; margin-bottom: 12px; } .layout-2026.page-cleve .flow-step-desc { font-size: 0.96rem; line-height: 1.55; color: var(--ink-soft); } .layout-2026.page-cleve .aree-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; } .layout-2026.page-cleve .aree-cell { background: var(--cool-light); padding: 34px 30px; transition: background 0.3s, opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layout-2026.page-cleve .cleve-sec--mid .aree-cell { background: #fff; } .layout-2026.page-cleve .aree-cell:hover { background: var(--accent-bg); } .layout-2026.page-cleve .aree-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); display: block; margin-bottom: 16px; } .layout-2026.page-cleve .aree-title { font-size: clamp(1.45rem, 2vw, 1.65rem); font-weight: 900; letter-spacing: -0.035em; color: var(--ink-deep); line-height: 1.05; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); } .layout-2026.page-cleve .aree-title em { font-style: italic; font-weight: 300; color: var(--accent); } .layout-2026.page-cleve .aree-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } .layout-2026.page-cleve .aree-list li { font-size: 0.96rem; line-height: 1.4; color: var(--ink-soft); padding-left: 18px; position: relative; } .layout-2026.page-cleve .aree-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-vivid); opacity: 0.65; } .layout-2026.page-cleve { /* ════════════════════════════════════════════════════════════════ FAQ — accordion accessibile (grid-rows, niente animazione layout) ════════════════════════════════════════════════════════════════ */ } .layout-2026.page-cleve .faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } .layout-2026.page-cleve .faq-list { border-top: 1px solid var(--border-light); } .layout-2026.page-cleve .faq-item { border-bottom: 1px solid var(--border-light); } .layout-2026.page-cleve .faq-q { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; text-align: left; font-family: var(--font); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-deep); cursor: pointer; transition: color 0.2s; } .layout-2026.page-cleve .faq-q:hover { color: var(--accent); } .layout-2026.page-cleve .faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .layout-2026.page-cleve .faq-icon::before, .layout-2026.page-cleve .faq-icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; } .layout-2026.page-cleve .faq-icon::before { top: 7px; left: 0; width: 16px; height: 2px; } .layout-2026.page-cleve .faq-icon::after { top: 0; left: 7px; width: 2px; height: 16px; } .layout-2026.page-cleve .faq-item.is-open .faq-icon::after { transform: scaleY(0); opacity: 0; } .layout-2026.page-cleve .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .layout-2026.page-cleve .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .layout-2026.page-cleve .faq-a-inner { overflow: hidden; } .layout-2026.page-cleve .faq-a p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-width: 64ch; padding-bottom: 26px; } .layout-2026.page-cleve .cta-signature { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .layout-2026.page-cleve .cta-signature img { height: 30px; width: auto; } .layout-2026.page-cleve .cta-signature span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft-dark); } .layout-2026.page-cleve .cta-copy .section-title em { color: var(--accent-soft); } .layout-2026.page-cleve .cta-note a { color: var(--accent-soft); } .layout-2026.page-cleve .form-submit { background: linear-gradient(90deg, var(--accent-vivid) 50%, var(--ink-deep) 50%); background-size: 200% 100%; background-position: 100% 0; } .layout-2026.page-cleve .form-submit:hover { background-position: 0% 0; } @media (max-width: 960px) { .layout-2026.page-cleve .cleve-sec { padding: 72px var(--px-m); } .layout-2026.page-cleve .cta-band { padding: 64px var(--px-m); } .layout-2026.page-cleve .cleve-head { margin-bottom: 40px; } .layout-2026.page-cleve .sub-grid { grid-template-columns: 1fr; } .layout-2026.page-cleve .caso-banner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 28px; } .layout-2026.page-cleve .shift-item { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; } .layout-2026.page-cleve .flow-steps { grid-template-columns: 1fr 1fr; gap: 32px 0; } .layout-2026.page-cleve .flow-step { padding: 0 18px; } .layout-2026.page-cleve .flow-step:nth-child(odd) { padding-left: 0; } .layout-2026.page-cleve .flow-step:nth-child(odd)::before { display: none; } .layout-2026.page-cleve .aree-grid { grid-template-columns: 1fr; } .layout-2026.page-cleve .faq-layout { grid-template-columns: 1fr; gap: 32px; } .layout-2026.page-cleve .cleve-lockup-mark { gap: 12px; } } @media (max-width: 580px) { .layout-2026.page-cleve .flow-steps { grid-template-columns: 1fr; } .layout-2026.page-cleve .flow-step { padding: 0; } .layout-2026.page-cleve .flow-step::before { display: none !important; } .layout-2026.page-cleve .sub-cell { padding: 30px 24px; grid-template-columns: 1fr; } .layout-2026.page-cleve .sub-icon { display: none; } .layout-2026.page-cleve .cleve-logo { height: 30px; } } @media (prefers-reduced-motion: reduce) { .layout-2026.page-cleve .flowmap-step { opacity: 1; } .layout-2026.page-cleve .flowmap-fill { transition: none; } .layout-2026.page-cleve .faq-a { transition: none; } } /* Base condivisa delle pagine prodotto (Alicon, Mixer, tr.asset) + override colore per prodotto */ .layout-2026.page-product .eyebrow--product { color: var(--accent-soft); } .layout-2026.page-product .section--light .eyebrow--product { color: var(--accent); } .layout-2026.page-product .hero-title em { color: var(--accent-mid); } .layout-2026.page-product .product-sec { padding: 100px var(--px); position: relative; } .layout-2026.page-product .product-sec--light { background: var(--cool-light); } .layout-2026.page-product .product-sec--mid { background: var(--cool-mid); } .layout-2026.page-product .product-sec--dark { background: var(--slate); } .layout-2026.page-product .product-intro-body { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; } .layout-2026.page-product .product-intro-body strong { color: var(--ink-deep); font-weight: 600; } .layout-2026.page-product .product-head { max-width: 760px; margin-bottom: 56px; } .layout-2026.page-product .product-head .section-title { margin-bottom: 22px; } .layout-2026.page-product .product-head .section-title em { color: var(--accent-mid); } .layout-2026.page-product .hero__photo { background-position: center top; } .layout-2026.page-product .product-lockup { margin-bottom: 26px; } .layout-2026.page-product .product-breadcrumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } .layout-2026.page-product .product-breadcrumb a { color: var(--ink-mute); transition: color 0.2s; } .layout-2026.page-product .product-breadcrumb a:hover { color: var(--accent); } .layout-2026.page-product .product-breadcrumb span[aria-current] { color: var(--ink-soft); } .layout-2026.page-product .product-lockup-mark { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .layout-2026.page-product .product-logo { height: 34px; width: auto; } .layout-2026.page-product .product-vertical { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 5px 11px; border: 1px solid var(--accent-mid); border-radius: 20px; background: var(--accent-bg); } .layout-2026.page-product .hero-sub + .hero-sub { margin-top: 18px; } .layout-2026.page-product .hero-sub:last-of-type { margin-bottom: 36px; } .layout-2026.page-product .hero-copy { padding-left: 24px; } .layout-2026.page-product .hero-copy::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cool-mid); border-radius: 2px; } .layout-2026.page-product .hero-copy::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 72px; background: var(--accent-soft); border-radius: 2px; } .layout-2026.page-product .product-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .layout-2026.page-product .product-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border-light); padding: 7px 13px; border-radius: 7px; } .layout-2026.page-product .product-badge svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; } .layout-2026.page-product .hero-visual--generic { background: var(--slate-surface); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 32px 80px rgba(14, 20, 32, 0.2), 0 4px 16px rgba(14, 20, 32, 0.12); } .layout-2026.page-product .hero-visual--generic .hv-header { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft-dark); padding-bottom: 16px; border-bottom: 1px solid var(--slate-border); } .layout-2026.page-product .hero-visual--generic .hv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .layout-2026.page-product .hero-visual--generic .hv-stat { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--slate-border); border-radius: 10px; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; } .layout-2026.page-product .hero-visual--generic .hv-stat-value { font-family: var(--font); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--ink-on-dark); } .layout-2026.page-product .hero-visual--generic .hv-stat-value small { font-size: 0.5em; font-weight: 300; letter-spacing: 0; } .layout-2026.page-product .hero-visual--generic .hv-stat-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft-dark); } .layout-2026.page-product .hero-visual--generic .hv-placeholder-note { font-family: var(--mono); font-size: 10px; color: var(--ink-soft-dark); text-align: center; padding-top: 12px; border-top: 1px solid var(--slate-border); letter-spacing: 0.08em; opacity: 0.6; } .layout-2026.page-product .hero-visual--photo { padding: 0; position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 18px; } .layout-2026.page-product .hero-visual--photo img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .layout-2026.page-product .hero-visual--photo.hero-cycle .hero-cycle-img { opacity: 0; transition: opacity 1.2s ease; } .layout-2026.page-product .hero-visual--photo.hero-cycle .hero-cycle-img.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .layout-2026.page-product .hero-visual--photo.hero-cycle .hero-cycle-img { transition: none; } } .layout-2026.page-product .sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; } .layout-2026.page-product .sub-cell { background: #fff; padding: 38px 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; transition: background 0.3s, opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layout-2026.page-product .sub-cell-text { display: flex; flex-direction: column; gap: 12px; } .layout-2026.page-product .sub-icon { width: 150px; height: auto; flex-shrink: 0; opacity: 0.88; pointer-events: none; user-select: none; } .layout-2026.page-product .product-sec--mid .sub-cell { background: var(--cool-mid); } .layout-2026.page-product .sub-cell:hover { background: var(--accent-bg); } .layout-2026.page-product .sub-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); } .layout-2026.page-product .sub-title { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink-deep); line-height: 1.08; } .layout-2026.page-product .sub-title em { font-style: italic; font-weight: 300; color: var(--accent); } .layout-2026.page-product .sub-desc { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 42ch; } .layout-2026.page-product .sub-tag { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; } .layout-2026.page-product .sub-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-vivid); } .layout-2026.page-product .caso-banner { margin-top: 28px; background: var(--accent-bg); border: 1px solid var(--accent-mid); border-radius: 14px; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .layout-2026.page-product .caso-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; } .layout-2026.page-product .caso-text { font-size: 1.08rem; line-height: 1.55; color: var(--ink-deep); max-width: 62ch; font-weight: 500; } .layout-2026.page-product .caso-text strong { font-weight: 700; } .layout-2026.page-product .shift-list { display: flex; flex-direction: column; gap: 30px; } .layout-2026.page-product .shift-item { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 48px; background: rgba(255, 255, 255, 0.35); border: 1px solid var(--border-light); border-radius: 16px; align-items: center; position: relative; overflow: hidden; transition: background 0.3s, box-shadow 0.3s, opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layout-2026.page-product .shift-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--accent-mid); border-radius: 0 2px 2px 0; transform: translateY(-50%); transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .layout-2026.page-product .shift-item:hover { background: #fff; box-shadow: 0 18px 50px -18px rgba(14, 20, 32, 0.22); } .layout-2026.page-product .shift-item:hover::before { height: 100%; } .layout-2026.page-product .shift-lead { position: relative; } .layout-2026.page-product .shift-num { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); display: block; margin-bottom: 16px; } .layout-2026.page-product .shift-solution { font-size: clamp(1.4rem, 2.2vw, 1.95rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.03em; color: var(--ink-deep); margin-bottom: 14px; } .layout-2026.page-product .shift-solution strong { font-weight: 900; } .layout-2026.page-product .shift-solution em { font-style: italic; font-weight: 300; color: var(--accent); } .layout-2026.page-product .shift-detail { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 50ch; margin-bottom: 20px; } .layout-2026.page-product .shift-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--accent); transition: gap 0.2s; } .layout-2026.page-product .shift-link:hover { gap: 12px; } .layout-2026.page-product .shift-num-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; } .layout-2026.page-product .shift-num-row .shift-num { margin-bottom: 0; } .layout-2026.page-product .shift-badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); background: transparent; border: 1px solid var(--border-light); padding: 3px 9px; border-radius: 20px; line-height: 1; white-space: normal; font-weight: 400; margin-bottom: 4px; } .layout-2026.page-product .shift-client { display: flex; align-items: center; gap: 14px; } .layout-2026.page-product .shift-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink-on-dark); color: var(--ink-soft-dark); border: 1.5px solid var(--ink-soft-dark); display: grid; place-items: center; font-family: var(--font); font-size: 18px; font-weight: 900; flex-shrink: 0; letter-spacing: -0.01em; } .layout-2026.page-product .shift-client-info { display: flex; flex-direction: column; gap: 4px; } .layout-2026.page-product .shift-client-name { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; color: var(--ink-soft); line-height: 1.4; } .layout-2026.page-product .shift-cost-metric { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.04em; color: var(--accent); line-height: 1; flex-shrink: 0; } .layout-2026.page-product .shift-cost-metric small { font-size: 0.7rem; letter-spacing: 0; font-weight: 700; opacity: 0.85; margin-left: 5px; } .layout-2026.page-product .shift-aside { display: flex; flex-direction: column; gap: 14px; } .layout-2026.page-product .shift-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .layout-2026.page-product .shift-tag svg { width: 14px; height: 14px; flex-shrink: 0; } .layout-2026.page-product .shift-problem { background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 24px 26px; } .layout-2026.page-product .shift-tag--voice { color: var(--ink-mute); margin-bottom: 0; } .layout-2026.page-product .shift-problem figcaption { margin-bottom: 16px; } .layout-2026.page-product .shift-problem blockquote { font-size: 1.08rem; line-height: 1.5; color: var(--ink-deep); font-weight: 500; font-style: italic; } .layout-2026.page-product .shift-cost { display: flex; gap: 16px; align-items: center; background: var(--accent-bg); border: 1px solid var(--accent-mid); border-radius: 14px; padding: 18px 22px; } .layout-2026.page-product .shift-cost-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 1px; } .layout-2026.page-product .shift-cost-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px; } .layout-2026.page-product .shift-cost p { font-size: 0.98rem; line-height: 1.45; color: var(--ink-deep); font-weight: 500; } .layout-2026.page-product .cta-band { padding: 84px var(--px); background: var(--slate); text-align: center; } .layout-2026.page-product .cta-band-inner { max-width: 720px; margin: 0 auto; } .layout-2026.page-product .cta-band-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); display: block; margin-bottom: 22px; } .layout-2026.page-product .cta-band-title { font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--ink-on-dark); margin-bottom: 16px; } .layout-2026.page-product .cta-band-title em { font-style: italic; font-weight: 300; color: var(--accent-soft); } .layout-2026.page-product .cta-band-text { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft-dark); max-width: 56ch; margin: 0 auto 32px; } .layout-2026.page-product .cta-band .btn-primary { background: var(--accent-vivid); color: var(--slate); } .layout-2026.page-product .cta-band .btn-primary:hover { filter: brightness(1.1); } .layout-2026.page-product .cta-band--img { min-height: 70vh; display: flex; align-items: center; background-size: cover; background-position: center center; background-attachment: fixed; } @supports (-webkit-touch-callout: none) { .layout-2026.page-product .cta-band--img { background-attachment: scroll; } } .layout-2026.page-product .flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .layout-2026.page-product .flow-step { padding: 0 22px; position: relative; } .layout-2026.page-product .flow-step:first-child { padding-left: 0; } .layout-2026.page-product .flow-step:not(:first-child)::before { content: ""; position: absolute; top: 13px; left: 0; width: 1px; height: calc(100% - 13px); background: var(--border-light); } .layout-2026.page-product .flow-step-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .layout-2026.page-product .flow-step-num::after { content: ""; flex: 1; height: 1px; background: var(--border-light); } .layout-2026.page-product .flow-step-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-deep); line-height: 1.15; margin-bottom: 12px; } .layout-2026.page-product .flow-step-desc { font-size: 0.96rem; line-height: 1.55; color: var(--ink-soft); } .layout-2026.page-product .aree-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; } .layout-2026.page-product .aree-cell { background: var(--cool-light); padding: 34px 30px; transition: background 0.3s, opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layout-2026.page-product .product-sec--mid .aree-cell { background: #fff; } .layout-2026.page-product .aree-cell:hover { background: var(--accent-bg); } .layout-2026.page-product .aree-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); display: block; margin-bottom: 16px; } .layout-2026.page-product .aree-title { font-size: clamp(1.45rem, 2vw, 1.65rem); font-weight: 900; letter-spacing: -0.035em; color: var(--ink-deep); line-height: 1.05; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); } .layout-2026.page-product .aree-title em { font-style: italic; font-weight: 300; color: var(--accent); } .layout-2026.page-product .aree-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } .layout-2026.page-product .aree-list li { font-size: 0.96rem; line-height: 1.4; color: var(--ink-soft); padding-left: 18px; position: relative; } .layout-2026.page-product .aree-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-vivid); opacity: 0.65; } .layout-2026.page-product { /* ════════════════════════════════════════════════════════════════ FAQ — accordion accessibile (grid-rows, niente animazione layout) ════════════════════════════════════════════════════════════════ */ } .layout-2026.page-product .faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } .layout-2026.page-product .faq-list { border-top: 1px solid var(--border-light); } .layout-2026.page-product .faq-item { border-bottom: 1px solid var(--border-light); } .layout-2026.page-product .faq-q { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; text-align: left; font-family: var(--font); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-deep); cursor: pointer; transition: color 0.2s; } .layout-2026.page-product .faq-q:hover { color: var(--accent); } .layout-2026.page-product .faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .layout-2026.page-product .faq-icon::before, .layout-2026.page-product .faq-icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; } .layout-2026.page-product .faq-icon::before { top: 7px; left: 0; width: 16px; height: 2px; } .layout-2026.page-product .faq-icon::after { top: 0; left: 7px; width: 2px; height: 16px; } .layout-2026.page-product .faq-item.is-open .faq-icon::after { transform: scaleY(0); opacity: 0; } .layout-2026.page-product .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .layout-2026.page-product .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .layout-2026.page-product .faq-a-inner { overflow: hidden; } .layout-2026.page-product .faq-a p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-width: 64ch; padding-bottom: 26px; } .layout-2026.page-product .cta-signature { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .layout-2026.page-product .cta-signature img { height: 30px; width: auto; } .layout-2026.page-product .cta-signature span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft-dark); } .layout-2026.page-product .cta-copy .section-title em { color: var(--accent-soft); } .layout-2026.page-product .cta-note a { color: var(--accent-soft); } .layout-2026.page-product .form-submit { background: linear-gradient(90deg, var(--accent-vivid) 50%, var(--ink-deep) 50%); background-size: 200% 100%; background-position: 100% 0; } .layout-2026.page-product .form-submit:hover { background-position: 0% 0; } @media (max-width: 960px) { .layout-2026.page-product .product-sec { padding: 72px var(--px-m); } .layout-2026.page-product .cta-band { padding: 64px var(--px-m); } .layout-2026.page-product .product-head { margin-bottom: 40px; } .layout-2026.page-product .sub-grid { grid-template-columns: 1fr; } .layout-2026.page-product .caso-banner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 28px; } .layout-2026.page-product .shift-item { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; } .layout-2026.page-product .flow-steps { grid-template-columns: 1fr 1fr; gap: 32px 0; } .layout-2026.page-product .flow-step { padding: 0 18px; } .layout-2026.page-product .flow-step:nth-child(odd) { padding-left: 0; } .layout-2026.page-product .flow-step:nth-child(odd)::before { display: none; } .layout-2026.page-product .aree-grid { grid-template-columns: 1fr; } .layout-2026.page-product .faq-layout { grid-template-columns: 1fr; gap: 32px; } .layout-2026.page-product .product-lockup-mark { gap: 12px; } } @media (max-width: 580px) { .layout-2026.page-product .flow-steps { grid-template-columns: 1fr; } .layout-2026.page-product .flow-step { padding: 0; } .layout-2026.page-product .flow-step::before { display: none !important; } .layout-2026.page-product .sub-cell { padding: 30px 24px; grid-template-columns: 1fr; } .layout-2026.page-product .sub-icon { display: none; } .layout-2026.page-product .product-logo { height: 30px; } } @media (prefers-reduced-motion: reduce) { .layout-2026.page-product .faq-a { transition: none; } } .layout-2026.page-alicon { --accent: var(--sector-animali-text); /* blu scuro · testo su light */ --accent-mid: var(--sector-animali-border); /* blu medio · bordi/linee */ --accent-soft: var(--sector-animali-dark); /* blu chiaro · su dark */ --accent-bg: var(--sector-animali-bg); /* tint blu chiarissimo */ --accent-vivid: var(--sector-animali-border); /* blu vivo · bottoni/accenti */ } .layout-2026.page-alicon .hero__photo { background-image: url("/img/public/2026/bg-hero-alicon.jpg"); } .layout-2026.page-mixer { --accent: var(--sector-edilizia-text); /* ambra scuro · testo su light */ --accent-mid: var(--sector-edilizia-border); /* ambra medio · bordi/linee */ --accent-soft: var(--sector-edilizia-dark); /* ambra chiaro · su dark */ --accent-bg: var(--sector-edilizia-bg); /* tint ambra chiarissimo */ --accent-vivid: var(--sector-edilizia-border); /* ambra vivo · bottoni/accenti */ } .layout-2026.page-mixer .hero__photo { background-image: url("/img/public/2026/bg-hero-mixer.jpg"); } .layout-2026.page-trasset { --accent: var(--sector-trasset-text); /* viola scuro · testo su light */ --accent-mid: var(--sector-trasset-border); /* viola medio · bordi/linee */ --accent-soft: var(--sector-trasset-dark); /* viola chiaro · su dark */ --accent-bg: var(--sector-trasset-bg); /* tint viola chiarissimo */ --accent-vivid: var(--sector-trasset-border); /* viola vivo · bottoni/accenti */ } .layout-2026.page-trasset .hero__photo { background-image: url("/img/public/2026/bg-hero-trasset.jpg"); } .layout-2026.page-trasset .shift-intro-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; margin-bottom: 56px; } @media (max-width: 860px) { .layout-2026.page-trasset .shift-intro-row { grid-template-columns: 1fr; gap: 28px; } } /* Pagine SEO "installatori-*" — riusano la base prodotto, aggiungono solo la palette */ .layout-2026.page-installatori.page-installatori--cleve { --accent: var(--sector-ambientali-text); /* verde scuro · testo su light */ --accent-mid: var(--sector-ambientali-border); /* verde medio · bordi/linee */ --accent-soft: var(--sector-ambientali-dark); /* verde chiaro · su dark */ --accent-bg: var(--sector-ambientali-bg); /* tint verde chiarissimo */ --accent-vivid: oklch(70% 0.21 135); /* verde vivo ≈ logo */ } .layout-2026.page-installatori.page-installatori--alicon { --accent: var(--sector-animali-text); /* blu scuro · testo su light */ --accent-mid: var(--sector-animali-border); /* blu medio · bordi/linee */ --accent-soft: var(--sector-animali-dark); /* blu chiaro · su dark */ --accent-bg: var(--sector-animali-bg); /* tint blu chiarissimo */ --accent-vivid: var(--sector-animali-border); /* blu vivo · bottoni/accenti */ } .layout-2026.page-installatori.page-installatori--mixer { --accent: var(--sector-edilizia-text); /* ambra scuro · testo su light */ --accent-mid: var(--sector-edilizia-border); /* ambra medio · bordi/linee */ --accent-soft: var(--sector-edilizia-dark); /* ambra chiaro · su dark */ --accent-bg: var(--sector-edilizia-bg); /* tint ambra chiarissimo */ --accent-vivid: var(--sector-edilizia-border); /* ambra vivo · bottoni/accenti */ } .layout-2026.page-contatti .contact-section { background: var(--cool-mid); padding: 80px var(--px) 120px; } .layout-2026.page-contatti .contact-inner { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: start; } .layout-2026.page-contatti .contact-inner .section-title { margin-bottom: 28px; } .layout-2026.page-contatti .note-form { font-size: 13px; color: var(--ink-mute); margin-bottom: 20px; } .layout-2026.page-contatti .contact-quick { position: sticky; top: 120px; background: #fff; border: 1px solid var(--border-light); border-radius: 14px; padding: 56px; } .layout-2026.page-contatti .contact-quick-list { list-style: none; display: flex; flex-direction: column; gap: 32px; } .layout-2026.page-contatti .contact-quick-item { display: flex; align-items: flex-start; gap: 18px; } .layout-2026.page-contatti .contact-quick-icon { flex-shrink: 0; width: 26px; height: 26px; color: var(--ink-deep); } .layout-2026.page-contatti .contact-quick-icon svg { width: 100%; height: 100%; } .layout-2026.page-contatti .contact-quick-text { font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft-dark); } @media (max-width: 960px) { .layout-2026.page-contatti .contact-section { padding: 56px var(--px-m) 72px; } .layout-2026.page-contatti .contact-inner { grid-template-columns: 1fr; gap: 32px; } .layout-2026.page-contatti .contact-quick { position: static; padding: 40px; } } .layout-2026.page-chi-siamo .chi-eyebrow b { color: var(--ink-soft); font-weight: 700; } .layout-2026.page-chi-siamo .chi-sec--cards { background: var(--cool-light); padding: 100px var(--px); } .layout-2026.page-chi-siamo .chi-lead { max-width: 62ch; font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); margin-top: 40px; } .layout-2026.page-chi-siamo .chi-lead strong { color: var(--ink-deep); font-weight: 700; } .layout-2026.page-chi-siamo .chi-cards { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .layout-2026.page-chi-siamo .chi-card { background: #fff; border: 1px solid var(--border-light); border-radius: 16px; padding: 40px; } .layout-2026.page-chi-siamo .chi-card h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-deep); margin-bottom: 14px; line-height: 1.2; } .layout-2026.page-chi-siamo .chi-card p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); } .layout-2026.page-chi-siamo .chi-closing { margin-top: 40px; } .layout-2026.page-chi-siamo .chi-closing p { max-width: 78ch; font-size: 1.15rem; line-height: 1.6; color: var(--ink-deep); font-weight: 500; } .layout-2026.page-chi-siamo .chi-sec--split { background: var(--slate); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 620px; } .layout-2026.page-chi-siamo .chi-split-text { padding: 100px var(--px); display: flex; flex-direction: column; justify-content: center; max-width: 760px; } .layout-2026.page-chi-siamo .chi-sec--split .eyebrow { color: var(--ink-soft-dark); } .layout-2026.page-chi-siamo .chi-sec--split .chi-eyebrow b { color: var(--ink-on-dark); } .layout-2026.page-chi-siamo .chi-split-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft-dark); margin-top: 40px; } .layout-2026.page-chi-siamo .chi-split-body strong { color: var(--ink-on-dark); font-weight: 600; } .layout-2026.page-chi-siamo .chi-split-body p + p { margin-top: 18px; } .layout-2026.page-chi-siamo .chi-split-photo { position: relative; background: url("/img/public/2026/sfondo-cleve.jpg") center left no-repeat; background-size: cover; } .layout-2026.page-chi-siamo .chi-split-photo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--slate) 0%, rgba(17, 24, 39, 0.45) 24%, transparent 58%); } .layout-2026.page-chi-siamo .chi-sec--twocol { background: var(--cool-mid); padding: 100px var(--px); } .layout-2026.page-chi-siamo .chi-cols { margin-top: 40px; columns: 2; column-gap: 64px; } .layout-2026.page-chi-siamo .chi-cols p { margin-bottom: 20px; font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); } .layout-2026.page-chi-siamo .chi-cols p strong { color: var(--ink-deep); font-weight: 700; } .layout-2026.page-chi-siamo .chi-sec--roles { background: var(--cool-light); padding: 100px var(--px); } .layout-2026.page-chi-siamo .chi-roles { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .layout-2026.page-chi-siamo .chi-roles-closing { margin-top: 32px; } .layout-2026.page-chi-siamo .chi-roles-closing p { max-width: 88ch; font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); } .layout-2026.page-chi-siamo .chi-sec--manifesto { background: var(--cool-mid); padding: 110px var(--px); } .layout-2026.page-chi-siamo .chi-manifesto-quote { max-width: 20ch; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 900; color: var(--ink-deep); margin-bottom: 36px; } .layout-2026.page-chi-siamo .chi-manifesto-quote em { font-style: italic; font-weight: 300; color: var(--ink-soft); } .layout-2026.page-chi-siamo .chi-manifesto-body { columns: 2; column-gap: 64px; } .layout-2026.page-chi-siamo .chi-manifesto-body p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); } @media (max-width: 960px) { .layout-2026.page-chi-siamo .chi-sec--cards, .layout-2026.page-chi-siamo .chi-sec--twocol, .layout-2026.page-chi-siamo .chi-sec--roles, .layout-2026.page-chi-siamo .chi-sec--manifesto { padding: 72px var(--px-m); } .layout-2026.page-chi-siamo .chi-cards, .layout-2026.page-chi-siamo .chi-roles { grid-template-columns: 1fr; } .layout-2026.page-chi-siamo .chi-sec--split { grid-template-columns: 1fr; min-height: 0; } .layout-2026.page-chi-siamo .chi-split-text { padding: 72px var(--px-m); max-width: 100%; margin-left: 0; } .layout-2026.page-chi-siamo .chi-split-photo { min-height: 320px; } .layout-2026.page-chi-siamo .chi-split-photo::before { background: linear-gradient(to top, var(--slate) 0%, transparent 45%); } .layout-2026.page-chi-siamo .chi-cols, .layout-2026.page-chi-siamo .chi-manifesto-body { columns: 1; } } .layout-2026.page-default .default-section { background: var(--cool-mid); padding: 64px var(--px) 120px; } .layout-2026.page-default .default-inner { width: 100%; } .layout-2026.page-default .page-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); } .layout-2026.page-default .page-body > *:first-child { margin-top: 0; } .layout-2026.page-default .page-body h2 { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-deep); margin: 48px 0 18px; } .layout-2026.page-default .page-body h3 { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink-deep); margin: 36px 0 14px; } .layout-2026.page-default .page-body p { margin-bottom: 20px; } .layout-2026.page-default .page-body ul, .layout-2026.page-default .page-body ol { margin: 0 0 20px 1.2em; } .layout-2026.page-default .page-body li { margin-bottom: 8px; } .layout-2026.page-default .page-body a { color: var(--ink-deep); text-decoration: underline; text-underline-offset: 2px; } .layout-2026.page-default .page-body strong { color: var(--ink-deep); font-weight: 600; } .layout-2026.page-default .page-body img { max-width: 100%; border-radius: 12px; margin: 32px 0; } .layout-2026.page-default .page-body blockquote { border-left: 3px solid var(--ink-mute); padding-left: 20px; color: var(--ink-soft); font-style: italic; margin: 28px 0; } @media (max-width: 960px) { .layout-2026.page-default .default-section { padding: 40px var(--px-m) 72px; } } /*# sourceMappingURL=public-2026.css.map*/