/* ═══════════════════════════════════════════ DARK-MODE.CSS — Light Theme Overrides Activated via [data-theme="light"] on ═══════════════════════════════════════════ */ /* ─── THEME TOGGLE ICONS ─── */ [data-theme="light"] .theme-toggle .icon-sun { display: block; stroke: #fbbf24 !important; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ═══════════════════════════════════════════ 1. MAIN.CSS TOKEN OVERRIDES (--bg-*, --text-*, --border-*, --accent-*) ═══════════════════════════════════════════ */ :root { --color-bg: #1a1a2e; --color-bg-card: #1e2030; --color-bg-sidebar: #252535; --color-text-primary: #ffffff; --color-text-secondary: #a0a0b8; --color-text-muted: #6b6b85; --color-border: #2a2a45; --color-nav-bg: #12121e; } [data-theme="light"] { /* Backgrounds (from user) */ --color-bg: #f5f6fa; --color-bg-card: #ffffff; --color-bg-sidebar: #e8edf5; --color-text-primary: #1a1a2e; --color-text-secondary: #444460; --color-text-muted: #666680; --color-border: #d0d0e0; --color-nav-bg: #ffffff; /* Map existing variables for safety */ --bg-primary: var(--color-bg); --bg-secondary: var(--color-bg-sidebar); --bg-card: var(--color-bg-card); --bg-card-hover: #f0f2f8; --border-color: var(--color-border); --text-primary: var(--color-text-primary); --text-body: var(--color-text-secondary); --text-caption: var(--color-text-muted); /* Accents */ --accent: #1a1a2e; --accent-blue: #2d6a8f; --accent-blue-light: #357ea6; --accent-gold: rgba(150, 120, 60, 0.7); --highlight-green: #388e3c; --error-red: #d32f2f; } /* Force colors on specific elements to fix Bug 1 */ [data-theme="light"] body, [data-theme="light"] html { background-color: var(--color-bg) !important; color: var(--color-text-primary) !important; } [data-theme="light"] .navbar, [data-theme="light"] nav, [data-theme="light"] header, [data-theme="light"] .site-header, [data-theme="light"] .primary-nav { background-color: var(--color-nav-bg) !important; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] li, [data-theme="light"] a, [data-theme="light"] .nav-link, [data-theme="light"] .logo-text, [data-theme="light"] .hero-banner__title, [data-theme="light"] .hero-banner__subtitle, [data-theme="light"] .action-block__title, [data-theme="light"] .action-block__text, [data-theme="light"] .member-card__name, [data-theme="light"] .member-card__uni, [data-theme="light"] .team-card__name { color: var(--color-text-primary) !important; } [data-theme="light"] .timeline-card, [data-theme="light"] .card, [data-theme="light"] .member-card, [data-theme="light"] .team-card, [data-theme="light"] .action-block__card { background-color: var(--color-bg-card) !important; border-color: var(--color-border) !important; } [data-theme="light"] .sidebar-impatto, [data-theme="light"] .impatto-list, [data-theme="light"] .impact-card { background-color: var(--color-bg-sidebar) !important; color: var(--color-text-primary) !important; } [data-theme="light"] .btn, [data-theme="light"] .btn-pdf, [data-theme="light"] .btn-profilo, [data-theme="light"] .member-card__btn, [data-theme="light"] .action-block__download, [data-theme="light"] .team-card__link { color: var(--color-text-primary) !important; border-color: var(--color-border) !important; } [data-theme="light"] footer, [data-theme="light"] .footer, [data-theme="light"] .site-footer, [data-theme="light"] .footer-copy, [data-theme="light"] .footer-link { background-color: var(--color-nav-bg) !important; color: var(--color-text-primary) !important; } [data-theme="light"] .hero-section, [data-theme="light"] .hero-banner { background-color: var(--color-bg-sidebar) !important; } [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] .form-input, [data-theme="light"] .toolbar__select { background-color: var(--color-bg-card) !important; color: var(--color-text-primary) !important; border-color: var(--color-border) !important; } [data-theme="light"] label, [data-theme="light"] .form-label, [data-theme="light"] .form-radio__text { color: var(--color-text-primary) !important; } /* ═══════════════════════════════════════════ 2. COMPONENTS.CSS TOKEN OVERRIDES (--card-bg, --sidebar-bg, --member-*, etc.) ═══════════════════════════════════════════ */ [data-theme="light"] { --card-bg: #ffffff; --card-radius: 12px; --sidebar-bg: #f0f2f8; --sidebar-border: #2d6a8f; --member-card-bg: #ffffff; --member-avatar-bg: #c5d6e8; --text-secondary: #4a4a65; --text-muted: #7a7a95; --bullet-color: #2d6a8f; } /* ═══════════════════════════════════════════ 3. HEADER & NAVIGATION ═══════════════════════════════════════════ */ [data-theme="light"] .site-header { background: rgba(245, 246, 250, 0.95); border-bottom-color: var(--border-color); } [data-theme="light"] .site-header.scrolled { background: rgba(245, 246, 250, 0.98); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); } [data-theme="light"] .primary-nav { background: #f5f6fa; } [data-theme="light"] .nav-link { color: var(--text-primary); } [data-theme="light"] .logo-bar { background: var(--text-primary); } [data-theme="light"] .logo-text { color: var(--text-primary); } [data-theme="light"] .hamburger-line { background-color: #1a1a2e !important; color: #1a1a2e !important; } [data-theme="light"] .menu-toggle svg { stroke: #1a1a2e !important; fill: #1a1a2e !important; } /* ═══════════════════════════════════════════ 4. HERO BANNER ═══════════════════════════════════════════ */ [data-theme="light"] .hero-banner { background: var(--bg-secondary); } [data-theme="light"] .hero-banner__title { color: var(--text-primary); } [data-theme="light"] .hero-banner__subtitle { color: var(--text-body); } /* ═══════════════════════════════════════════ 5. ACTION CARDS (azioni timeline) ═══════════════════════════════════════════ */ [data-theme="light"] .action-block__card { background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } [data-theme="light"] .action-block__card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); } [data-theme="light"] .action-block__title, [data-theme="light"] .action-block__title a { color: var(--text-primary); } [data-theme="light"] .action-block__text { color: var(--text-body); } [data-theme="light"] .action-block__download { border-color: var(--border-color); color: var(--text-body); } [data-theme="light"] .action-block__download:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(45, 106, 143, 0.06); } [data-theme="light"] .impact-card { background: var(--sidebar-bg); } [data-theme="light"] .impact-card__list li { color: var(--text-body); } [data-theme="light"] .impact-card__list li strong { color: var(--text-primary); } [data-theme="light"] .toolbar { background: rgba(245, 246, 250, 0.92); border-bottom-color: var(--border-color); } [data-theme="light"] .toolbar__select { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } [data-theme="light"] .timeline-line { background: linear-gradient(to bottom, transparent 0%, var(--accent-blue) 5%, var(--accent-blue) 95%, transparent 100%); opacity: 0.2; } /* ═══════════════════════════════════════════ 6. MEMBER CARDS (coordinamento) ═══════════════════════════════════════════ */ [data-theme="light"] .member-card { background: var(--member-card-bg); border: 1px solid var(--border-color); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); } [data-theme="light"] .member-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); } [data-theme="light"] .member-card__avatar { background: var(--member-avatar-bg); } [data-theme="light"] .member-card__name { color: var(--text-primary); } [data-theme="light"] .member-card__uni { color: var(--text-muted); } [data-theme="light"] .member-card__btn { border-color: var(--border-color); color: var(--text-body); } [data-theme="light"] .member-card__btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(45, 106, 143, 0.05); } /* Team cards (main.css version) */ [data-theme="light"] .team-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="light"] .team-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); } /* ═══════════════════════════════════════════ 7. SINGLE AZIONE ═══════════════════════════════════════════ */ [data-theme="light"] .single-azione__content { background: var(--card-bg); border: 1px solid var(--border-color); } [data-theme="light"] .single-azione__text { color: var(--text-body); } [data-theme="light"] .single-azione__nav-link { background: var(--card-bg); border: 1px solid var(--border-color); } [data-theme="light"] .single-azione__nav-link:hover { background: var(--sidebar-bg); } [data-theme="light"] .single-azione__nav-title { color: var(--text-primary); } /* ═══════════════════════════════════════════ 8. FORM (Mailing List) ═══════════════════════════════════════════ */ [data-theme="light"] .form-input { background: #ffffff; border-color: var(--border-color); color: var(--text-primary); } [data-theme="light"] .form-input::placeholder { color: #999; } [data-theme="light"] .form-label { color: var(--text-primary); } [data-theme="light"] .form-radio__text { color: var(--text-body); } [data-theme="light"] .form-radio__circle { border-color: var(--border-color); } [data-theme="light"] .form-note { background: rgba(45, 106, 143, 0.04); border-color: rgba(45, 106, 143, 0.12); } [data-theme="light"] .form-note span { color: var(--text-body); } [data-theme="light"] .form-hint { color: var(--text-caption); } [data-theme="light"] .form-section__title { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="light"] .form-btn--primary { background: var(--accent-blue); color: #ffffff; } /* Combobox (university autocomplete) */ [data-theme="light"] .combobox__list { background: #ffffff; border-color: var(--border-color); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); } [data-theme="light"] .combobox__item { color: var(--text-body); } [data-theme="light"] .combobox__item:hover, [data-theme="light"] .combobox__item[aria-selected="true"] { background: var(--bg-secondary); } /* Success message */ [data-theme="light"] .form-success { color: var(--text-primary); } [data-theme="light"] .form-success h2 { color: var(--text-primary); } [data-theme="light"] .form-success p { color: var(--text-body); } /* ═══════════════════════════════════════════ 9. FOOTER ═══════════════════════════════════════════ */ [data-theme="light"] .site-footer { background: var(--bg-primary); border-top-color: var(--border-color); } [data-theme="light"] .footer-copy { color: var(--text-caption); } [data-theme="light"] .footer-link { color: var(--text-caption); } /* ═══════════════════════════════════════════ 10. FOUNDER SECTION ═══════════════════════════════════════════ */ [data-theme="light"] .founder-block__title { color: var(--text-primary); } [data-theme="light"] .founder-block__bio { color: var(--text-body); } [data-theme="light"] .founder-block__image { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08); } /* ═══════════════════════════════════════════ 11. MISCELLANEOUS ═══════════════════════════════════════════ */ [data-theme="light"] .preloader { background: #f5f6fa; } [data-theme="light"] .preloader__spinner { border-color: rgba(45, 106, 143, 0.2); border-top-color: var(--accent-blue); } [data-theme="light"] .offline-overlay { background: #f5f6fa; } [data-theme="light"] .cursor-dot { mix-blend-mode: normal; } [data-theme="light"] body::after { opacity: 0.02; } [data-theme="light"] .cookie-banner { background: #ffffff; color: var(--text-primary); box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.05); } [data-theme="light"] .cookie-banner p { color: var(--text-body); } /* Back to top button */ [data-theme="light"] .back-to-top { background: var(--accent-blue); color: #ffffff; } /* ═══════════════════════════════════════════ 12. UNIVERSITY AUTOCOMPLETE DROPDOWN ═══════════════════════════════════════════ */ [data-theme="light"] .autocomplete-dropdown { background: #ffffff; border-color: var(--border-color); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .autocomplete-item { color: var(--text-body); border-bottom-color: var(--border-color); } [data-theme="light"] .autocomplete-item:hover, [data-theme="light"] .autocomplete-active { background: var(--bg-secondary); } [data-theme="light"] .autocomplete-no-results { color: var(--text-caption); }