/* iesg_tokens.css — the i-ESG design system, and the only file in this product that contains a colour. WHY THIS FILE EXISTS -------------------- Until now every screen carried its own copy of the palette in an inline :root block — five identical copies of the same fourteen values, plus two Tailwind pages with none, plus the launcher with three literals of its own. Changing one colour meant finding nine places, and nothing would have told us if we missed one. That is the fork the design system exists to prevent. WHERE THE VALUES COME FROM -------------------------- assistant/org/rams/design/design_system/tokens_fallback.css — the derived plain-hex form of the delivery (v1.1-ext.2), with our two confirmed overrides already folded in and labelled. It is derived, never hand-edited; regenerate with assistant/scripts/build_design_tokens.py. Hex rather than oklch on purpose: this product has no Tailwind v4 build (nine pages, three on the v3 play CDN, zero .css files before this one), and oklch() falls back to *no colour at all* in older and embedded renderers. A mockup is a file we hand to someone else to open. WHAT IS OURS AND WHAT IS THEIRS ------------------------------- Everything under "DELIVERY" is the design team's frame and is not ours to argue with. Everything under "PRODUCT LAYER" is this product's own vocabulary — the names the screens already use — pointed at delivery tokens. The mapping table and the measurement behind each row are in assistant/org/rams/isectoralpha_ds_2026-09-03/MAPPING.md. Dark is the product's mode. The delivery ships both; the light block is here so issuer_fill.html, which follows the reader's OS setting, has real values on both sides rather than a palette that only exists in one. */ /* ══ DELIVERY — i-ESG design system v1.1-ext.2 · DARK ═══════════════════════ Two rows are ours, marked OVERRIDE, both confirmed by Dahun 2026-09-03. */ :root { --background: #141414; --foreground: #FAFBFD; --card: #181818; --card-foreground: #FAFBFD; --popover: #1E1E1E; --popover-foreground: #FAFBFD; --primary: #1AD98A; --primary-foreground: #242424; --secondary: #014F40; --secondary-foreground: #FAFBFD; --muted: #152320; --muted-foreground: #A2A6A9; --accent: #152320; --accent-foreground: #FAFBFD; --destructive: #EF584B; /* OVERRIDE — delivered #B71D18 (2.54:1 on popover) */ --destructive-foreground: #242424; /* OVERRIDE — delivered #FFFFFF */ --warning: #EC8829; /* OVERRIDE — delivery has no warning token */ --warning-muted: #301D0D; /* was #3A2A16 in this file — a hand-copy drift from the design system. Corrected 2026-09-09; the ink tier below is measured against THIS value. */ --destructive-muted: #341915; /* ink --destructive 4.76 */ --primary-muted: #09251A; /* ink --muted-foreground 6.63 */ --border: #4F4F4F; /* OVERRIDE — delivered #383838 = 1.42:1 on --bg-card, and this product's densest screen (20+ panels) stops reading as cards at that value. Landed at 2.04 deliberately, NOT 3:1: a border loud enough for i_collect_dashboard would shout on the sparse screens that share this token. */ --input: #303140; --border-strong: #808080; /* ADDITION — the boundary a FORM CONTROL needs, which --border above deliberately declines. bg 4.66 · card 4.50 · popover 4.22 · input 3.24 — clears SC 1.4.11's 3:1 on every surface a control lands on, --input included. ⛔ CONTROLS ONLY (select, text/date input, drop-zone edge). Cards, panels, gridlines and dividers stay on --border — using this for a card undoes that decision by the back door. Source: ext_token_overrides.css §BORDER-STRONG (v1.1-ext.7), confirmed by Dahun 2026-09-16. */ --ring: #1AD98A; --font-sans: Inter, ui-sans-serif, sans-serif, system-ui; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius: 0.75rem; --shadow-sm: 0 12px 20px 3px hsl(0 0% 0% / 0.15), 0 1px 2px 2px hsl(0 0% 0% / 0.15); --shadow-lg: 0 12px 20px 3px hsl(0 0% 0% / 0.15), 0 4px 6px 2px hsl(0 0% 0% / 0.15); /* ── DERIVED INK STEP ──────────────────────────────────────────────────── The delivery's dark text ramp is two deep (--foreground #FAFBFD, then --muted-foreground #A2A6A9); in dark, --accent-foreground is byte-identical to --foreground so it adds no step. This product has three text jobs — value, label, caption — and has always had three. One step is derived between the two delivery tokens, at 65%, the same construction and the same optical position the MACRO retheme used (ds_retheme_2026-08-04 §3). 11.24:1 on --card. It is written as hex, not color-mix(), because two consumers here read computed colour as a string. */ --ink-2: #CBCED2; /* ══ PRODUCT LAYER ══════════════════════════════════════════════════════ The names the screens already use. Nothing below introduces a colour — each is a pointer at a delivery token above. Worst-case measured contrast against the darkest surface it lands on is in the comment. */ --bg-primary: var(--background); /* page plane */ --bg-surface: var(--card); /* header, aside, drawer — chrome */ --bg-card: var(--popover); /* cards, the layer above chrome */ --bg-card-hover: var(--accent); /* hover / selected row */ --border-primary: var(--border); --border-subtle: rgba(255,255,255,.05); /* alpha hairline; the delivery has no equivalent */ --text-primary: var(--foreground); /* 15.68:1 worst surface */ --text-secondary: var(--ink-2); /* 10.28:1 — was #94a3b8, 6.33 */ --text-muted: var(--muted-foreground); /* 6.62:1 — was #475569, 2.14 (the 132-use token) */ --accent-emerald: var(--primary); /* 8.77:1 — was #059669, 4.31 */ --accent-blue: var(--primary); /* 8.77:1 — was #2563eb, 3.14 */ --accent-amber: var(--warning); /* 6.28:1 — was #d97706, 5.10 */ --accent-red: var(--destructive); /* 4.77:1 — was #dc2626, 3.36 */ --accent-cyan: var(--primary); /* 3 uses, all informational labels */ --accent-violet: var(--primary); /* 1 use, a border-left rule; #7c3aed was 2.85 */ /* ══ CHART LAYER ════════════════════════════════════════════════════════ Source: org/rams/design/design_system/ext_chart_categorical.css — OURS, dark-only, never merged into the delivery (a drop would silently overwrite it). Rules: that file + CHART_COLOR_RULES.md. ⚠ THE DELIVERED --chart-1..5 IS NOT THIS. It is a monochrome cyan SEQUENTIAL ramp (#CDEFF6…#204A5C) for ordered magnitude. Series get the categorical ramp below, taken from the front, N at a time. The ceiling of five is arithmetic, not taste: in the dark band there is a colour desert between hue 66 and 132, so a warm green→red ramp does not exist. These values were already in footprint_explorer.html as literals, in this order, byte-identical — the ramp was right and only its NAME was missing, which is the whole reason a literal survives a sweep. */ --chart-cat-1: #65a30d; /* 5.74:1 */ --chart-cat-2: #8b5cf6; /* 4.19:1 */ --chart-cat-3: #0891b2; /* 4.82:1 — deliberately shared with scope 3 */ --chart-cat-4: #a16207; /* 3.60:1 */ --chart-cat-5: #db2777; /* 3.86:1 */ /* Scope colours are CONTENT, not chrome: a reader ties the legend swatch to the column badge without reading either. Folding these into the brand hue would break a correspondence nobody consciously makes. RE-COLOURED 2026-10-15 (Dahun, hardening criterion C9). Red and amber read as error and warning on every screen that also uses them for status, so a Scope 1 bar looked like an alarm. The trio is now the front of the validated categorical ramp (--chart-cat-2, --chart-cat-1, --chart-cat-3), which was checked as a set: violet, lime, cyan. The old values are kept in the comments below for the record. */ --chart-scope-1: #8b5cf6; /* == --chart-cat-2. Was #b91c1c. */ --chart-scope-1-was: #b91c1c; /* moved off #dc2626 for separation, not contrast: relief channels (label + position) carry it. ΔE 15.35 from our dark --destructive #EF584B, so an error and a Scope 1 mark cannot be confused — that gap only exists because we overrode --destructive. */ --chart-scope-2: #65a30d; /* == --chart-cat-1. Was #d97706 (== status warning). */ --chart-scope-2-was: #d97706; /* amber cannot move in dark: every passing step exits L 0.48–0.67. Scope 1 moved instead. */ --chart-scope-3: #0891b2; /* == --chart-cat-3, declared sharing */ /* WATER SERIES (Dahun, 2026-10-16, hardening 4th evaluation N5). Water had borrowed the categorical ramp, so Direct blue was --chart-cat-4 brown and read as the orange warning box under it. Water now has its own blue family, and grey water is a warm grey (slate --chart-status-neutral means "no data"). Validated as a set with carbon (--chart-structural) on --bg-card #1E1E1E, qa/tools/validate_palette.mjs: worst normal-vision dE 16.45, PASS, 0 fail. Warnings, not gates: #38bdf8 L 0.754 above the dark band, #78716c chroma 0.012 (grey on purpose). Never on the same chart as the scope trio. */ --chart-water-blue: #2563eb; /* direct blue, and AWARE (blue water, weighted) */ --chart-water-blue-indirect: #38bdf8; /* indirect blue, embedded in energy and fuel */ --chart-water-grey: #78716c; /* grey water */ /* ══ CHART: status · ordinal · structural ═══════════════════════════════ Source: ext_chart_categorical.css §2 · §2b · §4b. Contrast vs --bg-card #1E1E1E. These exist for canvas/JS consumers, which cannot take var() in fillStyle. The JS keeps its literal; the token row is what makes that literal greppable back to a name instead of looking invented. */ --chart-status-neutral: #64748b; /* 3.50 — absence / no data. NOT for a total (§8.5) */ --chart-status-warning: #d97706; /* 5.23 */ --chart-status-critical: #e11d48; /* 3.55 */ --chart-status-good: #16a34a; /* 5.06 */ --chart-structural: #CBCED2; /* 10.56 — totals, rollups, baselines, anchor nodes */ --chart-ord-waste-1: #047857; /* 3.04 Recycled/Reused — ORDINAL: the order IS the data */ --chart-ord-waste-2: #65a30d; /* 5.40 Energy Recovery */ --chart-ord-waste-3: #c2410c; /* 3.22 Incinerated */ --chart-ord-waste-4: #ec4899; /* 4.73 Landfilled */ /* ══ RADIUS — the four roles fixed by 8475d29 ═══════════════════════════ The delivery's --radius 0.75rem (12px) is used by no screen. Intentional. */ --r-card: 9px; --r-inner: 7px; --r-input: 6px; --r-badge: 5px; /* ══ INK TIER ═══════════════════════════════════════════════════════════ Source: ext_token_overrides.css §INK. Dahun-confirmed 2026-09-09. Why these exist: markup lays text--{300,400} over bg--500/{15,20,25}, so the ink sits on a tint made of ITSELF. --primary is bright enough to survive that (5.22 on its own /25); these two are not — --destructive is only 4.90 on the bare card, so it never had the headroom. Built by holding the delivered hue and saturation and raising ONLY lightness to the first step that clears 4.5 on the darkest tint the markup actually makes (/25). No --primary-ink: it is not needed, and a token added for symmetry is a token nobody measured. */ --destructive-ink: #FF7A69; /* 4.67 on --destructive /25 · 6.54 on card */ --warning-ink: #F9953A; /* 4.78 on --warning /25 · 7.45 on card */ } /* ══ DELIVERY — LIGHT ══════════════════════════════════════════════════════ Only issuer_fill.html reaches this block, via prefers-color-scheme. The brand green is mode-dependent as of v1.1 and that is the design team's decision, not a defect: #027A57 here, #1AD98A above. */ @media (prefers-color-scheme: light) { :root.iesg-follows-os { --background: #FAFBFD; --foreground: #242424; --card: #FFFFFF; --card-foreground: #242424; --popover: #FFFFFF; --popover-foreground: #242424; --primary: #027A57; --primary-foreground: #FFFFFF; --secondary: #DEF6E5; --secondary-foreground: #027A57; --muted: #F4F4F4; --muted-foreground: #5C5F66; --accent: #E5E5E5; --accent-foreground: #383838; --destructive: #B71D18; --destructive-foreground: #FFFFFF; --warning: #96520C; --warning-muted: #FFE4D0; --border: #E5E5E5; --input: #D8DBDD; --border-strong: #767676; /* ADDITION — see the dark block. bg 4.39 · card 4.54 · popover 4.54 · input 3.27. Declared in BOTH modes, unlike --border, because a control's boundary is identification and 1.4.11 binds either way. */ --ring: #027A57; /* OVERRIDE — delivered #1AD98A, 1.79:1 as a focus ring */ --ink-2: #53575A; /* derived, same construction, 7.29:1 on --card */ --shadow-sm: 0 12px 20px 3px hsl(220.9091 16.6667% 74.1176% / 0.15), 0 1px 2px 2px hsl(220.9091 16.6667% 74.1176% / 0.15); --shadow-lg: 0 12px 20px 3px hsl(220.9091 16.6667% 74.1176% / 0.15), 0 4px 6px 2px hsl(220.9091 16.6667% 74.1176% / 0.15); } } /* ══ LIGHT MODE, CHOSEN (2026-10-26) ══════════════════════════════════════ The same delivery light values as the block above, for a page that sets (js/core/theme.js: the reader's stored choice, else the profile's theme_default). The block above stays for issuer_fill, which follows the OS. Two copies of the delivery values: if the design team ships new light values, both blocks change in the same turn. Rows marked LIGHT-PROPOSED have no delivered light value. Each one points at a delivered light token where one fits; the two that needed a new value say so. ⚠ Not yet confirmed by Dahun; they belong in ext_token_overrides.css once confirmed (Ground rule 3). */ :root[data-theme="light"] { color-scheme: light; --background: #FAFBFD; --foreground: #242424; --card: #FFFFFF; --card-foreground: #242424; --popover: #FFFFFF; --popover-foreground: #242424; --primary: #027A57; --primary-foreground: #FFFFFF; --secondary: #DEF6E5; --secondary-foreground: #027A57; --muted: #F4F4F4; --muted-foreground: #5C5F66; --accent: #F0F1F3; /* LIGHT-PROPOSED: delivered #E5E5E5 is also --border, so a hover row and its own hairline were the same grey */ --accent-foreground: #383838; --destructive: #B71D18; --destructive-foreground: #FFFFFF; --warning: #96520C; --warning-muted: #FFE4D0; --border: #E5E5E5; --input: #D8DBDD; --border-strong: #767676; --ring: #027A57; --ink-2: #53575A; --shadow-sm: 0 12px 20px 3px hsl(220.9091 16.6667% 74.1176% / 0.15), 0 1px 2px 2px hsl(220.9091 16.6667% 74.1176% / 0.15); --shadow-lg: 0 12px 20px 3px hsl(220.9091 16.6667% 74.1176% / 0.15), 0 4px 6px 2px hsl(220.9091 16.6667% 74.1176% / 0.15); --border-subtle: rgba(0,0,0,.06); /* LIGHT-PROPOSED: the alpha hairline, inverted */ --primary-muted: #DEF6E5; /* LIGHT-PROPOSED: = delivered light --secondary */ --destructive-muted: #FCE8E6; /* LIGHT-PROPOSED: new value, no delivered tint. Ink --destructive #B71D18 on it is 5.9:1 */ --destructive-ink: #B71D18; /* LIGHT-PROPOSED: = --destructive; on a light tint the accent has the headroom the dark one lacked */ --warning-ink: #96520C; /* LIGHT-PROPOSED: = --warning, same reason */ --chart-structural: #5C5F66; /* LIGHT-PROPOSED: = delivered light --muted-foreground. #CBCED2 on white is 1.5:1, a total that disappears */ } /* ══ TYPE SCALE (hardening, 2026-10-15) ══════════════════════════════════════ Why: the toy audit (assistant/org/dash/hardening/toy_audit_2026-10-15.md, T4) measured 10 to 13 distinct font sizes per screen, the most common 10-11px, the smallest 8.5px, and no size token anywhere. IBM Carbon sets body at 14px and its smallest token at 12px. Criterion C5: at most six sizes on a screen, all from here, body 13px or more, nothing under 11px. Six steps, named by job rather than by size, so a screen picks "label" and not "11.5px": caption 11px axis ticks, footnotes, the one line under a figure label 12px table headers, chips, field labels, small buttons body 13px running text, table cells (the default) lead 15px section titles, the sentence a screen opens with title 20px the page title, card headline figures display 28px the one headline number a screen leads with Numbers sit in the body face with tabular figures, not in a monospace face: monospace columns were the "terminal" half of the toy impression. */ :root { --fs-caption: 11px; --fs-label: 12px; --fs-body: 13px; --fs-lead: 15px; --fs-title: 20px; --fs-display: 28px; --lh-tight: 1.25; --lh-body: 1.5; --font-ui: -apple-system, "Segoe UI", "Inter", "Malgun Gothic", system-ui, sans-serif; } .num, .tnum { font-variant-numeric: tabular-nums; } /* ══ DESIGN BIBLE, UAE EDITION (2026-10-28) ══════════════════════════════════ assistant/org/rams/design/design_bible/00_design_bible.md. Applied to the AD Ports local instance on Dahun's word ("오늘 싹 다 바꿔"). On only where js/core/theme.js sets , which it does when the deployment profile says "design_bible": "uae". Every other deployment (NEALIS, demo) renders exactly as before. This is a trial in one instance, NOT the company design system: nothing here is in ext_token_overrides.css. If it holds after the AD Ports visit, the light values go there (Ground rule 3), and this block shrinks to the switch. Contrast figures were measured against the surface each value lands on (bible D9). */ /* D6: one face. --font-ui listed the system face first, so Windows drew Segoe UI and Inter (loaded on most pages) was never used. D7: two radii, controls 6px and cards 12px (the design system's --radius). */ :root[data-bible="uae"] { --font-ui: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --r-card: 12px; --r-inner: 8px; --r-input: 6px; --r-badge: 4px; /* D4: gold marks what is confirmed, nothing else. Dark values. */ --gold-ink: #D7BC6D; /* AEGold 300: 8.97 on --popover, 9.92 on --background */ --gold-line: #B68A35; /* AEGold 500: 5.64 on --card, a line not text */ --gold-muted: #2A2316; /* gold-ink on it 8.37 */ --band: var(--muted); /* Type scale, two steps up (2026-10-28, design feedback session: "폰트가 작다"). Measured before: 99% of the text on the nine menu screens sat at 11-13px, the Dashboard 87% at caption. UAE DS 3.0 sets body at 16px; a data screen stays one step under that. Every size on these screens comes from these six tokens (the Tailwind pages map xs..4xl onto them), so this block is the whole change. */ --fs-caption: 13px; --fs-label: 14px; --fs-body: 15px; --fs-lead: 17px; --fs-title: 22px; --fs-display: 32px; } /* T1-T4, light. Warm canvas, sand band, warm hover; every text token was re-measured on the new canvas (bible §4). Cards stay white. */ :root[data-bible="uae"][data-theme="light"] { --background: #FAF8F5; /* T1, was #FAFBFD. --foreground 14.64, --muted-foreground 6.03, --primary 5.05, --destructive 6.19, --warning 5.65 */ --band: #F5F0EB; /* T2, sections and table heads. --foreground 13.71, --muted-foreground 5.65, --primary 4.73. 1.13 against a card */ --muted: #F5F0EB; /* the quiet fill takes the sand tone, so a chip or a muted row on the warm canvas is not a cool grey patch */ --accent: #F0EBE4; /* hover, was #F0F1F3. 1.19 against a card, --muted-foreground 5.39 */ --gold-ink: #7C5E24; /* T3, AEGold 700. 6.03 on a card, 5.61 on --gold-muted */ --gold-line: #92722A; /* T4, AEGold 600. A line only: 4.25 on the canvas, under 4.5 for text */ --gold-muted: #F9F7ED; /* AEGold 50 */ /* Shadows took the cool hue of the old canvas (hsl 220). Warm neutral now. */ --shadow-sm: 0 8px 18px 2px hsl(30 12% 60% / 0.12), 0 1px 2px 1px hsl(30 12% 60% / 0.12); --shadow-lg: 0 12px 20px 3px hsl(30 12% 60% / 0.14), 0 4px 6px 2px hsl(30 12% 60% / 0.12); } /* D5: numbers line up. Every table cell and figure in the bible deployment. */ :root[data-bible="uae"] td, :root[data-bible="uae"] th { font-variant-numeric: tabular-nums; } /* D4: the confirmed marker. One class, both modes. */ .mark-confirmed { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .02em; color: var(--gold-ink, #7C5E24); background: var(--gold-muted, #F9F7ED); border: 1px solid var(--gold-line, #92722A); border-radius: var(--r-badge, 4px); padding: 1px 6px; line-height: 1.5; white-space: nowrap; } /* Bible rules that need a selector, not just a value. Kept here, beside the values they use, so turning the bible off is one attribute. */ /* D4: a settled decision is a confirmed fact; the gold marker says so. Still quieter than a waiting one (amber, 14% fill): the gold tint is AEGold 50. */ :root[data-bible="uae"] .jst.done { color: var(--gold-ink); border-color: var(--gold-line); background: var(--gold-muted); font-weight: 600; } /* D7: no decorative gradients. A fading divider is a plain hairline. */ :root[data-bible="uae"] .module-divider::after { background: var(--border-primary); } :root[data-bible="uae"] .ai-content-container { background-image: none; } /* T2: table heads sit on the sand band, so a table reads as one block on a white card without a heavier rule. */ :root[data-bible="uae"][data-theme="light"] thead th { background-color: var(--band); } /* D9, every deployment (2026-10-28): anything reached by Tab shows where it is. Measured missing on Anomalies (filter, selects, table rows) and on Data Intake's company select, where page CSS removed the outline. A 2px ring in --ring (5.17:1 light, the brand mint dark). Mouse clicks do not draw it: :focus-visible only. */ :focus-visible { outline: 2px solid var(--ring) !important; outline-offset: 2px; } /* ══ ARABIC (2026-10-28, AD Ports design feedback: "아랍어도 추가하자 … 아랍어의 경우 메뉴 바가 오른쪽에서 왼쪽으로") ════════════════════════════════ , set before first paint by js/core/theme.js. Design bible RTL rules: the size scale does not change (Careem keeps one scale for both scripts), only the direction does. Text in Noto Kufi Arabic, headings in Alexandria (UAE Design System 3.0). Numbers, units, codes and dates stay left to right; the faces below fall back to Inter for Latin, so a figure looks the same in both languages. */ :root[lang="ar"] { --font-ui: "Noto Kufi Arabic", "Inter", "Segoe UI", system-ui, sans-serif; --font-ar-head: "Alexandria", "Noto Kufi Arabic", "Inter", system-ui, sans-serif; } /* Pages and charts name Inter directly in places; the Arabic face goes first everywhere text is set, except where a figure or an identifier is. */ :root[lang="ar"] body, :root[lang="ar"] body :where(div, span, p, a, li, td, th, label, button, select, option, input, summary, small, b, strong, em, dt, dd) { font-family: var(--font-ui) !important; } :root[lang="ar"] :where(h1, h2, h3, h4, .iesg-shell-title, .iesg-rail .brand) { font-family: var(--font-ar-head) !important; } :root[lang="ar"] :where(code, pre, .mono, .font-mono, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* Arabic has no capitals and is joined: tracking breaks the joins. */ :root[lang="ar"] body * { letter-spacing: 0 !important; } :root[lang="ar"] body { line-height: 1.6; } /* Physical alignment written for English, turned for Arabic. Tailwind utilities and inline text-align:left are the common cases. */ :root[dir="rtl"] .text-left { text-align: right; } :root[dir="rtl"] .text-right { text-align: left; } :root[dir="rtl"] th, :root[dir="rtl"] td { text-align: start; } /* Charts keep their own direction (bible: the time axis is not mirrored). A canvas inherits direction from its element, and RTL turned "<0.1%" into "0.1%>" and put the ellipsis of a cut label on the wrong end. */ :root[dir="rtl"] canvas { direction: ltr; } /* Arrows and chevrons that point the way the reader goes. */ :root[dir="rtl"] :where(.rtl-flip, [data-lucide="chevron-right"], [data-lucide="chevron-left"], [data-lucide="arrow-right"], [data-lucide="arrow-left"]) { transform: scaleX(-1); } /* The switch itself: one movement, out and back in. */ html.iesg-lang-leaving body { opacity: 0; transition: opacity .2s ease-in; } @keyframes iesg-lang-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } :root[lang="ar"] body { animation: iesg-lang-in .32s ease-out; } @media (prefers-reduced-motion: reduce) { html.iesg-lang-leaving body { transition: none; } :root[lang="ar"] body { animation: none; } }