:root { --navy: #102a43; --navy-soft: #193b55; --accent: #087f83; --accent-soft: #e8f6f4; /* The accent on white (links and text buttons) and the focus ring. */ --accent-strong: #086f78; --focus: #168ea3; --ink: #183247; --muted: #526779; --line: #dce4eb; --surface: #fff; --background: #f4f7fa; --danger: #a52a35; --radius: 12px; --shadow: 0 4px 18px #102a4308; /* The dark surfaces (sidebar, sign-in panel) and what sits on them. The values here are the original navy and teal exactly; every other theme derives them from its own --navy and --accent-on-dark below, so no theme is left with a teal sidebar highlight. */ --accent-on-dark: #76d9d1; --nav-ink: #dce7ef; --nav-text: #d9e5ee; --nav-muted: #9bb2c5; --nav-faint: #9db2c4; --nav-line: #48647a; --nav-symbol-line: #68869e; --nav-hover: #214259; --nav-active: #244960; --nav-active-ink: #8ef0df; --nav-active-bar: #58d6c2; --brand-mark: #53d2cd; --auth-copy: #b9cedd; --auth-muted: #a4bdce; --auth-chip: #d1e4ed; --trust-line: #4ab9b5; --auth-ring: #34566e; --auth-ring-fill: #18374e; --scrim: #102a4388; --backdrop: #071b2c88; /* Light tints of the accent: chips, notices, the avatar, row hover. */ --accent-line: #badbd9; --accent-ink: #285b60; --row-hover: #f4faf9; --notice-bg: #eef7f7; --notice-line: #c8dfe1; --notice-ink: #345c64; --avatar-bg: #e4f1ef; --avatar-ink: #255a61; --avatar-line: #c7e1dc; font-family: Inter, 'Segoe UI', system-ui, sans-serif; color: var(--ink); background: var(--background); font-size: 15px; line-height: 1.5; font-synthesis: none; } * { box-sizing: border-box; } body { margin: 0; } button,input,select { font: inherit; } a { color: var(--accent-strong); text-underline-offset: 3px; } button,a,input,select,summary { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } h1,h2,h3,p { margin-top: 0; } /* Appearance (Settings > Appearance): the colour theme and text size chosen on this device. core/appearance.js sets data-theme / data-text on ; everything else keeps using the same tokens. */ /* Every theme but the original: the dark-surface and tint tokens come from the theme's own colours. */ :root:where([data-theme]:not([data-theme="teal"])) { --nav-ink: color-mix(in srgb, var(--navy), white 86%); --nav-text: color-mix(in srgb, var(--navy), white 84%); --nav-muted: color-mix(in srgb, var(--navy), white 58%); --nav-faint: color-mix(in srgb, var(--navy), white 55%); --nav-line: color-mix(in srgb, var(--navy), white 26%); --nav-symbol-line: color-mix(in srgb, var(--navy), white 40%); --nav-hover: color-mix(in srgb, var(--navy), white 8%); --nav-active: color-mix(in srgb, var(--navy), white 14%); --nav-active-ink: var(--accent-on-dark); --nav-active-bar: var(--accent-on-dark); --brand-mark: var(--accent-on-dark); --auth-copy: color-mix(in srgb, var(--navy), white 75%); --auth-muted: color-mix(in srgb, var(--navy), white 65%); --auth-chip: color-mix(in srgb, var(--navy), white 82%); --trust-line: var(--accent-on-dark); --auth-ring: color-mix(in srgb, var(--navy), white 18%); --auth-ring-fill: color-mix(in srgb, var(--navy), white 5%); --scrim: color-mix(in srgb, var(--navy) 55%, transparent); --backdrop: color-mix(in srgb, var(--navy) 55%, transparent); --accent-line: color-mix(in srgb, var(--accent) 30%, white); --accent-ink: var(--accent-strong); --row-hover: color-mix(in srgb, var(--accent-soft) 55%, white); --notice-bg: var(--accent-soft); --notice-line: color-mix(in srgb, var(--accent) 25%, white); --notice-ink: var(--accent-strong); --avatar-bg: var(--accent-soft); --avatar-ink: var(--accent-strong); --avatar-line: color-mix(in srgb, var(--accent) 30%, white); } :root[data-theme="indigo"] { --navy: #1b2a5e; --navy-soft: #2a3d7c; --accent: #3f51b5; --accent-soft: #eaecfa; --accent-strong: #36459c; --focus: #5468d4; --accent-on-dark: #a9b6ff; } :root[data-theme="slate"] { --navy: #2c353d; --navy-soft: #3d4a55; --accent: #4a6572; --accent-soft: #eceff1; --accent-strong: #3d5560; --focus: #607d8b; --accent-on-dark: #a9c6d3; } :root[data-theme="plum"] { --navy: #3a1f47; --navy-soft: #522c63; --accent: #8e4585; --accent-soft: #f7ecf6; --accent-strong: #7a3a72; --focus: #a85a9e; --accent-on-dark: #e6a9de; } :root[data-theme="forest"] { --navy: #15321f; --navy-soft: #21482d; --accent: #2f7d4f; --accent-soft: #e8f5ec; --accent-strong: #286c44; --focus: #3d9c64; --accent-on-dark: #8fdcab; } /* Amplex Emirates brand palette (AE_Colors.pdf): Amplex Red #A3171D, Amplex Grey #ADADAD, Grey-Light #D8D7D6, with black. The dark surfaces are a charcoal rather than pure black so the red still reads on them; the active link reads white on a red bar, as red text on charcoal would not. */ :root[data-theme="amplex"] { --navy: #262626; --navy-soft: #3a3a3a; --accent: #a3171d; --accent-soft: #f7eaea; --accent-strong: #8e141a; --focus: #c42a31; --line: #e2e1e0; --background: #f5f5f4; --accent-on-dark: #e5666b; --nav-active: #3b2c2d; --nav-hover: #343434; --nav-active-ink: #fff; --nav-active-bar: #d8353c; --brand-mark: #d8353c; --auth-copy: #c9c8c7; --auth-muted: #c9c8c7; --trust-line: #a3171d; --auth-ring: #4a4a4a; --auth-ring-fill: #2f2f2f; } :root[data-text="compact"] { font-size: 14px; } :root[data-text="large"] { font-size: 17px; } h1 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.2; letter-spacing: -.035em; margin-bottom: 10px; } h2 { font-size: 1.15rem; margin-bottom: 12px; } h3 { font-size: 1rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } .muted { color: var(--muted); } .eyebrow { color: var(--accent); font-size: .71rem; font-weight: 750; letter-spacing: .13em; margin-bottom: 10px; } .stack { display: grid; gap: 24px; } .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; background: white; padding: 12px; } .skip-link:focus { top: 8px; }