/* ============================================================================ Healthcare Classified — hcc.css The production design system. Ported from rew-poc/hcc-poc.css, which is the prototype; the two share section numbering so they can be diffed. ARCHITECTURE (REDESIGN-PLAN-2026-08.md §3, owner decision D6) This file ships ALONGSIDE tailwind.css, not instead of it. Pages migrate one at a time; each migration is separately verifiable and revertible. Tailwind is dropped only once the last page has moved (plan Part B, B7). That is safe because tailwind.config.js's `blue.{50…950}` scale already IS the navy scale below, hex for hex — so a migrated page and an unmigrated one resolve brand colour identically and the site never looks half-rebranded mid-transition. LOADING: head.php pulls this in for every page. A page is "migrated" when its markup uses these component classes instead of Tailwind utilities; until then it simply inherits the tokens, the canvas and the chrome. ============================================================================ */ /* --------------------------------------------------------------------------- THE LAWS (obey these everywhere; each is enforceable by grep) COLOUR navy = interactive or structural slate = informational photography = carries ALL the colour amber = somebody paid. Featured signalling ONLY, never decorative. Budget: the featured card's border+ring, its badge, and the seller-CTA badge that sells it. emerald = verified / success, sparingly red = destructive + active favourite TYPE 9 steps, one job each (§1.2). Nothing else at full size. Responsive step-downs are declared at their breakpoints. SPACING 4px ladder. Off-ladder is allowed for exactly three declared reasons: the 44px WCAG 2.5.8 touch floor (do NOT round these to 48), fixed art dimensions, and sub-4px optical values. RADIUS --r-lg 14 / --r-md 10 / --r-sm 6. Curve tracks surface size; nested elements follow inner = outer − padding. 999px is allowed on exactly three kinds of object, because in each of them ROUND IS THE AFFORDANCE rather than decoration: (a) round icon buttons — the favourite heart, lightbox nav/close (b) chips and pills — small, text-only, never a primary action (c) map price markers — the established convention on every comparable portal (rew.ca, Realtor.ca, Zillow) Never on: a card, a panel, a text input, a select, a dropdown menu, a labelled button, a pagination link, or a toast. "Pills and over-large radius everywhere" is a named item on the anti-AI checklist in design/REW-REFERENCE.md, and gen-1 browse/map had 999px on seven component families. ELEVATION Borders, not shadows. slate-300 OUTLINES a thing; slate-200 is a line BETWEEN things. Only two shadows exist and both are for genuinely floating surfaces (§1.5). There is deliberately no --shadow-sm / --shadow-md, so "shadow-sm at rest, shadow-md on hover, translateY(-2px)" cannot be reintroduced by habit. ============================================================================ */ /* ============================================================================ 1. TOKENS ============================================================================ */ :root { /* --- 1.1 Palette -------------------------------------------------------- Brand navy. In production these are Tailwind blue-* overrides — the `blue.{50…950}` scale in tailwind.config.js already IS this scale, hex for hex, which is what makes the page-by-page migration in REDESIGN-PLAN §3 colour-safe: migrated and unmigrated pages resolve to identical values. */ --navy-50: #f1f4f9; --navy-100: #e4ebf4; --navy-200: #c1d5e9; --navy-300: #91b5d9; --navy-400: #5d92c7; --navy-500: #3b76b2; --navy-600: #265a8e; /* 7.15:1 on white — the link colour on light surfaces */ --navy-700: #092449; /* primary */ --navy-800: #061a35; /* hover */ --navy-900: #030f21; /* deepest */ /* Slate neutrals (Tailwind defaults, as used site-wide) */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; /* 6.96:1 on slate-900 — footer link colour */ --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Featured (amber). See the COLOUR law — this is a paid-placement signal, not an accent. If you are reaching for amber and nobody paid, stop. */ --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-800: #92400e; /* Success / error */ --emerald-50: #ecfdf5; --emerald-600: #059669; --emerald-700: #047857; --red-500: #ef4444; --red-700: #b91c1c; /* The one warm off-white canvas (DESIGN-SYSTEM.md sanctions #fdfbf7). Tokenised so the "one canvas" claim is enforceable — a raw hex repeated in three places is a hex with no token behind it. */ --canvas: #fdfbf7; /* --- 1.2 Type ----------------------------------------------------------- 9 steps, one job each. Weight and tracking carry hierarchy, not size alone. Responsive step-downs are declared inline at their breakpoints, which is why --t-figure's "proof numbers ONLY" holds at desktop while the H1 also renders 48px on tablet. --t-price exists as its own step because the card price used to ride --t-h2; that coupled a card-internal value to the section-head size and neither could move without the other. */ --t-display: 72px; /* hero H1 ONLY — exactly one use per page */ --t-figure: 68px; /* the four proof numbers ONLY — THE signature */ --t-stmt: 40px; /* editorial statement H2 (proof band, seller CTA) */ --t-h2: 28px; /* section heads: rule head, newsletter, hub, page H1 */ --t-price: 22px; /* listing card price */ --t-lede: 19px; /* section ledes */ --t-body: 16px; /* body copy, card titles */ --t-meta: 14px; /* metadata, nav, buttons, links */ --t-micro: 12px; /* uppercase micro-labels, fine print, badges */ /* Weights. 650/750 need the VARIABLE Inter axis — a static Google-Fonts instance list silently snaps 650→700 and 750→800 and the precision system never renders. Every page must load `Inter:wght@400..800`, not `Inter:wght@400;500;600;700;800`. This cost v4 a whole build round. */ --w-body: 400; --w-med: 500; --w-semi: 600; --w-mid: 650; --w-bold: 700; --w-hvy: 750; --w-max: 800; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* --- 1.3 Spacing — 4px ladder ------------------------------------------ */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s24:96px; --s28:112px; --s32:128px; --s40:160px; /* --- 1.3a Layout constants --------------------------------------------- The sticky header's bar height. It was a bare 72px repeated in five places (the bar, the anchor scroll-padding, .mv-shell's viewport subtraction, .hcd-tabs and .hcc-subnav), and two of those five had drifted off by a pixel because the header's BORDER-BOX is one pixel taller than its bar — see the 1px note on .hcc-subnav in section 12. Everything that offsets from the header now derives from this token, so the bar's height can move without hunting for magic numbers. Anything that must clear the header entirely adds the 1px border: calc(var(--header-h) + 1px). */ --header-h: 80px; /* --- 1.4 Radius --------------------------------------------------------- The search shell is the worked example of inner = outer − padding: 14 outer with 8px padding, so its GRANDCHILDREN (the toggle segments) sit at 6. Its two direct children are declared optical exceptions — the toggle track at 9px and the submit button at 8px — because the formula's result read too tight against those control heights. Nobody perceives 9 vs 10; the exceptions are recorded here so they don't read as drift. */ --r-lg: 14px; /* large surfaces: cards, panels, tiles, search shell */ --r-md: 10px; /* controls: buttons, inputs, selects, menus, skip link */ --r-sm: 6px; /* nested bits: toggle segments, thumbnails, badges */ /* --- 1.5 Elevation ------------------------------------------------------ Two shadows, both for genuinely floating surfaces. Navy-tinted rather than black: pure black goes muddy on a warm canvas. --shadow-pop detached UI that overlays content (dropdown menus, map popups, the skip link) --shadow-lift the hero search shell only — it has to read as lifted off a photograph, which a border cannot do There is intentionally no resting/hover shadow pair. */ --shadow-pop: 0 4px 16px -4px rgba(3,15,33,.35); --shadow-lift: 0 12px 32px -8px rgba(3,15,33,.45); } /* ============================================================================ 2. BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Clears the sticky header plus breathing room on in-page anchors. */ scroll-padding-top: calc(var(--header-h) + var(--s6)); } body { margin: 0; font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-body); line-height: 1.5; color: var(--slate-700); background: var(--canvas); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* Sticky footer. body is already a 100vh flex column (above); main has to take the slack or the footer floats up on short pages. Element-scoped so every page gets it without remembering a class — the pages carried Tailwind's `flex-1` for this until B6, which would have failed silently at B7. */ body > main { flex: 1 0 auto; } /* --- Element reset --------------------------------------------------------- This block replaces Tailwind Preflight, dropped at B7. It is not a stylistic choice — Preflight was doing real work that the markup depends on, and the two rules that matter most are the ones that fail SILENTLY and everywhere: menu, ol, ul { list-style: none; margin: 0; padding: 0 } Every nav, footer column, mobile menu and link hub on this site is a