/* ============================================================ SKINS PER AREA — pilotate dalla classe sul (.area-istituzionale | .area-ragazzi). Stessi template, sola differenziazione grafica (spec §4.4). I colori interattivi della skin ragazzi usano un arancio scuro conforme WCAG AA (contrasto ≥ 4.5:1 su bianco) — spec §12. ============================================================ */ :root { /* Skin istituzionale (default) */ --skin-accent: var(--color-primary); --skin-accent-deep: var(--color-primary-active); --skin-brand: var(--surface-brand); --skin-brand-2: var(--surface-brand); --skin-tint: var(--blue-100); } /* Arancio scuro AA-safe per la skin ragazzi (≈5:1 su bianco). */ body.area-ragazzi { --skin-accent: #B5471A; --skin-accent-deep: #8F3411; --skin-brand: #B5471A; --skin-brand-2: #9A3412; --skin-tint: var(--rag-soft); } /* ---------- Brand band ---------- */ body.area-ragazzi .brandband { background: linear-gradient(135deg, var(--skin-brand), var(--skin-brand-2)); } body.area-ragazzi .site-search__submit { background: var(--skin-accent); } /* ---------- Nav ---------- */ body.area-ragazzi .nav-link:hover { color: var(--skin-accent); } body.area-ragazzi .nav-link.is-active, body.area-ragazzi .nav-link[aria-current="page"] { color: var(--skin-accent); border-bottom-color: var(--skin-accent); } body.area-ragazzi .nav-drop { border-top-color: var(--skin-accent); } body.area-ragazzi .nav-drop a:hover { background: var(--skin-tint); color: var(--skin-accent); } /* ---------- Accenti di sezione / intro ---------- */ body.area-ragazzi .section-title__bar { background: var(--skin-accent); } body.area-ragazzi .page-intro__icon { background: var(--skin-tint); color: var(--skin-accent); } body.area-ragazzi .page-intro__eyebrow { color: var(--skin-accent); } body.area-ragazzi .card--accent { border-top-color: var(--skin-accent); } body.area-ragazzi .aside-card--accent { border-top-color: var(--skin-accent); } body.area-ragazzi .alert--info { border-left-color: var(--skin-accent); } body.area-ragazzi .alert--info .alert__icon { color: var(--skin-accent); } /* ---------- Bottoni ---------- */ body.area-ragazzi .btn--primary { background: var(--skin-accent); border-color: var(--skin-accent); } body.area-ragazzi .btn--primary:hover { background: var(--skin-accent-deep); border-color: var(--skin-accent-deep); } body.area-ragazzi .btn--secondary { color: var(--skin-accent); border-color: var(--skin-accent); } body.area-ragazzi .btn--secondary:hover { background: var(--skin-tint); } body.area-ragazzi .btn--ghost { color: var(--skin-accent); } body.area-ragazzi .btn--ghost:hover { background: var(--skin-tint); } /* ---------- Link e badge ---------- */ body.area-ragazzi .lib-prose a, body.area-ragazzi .news-card__more, body.area-ragazzi .service-card__more, body.area-ragazzi .section-title__action { color: var(--skin-accent); } body.area-ragazzi .badge--brand { background: var(--skin-accent); } body.area-ragazzi .badge--soft.badge--brand { background: var(--skin-tint); color: var(--skin-accent-deep); } body.area-ragazzi .tile__icon, body.area-ragazzi .service-card__icon, body.area-ragazzi .resource-card__icon { background: var(--skin-tint); color: var(--skin-accent); } /* Lo stato attivo dello switcher (tab colorata per area) è gestito in layout.css tramite var(--skin-accent), che risolve già per skin. */