/* ============================================= ACCESSIBILITY TOOLBAR ============================================= */ .a11y-toolbar { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 999999; /* above everything, including the sticky navbar */ } .a11y-toolbar__trigger { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-family: var(--font-primary); font-weight: 700; font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: background var(--transition), transform var(--transition); } .a11y-toolbar__trigger:hover { background: var(--color-primary-mid); transform: translateY(-2px); } .a11y-toolbar__panel { position: absolute; left: 0; bottom: calc(100% + var(--space-3)); width: 280px; max-width: calc(100vw - var(--space-8)); background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); } .a11y-toolbar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .a11y-toolbar__heading { font-size: var(--text-md); font-weight: 700; color: var(--color-text); } .a11y-toolbar__close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--color-text-muted); flex-shrink: 0; } .a11y-toolbar__close:hover { background: var(--color-surface-mid); color: var(--color-text); } .a11y-toolbar__group { margin-bottom: var(--space-4); } .a11y-toolbar__group:last-of-type { margin-bottom: var(--space-5); } .a11y-toolbar__label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .a11y-toolbar__btn-row { display: flex; gap: var(--space-2); } .a11y-toolbar__step { flex: 1; height: 40px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-primary); font-weight: 700; color: var(--color-text); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), background var(--transition), color var(--transition); } .a11y-toolbar__step:hover { border-color: var(--color-primary-light); } .a11y-toolbar__step[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .a11y-toolbar__toggle { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); cursor: pointer; } .a11y-toolbar__toggle input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; } .a11y-toolbar__reset { width: 100%; height: 38px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-primary); font-weight: 600; font-size: var(--text-sm); color: var(--color-text-secondary); } .a11y-toolbar__reset:hover { border-color: var(--color-primary); color: var(--color-primary); } @media (max-width: 480px) { .a11y-toolbar { left: var(--space-3); bottom: var(--space-3); } .a11y-toolbar__panel { width: calc(100vw - var(--space-6)); } } /* ============================================= ACCESSIBILITY STATES — toggled on by accessibility.js and persisted via localStorage. Text-size scaling works by overriding the theme's own --text-* design tokens (style.css :root), rather than a root-level zoom/rem trick, since every component in this theme already sizes its type from those tokens. ============================================= */ html.a11y-text-lg { --text-xs: 16px; --text-sm: 18px; --text-md: 20px; --text-lg: 23px; --text-xl: 27px; --text-2xl: 34px; --text-3xl: 41px; --text-4xl: 54px; --text-5xl: 68px; --text-6xl: 81px; } html.a11y-text-xl { --text-xs: 18px; --text-sm: 20px; --text-md: 23px; --text-lg: 26px; --text-xl: 30px; --text-2xl: 38px; --text-3xl: 45px; --text-4xl: 60px; --text-5xl: 75px; --text-6xl: 90px; } html.a11y-contrast { --color-text-secondary: #000000; --color-text-muted: #1a1a1a; --color-border: #000000; --color-border-light: #4d4d4d; } html.a11y-contrast a:not(.btn) { text-decoration: underline; } html.a11y-underline-links a { text-decoration: underline !important; }