/* ============================================================================ ATLATECH SRL — THEME LIGHT (Business / Corporate IT) ---------------------------------------------------------------------------- Override dei token per tema chiaro. Si attiva aggiungendo la classe `theme-light` al o . Gestito da assets/js/theme-toggle.js. ============================================================================ */ :root.theme-light, html.theme-light { color-scheme: light; /* -------- PALETTE BASE -------- */ --color-bg: #FFFFFF; /* Bianco puro */ --color-bg-alt: #F0F4F9; /* Blu-grigio chiarissimo */ --color-bg-card: #FFFFFF; --color-bg-card-hover: #F5F8FC; --color-surface: #E8EDF5; /* Sezioni alternate: blu opacizzato */ --color-border: rgba(43, 76, 126, 0.12); --color-border-hover: rgba(74, 122, 181, 0.45); --color-border-strong: rgba(43, 76, 126, 0.22); /* -------- ACCENT — blu corporate al posto del gold -------- */ --color-primary: #4A7AB5; /* Blu medio corporate */ --color-primary-hover: #3A6BA6; --color-primary-glow: rgba(74, 122, 181, 0.30); --color-primary-soft: rgba(74, 122, 181, 0.10); --color-secondary: #2B4C7E; /* Blu scuro corporate */ --color-secondary-hover: #1E3D6E; --color-secondary-glow: rgba(43, 76, 126, 0.25); --color-accent-1: #5B6FB0; /* Indigo-blu muted */ --color-accent-1-glow: rgba(91, 111, 176, 0.25); --color-accent-2: #2196A0; /* Teal muted */ --color-accent-2-glow: rgba(33, 150, 160, 0.25); /* -------- TEXT -------- */ --color-text: #1A1A2E; /* Quasi-nero con sfumatura blu */ --color-text-muted: #4A5568; --color-text-dim: #718096; --color-text-inverse: #FFFFFF; /* -------- STATUS -------- */ --color-success: #2E7D32; --color-warning: #B7791F; --color-danger: #C53030; --color-info: #2563EB; /* -------- GRADIENTS -------- */ --gradient-primary: linear-gradient(135deg, #4A7AB5 0%, #5B8FC5 100%); --gradient-secondary: linear-gradient(135deg, #2B4C7E 0%, #3A5A8C 100%); --gradient-accent-tech: linear-gradient(135deg, #2196A0 0%, #5B6FB0 100%); --gradient-hero: radial-gradient(ellipse at 20% 20%, rgba(74, 122, 181, 0.08) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(91, 111, 176, 0.06) 0%, transparent 55%), linear-gradient(180deg, #FFFFFF 0%, #F0F4F9 100%); --gradient-cta: linear-gradient(135deg, #F0F4F9 0%, #E8EDF5 100%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(240,244,249,0.75) 100%); --gradient-border: linear-gradient(135deg, rgba(74,122,181,0.55), rgba(91,111,176,0.35)); --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(43,76,126,0.04) 50%, transparent 100%); /* -------- SHADOWS — morbide, con sfumatura blu -------- */ --shadow-xs: 0 1px 2px rgba(43, 76, 126, 0.06); --shadow-sm: 0 2px 8px rgba(43, 76, 126, 0.08); --shadow-md: 0 6px 20px rgba(43, 76, 126, 0.10); --shadow-lg: 0 16px 40px rgba(43, 76, 126, 0.12); --shadow-xl: 0 24px 60px rgba(43, 76, 126, 0.15); --shadow-glow: 0 0 28px var(--color-primary-glow); --shadow-glow-soft: 0 0 14px rgba(74, 122, 181, 0.15); --shadow-accent-glow: 0 0 24px var(--color-accent-1-glow); /* -------- GLASSMORPHISM -------- */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-bg-strong: rgba(255, 255, 255, 0.92); --glass-border: rgba(43, 76, 126, 0.08); } /* ========================================================================== COMPONENT OVERRIDES — tema chiaro business/corporate ========================================================================== */ /* Card */ html.theme-light .card::after { background: var(--color-bg-card); } /* Pulsanti primari: sfondo blu corporate, testo bianco */ html.theme-light .btn-primary { background: var(--gradient-primary); color: #FFFFFF; border-color: transparent; } html.theme-light .btn-primary:hover { background: linear-gradient(135deg, #3A6BA6 0%, #4A7AB5 100%); color: #FFFFFF; box-shadow: var(--shadow-md), 0 0 20px rgba(74, 122, 181, 0.30); } /* Pulsante outline */ html.theme-light .btn-outline { border-color: var(--color-primary); color: var(--color-primary); } html.theme-light .btn-outline:hover { background: var(--color-primary-soft); border-color: var(--color-primary-hover); color: var(--color-primary-hover); } /* Pulsante secondario */ html.theme-light .btn-secondary { background: var(--gradient-secondary); color: #FFFFFF; border-color: transparent; } html.theme-light .btn-secondary:hover { background: linear-gradient(135deg, #1E3D6E 0%, #2B4C7E 100%); color: #FFFFFF; } /* Sezioni alternate: bianco / blu-chiaro / bianco */ html.theme-light .section-alt, html.theme-light section:nth-child(even) { background-color: var(--color-surface); } /* Container/box con sfondo blu corporate (testo bianco) */ html.theme-light .box-corporate, html.theme-light .cta-box, html.theme-light .highlight-box { background: var(--gradient-secondary); color: #FFFFFF; border: none; } html.theme-light .box-corporate *, html.theme-light .cta-box *, html.theme-light .highlight-box * { color: #FFFFFF; } html.theme-light .box-corporate .text-muted, html.theme-light .cta-box .text-muted, html.theme-light .highlight-box .text-muted { color: rgba(255, 255, 255, 0.75); } /* Navbar */ html.theme-light .navbar, html.theme-light .site-header, html.theme-light header { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.theme-light .nav-link, html.theme-light .navbar a { color: var(--color-text); } html.theme-light .nav-link:hover, html.theme-light .navbar a:hover { color: var(--color-primary); } html.theme-light .nav-link.active, html.theme-light .navbar a.active { color: var(--color-secondary); font-weight: var(--fw-semibold); } /* Hero section */ html.theme-light .hero, html.theme-light .hero-section { background: var(--gradient-hero); } /* Badge */ html.theme-light .badge { background: var(--color-primary-soft); color: var(--color-secondary); border: 1px solid rgba(74, 122, 181, 0.25); } html.theme-light .badge-primary { background: var(--color-primary-soft); color: var(--color-secondary); } /* Form inputs */ html.theme-light input, html.theme-light textarea, html.theme-light select { background: #FFFFFF; border-color: var(--color-border-strong); color: var(--color-text); } html.theme-light input:focus, html.theme-light textarea:focus, html.theme-light select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); outline: none; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: var(--color-text-dim); } /* Divider / section-separator */ html.theme-light hr, html.theme-light .divider { border-color: #D1D9E6; } /* Code */ html.theme-light code { background: #EEF2F9; color: var(--color-secondary); border: 1px solid rgba(43, 76, 126, 0.15); } /* Scrollbar */ html.theme-light ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--color-primary), var(--color-secondary)); border: 2px solid var(--color-bg); } html.theme-light ::-webkit-scrollbar-track { background: var(--color-bg-alt); } /* Selection */ html.theme-light ::selection { background: var(--color-primary); color: #FFFFFF; } /* Glassmorphism panels */ html.theme-light .glass { background: var(--glass-bg); border-color: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* Tag / chip */ html.theme-light .tag, html.theme-light .chip { background: var(--color-primary-soft); color: var(--color-secondary); border: 1px solid rgba(74, 122, 181, 0.20); } /* Heading accent underline (se usata) */ html.theme-light .heading-accent::after { background: var(--gradient-primary); } /* Preferenza sistema: soft hint per futuro auto-theme */ @media (prefers-color-scheme: light) { html:not(.theme-dark):not(.theme-light) { /* Le variabili sono fornite aggiungendo .theme-light via JS. Questo media query è un soft hint per futuro auto-theme. */ } }