/* ============================================================================ ATLATECH SRL — THEME DALTONICI (Color-Blind Safe) ---------------------------------------------------------------------------- Palette completamente safe per protanopia, deuteranopia, tritanopia. Basata sulla palette Tol (Paul Tol's colour schemes). MAI solo colore per trasmettere info: sempre icone + pattern + testo. Si attiva aggiungendo la classe `theme-daltonici` a . ============================================================================ */ :root.theme-daltonici, html.theme-daltonici { color-scheme: light; /* -------- PALETTE BASE — sfondo neutro chiaro -------- */ --color-bg: #FAFAFA; --color-bg-alt: #F0F0F0; --color-bg-card: #FFFFFF; --color-bg-card-hover: #F5F5F5; --color-surface: #EDEDED; --color-border: rgba(0, 0, 0, 0.18); --color-border-hover: rgba(0, 119, 187, 0.50); --color-border-strong: rgba(0, 0, 0, 0.30); /* -------- ACCENT — Palette Tol color-blind safe -------- */ --color-primary: #0077BB; /* Blu Tol */ --color-primary-hover: #005F99; --color-primary-glow: rgba(0, 119, 187, 0.30); --color-primary-soft: rgba(0, 119, 187, 0.10); --color-secondary: #333333; --color-secondary-hover: #1A1A1A; --color-secondary-glow: rgba(51, 51, 51, 0.20); --color-accent-1: #EE3377; /* Magenta Tol */ --color-accent-1-glow: rgba(238, 51, 119, 0.25); --color-accent-2: #009988; /* Ciano/Teal Tol */ --color-accent-2-glow: rgba(0, 153, 136, 0.25); /* -------- TEXT -------- */ --color-text: #1A1A1A; --color-text-muted: #4A4A4A; --color-text-dim: #6B6B6B; --color-text-inverse: #FFFFFF; /* -------- STATUS — distinguibili senza colore -------- */ --color-success: #009988; /* Ciano Tol (+ icona checkmark) */ --color-warning: #EE7733; /* Arancione Tol (+ icona warning) */ --color-danger: #EE3377; /* Magenta Tol (+ icona X) */ --color-info: #0077BB; /* Blu Tol (+ icona info) */ /* -------- GRADIENTS — flat per chiarezza -------- */ --gradient-primary: #0077BB; --gradient-secondary: #333333; --gradient-accent-tech: linear-gradient(135deg, #009988 0%, #0077BB 100%); --gradient-hero: radial-gradient(ellipse at 20% 20%, rgba(0, 119, 187, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(0, 153, 136, 0.05) 0%, transparent 55%), linear-gradient(180deg, #FAFAFA 0%, #F0F0F0 100%); --gradient-cta: linear-gradient(135deg, #F0F0F0 0%, #EDEDED 100%); --gradient-card: #FFFFFF; --gradient-border: linear-gradient(135deg, rgba(0,119,187,0.55), rgba(0,153,136,0.35)); --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(0,119,187,0.04) 50%, transparent 100%); /* -------- TIPOGRAFIA -------- */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.9375rem; /* 15 */ --fs-base: 1.0625rem; /* 17 */ --fs-md: 1.1875rem; /* 19 */ --fs-lg: 1.375rem; /* 22 */ /* -------- SHADOWS -------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.12); --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.14); --shadow-glow: 0 0 20px var(--color-primary-glow); --shadow-glow-soft: 0 0 10px rgba(0, 119, 187, 0.15); --shadow-accent-glow: 0 0 20px var(--color-accent-2-glow); /* -------- GLASSMORPHISM -------- */ --glass-bg: rgba(255, 255, 255, 0.80); --glass-bg-strong: rgba(255, 255, 255, 0.95); --glass-border: rgba(0, 0, 0, 0.10); --glass-blur: 14px; --glass-blur-lg: 28px; } /* ========================================================================== GLOBAL — Daltonici: distinguibilita' senza colore ========================================================================== */ /* Link SEMPRE sottolineati */ html.theme-daltonici a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--color-primary); } html.theme-daltonici a:hover { color: var(--color-primary-hover); text-decoration-thickness: 3px; } html.theme-daltonici a:visited { color: #882288; } /* Focus ben distinguibile */ html.theme-daltonici :focus-visible { outline: 3px solid #0077BB; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0, 119, 187, 0.30); border-radius: 2px; } /* Pulsanti con bordi spessi sempre visibili */ html.theme-daltonici .btn { border-width: 2px; border-style: solid; } html.theme-daltonici .btn-primary { background: #0077BB; color: #FFFFFF; border: 2px solid #005F99; font-weight: 600; } html.theme-daltonici .btn-primary:hover { background: #005F99; color: #FFFFFF; border-color: #004477; } html.theme-daltonici .btn-outline { border: 2px solid #0077BB; color: #0077BB; background: transparent; } html.theme-daltonici .btn-outline:hover { background: rgba(0, 119, 187, 0.08); border-color: #005F99; color: #005F99; } /* Sweep decorativo: off per chiarezza */ html.theme-daltonici .btn::before { display: none; } /* Card con bordi spessi */ html.theme-daltonici .card { border: 2px solid rgba(0, 0, 0, 0.15); background: #FFFFFF; } html.theme-daltonici .card::before, html.theme-daltonici .card::after { display: none; } html.theme-daltonici .card:hover { border-color: #0077BB; box-shadow: var(--shadow-md); } /* Navbar */ html.theme-daltonici .site-header, html.theme-daltonici .site-header.is-scrolled { background: rgba(250, 250, 250, 0.97); border-bottom: 2px solid rgba(0, 0, 0, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.theme-daltonici .nav-menu a { color: #1A1A1A; font-weight: 500; text-decoration: none; } html.theme-daltonici .nav-menu a:hover { color: #0077BB; text-decoration: underline; text-decoration-thickness: 2px; } html.theme-daltonici .nav-menu a.active { color: #0077BB; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; } /* Badge con bordi + icone, non solo colore */ html.theme-daltonici .badge { background: rgba(0, 119, 187, 0.08); color: #0077BB; border: 2px solid rgba(0, 119, 187, 0.30); } /* Forms */ html.theme-daltonici .form-control { border: 2px solid rgba(0, 0, 0, 0.25); background: #FFFFFF; color: #1A1A1A; } html.theme-daltonici .form-control:focus { border-color: #0077BB; box-shadow: 0 0 0 4px rgba(0, 119, 187, 0.20); } /* Errore: bordo + icona, non solo rosso */ html.theme-daltonici .form-control.is-invalid { border-color: #EE3377; box-shadow: 0 0 0 4px rgba(238, 51, 119, 0.12); } /* Glow orbs: attenuati */ html.theme-daltonici .glow-orb { opacity: 0.25; } /* Scrollbar */ html.theme-daltonici ::-webkit-scrollbar-thumb { background: #0077BB; border: 2px solid #FAFAFA; } html.theme-daltonici ::-webkit-scrollbar-track { background: #F0F0F0; } /* Selection */ html.theme-daltonici ::selection { background: #0077BB; color: #FFFFFF; } /* Footer */ html.theme-daltonici footer, html.theme-daltonici .site-footer { border-top: 2px solid rgba(0, 0, 0, 0.12); background: #F0F0F0; } /* Card icon con palette Tol */ html.theme-daltonici .card-icon { background: rgba(0, 119, 187, 0.08); border: 2px solid rgba(0, 119, 187, 0.20); color: #0077BB; } html.theme-daltonici .card:hover .card-icon { background: rgba(0, 119, 187, 0.15); box-shadow: var(--shadow-glow-soft); } /* text-gradient: flat per daltonici */ html.theme-daltonici .text-gradient { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #0077BB; color: #0077BB; } html.theme-daltonici .text-gradient-tech { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #009988; color: #009988; } /* Hero section */ html.theme-daltonici .hero, html.theme-daltonici .hero-section { background: var(--gradient-hero); } /* prefers-reduced-motion: rispettare */ @media (prefers-reduced-motion: reduce) { html.theme-daltonici *, html.theme-daltonici *::before, html.theme-daltonici *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }