/* ═══════════════════════════════════════════════════════════════ Burhani Blood Bank — Design Tokens ─────────────────────────────────────────────────────────────── The palette is derived from the client's own logo, not invented. The logo supplies a brand red and a deep indigo; those generate a four-tier scale mirroring the structural role of the attached design system's own four-tier palette. The design system shipped with the handoff is the Starbucks system (primary #00754A). Its STRUCTURE is followed — the cream → white → dark-band → footer rhythm, 50px pill buttons, 12px card radius with layered whisper shadows, the sans/serif split, the spacing scale — while its green hue tiers are re-mapped to the client's red and indigo. A blood bank cannot be green. RATIO DISCIPLINE Cream and white carry the page. Red appears only on actions and on genuine urgency. Indigo appears only in bands, the footer, and numerals. Never more than two background colours in one viewport. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { /* ── Brand, from the logo ──────────────────────────────────── */ --bbb-red: #E01A2B; /* Accents, pulsing dots, primary buttons ON DARK ONLY */ --bbb-red-deep: #B3121F; /* Primary action. All filled buttons, outlined text/borders, section headings on light backgrounds */ --bbb-red-tint: #FBE8E9; /* Critical-status backgrounds, urgent page headers, step markers */ --bbb-indigo: #262163; /* Footer, dark bands, headline text, phone numbers, statistics */ --bbb-indigo-up: #3B3488; /* Raised surface on indigo */ --bbb-cream: #F5F1EC; /* Page canvas. Hero backgrounds, alternating bands, inset panels */ --bbb-ink: rgba(0, 0, 0, .87); /* Body text */ --bbb-ink-soft: rgba(0, 0, 0, .56); /* Secondary text, labels, captions */ /* ── Status — blood stock and eligibility states ONLY ──────── */ --status-critical-bg: #FBE8E9; --status-critical-fg: #B3121F; --status-low-bg: #F7F1E4; /* The handoff specifies #8A6A24, which lands at 4.48:1 on the low background — just under WCAG AA. Darkened to the nearest passing value (4.78:1). Visually indistinguishable; legible for someone reading a stock board on a phone in daylight. */ --status-low-fg: #866527; --status-ok-bg: #EEF4F1; --status-ok-fg: #2F5C4A; --status-ok-dot: #3F8A68; /* ── Neutrals ──────────────────────────────────────────────── */ --color-white: #FFFFFF; --color-input-border: #D6DBDE; /* Control borders */ --color-control-border: #C8CCD0; /* Unchecked control borders */ --color-divider: #E7E7E7; /* Hairlines */ /* Punnett square — thalassaemia inheritance diagram */ --punnett-carrier: #C9B96A; --punnett-clear: #DFD9D1; /* ── Type ──────────────────────────────────────────────────── */ /* Inter substitutes for the proprietary SoDoSans, Lora for Lander Tall — as documented in the design system's typography tokens. */ --font-primary: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: 'Lora', 'Iowan Old Style', Georgia, serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Sizes are declared where used — the scale below is the reference. Hero H1 46 · Page H1 38 · Editorial H1 40–44 · Pull quote 30 Section H2 24 · Prevention H2 28 · Card title 18–19 Hero body 18–19 · Body 15–16.5 · Card body 13.5–14.5 Eyebrow 11–11.5 · Stat 34–38 · Blood group 30 · Phone 23 Caption 12–13 */ --tracking-tight: -0.02em; --tracking-normal: -0.01em; --tracking-eyebrow: 0.13em; /* ── Spacing ───────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px; --space-7: 48px; --space-8: 56px; --space-9: 64px; --gutter: 40px; /* Desktop horizontal page padding */ --gutter-mobile: 18px; /* Mobile */ --gap-major: 44px; /* Between major columns */ --gap-cards: 18px; /* Between cards */ --gap-control: 10px; /* Within control groups */ --section-y: 44px; /* Vertical section padding, 44–56 range */ --hero-y: 56px; /* Hero, 46–60 range */ --max-width: 1280px; /* Desktop design width */ /* ── Radius ────────────────────────────────────────────────── */ --radius-pill: 50px; /* ALL buttons and chips */ --radius-card: 12px; /* Cards and panels */ --radius-input: 8px; /* Inputs, list rows, small status tiles */ --radius-flag: 4px; /* Dashed pending flags */ --radius-bar: 2px; /* Bar-chart bars, active nav underline */ --radius-circle: 50%; /* ── Elevation — whisper-soft and layered, never one heavy drop ─ */ --shadow-card: 0 0 0.5px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .24); --shadow-nav: 0 1px 3px rgba(0, 0, 0, .10), 0 2px 2px rgba(0, 0, 0, .06), 0 0 2px rgba(0, 0, 0, .07); --shadow-modal: 0 8px 24px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08); /* The emphasised sponsorship card */ --shadow-feature: 0 4px 16px rgba(0, 0, 0, .10), 0 1px 4px rgba(0, 0, 0, .08); /* Mobile sticky footer — lifts upward */ --shadow-sticky: 0 -1px 3px rgba(0, 0, 0, .06); /* ── Motion ────────────────────────────────────────────────── */ --duration-fast: .2s; --duration-default: .3s; --transition-color: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease; } /* ═══════════════════════════════════════════════════════════════ bbbPulse — the ONLY keyframe animation on the site. Used exclusively on critical-shortage status dots. Its scarcity is what makes it read as urgent; put it anywhere else and it stops meaning anything. ═══════════════════════════════════════════════════════════════ */ @keyframes bbbPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }