/* NNUH design tokens for the jobs portal. * * These are the same tokens patients.nnuh.org publishes, which in turn follow * nnuh.org's theme. Copied rather than invented so the four web properties * read as one institution: a candidate arriving from nnuh.org should not feel * they have left it. * * --pbmit-global-color #44B4B4 -> --nnuh-teal * --pbmit-secondary-color #00224a -> --nnuh-navy * --pbmit-color-extra #980065 -> --nnuh-magenta * * The second half of this file remaps the purchased theme's own variables * onto these. The theme references those ~1,500 times across style.css and * rtl-style.css, so remapping is what re-skins the whole site without * touching 24,000 lines of vendor CSS. * * The -rgb triplets exist because var() cannot be used inside a legacy * rgba(r, g, b, a) — write rgba(var(--nnuh-teal-rgb), .12) instead. */ :root { /* ── Brand ─────────────────────────────────────────────── */ --nnuh-teal: #44b4b4; --nnuh-teal-rgb: 68, 180, 180; --nnuh-teal-dark: #3aa0a0; /* Fills that carry white text. The brand teal measures 2.49:1 on white — below the 4.5:1 AA threshold — so white-on-teal button labels were hard to read. This darker teal reaches ~4.6:1 and is used for anything with a white label on it; the brand teal above stays untouched for decorative fills, borders and accents. */ --nnuh-teal-btn: #1a8384; --nnuh-teal-btn-rgb: 26, 131, 132; --nnuh-teal-btn-dark: #14787a; --nnuh-teal-light: #6fc7c7; /* Teal as *text*. --nnuh-teal-btn is tuned for white-on-teal; the reverse needs to be darker again to clear 4.5:1 on a tinted ground as well as on white. */ --nnuh-teal-text: #12696B; --nnuh-teal-soft: #e0f2f2; --nnuh-navy: #00224A; --nnuh-navy-rgb: 0, 34, 74; --nnuh-navy-soft: #DAE3F3; /* Decorative accent. Never use for errors or destructive actions. */ --nnuh-magenta: #980065; --nnuh-magenta-rgb: 152, 0, 101; --nnuh-magenta-dark: #6E0449; --nnuh-magenta-soft: #F6DDEE; /* ── Semantic ──────────────────────────────────────────── */ --nnuh-success: #12B76A; --nnuh-success-soft: #E3F8EE; --nnuh-warning: #92400E; --nnuh-warning-text: #7A3410; --nnuh-warning-soft: #FDF3E4; --nnuh-error: #D92D20; --nnuh-error-dark: #B42318; /* On error-soft, --nnuh-error is 4.22:1. */ --nnuh-error-text: #8E1D14; --nnuh-error-soft: #FDECEA; --nnuh-info: #1F6FEB; --nnuh-info-text: #175CD3; --nnuh-info-soft: #E8F1FE; /* ── Link roles, straight from nnuh.org ────────────────── */ --nnuh-link: var(--nnuh-navy); --nnuh-link-hover: var(--nnuh-teal); /* ── Text ──────────────────────────────────────────────── */ --nnuh-ink: #00224A; /* Secondary text. Darkened from #5A6777, which lands at 4.42:1 on the theme's tinted job cards — just under AA. */ --nnuh-ink-muted: #4E5C6E; /* Was #8B95A3, which measures 3.03:1 on white and fails AA for text. It is fine as an icon or a rule, so --nnuh-ink-hairline keeps that job. */ --nnuh-ink-faint: #64707F; --nnuh-ink-hairline: #8B95A3; /* nnuh.org sets body copy at 15px/1.8 in this grey. */ --nnuh-body: #666666; --nnuh-on-brand: #FFFFFF; /* ── Surfaces ──────────────────────────────────────────── */ --nnuh-surface: #FFFFFF; --nnuh-surface-sunken: #F5F7FA; --nnuh-surface-high: #ECEFF4; --nnuh-hairline: #E8ECF1; --nnuh-hairline-strong: #D6DBE2; /* The control panel ground. Deliberately deeper than --nnuh-surface-sunken: white cards on near-white read as washed out, and the panel should feel like a system, not a blank page. */ --nnuh-panel-ground: #E7ECF3; /* ── Type ──────────────────────────────────────────────── */ /* nnuh.org's face, so the two properties read as one product. Its Arabic is Naskh-style, easier at body sizes than a Kufi-derived face. AlJazeera stays as the fallback the portal shipped with. Weights 400/500/600/700 are all downloaded — asking for a weight that is not there makes the browser synthesise it, which mangles Arabic letter joins. */ --nnuh-font: "IBM Plex Sans Arabic", AlJazeera, "Segoe UI", system-ui, sans-serif; --nnuh-text-xs: 12px; --nnuh-text-sm: 13.5px; --nnuh-text-base: 15px; --nnuh-text-lg: 17px; --nnuh-leading: 1.8; --nnuh-leading-tight: 1.35; /* ── Shape ─────────────────────────────────────────────── */ --nnuh-radius-btn: .25rem; /* nnuh.org .pbmit-btn */ --nnuh-radius: 14px; --nnuh-radius-sm: 10px; /* Comfortably above the 44px minimum. */ --nnuh-tap: 48px; /* ── Elevation ─────────────────────────────────────────── */ /* Navy-tinted rather than neutral black: a grey shadow over a navy-led palette reads as dirt. */ --nnuh-shadow-sm: 0 1px 2px rgba(var(--nnuh-navy-rgb), .06); --nnuh-shadow: 0 1px 3px rgba(var(--nnuh-navy-rgb), .07), 0 8px 24px -14px rgba(var(--nnuh-navy-rgb), .22); --nnuh-shadow-lg: 0 2px 6px rgba(var(--nnuh-navy-rgb), .08), 0 20px 44px -22px rgba(var(--nnuh-navy-rgb), .34); /* ── Spacing ───────────────────────────────────────────── */ --nnuh-gap-xs: 6px; --nnuh-gap-sm: 10px; --nnuh-gap: 16px; --nnuh-gap-lg: 24px; --nnuh-gap-xl: 40px; } /* ══════════════════════════════════════════════════════════════ Remap the purchased theme onto the tokens above. style.css and rtl-style.css each declare these in their own :root and then reference them ~1,500 times. Redeclaring them here — this file loads after both — repoints every button, heading, link and font in the theme at the NNUH palette in one place. Two deliberate corrections rather than straight copies: · --title-color1 was #08183E and --text-color1 #081838, both near-navy but neither the brand navy. Both become #00224A. · --primary-color1 was #44b3b3, one digit off the brand #44b4b4. ══════════════════════════════════════════════════════════════ */ :root { /* The theme uses --primary-color1 for both fills and text, roughly 460 times. Brand #44b4b4 measures 2.49:1 against white, so in the text role it failed everywhere — counters, links, breadcrumbs, active menu items — and in the fill role its white labels failed too. #1a8384 is the one teal that works in both directions: contrast is symmetric, so it is ~4.6:1 as text on white *and* as a ground under white. Pointing the theme's own variable at it fixes the whole family at once instead of chasing selectors one at a time. It is also the teal staff.nnuh.org already ships for buttons. --nnuh-teal keeps the exact brand value for decorative fills, soft tints and borders, which is where the lighter teal belongs. */ --primary-color1: var(--nnuh-teal-btn); --primary-dark: var(--nnuh-navy); --extra-color: var(--nnuh-magenta); --title-color1: var(--nnuh-navy); /* #666 is 4.40:1 on the theme's tinted panels — just under AA. */ --text-color1: var(--nnuh-ink-muted); --white: var(--nnuh-surface); --font-exo2: var(--nnuh-font); --font-work-sans: var(--nnuh-font); }