/* ========================================================================== Skip link ========================================================================== */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); z-index: 10000; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-white); background: var(--color-text); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-sm); outline: 3px solid var(--color-gold); outline-offset: 2px; } /* ========================================================================== Floating accessibility widget ========================================================================== */ .a11y-widget { position: fixed; left: var(--space-md); bottom: calc(var(--space-md) + 4.5rem); z-index: 99990; display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-family: var(--font-body); pointer-events: none; } .a11y-widget__trigger { pointer-events: auto; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.625rem 0.875rem; background: var(--color-gold-dark, #967832); color: var(--color-white); border: 1px solid rgba(241, 201, 97, 0.35); border-radius: 100px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .a11y-widget__trigger:hover, .a11y-widget__trigger:focus-visible { background: var(--color-gold, #b8943f); transform: translateY(-2px); outline: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--color-gold-light); } .a11y-widget__icon { flex-shrink: 0; width: 22px; height: 22px; } .a11y-widget__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; } .a11y-widget__panel { pointer-events: auto; position: absolute; left: 0; bottom: calc(100% + 8px); top: auto; right: auto; transform: none; width: min(280px, calc(100vw - 2rem)); max-height: min(80vh, 520px); overflow-y: auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-md); } .a11y-widget__panel[hidden] { display: none !important; } .a11y-widget__title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--color-text); } .a11y-widget__note { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.45; margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-light); } .a11y-widget__options { display: flex; flex-direction: column; gap: 0.375rem; } .a11y-widget__option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); width: 100%; min-height: 44px; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--color-text); background: var(--color-cream); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: border-color var(--transition-fast), background var(--transition-fast); } .a11y-widget__option:hover, .a11y-widget__option:focus-visible { border-color: var(--color-gold); background: var(--color-white); outline: none; } .a11y-widget__option[aria-pressed='true'] { background: var(--color-gold-light); border-color: var(--color-gold); font-weight: 600; } .a11y-widget__option--reset { margin-top: var(--space-xs); background: var(--color-white); color: var(--color-gold-dark); font-weight: 600; } /* Applied accessibility settings on */ html.a11y-text-sm { font-size: 93.75%; } html.a11y-text-xs { font-size: 87.5%; } html.a11y-text-lg { font-size: 112.5%; } html.a11y-text-xl { font-size: 125%; } html.a11y-grayscale { filter: grayscale(100%); } html.a11y-high-contrast { filter: contrast(1.35); } html.a11y-high-contrast body { background: #fff; color: #000; } html.a11y-underline-links a:not(.btn):not(.a11y-widget__option):not(.a11y-widget__trigger) { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-readable-font body, html.a11y-readable-font button, html.a11y-readable-font input, html.a11y-readable-font select, html.a11y-readable-font textarea { font-family: Arial, Helvetica, sans-serif !important; } html.a11y-readable-font h1, html.a11y-readable-font h2, html.a11y-readable-font h3, html.a11y-readable-font h4 { font-family: Arial, Helvetica, sans-serif !important; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (max-width: 767px) { .a11y-widget { left: var(--space-sm); bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } .a11y-widget__trigger { min-height: 44px; padding: 0.5rem 0.75rem; } .a11y-widget__label { font-size: 0.75rem; } .a11y-widget__panel { left: 0; right: auto; bottom: calc(100% + 8px); width: min(280px, calc(100vw - 1.5rem)); } }