/* ========================================================= * Light theme overrides + base CSS dello switch tema. * Attivato via [data-theme="light"] sull'elemento . * Il default rimane il tema dark (definito in home.css). * ========================================================= */ /* ----- Theme switch button (base — works in both themes) ----- */ .theme-switch{ display:inline-flex; border:1px solid var(--bd); border-radius:3px; overflow:hidden; font-family:var(--mono); font-size:11px; } .theme-switch button{ background:transparent; color:var(--muted); padding:5px 8px; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .15s ease; } .theme-switch button:not(.active):hover{color:var(--ink-2)} .theme-switch button.active{ background:rgba(0,180,216,.10); color:var(--cyan-400); } .theme-switch button svg{ width:14px; height:14px; display:block; } .theme-switch button:focus-visible{ outline:2px solid var(--cyan-400); outline-offset:2px; } html[data-theme="light"]{ color-scheme: light; /* Palette inversa */ --navy-950: #F8FAFC; --navy-900: #FFFFFF; --navy-800: #F1F5F9; --navy-700: #E2E8F0; --navy-600: #F8FAFC; --navy-500: #CBD5E1; --navy-400: #94A3B8; /* Cyan: leggermente più scuro per contrasto AAA su bianco */ --cyan-700: #075985; --cyan-600: #0369A1; --cyan-500: #0284C7; --cyan-400: #0891B2; --cyan-300: #0E7490; /* Testo */ --ink: #0F172A; --ink-2: #334155; --muted: #64748B; --muted-2: #94A3B8; --muted-3: #CBD5E1; /* Bordi */ --bd: rgba(15, 23, 42, .10); --bd-2: rgba(15, 23, 42, .06); --bd-strong: rgba(15, 23, 42, .18); /* Effetti */ --grad-accent: linear-gradient(135deg, #075985 0%, #0284C7 50%, #0891B2 100%); --grad-hero: radial-gradient(900px 600px at 100% -10%, rgba(0,180,216,.10), transparent 55%), radial-gradient(700px 500px at -10% 60%, rgba(0,119,182,.08), transparent 60%); --grad-panel: linear-gradient(180deg, rgba(0,180,216,.03), transparent 60%); } html[data-theme="light"] body{ background: #FFFFFF; color: var(--ink); } html[data-theme="light"] body::before{ background: radial-gradient(1400px 800px at 85% -10%, rgba(0,180,216,.05), transparent 50%), radial-gradient(1000px 600px at -10% 30%, rgba(0,119,182,.04), transparent 55%); } /* Nav */ html[data-theme="light"] .nav{ background: rgba(255,255,255,.78); border-bottom-color: var(--bd); } html[data-theme="light"] .nav .brand img{ filter: invert(1) brightness(.5) contrast(1.2); } /* Footer */ html[data-theme="light"] footer{ background: #F1F5F9; border-top: 1px solid var(--bd); } html[data-theme="light"] .foot-brand img{ filter: invert(1) brightness(.5) contrast(1.2); } /* Buttons */ html[data-theme="light"] .btn-ghost{ color: var(--ink); border-color: var(--bd-strong); } html[data-theme="light"] .btn-ghost:hover{ color: var(--cyan-600); border-color: var(--cyan-500); background: rgba(2, 132, 199, .04); } /* Lang switch */ html[data-theme="light"] .lang-switch{ border-color: var(--bd-strong); } html[data-theme="light"] .lang-switch button{ color: var(--muted); } html[data-theme="light"] .lang-switch button.active{ background: rgba(2, 132, 199, .10); color: var(--cyan-600); } /* Theme switch (this control) */ html[data-theme="light"] .theme-switch button{ color: var(--muted); } html[data-theme="light"] .theme-switch button.active{ background: rgba(2, 132, 199, .10); color: var(--cyan-600); } /* Cards backgrounds — override absolute dark colors */ html[data-theme="light"] .bg-card, html[data-theme="light"] .ba-toc, html[data-theme="light"] .ba-faq details, html[data-theme="light"] .lg-toc, html[data-theme="light"] .gl-empty{ background: #F8FAFC; border-color: var(--bd); } html[data-theme="light"] .bg-card:hover{ background: rgba(2, 132, 199, .04); border-color: rgba(2, 132, 199, .35); } html[data-theme="light"] .ba-callout, html[data-theme="light"] .lg-callout{ background: rgba(2, 132, 199, .05); border-color: rgba(2, 132, 199, .20); } html[data-theme="light"] .ba-faq details[open]{ background: rgba(2, 132, 199, .04); border-color: rgba(2, 132, 199, .22); } html[data-theme="light"] blockquote, html[data-theme="light"] .ba-body blockquote{ background: rgba(2, 132, 199, .05); color: var(--ink-2); } /* Glossario */ html[data-theme="light"] .gl-alpha{ background: rgba(255,255,255,.92); border-bottom-color: var(--bd); } html[data-theme="light"] .gl-chip{ background: #F1F5F9; border-color: var(--bd); color: var(--ink-2); } html[data-theme="light"] .gl-chip:hover{ background: rgba(2, 132, 199, .06); border-color: rgba(2, 132, 199, .35); color: var(--ink); } html[data-theme="light"] .gl-chip.active{ background: rgba(2, 132, 199, .14); border-color: rgba(2, 132, 199, .55); color: var(--cyan-600); } html[data-theme="light"] .gl-letter-group h2{ background: rgba(2, 132, 199, .06); color: var(--ink); } html[data-theme="light"] .gl-abbrev{ background: rgba(2, 132, 199, .08); border-color: rgba(2, 132, 199, .22); color: var(--cyan-600); } html[data-theme="light"] .gl-entry{ border-bottom-color: var(--bd-2); } /* Sezioni moduli, soluzioni, settori, compliance — cards interne */ html[data-theme="light"] .mod-definition, html[data-theme="light"] .audience, html[data-theme="light"] .feat, html[data-theme="light"] .stat-card, html[data-theme="light"] .roi, html[data-theme="light"] .fact, html[data-theme="light"] .step, html[data-theme="light"] .ptype, html[data-theme="light"] .cmp-article, html[data-theme="light"] .arch, html[data-theme="light"] .arch-head, html[data-theme="light"] .sct-policy-types .ptype, html[data-theme="light"] .sct-hub-card, html[data-theme="light"] .mod-toc, html[data-theme="light"] .sct-maturity, html[data-theme="light"] .breadcrumb, html[data-theme="light"] .version-pill{ background: #F8FAFC; border-color: var(--bd); } html[data-theme="light"] .sct-hub-card:hover{ background: rgba(2, 132, 199, .04); border-color: rgba(2, 132, 199, .35); } /* Tech / spec chips */ html[data-theme="light"] .tech-chip, html[data-theme="light"] .spec{ background: rgba(2, 132, 199, .06); border-color: rgba(2, 132, 199, .22); color: var(--ink-2); } /* Compliance chips */ html[data-theme="light"] .comp-chip{ background: #F1F5F9; border-color: var(--bd); color: var(--ink-2); } /* FAQ accordion */ html[data-theme="light"] .faq, html[data-theme="light"] details.faq{ background: #F8FAFC; border-color: var(--bd); } html[data-theme="light"] .faq[open]{ background: rgba(2, 132, 199, .04); border-color: rgba(2, 132, 199, .22); } /* Tabelle (legale, glossario, ecc.) */ html[data-theme="light"] .lg-table{ border-color: var(--bd); } html[data-theme="light"] .lg-table thead{ background: rgba(2, 132, 199, .06); } html[data-theme="light"] .lg-table th{ color: var(--cyan-600); border-bottom-color: var(--bd); } html[data-theme="light"] .lg-table td{ border-bottom-color: var(--bd-2); color: var(--ink-2); } html[data-theme="light"] .lg-table td code{ background: rgba(15,23,42,.05); color: var(--ink); } /* Modali (ISO + PDF) */ html[data-theme="light"] .iso-modal, html[data-theme="light"] .pdf-modal{ background: rgba(15,23,42,.45); } html[data-theme="light"] .iso-modal__dialog, html[data-theme="light"] .pdf-modal__dialog{ background: #FFFFFF; border-color: var(--bd); box-shadow: 0 24px 80px -20px rgba(0,0,0,.20), 0 0 0 1px rgba(2,132,199,.08); } html[data-theme="light"] .iso-modal__head, html[data-theme="light"] .iso-modal__foot, html[data-theme="light"] .pdf-modal__head, html[data-theme="light"] .pdf-modal__foot{ border-color: var(--bd); } html[data-theme="light"] .iso-modal__body{ background: #F8FAFC; } html[data-theme="light"] .pdf-modal__body, html[data-theme="light"] .pdf-modal__iframe, html[data-theme="light"] .pdf-modal__loader{ background: #F1F5F9; } html[data-theme="light"] .iso-modal__close, html[data-theme="light"] .pdf-modal__close{ color: var(--ink-2); border-color: var(--bd); } html[data-theme="light"] .iso-modal__btn, html[data-theme="light"] .pdf-modal__btn{ color: var(--ink); border-color: var(--bd-strong); } html[data-theme="light"] .iso-modal__btn--primary, html[data-theme="light"] .pdf-modal__btn--primary{ background: var(--cyan-500); border-color: var(--cyan-500); color: #FFFFFF; } html[data-theme="light"] .iso-modal__btn--primary:hover, html[data-theme="light"] .pdf-modal__btn--primary:hover{ background: var(--cyan-600); border-color: var(--cyan-600); color: #FFFFFF; } /* Form fields */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="search"], html[data-theme="light"] textarea, html[data-theme="light"] select{ background: #FFFFFF; color: var(--ink); border-color: var(--bd-strong); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder{ color: var(--muted); } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus{ border-color: var(--cyan-500); outline: 2px solid rgba(2,132,199,.25); } /* Code blocks generici */ html[data-theme="light"] code{ background: rgba(15,23,42,.05); color: var(--cyan-700); } /* Skip link */ html[data-theme="light"] .skip-link:focus{ background: var(--cyan-600); color: #FFFFFF; } /* Hero section gradients across all pages (soft cyan wash) */ html[data-theme="light"] .mod-hero, html[data-theme="light"] .sct-hero, html[data-theme="light"] .cmp-hero, html[data-theme="light"] .gl-hero, html[data-theme="light"] .bg-hero, html[data-theme="light"] .ba-hero, html[data-theme="light"] .lg-hero, html[data-theme="light"] .page-hero{ background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%); } /* Force decorative gradient overlays to lighter values */ html[data-theme="light"] .mod-hero::before, html[data-theme="light"] .sct-hero::before, html[data-theme="light"] .cmp-hero::before, html[data-theme="light"] .gl-hero::before, html[data-theme="light"] .bg-hero::before, html[data-theme="light"] .ba-hero::before, html[data-theme="light"] .lg-hero::before{ background: radial-gradient(900px 500px at 20% 30%, rgba(0,180,216,.07), transparent 60%), radial-gradient(800px 480px at 85% 70%, rgba(0,119,182,.05), transparent 65%); } /* Glossario badge category — invert to readable on light bg */ html[data-theme="light"] .gl-badge{ background: rgba(15,23,42,.06); color: var(--ink-2); border-color: var(--bd); } /* TOC entries hover/current */ html[data-theme="light"] .mod-toc a{color: var(--ink-2)} html[data-theme="light"] .mod-toc a:hover{color: var(--cyan-600)} html[data-theme="light"] .mod-toc a.current{color: var(--cyan-600)} /* Reduce gradient brightness on body background */ html[data-theme="light"] body{ background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); background-attachment: fixed; }