/* ============================================================ TICINO MOTORI — Design System Due temi: scuro (predefinito) e chiaro, impostati con data-theme su . --fg / --bg / --panel / --red-rgb sono TERNE RGB: servono perché Tailwind le usi con i modificatori di opacità (es. text-white/60, border-white/10). ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* terne RGB — usate anche da Tailwind */ --fg: 245 245 247; --bg: 5 5 5; --panel: 8 8 10; --panel-2: 13 13 15; --red-rgb: 244 14 21; --green-rgb: 37 211 102; /* colori calcolati */ --red: rgb(var(--red-rgb)); --red-lift: #FF2028; --red-dark: #B90A10; --ink: rgb(var(--bg)); --ink-2: rgb(var(--panel)); --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --glass: rgba(8, 8, 10, 0.72); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --txt: rgb(var(--fg)); --txt-2: rgba(245, 245, 247, 0.66); --txt-3: rgba(245, 245, 247, 0.44); /* metallo dei titoli */ --metal-a: #FFFFFF; --metal-b: #D8D8DC; --metal-c: #8E8E96; --metal-d: #55555C; /* ombre e aloni */ --shadow-1: 0 24px 60px -32px rgba(0, 0, 0, 0.9); --shadow-2: 0 42px 90px -44px rgba(0, 0, 0, 0.95); --glow: rgba(244, 14, 21, 0.28); --sheen: rgba(255, 255, 255, 0.22); --spot: rgba(255, 255, 255, 0.075); --studio-a: #111114; --studio-b: #070708; --studio-glow: rgba(244, 14, 21, 0.18); --vignette: rgba(5, 5, 5, 0.6); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F5F5F7' stroke-opacity='.5' stroke-width='1.6'/%3E%3C/svg%3E"); /* mappa Google */ --map-filter: grayscale(1) invert(0.92) contrast(0.9); } [data-theme="light"] { color-scheme: light; --fg: 16 16 20; --bg: 246 246 247; --panel: 255 255 255; --panel-2: 235 235 238; --red-rgb: 203 8 15; --green-rgb: 20 170 80; --red: rgb(var(--red-rgb)); --red-lift: #E81018; --red-dark: #8E060B; --ink: rgb(var(--bg)); --ink-2: rgb(var(--panel)); --surface: rgba(16, 16, 20, 0.035); --surface-2: rgba(16, 16, 20, 0.06); --glass: rgba(255, 255, 255, 0.76); --line: rgba(16, 16, 20, 0.10); --line-2: rgba(16, 16, 20, 0.18); --txt: rgb(var(--fg)); --txt-2: rgba(16, 16, 20, 0.68); --txt-3: rgba(16, 16, 20, 0.52); --metal-a: #17171C; --metal-b: #3A3A44; --metal-c: #6A6A76; --metal-d: #9C9CA6; --shadow-1: 0 20px 44px -28px rgba(16, 16, 20, 0.3); --shadow-2: 0 36px 74px -38px rgba(16, 16, 20, 0.32); --glow: rgba(203, 8, 15, 0.09); --sheen: rgba(255, 255, 255, 0.85); --spot: rgba(16, 16, 20, 0.05); --studio-a: #DEDEE4; --studio-b: #C9C9D1; --studio-glow: rgba(203, 8, 15, 0.09); --vignette: rgba(16, 16, 20, 0.3); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101014' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E"); --map-filter: grayscale(0.3) contrast(1.02); } :root { --r-sm: 4px; --r: 8px; --r-lg: 14px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 1320px; --nav-h: 86px; } /* Cambio tema: la transizione si attiva solo durante lo switch (classe su ) */ html.tema-in-cambio, html.tema-in-cambio *, html.tema-in-cambio *::before, html.tema-in-cambio *::after { transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease), fill 0.45s var(--ease), box-shadow 0.45s var(--ease) !important; transition-delay: 0s !important; } /* ===== BASE ===== */ html body { background-color: rgb(var(--bg)); color: var(--txt); font-family: Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--red); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgb(var(--panel)); } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid rgb(var(--panel)); } ::-webkit-scrollbar-thumb:hover { background: var(--txt-3); } a { text-decoration: none; } img, svg { display: block; max-width: 100%; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } @media (min-width: 768px) { .wrap { padding-inline: 32px; } } @media (min-width: 1200px) { .wrap { padding-inline: 48px; } } /* ===== TIPOGRAFIA ===== */ .font-display { font-family: Archivo, Inter, sans-serif; } .font-wordmark { font-family: Michroma, Archivo, sans-serif; } .overline { font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--txt-3); } .display { font-family: Archivo, Inter, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95; } .h1 { font-size: clamp(2.4rem, 5.2vw, 4.75rem); } .h2 { font-size: clamp(1.9rem, 3.6vw, 3.25rem); } .h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); } .lead { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.7; color: var(--txt-2); } .muted { color: var(--txt-2); } .dim { color: var(--txt-3); } .metal { background: linear-gradient(178deg, var(--metal-a) 4%, var(--metal-b) 38%, var(--metal-c) 72%, var(--metal-d) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .rule-red { width: 46px; height: 2px; background: var(--red); } /* ===== SFONDI / TEXTURE ===== */ .bg-ink { background: var(--ink); } .bg-ink-2 { background: var(--ink-2); } .glow-red { position: absolute; inset: auto; width: min(720px, 92vw); height: min(720px, 92vw); border-radius: 999px; background: radial-gradient(circle, var(--glow) 0%, rgba(244, 14, 21, 0) 68%); pointer-events: none; } .grid-lines { background-image: linear-gradient(rgb(var(--fg) / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fg) / 0.035) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%); } .noise::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===== HEADER ===== */ #site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; } #site-head .tm-topbar { height: 36px; overflow: hidden; transition: height 0.4s var(--ease), opacity 0.3s var(--ease), border-color 0.4s var(--ease); } #site-head.is-scrolled .tm-topbar { height: 0; opacity: 0; border-bottom-color: transparent; } .tm-nav { position: relative; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); border-bottom: 1px solid transparent; } .tm-nav.is-scrolled, .tm-nav.is-solid, #site-head.is-scrolled .tm-nav { background: rgb(var(--bg) / 0.82); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); border-bottom-color: var(--line); } .nav-link { position: relative; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; padding-block: 6px; transition: color 0.25s var(--ease); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--red); transition: width 0.32s var(--ease); } .nav-link:hover::after, .nav-link.is-active::after { width: 100%; } .tm-topbar { font-size: 12px; border-bottom: 1px solid var(--line); background: rgb(var(--panel)); color: var(--txt-2); } /* ===== BOTTONI ===== */ .btn { --btn-bg: transparent; --btn-fg: var(--txt); --btn-bd: var(--line-2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; font-family: Archivo, Inter, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--r-sm); cursor: pointer; overflow: hidden; white-space: nowrap; transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { transition: transform 0.3s var(--ease); flex: none; } .btn:hover svg { transform: translateX(3px); } .btn--primary { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); } .btn--primary:hover { --btn-bg: var(--red-lift); --btn-bd: var(--red-lift); box-shadow: 0 14px 34px -12px rgb(var(--red-rgb) / 0.75); } .btn--outline:hover { --btn-bg: rgb(var(--fg)); --btn-fg: rgb(var(--bg)); --btn-bd: rgb(var(--fg)); } .btn--ghost { border-color: transparent; padding-inline: 8px; letter-spacing: 0.1em; } .btn--ghost:hover { color: var(--red); transform: none; } .btn--sm { padding: 11px 20px; font-size: 11.5px; letter-spacing: 0.11em; } .btn--block { width: 100%; } .btn--light { --btn-bg: rgb(var(--fg)); --btn-fg: rgb(var(--bg)); --btn-bd: rgb(var(--fg)); } .btn--light:hover { --btn-bg: transparent; --btn-fg: rgb(var(--fg)); --btn-bd: var(--line-2); } .icon-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass); backdrop-filter: blur(10px); transition: all 0.28s var(--ease); } .icon-btn:hover { background: rgb(var(--fg)); color: rgb(var(--bg)); border-color: rgb(var(--fg)); transform: translateY(-2px); } /* ===== SUPERFICI ===== */ .surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .surface-2 { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); } .hover-line { position: relative; } .hover-line::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--red); transition: width 0.45s var(--ease); z-index: 2; } .hover-line:hover::before { width: 100%; } /* ===== CARD VEICOLO ===== */ .vcard { position: relative; display: flex; flex-direction: column; background: rgb(var(--panel)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); } .vcard:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--shadow-1); } .vcard::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--red); transition: width 0.5s var(--ease); z-index: 3; } .vcard:hover::before { width: 100%; } .vcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(var(--panel-2)); } .vcard__media img { transition: transform 0.75s var(--ease); } .vcard:hover .vcard__media img { transform: scale(1.045); } .vcard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .vcard__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .vcard__price { font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; white-space: nowrap; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); color: var(--txt); white-space: nowrap; } .badge--red { background: var(--red); border-color: var(--red); color: #fff; } .badge--dark { background: rgba(0, 0, 0, 0.72); } /* ===== RIGHE SPECIFICHE ===== */ .spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .spec-row:last-child { border-bottom: 0; } .spec-row dt { color: var(--txt-3); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .spec-row dd { color: var(--txt); font-weight: 500; text-align: right; } /* ===== FORM ===== */ .field { width: 100%; padding: 14px 16px; font-size: 14.5px; color: var(--txt); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); outline: none; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); appearance: none; -webkit-appearance: none; } .field::placeholder { color: var(--txt-3); } .field:hover { border-color: var(--line-2); } .field:focus { border-color: var(--red); background: rgb(var(--fg) / 0.05); box-shadow: 0 0 0 3px rgb(var(--red-rgb) / 0.16); } .field:focus-visible { outline: none; } .field[aria-invalid="true"] { border-color: var(--red); background: rgb(var(--red-rgb) / 0.07); } select.field { background-image: var(--arrow); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; } select.field option { background: #0E0E10; color: var(--txt); } textarea.field { min-height: 130px; resize: vertical; line-height: 1.6; } .label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-3); } input[type="range"].field, input[type="range"] { accent-color: var(--red); padding: 0; background: none; border: 0; height: 22px; cursor: pointer; } .check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 13.5px; color: var(--txt-2); line-height: 1.5; } .check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface); cursor: pointer; transition: all .2s var(--ease); position: relative; } .check input:checked { background: var(--red); border-color: var(--red); } .check input:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ===== ACCORDION FAQ ===== */ .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; text-align: left; font-family: Archivo, Inter, sans-serif; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; color: var(--txt); cursor: pointer; transition: color 0.25s var(--ease); } .faq-q:hover { color: var(--red); } .faq-q .sign { flex: none; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 999px; display: grid; place-items: center; font-size: 15px; transition: all .3s var(--ease); } .faq-item.is-open .faq-q .sign { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); } .faq-a > div { padding-bottom: 28px; padding-right: 60px; color: var(--txt-2); line-height: 1.75; } /* ===== MARQUEE ===== */ .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; width: max-content; animation: tm-marquee 42s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes tm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brand-item { font-family: Archivo, Inter, sans-serif; font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-3); transition: color 0.3s var(--ease); } .brand-item:hover { color: var(--txt); } /* ===== REVEAL ===== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee__track { animation: none; } } /* ===== HERO ===== */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(22px, 2.6vw, 44px); padding-block: 104px 26px; overflow: hidden; } @media (min-width: 1024px) { .hero { padding-block: 124px 24px; } } /* Titolo del hero: più contenuto, per stare su due righe accanto al carosello */ .hero .h1 { font-size: clamp(1.9rem, 3vw, 3rem); } /* ===== CAROSELLO FOTO (hero) ===== */ .hero-gal { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 52svh; } @media (max-width: 1023px) { .hero-gal { aspect-ratio: 4 / 3; max-height: 44svh; } } /* alone rosso che respira dietro la cornice */ .hero-gal__glow { position: absolute; inset: 12% 5% -7% 5%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), rgba(244, 14, 21, 0) 76%); filter: blur(30px); z-index: 0; animation: gal-breathe 7s ease-in-out infinite; } @keyframes gal-breathe { 0%, 100% { opacity: 0.5; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.04); } } .hero-gal__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgb(var(--panel-2)); box-shadow: var(--shadow-2), inset 0 1px 0 rgb(var(--fg) / 0.06); } /* vignettatura */ .hero-gal__frame::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 76% 70% at 50% 50%, transparent 42%, var(--vignette) 100%); } /* --- slide --- */ .hero-gal__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.07); transition: opacity 1.2s var(--ease), transform 1.8s var(--ease); will-change: opacity, transform; } .hero-gal__slide.is-active { opacity: 1; transform: scale(1); } .hero-gal__slide img { width: 100%; height: 100%; object-fit: cover; } /* --- segnaposto dentro la cornice --- */ .hero-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse 60% 46% at 50% 94%, var(--studio-glow), transparent 72%), radial-gradient(ellipse 72% 58% at 50% 14%, rgb(var(--fg) / 0.055), transparent 70%), linear-gradient(180deg, var(--studio-a) 0%, var(--studio-b) 100%); } .hero-ph::before { content: ''; position: absolute; inset: 24px; border: 1px dashed rgb(var(--fg) / 0.13); border-radius: 6px; } .hero-ph::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--fg) / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fg) / 0.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 68% 58% at 50% 50%, #000 22%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 50%, #000 22%, transparent 80%); } .hero-ph__num { position: relative; z-index: 2; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgb(var(--fg) / 0.22); } .hero-ph__label { position: relative; z-index: 2; margin-top: 14px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--txt-3); } /* passata di luce quando la slide entra */ .hero-ph__sweep { position: absolute; top: -25%; bottom: -25%; left: 0; width: 32%; z-index: 2; pointer-events: none; opacity: 0; transform: translateX(-180%) skewX(-16deg); background: linear-gradient(90deg, transparent 0%, var(--sheen) 50%, transparent 100%); } .hero-gal__slide.is-active .hero-ph__sweep { animation: gal-sweep 2.4s var(--ease) 0.35s 1; } @keyframes gal-sweep { 0% { opacity: 0; transform: translateX(-180%) skewX(-16deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) skewX(-16deg); } } /* luce che vaga lentamente sulla foto */ .hero-gal__spot { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--spot); animation: gal-spot 11s ease-in-out infinite; } @keyframes gal-spot { 0%, 100% { transform: translateX(-13%); } 50% { transform: translateX(13%); } } /* --- interfaccia --- */ .hero-gal__meta { position: absolute; top: 18px; left: 20px; z-index: 4; display: flex; align-items: center; gap: 10px; } .hero-gal__count { font-family: Archivo, Inter, sans-serif; font-size: 12px; letter-spacing: 0.12em; color: var(--txt); font-variant-numeric: tabular-nums; } .hero-gal__nav { position: absolute; top: 16px; right: 16px; z-index: 4; display: flex; gap: 8px; } .hero-gal__bars { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 4; display: flex; gap: 6px; } .hero-gal__bar { flex: 1; height: 2px; background: rgb(var(--fg) / 0.18); overflow: hidden; cursor: pointer; } .hero-gal__bar > i { display: block; height: 100%; width: 0; background: var(--red); } .hero-gal__bar.is-done > i { width: 100%; } .hero-gal__bar.is-active > i { animation: gal-fill var(--dur, 4200ms) linear forwards; } @keyframes gal-fill { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .hero-gal__glow, .hero-gal__spot, .hero-gal__slide.is-active .hero-ph__sweep, .hero-gal__bar.is-active > i { animation: none; } .hero-gal__bar.is-done > i { width: 100%; } } /* ===== SEGNAPOSTO IMMAGINI ===== */ .media-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgb(var(--panel-2)); background-image: linear-gradient(rgb(var(--fg) / 0.028) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fg) / 0.028) 1px, transparent 1px); background-size: 44px 44px; } .media-ph::after { content: ''; position: absolute; inset: 14px; border: 1px dashed rgb(var(--fg) / 0.12); border-radius: 4px; } .media-ph > span { position: relative; z-index: 1; padding-inline: 14px; text-align: center; font-size: 10.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--txt-2); } /* ===== SEZIONI ===== */ .section { padding-block: clamp(72px, 9vw, 140px); } .section--tight { padding-block: clamp(48px, 5vw, 80px); } .border-y-line { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ===== LISTINO ===== */ .filter-panel { position: sticky; top: 104px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--line); border-radius: 999px; color: var(--txt-2); cursor: pointer; transition: all .25s var(--ease); } .chip:hover { border-color: var(--line-2); color: var(--txt); } .chip.is-active { background: rgb(var(--fg)); border-color: rgb(var(--fg)); color: rgb(var(--bg)); font-weight: 600; } .empty-state { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 64px 24px; text-align: center; } /* ===== GALLERIA SCHEDA ===== */ .gallery__main { position: relative; aspect-ratio: 16 / 10; background: rgb(var(--panel-2)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .gallery__thumb { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; transition: border-color .3s var(--ease); } .gallery__thumb:hover, .gallery__thumb.is-active { border-color: var(--line-2); } .gallery__thumb.is-active::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--red); border-radius: var(--r-sm); } /* ===== STEP / PROCESSO ===== */ .step-num { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgb(var(--fg) / 0.22); transition: -webkit-text-stroke-color .4s var(--ease); } .step:hover .step-num { -webkit-text-stroke-color: var(--red); } /* ===== STAT ===== */ .stat__value { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; } /* ===== CALCOLATORE RATA ===== */ .rate-box { background: linear-gradient(160deg, rgb(var(--red-rgb) / 0.14), var(--surface) 55%); border: 1px solid var(--line); border-radius: var(--r); } .rate-value { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.02em; } /* ===== MOBILE MENU ===== */ .mobile-menu { position: fixed; inset: 0; z-index: 60; background: rgb(var(--bg) / 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateX(100%); transition: transform 0.5s var(--ease); display: flex; flex-direction: column; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu a { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .mobile-menu.is-open a { opacity: 1; transform: none; } /* ===== FOOTER ===== */ .tm-footer { border-top: 1px solid var(--line); background: rgb(var(--panel)); } .footer-link { color: var(--txt-2); font-size: 14px; transition: color .22s var(--ease), transform .22s var(--ease); display: inline-block; } .footer-link:hover { color: var(--txt); transform: translateX(3px); } /* ===== FLOTTANTI ===== */ .float-stack { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; flex-direction: column; gap: 10px; } @media (max-width: 1023px) { .float-stack { right: 14px; bottom: 14px; } } #to-top { opacity: 0; visibility: hidden; transition: all .35s var(--ease); } #to-top.is-visible { opacity: 1; visibility: visible; } /* ===== TOAST / FORM ESITO ===== */ .notice { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; } .notice--ok { border-color: rgb(var(--green-rgb) / 0.45); background: rgb(var(--green-rgb) / 0.1); color: var(--txt); } .notice--err { border-color: rgb(var(--red-rgb) / 0.5); background: rgb(var(--red-rgb) / 0.09); color: var(--txt); } /* ===== UTILITY ===== */ .link-underline { position: relative; } .link-underline::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: currentColor; opacity: .35; transition: opacity .25s var(--ease); } .link-underline:hover::after { opacity: 1; } .divider-vertical { width: 1px; background: var(--line); } .aspect-portrait { aspect-ratio: 3 / 4; } .aspect-wide { aspect-ratio: 21 / 9; } /* ===== FILTRI LISTINO ===== */ @media (max-width: 1023px) { .filter-panel { position: static; display: none; } .filter-panel.is-open { display: block; } } .filter-panel .field { font-size: 13.5px; padding: 11px 14px; } .filter-panel select.field { padding-right: 38px; background-position: right 14px center; } /* ===== TRANSAZIONI ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================================ TEMA — LOGO DOPPIO, MAPPA, BADGE ============================================================ */ /* Il logo ha una versione per fondo scuro e una per fondo chiaro */ .logo-su-chiaro { display: none; } [data-theme="light"] .logo-su-scuro { display: none; } [data-theme="light"] .logo-su-chiaro { display: block; } iframe[data-map] { filter: var(--map-filter); transition: filter 0.5s var(--ease); } .badge-green { background: rgb(var(--green-rgb) / 0.13); color: rgb(var(--green-rgb)); } /* ============================================================ INTERRUTTORE CHIARO / SCURO ============================================================ */ .theme-switch { position: relative; width: 58px; height: 28px; flex: none; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .theme-switch:hover { border-color: var(--txt-3); } .theme-switch:active .theme-switch__knob { transform: scale(0.88); } .theme-switch__track { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 100%; padding-inline: 7px; pointer-events: none; } .theme-switch__icon { display: grid; place-items: center; width: 14px; height: 14px; color: var(--txt-3); transition: color 0.35s var(--ease); } .theme-switch__icon svg { width: 14px; height: 14px; } .theme-switch__knob { position: absolute; top: 2px; left: 2px; z-index: 1; width: 22px; height: 22px; border-radius: 999px; background: rgb(var(--fg)); box-shadow: 0 2px 8px rgb(var(--bg) / 0.45); transition: transform 0.42s var(--ease-out); } [data-theme="light"] .theme-switch__knob { transform: translateX(30px); } .theme-switch:active .theme-switch__knob { transform: scale(0.88); } [data-theme="light"] .theme-switch:active .theme-switch__knob { transform: translateX(30px) scale(0.88); } /* l'icona coperta dal pomello prende il colore opposto per restare leggibile */ [data-theme="dark"] .theme-switch__icon--sole { color: rgb(var(--bg)); } [data-theme="light"] .theme-switch__icon--luna { color: rgb(var(--bg)); } /* ============================================================ BARRA DI AVANZAMENTO LETTURA ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; } .scroll-progress > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--red-dark), var(--red) 55%, var(--red-lift)); box-shadow: 0 0 14px var(--glow); } /* ============================================================ RESTYLING PREMIUM ============================================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; } /* --- navbar --- */ .tm-nav__inner { position: relative; } .tm-nav__inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--fg) / 0.06), transparent 70%); opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none; } .tm-nav:hover .tm-nav__inner::before { opacity: 1; } /* filo rosso che accende la navbar quando si scorre */ .tm-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--red-rgb) / 0.6) 50%, transparent); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; } .tm-nav.is-scrolled::after, #site-head.is-scrolled .tm-nav::after { opacity: 1; } /* pill dietro la voce di menu */ .nav-link { border-radius: 6px; padding-inline: 10px; } .nav-link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--fg) / 0.06); opacity: 0; transform: scale(0.94); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out); z-index: -1; } .nav-link { z-index: 0; } .nav-link:hover::before { opacity: 1; transform: scale(1); } /* --- bottoni --- */ .btn { z-index: 0; } /* passata di luce al passaggio del mouse */ .btn::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; z-index: 1; background: linear-gradient(100deg, transparent, var(--sheen), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .btn:hover::before { animation: btn-sheen 0.9s var(--ease) forwards; } @keyframes btn-sheen { 0% { left: -70%; opacity: 0; } 18% { opacity: 0.85; } 100% { left: 140%; opacity: 0; } } .btn > * { position: relative; z-index: 2; } /* primario: gradiente, luce interna, alone */ .btn--primary { background-image: linear-gradient(135deg, var(--red-lift) 0%, var(--red) 46%, var(--red-dark) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 10px 26px -16px rgb(var(--red-rgb) / 0.9); } .btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 20px 42px -16px rgb(var(--red-rgb) / 0.9); } /* contorno: riempimento animato da sinistra */ .btn--outline { overflow: hidden; } .btn--outline::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(var(--fg)); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s var(--ease-out); } .btn--outline:hover::after { transform: scaleX(1); } .btn--outline:hover { --btn-bg: transparent; --btn-fg: rgb(var(--bg)); --btn-bd: rgb(var(--fg)); } /* bottone chiaro: bordo che si accende */ .btn--light { box-shadow: 0 10px 30px -18px rgb(var(--bg) / 0.6); } /* pulsante icona: bordo che pulsa */ .icon-btn { position: relative; overflow: hidden; } .icon-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgb(var(--red-rgb) / 0.35); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .icon-btn:hover::after { opacity: 1; animation: icon-ring 1.1s var(--ease) infinite; } @keyframes icon-ring { 0% { box-shadow: 0 0 0 0 rgb(var(--red-rgb) / 0.4); } 100% { box-shadow: 0 0 0 12px rgb(var(--red-rgb) / 0); } } /* --- card: riflettore che segue il puntatore --- */ .vcard, .surface, .hero-card, .rate-box, .surface-2 { --mx: 50%; --my: 50%; } .vcard::after, .surface::after, .hero-card::after, .rate-box::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx) var(--my), rgb(var(--fg) / 0.07), transparent 62%); opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; z-index: 1; } .vcard:hover::after, .surface:hover::after, .hero-card:hover::after, .rate-box:hover::after { opacity: 1; } /* le card hanno bisogno di position:relative e di un contesto di impilamento */ .surface, .hero-card, .rate-box, .surface-2 { position: relative; } .vcard__body { position: relative; z-index: 2; } .vcard__media { z-index: 2; } .hero-card > *, .rate-box > * { position: relative; z-index: 2; } /* bordo che si accende sulle card */ .surface { transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease), transform 0.45s var(--ease); } .surface:hover { border-color: var(--line-2); } /* --- sezioni: alone che respira --- */ @keyframes alone-deriva { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } 50% { transform: translate3d(-3%, 4%, 0) scale(1.08); opacity: 1; } } .glow-red { animation: alone-deriva 20s ease-in-out infinite; } /* grana su tutta la pagina, appena percettibile */ html body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- reveal: entrata con dissolvenza e micro-sfocatura --- */ .reveal { opacity: 0; transform: translateY(30px); filter: blur(7px); transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out), filter 0.95s var(--ease-out); will-change: opacity, transform, filter; } .reveal.is-in { opacity: 1; transform: none; filter: none; } /* --- FAQ --- */ .faq-q { position: relative; padding-inline: 0; transition: color 0.28s var(--ease), padding-inline 0.35s var(--ease-out); } .faq-q::before { content: ''; position: absolute; left: -18px; top: 50%; width: 2px; height: 0; background: var(--red); transform: translateY(-50%); transition: height 0.4s var(--ease-out); } .faq-item.is-open .faq-q::before { height: 60%; } .faq-item.is-open .faq-q { padding-inline-start: 14px; } /* --- numeri --- */ .stat__value { text-shadow: 0 0 42px var(--glow); } /* --- chip --- */ .chip { position: relative; overflow: hidden; } .chip::after { content: ''; position: absolute; inset: 0; background: rgb(var(--fg) / 0.05); opacity: 0; transition: opacity 0.28s var(--ease); } .chip:hover::after { opacity: 1; } /* --- galleria scheda: cornice che si accende --- */ .gallery__thumb { transition: border-color 0.3s var(--ease), transform 0.4s var(--ease-out); } .gallery__thumb:hover { transform: translateY(-2px); } /* --- step numerati: comparsa più decisa --- */ .step:hover .step-num { transform: translateX(4px); transition: transform 0.45s var(--ease-out); } /* --- link del footer --- */ .footer-link { position: relative; } /* --- accordion/servizi: numero che si accende --- */ .surface:hover .display { transition: color 0.4s var(--ease); } /* --- rispetta chi riduce le animazioni --- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .glow-red { animation: none; } .btn:hover::before { animation: none; } .icon-btn:hover::after { animation: none; } .theme-switch__knob { transition: none; } }