/* ===================================================================== ACCESSIBILITY: base text size + font-size toggle widget Loaded on every front-end page. Because all font-size values in this project are written in rem/em (no px font-sizes), raising the root font-size here automatically scales every page's text together. ===================================================================== */ /* Raise the site-wide baseline (was the browser default of 100% / ~16px). This alone satisfies "increase font sizes across the site" without touching every individual page. */ html { font-size: 106%; } /* Keyboard accessibility: visible focus ring on every interactive element (the site previously had no focus styling, which fails WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* --------------------------------------------------------------------- Font-size toggle widget (A- / Reset / A+) --------------------------------------------------------------------- */ .a11y-toggle { display: flex; align-items: center; gap: 2px; background: var(--cream); border: 1.5px solid var(--cream-dark); border-radius: 8px; padding: 3px; } .a11y-btn { background: transparent; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--navy); padding: 6px 10px; border-radius: 6px; font-size: 0.8rem; line-height: 1; min-width: 34px; min-height: 34px; transition: background 0.15s, color 0.15s; } .a11y-btn:hover { background: var(--navy); color: var(--white); } .a11y-reset { font-size: 0.88rem; } @media (max-width: 600px) { .a11y-toggle { padding: 2px; } .a11y-btn { padding: 5px 8px; min-width: 30px; min-height: 30px; } }