/* ============================================================ Lightweight accessibility widget (replaces accessibility-onetap) Namespace: .dg-a11y* — no global leakage. Effect classes live on : .dg-a11y-contrast / .dg-a11y-large / .dg-a11y-reduce-motion / .dg-a11y-underline ============================================================ */ /* ── Launcher button — bottom-END corner (flips for RTL). Max z-index: the accessibility entry point must be visible and clickable under ANY circumstances — open menus, the fullscreen generator modal (9990-9996), auth modal (9999), preview overlays. ─────────────── */ .dg-a11y-toggle { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 2147483646; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%); box-shadow: 0 8px 24px -6px rgba(96, 80, 176, 0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; } .dg-a11y-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(96, 80, 176, 0.6); } .dg-a11y-toggle:focus-visible { outline: 3px solid rgba(96, 80, 176, 0.45); outline-offset: 3px; } /* ── Panel ──────────────────────────────────────────────────────── */ .dg-a11y-panel { position: fixed; inset-inline-end: 1rem; bottom: 4.75rem; z-index: 2147483647; /* one above the toggle — panel opens over it */ width: 260px; max-width: calc(100vw - 2rem); background: var(--color-bg-white, #fff); border: 1px solid var(--color-border, rgba(178, 178, 174, 0.25)); border-radius: 16px; box-shadow: 0 16px 48px -12px rgba(49, 51, 48, 0.28); padding: 0.5rem; font-family: var(--font-primary, system-ui, sans-serif); } .dg-a11y-panel[hidden] { display: none; } .dg-a11y-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem 0.55rem; border-bottom: 1px solid var(--color-border, rgba(178, 178, 174, 0.25)); margin-bottom: 0.4rem; } .dg-a11y-panel-title { font-size: 0.92rem; font-weight: 700; color: var(--color-text-dark, #313330); } .dg-a11y-panel-close { background: transparent; border: none; cursor: pointer; color: var(--color-text-muted, #4f504e); padding: 4px; border-radius: 8px; display: inline-flex; } .dg-a11y-panel-close:hover { color: var(--color-text-dark, #313330); background: rgba(0, 0, 0, 0.05); } .dg-a11y-panel-close:focus-visible { outline: 2px solid rgba(96, 80, 176, 0.45); outline-offset: 2px; } .dg-a11y-panel-body { display: flex; flex-direction: column; gap: 0.25rem; } .dg-a11y-opt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.6rem 0.7rem; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--color-text-dark, #313330); text-align: start; transition: background 0.15s ease, border-color 0.15s ease; } .dg-a11y-opt:hover { background: rgba(96, 80, 176, 0.06); } .dg-a11y-opt:focus-visible { outline: 2px solid rgba(96, 80, 176, 0.45); outline-offset: 1px; } /* Toggle pill on the right of each option */ .dg-a11y-opt-state { flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: rgba(178, 178, 174, 0.45); position: relative; transition: background 0.2s ease; } .dg-a11y-opt-state::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; } .dg-a11y-opt[aria-pressed="true"] { background: rgba(96, 80, 176, 0.08); border-color: rgba(96, 80, 176, 0.25); } .dg-a11y-opt[aria-pressed="true"] .dg-a11y-opt-state { background: var(--color-primary, #6050b0); } .dg-a11y-opt[aria-pressed="true"] .dg-a11y-opt-state::after { transform: translateX(16px); } [dir="rtl"] .dg-a11y-opt[aria-pressed="true"] .dg-a11y-opt-state::after { transform: translateX(-16px); } .dg-a11y-reset { margin-top: 0.35rem; width: 100%; padding: 0.5rem; background: transparent; border: 1px solid var(--color-border, rgba(178, 178, 174, 0.35)); border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted, #4f504e); transition: background 0.15s ease, color 0.15s ease; } .dg-a11y-reset:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-text-dark, #313330); } .dg-a11y-reset:focus-visible { outline: 2px solid rgba(96, 80, 176, 0.45); outline-offset: 1px; } /* ============================================================ EFFECT CLASSES on ============================================================ */ /* High contrast — darken the theme's text/border tokens (used site-wide) and force link underlines. Token-based so it propagates without touching per-component CSS or breaking layout. */ html.dg-a11y-contrast { --color-text-dark: #000; --color-text-muted: #2b2c2a; --color-border: rgba(0, 0, 0, 0.45); } html.dg-a11y-contrast a:not(.btn):not([class*="btn-"]) { text-decoration: underline; } html.dg-a11y-contrast body { color: #111; } /* Larger text — scale the root font; rem/em components grow proportionally. */ html.dg-a11y-large { font-size: 115%; } /* Reduce motion — neutralise animations/transitions/smooth-scroll. */ html.dg-a11y-reduce-motion, html.dg-a11y-reduce-motion *, html.dg-a11y-reduce-motion *::before, html.dg-a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Underline links — explicit underline for low-vision visitors. */ html.dg-a11y-underline a:not(.btn):not([class*="btn-"]) { text-decoration: underline; } /* RTL: button + panel move to the (visual) right; logical props already handle inset-inline-start, this is just a safety net. */ [dir="rtl"] .dg-a11y-opt { text-align: start; }