/* ============================================================================ TOKENS — the single styling surface for the whole prototype. ---------------------------------------------------------------------------- NOTHING else in this codebase may hardcode a colour, font, size or radius. Every rule elsewhere reads from these custom properties. PALETTE SOURCE (Aug 2026): ASC-Regulation-Securities-Law (Figma 29:2327) on the Visual Cohesion page. Orange is the confirmed direction — Celeste, Aug 2026: "orange as it passes accessibility standards... No more gold throughout." The gold sampled from the live asc.ca is deliberately not used. Contrast ratios below are against --color-surface (#ffffff) unless stated. AA body text needs 4.5:1; AA large text (>=18.66px bold / 24px) needs 3:1. ========================================================================== */ :root { --fidelity: "lo-fi, ASC orange palette"; /* --- colour: surfaces --------------------------------------------------- */ --color-page: #FCFCFC; --color-surface: #ffffff; --color-surface-muted: var(--color-fill-muted); /* #f5f1ea */ --color-surface-subtle: #f9fafb; /* alternating sections, table stripes */ --color-surface-sunken: #193047; /* footer — DARK; white on it is 13.50:1 */ --color-surface-accent: #fffbeb; /* amber tint: icon tiles, active nav, callouts */ /* The tint is 1.04:1 on white, so a small tinted shape with no edge — an icon tile, a chip — reads as a blur rather than an object (Celeste, Oct 2026). This stroke gives it one: #F2EEDF (Celeste), 1.16:1 on white, 1.12:1 on the tint, subtle on purpose. Non-text. The larger amber elements (callouts, the CTA card, notes) already carry an --color-accent-bright border or rule. */ --color-border-accent: #F2EEDF; --color-surface-hero: #b75400; /* page hero band — white type on it is 4.90:1 */ --color-surface-inverse: #193047; /* dark bands / footer 13.50:1 w/ white */ --color-surface-inverse-2:#314158; /* secondary dark surface 10.36:1 w/ white */ /* The homepage band (Figma 153:2568). One navy field running from the top of the viewport to the Get Started cards, with the header transparent on top of it, so the page opens as a single surface rather than a header sitting on a hero sitting on a page. It is a gradient, not a flat fill: the darker foot is what stops a 1100px navy block reading as a wall. White is 9.99:1 on the head and 12.89:1 on the foot. */ --color-band-feature-head: #264466; --color-band-feature-foot: #10325b; /* --- colour: canonical light-surface values ----------------------------- --color-text and friends below are REMAPPED on the dark surfaces (the push nav, the on-dark header) so everything inside them recolours in one place. A LIGHT surface nested inside a dark one — a mega panel, the CTA card — has to opt back out, and it needs somewhere to read the original value from that the remap cannot reach. That is the only job these have. Do not reach for them in ordinary rules. Use --color-text. */ --color-ink: #193047; --color-ink-secondary: #314158; --color-ink-muted: #5a6472; --color-line: #d4d8dc; --color-line-subtle: #e4e7ec; /* Sand, Oct 2026 (Celeste). It was #f3f4f6, a cool grey at hue 220, and the light-navy --color-surface-brand is hue 216, so the process-flow steps and Need help read as two shades of one blue. A warm grey (hue 38) separates them. Body text on it is 11.99:1, secondary 9.2:1, muted 5.33:1. */ --color-fill-muted: #f5f1ea; /* The panel for LARGE-FORMAT data tables (Celeste, Oct 2026): the hearing schedule, and any long table of records to come. About half the depth of --color-fill-muted, which was too dark under five columns of rows and left the month bands nothing to contrast with. Same hue family, so it still reads as the site's sand. Body text on it is 15.2:1. The small infographic tables inside the Guide keep --color-fill-muted. */ --color-fill-data: #faf8f4; /* --- colour: text ------------------------------------------------------- */ --color-text: var(--color-ink); /* #193047, 13.50:1 */ --color-text-secondary:var(--color-ink-secondary); /* #314158, 10.36:1 */ --color-text-muted: var(--color-ink-muted); /* #5a6472, 6.00:1 */ --color-text-inverse: #ffffff; /* On-dark neutrals. The footer is a dark navy surface and every text token in the palette is dark — all three read between 1.04:1 and 1.67:1 on it, so the dark surfaces need their own pair. These also carry the header once it goes transparent over the homepage band. */ --color-text-inverse-muted: #bfc9d8; /* 8.08:1 on --color-surface-sunken, 5.98:1 on --color-band-feature-head */ --color-border-on-dark: #46618a; /* divider on dark; non-text */ --color-text-link: #b75400; /* 4.90:1 — orange, AA for body text */ /* --- colour: lines and states ------------------------------------------- */ --color-border: var(--color-line); --color-border-subtle: var(--color-line-subtle); --color-border-strong: #193047; /* Light navy, Sep 2026. The dark navies in this file are surfaces you put white text ON; these two are the other end of the same hue, for tinting a light surface. Derived from --color-band-feature-head #264466, so the accent on a Guide page and the homepage band are the same blue at different strengths rather than two blues. Scoped: this is a quiet accent for a card that needs to look like it is offering something, NOT a general surface. The grey --color-surface-muted still does ordinary muted work. --color-text is 12.4:1 on the tint and --color-text-muted 6.1:1, so it carries body copy and a muted line safely. */ --color-surface-brand: #eef2f8; --color-border-brand: #cdd9e8; /* The pressed step for a row that highlights on hover. It sits between the two above because BOTH ends of that range fail something at this size: --color-border-brand leaves the 12px muted type at 4.13:1, and staying on --color-surface-brand gives the press nothing to say. On #dfe7f2 the muted tier is 4.73:1, body text 10.8:1 and --color-accent-hover 5.53:1. */ --color-surface-brand-pressed: #dfe7f2; /* Defined-term underline in the Guide (Oct 2026). A mid blue — the one already in the hero photograph's overlay — so a defined word reads as different from an orange link. 5.53:1 on white; non-text. Scoped to the glossary; not a general link or accent colour. */ --color-term: #3d65bd; --color-focus: #0b5fff; /* --color-focus is 1.94:1 to 2.63:1 on the dark bands — under the 3:1 SC 1.4.11 asks of a focus indicator, and visibly weaker there than the same ring is on white. White is 9.99:1 on the palest point of the navy band. */ --color-focus-on-dark: #ffffff; --focus-width: 2px; --focus-offset: 2px; /* Focus on a FIELD (search pills, filter selects, date inputs), Oct 2026. The blue ring read as foreign on the site's orange and navy, so a field takes the house navy instead: its border turns navy and thickens to 2px (13.5:1 on white against the 1.4:1 resting border, so the change itself clears SC 1.4.11's 3:1), inside a soft light-navy halo that reads on white and on the homepage's navy band alike. Links and buttons keep the global --color-focus ring. */ --color-focus-field: var(--color-border-strong); /* #193047 */ --color-focus-halo: var(--color-border-brand); /* #cdd9e8 */ --focus-halo: 3px; --shadow-focus-field: 0 0 0 1px var(--color-focus-field), 0 0 0 calc(1px + var(--focus-halo)) var(--color-focus-halo); --color-scrim: rgba(25, 48, 71, 0.45); /* Hover fill for controls sitting ON the dark band. --color-surface-inverse-2 is 1.04:1 against --color-band-feature-head, i.e. invisible there, so the dark surfaces cannot supply their own hover — it has to come from the light side. Non-text, so no ratio applies. */ --color-surface-on-dark-hover: rgba(255, 255, 255, 0.14); /* Every callout panel's stroke (Celeste, Oct 2026): black at 5%, the same on every tint, so a callout's edge never carries colour of its own. The third alpha value in the file, after the scrim and the on-dark hover. */ --color-line-callout: rgba(0, 0, 0, 0.05); /* The Info note's fill: the same black 5%, as a surface. Translucent, so it reads one step darker than whatever it sits on. */ --color-fill-note: rgba(0, 0, 0, 0.05); /* Rules inside the sand table panel: translucent black, so they darken the sand rather than laying a cool grey line across it. */ --color-line-table: rgba(0, 0, 0, 0.07); --color-line-table-head: rgba(0, 0, 0, 0.12); /* --- colour: accent ----------------------------------------------------- --color-accent orange for TEXT, links and fills. 4.90:1 on white, and white on it is also 4.90:1 — so it works as both a foreground and a background. This is the workhorse. --color-accent-bright #e17100 is 3.20:1 on white: LARGE TEXT AND NON-TEXT ONLY — icon fills, rules, decorative marks. Never body copy, never small labels, never a link. --color-accent-ink what to put on an orange fill. */ --color-accent: #b75400; --color-accent-hover: #934300; --color-accent-bright: #e17100; --color-accent-ink: #ffffff; /* 4.90:1 on --color-accent */ --color-accent-on-dark: #e17100; /* 4.22:1 on --color-surface-inverse — large only */ /* Version B, Oct 2026: the investor teal, the industry blue and the CheckFirst alias are gone. FEEDBACK.md: "Remove all references of the teal. Go back to the blues and oranges." Every audience now takes the house orange, and the only blues are the navies and the light-navy tint above. ONE isolated exception (Celeste, Oct 2026): the check tile on the CheckFirst tab in the family bar keeps CheckFirst's teal. It is that site's own mark, not an ASC colour. Do not use it anywhere else. */ --color-checkfirst: #00786f; /* white on it 5.36:1 */ --color-checkfirst-ink: #ffffff; /* --- colour: status (record types, hearing status pills) ----------------- */ --color-status-open: #314158; --color-status-upcoming: #b75400; --color-status-closed: #5a6472; /* --- typography --------------------------------------------------------- Sep 2026: Georgia headings over Open Sans body. Georgia is web-safe and needs no loading; Open Sans is self-hosted in assets/fonts (see base.css) so the prototype still works from file:// with no network. The system stack stays behind it as a fallback, so a missing font file degrades rather than breaks. */ --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: Georgia, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.6; --weight-regular: 400; /* Open Sans is a variable face over 300-800, so 500 is a real weight here and medium is distinct from bold again. Lato was tried first and has no 500 — every "medium" element silently fell back to 400 — which is why this token is worth checking against any future family. */ --weight-medium: 500; --weight-bold: 700; --tracking-wide: 0.04em; /* --- space (4px base) ---------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; /* --- shape --------------------------------------------------------------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; --radius-tag: 0.75rem; /* a pill on one line (over half its 22px height), a soft tag when it wraps */ --border-width: 1px; /* The accent rule: a card's top bar, a callout's left bar. Thick enough to read as a deliberate mark rather than a heavier hairline. */ --border-width-accent: 3px; /* --- elevation ------------------------------------------------------------ Three steps, tinted to the brand navy rather than to neutral black: a grey shadow over the #FCFCFC page reads as dirt, a navy-tinted one reads as depth. Each step is two layers — a tight contact shadow that grounds the element and a wide ambient one that gives it height. One layer alone reads either as a hard line or as fog. STRATEGY. Height means something; it is not decoration. sm RESTING ON the page. Cards and panels that are part of the page and are not claiming to be above it, plus the sticky header once it is stuck over content. md LIFTED OFF the page. Hover on an interactive card, and anything that deliberately crosses a section boundary — the homepage Get Started cards straddle the band's bottom edge and have to read as in front of both bands at once. lg FLOATING OVER the page. Things that appear on demand and will go away again: mega panels, the mobile push nav, the toast. Nothing permanent takes lg. If everything floats, nothing does. A component picks ONE resting step and may rise exactly one on hover. Never downward: an element that sinks on hover reads as pressed, which is a different signal and belongs to :active. Dark surfaces get no shadow. There is nothing for it to fall on, and the seam it makes reads as a rendering fault. */ --shadow-sm: 0 1px 2px rgba(25, 48, 71, 0.06), 0 1px 3px rgba(25, 48, 71, 0.10); --shadow-md: 0 4px 6px -2px rgba(25, 48, 71, 0.05), 0 12px 16px -4px rgba(25, 48, 71, 0.10); --shadow-lg: 0 8px 8px -4px rgba(25, 48, 71, 0.04), 0 20px 24px -4px rgba(25, 48, 71, 0.12); /* Card elevation (Celeste, Oct 2026). Every card rests at sm and has NO hover state. The one exception is the Get Started cards, which take --shadow-card-raised because they straddle the navy band and the page and have to read as in front of both. lg stays for things that float OVER the page — mega panels, push nav, bottom sheet, toast. */ --shadow-card: var(--shadow-sm); --shadow-card-raised: var(--shadow-md); /* --- layout -------------------------------------------------------------- */ --layout-max: 1320px; --layout-gutter: var(--space-5); /* --- reading widths ----------------------------------------------------- THREE TIERS, AND THEY ARE REM NOT CH (Sep 2026). They were 68ch and 90ch, and `ch` resolves against each element's OWN font size — so --measure rendered 622px on 16px body copy and 700px on the Overview's 18px copy. Two tokens produced four widths, and the reading column had five ragged right edges. A fixed length means a token is one width wherever it lands. --measure running text: paragraphs, lists, notes, definitions. 640px of Open Sans at 16px is about 70 characters, inside the 45-75 the research supports and near the 66 usually given as the target. --measure-panel a block whose text should be at --measure but which has padding of its own, so the BOX is wider by exactly that padding. .panel uses it. `.flow` computes its own the same way, from its marker and gutter — same tier, and the rule is "text at the measure", not a shared number. --measure-wide content that reads across rather than down: tables, fact strips, step strips, the related-resources grid. It also caps the reading column itself, so headings and full-width blocks end where the widest content ends instead of running past it. 880px holds a four-up step strip at 202px a column, above the 190px its labels need. */ --measure: 40rem; /* 640px */ --measure-panel: calc(var(--measure) + var(--space-6) * 2); --measure-wide: 55rem; /* 880px */ /* The Guide chapter column, on any page with the On this page rail (Celeste, Oct 2026). EVERYTHING in it fills it — paragraphs, the Overview panel, definition lists, tables, callouts, Need help, related — so the column has one right edge instead of the four the tiers above produced side by side (640 / 671 / 704 / 880). 680px of Open Sans at 16px is about 74 characters, just inside the 45-75 range. Pages with no rail are untouched and keep the tiers. */ --measure-column: 42.5rem; /* 680px */ --width-term-pop: 300px; /* defined-term popup in the Guide */ --border-width-term: 1.5px; /* the dashed underline under a defined term */ --term-underline-offset: 4px; --width-sidebar: 280px; /* On This Page / Related Topics rail */ --width-mobile-nav: 380px; --width-cta-card: 220px; /* Homepage feature hero (Sep 2026 feedback c2). The standard hero renders 251px at 1440; 1.5x that is the requested floor. It is a min-height, so the band still grows to fit the search field and long headings. */ --hero-feature-min-h: 377px; /* The hero is pulled up UNDER the header so the band runs behind it, then padded back down by the same amount. chrome.js overwrites this from the header's measured height on load, so it self-corrects; the value here is only the pre-script fallback and what a no-JS render would use. */ --header-h: 134px; /* The hero photograph is supplied at 684x387 (Figma 154:4297) with its blue overlay and its corner radius already baked in. The column is capped at the asset's own width so it is never upscaled, and no CSS radius is added on top of the one in the alpha channel. */ --hero-art-w: 684px; /* The lede column's floor. Without it the art column takes its full 684px at every width above 900, which squeezed the text to 244px at 1024 and pushed the H1 65px outside its own box. This is the width the 48px heading needs, so the art gives way first. */ --hero-lede-min: 420px; /* How far the Get Started cards hang below the navy band and over the page one — a little under half a card. A fixed length because a percentage margin resolves against width, not height, so it has to be re-set whenever the cards' height changes: dropping their body copy took them from 333px to 258px, and 150px of overhang went from 45% to 58% of the card. */ --intro-card-overlap: 120px; /* Homepage search field — Figma 29:660 reads 768x66 on a 1104 content grid. */ --width-search: 768px; --height-search: 66px; --height-search-sm: 48px; --width-search-bar: 25rem; --width-datepick: 21rem; --width-filter-sheet: 28rem; /* Find a record: two filter selects across */ /* seven 40px days plus the panel padding */ --size-datepick-day: 2.5rem; /* the filter pill on a results bar: its placeholder plus room to type */ /* the filter pill: no submit button to size it */ /* Mega menu (Sep 2026 feedback c7/c8). The panel hugs its content instead of spanning the viewport, so it needs a column floor and an overall ceiling rather than fractional grid tracks. */ --width-mega-col: 200px; --width-mega-max: min(92vw, 1080px); /* --- vertical rhythm ------------------------------------------------------ Two rules, so a heading is spaced the same wherever it appears. Before Sep 2026 only .layout__main carried block spacing, so a section heading on a sidebar-less page (Home) sat 16px below the paragraph before it where the identical heading on a Guide page had 40px. */ /* Mobile header condensed height, MEASURED not guessed: the 44px hamburger target + 2x --space-2 padding + the 1px border comes to 62px. The sticky On This Page rail offsets by this, so the two sticky layers stack rather than the rail tucking underneath. Re-measure if the padding changes. */ /* ASC logo lockup, 600x306. Sized by HEIGHT; width follows the ratio. The wordmark sits under the mark, so it stops being legible much below the condensed size — that is the floor, not a style preference. */ --width-util-search: 320px; /* search pill in the utility bar */ --logo-h: 56px; /* nav row; shares the row with the nav items */ --logo-h-mobile: 56px; /* mobile header, expanded */ --logo-h-condensed: 38px; /* mobile header, stuck; the 44px hamburger still sets the header height, so this only stops the logo dominating */ --logo-h-footer: 56px; /* Mobile header condensed height, MEASURED not guessed. Was 62px when the header had a separate brand row; merging the logo into the nav row took it to 47px. The sticky On This Page rail offsets by this, so the two sticky layers stack rather than the rail tucking underneath — re-measure whenever the header's structure or padding changes. */ --header-condensed-h: 47px; /* The ASC / CheckFirst family bar (Version B). A fixed height rather than content-sized because the mobile sticky header offsets by exactly this much to let the bar scroll away while the logo row stays pinned — see the 767 block in components.css. 40px clears --tap-min-aa with room. */ --family-bar-h: 40px; /* Target sizes. WCAG 2.2 sets TWO thresholds and they are often confused: 2.5.8 Target Size (Minimum) is AA at 24x24 CSS px; 2.5.5 Target Size (Enhanced) is AAA at 44x44. --tap-min is the AAA figure, used for the hamburger; --tap-min-aa is the floor any smaller control must clear. */ --tap-min: 44px; --tap-min-aa: 24px; /* Process flow (Guide infographic). The numbered disc is sized, not inherited: it carries a bold numeral at --text-base and has to stay a circle, so the diameter is a token and the spine offsets from half of it. 36px also clears --tap-min-aa comfortably, which matters only if a step ever becomes a link. */ --flow-marker: 2.25rem; --flow-gap: var(--space-5); /* disc to panel */ --flow-pad: var(--space-5); /* inside a panel */ /* Vertical rhythm, Sep 2026. The ladder is a doubling: 16px between paragraphs, 32px under a section heading and between question items, 64px between blocks. It used to be 16 / 24 / 40, which put only 1.67:1 between the space above a section heading and the space below it. Convention is 2-3:1, and below that a heading stops reading as belonging to the section it introduces and starts floating between two of them. The 40 and the 24 were also too close to each other for a whole-section break to out-rank a break inside one. Both were most visible where a block ends in a card grid: a hard border and shadow read tighter at a given distance than a paragraph's ragged bottom does. --space-heading is used twice, and deliberately: under a section heading, and between the items of a `qa`. Keeping them equal is what makes the first question sit off its heading exactly as the later ones sit off each other. Change one and you change both. */ --space-block: var(--space-9); /* between blocks in a page body */ --space-heading: var(--space-6); /* under a section heading, and between qa items */ --placeholder-h: 320px; --placeholder-h-tall: 620px; /* NOTE: breakpoints stay as literals in the media queries. CSS custom properties are not valid inside @media conditions — this is a language limitation, not an oversight. Breakpoints: 1024px, 900px, 767px. */ /* --- motion -------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; /* The On this page highlight sliding between rows. Long enough to read as travel rather than a jump, short enough to stay subtle. */ --duration-slow: 280ms; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }