/* ========================================================================= OTS Design System — Foundation tokens Extracted from the redesign PNGs (Phase 1). Two sub-brands share ONE system: • Default = OntarioTaxSales.ca → red accent on warm cream/white • Surplus = SurplusProperty.ca → navy + gold accent Switch brands by adding data-brand="surplus" on or a section. NOTE ON EXACTNESS: colors + type sizes below are eyedropper estimates from the PNGs. If you have the Figma source, replace the flagged values with the exact tokens — the STRUCTURE won't change, only the values. Typography families in particular need confirming (see --font-* below). ========================================================================= */ :root { /* ----------------------------------------------------------------------- 1. PRIMITIVE PALETTE (raw values — never reference these directly in components; use the semantic tokens in section 2 instead) ----------------------------------------------------------------------- */ /* Warm neutrals (the site is warm-gray/cream, not pure gray) */ --paper: #ffffff; /* cards, inputs */ --cream-50: #faf7f1; /* lightest section wash */ --cream-100: #f5f0e6; /* hero / account page background */ --cream-200: #efe9dd; /* alt section background, muted cards */ --sand-300: #e6dfd1; /* borders on cream */ --line-100: #ece7dd; /* hairline dividers */ --line-200: #e0dacd; /* default border on white */ --ink-900: #1a1816; /* footer / utility bar (warm near-black)*/ --ink-800: #1a1a1a; /* primary body text */ --ink-600: #4d4a44; /* secondary text */ --ink-500: #6f6b62; /* muted / meta text, uppercase labels */ --ink-400: #9a958a; /* placeholders, disabled */ /* Brand — OTS red (eyedropped from Figma footer Subscribe) */ --red-600: #a03038; /* primary buttons, active states */ --red-700: #882830; /* hover / pressed */ --red-100: #f6e7e7; /* red-tinted backgrounds */ /* Brand — Surplus (eyedropped from Figma surplus footer / CTA band) */ --navy-700: #19305b; /* surplus primary buttons / CTA band */ --navy-800: #142548; /* surplus hover */ --navy-100: #e7eaf3; /* surplus tint */ --gold-500: #b3a068; /* surplus secondary accent (Figma) */ /* Map / data accents seen in listings */ --pin-dark: #201d18; /* price pill on map */ /* Feedback (kept close to brand so badges read consistently) */ --success-600: #2f7d4f; --warning-600: #b5892b; --danger-600: #a52a2a; /* ----------------------------------------------------------------------- 2. SEMANTIC TOKENS (role-based — THIS is what components consume. The surplus theme in section 6 remaps only these.) ----------------------------------------------------------------------- */ --color-bg: var(--paper); /* page default */ --color-bg-subtle: var(--cream-50); /* alternating sections */ --color-bg-muted: var(--cream-200); /* callout / info panels */ --color-surface: var(--paper); /* cards */ --color-surface-inverse: var(--ink-900); /* footer, utility bar */ --color-text: var(--ink-800); --color-text-secondary: var(--ink-600); --color-text-muted: var(--ink-500); --color-text-inverse: #f3efe7; /* text on dark surfaces */ --color-text-on-accent: #ffffff; --color-border: var(--line-200); --color-border-strong: var(--sand-300); --color-divider: var(--line-100); /* Accent = the one token that flips per sub-brand */ --color-accent: var(--red-600); --color-accent-hover: var(--red-700); --color-accent-tint: var(--red-100); --color-accent-2: var(--red-600); /* surplus overrides to gold */ --color-link: var(--color-accent); --color-focus-ring: color-mix(in srgb, var(--color-accent) 45%, transparent); /* ----------------------------------------------------------------------- 3. TYPOGRAPHY (Figma Surplus section 350:22443) • Inter Tight — display / section headings • Inter — body, UI, nav, buttons • IBM Plex Mono — micro-labels, prices, footer column headers Loaded via Google Fonts in functions.php. ----------------------------------------------------------------------- */ --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale (desktop). Pair each size with its line-height. */ --text-display: 3.5rem; --lh-display: 1.05; /* 56px hero H1 */ --text-h1: 2.75rem; --lh-h1: 1.08; /* 44px page title */ --text-h2: 2rem; --lh-h2: 1.15; /* 32px section title */ --text-h3: 1.375rem; --lh-h3: 1.25; /* 22px card / block */ --text-lg: 1.125rem; --lh-lg: 1.5; /* 18px lede */ --text-base: 1rem; --lh-base: 1.55; /* 16px body */ --text-sm: 0.875rem; --lh-sm: 1.45; /* 14px meta */ --text-xs: 0.75rem; --lh-xs: 1.4; /* 12px micro-label */ --text-stat: 2.125rem; --lh-stat: 1.1; /* 34px stat number */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Tracked uppercase micro-labels (KILLALOE · RENFREW COUNTY, PROPERTIES) */ --tracking-label: 0.08em; --tracking-tight: -0.01em; /* large display headings */ /* ----------------------------------------------------------------------- 4. SPACE, RADIUS, SHADOW, LAYOUT ----------------------------------------------------------------------- */ /* 4px base spacing scale */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-30: 7.5rem; /* 120 — big section rhythm */ /* Radii — the system is near-square with only gentle rounding */ --radius-xs: 4px; /* badges, tags */ --radius-sm: 6px; /* buttons */ --radius-md: 8px; /* inputs, small cards */ --radius-lg: 12px; /* property cards, panels */ --radius-pill: 999px; /* filter pills, map price pins */ /* Shadows — used sparingly; cards mostly rely on borders */ --shadow-sm: 0 1px 2px rgba(20, 16, 10, 0.05); --shadow-md: 0 4px 14px rgba(20, 16, 10, 0.08); --shadow-lg: 0 12px 34px rgba(20, 16, 10, 0.14); /* Layout — one shared shell for header, content, footer (Figma 1440 canvas) */ --container-max: 1440px; --container-wide: 1440px; /* alias; keep one wrapper width sitewide */ --gutter: var(--space-12); /* 48px side padding on desktop */ --header-height: 72px; --utilitybar-height: 36px; /* Motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --duration: 160ms; } /* ========================================================================= 5. SURPLUS SUB-BRAND — data-brand="surplus" Remaps ONLY the accent + a couple of surfaces. Everything else inherits. Put it on for the whole Surplus site, or on a single
to theme one region. ========================================================================= */ [data-brand="surplus"] { --color-accent: var(--navy-700); --color-accent-hover: var(--navy-800); --color-accent-tint: var(--navy-100); --color-accent-2: var(--gold-500); /* Footer + utility bar stay warm near-black (same as main). Navy is for accents, Subscribe, and .sband — not --color-surface-inverse. */ --color-link: var(--navy-700); /* Figma Surplus section 350:22443 — surfaces + ink */ --color-bg: #fafaf6; --color-bg-subtle: #f2f3f5; --color-text: #1a1816; --color-text-secondary: #5c544a; --color-text-muted: #6e665a; /* ----------------------------------------------------------------- Typescale — Figma Desktop 236:4176 (base 16 · scale 1.309) Font-size steps only; rem labels match the Figma frame. ----------------------------------------------------------------- */ --text-80: 5rem; /* 80 · 5.000rem · Inter Tight */ --text-61: 3.8125rem; /* 61 · 3.813rem · Inter Tight */ --text-47: 2.9375rem; /* 47 · 2.938rem · Inter Tight */ --text-36: 2.25rem; /* 36 · 2.250rem · Inter Tight */ --text-27: 1.6875rem; /* 27 · 1.688rem · Inter Tight */ --text-21: 1.3125rem; /* 21 · 1.313rem · Inter */ --text-16: 1rem; /* 16 · 1.000rem · Inter */ --text-12: 0.75rem; /* 12 · 0.750rem · IBM Plex Mono */ /* Semantic aliases → desktop steps */ --text-hero: var(--text-80); --text-display: var(--text-61); --text-h1: var(--text-61); --text-h2: var(--text-47); --text-h3: var(--text-27); --text-h5: var(--text-27); --text-lg: var(--text-21); --text-base: var(--text-16); --text-xs: var(--text-12); --lh-hero: 1; --lh-display: 1; --lh-h1: 1; --lh-h2: 1; --lh-h3: 1; --lh-lg: 1.3; /* 21 / 27.3 */ --lh-base: 1.5; /* 16 / 24 */ --lh-xs: 1; /* 12 / 12 */ --tracking-tight: -0.03em; } [data-brand="surplus"] h1, [data-brand="surplus"] h2, [data-brand="surplus"] h3, [data-brand="surplus"] h4 { font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-text); } /* Mobile typescale — Figma 236:4220 (base 16 · scale 1.2) */ @media (max-width: 640px) { [data-brand="surplus"] { --text-80: 3rem; /* 48 · 3.000rem · Inter Tight */ --text-61: 2.5rem; /* 40 · 2.500rem · Inter Tight */ --text-47: 2.0625rem; /* 33 · 2.063rem · Inter Tight */ --text-36: 1.75rem; /* 28 · 1.750rem · Inter Tight */ --text-27: 1.4375rem; /* 23 · 1.438rem · Inter Tight */ --text-21: 1.1875rem; /* 19 · 1.188rem · Inter */ --text-16: 1rem; /* 16 · 1.000rem · Inter */ --text-12: 0.8125rem; /* 13 · 0.813rem · IBM Plex Mono */ } } /* ========================================================================= 6. MINIMAL BASE LAYER Just enough element styling to make the tokens usable + testable. Component classes (.btn, .badge, .card…) can grow from here in Phase 3. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0 0 var(--space-4); } h1 { font-size: var(--text-h1); line-height: var(--lh-h1); } h2 { font-size: var(--text-h2); line-height: var(--lh-h2); } h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); } p { margin: 0 0 var(--space-4); } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Tabular figures for money + roll numbers (matches the designs) */ .u-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Tracked uppercase micro-label (KILLALOE · RENFREW COUNTY, footer headers) Figma: IBM Plex Mono Medium 12 */ .u-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); } .u-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* Responsive visibility helpers (header/footer copy variants) */ .u-show-mobile { display: none; } @media (max-width: 900px) { .u-hide-mobile { display: none !important; } .u-show-mobile { display: inline; } } /* ---- Buttons ------------------------------------------------------------- .btn = primary (accent fill). .btn--ghost = outlined/white. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.25rem; font: inherit; font-weight: var(--weight-semibold); line-height: 1; color: var(--color-cream); background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); } .btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--ghost { color: var(--color-text); background: var(--paper); border-color: var(--color-border-strong); } .btn--ghost:hover { background: var(--cream-50); border-color: var(--color-text-muted); } /* ---- Badges (LIVE NOW, MEMBERS ONLY) ------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.25rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; border-radius: var(--radius-xs); color: #fff; background: var(--color-accent); } .badge--members { background: var(--ink-500); } /* ---- Inputs -------------------------------------------------------------- */ .field { width: 100%; padding: 0.75rem 0.875rem; font: inherit; color: var(--color-text); background: var(--paper); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .field::placeholder { color: var(--color-text-muted); } .field:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus-ring); } /* ---- Filter pill (Municipality ▾, active = accent) ---------------------- */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.875rem; font-size: var(--text-sm); color: var(--color-text); background: var(--paper); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); } .pill[aria-pressed="true"], .pill.is-active { color: var(--color-accent); border-color: var(--color-accent); } /* ---- Card ---------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } /* ========================================================================= 7. RESPONSIVE TYPE (mobile designs step the big sizes down) ========================================================================= */ @media (max-width: 640px) { :root { --text-display: 2.25rem; /* 36 */ --text-h1: 2rem; /* 32 */ --text-h2: 1.625rem; /* 26 */ --text-h3: 1.25rem; /* 20 */ --text-h5: 1.4375rem; /* 23 */ --text-stat: 1.75rem; /* 28 */ --gutter: var(--space-6); } }