/* ========================================================================== Textum Media — design tokens The single source of truth for every colour, size, radius, easing and layer in the site. Nothing else in the frontend may hardcode a value. Direction (2026-09-07): "job site". The studio builds for the trades and the storefronts of Markham, so the page is built from their materials — a concrete-grey ground, blue-black ink, and one safety yellow used as a block, never as text. The accent family stays, but only where colour carries information: which industry a piece of work belongs to. ========================================================================== */ :root { /* ------------------------------------------------------------------ */ /* Colour — surfaces */ /* ------------------------------------------------------------------ */ --paper: #DDE1DC; /* the ground: cool concrete grey-green */ --paper-2: #D2D7D1; /* recessed surface, stripes, table headers */ --card: #F2F4F1; /* raised surface on the ground */ --ink: #16191C; /* dark section background — blue-black */ --ink-2: #1E2226; /* raised surface inside dark sections */ --ink-3: #2A2F34; /* higher-contrast border/divider on ink */ /* Colour — text */ --text: #16191C; /* body text on the ground (13.34:1) */ --text-2: #4A5157; /* secondary text on the ground (5.52:1) */ --text-inv: #E7EAE6; /* text on ink */ --text-inv-2: #A3ABA6; /* secondary text on ink */ /* ------------------------------------------------------------------ */ /* Colour — the two signals */ /* ------------------------------------------------------------------ */ /* Blue is the ACTION colour: links, primary buttons, focus. Deep enough to clear 4.5:1 on all three light surfaces and carry white at 7:1. */ --signal: #0A57AD; --signal-2: #084A94; /* hover / pressed */ --on-signal: #FFFFFF; /* Yellow is the FLAG colour: a block you cannot miss. On a light surface it is only ever a filled area with ink set on top (10.5:1) — never text and never a hairline, because it has no contrast against the ground. On ink it inverts: there it is legible as text at 10.5:1, and that is the one place it is allowed to be a word. One flag per page, at the moment that matters most. */ --flag: #F2C200; --on-flag: #16191C; /* 10.50:1 on the flag */ --on-flag-2: #4A4520; /* secondary text on the flag (5.77:1) */ --on-flag-line: rgba(22, 25, 28, .24); --link-on-flag: #084A94; /* the action blue, darkened (5.17:1) */ --acid: #F2C200; /* the same yellow, inside ink sections */ /* ------------------------------------------------------------------ */ /* Colour — the accent family */ /* ------------------------------------------------------------------ */ /* Five hues, one per industry in the portfolio. Colour here is a label, not decoration: it says which trade a piece of work belongs to. Every value clears 4.5:1 as text on --paper, --paper-2 and --card, and carries white at 4.5:1 when used as a fill. */ --a-blue: #2036D6; /* web design · the studio's own */ --a-green: #166043; /* landscaping, real estate */ --a-ember: #8E3617; /* hospitality */ --a-violet: #4E35BC; /* professional services */ --a-gold: #6E4A07; /* build and trade */ /* Vivid siblings. Fills, glows and washes only — never behind text. */ --a-ember-vivid: #B4471E; --a-gold-vivid: #9A680B; --a-green-vivid: #22815C; /* Accents for ink sections. All clear 7:1 on --ink and --ink-2. */ --a-blue-lt: #8FA0FF; --a-green-lt: #5FD9A0; --a-ember-lt: #FF9E6B; --a-violet-lt: #A794FF; --a-gold-lt: #F0C265; /* Accent tints. Flat low-alpha fills for washes and hover states. Never behind text. */ --a-blue-soft: rgba(32, 54, 214, .08); --a-green-soft: rgba(22, 96, 67, .09); --a-ember-soft: rgba(142, 54, 23, .09); --a-violet-soft: rgba(78, 53, 188, .08); --a-gold-soft: rgba(110, 74, 7, .10); --a-blue-soft-2: rgba(32, 54, 214, .16); --a-green-soft-2: rgba(22, 96, 67, .18); --a-ember-soft-2: rgba(142, 54, 23, .18); --a-violet-soft-2: rgba(78, 53, 188, .16); --a-gold-soft-2: rgba(110, 74, 7, .20); /* Chip tints. Weaker than the soft fills, because these sit BEHIND accent-coloured text at 13px. 7% is safe for all five on every light surface; green is the one that fails first, at 9%. */ --a-blue-chip: rgba(32, 54, 214, .07); --a-green-chip: rgba(22, 96, 67, .07); --a-ember-chip: rgba(142, 54, 23, .07); --a-violet-chip: rgba(78, 53, 188, .07); --a-gold-chip: rgba(110, 74, 7, .07); /* The accent a component paints with. The .t-* classes in site.css set all five of these at once. */ --accent: var(--a-blue); --accent-soft: var(--a-blue-soft); --accent-soft-2: var(--a-blue-soft-2); --accent-chip: var(--a-blue-chip); --accent-lt: var(--a-blue-lt); /* Colour — soft tints */ --signal-soft: rgba(10, 87, 173, .07); --signal-soft-2: rgba(10, 87, 173, .14); --ink-tint: rgba(22, 25, 28, .05); --paper-tint: rgba(231, 234, 230, .07); /* Colour — hairlines */ --line: rgba(22, 25, 28, .14); --line-2: rgba(22, 25, 28, .32); --line-inv: rgba(231, 234, 230, .14); --line-inv-2: rgba(231, 234, 230, .32); /* Focus */ --focus: #0A57AD; --focus-width: 2px; --focus-offset: 3px; /* ------------------------------------------------------------------ */ /* Typography */ /* ------------------------------------------------------------------ */ /* Archivo carries a width axis, and the width is the point: headings are set EXPANDED, which is what makes them read as signage rather than as another grotesque. Public Sans was drawn for government interfaces — plain and credible, the right register for a studio selling straight answers. Spline Sans Mono handles code, labels and anything that should look measured. */ --font-display: 'Archivo', system-ui, sans-serif; --font-text: 'Public Sans', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Width axis for display type. */ --wdth-display: 112; --wdth-wide: 125; /* Fluid type scale. Archivo Expanded is wider than the face it replaced, and the first pass shrank every size to compensate. On a large screen that read as a page zoomed out: 17px body inside a 1432px container. The width axis is the thing to keep, not the reduction — so the scale is back up and the container is tighter instead. */ --fs-xs: .875rem; --fs-sm: 1rem; --fs-md: 1.125rem; --fs-lg: 1.3125rem; --fs-xl: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); --fs-2xl: clamp(2rem, 1.35rem + 2.8vw, 3.5rem); --fs-3xl: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem); --fs-hero: clamp(2.115rem, 1.034rem + 4.888vw, 5.17rem); /* Line heights */ --lh-hero: .94; --lh-display: 1.02; --lh-heading: 1.1; --lh-snug: 1.3; --lh-body: 1.62; /* Tracking — an expanded face needs less negative tracking. */ --tracking-hero: -.02em; --tracking-display: -.015em; --tracking-tight: -.008em; --tracking-mono: .06em; --tracking-label: .14em; /* uppercase mono labels */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 800; /* Measure — body copy never runs wider than this */ --measure: 66ch; --measure-narrow: 44ch; /* ------------------------------------------------------------------ */ /* Space — strict 8px grid */ /* ------------------------------------------------------------------ */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-7: 56px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-11: 128px; --space-12: 160px; --space-section: clamp(72px, 9vw, 144px); /* ------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------ */ --container: 1200px; --container-narrow: 860px; --gutter: clamp(20px, 4vw, 48px); --grid-columns: 12; --grid-gap-x: var(--space-4); --grid-gap-y: var(--space-6); --nav-h: 72px; --hairline: 1px; /* ------------------------------------------------------------------ */ /* Radii — engineered, not soft. */ /* ------------------------------------------------------------------ */ --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; /* ------------------------------------------------------------------ */ /* Depth — hairlines only, never a heavy shadow */ /* ------------------------------------------------------------------ */ --shadow-hairline: 0 1px 0 var(--line); --shadow-hairline-inv: 0 1px 0 var(--line-inv); /* ------------------------------------------------------------------ */ /* Motion */ /* ------------------------------------------------------------------ */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-in: cubic-bezier(.5, 0, .9, .4); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 250ms; --dur-slower: 420ms; /* ------------------------------------------------------------------ */ /* Layers */ /* ------------------------------------------------------------------ */ --z-base: 0; --z-raised: 1; --z-sticky: 100; --z-overlay: 200; --z-skip: 300; } /* ========================================================================== Large screens Below 1600px nothing here applies: those widths are already well filled (the container is 90–100% of the viewport at 1280–1440) and were signed off as-is. Past 1600px the fixed 1200px container stops keeping up — at 1920 it covers 68% of the screen and at 2560 only 51%, with every heading frozen at its clamp ceiling. The page reads as zoomed out. Each ramp below is solved to meet the value it replaces exactly at 1600px, so nothing jumps at the breakpoint; they then grow to a new ceiling by about 2560px. The ramps are deliberately GENTLE, and the container's ceiling is set high enough that it never binds. A first attempt grew the type hard (hero to 112px) while the container hit a 1720px ceiling, so the column got proportionally narrower as the screen grew — 81% at 1920 down to 71% at 2560 — and big type in a shrinking column read as zoomed IN. The fill percentage matters more than the type size here: hold the container near 82% and the headline needs very little help. ========================================================================== */ @media (min-width: 1600px) { :root { --container: clamp(1200px, 78vw, 2800px); --fs-hero: clamp(5.17rem, 4.3898rem + .7802vw, 5.64rem); --fs-3xl: clamp(5.25rem, 4.56rem + .69vw, 5.67rem); --fs-2xl: clamp(3.5rem, 3.01rem + .49vw, 3.8rem); --fs-xl: clamp(2.25rem, 1.97rem + .28vw, 2.42rem); /* Body copy grows far less than display type — it is already at a comfortable reading size, and --measure caps the line length. */ --fs-md: clamp(1.125rem, 1rem + .16vw, 1.25rem); --fs-lg: clamp(1.3125rem, 1.15rem + .2vw, 1.5rem); } }