/** * Base document styles for DGA Angular apps. */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--dga-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Optional document fonts via DgaFontService (`data-font` on ). Default (no attr / ibm-plex) keeps --dga-font-sans from primitives.css. */ :root[data-font='noto-sans'] { --dga-font-sans: 'Noto Sans Arabic', system-ui, sans-serif; } :root[data-font='cairo'] { --dga-font-sans: 'Cairo', system-ui, sans-serif; } :root[data-font='tajawal'] { --dga-font-sans: 'Tajawal', system-ui, sans-serif; } :root[data-font='almarai'] { --dga-font-sans: 'Almarai', system-ui, sans-serif; } :root[data-font='changa'] { --dga-font-sans: 'Changa', system-ui, sans-serif; } :root[data-font='readex-pro'] { --dga-font-sans: 'Readex Pro', system-ui, sans-serif; } :root[data-font='amiri'] { --dga-font-sans: 'Amiri', 'Times New Roman', serif; } body { margin: 0; min-height: 100dvh; background: var(--dga-bg-body); color: var(--dga-text-default); font-size: var(--dga-font-text-md); line-height: var(--dga-leading-text-md); } /* Half viewport padding below 600px */ @media (max-width: 600px) { :root { --dga-viewport-padding: calc(var(--dga-viewport-base-padding) / 2); } } html.dga-nav-locked, html.dga-nav-locked body { overflow: hidden; } /* Mobile nav / header overlays lock the page — park FAB docks so they cannot sit on top of the sheet (a11y uses a max z-index stacking context). */ html.dga-nav-locked .a11y-root, html.dga-nav-locked dga-chatbot, html.dga-nav-locked dga-scroll-top { visibility: hidden !important; pointer-events: none !important; } :focus-visible { outline: 2px solid var(--dga-focus-ring); outline-offset: 2px; } /** * Native checkbox/radio ignore most author colors and follow OS `color-scheme` * (dark squares/circles on a light page). Paint them from DGA tokens instead. */ input[type='checkbox'].dga-choice, input[type='radio'].dga-choice { -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0; box-sizing: border-box; vertical-align: middle; background-color: var(--dga-bg-default); border: 1.5px solid var(--dga-border-neutral, var(--dga-divider)); background-position: center; background-repeat: no-repeat; background-size: 75%; print-color-adjust: exact; color-scheme: only light; } :root[data-theme~='dark'] input[type='checkbox'].dga-choice, :root[data-theme~='dark'] input[type='radio'].dga-choice { color-scheme: only dark; } input[type='checkbox'].dga-choice:checked, input[type='radio'].dga-choice:checked { background-color: var(--dga-bg-primary); border-color: var(--dga-bg-primary); } input[type='checkbox'].dga-choice:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.5 4.7' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } input[type='radio'].dga-choice:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.25' fill='%23fff'/%3E%3C/svg%3E"); } input[type='checkbox'].dga-choice:disabled, input[type='radio'].dga-choice:disabled { background-color: var(--dga-bg-disabled, var(--dga-bg-sunken)); border-color: var(--dga-border-disabled, var(--dga-border-neutral)); opacity: 0.55; cursor: not-allowed; } input[type='checkbox'].dga-choice:disabled:checked, input[type='radio'].dga-choice:disabled:checked { background-color: var(--dga-bg-disabled-primary, var(--dga-bg-primary)); border-color: var(--dga-bg-disabled-primary, var(--dga-bg-primary)); } /** * Form fields use a soft primary glow instead of the global black focus ring. * Keep the high-contrast black ring for buttons, links, and chrome. */ .dga-form-field:focus, .dga-form-field:focus-visible, input[dgainput]:focus, input[dgainput]:focus-visible, textarea[dgainput]:focus, textarea[dgainput]:focus-visible, select[dgaselect]:focus, select[dgaselect]:focus-visible, dga-form-control.dga-form-control:focus-within, dga-form-control.dga-form-control input:focus, dga-form-control.dga-form-control input:focus-visible, dga-form-control.dga-form-control textarea:focus, dga-form-control.dga-form-control textarea:focus-visible, dga-form-control.dga-form-control select:focus, dga-form-control.dga-form-control select:focus-visible, dga-number-input input:focus, dga-number-input input:focus-visible, dga-phone-input input:focus, dga-phone-input input:focus-visible, dga-chip-input input:focus, dga-chip-input input:focus-visible, dga-otp input:focus, dga-otp input:focus-visible, dga-date-picker input:focus, dga-date-picker input:focus-visible, dga-select input:focus, dga-select input:focus-visible, dga-multiselect input:focus, dga-multiselect input:focus-visible, dga-time-picker input:focus, dga-time-picker input:focus-visible { outline: none !important; outline-offset: 0 !important; } /* Status-tinted focus glow for standalone fields */ .dga-form-field[data-status='error']:focus-visible { --dga-form-field-accent: var(--dga-border-error); --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-red-500) 22%, transparent); } .dga-form-field[data-status='success']:focus-visible { --dga-form-field-accent: var(--dga-border-success); --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-green-500) 22%, transparent); } .dga-form-field[data-status='warning']:focus-visible { --dga-form-field-accent: var(--dga-border-warning); --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-yellow-500) 28%, transparent); } .dga-form-field[data-status='info']:focus-visible { --dga-form-field-accent: var(--dga-border-info); --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-blue-500) 22%, transparent); } /* Form field status accent (standalone inputs + form-control underline) */ [data-status='error'] { --dga-form-field-accent: var(--dga-border-error); } [data-status='success'] { --dga-form-field-accent: var(--dga-border-success); } [data-status='warning'] { --dga-form-field-accent: var(--dga-border-warning); } [data-status='info'] { --dga-form-field-accent: var(--dga-border-info); } /** * Theme / locale View Transitions. * Default snapshot animation is disabled; services drive motion via WAAPI: * - theme → circular clip-path reveal from the control (no horizontal slide) * - locale → translateX wipe */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; height: 100%; width: 100%; } /* Keep the incoming surface above while theme circle / locale wipe runs. Theme VT uses fill:'both' so the new root starts clipped to circle(0). */ ::view-transition-new(root) { z-index: 1; } ::view-transition-old(root) { z-index: 0; } /** * Lightweight theme reveal (preferred over View Transitions): * Circular surface reveal (light/dark theme + brand/color packs). * old surface color covers the viewport; a radial mask hole expands from the * control so the already-painted new theme shows through — no page bitmaps. */ @property --dga-theme-reveal-r { syntax: ''; inherits: false; initial-value: 0px; } [data-dga-theme-reveal] { position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; background: var(--dga-theme-reveal-fill, var(--dga-bg-body, #f9fafb)); /* Ensure the cover paints in the first frame before the hole expands. */ opacity: 1; -webkit-mask-image: radial-gradient( circle at var(--dga-theme-reveal-x, 50%) var(--dga-theme-reveal-y, 50%), transparent 0, transparent var(--dga-theme-reveal-r, 0px), #000 var(--dga-theme-reveal-r, 0px) ); mask-image: radial-gradient( circle at var(--dga-theme-reveal-x, 50%) var(--dga-theme-reveal-y, 50%), transparent 0, transparent var(--dga-theme-reveal-r, 0px), #000 var(--dga-theme-reveal-r, 0px) ); transition: --dga-theme-reveal-r 420ms cubic-bezier(0.4, 0, 0.2, 1); will-change: --dga-theme-reveal-r; } /* Freeze incidental CSS transitions while the reveal paints the new theme. Exclude the reveal overlay so its mask radius can still animate. */ html[data-theme-reveal] *:not([data-dga-theme-reveal]) { transition: none !important; animation-duration: 0s !important; } /* Prevent horizontal jump when scrollbars appear/disappear (esp. RTL). */ html { scrollbar-gutter: stable; } /* Avoid layout jank while the locale transform fallback animates . */ html[data-locale-wipe] { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /** * Visibility utilities * - `hidden` attribute wins over any display utility * - `data-hidden` hides inside named viewport bands: mobile / tablet / desktop * - add `sr` token to keep the node in the accessibility tree */ [hidden] { display: none !important; } @media (max-width: 600px) { [data-hidden~='mobile']:not([data-hidden~='sr']) { display: none !important; } [data-hidden~='mobile'][data-hidden~='sr'] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } @media (min-width: 601px) and (max-width: 960px) { [data-hidden~='tablet']:not([data-hidden~='sr']) { display: none !important; } [data-hidden~='tablet'][data-hidden~='sr'] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } @media (min-width: 961px) { [data-hidden~='desktop']:not([data-hidden~='sr']) { display: none !important; } [data-hidden~='desktop'][data-hidden~='sr'] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } /* Accessibility widget hooks (DgaAccessibilityService) */ [data-a11y~='reduce-motion'] *, [data-a11y~='reduce-motion'] *::before, [data-a11y~='reduce-motion'] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-a11y~='highlight-links'] a:not([dgaButton]) { text-decoration: underline; outline: 1px dashed var(--dga-border-warning); outline-offset: 2px; } [data-a11y~='highlight-titles'] h1, [data-a11y~='highlight-titles'] h2, [data-a11y~='highlight-titles'] h3, [data-a11y~='highlight-titles'] h4, [data-a11y~='highlight-titles'] h5, [data-a11y~='highlight-titles'] h6 { outline: 2px solid var(--dga-border-warning); outline-offset: 2px; } [data-a11y~='high-contrast'] { --dga-bg-body: #ffffff; --dga-bg-surface: #ffffff; --dga-bg-card: #ffffff; --dga-text-default: #000000; --dga-text-display: #000000; --dga-text-paragraph: #000000; --dga-text-muted: #1a1a1a; --dga-text-primary: #000000; --dga-border: #000000; --dga-border-primary: #000000; } [data-a11y~='dyslexia'] { /* * OpenDyslexic (Latin) + Readex Pro (Arabic, already in demo fonts). * Override the design-token var so Tailwind `font-sans` picks it up — * setting only `font-family` on html/body left components on IBM Plex. */ --dga-font-sans: OpenDyslexic, 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-family: var(--dga-font-sans); font-weight: 500; } [data-a11y~='dyslexia'] body, [data-a11y~='dyslexia'] p, [data-a11y~='dyslexia'] li, [data-a11y~='dyslexia'] h1, [data-a11y~='dyslexia'] h2, [data-a11y~='dyslexia'] h3, [data-a11y~='dyslexia'] h4, [data-a11y~='dyslexia'] h5, [data-a11y~='dyslexia'] h6, [data-a11y~='dyslexia'] label, [data-a11y~='dyslexia'] input, [data-a11y~='dyslexia'] textarea, [data-a11y~='dyslexia'] select, [data-a11y~='dyslexia'] button, [data-a11y~='dyslexia'] a { font-family: var(--dga-font-sans) !important; line-height: 1.75 !important; letter-spacing: 0.06em !important; word-spacing: 0.16em !important; } /** * Motor impaired mode — visibly larger controls + easier click / keyboard focus. * Tiny indicators (hero dots / role=tab pills) keep their look; hit area expands * via ::after. `:where()` keeps specificity at 0 so `absolute` / `fixed` win. */ [data-a11y~='motor-targets'] { --dga-motor-target: 56px; } /* Larger pointer so the mode is obvious while moving the mouse */ [data-a11y~='motor-targets'], [data-a11y~='motor-targets'] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='2' d='M6 3v26l7-6 4 9 4-2-4-9h10z'/%3E%3C/svg%3E") 6 3, auto !important; } [data-a11y~='motor-targets'] :where(a, button, [role='button'], [role='tab'], [role='switch'], summary) { position: relative; touch-action: manipulation; } /* Design-system buttons / links — visibly larger */ [data-a11y~='motor-targets'] :where(button[dgaButton], a[dgaButton]) { min-height: var(--dga-motor-target) !important; padding-inline: 1.5rem !important; padding-block: 0.75rem !important; } [data-a11y~='motor-targets'] :where( button[dgaButton][data-icon-only], a[dgaButton][data-icon-only] ) { min-width: var(--dga-motor-target) !important; min-height: var(--dga-motor-target) !important; padding-inline: 0 !important; } /* Other chrome buttons (header, footer, arrows) — grow height, keep layout */ [data-a11y~='motor-targets'] :where( button:not([role='tab']):not([role='switch']):not([dgaButton]):not(.dga-a11y-fab):not(.dga-scroll-top), [role='button']:not([role='tab']) ) { min-height: var(--dga-motor-target); padding-inline: max(0.75rem, 0.5em); } /* Switches — scale up without breaking the thumb track */ [data-a11y~='motor-targets'] :where([role='switch']) { transform: scale(1.35); transform-origin: center; } /* Text links — thicker underline + padded hit */ [data-a11y~='motor-targets'] a:not([dgaButton]) { text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; padding-block: 0.2em; padding-inline: 0.15em; } /* Tiny controls (carousel / hero dots): expand hit only, keep painted size */ [data-a11y~='motor-targets'] :where([role='tab'], button, a, [role='button'], [role='switch'], summary)::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, var(--dga-motor-target)); height: max(100%, var(--dga-motor-target)); transform: translate(-50%, -50%); } [data-a11y~='motor-targets'] input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']), [data-a11y~='motor-targets'] select, [data-a11y~='motor-targets'] textarea { min-height: var(--dga-motor-target) !important; padding-block: 0.65rem !important; padding-inline: 0.85rem !important; } [data-a11y~='motor-targets'] input[type='checkbox'], [data-a11y~='motor-targets'] input[type='radio'] { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; } /* Thick, high-contrast focus ring (Tab / keyboard) */ [data-a11y~='motor-targets'] :focus-visible { outline: 4px solid var(--dga-focus-ring) !important; outline-offset: 4px !important; } [data-a11y~='has-line-height'] body, [data-a11y~='has-line-height'] p, [data-a11y~='has-line-height'] li { line-height: var(--user-line-height, 1.6) !important; } [data-a11y~='has-letter-spacing'] body, [data-a11y~='has-letter-spacing'] p, [data-a11y~='has-letter-spacing'] li { letter-spacing: var(--user-letter-spacing, 0) !important; } [data-a11y~='has-word-spacing'] body, [data-a11y~='has-word-spacing'] p, [data-a11y~='has-word-spacing'] li { word-spacing: var(--user-word-spacing, 0) !important; } [data-a11y~='text-align-start'] body, [data-a11y~='text-align-start'] p, [data-a11y~='text-align-start'] li { text-align: start !important; } [data-a11y~='text-align-end'] body, [data-a11y~='text-align-end'] p, [data-a11y~='text-align-end'] li { text-align: end !important; } [data-a11y~='text-align-justify'] body, [data-a11y~='text-align-justify'] p, [data-a11y~='text-align-justify'] li { text-align: justify !important; } @media not (forced-colors: active) { html[data-a11y-filter='monochrome'] { filter: grayscale(1); } html[data-a11y-filter='boost-contrast'] { filter: contrast(1.15); } html[data-a11y-filter='high-contrast'] { filter: contrast(1.35); } html[data-a11y-filter='high-saturation'] { filter: saturate(2); } html[data-a11y-filter='low-saturation'] { filter: saturate(0.5); } html[data-a11y-filter='deuteranopia'] { filter: url('#dga-a11y-deuteranopia'); } }