/* ============================================================ a11y.css — native accessibility & reading preferences for elizamarin.com (2026 redesign). Applied via data-attributes on . The FAB and panel inherit the page's own CSS variables, so they stay theme-aware (light / dark / night-mode) with no duplicated colour logic. ============================================================ */ /* ---------- NIGHT MODE — forces the site's own dark palette ---------- */ html[data-theme="dark"]{ color-scheme:dark; --paper:#181a1f; --panel:#1e2126; --panel2:#23262c; --warm:#201e1c; --warm2:#26231f; --bg:#131418; --mist:#3a4049; --steel:#7b818b; --slate:#a7adb6; --graphite:#c7ccd3; --ink:#eef0f3; --rule:#31363f; --rule2:#282c33; --lila:#b8a9e6; --lila-soft:#2e2a3f; --lila-deep:#c6bbee; --lila-mid:#a99bd8; --lila-vivid:#bda9ff; --act:#bda9ff; --confirm:#a99bd8; --handoff:#9aa0a8; } /* ---------- REDUCE EYE STRAIN (warm, low glare) ---------- */ html[data-strain="1"]::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:2147482500; background:rgba(255,213,148,.12); mix-blend-mode:multiply; } /* ---------- TEXT SIZE ---------- */ html[data-size="lg"]{ font-size:132% !important; } html[data-size="xl"]{ font-size:148% !important; } /* ---------- COMFORTABLE SPACING (dyslexia / ADHD) ---------- */ html[data-spacing="1"] p, html[data-spacing="1"] li, html[data-spacing="1"] .lede, html[data-spacing="1"] .cv-bio, html[data-spacing="1"] .xp-desc, html[data-spacing="1"] .rf-line, html[data-spacing="1"] .dec-why{ line-height:1.95 !important; letter-spacing:.03em !important; word-spacing:.12em !important; } /* ---------- HIGHLIGHT LINKS ---------- */ html[data-links="1"] a:not(.a11y-fab):not(.brand){ text-decoration:underline !important; text-underline-offset:3px; text-decoration-thickness:2px; } /* ---------- REDUCE MOTION ---------- */ html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } /* ---------- READING GUIDE (spotlight bands following the cursor) ---------- */ .a11y-guide{ display:none; } html[data-guide="1"] .a11y-guide{ display:block; } .a11y-guide .a11y-band{ position:fixed; left:0; right:0; background:rgba(8,10,14,.52); pointer-events:none; z-index:2147482000; } html[data-theme="dark"] .a11y-guide .a11y-band{ background:rgba(0,0,0,.68); } /* ============================================================ FAB + PANEL — inherit the page's design tokens ============================================================ */ .a11y-fab{ position:fixed; left:20px; bottom:20px; width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--paper); border:none; cursor:pointer; z-index:2147483600; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px rgba(21,23,28,.5); transition:transform .16s, box-shadow .16s; } .a11y-fab svg{ width:26px; height:26px; } .a11y-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(21,23,28,.55); } .a11y-fab:focus-visible{ outline:3px solid var(--lila-vivid); outline-offset:3px; } .a11y-panel{ position:fixed; left:20px; bottom:84px; width:322px; max-width:calc(100vw - 40px); max-height:calc(100vh - 110px); overflow-y:auto; background:var(--panel2); color:var(--ink); border:1px solid var(--rule); border-radius:16px; box-shadow:0 24px 60px -22px rgba(0,0,0,.4); z-index:2147483600; padding:18px 18px 14px; font-family:var(--sans, 'Merriweather Sans', system-ui, sans-serif); font-size:14px; } .a11y-panel[hidden]{ display:none; } .a11y-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .a11y-h strong{ font-size:15px; font-weight:700; text-transform:lowercase; } .a11y-h .a11y-close{ background:none; border:none; cursor:pointer; font-size:20px; line-height:1; color:inherit; padding:4px 6px; border-radius:8px; } .a11y-h .a11y-close:hover{ background:color-mix(in srgb, var(--ink) 10%, transparent); } .a11y-sub{ font-family:var(--mono, 'Fira Code', monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin:0 0 12px; } .a11y-group{ font-family:var(--mono, 'Fira Code', monospace); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lila-deep); margin:14px 0 7px; } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--rule); } .a11y-row .lbl{ display:flex; flex-direction:column; gap:1px; } .a11y-row .lbl b{ font-weight:600; } .a11y-row .lbl small{ color:var(--slate); font-size:11.5px; } /* toggle switch */ .a11y-switch{ flex:0 0 auto; width:42px; height:24px; border-radius:14px; border:none; background:var(--mist); position:relative; cursor:pointer; transition:background .16s; } .a11y-switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .16s; box-shadow:0 1px 3px rgba(0,0,0,.3); } .a11y-switch[aria-pressed="true"]{ background:var(--lila-deep); } .a11y-switch[aria-pressed="true"]::after{ left:21px; } .a11y-switch:focus-visible{ outline:2px solid var(--lila-vivid); outline-offset:2px; } /* segmented (text size) + action buttons */ .a11y-seg{ display:flex; gap:4px; } .a11y-seg button{ border:1px solid var(--rule); background:var(--panel); color:var(--ink); cursor:pointer; border-radius:8px; padding:5px 9px; font-family:inherit; font-size:12px; } .a11y-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .a11y-seg button:focus-visible{ outline:2px solid var(--lila-vivid); outline-offset:2px; } .a11y-act{ border:1px solid var(--rule); background:var(--panel); color:var(--ink); cursor:pointer; border-radius:9px; padding:7px 12px; font-family:inherit; font-size:12.5px; font-weight:600; } .a11y-act:hover{ background:var(--ink); color:var(--paper); } .a11y-act:focus-visible{ outline:2px solid var(--lila-vivid); outline-offset:2px; } .a11y-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); } .a11y-reset{ background:none; border:none; color:var(--lila-vivid); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; padding:4px; } .a11y-note{ font-family:var(--mono, 'Fira Code', monospace); font-size:9px; color:var(--steel); } @media (prefers-reduced-motion: reduce){ .a11y-fab, .a11y-switch, .a11y-switch::after{ transition:none; } }