/* * Accessibility toolbar (font-size decrease/increase/reset + dark-mode * toggle) -- gap found against the client's industry.sa reference site. * Markup: partials/accessibility-toolbar.blade.php, included in the * verification banner's header row. Behavior: assets/dga/dga-a11y-toolbar.js. * Dark-mode tokens ([data-theme="dark"]) already existed in dga-tokens.css; * this just wires up the toggle. Font-size scale below relies on every * DGA type-scale value being defined in rem (dga-typography.css), so * scaling 's root font-size proportionally resizes all of them. */ .dga-a11y-toolbar { display: flex; align-items: center; gap: var(--spacing-xs); } .dga-a11y-toolbar__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border-neutral-primary); background: var(--background-card); color: var(--text-default); font-family: var(--font-family-arabic); font-size: var(--font-size-text-xs); font-weight: var(--font-weight-semibold); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .dga-a11y-toolbar__btn:hover { border-color: var(--colors-primary-sa-flag-600-primary); color: var(--colors-primary-sa-flag-600-primary); background-color: var(--background-primary-25); } .dga-a11y-toolbar__btn--theme[aria-pressed="true"] { border-color: var(--colors-primary-sa-flag-600-primary); color: var(--colors-primary-sa-flag-600-primary); } /* Root font-size scale -- proportionally resizes every rem-based DGA type token sitewide. Applied to by dga-a11y-toolbar.js (and, on repeat visits, by index.php's inline anti-flash script). */ html.dga-font-size-large { font-size: 112.5%; } html.dga-font-size-larger { font-size: 125%; }