/* ==================================================================== Live Out Loud CIC — Accessibility & Dark Mode Shared across all pages. Preferences are applied to as data-theme / data-text / data-contrast attributes and helper classes, and remembered via localStorage (see accessibility.js). ==================================================================== */ /* ---------- Skip to content (keyboard users) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--teal); color: #fff; padding: 0.75rem 1.1rem; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ---------- Clear, consistent keyboard focus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 3px; } /* ==================================================================== DARK MODE (soft, not pure black — easier on light sensitivity) ==================================================================== */ html[data-theme="dark"] { --light: #20262c; /* off-white bands -> dark base */ --gray: #c3c9d0; /* muted text -> light muted */ --teal: #3bb9b9; /* accents lightened for contrast on dark */ --orange: #ff9a52; --yellow: #ffd84d; --green: #84cf84; } html[data-theme="dark"] body { background: #191d21; color: #e8eaed; } /* white surfaces -> soft elevated dark */ html[data-theme="dark"] header, html[data-theme="dark"] .service-card, html[data-theme="dark"] .support-item, html[data-theme="dark"] .info-section, html[data-theme="dark"] .policy-section, html[data-theme="dark"] .calendar-wrapper, html[data-theme="dark"] .legend, html[data-theme="dark"] .auth-card, html[data-theme="dark"] nav ul { background: #252b31; } html[data-theme="dark"] header { box-shadow: 0 2px 12px rgba(0,0,0,0.55); } /* full-width sections that were white -> dark base */ html[data-theme="dark"] .about, html[data-theme="dark"] .who-we-support { background: #191d21; } /* tinted boxes / panels */ html[data-theme="dark"] .info-box, html[data-theme="dark"] .intro-box, html[data-theme="dark"] .support-panel { background: #20262c; } /* text fixes (these set color:var(--dark) which would stay dark) */ html[data-theme="dark"] body, html[data-theme="dark"] nav a, html[data-theme="dark"] .mission-card .mission-lead { color: #e8eaed; } html[data-theme="dark"] nav a:hover { color: var(--orange); } /* form fields */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #252b31; color: #e8eaed; border-color: #3a424a; } /* calendar specifics */ html[data-theme="dark"] .day { border-color: #333a41; } html[data-theme="dark"] .weekdays { border-bottom-color: #333a41; } html[data-theme="dark"] .legend { border-top-color: #333a41; } html[data-theme="dark"] .day.other-month { background: #1f242a; color: #5f6a73; } html[data-theme="dark"] .day.today { background: rgba(255,216,77,0.14); } /* ==================================================================== LARGER TEXT (scales rem-based sizing site-wide) ==================================================================== */ html[data-text="large"] { font-size: 112.5%; } /* ~18px base */ html[data-text="larger"] { font-size: 125%; } /* ~20px base */ /* ==================================================================== HIGH CONTRAST (boost muted text + underline content links) ==================================================================== */ html[data-contrast="high"] { --gray: #1a1a1a; } html[data-theme="dark"][data-contrast="high"] { --gray: #f4f4f4; } html[data-contrast="high"] a:not([class*="btn"]):not(.member-btn):not(.a11y-fab):not(.skip-link) { text-decoration: underline; } /* ==================================================================== UNDERLINE ALL LINKS ==================================================================== */ html.a11y-underline a:not([class*="btn"]):not(.member-btn):not(.a11y-fab):not(.skip-link) { text-decoration: underline !important; } /* ==================================================================== REDUCE MOTION (on by default if the OS asks, or via toggle) ==================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ==================================================================== ACCESSIBILITY TOOLBAR (floating button + panel) ==================================================================== */ .a11y-fab { position: fixed; bottom: 1rem; left: 1rem; z-index: 9999; width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--teal); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; } .a11y-fab:hover { opacity: 0.92; } .a11y-fab:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .a11y-panel { position: fixed; bottom: 4.9rem; left: 1rem; z-index: 9999; width: 280px; max-width: calc(100vw - 2rem); background: #fff; color: #1a1a1a; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,0.22); padding: 1rem; font-size: 0.95rem; } .a11y-panel[hidden] { display: none; } html[data-theme="dark"] .a11y-panel { background: #252b31; color: #e8eaed; } .a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .a11y-head strong { font-size: 1.05rem; color: var(--teal); } .a11y-close { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; } .a11y-opt { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: rgba(0,0,0,0.04); border: 2px solid transparent; border-radius: 9px; padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; cursor: pointer; color: inherit; font-size: 0.95rem; } html[data-theme="dark"] .a11y-opt { background: rgba(255,255,255,0.06); } .a11y-opt:hover { border-color: var(--teal); } .a11y-opt[aria-pressed="true"] { border-color: var(--teal); background: rgba(27,138,138,0.14); font-weight: 600; } .a11y-opt .tick { margin-left: auto; opacity: 0; } .a11y-opt[aria-pressed="true"] .tick { opacity: 1; color: var(--teal); } .a11y-row { margin-bottom: 0.5rem; } .a11y-row > span { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; opacity: 0.8; } .a11y-seg { display: flex; gap: 0.4rem; } .a11y-seg button { flex: 1; background: rgba(0,0,0,0.04); border: 2px solid transparent; border-radius: 9px; padding: 0.45rem; cursor: pointer; color: inherit; } html[data-theme="dark"] .a11y-seg button { background: rgba(255,255,255,0.06); } .a11y-seg button:nth-child(1) { font-size: 0.9rem; } .a11y-seg button:nth-child(2) { font-size: 1.1rem; } .a11y-seg button:nth-child(3) { font-size: 1.3rem; } .a11y-seg button[aria-pressed="true"] { border-color: var(--teal); background: rgba(27,138,138,0.14); } .a11y-reset { width: 100%; background: none; border: none; color: var(--teal); text-decoration: underline; cursor: pointer; padding: 0.4rem; font-size: 0.9rem; } @media print { .a11y-fab, .a11y-panel, .skip-link { display: none !important; } } /* ==================================================================== OPTIONAL VISUAL EXTRAS (header curve, active nav, back-to-top) — self-contained; delete this block to revert. ==================================================================== */ /* Curved bottom edge on the sticky banner (with a rainbow line) */ html header { box-shadow: none; } .header-curve { position: absolute; top: 100%; left: 0; width: 100%; height: 26px; display: block; pointer-events: none; filter: drop-shadow(0 5px 4px rgba(0,0,0,0.07)); } .header-curve .hc-fill { fill: #ffffff; } .header-curve .hc-line { stroke-width: 2.5px; opacity: 0.7; } html[data-theme="dark"] .header-curve .hc-fill { fill: #252b31; } /* Active page indicator in the navigation */ nav ul li a.active { color: var(--teal); font-weight: 600; position: relative; } nav ul li a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--teal)); } /* Back-to-top button (bottom-right; a11y button is bottom-left) */ .to-top { position: fixed; bottom: 1rem; right: 1rem; z-index: 9998; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--teal); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; } .to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top:hover { opacity: 0.92; } .to-top:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } @media print { .to-top { display: none !important; } }