/* ========================================================================== Vexo Digital — Design System ========================================================================== */ /* I font NON si caricano piu' con @import: un import viene scoperto solo dopo che questo file e' stato scaricato e interpretato, quindi partiva in ritardo (misurato: 173ms invece di 139ms). Ora c'e' un nel di ogni pagina, che il browser trova subito e scarica in parallelo. */ :root { /* Colors */ --color-bg: #09090a; --color-bg-soft: #0f0f11; --color-surface: #17171a; --color-surface-2: #1e1e22; --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.16); --color-text: #f6f5f3; --color-text-muted: #a3a3ab; --color-text-faint: #82828b; --color-primary: #ff5a1f; --color-primary-light: #ff8a45; --color-primary-dark: #d8420f; --color-on-primary: #0a0a0b; --color-primary-glow: rgba(255, 90, 31, 0.35); --color-success: #3ecf8e; --color-danger: #ff5c5c; /* Typography */ --font-display: 'Cabinet Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); --fs-3xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem); --fs-4xl: clamp(2.75rem, 1.9rem + 4vw, 5rem); --fs-hero: clamp(3rem, 2rem + 5.5vw, 6.5rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-16: 7rem; --space-20: 9rem; /* Radius */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-full: 999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Smooth exponential deceleration, no overshoot (bounce/elastic reads dated) */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-base: 280ms; --dur-slow: 500ms; --dur-slower: 800ms; /* Layout */ --container: 1240px; --container-narrow: 820px; --header-h: 84px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } ::selection { background: var(--color-primary); color: var(--color-on-primary); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } /* ========================================================================== Layout helpers ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-16); position: relative; } /* Anchored sections/cards land below the fixed navbar, not under it */ section[id], article[id], [id].section { scroll-margin-top: calc(var(--header-h) + var(--space-6)); } @media (max-width: 768px) { .section { padding-block: var(--space-10); } :root { --header-h: 72px; } } .section-head { max-width: 640px; margin-bottom: var(--space-10); } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); } .section-head p { color: var(--color-text-muted); font-size: var(--fs-lg); } .grid { display: grid; gap: var(--space-6); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .text-muted { color: var(--color-text-muted); } .text-primary { color: var(--color-primary); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.01em; white-space: nowrap; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); cursor: pointer; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 8px 30px -8px var(--color-primary-glow); } .btn-primary:hover { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: 0 14px 34px -8px var(--color-primary-glow); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border-strong); } .btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary-light); transform: translateY(-2px); } .btn-light { background: var(--color-text); color: var(--color-on-primary); } .btn-light:hover { background: var(--color-primary-light); color: var(--color-on-primary); transform: translateY(-2px); } .btn-sm { min-height: 42px; padding: 0 var(--space-5); font-size: var(--fs-xs); } .btn-block { width: 100%; } .btn-disabled { background: var(--color-surface-2); color: var(--color-text-faint); border: 1.5px solid var(--color-border); cursor: not-allowed; pointer-events: none; } /* ========================================================================== Navbar ========================================================================== */ .navbar { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100; display: flex; align-items: center; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); border-bottom: 1px solid transparent; } .navbar.is-scrolled { background: rgba(9, 9, 10, 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--color-border); } /* Un elemento con backdrop-filter diventa il blocco di riferimento per i suoi discendenti in position:fixed. Con la navbar sfocata (cioe' dopo lo scroll) il pannello del menu si ancorava alla navbar alta 72px invece che alla finestra, riducendosi a una striscia: sembrava che non si aprisse. Mentre il menu e' aperto disattiviamo quindi il filtro e rendiamo la navbar opaca. */ .navbar.is-menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; } .brand .dot { color: var(--color-primary); } .nav-links { display: flex; align-items: center; gap: var(--space-8); } .nav-links a { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-muted); position: relative; padding-block: 4px; transition: color var(--dur-base) var(--ease-out); } .nav-links a:hover, .nav-links a.active { color: var(--color-text); } /* Animated underline: grows from the left on hover, stays for the active link */ .nav-links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-primary); border-radius: var(--radius-full); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-out); } .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: var(--space-4); } /* CTA duplicated inside the mobile fullscreen menu: hidden on desktop, shown only under the 900px breakpoint */ .nav-links .nav-cta-mobile { display: none; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ''; display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .nav-toggle::before { transform: translateY(-7px); } .nav-toggle::after { transform: translateY(7px); } .nav-toggle.is-open::before { transform: translateY(0) rotate(45deg); } .nav-toggle.is-open::after { transform: translateY(0) rotate(-45deg); } .nav-toggle.is-open span { opacity: 0; } @media (max-width: 900px) { .nav-links { position: fixed; inset: var(--header-h) 0 0 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--space-2); padding: var(--space-8) var(--space-6); background: var(--color-bg); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); overflow-y: auto; } .nav-links.is-open { transform: translateX(0); } .nav-links a { font-size: var(--fs-2xl); padding-block: var(--space-3); width: 100%; } .nav-links .nav-cta-mobile { display: inline-flex; margin-top: var(--space-6); } .nav-actions .btn-ghost { display: none; } .nav-toggle { display: flex; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-top: calc(var(--header-h) + var(--space-16)); padding-bottom: var(--space-16); min-height: 92vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 80% 0%, rgba(255, 90, 31, 0.10), transparent 65%), radial-gradient(50% 45% at 8% 100%, rgba(255, 90, 31, 0.07), transparent 70%); } .hero-bg .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(58% 58% at 50% 28%, black, transparent 92%); opacity: 0.18; } /* Two slow, soft glows — a quiet hint of life rather than a demo-reel light show */ .hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; } .hero-blob.b1 { width: 460px; height: 460px; top: -160px; right: -60px; background: radial-gradient(circle, rgba(255, 90, 31, 0.4), transparent 70%); opacity: 0.4; animation: aurora-1 26s var(--ease-in-out) infinite; } .hero-blob.b2 { width: 380px; height: 380px; bottom: -140px; left: 4%; background: radial-gradient(circle, rgba(255, 138, 69, 0.3), transparent 70%); opacity: 0.3; animation: aurora-2 32s var(--ease-in-out) infinite; } @keyframes aurora-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-40px, 40px, 0) scale(1.08); } } @keyframes aurora-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(50px, -30px, 0) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .hero-blob { animation: none !important; } } .hero-content { max-width: 900px; } .hero-title { font-size: var(--fs-hero); margin-bottom: var(--space-6); } .hero-title .line { display: block; overflow: hidden; } .hero-title em { font-style: normal; color: var(--color-primary); position: relative; } /* Entrance is progressive enhancement: the hide-then-reveal applies only once JS confirms support via .has-js. With no JS (or a headless renderer that never runs it) the hero shows immediately instead of shipping blank. */ /* Tempi compressi: prima l'ultimo elemento dell'hero finiva a 460ms di ritardo + 800ms di durata = 1,26s, che si legge come "il sito ci mette a caricare" anche quando la pagina e' gia' pronta in 200ms. Ora si chiude entro ~750ms. */ .has-js .hero-title .line span { display: inline-block; transform: translateY(115%); transition: transform var(--dur-slow) var(--ease-out); } .has-js .hero-title .line:nth-child(1) span { transition-delay: 40ms; } .has-js .hero-title .line:nth-child(2) span { transition-delay: 110ms; } .has-js .hero-title .line:nth-child(3) span { transition-delay: 180ms; } .has-js .hero.is-loaded .hero-title .line span { transform: translateY(0); } .has-js .hero-lede, .has-js .hero-actions { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .has-js .hero.is-loaded .hero-lede, .has-js .hero.is-loaded .hero-actions { opacity: 1; transform: translateY(0); } .has-js .hero-lede { transition-delay: 200ms; } .has-js .hero-actions { transition-delay: 250ms; } .hero-lede { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 560px; margin-bottom: var(--space-8); } .hero-actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .hero-title .line span, .hero-lede, .hero-actions { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================================== Scroll reveals (IntersectionObserver-driven) ========================================================================== */ /* Visible by default; the hidden start state applies only under .has-js, so a no-JS or headless render shows every section instead of a blank page. */ .has-js .reveal { opacity: 0; transform: translateY(16px); /* 500ms invece di 800, scaglionamento 40ms invece di 70: la sezione e' gia' leggibile quando arriva sotto gli occhi, invece di comparire in ritardo dando l'impressione che stia ancora caricando. */ transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * 40ms); } .has-js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================================== Cards ========================================================================== */ .card { position: relative; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-6px); border-color: var(--color-border-strong); background-color: var(--color-surface-2); } /* Non-interactive card (no link/action): keep the resting appearance on hover */ .card.card-static:hover { transform: none; border-color: var(--color-border); background-color: var(--color-surface); } /* De-boxed icon: the glyph sits on its own, thin-lined and confident — no tinted square, which reads far less "template". */ .card-icon { position: relative; z-index: 0; display: inline-flex; color: var(--color-primary); margin-bottom: var(--space-5); transition: transform var(--dur-base) var(--ease-spring), color var(--dur-base) var(--ease-out); } .card-icon svg { width: 32px; height: 32px; stroke-width: 1.25; } .card-icon::after { content: ''; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 31, 0.28), transparent 68%); opacity: 0; transform: scale(0.7); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .card:hover .card-icon { transform: translateY(-4px) scale(1.06); } .card:hover .card-icon::after { opacity: 1; transform: scale(1); } .card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); letter-spacing: -0.01em; } .card p { color: var(--color-text-muted); font-size: var(--fs-sm); } /* Checklist of features inside the detailed service cards */ .service-features { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .service-features li { display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--color-text-muted); } .service-features li svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; } .card-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em; color: var(--color-primary); } .card-link svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); } .card:hover .card-link svg { transform: translateX(4px); } /* ========================================================================== Service rows (alternating zig-zag layout on the Servizi page) ========================================================================== */ .services-rows { display: flex; flex-direction: column; gap: var(--space-12); } .service-row { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-10); align-items: center; } /* Alternate the visual side row to row for a zig-zag rhythm */ .service-row:nth-child(even) .service-visual { order: 2; } .service-visual { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: radial-gradient(120% 110% at 28% 18%, rgba(255, 90, 31, 0.16), transparent 58%), var(--color-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Faint blueprint grid inside the panel — texture without a stock photo */ .service-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(72% 72% at 50% 50%, black, transparent 78%); opacity: 0.35; } .service-icon { position: relative; display: inline-flex; color: var(--color-primary); transition: transform var(--dur-base) var(--ease-spring); } .service-icon svg { width: 76px; height: 76px; stroke-width: 1; } .service-row:hover .service-icon { transform: translateY(-4px) scale(1.05); } .service-body h3 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); } .service-body > p { color: var(--color-text-muted); font-size: var(--fs-base); max-width: 54ch; } @media (max-width: 820px) { .services-rows { gap: var(--space-10); } .service-row { grid-template-columns: 1fr; gap: var(--space-6); } .service-row:nth-child(even) .service-visual { order: 0; } .service-visual { aspect-ratio: 16 / 7; } .service-icon svg { width: 60px; height: 60px; } } @media (prefers-reduced-motion: reduce) { .service-row:hover .service-icon { transform: none; } } @media (prefers-reduced-motion: reduce) { .card:hover .card-icon { transform: none; } } /* ========================================================================== Marquee ========================================================================== */ .marquee-wrap { border-block: 1px solid var(--color-border); overflow: hidden; padding-block: var(--space-6); } .marquee-track { display: flex; width: max-content; gap: var(--space-12); animation: marquee 32s linear infinite; } .marquee-wrap:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--color-text-faint); white-space: nowrap; display: flex; align-items: center; gap: var(--space-12); } .marquee-track span::after { content: '\2726'; color: var(--color-primary); font-size: 0.9rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ========================================================================== Forms ========================================================================== */ .field { margin-bottom: var(--space-5); } .field label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); } .field .required { color: var(--color-primary); } .field input, .field textarea, .field select { width: 100%; min-height: 54px; padding: 0 var(--space-5); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-base); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .field textarea { padding-block: var(--space-4); min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); background: var(--color-surface-2); outline: none; } .field .hint { font-size: var(--fs-xs); color: var(--color-text-faint); margin-top: var(--space-2); } .field .error-msg { font-size: var(--fs-xs); color: var(--color-danger); margin-top: var(--space-2); display: none; } .field.has-error input, .field.has-error textarea { border-color: var(--color-danger); } .field.has-error .error-msg { display: block; } /* Consenso privacy: casella obbligatoria prima dell'invio */ .field-consent label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.55; color: var(--color-text-muted); cursor: pointer; margin-bottom: 0; } .field-consent input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin-top: 2px; padding: 0; accent-color: var(--color-primary); cursor: pointer; } .field-consent a { text-decoration: underline; text-underline-offset: 2px; } .field-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .field-consent.has-error input[type="checkbox"] { outline: 2px solid var(--color-danger); outline-offset: 2px; } /* Honeypot: present in the DOM for bots, invisible and unreachable for humans */ .field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); font-size: var(--fs-sm); display: none; } .form-status.show { display: block; } .form-status.success { background: rgba(62, 207, 142, 0.12); color: var(--color-success); border: 1px solid rgba(62,207,142,0.3); } .form-status.error { background: rgba(255, 92, 92, 0.12); color: var(--color-danger); border: 1px solid rgba(255,92,92,0.3); } .btn[disabled] { opacity: 0.6; cursor: not-allowed; } /* ========================================================================== FAQ Accordion ========================================================================== */ .faq-item { border-bottom: 1px solid var(--color-border); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; text-align: left; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; } .faq-q .icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); position: relative; } .faq-q .icon::before, .faq-q .icon::after { content: ''; position: absolute; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .faq-q .icon::before { width: 12px; height: 1.5px; } .faq-q .icon::after { width: 1.5px; height: 12px; } .faq-item.is-open .icon { background: var(--color-primary); border-color: var(--color-primary); } .faq-item.is-open .icon::after { opacity: 0; } /* Height animated via grid-template-rows (0fr → 1fr): smooth, no JS measuring, and no layout-property thrash. The inner element carries min-height: 0 so the track can actually collapse. */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } /* The clip wrapper is the grid item: min-height 0 lets the track collapse to zero, and overflow hidden hides the answer (padding included) while closed. */ .faq-a-inner { min-height: 0; overflow: hidden; } .faq-a p { padding-bottom: var(--space-6); color: var(--color-text-muted); max-width: 640px; } @media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } } /* ========================================================================== CTA band ========================================================================== */ .cta-band { position: relative; border-radius: var(--radius-lg); padding: var(--space-16) var(--space-8); text-align: center; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); isolation: isolate; } .cta-band::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle at 50% 0%, var(--color-primary-glow), transparent 60%); z-index: -1; opacity: 0.8; } .cta-band h2 { font-size: var(--fs-3xl); max-width: 720px; margin: 0 auto var(--space-6); } .cta-band .actions { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; } /* ========================================================================== Page header (inner pages) ========================================================================== */ .page-header { padding-top: calc(var(--header-h) + var(--space-12)); padding-bottom: var(--space-10); position: relative; } .page-header .eyebrow { margin-bottom: var(--space-5); } .page-header h1 { font-size: var(--fs-4xl); max-width: 780px; } .page-header p.lede { color: var(--color-text-muted); font-size: var(--fs-lg); max-width: 560px; margin-top: var(--space-5); } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid var(--color-border); padding-block: var(--space-12) var(--space-8); } .footer-top { display: flex; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; margin-bottom: var(--space-10); } .footer-brand .brand { margin-bottom: var(--space-4); } .footer-brand p { color: var(--color-text-muted); max-width: 320px; font-size: var(--fs-sm); } .footer-cols { display: flex; gap: var(--space-12); flex-wrap: wrap; } .footer-col h4 { font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); margin-bottom: var(--space-4); } .footer-col a, .footer-col p { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); transition: color var(--dur-base) var(--ease-out); } .footer-col a:hover { color: var(--color-primary-light); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-faint); } /* Identificazione legale: presente ma volutamente defilata rispetto al brand. */ .footer-bottom .footer-legal { text-align: right; } .footer-bottom .footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .footer-bottom .footer-legal a:hover { color: var(--color-text-muted); } @media (max-width: 768px) { .footer-top { flex-direction: column; gap: var(--space-8); } .footer-cols { gap: var(--space-8); } } /* ========================================================================== WhatsApp floating button ========================================================================== */ .wa-float { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 90; display: flex; align-items: center; gap: var(--space-3); background: #ffffff; color: #0a0a0b; border-radius: var(--radius-full); padding: 14px 22px 14px 14px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .wa-float:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px -8px rgba(0,0,0,0.6); } .wa-float .wa-icon { width: 40px; height: 40px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wa-float .wa-icon svg { width: 22px; height: 22px; fill: #fff; } .wa-float .wa-text { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; } .wa-float .wa-text small { display: block; font-weight: 500; color: #5b5b5b; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 640px) { .wa-float .wa-text { display: none; } .wa-float { padding: 14px; } } /* ========================================================================== Accessibility utilities ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 1000; background: var(--color-primary); color: var(--color-on-primary); padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-sm); transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* ========================================================================== Misc components ========================================================================== */ .badge-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); } .badge svg { width: 13px; height: 13px; color: var(--color-primary); } .divider { height: 1px; background: var(--color-border); width: 100%; } .stat-block { text-align: center; } .stat-block .num { font-family: var(--font-display); font-size: var(--fs-4xl); color: var(--color-primary); } .stat-block .label { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); } /* ========================================================================== Pricing ========================================================================== */ /* Three upright, equally sized cards. The plan you can actually buy is marked out the way premium dark UIs do it (Linear-style): a border that catches light at the top and a soft glow behind, rather than distortion or blur. The two upcoming plans keep the same shape and stay fully legible; they recede through restraint, not damage. */ .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-5); max-width: 1080px; margin: var(--space-10) auto 0; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .plan:hover { transform: translateY(-4px); } /* Featured plan: gradient border via padding-box/border-box layering, so the top edge glows orange and fades into the normal hairline further down. */ .plan-featured { border-color: transparent; background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(180deg, var(--color-primary), rgba(255, 90, 31, 0.28) 38%, var(--color-border) 78%) border-box; box-shadow: 0 0 70px -26px rgba(255, 90, 31, 0.55), 0 26px 60px -34px rgba(0, 0, 0, 0.75); } /* Hairline of light across the very top edge */ .plan-featured::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent); } .plan-featured:hover { box-shadow: 0 0 80px -22px rgba(255, 90, 31, 0.65), 0 30px 66px -32px rgba(0, 0, 0, 0.8); } @media (min-width: 901px) { .plan-featured { transform: translateY(-12px); } .plan-featured:hover { transform: translateY(-16px); } } /* ---- Prezzi su smartphone ---------------------------------------------- A schede impilate la sezione era lunga 2,7 schermate e due terzi erano piani non ancora acquistabili, grandi quanto quello reale. Qui l'offerta vera resta a dimensione piena e i due "In arrivo" si compattano, senza perdere informazioni: restano leggibili, occupano solo meno spazio. ------------------------------------------------------------------------ */ @media (max-width: 900px) { /* Questi spazi di riserva servono solo ad allineare le colonne affiancate. Impilate diventano buchi vuoti. */ .plan-tagline { min-height: 0; } .plan-recurring { min-height: 0; } .plan-recurring:empty { display: none; margin-top: 0; } .plans-grid { margin-top: var(--space-8); gap: var(--space-4); } .plan-soon { padding: var(--space-5); } .plan-soon .plan-name { font-size: var(--fs-lg); } .plan-soon .plan-badge { margin-bottom: var(--space-3); } .plan-soon .plan-price { margin-top: var(--space-3); } .plan-soon .plan-divider { margin: var(--space-4) 0; } .plan-soon .plan-features { gap: var(--space-2); margin-bottom: var(--space-4); } .plan-soon .plan-features li { font-size: var(--fs-xs); } .plan-soon .plan-cta-soon { padding: var(--space-3); } } /* ---- Card contents ---- */ .plan-badge { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-5); white-space: nowrap; } .plan-badge.is-available { background: var(--color-primary); color: var(--color-on-primary); } .plan-badge.is-soon { background: transparent; color: var(--color-text-faint); border: 1px solid var(--color-border-strong); } .plan-name { font-size: var(--fs-xl); margin-bottom: var(--space-2); } .plan-tagline { font-size: var(--fs-sm); color: var(--color-text-muted); min-height: 2.8em; } .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .plan-amount { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .plan-amount.is-quiet { font-size: var(--fs-xl); color: var(--color-text-muted); font-weight: 500; } .plan-unit { font-size: var(--fs-sm); color: var(--color-text-faint); } /* Il canone mensile e' un elemento decisivo per il cliente: era il testo piu' sbiadito della scheda. Ora usa il grigio del corpo testo, non quello tenue. */ .plan-recurring { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-2); min-height: 1.5em; } .plan-divider { height: 1px; background: var(--color-border); margin: var(--space-6) 0; } .plan-features { display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; margin-bottom: var(--space-6); } .plan-features li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); } .plan-features li svg { width: 17px; height: 17px; color: var(--color-primary); flex-shrink: 0; margin-top: 3px; } .plan-soon .plan-features li svg { color: var(--color-text-faint); } /* Quiet, clearly non-clickable action for plans that aren't out yet */ .plan-cta-soon { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 1px dashed var(--color-border-strong); color: var(--color-text-faint); font-size: var(--fs-sm); font-weight: 700; } .pricing-foot { text-align: center; margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--fs-sm); } .pricing-foot a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .pricing-foot a:hover { color: var(--color-primary-light); } /* ========================================================================== Promise card (honest trust signals) ========================================================================== */ .promise-card { padding: var(--space-8) var(--space-8) var(--space-6); } .promise-eyebrow { display: block; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: var(--space-6); } .promise-list { display: flex; flex-direction: column; gap: var(--space-5); } .promise-list li { display: flex; gap: var(--space-4); align-items: flex-start; } .promise-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 90, 31, 0.12); color: var(--color-primary); margin-top: 2px; } .promise-ico svg { width: 16px; height: 16px; } .promise-list strong { display: block; font-size: var(--fs-base); font-weight: 600; margin-bottom: 2px; } .promise-list span { font-size: var(--fs-sm); color: var(--color-text-muted); } /* ========================================================================== Sector grid (who we work with) ========================================================================== */ /* Editorial rows, not boxed cards: icon + text divided by hairlines, echoing the .promise-list treatment used elsewhere on the page. */ .sector-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-10); } .sector-item { display: flex; gap: var(--space-5); align-items: flex-start; padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); } .sector-item:last-child { border-bottom: none; } .sector-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 90, 31, 0.12); color: var(--color-primary); transition: background var(--dur-base) var(--ease-out); } .sector-ico svg { width: 22px; height: 22px; stroke-width: 1.5; } .sector-item:hover .sector-ico { background: rgba(255, 90, 31, 0.2); } .sector-item h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); } .sector-item p { font-size: var(--fs-sm); color: var(--color-text-muted); } @media (min-width: 901px) { .sector-item:nth-last-child(2) { border-bottom: none; } } @media (max-width: 900px) { .sector-grid { grid-template-columns: 1fr; } } /* ========================================================================== Process section (sticky heading + scroll-lit timeline) ========================================================================== */ .process-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-12); align-items: start; } .process-head { position: sticky; top: calc(var(--header-h) + var(--space-8)); } .process-head h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); } .process-head p { color: var(--color-text-muted); font-size: var(--fs-lg); max-width: 32ch; } .timeline { position: relative; padding-left: var(--space-8); } .timeline::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); border-radius: 2px; } /* Orange fill driven by scroll progress (--timeline-progress: 0 → 1). Scaled rather than resized: transform is composited, so the line grows without triggering layout on every scroll frame. */ .timeline-fill { position: absolute; left: 0; top: 6px; width: 2px; border-radius: 2px; height: calc(100% - 12px); transform: scaleY(var(--timeline-progress, 0)); transform-origin: top center; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light)); box-shadow: 0 0 14px var(--color-primary-glow); transition: transform 120ms linear; } .timeline-item { position: relative; padding-bottom: var(--space-10); } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--space-8) - 6px); top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .timeline-item.is-active::before { border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 5px rgba(255, 90, 31, 0.15); } .timeline-item .step-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-2); opacity: 0.45; transition: opacity var(--dur-base) var(--ease-out); } .timeline-item h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); color: var(--color-text-muted); transition: color var(--dur-base) var(--ease-out); } .timeline-item p { color: var(--color-text-faint); max-width: 520px; transition: color var(--dur-base) var(--ease-out); } .timeline-item.is-active .step-label { opacity: 1; } .timeline-item.is-active h3 { color: var(--color-text); } .timeline-item.is-active p { color: var(--color-text-muted); } @media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; gap: var(--space-8); } .process-head { position: static; } .process-head p { max-width: none; } } /* Without JS, or with reduced motion, every step reads as active (the scroll lighting is an enhancement, never a prerequisite for legibility). */ @media (prefers-reduced-motion: reduce) { .timeline-fill { transition: none; transform: scaleY(1); } .timeline-item .step-label { opacity: 1; } .timeline-item h3 { color: var(--color-text); } .timeline-item p { color: var(--color-text-muted); } .timeline-item::before { border-color: var(--color-primary); } } html:not(.has-js) .timeline-item .step-label { opacity: 1; } html:not(.has-js) .timeline-item h3 { color: var(--color-text); } html:not(.has-js) .timeline-item p { color: var(--color-text-muted); } html:not(.has-js) .timeline-item::before { border-color: var(--color-primary); } /* ========================================================================== Material surfaces — subtle depth instead of flat digital gradients ========================================================================== */ /* Lit alternate sections: directional light from two corners + a vertical fall-off, instead of a flat fill. */ .section-alt { background: radial-gradient(72% 60% at 6% -6%, rgba(255, 90, 31, 0.06), transparent 55%), radial-gradient(66% 70% at 104% 108%, rgba(255, 138, 69, 0.045), transparent 52%), linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%); } /* Plain sections get a single whisper of top light for depth */ .section-lift { background: radial-gradient(55% 42% at 50% -8%, rgba(255, 90, 31, 0.035), transparent 60%); } /* Hairline light seam between stacked sections — subtle premium separation */ .section-alt::before, .section-lift::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border-strong) 50%, transparent); opacity: 0.6; } /* ========================================================================== Legal pages (Privacy / Termini) ========================================================================== */ .legal-content { padding-block: var(--space-4) var(--space-16); } .legal-content .legal-updated { display: inline-block; font-size: var(--fs-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-10); padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); width: 100%; } .legal-content section { margin-bottom: var(--space-10); } .legal-content section:last-child { margin-bottom: 0; } .legal-content h2 { font-size: var(--fs-xl); margin-bottom: var(--space-4); display: flex; align-items: baseline; gap: var(--space-3); } .legal-content h2 .legal-num { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--color-primary); font-weight: 500; } .legal-content p { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 68ch; } .legal-content p:last-child { margin-bottom: 0; } .legal-content ul { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; } .legal-content li { display: flex; gap: var(--space-3); color: var(--color-text-muted); max-width: 66ch; } .legal-content li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); margin-top: 0.6em; } .legal-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .legal-content a:hover { color: var(--color-primary-light); } .legal-content strong { color: var(--color-text); font-weight: 600; } /* ========================================================================== Responsive spacing — kept last so it wins over component defaults. Desktop breathes; small screens tighten up instead of scrolling through empty space. ========================================================================== */ /* Two-column splits that need more air than the default grid gap */ .split-lg { gap: var(--space-12); } @media (max-width: 900px) { .split-lg { gap: var(--space-8); } } @media (max-width: 768px) { /* The hero no longer carries a stat row, so a full-viewport height just leaves a hole under the CTAs on phones. */ .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-10); } .hero-lede { margin-bottom: var(--space-6); } .hero-actions { gap: var(--space-4); } .hero-actions .btn { width: 100%; } .page-header { padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: var(--space-8); } .section-head { margin-bottom: var(--space-8); } .split-lg { gap: var(--space-6); } .cta-band { padding: var(--space-10) var(--space-5); } .legal-content { padding-block: var(--space-4) var(--space-10); } .footer { padding-block: var(--space-10) var(--space-6); } } @media (max-width: 560px) { .section { padding-block: var(--space-8); } .marquee-wrap { padding-block: var(--space-5); } .marquee-track span { font-size: var(--fs-lg); } .card { padding: var(--space-6); } .plan { padding: var(--space-6) var(--space-5); } .promise-card { padding: var(--space-6) var(--space-6) var(--space-5); } .timeline-item { padding-bottom: var(--space-8); } .services-rows { gap: var(--space-8); } .legal-content .legal-updated { margin-bottom: var(--space-8); padding-bottom: var(--space-6); } .legal-content section { margin-bottom: var(--space-8); } } /* ========================================================================== Stampa — le pagine legali finiscono spesso in PDF o su carta. I browser non stampano gli sfondi, quindi senza queste regole il testo chiaro del tema scuro resterebbe bianco su bianco. Qui invertiamo su fondo bianco, togliamo gli elementi di navigazione e annulliamo lo stato iniziale delle animazioni, che altrimenti stamperebbe sezioni completamente vuote. ========================================================================== */ @media print { .has-js .reveal, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html, body { background: #fff !important; color: #000 !important; } /* Cromo del sito: inutile o fuorviante su carta. */ .navbar, .footer, .wa-float, .skip-link, .nav-toggle { display: none !important; } main, .page-header, .container, .container-narrow, .legal-content { padding: 0 !important; margin: 0 auto !important; max-width: 100% !important; } .page-header h1 { font-size: 22pt; color: #000 !important; } .page-header p.lede { font-size: 11pt; color: #333 !important; } .legal-content { font-size: 10.5pt; line-height: 1.5; } .legal-content h2 { color: #000 !important; font-size: 13pt; } .legal-content h2 .legal-num { color: #555 !important; } .legal-content p, .legal-content li { color: #1a1a1a !important; max-width: none; } .legal-content strong { color: #000 !important; } .legal-content li::before { background: #555 !important; } .legal-content .legal-updated { color: #555 !important; border-bottom-color: #ccc !important; } /* Un link stampato è inutile se non se ne legge la destinazione. */ .legal-content a { color: #000 !important; text-decoration: underline; } .legal-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; } /* Nessuna sezione o titolo spezzato a metà tra due pagine. */ .legal-content section { break-inside: avoid; page-break-inside: avoid; margin-bottom: 14pt; } .legal-content h2 { break-after: avoid; page-break-after: avoid; } }