/* ============================================================= DCA Accessibility Widget — a11y-widget.css All selectors fall into one of two buckets: 1. .a11y-fab / #a11y-panel / #a11y-reading-guide (widget chrome) 2. html[data-a11y-*] (presentation-layer state overrides) No existing selector, custom property, or rule is modified here. Orange (#E85D04) is used exclusively as a signal: the FAB tick, active-state dots, and focus rings. Never as a fill or background. TEXT-RESIZE NOTE: This site sizes type in px throughout (--fs-body: 16px, etc. in dca-tokens.css and inline styles). The root-font-size % method does not cascade to px values. Instead we override the CSS custom-property tokens defined in dca-tokens.css on the element; those tokens cover the majority of text. Hardcoded px values in nav labels, eyebrows, and tactical tags are not scaled — a future migration to rem would extend coverage to 100 %. Scale steps: ×0.875 (−1) | base (0) | ×1.125 (1) | ×1.25 (2) | ×1.375 (3) ============================================================= */ /* ───────────────────────────────────────────────────────────── FAB (launcher button) ───────────────────────────────────────────────────────────── */ .a11y-fab { /* Private tokens — never exposed to :root */ --aw-base: #080C14; --aw-cream: #F0EDE6; --aw-orange: #E85D04; position: fixed; bottom: 24px; left: 24px; z-index: 8999; /* Constant 56×56 hit target — never transforms, never resizes */ width: 56px; height: 56px; padding: 0; border: none; background: transparent; color: var(--aw-cream); display: flex; align-items: center; justify-content: center; cursor: pointer; } .a11y-fab:focus-visible { outline: 2px solid #E85D04; outline-offset: 3px; } /* Visual wrapper — all animation lives here; button stays stable */ .a11y-fab__visual { position: absolute; inset: 0; border-radius: 10px; border: 1px solid rgba(240, 237, 230, 0.20); background: var(--aw-base); display: flex; align-items: center; justify-content: center; pointer-events: none; /* Origin at the corner nearest the screen edge (left side default) */ transform-origin: bottom left; transition: opacity 220ms cubic-bezier(0.22,1,0.36,1), transform 220ms cubic-bezier(0.22,1,0.36,1); } /* Signal tick — thin orange rule on left edge of the visual */ .a11y-fab__visual::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--aw-orange); border-radius: 0 2px 2px 0; } /* Compact state — visual shrinks & tucks; button stays 56×56 */ .a11y-fab.is-compact .a11y-fab__visual { opacity: 0.85; transform: scale(0.786) translateX(-10px); } /* Hover/focus — visual expands to full; button was always 56×56 */ .a11y-fab:hover .a11y-fab__visual, .a11y-fab:focus-visible .a11y-fab__visual { opacity: 1; transform: none; } /* Right-side variant */ .a11y-fab--right { left: auto; right: 24px; } .a11y-fab--right .a11y-fab__visual { transform-origin: bottom right; } .a11y-fab--right .a11y-fab__visual::before { left: auto; right: 0; border-radius: 2px 0 0 2px; } .a11y-fab--right.is-compact .a11y-fab__visual { transform: scale(0.786) translateX(10px); } .a11y-fab__icon { width: 22px; height: 22px; flex-shrink: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .a11y-fab__visual { transition: none; } } /* ───────────────────────────────────────────────────────────── Panel ───────────────────────────────────────────────────────────── */ #a11y-panel { /* Private tokens cascade to all panel children */ --aw-base: #080C14; --aw-cream: #F0EDE6; --aw-orange: #E85D04; position: fixed; bottom: 92px; left: 16px; z-index: 9000; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100svh - 108px); background: var(--aw-base); border: 1px solid rgba(240, 237, 230, 0.13); border-radius: 12px; box-shadow: 0 0 0 1px rgba(240, 237, 230, 0.05), 0 8px 32px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4); color: var(--aw-cream); overflow-y: auto; overscroll-behavior: contain; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; /* Hidden state */ visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.98); transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms; } #a11y-panel.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition: opacity 180ms ease, transform 180ms ease, visibility 0s 0s; } /* Right-side panel position */ #a11y-panel.is-right { left: auto; right: 16px; } @media (prefers-reduced-motion: reduce) { #a11y-panel { transition: none; } } /* Panel scrollbar — matches site style */ #a11y-panel::-webkit-scrollbar { width: 4px; } #a11y-panel::-webkit-scrollbar-track { background: transparent; } #a11y-panel::-webkit-scrollbar-thumb { background: rgba(240, 237, 230, 0.15); border-radius: 2px; } /* ── Panel header ── */ .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; border-bottom: 1px solid rgba(240, 237, 230, 0.09); } .a11y-panel__eyebrow { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aw-cream); display: flex; align-items: center; gap: 10px; } /* Orange signal tick before panel eyebrow */ .a11y-panel__eyebrow::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--aw-orange); border-radius: 1px; flex-shrink: 0; } .a11y-panel__close { width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(240, 237, 230, 0.13); background: transparent; color: var(--aw-cream); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 140ms ease; } .a11y-panel__close:hover { background: rgba(240, 237, 230, 0.08); } .a11y-panel__close:focus-visible { outline: 2px solid var(--aw-orange); outline-offset: 2px; } /* ── Panel sections ── */ .a11y-panel__section { padding: 14px 20px 10px; border-bottom: 1px solid rgba(240, 237, 230, 0.07); } .a11y-panel__section:last-of-type { border-bottom: none; } .a11y-panel__section-label { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240, 237, 230, 0.40); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .a11y-panel__section-label::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--aw-orange); border-radius: 1px; flex-shrink: 0; } /* ── Toggle controls ── */ .a11y-panel__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 0; background: transparent; border: none; color: var(--aw-cream); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; border-radius: 4px; transition: color 140ms ease; } .a11y-panel__toggle:hover { color: #ffffff; } .a11y-panel__toggle:focus-visible { outline: 2px solid var(--aw-orange); outline-offset: 2px; } /* Active-state indicator: orange signal dot (NOT a fill) */ .a11y-panel__toggle::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(240, 237, 230, 0.30); background: transparent; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .a11y-panel__toggle[aria-pressed="true"]::after { border-color: var(--aw-orange); background: var(--aw-orange); box-shadow: 0 0 5px rgba(232, 93, 4, 0.55); } /* ── Text-size stepper row ── */ .a11y-panel__row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; } .a11y-panel__control-label { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; color: var(--aw-cream); } .a11y-panel__stepper { display: flex; align-items: center; gap: 4px; } .a11y-panel__step { position: relative; width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(240, 237, 230, 0.17); background: transparent; color: var(--aw-cream); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 140ms ease, border-color 140ms ease; } .a11y-panel__step:hover { background: rgba(240, 237, 230, 0.08); border-color: rgba(240, 237, 230, 0.30); } .a11y-panel__step:focus-visible { outline: 2px solid var(--aw-orange); outline-offset: 2px; } .a11y-panel__step:disabled { opacity: 0.28; cursor: not-allowed; } /* Orange signal dot below the step button when active */ .a11y-panel__step.is-active::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--aw-orange); } /* ── Panel footer ── */ .a11y-panel__footer { padding: 12px 20px 18px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(240, 237, 230, 0.09); } .a11y-panel__reset { width: 100%; padding: 9px 16px; border-radius: 6px; border: 1px solid rgba(240, 237, 230, 0.17); background: transparent; color: var(--aw-cream); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 140ms ease; } .a11y-panel__reset:hover { background: rgba(240, 237, 230, 0.08); } .a11y-panel__reset:focus-visible { outline: 2px solid var(--aw-orange); outline-offset: 2px; } .a11y-panel__stmt { display: block; text-align: center; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.10em; color: rgba(240, 237, 230, 0.45); text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; } .a11y-panel__stmt:hover { color: var(--aw-cream); } .a11y-panel__stmt:focus-visible { outline: 2px solid var(--aw-orange); outline-offset: 3px; border-radius: 2px; color: var(--aw-cream); } /* ───────────────────────────────────────────────────────────── Reading guide (cursor-tracking horizontal mask) ───────────────────────────────────────────────────────────── */ #a11y-reading-guide { position: fixed; left: 0; right: 0; height: 2.4em; background: rgba(8, 12, 20, 0.12); border-top: 1px solid rgba(232, 93, 4, 0.22); border-bottom: 1px solid rgba(232, 93, 4, 0.22); pointer-events: none; z-index: 8998; display: none; transform: translateY(-50%); will-change: top; } html[data-a11y-guide="on"] #a11y-reading-guide { display: block; } /* ───────────────────────────────────────────────────────────── State: TEXT SIZE Overrides CSS custom-property tokens from dca-tokens.css. Coverage: all elements using var(--fs-*). Hardcoded px values in nav labels and tactical tags are out of scope without a rem migration — documented above. ───────────────────────────────────────────────────────────── */ html[data-a11y-text="-1"] { --fs-display: clamp(29.75px, 5vw, 54.25px); --fs-h1: clamp(24.50px, 4vw, 42.00px); --fs-h2: clamp(21.00px, 3vw, 31.50px); --fs-h3: clamp(15.75px, 2.2vw,22.75px); --fs-body-lg: 15.75px; --fs-body: 14px; --fs-small: 12.25px; --fs-tag: 8.75px; --fs-tag-sm: 7.875px; } html[data-a11y-text="1"] { --fs-display: clamp(38.25px, 5vw, 69.75px); --fs-h1: clamp(31.50px, 4vw, 54.00px); --fs-h2: clamp(27.00px, 3vw, 40.50px); --fs-h3: clamp(20.25px, 2.2vw,29.25px); --fs-body-lg: 20.25px; --fs-body: 18px; --fs-small: 15.75px; --fs-tag: 11.25px; --fs-tag-sm: 10.125px; } html[data-a11y-text="2"] { --fs-display: clamp(42.50px, 5vw, 77.50px); --fs-h1: clamp(35.00px, 4vw, 60.00px); --fs-h2: clamp(30.00px, 3vw, 45.00px); --fs-h3: clamp(22.50px, 2.2vw,32.50px); --fs-body-lg: 22.50px; --fs-body: 20px; --fs-small: 17.50px; --fs-tag: 12.50px; --fs-tag-sm: 11.25px; } html[data-a11y-text="3"] { --fs-display: clamp(46.75px, 5vw, 85.25px); --fs-h1: clamp(38.50px, 4vw, 66.00px); --fs-h2: clamp(33.00px, 3vw, 49.50px); --fs-h3: clamp(24.75px, 2.2vw,35.75px); --fs-body-lg: 24.75px; --fs-body: 22px; --fs-small: 19.25px; --fs-tag: 13.75px; --fs-tag-sm: 12.375px; } /* ───────────────────────────────────────────────────────────── State: ENHANCED CONTRAST Overrides text-color tokens from dca-tokens.css on , cascading to all elements that reference them via var(). ───────────────────────────────────────────────────────────── */ html[data-a11y-contrast="high"] { --text-on-dark: #FFFFFF; --text-on-dark-2: #DEDAD4; --text-on-dark-3: #AEAAA4; --text-primary: #000000; --text-secondary: #111111; --text-muted: #2A2A2A; --tactical-mid: #9EAA8C; --tactical: #3A4030; } /* ───────────────────────────────────────────────────────────── State: BIG CURSOR ───────────────────────────────────────────────────────────── */ html[data-a11y-cursor="big"], html[data-a11y-cursor="big"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M6 3 L6 35 L14.5 26.5 L20 39 L26 36 L20.5 23.5 L33 23.5 Z' fill='%23F0EDE6' stroke='%23080C14' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; } /* ───────────────────────────────────────────────────────────── State: READABLE FONT (dyslexia-friendly system stack) Overrides --font-sans token; elements using var(--font-sans) get the override automatically. Also loosens tracking/spacing. ───────────────────────────────────────────────────────────── */ html[data-a11y-readable="on"] { --font-sans: 'Verdana', 'Arial', 'Helvetica Neue', Helvetica, sans-serif; } html[data-a11y-readable="on"] body, html[data-a11y-readable="on"] p, html[data-a11y-readable="on"] li, html[data-a11y-readable="on"] h1, html[data-a11y-readable="on"] h2, html[data-a11y-readable="on"] h3, html[data-a11y-readable="on"] h4, html[data-a11y-readable="on"] a, html[data-a11y-readable="on"] button { letter-spacing: 0.01em; word-spacing: 0.07em; } /* ───────────────────────────────────────────────────────────── State: LINE SPACING ───────────────────────────────────────────────────────────── */ html[data-a11y-linespacing="1"] body, html[data-a11y-linespacing="1"] p, html[data-a11y-linespacing="1"] li, html[data-a11y-linespacing="1"] h1, html[data-a11y-linespacing="1"] h2, html[data-a11y-linespacing="1"] h3, html[data-a11y-linespacing="1"] h4 { line-height: 2 !important; } /* ───────────────────────────────────────────────────────────── State: LETTER SPACING ───────────────────────────────────────────────────────────── */ html[data-a11y-letterspacing="1"] body, html[data-a11y-letterspacing="1"] p, html[data-a11y-letterspacing="1"] li, html[data-a11y-letterspacing="1"] h1, html[data-a11y-letterspacing="1"] h2, html[data-a11y-letterspacing="1"] h3, html[data-a11y-letterspacing="1"] h4 { letter-spacing: 0.08em !important; } /* ───────────────────────────────────────────────────────────── State: STOP ANIMATIONS Freezes CSS animations and transitions; hides background video. JS companion pauses carousel setInterval via pause buttons. ───────────────────────────────────────────────────────────── */ html[data-a11y-motion="stop"] *, html[data-a11y-motion="stop"] *::before, html[data-a11y-motion="stop"] *::after { animation-play-state: paused !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="stop"] video[autoplay] { display: none !important; } /* ───────────────────────────────────────────────────────────── State: HIGHLIGHT LINKS ───────────────────────────────────────────────────────────── */ html[data-a11y-links="highlight"] a { text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 700 !important; } /* ───────────────────────────────────────────────────────────── State: STRONG FOCUS OUTLINE ───────────────────────────────────────────────────────────── */ html[data-a11y-focus="strong"] *:focus-visible { outline: 3px solid #E85D04 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(232, 93, 4, 0.18) !important; border-radius: 2px; }