/* ============================================================================ ATLATECH SRL — THEME DISLESSICI (Dyslexia-Friendly) ---------------------------------------------------------------------------- Ottimizzato per la leggibilita' per persone con dislessia. Sfondo crema, interlinea alta, spaziatura aumentata, niente corsivi, niente maiuscolo, paragrafi ben separati, animazioni ridotte. Si attiva aggiungendo la classe `theme-dislessici` a . ============================================================================ */ :root.theme-dislessici, html.theme-dislessici { color-scheme: light; /* -------- PALETTE BASE — sfondo crema/beige, MAI bianco puro -------- */ --color-bg: #F5F0E8; /* Crema/beige */ --color-bg-alt: #EDE7DB; /* Beige piu' scuro */ --color-bg-card: #FAF7F2; /* Carta chiara */ --color-bg-card-hover: #F0EBDF; --color-surface: #EDE7DB; --color-border: rgba(80, 65, 45, 0.18); --color-border-hover: rgba(80, 65, 45, 0.40); --color-border-strong: rgba(80, 65, 45, 0.30); /* -------- ACCENT — colori caldi su sfondo crema -------- */ --color-primary: #3D6B8E; /* Blu-grigio morbido */ --color-primary-hover: #2E5575; --color-primary-glow: rgba(61, 107, 142, 0.25); --color-primary-soft: rgba(61, 107, 142, 0.10); --color-secondary: #5A4E3C; /* Marrone-grigio */ --color-secondary-hover: #4A3E2E; --color-secondary-glow: rgba(90, 78, 60, 0.20); --color-accent-1: #7B6FA0; /* Viola tenue */ --color-accent-1-glow: rgba(123, 111, 160, 0.20); --color-accent-2: #3A8A7B; /* Verde-teal morbido */ --color-accent-2-glow: rgba(58, 138, 123, 0.20); /* -------- TEXT — contrasto buono ma non estremo -------- */ --color-text: #2C2416; /* Marrone scuro, non nero puro */ --color-text-muted: #5A4E3C; --color-text-dim: #7A6E5C; --color-text-inverse: #FAF7F2; /* -------- STATUS -------- */ --color-success: #2E7D4A; --color-warning: #A07020; --color-danger: #B03040; --color-info: #3D6B8E; /* -------- GRADIENTS — morbidi -------- */ --gradient-primary: linear-gradient(135deg, #3D6B8E 0%, #4A7B9E 100%); --gradient-secondary: linear-gradient(135deg, #5A4E3C 0%, #6A5E4C 100%); --gradient-accent-tech: linear-gradient(135deg, #3A8A7B 0%, #7B6FA0 100%); --gradient-hero: radial-gradient(ellipse at 20% 20%, rgba(61, 107, 142, 0.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(123, 111, 160, 0.04) 0%, transparent 55%), linear-gradient(180deg, #F5F0E8 0%, #EDE7DB 100%); --gradient-cta: linear-gradient(135deg, #EDE7DB 0%, #E5DFD3 100%); --gradient-card: linear-gradient(135deg, rgba(250,247,242,0.95) 0%, rgba(237,231,219,0.80) 100%); --gradient-border: linear-gradient(135deg, rgba(61,107,142,0.45), rgba(123,111,160,0.30)); --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(61,107,142,0.03) 50%, transparent 100%); /* -------- TIPOGRAFIA — ottimizzata per dislessia -------- */ --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 */ /* Interlinea molto alta */ --lh-tight: 1.3; --lh-heading: 1.4; --lh-base: 1.85; --lh-relaxed: 2.0; /* Spaziatura caratteri e parole aumentata */ --letter-tight: 0; --letter-normal: 0.05em; --letter-wide: 0.08em; --letter-wider: 0.14em; /* -------- SHADOWS — morbide e calde -------- */ --shadow-xs: 0 1px 2px rgba(80, 65, 45, 0.06); --shadow-sm: 0 2px 6px rgba(80, 65, 45, 0.08); --shadow-md: 0 4px 14px rgba(80, 65, 45, 0.08); --shadow-lg: 0 10px 28px rgba(80, 65, 45, 0.10); --shadow-xl: 0 18px 44px rgba(80, 65, 45, 0.12); --shadow-glow: 0 0 18px var(--color-primary-glow); --shadow-glow-soft: 0 0 10px rgba(61, 107, 142, 0.12); --shadow-accent-glow: 0 0 18px var(--color-accent-1-glow); /* -------- GLASSMORPHISM -------- */ --glass-bg: rgba(250, 247, 242, 0.80); --glass-bg-strong: rgba(250, 247, 242, 0.95); --glass-border: rgba(80, 65, 45, 0.08); --glass-blur: 14px; --glass-blur-lg: 28px; /* -------- TRANSITIONS — ridotte -------- */ --dur-fast: 0.1s; --dur-base: 0.2s; --dur-slow: 0.3s; --dur-slower: 0.4s; } /* ========================================================================== GLOBAL — Dislessici: leggibilita' prima di tutto ========================================================================== */ /* Font sans-serif pulito, word-spacing, letter-spacing globali */ html.theme-dislessici body { font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; word-spacing: 0.12em; letter-spacing: 0.05em; } /* MAI testo giustificato */ html.theme-dislessici * { text-align: left !important; } html.theme-dislessici .text-center, html.theme-dislessici .section-header, html.theme-dislessici .splash-container { text-align: center !important; } /* MAI tutto maiuscolo */ html.theme-dislessici * { text-transform: none !important; } /* MAI corsivo (italic) */ html.theme-dislessici em, html.theme-dislessici i, html.theme-dislessici .italic { font-style: normal; font-weight: 600; } /* Paragrafi: max-width 70-80ch, spaziatura aumentata */ html.theme-dislessici p { max-width: 75ch; margin-bottom: 1.5em; line-height: var(--lh-base); } /* Headings: font display ma senza corsivi ne' maiuscolo */ html.theme-dislessici h1, html.theme-dislessici h2, html.theme-dislessici h3, html.theme-dislessici h4, html.theme-dislessici h5, html.theme-dislessici h6 { letter-spacing: 0.02em; word-spacing: 0.08em; margin-bottom: 0.8em; } /* Link con sottolineatura */ html.theme-dislessici a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; color: var(--color-primary); } html.theme-dislessici a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; } /* Focus visibile */ html.theme-dislessici :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(61, 107, 142, 0.20); border-radius: 3px; } /* Animazioni ridotte */ html.theme-dislessici *, html.theme-dislessici *::before, html.theme-dislessici *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* Card */ html.theme-dislessici .card { border: 1px solid var(--color-border); background: var(--color-bg-card); padding: 2rem; } html.theme-dislessici .card::before { opacity: 0; } html.theme-dislessici .card::after { background: var(--color-bg-card); } /* Pulsanti */ html.theme-dislessici .btn-primary { background: var(--gradient-primary); color: #FFFFFF; border-color: transparent; font-weight: 600; letter-spacing: 0.05em; } html.theme-dislessici .btn-primary:hover { background: linear-gradient(135deg, #2E5575 0%, #3D6B8E 100%); color: #FFFFFF; } html.theme-dislessici .btn-outline { border-color: var(--color-primary); color: var(--color-primary); } html.theme-dislessici .btn-outline:hover { background: var(--color-primary-soft); border-color: var(--color-primary-hover); color: var(--color-primary-hover); } /* Navbar */ html.theme-dislessici .site-header, html.theme-dislessici .site-header.is-scrolled { background: rgba(245, 240, 232, 0.97); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.theme-dislessici .nav-menu a { color: var(--color-text); font-weight: 500; letter-spacing: 0.04em; } html.theme-dislessici .nav-menu a:hover, html.theme-dislessici .nav-menu a.active { color: var(--color-primary); } /* Badge */ html.theme-dislessici .badge { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid rgba(61, 107, 142, 0.25); } /* Label: override text-transform */ html.theme-dislessici .label { font-weight: 700; letter-spacing: 0.06em; } /* Forms */ html.theme-dislessici .form-control { background: #FAF7F2; border: 1px solid var(--color-border-strong); color: var(--color-text); } html.theme-dislessici .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } html.theme-dislessici .form-control::placeholder { color: var(--color-text-dim); letter-spacing: 0.04em; } /* Glow orbs: attenuati */ html.theme-dislessici .glow-orb { opacity: 0.2; } /* Scrollbar */ html.theme-dislessici ::-webkit-scrollbar-thumb { background: var(--color-primary); border: 2px solid var(--color-bg); } html.theme-dislessici ::-webkit-scrollbar-track { background: var(--color-bg-alt); } /* Selection */ html.theme-dislessici ::selection { background: var(--color-primary); color: #FFFFFF; } /* Footer */ html.theme-dislessici footer, html.theme-dislessici .site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); } /* Hero */ html.theme-dislessici .hero, html.theme-dislessici .hero-section { background: var(--gradient-hero); } /* text-gradient: morbido */ html.theme-dislessici .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Card icon */ html.theme-dislessici .card-icon { background: var(--color-primary-soft); border: 1px solid rgba(61, 107, 142, 0.20); color: var(--color-primary); } html.theme-dislessici .card:hover .card-icon { background: rgba(61, 107, 142, 0.15); }