/* ============================================================ CLARAXIS THEME — Informativa IA (L. 132/2025, art. 13) Palette: inchiostro #16203A · ottone #B8924A · avorio #FBFAF8 Font: Spectral (titoli) · Space Grotesk (UI) · Inter (body) Rev.2: iconcine i/? neutre · hero+bottoni scuri alleggeriti · box "successo" riportato in palette. Cookieless. Caricato ULTIMO nel : prevale su inline e style-v2.css. Copre IT ed EN (css/ condivisa via symlink). ============================================================ */ /* ---------- Font self-hostati (css/fonts/) ---------- */ @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spectral-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')} /* ---------- Palette ---------- */ :root{ --paper:#FBFAF8; --paper-2:#F4F1EA; --panel:#FFFFFF; --ink:#16203A; --ink-2:#233457; --ink-deep:#0E1526; --ink-soft:#33405C; --slate:#5C6270; --line:#E7E1D6; --brass:#B8924A; --brass-deep:#977634; --brass-light:#C9A867; --btn:#2C3E66; --btn-hover:#1C2C4E; --live:#2F6E57; --live-bg:#E7F0EA; --serif:'Spectral',Georgia,'Times New Roman',serif; --grotesk:'Space Grotesk',system-ui,sans-serif; --body-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --primary:#16203A; --primary-color:#16203A; --secondary:#B8924A; --success:#2F6E57; --warning:#B8924A; --danger:#B4472F; --light:#FBFAF8; --dark:#0E1526; --gradient:linear-gradient(135deg,#233457 0%,#16203A 100%); } /* ---------- Base ---------- */ body{ font-family:var(--body-font) !important; background:var(--paper) !important; color:var(--ink) !important; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.16;letter-spacing:-.01em;color:var(--ink)} a{color:var(--brass-deep)} :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px} ::selection{background:rgba(184,146,74,.18);color:var(--ink-deep)} /* ---------- Header unificato (chiaro, filo ottone) ---------- */ .main-header{ background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:0 1px 0 var(--line) !important; position:relative; } .main-header::after{ content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px; background:linear-gradient(90deg,var(--brass),transparent);border-radius:2px; } .header-logo img{height:auto !important;max-height:52px !important} .header-title h1{font-family:var(--serif) !important;color:var(--ink) !important;font-weight:600 !important;letter-spacing:-.01em !important} .header-title .subtitle{font-family:var(--grotesk) !important;color:var(--ink-soft) !important} .lang-switcher,.language-switcher{ background:var(--panel) !important;border:1px solid var(--line) !important; border-radius:10px !important;box-shadow:0 2px 10px rgba(22,32,58,.06) !important; } .lang-btn{font-family:var(--grotesk) !important;color:var(--ink-soft) !important} .lang-btn:hover{background:var(--paper-2) !important} .lang-btn.active{background:var(--btn) !important;color:var(--paper) !important} .logo-header{background:linear-gradient(135deg,var(--ink-2),var(--ink)) !important} /* ---------- Hero (alleggerito) ---------- */ .hero-section{ background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 100%) !important; color:var(--paper) !important; border:1px solid var(--ink) !important; box-shadow:0 18px 40px rgba(22,32,58,.20) !important; border-radius:16px !important; } .hero-title{font-family:var(--serif) !important;color:var(--paper) !important} .hero-title a{color:var(--brass-light) !important;text-decoration:underline;text-underline-offset:3px} .hero-subtitle{font-family:var(--grotesk) !important;color:rgba(251,250,248,.92) !important} .hero-note{font-family:var(--grotesk);color:rgba(251,250,248,.72) !important} .urgency-badge{ background:rgba(184,146,74,.16) !important;color:var(--brass-light) !important; border:1px solid rgba(184,146,74,.5) !important;font-family:var(--grotesk) !important;letter-spacing:.02em; } .cta-primary{ background:var(--brass) !important;color:var(--ink-deep) !important; font-family:var(--grotesk) !important;font-weight:700 !important; border-radius:12px !important;box-shadow:0 8px 22px rgba(184,146,74,.32) !important; } .cta-primary:hover{background:var(--brass-deep) !important;color:#fff !important;box-shadow:0 12px 28px rgba(151,118,52,.4) !important;transform:translateY(-2px)} /* ---------- Benefit / Trust / CTA-box ---------- */ .benefit-card{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:14px !important;box-shadow:0 6px 20px rgba(22,32,58,.06) !important} .benefit-card:hover{box-shadow:0 12px 30px rgba(22,32,58,.1) !important} .benefit-title{font-family:var(--serif) !important;color:var(--ink) !important} .benefit-description{color:var(--slate) !important} .trust-section{background:var(--paper-2) !important;border-left:4px solid var(--brass) !important;border-radius:14px !important} .trust-text strong{color:var(--ink) !important;font-family:var(--grotesk)} .trust-text p{color:var(--slate) !important} .cta-box-aligned{background:var(--paper-2) !important;border:1px solid var(--brass) !important;border-radius:14px !important;box-shadow:0 10px 28px rgba(184,146,74,.18) !important} /* ---------- Privacy / Law reference ---------- */ .privacy-disclaimer{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:14px !important} .privacy-disclaimer h2{font-family:var(--serif) !important;color:var(--ink) !important} .privacy-disclaimer h3{color:var(--ink) !important} .privacy-disclaimer ul{color:var(--ink-soft) !important} .law-reference{background:var(--panel) !important;border-left:4px solid var(--brass) !important;border-radius:12px !important} .law-reference h3{font-family:var(--serif) !important;color:var(--ink) !important} .collapse-arrow{color:var(--brass) !important} .law-text{color:var(--ink-soft) !important} .law-text strong{color:var(--ink) !important} .disclaimer-box{background:#FBF3F1 !important;border:1.5px solid rgba(180,71,47,.4) !important;border-radius:12px !important} .disclaimer-box h3{color:var(--danger) !important;font-family:var(--serif) !important} /* ---------- Form ---------- */ .form-section{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:14px !important} .form-section h2{font-family:var(--serif) !important;color:var(--ink) !important;border-bottom:2px solid var(--line) !important} .form-group label{color:var(--ink) !important;font-family:var(--grotesk) !important;font-weight:600} .form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select,.form-group textarea{ border:1.5px solid var(--line) !important;border-radius:8px !important; background:var(--paper) !important;color:var(--ink) !important;font-family:var(--body-font); } .form-group input:focus,.form-group select:focus,.form-group textarea:focus{ border-color:var(--brass) !important;box-shadow:0 0 0 3px rgba(184,146,74,.15) !important; } .radio-label,.checkbox-label,.radio-label-detailed{background:var(--paper) !important;border:1.5px solid var(--line) !important;border-radius:12px !important} .radio-label:hover,.checkbox-label:hover{background:var(--panel) !important;border-color:var(--brass) !important} .radio-content strong{color:var(--ink) !important;font-family:var(--grotesk)} .radio-content span{color:var(--slate) !important} .form-actions{border-top:2px solid var(--line) !important} /* Iconcine "i / ?" — ghost neutro (niente oro) */ .field-help,.tooltip-icon,.info-icon,.help-icon,.info-tooltip,.tooltip-trigger{ background:transparent !important;color:var(--slate) !important; border:1.5px solid var(--line) !important;font-weight:600 !important;line-height:17px !important; } .field-help:hover,.tooltip-icon:hover,.info-icon:hover,.help-icon:hover{ color:var(--ink) !important;border-color:var(--brass) !important; } .quick-add-section{background:var(--paper-2) !important;border:1px solid var(--line);border-radius:12px} .quick-add-btn{background:var(--btn) !important;color:var(--paper) !important;font-family:var(--grotesk) !important;border-radius:10px !important} .quick-add-btn:hover{background:var(--brass) !important;color:var(--ink-deep) !important} .ai-system-entry{background:var(--paper) !important;border:1.5px solid var(--line) !important;border-radius:12px !important} .remove-system{background:var(--danger) !important} .remove-system:hover{background:#8F3826 !important} /* ---------- Bottoni (primary alleggerito, secondary ottone) ---------- */ .btn-primary{background:var(--btn) !important;color:var(--paper) !important;font-family:var(--grotesk) !important;border-radius:12px !important;box-shadow:0 4px 10px rgba(22,32,58,.15) !important} .btn-primary:hover{background:var(--btn-hover) !important;transform:translateY(-2px)} .btn-secondary{background:var(--brass) !important;color:var(--ink-deep) !important;font-family:var(--grotesk) !important} .btn-secondary:hover{background:var(--brass-deep) !important;color:#fff !important} .btn-outline{background:transparent !important;color:var(--ink) !important;border:2px solid var(--ink) !important;font-family:var(--grotesk) !important} .btn-outline:hover{background:var(--ink) !important;color:var(--paper) !important} a[href="guida.html"],a[href="guide.html"]{background:var(--brass) !important;color:var(--ink-deep) !important;box-shadow:0 2px 8px rgba(184,146,74,.25) !important} /* ---------- Modali ---------- */ .modal-content{border-radius:16px !important;border:1px solid var(--line)} .modal-header{background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 100%) !important;color:var(--paper) !important} .modal-header h2,.modal-header h3{font-family:var(--serif) !important;color:var(--paper) !important} .modal-footer{background:var(--paper-2) !important;border-top:1px solid var(--line)} .disclaimer-title{color:var(--ink) !important;font-family:var(--serif) !important} .disclaimer-body strong{color:var(--ink) !important} .disclaimer-header{border-bottom:2px solid var(--line) !important} .disclaimer-btn-accept{background:var(--btn) !important;color:var(--paper) !important} .disclaimer-btn-accept:hover{background:var(--btn-hover) !important} .disclaimer-btn-decline{background:var(--paper-2) !important;color:var(--ink-soft) !important} /* ---------- Box "successo" (era verde acceso) → salvia in palette ---------- */ #success-box{background:var(--live-bg) !important;border:1px solid var(--live) !important;border-radius:15px !important} #success-box, #success-box h2, #success-box h3, #success-box p, #success-box span{color:var(--ink) !important} /* ---------- Scroll · Footer · Guide ---------- */ .scroll-btn{background:var(--btn) !important;color:var(--paper) !important;box-shadow:0 4px 15px rgba(22,32,58,.3) !important} .scroll-btn:hover{background:var(--brass) !important;color:var(--ink-deep) !important;box-shadow:0 6px 20px rgba(184,146,74,.4) !important} .footer-copyright{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:14px !important;color:var(--ink-soft) !important} .footer-copyright a{color:var(--brass-deep) !important} .footer-copyright strong{color:var(--ink) !important} .guide-header{background:var(--panel) !important;border-bottom:2px solid var(--brass) !important} .guide-header h1{font-family:var(--serif) !important;color:var(--ink) !important} .guide-header h2{color:var(--slate) !important} .btn-back{background:var(--btn) !important;color:var(--paper) !important;font-family:var(--grotesk) !important;border-radius:10px !important} .btn-back:hover{background:var(--btn-hover) !important;box-shadow:0 6px 16px rgba(22,32,58,.25) !important} /* ---------- Pagine guida (guida.html / guide.html) ---------- */ .legal-box{ background:var(--paper-2) !important; border-left:4px solid var(--brass) !important; border-radius:0 !important; } main h2, main h3{font-family:var(--serif) !important;color:var(--ink) !important} /* pulsante "Inizia a compilare / Start compiling" (era verde #27ae60) */ main a[href="index.html"]{ background:var(--brass) !important;color:var(--ink-deep) !important; border-radius:12px !important;font-family:var(--grotesk) !important;font-weight:500 !important; box-shadow:0 8px 22px rgba(184,146,74,.28) !important; }