/* ============================================================ CLARAXIS THEME — AI Act Self-Assessment Ridisegno coordinato con claraxis.eu (stessa grammatica visiva) Palette: inchiostro #16203A · ottone #B8924A · avorio #FBFAF8 Font: Spectral (titoli) · Space Grotesk (UI/eyebrow) · Inter (body) Caricato in coda al : prevale sugli stili inline. VINCOLI JS (invariati): ID answer3,btnNext3,confidenceFill, confidenceValue,navControls,q1,results,riskMeter,q3-options · classi .answer-card,.answer-title,.lang-btn,.question-section, .header-title,.selected,.active,.completed,.hidden,.pending · meccanica .style.width. ============================================================ */ /* ---------- Font self-hostati ---------- */ @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/spectral-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/spectral-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/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('../assets/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('../assets/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('../assets/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('../assets/fonts/inter-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2')} /* ---------- Palette (identica a claraxis.eu) ---------- */ :root{ --paper:#FBFAF8; --paper-2:#F4F1EA; --panel:#FFFFFF; --ink:#16203A; --ink-deep:#0E1526; --ink-soft:#33405C; --slate:#5C6270; --line:#E7E1D6; --brass:#B8924A; --brass-deep:#977634; --brass-light:#C9A867; --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; /* rimappo le native del tool (usate in punti residui) */ --primary:#16203A; --secondary:#B8924A; --success:#2F6E57; --btn:#2C3E66; --btn-hover:#1C2C4E; --light:#FBFAF8; --dark:#0E1526; --gradient:linear-gradient(135deg,#16203A 0%,#0E1526 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.14;letter-spacing:-.01em;color:var(--ink)} :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 — stile landing: chiaro, sticky, filo ottone, brand a sx ============================================================ */ .header-container{ background:color-mix(in srgb,var(--paper) 92%,transparent) !important; backdrop-filter:saturate(140%) blur(10px); color:var(--ink) !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; padding:18px 0 !important; } .header-content{max-width:1120px !important;gap:22px !important} .header-title h1{ font-family:var(--serif) !important; color:var(--ink) !important; font-size:1.5em !important; font-weight:600 !important; letter-spacing:-.01em !important; } .header-title p{ font-family:var(--grotesk) !important; color:var(--ink-soft) !important; font-size:.92em !important; opacity:1 !important; } .header-logo img{opacity:1} /* Risk-meter: pannello chiaro coerente con le card landing */ .risk-meter{ background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:12px !important; padding:14px 18px !important; } .risk-meter-title{ font-family:var(--grotesk) !important; color:var(--brass-deep) !important; font-size:.72em !important; letter-spacing:.14em !important; text-transform:uppercase !important; font-weight:500 !important; } .risk-meter-bar{ background:var(--paper-2) !important; border-radius:999px !important; height:26px !important; } .risk-meter-fill{font-family:var(--grotesk) !important} /* ============================================================ MAIN / PANNELLI — le "colonne" come card landing ============================================================ */ .progress-path{ background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:16px !important; } .progress-title{ font-family:var(--serif) !important; color:var(--ink) !important; } /* ============================================================ QUESTION SECTION ============================================================ */ .question-header{ border-bottom:1px solid var(--line) !important; } /* eyebrow ottone identico alla landing (era pillola scura) */ .question-category{ display:inline-block !important; background:transparent !important; color:var(--brass-deep) !important; padding:0 !important; border-radius:0 !important; font-family:var(--grotesk) !important; font-weight:500 !important; font-size:12.5px !important; letter-spacing:.16em !important; text-transform:uppercase !important; margin-bottom:14px !important; } .question-title{ font-family:var(--serif) !important; color:var(--ink) !important; font-weight:600 !important; letter-spacing:-.01em !important; } .question-description{ color:var(--ink-soft) !important; font-family:var(--body-font) !important; } /* ============================================================ ANSWER CARD — replica .card della landing ============================================================ */ .answer-card{ background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:16px !important; padding:22px 24px !important; transition:transform .18s ease,box-shadow .18s ease,border-color .18s !important; } .answer-card:hover{ background:var(--panel) !important; border-color:var(--brass) !important; transform:translateY(-3px) !important; box-shadow:0 20px 40px -28px rgba(22,32,58,.5) !important; } .answer-card.selected{ background:var(--panel) !important; border-color:var(--brass) !important; box-shadow:0 20px 40px -30px rgba(184,146,74,.55) !important; } .answer-card.selected::after{ content:'✓' !important; background:var(--brass) !important; color:#fff !important; } .answer-title{ font-family:var(--grotesk) !important; color:var(--ink) !important; font-weight:500 !important; } .answer-detail{ color:var(--ink-soft) !important; font-family:var(--body-font) !important; } /* ============================================================ BOTTONI — stile landing (.btn-primary / .btn-ghost / brass) ============================================================ */ .btn{font-family:var(--grotesk) !important;border-radius:10px !important;font-weight:500 !important} .btn-primary:not(:disabled){ background:var(--btn) !important;color:#fff !important; border:1px solid var(--btn) !important; box-shadow:0 12px 26px -16px rgba(22,32,58,.7) !important; } .btn-primary:hover:not(:disabled){background:var(--btn-hover) !important;transform:translateY(-1px)} .btn-secondary{ background:transparent !important;color:var(--ink) !important; border:1px solid var(--line) !important; } .btn-secondary:hover:not(:disabled){border-color:var(--brass) !important;color:var(--brass-deep) !important} .btn-reset,.btn-restart{ background:transparent !important;color:var(--brass-deep) !important; border:1px solid var(--brass-light) !important;font-family:var(--grotesk) !important; } .btn-reset:hover,.btn-restart:hover{background:var(--brass) !important;color:#fff !important;border-color:var(--brass) !important} .guide-button{ background:var(--ink) !important;color:#fff !important; border:1px solid var(--ink) !important;font-family:var(--grotesk) !important; font-weight:500 !important;box-shadow:0 12px 26px -16px rgba(22,32,58,.7) !important; } .guide-button:hover{background:var(--ink-deep) !important;border-color:var(--brass) !important} /* ============================================================ PROGRESS PATH — pallini stile "asse" landing ============================================================ */ .path-indicator{ background:var(--paper) !important; border:2px solid var(--slate) !important; color:var(--slate) !important; } .path-indicator.active, .path-item .path-indicator.active{ background:var(--brass) !important; border-color:var(--brass) !important; color:#fff !important; } .path-indicator.completed{ background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important; } .path-label{font-family:var(--grotesk) !important;color:var(--ink-soft) !important} .path-label.active{color:var(--brass-deep) !important;font-weight:500 !important} .path-answer{font-family:var(--body-font) !important;color:var(--slate) !important} /* ============================================================ FOOTER — stile landing: chiaro, filo ottone, testo slate ============================================================ */ .site-footer{ background:var(--paper-2) !important; color:var(--ink-soft) !important; border-top:1px solid var(--line) !important; margin-top:64px !important; padding:40px 20px 24px !important; } .footer-content{max-width:1120px !important} .footer-section h3{ font-family:var(--grotesk) !important; color:var(--brass-deep) !important; font-size:12.5px !important; font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important; margin-bottom:14px !important; } .footer-section p, .footer-section a{ font-family:var(--grotesk) !important; color:var(--ink-soft) !important; font-size:13.5px !important; } .footer-section a:hover{color:var(--brass-deep) !important} .footer-bottom{ border-top:1px solid var(--line) !important; padding-top:20px !important; } .footer-bottom p{ font-family:var(--grotesk) !important; color:var(--slate) !important; font-size:12.5px !important; } /* Box consenso Matomo: aspetto coerente, logica invariata */ #matomoConsentLabel{ font-family:var(--grotesk) !important; color:var(--ink-soft) !important; } .license-badge{ font-family:var(--grotesk) !important; color:var(--brass-deep) !important; } /* ============================================================ FIX — Box consenso Matomo (aveva style inline scuro) → chiaro Vince sugli inline con selettori mirati; logica invariata. ============================================================ */ .matomo-disclaimer{ background:var(--panel) !important; border-left:4px solid var(--brass) !important; border:1px solid var(--line) !important; border-left:4px solid var(--brass) !important; border-radius:12px !important; } .matomo-disclaimer h3{ color:var(--brass-deep) !important; font-family:var(--grotesk) !important; font-size:12.5px !important; font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .matomo-disclaimer p, .matomo-disclaimer label, .matomo-disclaimer span{ color:var(--ink-soft) !important; font-family:var(--body-font) !important; } .matomo-disclaimer a{ color:var(--ink) !important; border-bottom:1px solid var(--brass) !important; text-decoration:none !important; } .matomo-disclaimer a:hover{color:var(--brass-deep) !important} #matomoStatus{ background:var(--paper-2) !important; border:1px solid var(--line) !important; border-radius:8px !important; } #matomoStatus span{color:var(--ink-soft) !important} /* ============================================================ FIX — Bottone "Continua" (stato disabled + attivo) ============================================================ */ .btn-primary{ background:var(--btn) !important; color:#fff !important; border:1px solid var(--btn) !important; font-family:var(--grotesk) !important; box-shadow:0 12px 26px -16px rgba(22,32,58,.7) !important; } .btn-primary:disabled{ background:var(--btn) !important; border-color:var(--btn) !important; color:#fff !important; opacity:.38 !important; box-shadow:none !important; cursor:not-allowed !important; } .btn-primary:not(:disabled):hover{ background:var(--btn-hover) !important; transform:translateY(-1px); } /* ============================================================ Disclaimer Matomo — riga discreta cookieless (stile landing/nis2desk) Sostituisce il vecchio box con checkbox (tool ora cookieless) ============================================================ */ .matomo-note{ max-width:760px !important; margin:28px auto 8px !important; text-align:center !important; font-family:var(--grotesk) !important; font-size:13px !important; line-height:1.6 !important; color:var(--slate) !important; } .matomo-note a{ color:var(--ink-soft) !important; border-bottom:1px solid var(--brass) !important; text-decoration:none !important; } .matomo-note a:hover{color:var(--brass-deep) !important} /* ============================================================ FIX — Badge licenza (aveva su fondo scuro) ============================================================ */ .license-badge{ background:transparent !important; color:var(--slate) !important; font-family:var(--grotesk) !important; font-size:12px !important; } .license-badge a{ color:var(--brass-deep) !important; text-decoration:none !important; border-bottom:1px solid var(--brass) !important; } .license-badge a:hover{color:var(--brass) !important} /* ============================================================ FOOTER v2 — due fasce (disclaimer bianco + barra avorio) Sostituisce la vecchia struttura a 3 colonne ============================================================ */ .site-footer{ background:transparent !important; border-top:1px solid var(--line) !important; margin-top:64px !important; padding:0 !important; } /* Fascia 1 — disclaimer Matomo, fondo bianco */ .ftr-note-wrap{ background:var(--panel) !important; border-bottom:1px solid var(--line); padding:16px 26px; } .ftr-note{ max-width:640px; margin:0 auto; text-align:center; font-family:var(--grotesk); font-size:12.5px; line-height:1.6; color:var(--slate); } .ftr-note a{ color:var(--ink-soft); border-bottom:1px solid var(--brass); text-decoration:none; } .ftr-note a:hover{color:var(--brass-deep)} /* Fascia 2 — barra meta + contatto, fondo avorio */ .ftr-bar{ background:var(--paper-2); padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:20px 28px; flex-wrap:wrap; } .ftr-meta{ margin:0; font-family:var(--grotesk); font-size:12.5px; color:var(--ink-soft); } .ftr-meta a{ color:var(--ink); border-bottom:1px solid var(--brass); text-decoration:none; } .ftr-meta a:hover{color:var(--brass-deep)} .ftr-sep{color:var(--brass);margin:0 4px} .ftr-contact{margin:0;font-family:var(--grotesk);font-size:12.5px} .ftr-contact a{ color:var(--ink-soft); border-bottom:1px solid var(--brass); text-decoration:none; } .ftr-contact a:hover{color:var(--brass-deep)} /* Disclaimer legale — riga finale discreta */ .ftr-disclaimer{ background:var(--paper-2); margin:0; padding:0 26px 22px; text-align:center; font-family:var(--grotesk); font-size:11px; line-height:1.55; color:var(--slate); } .ftr-disclaimer strong{color:var(--ink-soft);font-weight:500} /* ============================================================ Guide button — spostato in alto a sinistra (era in basso) ============================================================ */ .guide-button{ position:fixed !important; top:105px !important; bottom:auto !important; left:30px !important; background:var(--ink) !important; color:#fff !important; border:1px solid var(--ink) !important; border-radius:50px !important; box-shadow:0 12px 26px -16px rgba(22,32,58,.7) !important; z-index:60 !important; } .guide-button:hover{ background:var(--ink-deep) !important; border-color:var(--brass) !important; transform:translateY(-1px) !important; } @media(max-width:640px){ .guide-button{ top:auto !important; bottom:20px !important; left:20px !important; } } /* Guide button — ritocco: più in basso e più compatto */ .guide-button{ top:132px !important; padding:9px 16px !important; font-size:13px !important; font-weight:500 !important; gap:7px !important; } /* Guide button — allineato al primo step del percorso */ .guide-button{ top:150px !important; } /* Guide button — abbassato ulteriormente */ .guide-button{ top:172px !important; } /* ============================================================ DISCLAIMER MODAL — estetica Claraxis ============================================================ */ .disclaimer-modal{ background:rgba(14,21,38,.55) !important; backdrop-filter:blur(3px); } .disclaimer-content, .disclaimer-modal > div{ background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:16px !important; } .disclaimer-title{ font-family:var(--serif) !important; color:var(--ink) !important; font-weight:600 !important; } .disclaimer-subtitle{ font-family:var(--grotesk) !important; color:var(--slate) !important; } .disclaimer-body{ font-family:var(--body-font) !important; color:var(--ink-soft) !important; } .disclaimer-body strong{color:var(--ink) !important;font-weight:600} .disclaimer-body ul li{color:var(--ink-soft) !important} .disclaimer-body a{color:var(--ink) !important;border-bottom:1px solid var(--brass);text-decoration:none !important} .disclaimer-body a:hover{color:var(--brass-deep) !important} /* Box "warning" — da giallo/blu a tinta ottone tenue */ .disclaimer-warning{ background:var(--paper-2) !important; border:1px solid var(--line) !important; border-left:4px solid var(--brass) !important; border-radius:0 !important; color:var(--ink-soft) !important; } .disclaimer-warning strong{color:var(--brass-deep) !important} /* Box Matomo dentro il modale (aveva style inline #dbeafe blu) */ .disclaimer-warning[style]{ background:var(--live-bg) !important; border-left:4px solid var(--live) !important; } .disclaimer-warning[style] strong{color:var(--live) !important} .disclaimer-warning[style] p{color:var(--ink-soft) !important} .disclaimer-warning[style] a{color:var(--live) !important;border-bottom:1px solid var(--live) !important} /* Bottoni del modale */ .disclaimer-btn{ font-family:var(--grotesk) !important; border-radius:10px !important; font-weight:500 !important; } .disclaimer-btn-accept{ background:var(--ink) !important; color:#fff !important; border:1px solid var(--ink) !important; box-shadow:0 12px 26px -16px rgba(22,32,58,.7) !important; } .disclaimer-btn-accept:hover{ background:var(--ink-deep) !important; transform:translateY(-1px); } .disclaimer-btn-decline{ background:transparent !important; color:var(--slate) !important; border:1px solid var(--line) !important; } .disclaimer-btn-decline:hover{ border-color:var(--brass) !important; color:var(--brass-deep) !important; } /* ============================================================ FOOTER v3 — essenziale centrato (senza disclaimer) ============================================================ */ .ftr-bar{ background:var(--paper-2) !important; padding:26px 26px !important; display:block !important; text-align:center !important; } .ftr-meta{ margin:0 0 6px !important; font-family:var(--grotesk) !important; font-size:13px !important; font-weight:500 !important; color:var(--ink) !important; } .ftr-meta a{color:var(--ink);border-bottom:1px solid var(--brass);text-decoration:none} .ftr-meta a:hover{color:var(--brass-deep)} .ftr-sub{ margin:0 !important; font-family:var(--grotesk) !important; font-size:11.5px !important; color:var(--slate) !important; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; } .ftr-sub a{color:var(--ink-soft);border-bottom:1px solid var(--brass);text-decoration:none} .ftr-sub a:hover{color:var(--brass-deep)} .ftr-sep{color:var(--brass)}