/* ========================================================================= MITCON Biopharma — "MITCON Skills" theme Lifted from the sister site mitconskills.com so the two read as one organisation: sky blue on a near-white ground, black headings, flat light-grey panels and no elevation. SINGLE SOURCE OF TRUTH for every colour, radius and shadow on the site (frontend + admin). Change a value here and the whole site follows — every Blade view references these through var(--name) and hardcodes nothing. Translucent brand colours read the --rgb-* triples below. Measured off mitconskills.com: #0CA6E9 sky blue labels, links, accents #044967 deep blue secondary / dark fills #FCE33B yellow highlight #F6F6F6 #F9F9F9 panel greys #A19EA5 #99A9B5 meta greys #25D366 WhatsApp green CONTRAST — the sister site puts #0CA6E9 under 16px body text, which is 2.75:1 on white and not readable. The hue is kept, but every token that actually carries small text is the darkened variant: sky #0CA6E9 2.75:1 -> FILLS AND LARGE TEXT ONLY --accent-text #06618A 5.38:1 over the accent wash on pale --muted #6D6972 4.71:1 --muted-2 #5A6E7C 4.66:1 --body #4A5158 7.06:1 deep #044967 9.75:1 -> safe as text AND under white text yellow #FCE33B 1.30:1 -> FILL ONLY. Black on it is 16.2:1. If you lighten --brand, --body or the --muted pair, re-measure first. ========================================================================= */ :root { /* ---- Deep blue: the primary voice ----------------------------------- The workhorse. Safe as text on light AND as a fill under white text. */ --brand: #044967; --brand-dark: #033850; /* hover / pressed */ --brand-bright: #0CA6E9; /* sky blue - decoration, large text */ --brand-light: #8DDDFF; /* TEXT on the dark brand fills. Light on purpose: #5FC8F5 fell to 2.82:1 on the hero band. Holding --grad-hero darker too keeps this at 9.0 / 6.5 / 5.8. */ --brand-pale: #E7F5FD; /* chips, quiet fills */ --brand-tint: #F9FBFD; /* near-neutral band */ --brand-wash: rgba(4, 73, 103, .08); /* ---- Sky blue: the secondary ---- */ --teal: #0CA6E9; /* decoration and large text only */ --teal-deep: #05506F; /* darkest the hero gradient may go */ --teal-text: #0872A0; /* sky-toned TEXT on light */ /* ---- Sky blue as the accent fill ------------------------------------- Never small text on a light surface. Put #fff or --ink on it. */ --accent: #0CA6E9; --accent-dark: #0A8CC4; --accent-text: #06618A; /* the readable stand-in for sky text */ --accent-pale: #E7F5FD; --accent-wash: rgba(12, 166, 233, .14); --cyan: #0CA6E9; /* ---- Yellow: the highlight ------------------------------------------ Fill only. Black on it is 16.2:1; --green-text is the text form. */ --green: #FCE33B; --green-dark: #EBD11F; --green-text: #6B5A00; /* 5.4:1 on white */ --green-pale: #FEF8D8; /* WhatsApp brand green. 1.98:1 on white, so it is a FILL only — the label on it is --ink, which gives 10.6:1. Never use it as text. */ --whatsapp: #25D366; /* ---- Pathway & research-training set -------------------------------- Supplied with the brief for those two sections. Measured against the main tokens they are the same family, not a second palette: navy is 44 away from --brand, teal 33 from --clay, mint 24 from --brand-pale and the background 9 from --surface-alt, on a 0-765 scale. Kept as their own names so the brief stays traceable; collapse them into the main tokens whenever that traceability stops being useful. Teal is 4.41:1 on the section background, so it is a fill and a large-text colour there, never small text. */ --rx-navy: #073B4C; --rx-teal: #087F8C; --rx-mint: #DDF5EF; --rx-bg: #F3F7FA; --rx-line: #A9CDD6; /* the pathway connector. --line (#E8E8E8) was effectively invisible against a white card. */ /* ---- Secondary text accent ---- */ --clay: #0872A0; --clay-dark: #065C82; --peach: #0CA6E9; --peach-pale: #E7F5FD; /* ---- Ink: the near-black the sister site sets headings in ---- */ --ink: #000000; /* headings and nav, as measured on the reference */ --ink-2: #23282D; --ink-3: #000000; --ink-wash: rgba(16, 20, 24, .07); /* ---- Surfaces: the flat greys, no tint ---- */ --surface: #FFFFFF; /* cards */ --surface-alt: #F9F9F9; /* the page ground */ --surface-2: #F6F6F6; /* panels */ --line: #E8E8E8; /* hairline borders */ --line-soft: #F0F0F0; /* ---- Text ---- */ --text: #101418; /* headings (18.1:1) */ --body: #4A5158; /* normal body copy (7.1:1) */ --muted: #6D6972; /* captions (4.7:1) */ --muted-2: #5A6E7C; /* dates, placeholders (4.7:1) */ --on-dark: rgba(255, 255, 255, .94); /* ---- Status ---- */ --danger: #C0392B; --danger-dark: #9B2F23; --danger-pale: #FBE6E3; --warn: #8A6D00; --warn-dark: #6B5A00; --success: #1E7A4C; --success-dark: #15653E; --info: #044967; --purple: #5B4B9E; --purple-dark: #473C7E; --purple-wash: rgba(91, 75, 158, .10); /* ---- Legacy aliases ---- */ --primary: var(--brand); --primary-light: var(--brand-bright); --secondary: var(--accent); --dark: var(--ink-2); --light-bg: var(--surface-alt); --text-muted: var(--muted); /* ---- RGB triples ---------------------------------------------------- rgba() cannot take a hex custom property, so anything that needs a translucent brand colour reads these instead of hardcoding the numbers. Keep each triple equal to the hex above it. */ --rgb-brand: 4, 73, 103; --rgb-accent: 12, 166, 233; --rgb-ink: 35, 40, 45; --rgb-deep: 0, 0, 0; /* ---- Radius ---------------------------------------------------------- Measured off the reference rather than assumed: nothing there is square. Cards and image captions sample at 20px, category capsules at 40px and headline word highlights at 70px. An earlier note here claimed a square system; that was wrong and is corrected. */ --r-sm: 12px; --r-md: 20px; --r-lg: 20px; --r-xl: 20px; --r-cap: 40px; /* category capsules, measured on the reference */ --r-hl: 70px; /* headline word highlights, measured 70px */ --r-pill: 999px; /* ---- Elevation: the sister site has none. Cards separate by their grey fill, not by lift, so these are only a whisper on hover. ---- */ --shadow-sm: none; --shadow-md: 0 8px 24px rgba(16, 20, 24, .07); --shadow-lg: 0 18px 44px rgba(16, 20, 24, .10); /* ---- Signature gradients ---- */ --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%); --grad-ink: linear-gradient(140deg, #000000 0%, #23282D 100%); --grad-hero: linear-gradient(118deg, #023247 0%, #023247 42%, #044967 68%, #05506F 100%); --grad-banner: linear-gradient(135deg, #F9FBFD 0%, #F4F8FB 55%, #E7F5FD 100%); --grad-sun: linear-gradient(135deg, #0CA6E9 0%, #FCE33B 100%); } /* Translucent brand colours go through the --rgb-* custom properties above (rgba() cannot take a hex variable), e.g. rgba(var(--rgb-accent), .34) sky blue rgba(var(--rgb-brand), .62) deep blue Nothing should hardcode the numbers again. */