/* =========================================================================== EDA Doctor Portal — THEME --------------------------------------------------------------------------- This is the only file you edit to change how the portal looks. Every colour, font, size, radius, shadow and spacing value is declared here as a custom property. site.css holds layout and component structure and reads these tokens — it contains no literal colours or font names of its own. Change a value here and it changes everywhere, consistently. The values below are taken directly from the approved design-board mockups (01_landing_stackable.html … 13_admin_doctors.html), so the portal and the design board cannot drift apart. HOW TO RETHEME 1. Edit the BRAND block. For most rebrands that is 4-5 values. 2. If the new accent is light rather than dark, check --brand-on-accent. 3. Reload. Nothing else needs touching. See docs/THEMING.md for a walkthrough and a worked alternate palette. =========================================================================== */ /* Inter, self-hosted. The design board specifies Inter; serving it locally keeps the portal working with no external CDN and no request to Google. */ @font-face { font-family: 'Inter'; font-style: normal; font-display: optional; font-weight: 100 900; src: url('../lib/inter/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ======================================================================= 1. BRAND — start here ======================================================================= */ /* Crimson accent: primary buttons, links, active figures, current stage. */ --brand-accent: #E12150; --brand-accent-hover: #C81A45; --brand-accent-active: #A81338; /* Pale wash of the accent — chips, highlight panels, selected cards. */ --brand-accent-tint: #FDEEF2; --brand-accent-tint-border: #F3CDDB; --brand-accent-chip-bg: #FBE3E9; /* Light pink used for eyebrows and emphasis ON the dark hero. */ --brand-accent-on-dark: #FF8CA8; /* Text/icon colour placed on the accent. Flip to a dark value if the accent ever becomes a light colour. */ --brand-on-accent: #FFFFFF; /* Warm charcoal chrome: top bar, hero, help panel. Not a neutral grey — it carries a deliberate warm cast that pairs with the crimson. */ --brand-charcoal: #2F2D2A; --brand-charcoal-deep: #262421; --brand-charcoal-soft: #3A3733; --brand-charcoal-warm: #413D38; /* Text on the dark chrome. */ --brand-on-dark: #D8D4CE; --brand-on-dark-dim: #A8A39B; --brand-on-dark-strong: #FFFFFF; --brand-on-dark-brand: #CFC9C2; /* ======================================================================= 2. NEUTRALS ======================================================================= */ --color-ink: #2F2D2A; /* body text — same warm charcoal as chrome */ --color-muted: #5F5B55; /* captions, table meta, secondary copy */ --color-line: #E0DEDB; /* borders and rules */ --color-line-soft: #EDF1F7; /* inner table rules, faint separators */ --color-surface: #FFFFFF; /* cards and panels */ --color-surface-alt: #FBFAF9; /* row hover, subtle fills */ --color-canvas: #F7F6F5; /* page background */ /* Warm neutral tints — avatars, icon chips, note panels. */ --color-tint: #F1EFEC; --color-tint-strong: #E8E6E2; /* ======================================================================= 3. STATUS — the five case statuses (storyboard slide 8) Identical in the doctor portal and the lab portal, so defined once. ======================================================================= */ --status-new-bg: #FBE3E9; --status-new-fg: #E12150; --status-viewed-bg: #E5EDFF; --status-viewed-fg: #2563EB; --status-progress-bg: #FDF0E0; --status-progress-fg: #B45309; --status-closed-bg: #E3F5E9; --status-closed-fg: #15803D; --status-other-bg: #EEF0F3; --status-other-fg: #5F5B55; /* Formerly inline style="" values in the views, which the CSP no longer applies. */ --color-done-mark: #16A34A; /* upload tile tick */ --color-avatar-inactive: #A8A29E; /* deactivated doctor's initials */ --color-on-dark-muted: rgb(255 255 255 / 65%); /* Semantic colours for alerts, validation and upload states. */ --color-success: #15803D; --color-success-bg: #F2FBF5; --color-success-border: #B9E2C8; --color-warning: #B45309; --color-warning-bg: #FDF0E0; --color-warning-border: #F5E7C0; --color-danger: #DC2626; --color-info: #2563EB; /* ======================================================================= 4. TYPOGRAPHY ======================================================================= */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid steps. Each scales between the two bounds with viewport width, so type shrinks sensibly on an iPhone and grows on a large monitor without a media query per heading. The mockup sizes are the upper bound. */ --text-2xs: 0.65625rem; /* 10.5 - brand sub, meta */ --text-xs: 0.75rem; /* 12 - chips, eyebrows, th */ --text-sm: 0.78125rem; /* 12.5 - notes, small print */ --text-base: 0.8125rem; /* 13 - dense body, sub-lines */ --text-md: 0.875rem; /* 14 - table body, controls */ --text-lg: 0.9375rem; /* 15 - large buttons, lede */ --text-xl: clamp(1rem, 0.95rem + 0.22vw, 1.0625rem); /* 17 - brand wordmark */ --text-2xl: clamp(1rem, 0.93rem + 0.35vw, 1.125rem); /* 18 - h2 / card titles */ --text-3xl: clamp(1.25rem, 1.08rem + 0.75vw, 1.625rem); /* 26 - page titles */ --text-stat: clamp(1.5rem, 1.25rem + 1.1vw, 1.75rem); /* 28 - stat figures */ --text-hero: clamp(1.875rem, 1.15rem + 3.3vw, 3.25rem); /* 52 - landing headline */ --text-hero-sub: clamp(0.9375rem, 0.9rem + 0.3vw, 1.03125rem); /* 16.5 */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --leading-tight: 1.12; --leading-snug: 1.45; --leading-normal: 1.55; --leading-relaxed: 1.65; --tracking-tighter: -0.5px; --tracking-tight: -0.2px; --tracking-normal: 0.2px; --tracking-wide: 0.5px; --tracking-wider: 1.4px; /* section eyebrows */ --tracking-widest: 1.6px; /* hero eyebrow */ /* ======================================================================= 5. SPACE ======================================================================= */ --space-3xs: 0.125rem; /* 2 */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.375rem; /* 6 */ --space-sm: 0.5rem; /* 8 */ --space-md: 0.75rem; /* 12 */ --space-lg: 1rem; /* 16 */ --space-xl: 1.25rem; /* 20 */ --space-2xl: 1.5rem; /* 24 */ --space-3xl: 2rem; /* 32 */ --space-4xl: 2.5rem; /* 40 */ --space-5xl: 3.5rem; /* 56 */ /* Card and page padding, from the mockups' 20-22px / 32px 40px. */ --pad-card: 1.375rem; /* 22 */ --pad-card-tight: 1.125rem; /* 18 */ --pad-page-y: 2rem; /* 32 */ --pad-page-x: 2.5rem; /* 40 */ /* ======================================================================= 6. SHAPE & DEPTH ======================================================================= */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-3xl: 18px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgba(15, 45, 79, .06); --shadow-sm: 0 1px 2px rgba(15, 45, 79, .06); --shadow-md: 0 4px 14px rgba(210, 20, 79, .12); --shadow-lg: 0 18px 48px rgba(15, 45, 79, .10); --shadow-hero: 0 24px 56px rgba(20, 18, 16, .45); --shadow-accent: 0 6px 16px rgba(225, 33, 80, .28); --shadow-search: 0 12px 32px rgba(10, 25, 45, .28); --shadow-dropdown: 0 20px 48px rgba(10, 25, 45, .24); --shadow-focus: 0 0 0 3px rgba(225, 33, 80, .18); --border-width: 1px; /* ======================================================================= 7. LAYOUT Breakpoints are documented here for reference only — custom properties cannot be used inside @media queries, so these values are repeated literally in site.css. Change one, change both. xs < 576 phones (iPhone SE 375, iPhone 14 390, Pro Max 430) sm >= 576 large phones landscape md >= 768 tablets lg >= 992 small laptops xl >= 1200 desktops xxl >= 1400 large desktops hd >= 1920 very large monitors ======================================================================= */ /* The mockups are drawn at 1440. Content stops widening past this so lines stay readable on a 4K display instead of stretching to 2500px. */ --layout-max-width: 1440px; --layout-gutter: var(--pad-page-x); /* Doctor dashboard / case detail: main column + fixed side rail. */ --rail-width: 372px; --chrome-height: 64px; --avatar-size: 34px; --stat-icon-size: 46px; --feed-icon-size: 34px; --step-num-size: 34px; --touch-target: 44px; /* WCAG 2.5.5 minimum tap size */ --transition-fast: .12s ease; --transition-base: .2s ease; /* Print: paper is always white and rules always want more contrast than they do on screen, so these are separate from the on-screen neutrals. */ --print-surface: #FFFFFF; --print-line: #999999; } /* =========================================================================== Responsive token overrides. Rather than sprinkling media queries through every component, the handful of values that genuinely must change by viewport are overridden here, once. =========================================================================== */ /* Tablets and below: tighten the page frame. */ @media (max-width: 991.98px) { :root { --pad-page-x: 1.5rem; --pad-card: 1.125rem; --pad-card-tight: 1rem; } } /* Phones: tighter still, and slightly smaller chrome. */ @media (max-width: 575.98px) { :root { --pad-page-x: 1rem; --pad-page-y: 1.25rem; --pad-card: 1rem; --pad-card-tight: 0.875rem; --chrome-height: 56px; --stat-icon-size: 38px; --radius-lg: 10px; } } /* Very large monitors: open the frame and let dense text breathe. */ @media (min-width: 1920px) { :root { --layout-max-width: 1680px; --rail-width: 420px; --text-base: 0.875rem; --text-md: 0.9375rem; } } /* =========================================================================== Accessibility preferences =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0s; --transition-base: 0s; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --color-muted: #4A4741; --color-line: #C9C6C2; --brand-on-dark: #F0EDE9; --brand-on-dark-dim: #C9C4BC; } }