/* CBS Health — design tokens. * * The single source of truth for the brand: colour, type, space, elevation and * motion. Everything the public site draws comes from a name defined here, so * changing the brand is an edit to this file rather than a search across * fourteen stylesheets. * * Namespaced --cbs-* deliberately. styles.css owns the older --primary/--bg * names the hospital screens are written against; the two sets coexist without * collision, and the app screens migrate onto these names in a later phase * rather than shifting colour underneath a ward board tonight. * * FONTS ARE NOT FETCHED. The Content-Security-Policy this app serves is * `font-src 'self'` (gateway/security_middleware.py), so a Google Fonts link * would be blocked, not merely slow. Inter and Manrope are named first and used * when the machine already has them; otherwise the stack falls to the system UI * face, which is what a hospital workstation will actually render. Self-hosting * the woff2 files is the way to guarantee them and is a deliberate later * decision: it adds a few hundred kilobytes of binaries to the repository. */ :root { /* --------------------------------------------------------------- * Colour — identity * ------------------------------------------------------------- */ /* Deep Clinical Navy. Headers, navigation, primary buttons, brand. */ --cbs-navy: #102A4D; --cbs-navy-deep: #0A1C34; /* footer ground, pressed states */ --cbs-navy-soft: #1D3E6B; /* hover on navy chrome, muted rules */ --cbs-navy-tint: #E7ECF3; /* navy at ~8% over white, for fills */ /* Deep Teal. Interactive highlight, active tab, secondary button. * * Was #008080 -- a web-safe primary that sat at almost the same lightness * as the navy, so it never lifted off the page. This is the flyer's teal, * deeper and slightly greener, which separates from the navy by value as * well as hue. */ --cbs-teal: #0C5754; --cbs-teal-deep: #083F3C; --cbs-teal-tint: #DDEDEB; /* Amber. The accent the palette did not have. * * Every colour above is one cool hue at a different lightness -- navy is * the brand, the chrome AND the body ink, and the surfaces are grey-blue * from the same family. Nothing was warm and nothing drew the eye, which * is what read as drab. Amber is the flyer's accent, so this is the * product's own design language rather than a new opinion. * * Used sparingly and never for status: a rule under a section heading, a * card's left edge, a hover underline. --cbs-amber-ink is the darkened * value for small text, the same discipline as the status inks below. */ --cbs-amber: #C8761A; --cbs-amber-deep: #A25D0F; --cbs-amber-ink: #8A4F0C; --cbs-amber-tint: #F6EAD8; /* --------------------------------------------------------------- * Colour — surfaces and ink * ------------------------------------------------------------- */ /* Warmed off the blue-grey. #F4F7F9 and #EDF2F6 were the navy at high * lightness, so page, chrome and text were all one temperature. These * carry a trace of the teal's green instead, which is what makes the * white cards read as raised rather than as more of the same. */ --cbs-surface: #F4F7F6; /* page ground */ --cbs-surface-raised: #FFFFFF; --cbs-surface-sunken: #EAF0EE; --cbs-ink: #16302E; /* body text is the deep teal-black, not navy */ --cbs-ink-muted: #47605D; --cbs-ink-faint: #536B68; /* captions and meta; still clears 4.5:1 */ --cbs-ink-inverse: #FFFFFF; --cbs-line: #D7E0DD; --cbs-line-soft: #E7EEEC; /* --------------------------------------------------------------- * Colour — clinical status * The same three values the app screens must eventually adopt for lab * abnormality flags and patient state badges. * ------------------------------------------------------------- */ --cbs-ok: #2E7D32; --cbs-ok-tint: #E8F3E9; --cbs-warn: #ED6C02; --cbs-warn-tint: #FCEEE0; --cbs-alert: #D32F2F; --cbs-alert-tint: #FAE6E6; --cbs-info: #0C5754; --cbs-info-tint: #DDEDEB; /* The same three hues, darkened for *text*. * * The values above are the brand's status colours and are correct as fills, * borders and large numerals. As small text on their own tints they are * not: #D32F2F on #FAE6E6 measures 4.16:1 and #2E7D32 on #E8F3E9 measures * exactly 4.50:1, against a 4.5:1 requirement for the 11px a status badge * is set at. These clear 5.5:1 on every light ground while staying * unmistakably the same green, amber and red. * * Use the plain token for a fill or a border, the -ink token for a label. */ --cbs-ok-ink: #286D2C; --cbs-warn-ink: #9D4701; --cbs-alert-ink: #B12525; /* --------------------------------------------------------------- * Typography * ------------------------------------------------------------- */ --cbs-font: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Patient IDs, vitals and lab values. Tabular figures matter more here than the exact face: a column of results has to align. */ --cbs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; /* Clamped, so the scale reflows without a stack of media queries. */ --cbs-text-xs: 0.75rem; /* 12 — legal, captions */ --cbs-text-sm: 0.8125rem; /* 13 — eyebrows, meta */ --cbs-text-base: 1rem; /* 16 — body */ --cbs-text-md: 1.0625rem; /* 17 — lead paragraph */ --cbs-text-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem); --cbs-text-xl: clamp(1.375rem, 0.9vw + 1.2rem, 1.625rem); --cbs-text-2xl: clamp(1.625rem, 1.6vw + 1.3rem, 2.125rem); --cbs-text-3xl: clamp(2rem, 3.2vw + 1.3rem, 3rem); --cbs-weight-normal: 400; --cbs-weight-medium: 500; --cbs-weight-semi: 600; --cbs-weight-bold: 700; /* Two line-heights. The tight one is for display type; the loose one has room for Devanagari, Telugu, Kannada, Tamil and Malayalam matras, which clip at the 1.5 the rest of the web assumes. */ --cbs-leading-tight: 1.18; --cbs-leading: 1.65; --cbs-measure: 68ch; /* longest comfortable line */ --cbs-measure-narrow: 46ch; /* headline wrap */ /* --------------------------------------------------------------- * Space — a 4px base, so density is a multiplier and not a guess * ------------------------------------------------------------- */ --cbs-space-1: 0.25rem; --cbs-space-2: 0.5rem; --cbs-space-3: 0.75rem; --cbs-space-4: 1rem; --cbs-space-5: 1.5rem; --cbs-space-6: 2rem; --cbs-space-7: 3rem; --cbs-space-8: 4rem; --cbs-space-9: 6rem; /* Marketing pages breathe; the app does not. Both densities are named here so the difference stays a decision rather than an accident. */ --cbs-section-y: clamp(3.5rem, 7vw, 6rem); --cbs-gutter: clamp(1.25rem, 4vw, 2.5rem); --cbs-container: 1180px; --cbs-container-narrow: 820px; /* --------------------------------------------------------------- * Shape, elevation, motion * ------------------------------------------------------------- */ --cbs-radius-sm: 6px; --cbs-radius: 10px; --cbs-radius-lg: 16px; --cbs-radius-pill: 999px; /* Shadows are tinted with the ink rather than grey: a neutral black shadow over a warm off-white reads as dirt. Retinted with the surfaces. */ --cbs-shadow-sm: 0 1px 2px rgba(22, 48, 46, 0.06), 0 1px 3px rgba(22, 48, 46, 0.05); --cbs-shadow: 0 2px 4px rgba(22, 48, 46, 0.06), 0 6px 16px rgba(22, 48, 46, 0.08); --cbs-shadow-lg: 0 4px 8px rgba(22, 48, 46, 0.06), 0 16px 40px rgba(22, 48, 46, 0.12); /* A lift for a card the pointer is over. Separate from the shadows above because it is the only one that animates, and because a hover state that reuses --cbs-shadow-lg reads as a modal rather than a nudge. */ --cbs-shadow-hover: 0 6px 12px rgba(22, 48, 46, 0.07), 0 20px 44px rgba(22, 48, 46, 0.13); /* Two gradients, for the masthead and the section that has to carry weight. Sparingly: a page where everything is a gradient reads as a template. */ --cbs-grad-teal: linear-gradient(110deg, var(--cbs-teal-deep), var(--cbs-teal)); --cbs-grad-navy: linear-gradient(110deg, var(--cbs-navy-deep), var(--cbs-navy)); --cbs-motion: 160ms cubic-bezier(0.2, 0, 0.2, 1); --cbs-motion-slow: 280ms cubic-bezier(0.2, 0, 0.2, 1); /* For a reveal: slower, and eased so it settles rather than stops. */ --cbs-motion-reveal: 520ms cubic-bezier(0.16, 1, 0.3, 1); --cbs-z-header: 100; --cbs-z-dropdown: 200; --cbs-z-overlay: 300; } /* The Devanagari, Telugu, Kannada, Tamil and Malayalam stacks hms.css already * proved on the ward screens, applied to the public site too. Named faces that * ship with Windows, macOS, Android and common Linux distributions, so * switching language does not require anybody to install anything. */ html[lang="hi"], html[lang="mr"] { --cbs-font: Inter, "Nirmala UI", "Noto Sans Devanagari", Mangal, "Kohinoor Devanagari", sans-serif; } html[lang="te"] { --cbs-font: Inter, "Nirmala UI", "Noto Sans Telugu", Gautami, "Kohinoor Telugu", sans-serif; } html[lang="kn"] { --cbs-font: Inter, "Nirmala UI", "Noto Sans Kannada", Tunga, "Kohinoor Kannada", sans-serif; } html[lang="ta"] { --cbs-font: Inter, "Nirmala UI", "Noto Sans Tamil", Latha, "Kohinoor Tamil", "Tamil Sangam MN", sans-serif; } html[lang="ml"] { --cbs-font: Inter, "Nirmala UI", "Noto Sans Malayalam", Kartika, "Kohinoor Malayalam", "Malayalam Sangam MN", sans-serif; } html[lang="zh"] { --cbs-font: Inter, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif; } /* Indic scripts need the taller leading at display sizes too, not only in body * copy: a 3rem heading set at 1.18 clips its own matras. */ html[lang="hi"], html[lang="mr"], html[lang="te"], html[lang="kn"], html[lang="ta"], html[lang="ml"] { --cbs-leading-tight: 1.4; --cbs-leading: 1.8; }