/* ============================================================================= LuxAI — foglio di stile unico del sito ----------------------------------------------------------------------------- Sito statico, nessun build step: questo file e' insieme sorgente e artefatto servito. Ogni modifica va fatta qui e verificata su desktop e mobile. ORDINE DEL FILE (l'ordine e' significativo: e' la cascade) 1. @font-face caratteri ospitati sul dominio 2. @layer theme token residui del preflight Tailwind 3. @layer base reset Tailwind (Preflight) 4. Design token :root del progetto 5. Reset e base LuxAI *, html, body, a, controlli, main 6. Sfondi ambientali 7. Header, logo e navigazione 8. Hero, bottoni e prove 9. Pannello dimostrativo dell'hero 10. Nastro integrazioni 11. Animazioni di ingresso e @keyframes 12. Responsive di hero e header 13. Menu mobile e contenitori di sezione 14. Homepage: soluzioni, risultati, stima, metodo, demo, sicurezza, FAQ 15. Modulo di contatto 16. Footer 17. Responsive della homepage 18. Dashboard dimostrativa 19. Responsive della dashboard e globale 20. Componenti aggiunti in seconda battuta e pagine interne 21. Pagine legali, ringraziamento e 404 22. Responsive delle pagine interne 23. Accessibilita': skip link e focus visibile 24. Header sticky e ancore 25. Barra di avanzamento lettura 26. Menu mobile: stati 27. Rivelazione allo scroll e micro-interazioni 28. Stati del modulo di contatto 29. Avviso tecnico (barra cookie) 30. Cursori della stima 31. Titoli display 32. Selezione, scrollbar, reduced motion, stampa 33. Dashboard: intestazione workspace 34. Pagina corrente nella navigazione 35. Scala tipografica minima e contrasti REGOLE DI MANUTENZIONE - Non riordinare i blocchi: piu' selettori identici compaiono a distanza e il valore che vince dipende dalla posizione. - Le @media sono volutamente vicine alla sezione che modificano, non raccolte in fondo. - Le classi presenti qui ma assenti dal markup sono due e sono volute: .js, aggiunta dallo script inline nel , e .dash-overlay, prevista per il backdrop della sidebar della dashboard. ============================================================================= */ /* --- Caratteri ospitati sul dominio ---------------------------------- Archivo e Inter (SIL OFL), sottoinsieme latino, formato WOFF. Archivo ha l'asse di larghezza fissato a 76: valore calibrato sulle metriche di Arial Narrow (scarto misurato entro lo 0,6%), così le interruzioni di riga scritte a mano nei titoli restano al loro posto. Licenze in /assets/fonts/OFL-*.txt */ @font-face { font-family:"Archivo"; src:url("/assets/fonts/archivo-latin.woff") format("woff"); font-weight:500 650; font-style:normal; font-display:swap; } @font-face { font-family:"Inter"; src:url("/assets/fonts/inter-latin.woff") format("woff"); font-weight:400 700; font-style:normal; font-display:swap; } /* ===== 2. RESIDUI DEL PREFLIGHT TAILWIND: TOKEN ================================== */ @layer theme { :root, :host { --font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --default-font-family:var(--font-sans); --default-mono-font-family:var(--font-mono); } } /* ===== 3. RESIDUI DEL PREFLIGHT TAILWIND: RESET ================================== */ @layer base { *, :after, :before, ::backdrop { box-sizing:border-box; border:0 solid; margin:0; padding:0; } ::file-selector-button { box-sizing:border-box; border:0 solid; margin:0; padding:0; } html, :host { -webkit-text-size-adjust:100%; tab-size:4; line-height:1.5; font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings:var(--default-font-feature-settings,normal); font-variation-settings:var(--default-font-variation-settings,normal); -webkit-tap-highlight-color:transparent; } hr { height:0; color:inherit; border-top-width:1px; } abbr:where([title]) { -webkit-text-decoration:underline dotted; text-decoration:underline dotted; } h1, h2, h3, h4, h5, h6 { font-size:inherit; font-weight:inherit; } a { color:inherit; -webkit-text-decoration:inherit; -webkit-text-decoration:inherit; -webkit-text-decoration:inherit; -webkit-text-decoration:inherit; text-decoration:inherit; } b, strong { font-weight:bolder; } code, kbd, samp, pre { font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings:var(--default-mono-font-feature-settings,normal); font-variation-settings:var(--default-mono-font-variation-settings,normal); font-size:1em; } small { font-size:80%; } sub, sup { vertical-align:baseline; font-size:75%; line-height:0; position:relative; } sub { bottom:-.25em; } sup { top:-.5em; } table { text-indent:0; border-color:inherit; border-collapse:collapse; } :-moz-focusring { outline:auto; } progress { vertical-align:baseline; } summary { display:list-item; } ol, ul, menu { list-style:none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align:middle; display:block; } img, video { max-width:100%; height:auto; } button, input, select, optgroup, textarea { font:inherit; font-feature-settings:inherit; font-variation-settings:inherit; letter-spacing:inherit; color:inherit; opacity:1; background-color:#0000; border-radius:0; } ::file-selector-button { font:inherit; font-feature-settings:inherit; font-variation-settings:inherit; letter-spacing:inherit; color:inherit; opacity:1; background-color:#0000; border-radius:0; } :where(select:is([multiple],[size])) optgroup { font-weight:bolder; } :where(select:is([multiple],[size])) optgroup option { padding-inline-start:20px; } ::file-selector-button { margin-inline-end:4px; } ::placeholder { opacity:1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { ::placeholder { color:currentColor; } @supports (color:color-mix(in lab, red, red)) { ::placeholder { color:color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize:vertical; } ::-webkit-search-decoration { -webkit-appearance:none; } ::-webkit-date-and-time-value { min-height:1lh; text-align:inherit; } ::-webkit-datetime-edit { display:inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding:0; } ::-webkit-datetime-edit { padding-block:0; } ::-webkit-datetime-edit-year-field { padding-block:0; } ::-webkit-datetime-edit-month-field { padding-block:0; } ::-webkit-datetime-edit-day-field { padding-block:0; } ::-webkit-datetime-edit-hour-field { padding-block:0; } ::-webkit-datetime-edit-minute-field { padding-block:0; } ::-webkit-datetime-edit-second-field { padding-block:0; } ::-webkit-datetime-edit-millisecond-field { padding-block:0; } ::-webkit-datetime-edit-meridiem-field { padding-block:0; } ::-webkit-calendar-picker-indicator { line-height:1; } :-moz-ui-invalid { box-shadow:none; } button, input:where([type=button],[type=reset],[type=submit]) { appearance:button; } ::file-selector-button { appearance:button; } ::-webkit-inner-spin-button { height:auto; } ::-webkit-outer-spin-button { height:auto; } [hidden]:where(:not([hidden=until-found])) { display:none!important; } } /* ===== 4. DESIGN TOKEN ======================================================= Unico blocco :root non layerizzato del foglio. Prima erano tre, dichiarati in punti diversi: le proprieta' custom si risolvono a computed-value time, quindi accorparli non cambia alcun valore. --font-display e --font-body erano dichiarate due volte; qui resta il valore che vinceva la cascade, quello con Archivo e Inter ospitati sul dominio. Il :root dentro @media (max-width:680px) resta dov'e': e' condizionale. ------------------------------------------------------------------------- */ :root { /* superfici e colori */ --bg:#06080d; --bg-soft:#0a0d14; --panel:#0e121b; --panel-2:#11161f; --line:#788baa29; --line-bright:#48d1de45; --text:#f2f6fc; --muted:#8d99ac; --green:#5af07a; --green-deep:#3dd99a; --cyan:#00c2ff; --gradient:linear-gradient(100deg, var(--cyan), var(--green)); /* famiglie tipografiche */ --font-mono:"SFMono-Regular", Consolas, ui-monospace, monospace; --font-display:"Archivo","Aptos Display","Arial Narrow","Roboto Condensed","Liberation Sans Narrow","Nimbus Sans Narrow","DejaVu Sans Condensed",system-ui,sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,system-ui,sans-serif; /* interfaccia */ --focus:#8ef2c6; --header-h:78px; /* scala tipografica minima e testi secondari (Gruppo 3) */ --fs-micro:11px; /* numerali, tag brevi, metadati compatti */ --fs-label:12px; /* kicker, etichette, meta, footer */ --fs-note:13px; /* note e diciture sui dati dimostrativi */ --text-2:#aab8ae; /* testo secondario ~7,9:1 su --bg */ --text-3:#8e9c94; /* metadati/microcopy ~6,8:1 su --bg, ~6,4:1 sui pannelli */ --demo-ink:#b8c8bd; /* diciture sui dati simulati: massima evidenza */ } /* ===== 5. RESET E BASE LUXAI ===================================================== */ * { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); } body { background:var(--bg); color:var(--text); font-family:var(--font-body); margin:0; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button, input, textarea, select { font:inherit; } ::selection { background:var(--green); color:#061008; } main { isolation:isolate; background-image:linear-gradient(#7087a409 1px,#0000 1px),linear-gradient(90deg,#7087a409 1px,#0000 1px); background-position:top; background-size:76px 76px; min-height:100vh; position:relative; overflow:hidden; } /* ===== 6. SFONDI AMBIENTALI ====================================================== */ .ambient { filter:blur(110px); pointer-events:none; opacity:.16; z-index:-1; border-radius:999px; position:absolute; } .ambient-one { background:var(--green); width:540px; height:540px; top:-250px; right:-120px; } .ambient-two { background:var(--cyan); opacity:.09; width:420px; height:420px; top:520px; left:-290px; } /* ===== 7. HEADER, LOGO E NAVIGAZIONE ============================================= */ .site-header { border:1px solid var(--line); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); z-index:20; background:#080b11b3; border-radius:999px; justify-content:space-between; align-items:center; width:min(1180px,100% - 48px); height:64px; margin:14px auto 0; padding:0 10px 0 18px; display:flex; position:relative; box-shadow:0 14px 50px #00000038; } .logo-link { align-items:center; display:inline-flex; } .lux-logo { flex:none; align-items:center; gap:8px; height:38px; display:inline-flex; } .lux-mark { filter:drop-shadow(0 0 12px #00c2ff24); width:32px; height:32px; overflow:visible; } .lux-wordmark { width:98px; height:25px; } .lux-logo-compact { gap:6px; height:30px; } .lux-logo-compact .lux-mark { width:27px; height:27px; } .lux-logo-compact .lux-wordmark { width:77px; height:20px; } .desktop-nav { color:#a8b5ac; align-items:center; gap:34px; font-size:14px; display:flex; } .desktop-nav a { transition:color .2s; } .desktop-nav a:hover { color:var(--text); } .nav-cta { background:var(--gradient); color:#061018; border:0; border-radius:999px; align-items:center; gap:7px; padding:11px 15px 11px 18px; font-size:13px; font-weight:650; transition:all .25s; display:inline-flex; box-shadow:0 0 0 1px #ffffff14,0 9px 30px #00c2ff21; } .nav-cta:hover { filter:brightness(1.1); transform:translateY(-1px); } /* ===== 8. HERO, BOTTONI E PROVE ================================================== */ .hero { grid-template-columns:1.05fr .95fr; align-items:center; gap:72px; width:min(1180px,100% - 48px); min-height:670px; margin:0 auto; padding:86px 0 92px; display:grid; } .hero-copy { z-index:2; position:relative; } .eyebrow, .section-kicker { font-family:var(--font-mono); color:#a9b8ae; letter-spacing:.12em; text-transform:uppercase; align-items:center; gap:10px; font-size:11px; display:flex; } .eyebrow-dot { background:var(--green); border-radius:50%; width:7px; height:7px; box-shadow:0 0 0 5px #a5ff7714; } .hero h1 { max-width:720px; font-family:var(--font-display); letter-spacing:-.065em; margin:26px 0 24px; font-size:clamp(55px,6.15vw,90px); font-weight:600; line-height:.96; } .hero h1 span { background:var(--gradient); color:#0000; -webkit-background-clip:text; background-clip:text; } .hero-lead { color:#aab8ae; max-width:600px; margin:0; font-size:18px; line-height:1.7; } .hero-actions { align-items:center; gap:12px; margin-top:36px; display:flex; } .button { border-radius:999px; justify-content:center; align-items:center; gap:11px; min-height:54px; padding:0 23px; font-size:14px; font-weight:600; transition:transform .25s,border-color .25s,background .25s; display:inline-flex; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--gradient); color:#061018; box-shadow:0 12px 40px #00c2ff21; } .button-primary:hover { filter:brightness(1.1); } .button-ghost { border:1px solid var(--line); color:#d7e1da; background:#ffffff08; } .button-ghost:hover { border-color:var(--line-bright); background:#ffffff0e; } .button-dot { background:var(--cyan); width:6px; height:6px; box-shadow:0 0 14px var(--cyan); border-radius:50%; } .hero-proof { color:#7e8f84; flex-wrap:wrap; gap:20px; margin-top:32px; font-size:11px; display:flex; } .hero-proof span { align-items:center; gap:5px; display:flex; } .hero-proof svg { color:var(--green-deep); } /* ===== 9. PANNELLO DIMOSTRATIVO DELL'HERO ======================================== */ .hero-visual { background:linear-gradient(160deg,#121e17eb,#070c09f0); border:1px solid #b3ffcb24; border-radius:28px; min-width:0; padding:17px; position:relative; box-shadow:0 40px 100px #00000073; } .hero-visual:before { content:""; border-radius:inherit; z-index:-1; background:linear-gradient(135deg,#6ce8ea38,#0000 35% 70%,#a5ff771f); position:absolute; inset:-1px; } .visual-topline { justify-content:space-between; align-items:flex-start; height:34px; display:flex; } .window-dots { gap:5px; padding:4px; display:flex; } .window-dots i { background:#526059; border-radius:50%; width:6px; height:6px; } .live-pill { color:#aee793; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; background:#a5ff770f; border:1px solid #a5ff7724; border-radius:999px; align-items:center; gap:7px; padding:5px 9px; font-size:8px; display:flex; } .live-pill i { background:var(--green); border-radius:50%; width:5px; height:5px; animation:2s infinite pulse; } .visual-heading { justify-content:space-between; align-items:flex-end; padding:17px 12px 21px; display:flex; } .visual-heading p { font-family:var(--font-mono); color:#6f8176; text-transform:uppercase; letter-spacing:.12em; margin:0 0 5px; font-size:9px; } .visual-heading h2 { font-family:var(--font-display); letter-spacing:-.035em; margin:0; font-size:25px; } .visual-stat { font-family:var(--font-display); color:var(--green); text-align:right; font-size:22px; } .visual-stat small { font-family:var(--font-mono); letter-spacing:.08em; color:#6f8176; text-transform:uppercase; margin-top:2px; font-size:7px; display:block; } .flow-map { flex-direction:column; gap:0; display:flex; } .flow-node { border:1px solid var(--line); background:#ffffff06; border-radius:15px; grid-template-columns:36px 1fr auto; align-items:center; gap:11px; min-height:69px; padding:0 13px; display:grid; } .node-ai { background:linear-gradient(90deg,#6ce8ea12,#a5ff7709); border-color:#6ce8ea40; } .node-icon { color:#aab8ae; width:34px; height:34px; font-family:var(--font-mono); background:#172019; border-radius:10px; place-items:center; font-size:9px; display:grid; } .node-icon-ai { background:var(--gradient); color:#071008; font-weight:700; } .flow-node strong { font-size:12px; font-weight:600; display:block; } .flow-node small { color:#718177; margin-top:4px; font-size:9px; display:block; } .node-status { color:#829188; font-family:var(--font-mono); text-transform:uppercase; background:#ffffff0a; border-radius:99px; padding:5px 7px; font-size:7px; } .node-status.success { color:#a7e98b; background:#a5ff7712; } .processing { align-items:center; gap:3px; display:flex; } .processing i { background:var(--cyan); border-radius:50%; width:4px; height:4px; animation:1.25s ease-in-out infinite bounce; } .processing i:nth-child(2) { animation-delay:.15s; } .processing i:nth-child(3) { animation-delay:.3s; } .flow-line { border-left:1px dashed #a5ff7733; height:19px; margin-left:30px; position:relative; } .flow-line span { background:var(--green); border-radius:50%; width:4px; height:4px; animation:2.2s linear infinite travel; position:absolute; left:-2.5px; } .visual-footer { border-top:1px solid var(--line); grid-template-columns:1fr 1.05fr; align-items:end; gap:20px; margin-top:16px; padding:18px 12px 7px; display:grid; } .visual-footer strong { font-family:var(--font-display); letter-spacing:-.03em; font-size:25px; display:block; } .visual-footer span { color:#6f8176; font-size:9px; display:block; } /* ===== 10. NASTRO INTEGRAZIONI =================================================== */ .trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); justify-content:space-between; align-items:center; gap:30px; width:min(1180px,100% - 48px); margin:0 auto; padding:25px 0; display:flex; } .trust-strip>p { color:#647168; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; margin:0; font-size:9px; } .integration-list { flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:27px; display:flex; } .integration-list span { color:#87968c; align-items:center; gap:8px; font-size:12px; display:flex; } .integration-list i { border:1px solid #5a6a60; border-radius:2px; width:8px; height:8px; transform:rotate(45deg); } .section-kicker { color:#6f8176; } /* ===== 11. ANIMAZIONI DI INGRESSO ================================================ */ .reveal { animation:.75s cubic-bezier(.2,.7,.2,1) both reveal; } .reveal-two { animation-delay:80ms; } .reveal-three { animation-delay:.16s; } .reveal-four { animation-delay:.24s; } .reveal-five { animation-delay:.32s; } @keyframes reveal { 0% { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @keyframes pulse { 50% { opacity:.5; } } @keyframes bounce { 0%,to { animation-timing-function:cubic-bezier(.8,0,1,1); transform:translateY(-25%); } 50% { animation-timing-function:cubic-bezier(0,0,.2,1); transform:none; } } @keyframes travel { 0% { top:0; } to { top:100%; } } /* ===== 12. RESPONSIVE DI HERO E HEADER =========================================== */ @media (max-width:960px) { .hero { grid-template-columns:1fr; gap:55px; padding-top:70px; } .hero-copy { max-width:760px; } .hero-visual { justify-self:center; width:min(620px,100%); } .trust-strip { flex-direction:column; align-items:flex-start; } .integration-list { justify-content:flex-start; } } @media (max-width:680px) { .site-header, .hero, .trust-strip { width:min(100% - 32px,1180px); } .site-header { height:72px; } .desktop-nav { display:none; } .nav-cta { padding:9px 13px; } .hero { min-height:unset; padding:60px 0 72px; } .hero h1 { font-size:clamp(48px,15.2vw,68px); } .hero-lead { font-size:16px; } .hero-actions { flex-direction:column; align-items:stretch; } .button { width:100%; } .hero-proof { flex-direction:column; gap:11px; } .hero-visual { border-radius:21px; padding:12px; } .visual-heading { padding-inline:7px; } .visual-heading h2 { font-size:21px; } .flow-node { grid-template-columns:34px 1fr; padding:10px; } .flow-node>:last-child { display:none; } .visual-footer { padding-inline:7px; } .integration-list { gap:16px 20px; } } @media (prefers-reduced-motion:reduce) { *, :before, :after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } /* ===== 13. MENU MOBILE E CONTENITORI DI SEZIONE ================================== */ .header-actions { align-items:center; gap:10px; display:flex; } .menu-button { border:1px solid var(--line); width:42px; height:42px; color:var(--text); cursor:pointer; background:#ffffff08; border-radius:50%; justify-content:center; align-items:center; display:none; } .mobile-nav { display:none; } .section-shell { width:min(1180px,100% - 48px); margin-inline:auto; } .section-heading { grid-template-columns:1.5fr .62fr; align-items:end; gap:90px; display:grid; } .section-heading h2, .outcomes-copy h2, .roi-copy h2, .dashboard-feature-copy h2, .faq-title h2, .contact-copy h2 { font-family:var(--font-display); letter-spacing:-.055em; margin:25px 0 0; font-size:clamp(44px,5.5vw,74px); font-weight:500; line-height:1.02; } .section-heading h2 span, .outcomes-copy h2 span, .method-heading h2 span, .dashboard-feature-copy h2 span, .faq-title h2 span, .contact-copy h2 span { color:#69786f; } .section-heading>p, .method-heading>p { color:#8f9f95; margin:0 0 5px; font-size:15px; line-height:1.75; } /* ===== 14. HOMEPAGE: SEZIONI ===================================================== */ .solutions { padding:140px 0 150px; } .services-grid { grid-template-columns:repeat(4,1fr); gap:14px; margin-top:66px; display:grid; } .service-card { border:1px solid var(--line); background:linear-gradient(155deg,#121b15cc,#080d0af2); border-radius:23px; flex-direction:column; min-height:355px; padding:25px; transition:transform .3s,border-color .3s; display:flex; position:relative; overflow:hidden; } .service-card:hover { border-color:#a5ff773b; transform:translateY(-5px); } .service-card-wide { grid-column:span 2; } .service-card:after { content:""; background:var(--green); opacity:.025; filter:blur(55px); pointer-events:none; border-radius:50%; width:220px; height:220px; position:absolute; bottom:-100px; right:-100px; } .service-top { justify-content:space-between; align-items:center; display:flex; } .service-icon { width:43px; height:43px; color:var(--cyan); background:#6ce8ea12; border:1px solid #6ce8ea21; border-radius:13px; place-items:center; display:grid; } .service-number { color:#536057; font-family:var(--font-mono); font-size:9px; } .service-copy { z-index:2; margin-top:auto; position:relative; } .service-copy h3 { max-width:320px; font-family:var(--font-display); letter-spacing:-.035em; margin:34px 0 10px; font-size:25px; font-weight:550; line-height:1.12; } .service-copy p { color:#839188; max-width:350px; margin:0; font-size:12px; line-height:1.7; } .service-meta { border-top:1px solid var(--line); color:#647268; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; justify-content:space-between; align-items:center; margin-top:24px; padding-top:17px; font-size:8px; display:flex; } .service-meta svg { color:#718078; } .file-stack { gap:7px; width:44%; display:grid; position:absolute; top:88px; right:25px; } .file-stack span { border:1px solid var(--line); color:#9baa9f; background:#ffffff06; border-radius:11px; grid-template-columns:31px 1fr auto; align-items:center; gap:8px; min-height:48px; padding:0 10px; font-size:8px; display:grid; } .file-stack i { color:#8eeea9; width:28px; height:28px; font-family:var(--font-mono); background:#172219; border-radius:7px; place-items:center; font-size:6px; font-style:normal; display:grid; } .file-stack em { color:#6f9277; font-family:var(--font-mono); text-transform:uppercase; font-size:6px; font-style:normal; } .chat-preview { flex-direction:column; align-items:flex-start; gap:9px; width:44%; display:flex; position:absolute; top:95px; right:25px; } .chat-preview span { border:1px solid var(--line); color:#9ca9a1; max-width:90%; padding:10px 12px; font-size:8px; line-height:1.45; } .chat-in { background:#ffffff06; border-radius:4px 12px 12px; } .chat-preview .chat-out { color:#a4c9c2; background:#6ce8ea12; border-color:#6ce8ea1f; border-radius:12px 4px 12px 12px; align-self:flex-end; } .outcomes-section { border-block:1px solid var(--line); background:linear-gradient(#0f1712bf,#070b088c); } .outcomes-inner { grid-template-columns:.78fr 1.22fr; align-items:center; gap:85px; padding-block:145px; display:grid; } .outcomes-copy h2 { font-size:clamp(43px,4.8vw,66px); } .outcomes-copy>p { color:#8c9b92; margin:27px 0 0; font-size:14px; line-height:1.8; } .outcome-points { gap:12px; margin-top:36px; display:grid; } .outcome-points span { border-bottom:1px solid var(--line); color:#a7b4ac; align-items:center; gap:11px; min-height:49px; font-size:12px; display:flex; } .outcome-points svg { color:var(--green-deep); } .analytics-card { border:1px solid var(--line-bright); background:#040806b8; border-radius:26px; min-width:0; padding:28px; box-shadow:0 30px 80px #0000003d; } .analytics-head { justify-content:space-between; align-items:flex-start; display:flex; } .analytics-head span { color:#76867b; font-size:10px; display:block; } .analytics-head strong { font-family:var(--font-display); letter-spacing:-.035em; margin-top:7px; font-size:32px; display:block; } .analytics-head .demo-label { border:1px solid var(--line); font-family:var(--font-mono); letter-spacing:.08em; border-radius:99px; padding:7px 9px; font-size:7px; } .analytics-stats { border-top:1px solid var(--line); grid-template-columns:repeat(3,1fr); margin-top:24px; padding-top:22px; display:grid; } .analytics-stats div { border-right:1px solid var(--line); padding:0 18px; } .analytics-stats div:first-child { padding-left:0; } .analytics-stats div:last-child { border:0; } .analytics-stats span { color:#718078; font-size:8px; display:block; } .analytics-stats strong { font-family:var(--font-display); margin-top:8px; font-size:23px; display:inline-block; } .analytics-stats em { color:#72ca87; font-family:var(--font-mono); margin-top:4px; font-size:7px; font-style:normal; display:block; } .roi-section { padding-block:135px; } .roi-card { border:1px solid var(--line); background:linear-gradient(135deg,#0e1a13f0,#070c09fa); border-radius:29px; grid-template-columns:.9fr 1fr .8fr; align-items:center; gap:58px; padding:48px; display:grid; position:relative; overflow:hidden; } .roi-card:before { content:""; background:var(--cyan); filter:blur(100px); opacity:.08; border-radius:50%; width:350px; height:350px; position:absolute; bottom:-240px; left:-180px; } .roi-copy h2 { font-size:clamp(35px,3.4vw,48px); } .roi-copy p { color:#7f9085; margin:20px 0 0; font-size:12px; line-height:1.7; } .roi-controls { gap:26px; display:grid; } .roi-controls label>span { color:#8e9e94; justify-content:space-between; align-items:center; font-size:10px; display:flex; } .roi-controls label strong { color:var(--text); font-size:12px; } .roi-controls input[type=range] { appearance:none; background:linear-gradient(90deg, var(--cyan), var(--green)); border-radius:99px; outline:none; width:100%; height:3px; margin-top:14px; } .roi-controls input[type=range]::-webkit-slider-thumb { appearance:none; background:var(--green); cursor:grab; border:4px solid #0b140e; border-radius:50%; width:17px; height:17px; box-shadow:0 0 0 1px #a5ff7759; } .roi-results { grid-template-columns:1fr 1fr; gap:9px; display:grid; } .roi-results>div { border:1px solid var(--line); background:#ffffff06; border-radius:15px; padding:15px; } .roi-results span { color:#708077; min-height:25px; font-size:8px; line-height:1.4; display:block; } .roi-results strong { font-family:var(--font-display); letter-spacing:-.03em; margin-top:4px; font-size:24px; display:block; } .roi-results strong small { color:#8d9c93; font-size:14px; } .roi-results .roi-highlight { background:linear-gradient(110deg,#6ce8ea17,#a5ff7712); border-color:#a5ff772e; grid-column:span 2; padding:19px; } .roi-highlight strong { color:var(--green); font-size:33px; } .roi-highlight>small { color:#617067; margin-top:5px; font-size:7px; display:block; } .method { padding-bottom:155px; } .method-grid { border-top:1px solid var(--line); grid-template-columns:repeat(3,1fr); margin-top:70px; display:grid; } .method-grid article { border-right:1px solid var(--line); min-height:330px; padding:34px 35px 0 0; position:relative; } .method-grid article+article { padding-left:35px; } .method-grid article:last-child { border:0; } .method-number { color:#59665e; font-family:var(--font-mono); font-size:9px; } .method-dot { background:var(--bg); border:2px solid var(--green); width:9px; height:9px; box-shadow:0 0 0 5px var(--bg); border-radius:50%; position:absolute; top:-5px; left:0; } .method-grid article+article .method-dot { left:35px; } .method-grid h3 { font-family:var(--font-display); letter-spacing:-.035em; margin:71px 0 14px; font-size:27px; font-weight:550; } .method-grid p { color:#7c8b82; max-width:300px; margin:0; font-size:12px; line-height:1.75; } .method-grid small { color:#5b6a60; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-top:31px; font-size:8px; display:block; } .dashboard-feature { border:1px solid var(--line-bright); background:linear-gradient(140deg,#0e1812ed,#060a08f5); border-radius:31px; grid-template-columns:.72fr 1.28fr; align-items:center; gap:40px; margin-bottom:155px; padding:60px 0 60px 55px; display:grid; overflow:hidden; } .dashboard-feature-copy { z-index:2; position:relative; } .dashboard-feature-copy h2 { font-size:clamp(40px,4.1vw,57px); } .dashboard-feature-copy p { color:#84938a; max-width:430px; margin:25px 0 31px; font-size:13px; line-height:1.75; } .dashboard-feature-copy .button { width:fit-content; } .dashboard-mock { border:1px solid var(--line); background:#090e0b; border-radius:22px 0 0 22px; grid-template-columns:135px 1fr; min-width:720px; height:445px; display:grid; overflow:hidden; transform:translate(35px); box-shadow:-20px 40px 90px #00000059; } .dashboard-mock aside { border-right:1px solid var(--line); flex-direction:column; gap:8px; padding:23px 15px; display:flex; } .dashboard-mock aside>span { color:#637168; border-radius:8px; align-items:center; gap:8px; padding:9px; font-size:7px; display:flex; } .dashboard-mock aside>span i { border:1px solid #58655d; border-radius:2px; width:7px; height:7px; } .dashboard-mock aside .mock-active { color:#c7d5cb; background:#a5ff770e; } .dashboard-mock aside .mock-active i { background:var(--green); border-color:var(--green); } .mock-main { padding:27px 29px; } .mock-head { justify-content:space-between; display:flex; } .mock-head small { color:#55635a; font-family:var(--font-mono); font-size:6px; display:block; } .mock-head strong { font-family:var(--font-display); margin-top:4px; font-size:20px; display:block; } .mock-head>span { border:1px solid var(--line); color:#76847b; border-radius:99px; height:fit-content; padding:6px 9px; font-size:7px; } .mock-kpis { grid-template-columns:repeat(3,1fr); gap:9px; margin-top:24px; display:grid; } .mock-kpis div { border:1px solid var(--line); border-radius:11px; padding:13px; } .mock-kpis span { color:#617067; font-size:7px; display:block; } .mock-kpis strong { font-family:var(--font-display); margin-top:7px; font-size:18px; display:block; } .mock-kpis em { color:#72be83; font-family:var(--font-mono); margin-top:4px; font-size:6px; font-style:normal; display:block; } .mock-bottom { grid-template-columns:1.2fr .8fr; gap:10px; height:215px; margin-top:10px; display:grid; } .mock-chart { border:1px solid var(--line); border-radius:11px; align-items:end; gap:7px; padding:25px 18px 18px; display:flex; } .mock-chart i { background:linear-gradient(var(--cyan), #6ce8ea0f); border-radius:3px 3px 0 0; flex:1; } .mock-agents { border:1px solid var(--line); border-radius:11px; align-content:start; gap:6px; padding:12px; display:grid; } .mock-agents span { border-bottom:1px solid var(--line); color:#7e8b83; grid-template-columns:7px 1fr auto; align-items:center; gap:6px; padding:9px 0; font-size:7px; display:grid; } .mock-agents span>i { background:#5a665e; border-radius:50%; width:5px; height:5px; } .mock-agents span>i.online { background:var(--green); } .mock-agents em { color:#66756b; font-family:var(--font-mono); font-size:5px; font-style:normal; } .security-strip { border-block:1px solid var(--line); background:#10181385; } .security-inner { grid-template-columns:62px .85fr 1.15fr auto; align-items:center; gap:30px; min-height:190px; display:grid; } .security-icon { width:56px; height:56px; color:var(--green); background:#a5ff770d; border:1px solid #a5ff772e; border-radius:17px; place-items:center; display:grid; } .security-inner h3 { font-family:var(--font-display); letter-spacing:-.035em; margin:10px 0 0; font-size:27px; } .security-inner>p { color:#849188; max-width:440px; margin:0; font-size:12px; line-height:1.7; } .gdpr-badge { border:1px solid var(--line-bright); color:#99aaa0; font-family:var(--font-mono); white-space:nowrap; border-radius:99px; padding:10px 13px; font-size:8px; } .faq-section { grid-template-columns:.85fr 1.15fr; gap:100px; padding-block:145px; display:grid; } .faq-title h2 { font-size:clamp(42px,4.5vw,61px); } .faq-list { border-top:1px solid var(--line); } .faq-list details { border-bottom:1px solid var(--line); } .faq-list summary { color:#c7d2ca; cursor:pointer; justify-content:space-between; align-items:center; gap:20px; min-height:84px; font-size:15px; list-style:none; display:flex; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary i { border:1px solid var(--line); color:#7c8981; border-radius:50%; place-items:center; width:30px; height:30px; font-style:normal; transition:transform .25s; display:grid; } .faq-list details[open] summary i { color:var(--green); transform:rotate(45deg); } .faq-list details p { color:#7e8c83; margin:-2px 55px 26px 0; font-size:12px; line-height:1.8; } /* ===== 15. MODULO DI CONTATTO ==================================================== */ .contact-section { border-top:1px solid var(--line); background:radial-gradient(circle at 10% 80%,#6ce8ea12,#0000 35%),linear-gradient(140deg,#0d1610eb,#050907fa); } .contact-inner { grid-template-columns:.85fr 1.15fr; align-items:start; gap:95px; padding-block:130px; display:grid; } .contact-copy h2 { font-size:clamp(43px,4.7vw,64px); } .contact-copy>p { color:#8a9990; max-width:510px; margin:28px 0 0; font-size:14px; line-height:1.75; } .contact-booking { width:fit-content; margin-top:27px; } .contact-email { color:#8d9c93; align-items:center; gap:9px; width:fit-content; margin-top:18px; font-size:11px; display:flex; } .contact-email svg { color:var(--cyan); } .contact-email strong { color:#c7d5cc; font-weight:600; } .contact-email:hover strong { color:var(--green); } .contact-promise { gap:11px; margin-top:35px; display:grid; } .contact-promise span { color:#849288; align-items:center; gap:8px; font-size:11px; display:flex; } .contact-promise svg { color:var(--green); } .contact-form { border:1px solid var(--line-bright); background:#04080694; border-radius:25px; flex-direction:column; gap:18px; min-height:520px; padding:31px; display:flex; } .form-row { grid-template-columns:1fr 1fr; gap:14px; display:grid; } .contact-form label { color:#87968c; gap:8px; font-size:10px; display:grid; } .contact-form input, .contact-form textarea, .contact-form select { border:1px solid var(--line); width:100%; color:var(--text); background:#ffffff06; border-radius:11px; outline:none; padding:13px 14px; font-size:12px; transition:border-color .2s,background .2s; } .contact-form textarea { resize:vertical; min-height:96px; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { background:#6ce8ea08; border-color:#6ce8ea61; } .contact-form input::placeholder, .contact-form textarea::placeholder { color:#4f5c54; } .contact-form select option { background:#0b110d; } .form-submit { cursor:pointer; border:0; width:100%; margin-top:3px; } .form-note { color:#5f6c64; justify-content:center; align-items:center; gap:5px; font-size:8px; display:flex; } /* ===== 16. FOOTER ================================================================ */ .site-footer { padding-block:70px 25px; } .footer-main { justify-content:space-between; gap:80px; padding-bottom:60px; display:flex; } .footer-main>div:first-child p { color:#6d7b72; max-width:340px; margin:17px 0 0; font-size:12px; line-height:1.7; } .footer-links { gap:90px; display:flex; } .footer-links>div { align-content:start; gap:11px; min-width:100px; display:grid; } .footer-links strong { color:#68766d; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; font-size:8px; } .footer-links a { color:#a4b1a8; font-size:11px; } .footer-links a:hover { color:var(--text); } .footer-bottom { border-top:1px solid var(--line); color:#536158; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; justify-content:space-between; padding-top:22px; font-size:7px; display:flex; } /* ===== 17. RESPONSIVE DELLA HOMEPAGE ============================================= */ @media (max-width:1040px) { .services-grid { grid-template-columns:repeat(2,1fr); } .outcomes-inner { gap:50px; } .roi-card { grid-template-columns:1fr 1fr; } .roi-results { grid-column:span 2; grid-template-columns:repeat(3,1fr); } .roi-results .roi-highlight { grid-column:auto; } .dashboard-feature { grid-template-columns:1fr; padding:55px 0 0 45px; } .dashboard-feature-copy { padding-right:45px; } .dashboard-mock { justify-self:end; transform:translate(18px); } .security-inner { grid-template-columns:62px 1fr auto; padding-block:34px; } .security-inner>p { grid-column:2/3; } } @media (max-width:820px) { .section-heading, .outcomes-inner, .faq-section, .contact-inner { grid-template-columns:1fr; gap:42px; } .section-heading>p { max-width:540px; } .outcomes-inner { padding-block:110px; } .method-grid { border-top:0; grid-template-columns:1fr; } .method-grid article, .method-grid article+article { border-top:1px solid var(--line); border-right:0; min-height:0; padding:30px 0 35px 28px; } .method-dot, .method-grid article+article .method-dot { left:-4px; } .method-grid h3 { margin-top:28px; } .security-inner { grid-template-columns:62px 1fr; } .security-inner>p { grid-column:2; } .gdpr-badge { grid-column:2; width:fit-content; } .dashboard-mock { min-width:680px; } } @media (max-width:680px) { .section-shell { width:min(100% - 32px,1180px); } .nav-cta { display:none; } .menu-button { display:inline-flex; } .mobile-nav { border:1px solid var(--line); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); background:#070c09fa; border-radius:16px; padding:9px; display:grid; position:absolute; top:66px; left:0; right:0; box-shadow:0 25px 60px #00000073; } .mobile-nav a { color:#a9b5ad; border-radius:9px; padding:13px 14px; font-size:13px; } .mobile-nav a:hover { color:var(--text); background:#ffffff0a; } .solutions { padding:100px 0 110px; } .section-heading h2, .outcomes-copy h2, .contact-copy h2 { font-size:clamp(40px,12vw,54px); } .services-grid { grid-template-columns:1fr; margin-top:48px; } .service-card-wide { grid-column:auto; } .service-card { min-height:330px; } .file-stack, .chat-preview { display:none; } .analytics-card { border-radius:20px; padding:20px; } .analytics-stats { gap:8px; } .analytics-stats div { padding:0 8px; } .analytics-stats strong { font-size:18px; } .roi-section { padding-block:90px; } .roi-card { grid-template-columns:1fr; gap:40px; padding:28px 22px; } .roi-results { grid-column:auto; grid-template-columns:1fr 1fr; } .roi-results .roi-highlight { grid-column:span 2; } .method { padding-bottom:105px; } .method-grid { margin-top:48px; } .dashboard-feature { border-radius:24px; width:calc(100% - 20px); margin-bottom:105px; padding:42px 0 0 26px; } .dashboard-feature-copy { padding-right:26px; } .dashboard-feature-copy .button { width:100%; } .dashboard-mock { transform-origin:100% 100%; min-width:590px; height:380px; margin-top:-15px; transform:translate(155px)scale(.88); } .security-inner { grid-template-columns:53px 1fr; gap:20px; } .security-icon { width:50px; height:50px; } .security-inner h3 { font-size:22px; } .security-inner>p, .gdpr-badge { grid-column:1/-1; } .faq-section { padding-block:100px; } .faq-list summary { min-height:75px; font-size:13px; } .contact-inner { padding-block:95px; } .contact-form { padding:22px; } .form-row { grid-template-columns:1fr; } .footer-main { flex-direction:column; gap:45px; } .footer-links { gap:55px; } .footer-bottom { flex-direction:column; gap:10px; } } /* ===== 18. DASHBOARD DIMOSTRATIVA ================================================ */ .dash-app { --dash-bg:#06080d; --dash-panel:#0e121b; --dash-panel-2:#11161f; --dash-line:#788baa24; background:var(--dash-bg); color:#f2f6fc; min-height:100vh; font-family:var(--font-body); grid-template-columns:228px 1fr; display:grid; } .dash-sidebar { z-index:40; border-right:1px solid var(--dash-line); background:#080b11; flex-direction:column; height:100vh; padding:25px 17px 17px; display:flex; position:sticky; top:0; } .dash-sidebar-brand { justify-content:space-between; align-items:center; height:40px; padding:0 8px; display:flex; } .dash-sidebar-brand .lux-logo { transform-origin:0; } .dash-demo-tag { color:#8fc97c; font-family:var(--font-mono); letter-spacing:.08em; background:#a5ff770b; border:1px solid #a5ff772b; border-radius:99px; padding:4px 6px; font-size:6px; } .dash-workspace { border:1px solid var(--dash-line); color:#dbe5dd; text-align:left; cursor:pointer; background:#ffffff05; border-radius:12px; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; width:100%; height:60px; margin-top:23px; padding:8px; display:grid; } .dash-workspace>span:first-child { background:var(--gradient); color:#08100a; width:34px; height:34px; font-family:var(--font-mono); border-radius:9px; place-items:center; font-size:9px; font-weight:700; display:grid; } .dash-workspace>span:last-child { color:#5d6b61; font-size:11px; } .dash-nav { gap:5px; margin-top:30px; display:grid; } .dash-nav>small { color:#475349; font-family:var(--font-mono); letter-spacing:.13em; margin:0 10px 9px; font-size:6px; } .dash-nav button, .dash-sidebar-bottom>a { color:#718078; text-align:left; cursor:pointer; background:0 0; border:0; border-radius:9px; grid-template-columns:20px 1fr auto; align-items:center; gap:8px; width:100%; min-height:42px; padding:0 10px; font-size:10px; transition:all .18s; display:grid; } .dash-nav button:hover, .dash-sidebar-bottom>a:hover { color:#b9c7bd; background:#ffffff06; } .dash-nav button.active { color:#e3eee6; box-shadow:inset 2px 0 0 var(--green); background:linear-gradient(90deg,#6ce8ea12,#a5ff770d); } .dash-nav button svg { color:#68766d; } .dash-nav button.active svg { color:var(--green); } .dash-nav button em { color:#839087; min-width:17px; height:17px; font-family:var(--font-mono); background:#ffffff0a; border-radius:99px; place-items:center; padding:0 5px; font-size:6px; font-style:normal; display:grid; } .dash-sidebar-bottom { border-top:1px solid var(--dash-line); margin-top:auto; padding-top:10px; } .dash-sidebar-bottom>a svg { transform:rotate(-135deg); } .dash-user { border-top:1px solid var(--dash-line); grid-template-columns:31px 1fr 7px; align-items:center; gap:9px; margin-top:13px; padding:16px 7px 0; display:grid; } .dash-user>span { color:#99d887; width:31px; height:31px; font-family:var(--font-mono); background:#162019; border-radius:9px; place-items:center; font-size:8px; display:grid; } .dash-user strong, .dash-user small { display:block; } .dash-user strong { font-size:9px; } .dash-user small { color:#58655c; margin-top:3px; font-size:7px; } .dash-user i { background:var(--green); border-radius:50%; width:5px; height:5px; } .dash-main { min-width:0; } .dash-mobile-head { display:none; } .dash-topbar { border-bottom:1px solid var(--dash-line); z-index:25; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); background:#070b08e0; justify-content:space-between; align-items:center; height:65px; padding:0 30px; display:flex; position:sticky; top:0; } .dash-breadcrumb { color:#59665d; align-items:center; gap:9px; font-size:9px; display:flex; } .dash-breadcrumb i { color:#343e37; font-style:normal; } .dash-breadcrumb strong { color:#8b998f; font-weight:500; } .dash-top-actions { align-items:center; gap:8px; display:flex; } .system-online { color:#708078; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; align-items:center; gap:6px; margin-left:5px; font-size:6px; display:flex; } .system-online i { background:var(--green); border-radius:50%; width:5px; height:5px; box-shadow:0 0 8px #a5ff7780; } .dash-content { width:min(1440px,100%); margin:0 auto; padding:34px 31px 45px; } .dash-page-head { justify-content:space-between; align-items:end; gap:30px; margin-bottom:26px; display:flex; } .dash-page-head p { color:#647268; margin:0 0 7px; font-size:9px; } .dash-page-head h1 { font-family:var(--font-display); letter-spacing:-.035em; margin:0; font-size:32px; font-weight:550; } .dash-page-actions { align-items:center; gap:8px; display:flex; } .dash-page-actions select, .dash-page-actions button { border:1px solid var(--dash-line); color:#88978d; cursor:pointer; background:#ffffff05; border-radius:8px; align-items:center; gap:7px; height:35px; padding:0 11px; font-size:8px; display:flex; } .dash-page-actions select { appearance:none; background-image:linear-gradient(45deg,#0000 50%,#6c7a71 50%),linear-gradient(135deg,#6c7a71 50%,#0000 50%); background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px; background-repeat:no-repeat; background-size:4px 4px,4px 4px; padding-right:30px; } .dash-page-actions select option { background:#0c120e; } .dash-page-actions .dash-primary-action { background:var(--green); color:#071008; border-color:#a5ff772e; font-weight:600; } .dash-kpi-grid { grid-template-columns:repeat(4,1fr); gap:11px; display:grid; } .dash-kpi-grid article { border:1px solid var(--dash-line); background:var(--dash-panel); border-radius:14px; min-height:132px; padding:16px; } .dash-kpi-head { justify-content:space-between; align-items:center; display:flex; } .dash-kpi-head>span { color:#6d7b72; font-size:8px; } .dash-kpi-head>i { color:#77d9d5; background:#6ce8ea0d; border-radius:8px; place-items:center; width:29px; height:29px; font-style:normal; display:grid; } .dash-kpi-grid article>strong { font-family:var(--font-display); letter-spacing:-.035em; margin-top:10px; font-size:27px; line-height:1; display:block; } .dash-kpi-foot { align-items:center; gap:6px; margin-top:13px; display:flex; } .dash-kpi-foot em { color:#82c887; font-family:var(--font-mono); background:#a5ff770f; border-radius:99px; padding:3px 5px; font-size:6px; font-style:normal; } .dash-kpi-foot span { color:#4e5b52; font-size:6px; } .dash-overview-grid { grid-template-columns:1.65fr .75fr; gap:11px; margin-top:11px; display:grid; } .dash-panel { border:1px solid var(--dash-line); background:var(--dash-panel); border-radius:15px; } .dash-panel-head { justify-content:space-between; align-items:flex-start; min-height:55px; display:flex; } .dash-panel-head h2 { font-family:var(--font-display); letter-spacing:-.02em; margin:0; font-size:14px; font-weight:550; } .dash-panel-head p { color:#56635a; margin:5px 0 0; font-size:7px; } .dash-performance, .dash-agents, .dash-activity, .dash-today { padding:17px 18px; } .chart-legend { color:#647168; gap:12px; font-size:6px; display:flex; } .chart-legend span { align-items:center; gap:5px; display:flex; } .chart-legend i { background:var(--cyan); width:13px; height:2px; } .chart-legend span:last-child i { background:var(--green); opacity:.7; } .dash-big-chart { grid-template-columns:27px 1fr; height:254px; display:grid; position:relative; } .chart-axis { color:#465248; font-family:var(--font-mono); flex-direction:column; justify-content:space-between; padding-bottom:5px; font-size:5px; display:flex; } .dash-big-chart svg { width:100%; height:224px; overflow:visible; } .dash-chart-labels { color:#465248; font-family:var(--font-mono); justify-content:space-between; font-size:5px; display:flex; position:absolute; bottom:0; left:27px; right:0; } .agent-list { display:grid; } .agent-list>div { border-top:1px solid var(--dash-line); grid-template-columns:31px 1fr auto; align-items:center; gap:9px; min-height:61px; display:grid; } .agent-symbol { color:#79867e; background:#ffffff08; border-radius:8px; place-items:center; width:29px; height:29px; display:grid; } .agent-symbol.online { color:var(--green); background:#a5ff770e; } .agent-list strong, .agent-list small { display:block; } .agent-list strong { font-size:8px; font-weight:550; } .agent-list small { color:#526057; margin-top:4px; font-size:6px; } .agent-list em { color:#708077; font-family:var(--font-mono); font-size:6px; font-style:normal; } .dash-bottom-grid { grid-template-columns:1.65fr .75fr; gap:11px; margin-top:11px; display:grid; } .activity-list>div { border-top:1px solid var(--dash-line); grid-template-columns:30px 1fr auto; align-items:center; gap:9px; min-height:51px; display:grid; } .activity-icon { color:#8ed67f; background:#a5ff770b; border-radius:8px; place-items:center; width:28px; height:28px; display:grid; } .activity-icon.warn { color:#eba268; background:#ffb1630f; } .activity-list strong, .activity-list small { display:block; } .activity-list strong { font-size:8px; } .activity-list small { color:#536058; margin-top:4px; font-size:6px; } .activity-list time { color:#56645a; font-family:var(--font-mono); font-size:6px; } .dash-today { position:relative; } .today-score { place-items:center; height:117px; display:grid; position:relative; } .today-score svg { width:100px; height:100px; } .today-score>div { flex-direction:column; justify-content:center; align-items:center; display:flex; position:absolute; inset:0; } .today-score strong { font-family:var(--font-display); font-size:21px; } .today-score span { color:#59665d; margin-top:2px; font-size:6px; } .today-stats { border-top:1px solid var(--dash-line); grid-template-columns:repeat(3,1fr); padding-top:14px; display:grid; } .today-stats div { text-align:center; border-right:1px solid var(--dash-line); } .today-stats div:last-child { border:0; } .today-stats span, .today-stats strong { display:block; } .today-stats span { color:#536057; font-size:6px; } .today-stats strong { margin-top:5px; font-size:9px; } /* .dash-overlay: attualmente inutilizzato nel markup, ma intenzionalmente preservato. E' il backdrop previsto per la sidebar off-canvas della dashboard, pianificato nel Gruppo 5 (chiusura con tap-fuori ed Escape). Rimuoverlo qui significherebbe doverlo riscrivere subito dopo. */ .dash-overlay { display:none; } /* ===== 19. RESPONSIVE DELLA DASHBOARD E GLOBALE ================================== */ @media (min-width:1500px) { .dash-app { grid-template-columns:250px 1fr; } .dash-content { padding-inline:40px; } } @media (max-width:1100px) { .dash-kpi-grid { grid-template-columns:repeat(2,1fr); } .dash-overview-grid, .dash-bottom-grid { grid-template-columns:1fr; } } @media (max-width:820px) { .dash-app { padding-top:57px; display:block; } .dash-mobile-head { border-bottom:1px solid var(--dash-line); z-index:55; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); background:#06080df2; justify-content:space-between; align-items:center; height:57px; padding:0 16px; display:flex; position:fixed; inset:0 0 auto; } .dash-mobile-head button { border:1px solid var(--dash-line); color:#9ba99f; background:0 0; border-radius:8px; width:34px; height:34px; } .dash-sidebar { width:228px; transition:transform .25s; position:fixed; top:0; left:0; transform:translate(-100%); } .dash-sidebar-open { transform:translate(0); } .dash-overlay { z-index:35; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); background:#00000085; border:0; display:block; position:fixed; inset:0; } .dash-sidebar { z-index:60; } .dash-topbar { height:52px; padding-inline:16px; top:57px; } .dash-breadcrumb { display:none; } .dash-top-actions { justify-content:flex-end; width:100%; } .system-online { display:none; } .dash-content { padding:27px 16px 35px; } .dash-page-head { flex-direction:column; align-items:flex-start; } .dash-page-actions { width:100%; overflow-x:auto; } .dash-page-actions select, .dash-page-actions button { flex:none; } } @media (max-width:620px) { .dash-kpi-grid { grid-template-columns:1fr 1fr; gap:8px; } .dash-kpi-grid article { min-height:124px; padding:14px; } .dash-kpi-foot span, .chart-legend { display:none; } .dash-performance, .dash-agents, .dash-activity, .dash-today { padding:15px; } .dash-overview-grid, .dash-bottom-grid { gap:8px; margin-top:8px; } .dash-page-actions button:not(.dash-primary-action) { font-size:0; } .dash-page-actions button svg { width:16px; } } @media (max-width:680px) { :root { --line:#dcffe926; --line-bright:#aeffcf47; } html { scroll-padding-top:78px; } body { overflow-x:clip; } #soluzioni, #metodo, #risultati, #contatti { scroll-margin-top:78px; } .site-header { width:calc(100% - 24px); height:calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 10px 0 14px; -webkit-backdrop-filter:blur(20px); background:#06080deb; border-radius:20px; margin:8px 12px 0; position:sticky; top:8px; } .site-header .lux-logo { height:34px; } .site-header .lux-mark { width:29px; height:29px; } .site-header .lux-wordmark { width:88px; height:23px; } .menu-button { flex:0 0 44px; width:44px; height:44px; } .mobile-nav { top:calc(68px + env(safe-area-inset-top)); border-radius:18px; padding:8px; left:0; right:0; } .mobile-nav a { align-items:center; min-height:48px; padding:0 14px; font-size:15px; display:flex; } .ambient-one { filter:blur(85px); width:330px; height:330px; top:-80px; right:-180px; } .ambient-two { width:260px; height:260px; top:690px; left:-180px; } .hero { gap:34px; width:calc(100% - 32px); padding:38px 0 66px; } .eyebrow, .section-kicker { letter-spacing:.09em; gap:8px; font-size:10px; line-height:1.45; } .hero h1 { letter-spacing:-.055em; text-wrap:balance; max-width:100%; margin:20px 0; font-size:clamp(44px,13.4vw,58px); line-height:.98; } .hero-lead { color:#afbeb4; font-size:16px; line-height:1.62; } .hero-actions { gap:10px; margin-top:28px; } .button { text-align:center; min-height:56px; padding-inline:19px; font-size:14px; line-height:1.2; } .hero-proof { color:#94a39a; gap:12px; margin-top:25px; font-size:12px; } .hero-proof svg { width:16px; height:16px; } .hero-visual { border-radius:22px; width:100%; padding:12px; box-shadow:0 28px 65px #0006; } .visual-topline { height:30px; } .live-pill { padding:5px 7px; font-size:7px; } .visual-heading { padding:13px 7px 18px; } .visual-heading p { font-size:8px; } .visual-heading h2 { font-size:19px; } .visual-stat { font-size:18px; } .flow-node { grid-template-columns:34px 1fr auto; gap:10px; min-height:64px; padding:0 10px; } .flow-node>:last-child { display:flex; } .node-status { display:none!important; } .node-icon { width:33px; height:33px; } .flow-node strong { font-size:11px; } .flow-node small { font-size:9px; } .flow-line { height:15px; } .visual-footer { margin-top:12px; padding:15px 7px 5px; } .visual-footer strong { font-size:23px; } .visual-footer span { font-size:9px; line-height:1.4; } .trust-strip { gap:20px; width:calc(100% - 32px); padding:23px 0; } .trust-strip>p { white-space:normal; font-size:9px; } .integration-list { grid-template-columns:1fr 1fr; gap:15px 18px; width:100%; display:grid; } .integration-list span { font-size:12px; } .section-shell { width:calc(100% - 32px); } .section-heading, .outcomes-inner, .faq-section, .contact-inner { gap:30px; } .section-heading h2, .outcomes-copy h2, .roi-copy h2, .dashboard-feature-copy h2, .faq-title h2, .contact-copy h2 { letter-spacing:-.048em; text-wrap:balance; margin-top:18px; font-size:clamp(37px,10.6vw,47px); line-height:1.03; } .section-heading>p, .method-heading>p, .outcomes-copy>p, .contact-copy>p, .dashboard-feature-copy p { color:#9eada3; font-size:15px; line-height:1.7; } .solutions { padding:92px 0 98px; } .services-grid { gap:12px; margin-top:38px; } .service-card { border-radius:20px; min-height:280px; padding:22px; } .service-icon { width:45px; height:45px; } .service-number { font-size:10px; } .service-copy h3 { margin-top:34px; font-size:26px; line-height:1.12; } .service-copy p { color:#98a79d; font-size:14px; line-height:1.65; } .service-meta { margin-top:23px; font-size:9px; } .outcomes-inner { padding-block:92px; } .outcome-points { gap:5px; margin-top:28px; } .outcome-points span { color:#a9b7ae; min-height:57px; font-size:13px; line-height:1.45; } .analytics-card { border-radius:20px; padding:20px 16px; } .analytics-head span { font-size:10px; } .analytics-head strong { font-size:28px; } .analytics-head .demo-label { padding:6px; font-size:6px; } .analytics-stats { gap:0; margin-top:18px; padding-top:17px; } .analytics-stats div { padding:0 8px; } .analytics-stats span { min-height:25px; font-size:9px; line-height:1.35; } .analytics-stats strong { font-size:20px; } .analytics-stats em { font-size:7px; } .roi-section { padding-block:78px; } .roi-card { border-radius:22px; gap:32px; padding:28px 20px; } .roi-copy p { color:#98a79d; font-size:14px; line-height:1.65; } .roi-controls { gap:29px; } .roi-controls label>span { color:#a9b6ad; font-size:13px; } .roi-controls label strong { font-size:14px; } .roi-controls input[type=range] { height:5px; margin-top:17px; } .roi-controls input[type=range]::-webkit-slider-thumb { border-width:5px; width:23px; height:23px; } .roi-results { gap:8px; } .roi-results>div { padding:15px 13px; } .roi-results span { min-height:31px; font-size:10px; } .roi-results strong { font-size:23px; } .roi-highlight strong { font-size:30px; } .roi-highlight>small { color:#819087; font-size:9px; line-height:1.4; } .method { padding-bottom:96px; } .method-grid { margin-top:38px; } .method-grid article, .method-grid article+article { padding:27px 0 30px 24px; } .method-number { font-size:10px; } .method-grid h3 { margin-top:24px; font-size:25px; } .method-grid p { color:#98a69d; font-size:14px; line-height:1.65; } .method-grid small { margin-top:22px; font-size:9px; } .dashboard-feature { border-radius:23px; width:calc(100% - 32px); margin-bottom:96px; padding:31px 20px 19px; display:block; } .dashboard-feature-copy { padding:0; } .dashboard-feature-copy p { margin:20px 0 25px; } .dashboard-mock { border-radius:17px; grid-template-columns:1fr; width:100%; min-width:0; height:auto; margin:30px 0 0; transform:none; } .dashboard-mock aside { display:none; } .mock-main { padding:18px 15px; } .mock-head strong { font-size:18px; } .mock-head>span { font-size:7px; } .mock-kpis { gap:6px; margin-top:18px; } .mock-kpis div { padding:11px 9px; } .mock-kpis span { min-height:22px; font-size:7px; line-height:1.35; } .mock-kpis strong { font-size:17px; } .mock-bottom { grid-template-columns:1fr; height:auto; } .mock-chart { height:150px; padding:23px 14px 15px; } .mock-agents { display:none; } .security-inner { padding-block:37px; } .security-inner h3 { font-size:24px; line-height:1.25; } .security-inner>p { color:#9caaa1; font-size:14px; line-height:1.65; } .gdpr-badge { padding:9px 12px; font-size:9px; } .faq-section { padding-block:92px; } .faq-list summary { color:#d8e2db; min-height:76px; font-size:15px; line-height:1.4; } .faq-list summary i { flex:0 0 31px; } .faq-list details p { color:#97a69c; margin:0 42px 25px 0; font-size:14px; line-height:1.7; } .contact-inner { padding-block:88px; } .contact-promise { margin-top:28px; } .contact-booking { width:100%; margin-top:22px; } .contact-email { margin-top:18px; font-size:13px; } .contact-promise span { color:#9baaa0; font-size:13px; } .contact-form { border-radius:20px; gap:17px; min-height:0; padding:20px; } .contact-form label { color:#a6b3aa; gap:8px; font-size:13px; } .contact-form input, .contact-form textarea, .contact-form select { min-height:52px; padding:14px; font-size:16px; } .contact-form textarea { min-height:122px; } .form-note { color:#849188; text-align:center; font-size:10px; line-height:1.45; } .site-footer { padding-top:58px; padding-bottom:calc(105px + env(safe-area-inset-bottom)); } .footer-main { gap:40px; padding-bottom:45px; } .footer-main>div:first-child p { color:#89978e; font-size:14px; } .footer-links { justify-content:space-between; gap:25px; width:100%; } .footer-links strong { font-size:9px; } .footer-links a { align-items:center; min-height:30px; font-size:13px; display:flex; } .footer-bottom { gap:9px; font-size:8px; line-height:1.5; } } @media (max-width:420px) { .hero h1 { font-size:clamp(43px,13.2vw,54px); } .flow-node { grid-template-columns:32px 1fr auto; } .processing { padding-right:2px; } .analytics-head .demo-label { display:none; } .roi-results { grid-template-columns:1fr; } .roi-results .roi-highlight { grid-column:auto; } .mock-kpis { grid-template-columns:1fr 1fr; } .mock-kpis div:last-child { grid-column:1/-1; } } @media (max-width:820px) { .dash-app { min-height:100dvh; padding-top:calc(62px + env(safe-area-inset-top)); } .dash-mobile-head { height:calc(62px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0; } .dash-mobile-head button { border-radius:11px; width:44px; height:44px; font-size:18px; } .dash-mobile-actions { align-items:center; gap:8px; display:flex; } .dash-sidebar { width:min(82vw,300px); padding:calc(22px + env(safe-area-inset-top)) 17px calc(17px + env(safe-area-inset-bottom)); } .dash-workspace { min-height:66px; } .dash-nav>small { font-size:8px; } .dash-nav button, .dash-sidebar-bottom>button, .dash-sidebar-bottom>a { min-height:48px; font-size:13px; } .dash-nav button em { min-width:21px; height:21px; font-size:8px; } .dash-user strong { font-size:12px; } .dash-user small { font-size:10px; } .dash-topbar { display:none; } .dash-content { padding:25px 14px calc(40px + env(safe-area-inset-bottom)); } .dash-page-head { gap:18px; margin-bottom:22px; } .dash-page-head p { color:#87958c; font-size:13px; line-height:1.45; } .dash-page-head h1 { font-size:30px; } .dash-page-actions { padding-bottom:2px; } .dash-page-actions select, .dash-page-actions button { height:44px; padding-inline:13px; font-size:11px; } } @media (max-width:620px) { .dash-top-actions { justify-content:flex-end; } .dash-kpi-grid { gap:8px; } .dash-kpi-grid article { min-height:139px; padding:15px; } .dash-kpi-head>span { color:#96a39a; max-width:90px; font-size:11px; line-height:1.35; } .dash-kpi-head>i { width:34px; height:34px; } .dash-kpi-grid article>strong { margin-top:15px; font-size:29px; } .dash-kpi-foot { margin-top:12px; } .dash-kpi-foot em { padding:4px 6px; font-size:8px; } .dash-panel { border-radius:14px; } .dash-performance, .dash-agents, .dash-activity, .dash-today { padding:16px; } .dash-panel-head { min-height:62px; } .dash-panel-head h2 { font-size:18px; } .dash-panel-head p { color:#78867d; margin-top:6px; font-size:11px; } .dash-panel-head button { min-height:34px; font-size:10px; } .dash-big-chart { grid-template-columns:30px 1fr; height:242px; } .dash-big-chart svg { height:210px; } .chart-axis, .dash-chart-labels { font-size:7px; } .dash-chart-labels { left:30px; } .agent-list>div { grid-template-columns:38px 1fr auto; gap:11px; min-height:73px; } .agent-symbol { width:36px; height:36px; } .agent-list strong { font-size:12px; } .agent-list small { color:#77857c; margin-top:5px; font-size:10px; } .agent-list em { font-size:9px; } .activity-list>div { grid-template-columns:38px 1fr auto; gap:10px; min-height:69px; } .activity-icon { width:36px; height:36px; } .activity-list strong { font-size:12px; } .activity-list small { color:#77847c; margin-top:5px; font-size:9px; line-height:1.35; } .activity-list time { font-size:8px; } .today-score { height:145px; } .today-score svg { width:118px; height:118px; } .today-score strong { font-size:25px; } .today-score span { font-size:9px; } .today-stats { padding-top:16px; } .today-stats span { font-size:9px; } .today-stats strong { font-size:13px; } } /* ===== 20. COMPONENTI AGGIUNTI IN SECONDA BATTUTA E PAGINE INTERNE =============== */ :focus-visible { outline:2px solid var(--cyan); outline-offset:3px; } .visual-disclaimer { color:#526158; font-family:var(--font-mono); text-align:center; text-transform:uppercase; letter-spacing:.05em; margin:12px 8px 0; font-size:7px; line-height:1.45; } .demo-mini-stats { align-self:center; gap:7px; display:grid; } .demo-mini-stats span { color:#728078; justify-content:space-between; align-items:center; gap:10px; display:flex; } .demo-mini-stats b { color:#a5ff77; font-family:var(--font-display); font-size:15px; } .module-tag { color:#72bdb7; width:fit-content; font-family:var(--font-mono); letter-spacing:.08em; background:#6ce8ea0a; border:1px solid #6ce8ea24; border-radius:999px; margin-top:20px; padding:5px 8px; font-size:6px; } .service-card-featured { border-color:#a5ff773d; box-shadow:inset 0 0 60px #a5ff7706; } .service-card-featured .module-tag { color:#9bd88c; background:#a5ff770d; border-color:#a5ff7733; } .pilot-comparison { grid-template-columns:1fr 38px 1fr; align-items:stretch; gap:10px; margin-top:29px; display:grid; } .pilot-comparison>div:not(.comparison-arrow) { border:1px solid var(--line); background:#ffffff05; border-radius:14px; min-height:112px; padding:15px; } .pilot-comparison span { color:#75847a; min-height:29px; font-size:8px; line-height:1.45; display:block; } .pilot-comparison strong { font-family:var(--font-display); letter-spacing:-.04em; margin-top:8px; font-size:30px; display:block; } .pilot-comparison i { color:#5d6a62; font-family:var(--font-mono); text-transform:uppercase; margin-top:5px; font-size:6px; font-style:normal; display:block; } .pilot-comparison>div:nth-child(3n) { background:#a5ff7709; border-color:#a5ff772b; } .pilot-comparison>div:nth-child(3n) strong { color:#a5ff77; } .comparison-arrow { color:#5d6b62; place-items:center; font-size:17px; display:grid; } .analytics-note { border-top:1px solid var(--line); color:#65736a; margin:20px 0 0; padding-top:17px; font-size:8px; line-height:1.6; } .roi-results>.button { grid-column:1/-1; width:100%; min-height:46px; } .scenarios-preview { padding:0 0 145px; } .scenario-grid { grid-template-columns:repeat(3,1fr); gap:13px; margin-top:58px; display:grid; } .scenario-grid article { border:1px solid var(--line); background:linear-gradient(155deg,#111a14c2,#070b09f0); border-radius:21px; flex-direction:column; min-height:265px; padding:25px; display:flex; } .scenario-grid article>span { color:#6c7a71; font-family:var(--font-mono); letter-spacing:.08em; font-size:7px; } .scenario-grid h3 { font-family:var(--font-display); letter-spacing:-.035em; margin:auto 0 12px; font-size:27px; font-weight:550; } .scenario-grid p { color:#829087; margin:0; font-size:12px; line-height:1.7; } .scenario-grid small { border-top:1px solid var(--line); color:#5d6b62; font-family:var(--font-mono); margin-top:20px; padding-top:14px; font-size:7px; } .text-link { color:#9ddbd3; align-items:center; gap:8px; width:fit-content; margin-top:27px; font-size:12px; display:flex; } .form-intro { padding-bottom:5px; } .form-intro>span { color:#708078; font-family:var(--font-mono); letter-spacing:.09em; font-size:7px; } .form-intro h3 { font-family:var(--font-display); margin:9px 0 4px; font-size:25px; font-weight:550; } .form-intro p { color:#6e7c73; margin:0; font-size:10px; } .honeypot { clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; position:absolute!important; overflow:hidden!important; } .contact-form .privacy-check { grid-template-columns:none; align-items:flex-start; gap:9px; line-height:1.45; display:flex; } .contact-form .privacy-check input { width:16px; height:16px; min-height:16px; accent-color:var(--green); flex:0 0 16px; margin:1px 0 0; padding:0; } .privacy-check a { color:#9ddbd3; text-underline-offset:2px; text-decoration:underline; } .footer-legal-id { color:#75837a; flex-wrap:wrap; gap:8px 14px; margin-top:19px; font-size:10px; display:flex; } .footer-legal-id strong { color:#a5b1a9; font-weight:550; } .footer-legal-id a { color:#8fc9c3; } .inner-page { isolation:isolate; background-color:var(--bg); background-image:linear-gradient(#7087a409 1px,#0000 1px),linear-gradient(90deg,#7087a409 1px,#0000 1px); background-size:76px 76px; min-height:100vh; position:relative; overflow:hidden; } .inner-hero { border-bottom:1px solid var(--line); padding:110px 0 92px; } .inner-hero h1 { max-width:980px; font-family:var(--font-display); letter-spacing:-.06em; margin:25px 0 22px; font-size:clamp(55px,7.4vw,96px); font-weight:550; line-height:.98; } .inner-hero>p { color:#9caaa1; max-width:780px; margin:0; font-size:18px; line-height:1.75; } .inner-content { padding:0 0 55px; } .feature-intro-grid { grid-template-columns:1.15fr .85fr; align-items:center; gap:70px; padding:100px 0; display:grid; } .feature-lead-card>span, .content-heading>span, .page-cta>div>span, .about-manifesto span, .founder-card>div>span, .simulation-disclaimer strong, .scenario-detail header>span, .demo-callout>div>span { color:#708078; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; font-size:8px; } .feature-lead-card h2, .content-heading h2, .about-manifesto h2, .demo-callout h2 { font-family:var(--font-display); letter-spacing:-.05em; margin:18px 0 19px; font-size:clamp(38px,4.8vw,65px); font-weight:550; line-height:1.04; } .feature-lead-card p, .content-heading p, .about-manifesto p, .demo-callout p { color:#8d9b92; margin:0; font-size:14px; line-height:1.8; } .feature-facts { grid-template-columns:1fr 1fr; gap:10px; display:grid; } .feature-facts div { border:1px solid var(--line); background:#ffffff05; border-radius:17px; flex-direction:column; justify-content:flex-end; min-height:142px; padding:20px; display:flex; } .feature-facts strong { font-family:var(--font-display); font-size:20px; font-weight:550; } .feature-facts span { color:#75837a; margin-top:7px; font-size:10px; line-height:1.5; } .content-section { border-top:1px solid var(--line); padding:105px 0; } .content-heading { max-width:760px; } .content-heading h2 { font-size:clamp(38px,5vw,67px); } .process-list { grid-template-columns:repeat(2,1fr); gap:0 55px; margin:65px 0 0; padding:0; list-style:none; display:grid; } .process-list li { border-top:1px solid var(--line); grid-template-columns:45px 1fr; gap:18px; min-height:195px; padding:28px 0; display:grid; } .process-list b { color:#5e6d63; font-family:var(--font-mono); font-size:9px; } .process-list h3 { font-family:var(--font-display); margin:0 0 10px; font-size:24px; font-weight:550; } .process-list p { color:#7e8d84; margin:0; font-size:12px; line-height:1.75; } .two-column-content { grid-template-columns:1fr .82fr; gap:85px; display:grid; } .check-list, .boundary-card ul, .scenario-columns ul { gap:12px; margin:35px 0 0; padding:0; list-style:none; display:grid; } .check-list li, .boundary-card li, .scenario-columns li { color:#9aa79f; padding-left:24px; font-size:12px; line-height:1.6; position:relative; } .check-list li:before, .boundary-card li:before, .scenario-columns li:before { content:"✓"; color:var(--green); font-size:10px; position:absolute; left:0; } .boundary-card { background:#ffb16309; border:1px solid #ffb1632e; border-radius:23px; padding:35px; } .boundary-card>span { color:#c39269; font-family:var(--font-mono); letter-spacing:.09em; font-size:7px; } .boundary-card h3 { font-family:var(--font-display); margin:16px 0 0; font-size:28px; font-weight:550; line-height:1.15; } .boundary-card li:before { content:"—"; color:#c39269; } .integration-boxes { grid-template-columns:repeat(4,1fr); gap:9px; margin-top:43px; display:grid; } .integration-boxes span { border:1px solid var(--line); color:#9aa79f; text-align:center; background:#ffffff05; border-radius:13px; place-items:center; min-height:78px; padding:10px; font-size:11px; display:grid; } .demo-callout { grid-template-columns:1fr auto; align-items:center; gap:50px; display:grid; } .demo-callout>div { max-width:760px; } .demo-callout .button { width:fit-content; } .simulation-disclaimer { background:#6ce8ea0a; border:1px solid #6ce8ea33; border-radius:18px; grid-template-columns:200px 1fr; align-items:start; gap:30px; margin:80px 0 0; padding:25px 28px; display:grid; } .simulation-disclaimer p { color:#8f9d94; margin:0; font-size:12px; line-height:1.7; } .principles-grid { /* Le colonne erano ridichiarate poco piu' avanti da una seconda regola .principles-grid, stessa specificita' e nessun @media in mezzo: qui resta il valore che vinceva la cascade. */ grid-template-columns:repeat(3,1fr); gap:11px; margin-top:55px; display:grid; } .principles-grid article { border:1px solid var(--line); background:#ffffff05; border-radius:18px; min-height:260px; padding:25px; } .principles-grid b { color:#5f6e64; font-family:var(--font-mono); font-size:8px; } .principles-grid h3 { font-family:var(--font-display); margin:80px 0 12px; font-size:23px; font-weight:550; line-height:1.15; } .principles-grid p { color:#7d8b82; margin:0; font-size:11px; line-height:1.7; } .page-cta { border:1px solid var(--line-bright); background:linear-gradient(135deg,#0c1912f5,#060b08f7); border-radius:27px; grid-template-columns:1fr auto; align-items:center; gap:55px; margin:80px 0 50px; padding:45px; display:grid; } .page-cta h2 { font-family:var(--font-display); letter-spacing:-.045em; margin:13px 0 8px; font-size:39px; font-weight:550; line-height:1.05; } .page-cta p { color:#85938a; max-width:630px; margin:0; font-size:12px; line-height:1.7; } .page-cta>div:last-child { flex-direction:column; gap:9px; display:flex; } .about-manifesto { grid-template-columns:.9fr 1.1fr; align-items:end; gap:80px; padding:100px 0; display:grid; } .about-manifesto h2 { font-size:clamp(40px,5.2vw,70px); } .founder-card { border-top:1px solid var(--line); grid-template-columns:190px 1fr; align-items:center; gap:50px; margin:100px 0 0; padding:100px 0; display:grid; } .founder-mark { width:170px; height:170px; color:var(--green); font-family:var(--font-display); background:linear-gradient(135deg,#6ce8ea1a,#a5ff7714); border:1px solid #a5ff7733; border-radius:40px; place-items:center; font-size:48px; display:grid; } .founder-card h2 { font-family:var(--font-display); letter-spacing:-.045em; margin:12px 0 10px; font-size:45px; font-weight:550; } .founder-card p { color:#8c9a91; max-width:650px; margin:0; font-size:13px; line-height:1.75; } .founder-card a, .founder-card small { color:#8fdad1; margin-top:17px; font-size:11px; display:inline-block; } .founder-card small { color:#68766d; margin-left:20px; } .scenario-detail-list { gap:24px; margin-top:70px; display:grid; } .scenario-detail { border:1px solid var(--line); background:linear-gradient(155deg,#0f1812d1,#070b09f7); border-radius:27px; padding:40px; } .scenario-detail header { max-width:850px; } .scenario-detail header small { color:#5f6d64; font-family:var(--font-mono); margin-left:15px; font-size:7px; } .scenario-detail header h2 { font-family:var(--font-display); letter-spacing:-.045em; margin:22px 0 13px; font-size:43px; font-weight:550; } .scenario-detail header p { color:#8c9a91; margin:0; font-size:13px; line-height:1.75; } .scenario-columns { grid-template-columns:repeat(3,1fr); gap:11px; margin-top:36px; display:grid; } .scenario-columns>div { border:1px solid var(--line); background:#ffffff05; border-radius:16px; min-height:240px; padding:23px; } .scenario-columns .scenario-result { background:#a5ff7709; border-color:#a5ff772b; } .scenario-columns h3 { color:#b2beb6; margin:0; font-size:11px; font-weight:600; } .scenario-columns ul { margin-top:22px; } .scenario-columns li { font-size:10px; } .scenario-detail footer { color:#627068; margin-top:24px; font-size:9px; line-height:1.6; } /* ===== 21. PAGINE LEGALI, RINGRAZIAMENTO E 404 =================================== */ .legal-document { max-width:900px; padding:85px 0 30px; } .legal-document section { border-bottom:1px solid var(--line); margin-bottom:38px; padding:0 0 38px; } .legal-document h2 { font-family:var(--font-display); letter-spacing:-.025em; margin:0 0 16px; font-size:28px; font-weight:550; } .legal-document h3 { margin:25px 0 8px; font-size:13px; font-weight:600; } .legal-document p { color:#9aa79f; margin:9px 0; font-size:13px; line-height:1.85; } .legal-document a { color:#8fdad1; text-underline-offset:3px; text-decoration:underline; } .legal-table, .cookie-table { border:1px solid var(--line); border-radius:15px; margin:25px 0; overflow:hidden; } .legal-table>div, .cookie-table>div { grid-template-columns:1.1fr .9fr 1.25fr 1fr; display:grid; } .legal-table span, .legal-table strong, .cookie-table span, .cookie-table strong { border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:#87958c; min-width:0; padding:15px; font-size:9px; line-height:1.55; } .legal-table strong, .cookie-table strong { color:#bcc8c0; font-weight:600; } .legal-table>div:last-child>*, .cookie-table>div:last-child>* { border-bottom:0; } .legal-table>div>:last-child, .cookie-table>div>:last-child { border-right:0; } .thanks-card, .not-found { text-align:center; max-width:830px; margin:0 auto; padding:100px 0 120px; } .thanks-card>span { background:var(--green); color:#061008; border-radius:50%; place-items:center; width:72px; height:72px; margin:0 auto; font-size:28px; display:grid; } .thanks-card h2 { font-family:var(--font-display); margin:28px 0 30px; font-size:44px; font-weight:550; } .thanks-card ol { text-align:left; gap:10px; max-width:580px; margin:0 auto 35px; padding:0; list-style:none; display:grid; } .thanks-card li { border:1px solid var(--line); border-radius:13px; grid-template-columns:28px 1fr; gap:10px; padding:16px; display:grid; } .thanks-card li b { color:var(--green); } .thanks-card li p { color:#8e9c93; margin:0; font-size:12px; line-height:1.6; } .thanks-card>div, .not-found>div { justify-content:center; gap:10px; display:flex; } .not-found { flex-direction:column; justify-content:center; align-items:center; min-height:600px; display:flex; } .not-found>span { color:var(--green); font-family:var(--font-mono); font-size:13px; } .not-found h1 { font-family:var(--font-display); letter-spacing:-.055em; margin:18px 0 12px; font-size:clamp(48px,7vw,82px); } .not-found p { color:#8d9b92; margin:0 0 28px; } .dash-demo-ribbon { color:#728078; background:#6ce8ea09; border-bottom:1px solid #6ce8ea26; align-items:center; gap:12px; min-height:40px; padding:0 31px; font-size:8px; display:flex; } .dash-demo-ribbon strong { color:#84d7cf; font-family:var(--font-mono); background:#6ce8ea14; border-radius:99px; padding:4px 7px; font-size:6px; } .dash-exit-link { border:1px solid var(--dash-line); color:#7f8d84; border-radius:8px; align-items:center; min-height:34px; padding:0 11px; font-size:8px; display:flex; } /* ===== 22. RESPONSIVE DELLE PAGINE INTERNE ======================================= */ @media (max-width:980px) { .integration-boxes { grid-template-columns:repeat(2,1fr); } .page-cta { grid-template-columns:1fr; } .page-cta>div:last-child { flex-direction:row; } .scenario-columns { grid-template-columns:1fr; } .scenario-columns>div { min-height:0; } } @media (max-width:820px) { .scenario-grid, .principles-grid { grid-template-columns:1fr; } .scenario-grid article, .principles-grid article { min-height:230px; } .feature-intro-grid, .two-column-content, .about-manifesto { grid-template-columns:1fr; gap:45px; } .demo-callout, .process-list { grid-template-columns:1fr; } .dash-demo-ribbon { padding:10px 14px; line-height:1.45; } } @media (max-width:680px) { .inner-hero { padding:72px 0 65px; } .inner-hero h1 { margin-top:20px; font-size:clamp(47px,14vw,67px); } .inner-hero>p { font-size:16px; line-height:1.7; } .feature-intro-grid { padding:75px 0; } .feature-facts { grid-template-columns:1fr; } .feature-facts div { min-height:115px; } .content-section { padding:78px 0; } .process-list { margin-top:45px; } .process-list li { min-height:0; } .boundary-card, .scenario-detail { border-radius:20px; padding:24px; } .integration-boxes { grid-template-columns:1fr 1fr; } .integration-boxes span { min-height:68px; font-size:10px; } .simulation-disclaimer { grid-template-columns:1fr; gap:10px; margin-top:55px; padding:20px; } .principles-grid article { min-height:220px; } .principles-grid h3 { margin-top:60px; } .page-cta { margin-top:55px; padding:27px 22px; } .page-cta h2 { font-size:34px; } .page-cta>div:last-child { flex-direction:column; } .about-manifesto, .founder-card { padding:75px 0; } .founder-card { grid-template-columns:1fr; gap:28px; } .founder-mark { border-radius:29px; width:120px; height:120px; } .founder-card h2 { font-size:38px; } .founder-card small { margin-left:0; display:block; } .scenario-detail header small { margin:8px 0 0; display:block; } .scenario-detail header h2 { font-size:35px; } .legal-document { padding-top:65px; } .legal-document h2 { font-size:25px; } .legal-document p { font-size:14px; line-height:1.75; } .legal-table>div, .cookie-table>div { border-bottom:1px solid var(--line); grid-template-columns:1fr; padding:10px 0; } .legal-table>div:last-child, .cookie-table>div:last-child { border-bottom:0; } .legal-table span, .legal-table strong, .cookie-table span, .cookie-table strong { border:0; padding:7px 14px; font-size:10px; } .thanks-card, .not-found { padding:75px 0 105px; } .thanks-card>div, .not-found>div, .footer-legal-id { flex-direction:column; } .pilot-comparison { grid-template-columns:1fr 28px 1fr; gap:6px; } .pilot-comparison>div:not(.comparison-arrow) { padding:12px; } .pilot-comparison strong { font-size:25px; } .scenarios-preview { padding-bottom:95px; } .scenario-grid { margin-top:42px; } .scenario-grid article { min-height:240px; } .form-intro h3 { font-size:27px; } .contact-form .privacy-check { flex-direction:row; font-size:12px; } .dash-demo-ribbon { margin-top:0; } } /* ========================================================================= LuxAI — livello di rifinitura (aggiunto dopo il foglio di stile originale). Nessuna regola qui sostituisce la grafica esistente: la consolida. ========================================================================= */ /* --- Stack tipografici resistenti ------------------------------------ Il display font si appoggiava solo ad "Arial Narrow": assente su Android, Linux e su molte configurazioni ChromeOS, dove il titolo collassava su system-ui perdendo la condensazione. Le alternative aggiunte mantengono la stessa larghezza ottica su tutte le piattaforme. */ body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* --- Accessibilità: salto al contenuto e focus visibile --------------- */ /* ===== 23. ACCESSIBILITA': SKIP LINK E FOCUS VISIBILE ============================ */ .skip-link { position:absolute; top:-100px; left:50%; transform:translateX(-50%); z-index:200; background:var(--gradient); color:#061018; border-radius:0 0 14px 14px; padding:12px 22px; font-size:13px; font-weight:650; transition:top .2s; } .skip-link:focus { top:0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:8px; } .contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible { outline-offset:1px; } /* --- Header sticky anche su desktop ---------------------------------- */ /* ===== 24. HEADER STICKY E ANCORE ================================================ */ @media (min-width:681px) { .site-header { position:sticky; top:14px; transition:background .28s ease,box-shadow .28s ease,border-color .28s ease; } .site-header.is-scrolled { background:#060a10f2; border-color:var(--line-bright); box-shadow:0 18px 60px #00000059; } } html { scroll-padding-top:calc(var(--header-h) + 18px); } [id] { scroll-margin-top:calc(var(--header-h) + 18px); } /* --- Barra di avanzamento lettura ------------------------------------ */ /* ===== 25. BARRA DI AVANZAMENTO LETTURA ========================================== */ .read-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; background:transparent; } .read-progress i { display:block; height:100%; width:0; background:var(--gradient); box-shadow:0 0 12px #00c2ff66; transition:width .1s linear; } @media (max-width:680px) { .read-progress { height:2px; } } /* --- Menu mobile: apertura/chiusura controllata ---------------------- */ /* ===== 26. MENU MOBILE: STATI ==================================================== */ .mobile-nav[hidden] { display:none; } @media (max-width:680px) { .mobile-nav:not([hidden]) { display:grid; animation:.22s cubic-bezier(.2,.7,.2,1) both reveal; } .mobile-nav a:last-child { background:var(--gradient); color:#061018; font-weight:650; margin-top:4px; justify-content:center; } } /* --- Rivelazione progressiva delle sezioni --------------------------- */ /* ===== 27. RIVELAZIONE ALLO SCROLL E MICRO-INTERAZIONI =========================== */ .js .on-scroll { opacity:0; transform:translateY(22px); } .js .on-scroll.is-visible { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); } /* --- Micro-interazioni sulle superfici ------------------------------- */ .service-card, .method-grid article, .scenario-grid article { transition:border-color .3s ease,background .3s ease,transform .3s ease; } .service-card:hover { transform:translateY(-3px); } .button { transition:transform .22s ease,filter .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease; } .button-primary:hover { transform:translateY(-2px); box-shadow:0 18px 50px #00c2ff33; } .button:active { transform:translateY(0); } .text-link { transition:color .2s ease,gap .2s ease; } .text-link:hover { color:var(--text); } .footer-links a, .footer-legal-id a { transition:color .2s ease; } /* --- Stati del modulo di contatto ------------------------------------ */ /* ===== 28. STATI DEL MODULO DI CONTATTO ========================================== */ .contact-form input:user-invalid, .contact-form textarea:user-invalid { border-color:#ff8b7a80; } .contact-form input:user-valid, .contact-form textarea:user-valid { border-color:#5af07a4d; } .form-submit[aria-busy="true"] { opacity:.72; pointer-events:none; } .form-error { color:#ffb3a6; background:#ff6a5214; border:1px solid #ff6a5233; border-radius:11px; padding:11px 13px; margin:0; font-size:11px; line-height:1.5; } .form-consent-note { color:#69776f; font-size:9px; line-height:1.6; margin:-4px 0 0; } .form-consent-note a { color:#9ddbd3; text-underline-offset:2px; text-decoration:underline; } /* --- Avviso tecnico: barra discreta ancorata al fondo ----------------- Il foglio originale lo rendeva come riquadro centrato alto oltre 200px, che su iPhone copriva la CTA primaria dell'hero rendendola non cliccabile e diventava l'elemento LCP della pagina. Qui diventa una barra bassa a piena larghezza: non e' un consent banner, resta puramente informativo. Lo spazio occupato viene riservato in fondo al documento (--notice-h) cosi' la barra non copre mai il footer. */ /* ===== 29. AVVISO TECNICO (BARRA COOKIE) ========================================= */ .cookie-notice[hidden] { display:none; } .cookie-notice { position:fixed; inset:auto 0 0 0; width:auto; transform:none; z-index:100; display:flex; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border:0; border-top:1px solid #6ce8ea3d; border-radius:0; background:#080d0af7; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 -10px 40px #0000006e; } .cookie-notice p { flex:1 1 auto; min-width:0; margin:0; color:#aab8ae; font-size:12px; line-height:1.4; text-wrap:pretty; } .cookie-notice p strong { display:inline; font-family:inherit; font-size:inherit; font-weight:650; color:var(--text); } .cookie-notice a { color:#9fe0d6; font-size:inherit; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; } .cookie-notice button { flex:none; width:auto; min-height:44px; min-width:44px; padding:0 17px; border:0; border-radius:999px; cursor:pointer; background:var(--green); color:#061008; font-size:12px; font-weight:650; } body.has-notice { padding-bottom:var(--notice-h,88px); } @media (min-width:681px) { .cookie-notice { justify-content:center; gap:20px; padding-inline:24px; } .cookie-notice p { flex:0 1 auto; max-width:84ch; } } /* --- Slider: traccia con riempimento e pollice anche su Firefox ------ Il foglio originale definiva solo ::-webkit-slider-thumb; su Firefox il controllo ricadeva sull'aspetto di sistema, fuori palette. */ /* ===== 30. CURSORI DELLA STIMA =================================================== */ .roi-controls input[type=range] { background:linear-gradient(90deg,var(--cyan),var(--green)) 0 0/var(--fill,100%) 100% no-repeat,#ffffff1a; cursor:pointer; } .roi-controls input[type=range]::-moz-range-thumb { background:var(--green); border:4px solid #0b140e; border-radius:50%; width:17px; height:17px; box-shadow:0 0 0 1px #a5ff7759; cursor:grab; } .roi-controls input[type=range]::-moz-range-track { background:transparent; height:3px; } .roi-controls input[type=range]::-webkit-slider-thumb { transition:transform .15s ease; } .roi-controls input[type=range]:active::-webkit-slider-thumb { transform:scale(1.12); } .roi-controls label { cursor:pointer; } .roi-controls label b, .roi-results b { font-weight:inherit; font-family:inherit; letter-spacing:inherit; } /* --- Coerenza tipografica dei titoli -------------------------------- */ /* ===== 31. TITOLI DISPLAY: BILANCIAMENTO ========================================= */ .hero h1, .section-heading h2, .outcomes-copy h2, .roi-copy h2, .dashboard-feature-copy h2, .faq-title h2, .contact-copy h2, .inner-hero h1 { text-wrap:balance; } .hero-lead, .section-heading>p, .inner-hero>p { text-wrap:pretty; } /* --- Nastro delle integrazioni: scorrimento fluido su mobile -------- */ @media (max-width:680px) { .integration-list { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .integration-list::-webkit-scrollbar { display:none; } } /* ===== 32. SELEZIONE, SCROLLBAR, REDUCED MOTION, STAMPA ===================== */ /* --- Selezione e scrollbar ------------------------------------------ */ @supports (scrollbar-color:auto) { html { scrollbar-color:#2a3a33 var(--bg); } } /* --- Rispetto delle preferenze di movimento ------------------------- */ @media (prefers-reduced-motion:reduce) { .js .on-scroll { opacity:1; transform:none; } .read-progress { display:none; } .service-card:hover, .button-primary:hover { transform:none; } } /* --- Stampa ---------------------------------------------------------- */ @media print { .site-header, .mobile-nav, .cookie-notice, .read-progress, .ambient, .hero-visual, .dashboard-mock, .skip-link { display:none!important; } body { background:#fff; color:#111; } main { background:none; } a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9px; color:#555; } } /* --- Dashboard: intestazione workspace ------------------------------ Il
annidato dentro