/** * MLCA Website — Global Stylesheet * Methuen Lake Cottagers Association * Based on Toronto Harriers Design System * * All colours, fonts, layout values derive from CSS custom properties * set in by Settings::getCSSVariables() * * Sections: * 1. Reset & Accessibility * 2. CSS Variables (Defaults) * 3. Typography * 4. Layout & Container * 5. Header & Navigation * 6. Page Header & Hero * 7. Page Content Container * 8. Flash Messages & Alerts * 9. Buttons * 10. Forms & Form Elements * 11. Cards & Tiles * 12. Data Tables * 13. Badges * 14. Modals * 15. Gallery & Lightbox * 16. Tab Navigation (MLCA-specific) * 17. Emergency Route (MLCA-specific) * 18. Member Dashboard Tiles (MLCA-specific) * 19. Footer * 20. Utility Classes * 21. Responsive (768px & 480px) */ /* ================================================================ 1. RESET & ACCESSIBILITY ================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: var(--font-size-base, 16px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body, 'Open Sans', sans-serif); font-size: 1rem; font-weight: var(--body-weight, 400); color: var(--text-color, #1f2937); background-color: var(--background-color, #ffffff); line-height: var(--line-height, 1.6); min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; } /* Skip link (accessibility) */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: var(--primary-color, #407f35); color: #fff; padding: 12px 24px; border-radius: 0 0 8px 8px; font-weight: 600; font-size: 0.95rem; z-index: 100000; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; outline: 3px solid var(--primary-color, #407f35); outline-offset: 2px; } *:focus-visible { outline: 3px solid var(--primary-color, #407f35); outline-offset: 2px; } /* ================================================================ 2. CSS VARIABLES All configurable values come from the database via getCSSVariables() in the inline