/* ========================================================================== Tema pagine pubbliche (layouts/welcome, layouts/promo, verify) Light = default Bootstrap; dark = classe .dark-mode sul . Palette dark verificata per contrasto WCAG AA (>= 4.5:1 sui testi). ========================================================================== */ /* ---------- Base (entrambi i temi) ---------- */ body { background-color: #f8f9fa; color: #212529; } html, body, .navbar, .btn, .nav-link, .card, .modal-content, .dropdown-menu, .form-control, .form-select, .list-group-item { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ---------- Variabili tema scuro ---------- */ body.dark-mode { --wm-bg: #121212; --wm-surface: #1e1e1e; --wm-surface-2: #262626; --wm-border: #3d3d3d; --wm-text: #e6e6e6; --wm-heading: #f2f2f2; --wm-muted: #a8a8a8; --wm-link: #6ea8fe; --wm-link-hover: #9cc2ff; --wm-secondary: #adb5bd; /* Allinea le variabili Bootstrap usate dai componenti (bordi, hr, text-body) */ --bs-body-bg: var(--wm-bg); --bs-body-bg-rgb: 18, 18, 18; --bs-body-color: var(--wm-text); --bs-body-color-rgb: 230, 230, 230; --bs-border-color: var(--wm-border); background-color: var(--wm-bg); color: var(--wm-text); } /* ---------- Tipografia ---------- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .h1, body.dark-mode .h2, body.dark-mode .h3, body.dark-mode .h4 { color: var(--wm-heading); } body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.help-nav-link):not(.card):not(.list-group-item-action):not(.lang-btn) { color: var(--wm-link); } body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.help-nav-link):not(.card):not(.list-group-item-action):not(.lang-btn):hover { color: var(--wm-link-hover); } /* ---------- Testo utility ---------- */ body.dark-mode .text-muted { color: var(--wm-muted) !important; } body.dark-mode .text-dark { color: var(--wm-text) !important; } body.dark-mode .text-primary { color: var(--wm-link) !important; } body.dark-mode .text-danger { color: #e35d6a !important; } body.dark-mode .text-success { color: #75b798 !important; } body.dark-mode .text-warning { color: #ffda6a !important; } body.dark-mode .invalid-feedback { color: #e35d6a; } /* ---------- Sfondi utility ---------- */ body.dark-mode .bg-light { background-color: var(--wm-surface-2) !important; } body.dark-mode .bg-white { background-color: var(--wm-surface) !important; } /* ---------- Navbar ---------- */ body.dark-mode .navbar { background-color: #1f2a38 !important; } body.dark-mode .nav-link { color: #ddd !important; } body.dark-mode .nav-link:hover, body.dark-mode .nav-link:focus { color: #fff !important; } /* ---------- Card ---------- */ body.dark-mode .card { background-color: var(--wm-surface); color: var(--wm-text); border-color: var(--wm-border); } body.dark-mode .card-header, body.dark-mode .card-footer { border-color: var(--wm-border); } /* ---------- List group ---------- */ body.dark-mode .list-group-item { background-color: var(--wm-surface); color: var(--wm-text); border-color: var(--wm-border); } body.dark-mode .list-group-item-action:hover, body.dark-mode .list-group-item-action:focus { background-color: var(--wm-surface-2); color: var(--wm-heading); } /* ---------- Modali ---------- */ body.dark-mode .modal-content { background-color: var(--wm-surface); color: var(--wm-text); border-color: var(--wm-border); } body.dark-mode .modal-header { border-bottom-color: var(--wm-border); } body.dark-mode .modal-footer { border-top-color: var(--wm-border); } body.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------- Form ---------- */ body.dark-mode .form-control, body.dark-mode .form-select { background-color: var(--wm-surface-2); color: var(--wm-text); border-color: var(--wm-border); } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background-color: var(--wm-surface-2); color: var(--wm-text); border-color: var(--wm-link); box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25); } body.dark-mode .form-control::placeholder { color: #8a8a8a; opacity: 1; } body.dark-mode .form-check-input { background-color: var(--wm-surface-2); border-color: #4d4d4d; } body.dark-mode .form-check-input:checked { background-color: #3d8bfd; border-color: #3d8bfd; } body.dark-mode .form-check-input:focus { border-color: var(--wm-link); box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25); } /* ---------- Dropdown ---------- */ body.dark-mode .dropdown-menu { background-color: var(--wm-surface-2); border-color: var(--wm-border); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); } body.dark-mode .dropdown-item { color: var(--wm-text); } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #333333; color: var(--wm-heading); } /* ---------- Bottoni ---------- */ body.dark-mode .btn-primary { background-color: #007bff; border-color: #007bff; } body.dark-mode .btn-outline-primary { color: var(--wm-link); border-color: var(--wm-link); } body.dark-mode .btn-outline-primary:hover, body.dark-mode .btn-outline-primary:active, body.dark-mode .btn-outline-primary.active { background-color: var(--wm-link); border-color: var(--wm-link); color: #121212; } body.dark-mode .btn-outline-secondary { color: var(--wm-secondary); border-color: #5a5a5a; } body.dark-mode .btn-outline-secondary:hover, body.dark-mode .btn-outline-secondary:active, body.dark-mode .btn-outline-secondary.active { background-color: #3d3d3d; border-color: #3d3d3d; color: #ffffff; } /* ---------- Alert ---------- */ body.dark-mode .alert-success { background-color: #051b11; color: #75b798; border-color: #0f5132; } body.dark-mode .alert-danger { background-color: #2c0b0e; color: #ea868f; border-color: #842029; } /* ---------- Breadcrumb ---------- */ body.dark-mode .breadcrumb-item.active { color: var(--wm-muted); } body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--wm-muted); } /* ---------- Ombre ---------- */ body.dark-mode .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important; } body.dark-mode .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important; } body.dark-mode .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6) !important; }