/* ============================================================ APAC Maresme — Accessibility states Applied via classes / --apac-scale on , persisted in localStorage and restored before paint (see header inline script). ============================================================ */ /* ── Text scaling (A− / A+) ─────────────────────────────── Scales the READING content only; chrome stays stable. Reading containers set a scaled base size; children use em. */ .apac-prose, .apac-reading { font-size: calc(var(--fs-body) * var(--apac-scale)); } .apac-prose h2 { font-size: calc(var(--fs-h2-article) * var(--apac-scale)); } .apac-prose h3 { font-size: calc(var(--fs-h3) * var(--apac-scale)); } .apac-prose .apac-lead, .apac-reading .apac-lead { font-size: calc(var(--fs-lead) * var(--apac-scale)); } /* ── Dyslexia toggle: swap reading font Atkinson → Lexend ── (production may offer OpenDyslexic; see README) */ html.apac-dyslexia .apac-prose, html.apac-dyslexia .apac-reading, html.apac-dyslexia .apac-article__lead { font-family: var(--font-ui); letter-spacing: .01em; word-spacing: .04em; } /* ── High contrast toggle ───────────────────────────────── Pure-white surfaces, pure-black ink, deepened accents. */ html.apac-contrast { --c-paper: #FFFFFF; --c-superficie-2: #FFFFFF; --c-targeta: #FFFFFF; --c-tinta: #000000; --c-tinta-suau: #000000; --c-vora: #000000; --c-petroli: #0A4D49; --c-petroli-fosc: #062D2B; --c-terracota: #8A2E12; --c-terracota-fosc: #5E1E0C; --c-verd-natura: #1F4A33; } html.apac-contrast body { background: #FFFFFF; } html.apac-contrast .apac-card, html.apac-contrast .apac-prose, html.apac-contrast .apac-reading { background: #FFFFFF; color: #000000; } html.apac-contrast a { color: var(--c-petroli-fosc); text-decoration: underline; } /* Buttons/CTAs/tiles are not "content links" — keep their own high-contrast styling instead of the generic dark-underlined link treatment. */ html.apac-contrast .apac-btn, html.apac-contrast .apac-nav__cta, html.apac-contrast .apac-chip, html.apac-contrast .apac-social__tile, html.apac-contrast .apac-iconbtn { text-decoration: none; } html.apac-contrast .apac-btn--cta, html.apac-contrast .apac-btn--primary, html.apac-contrast .apac-nav__cta, html.apac-contrast .apac-chip.is-active { color: #fff; } html.apac-contrast .apac-btn--secondary, html.apac-contrast .apac-btn--ghost, html.apac-contrast .apac-chip { color: #000; } /* Dark sections (footer, CTA/newsletter/soci bands, "Secció fosca") → pure black + white in high contrast, so links don't inherit the dark content-link colour and disappear on a dark background. */ html.apac-contrast .apac-footer, html.apac-contrast .apac-footer__bar, html.apac-contrast .apac-cta-band, html.apac-contrast .apac-soci-hero, html.apac-contrast .apac-newsletter__card, html.apac-contrast .is-style-apac-dark { background: #000; color: #fff; } html.apac-contrast :is(.apac-footer, .apac-cta-band, .apac-soci-hero, .apac-newsletter__card, .is-style-apac-dark) :is(h1, h2, h3, h4, p, span, li, cite, label, strong) { color: #fff; } html.apac-contrast :is(.apac-footer, .apac-cta-band, .apac-soci-hero, .apac-newsletter__card, .is-style-apac-dark) a { color: #fff; text-decoration: underline; } html.apac-contrast :is(.apac-footer, .apac-cta-band, .apac-soci-hero, .apac-newsletter__card, .is-style-apac-dark) .material-symbols-rounded { color: #fff; } /* Social tiles legible on pure black */ html.apac-contrast .apac-footer__social a, html.apac-contrast .apac-social--footer .apac-social__tile { background: #000; border: 1px solid #fff; color: #fff; } /* Strengthen borders so structure stays legible on pure white */ html.apac-contrast .apac-card, html.apac-contrast .apac-sponsor-tile, html.apac-contrast .apac-tool { border-width: 2px; }