/* ============================================================ KDS v1.0 · tokens/brands/youth-careers.css · © Khosha Systems. ------------------------------------------------------------ YOUTH CAREERS CANADA — brand token overrides. Loaded AFTER tokens/kds.css and after any philosophy preset. TOKENS ONLY — never component rules. PROVENANCE Brand: Youth Careers Canada (youthfuturejobs.ca) Extracted from: Youth_Careers_Canada_Brand_Guidelines_Astra_Light.pdf (p.3 palette) corroborated by pixel-sampling public/img/youthcareersnew.png Method: brand guideline palette; logo gradient stops sampled from the supplied raster lockup (sampled #F85018 → #F8A000 → #F8C000 warm ramp, #082038 wordmark ink — JPEG-darkened, consistent with the documented #EF3130 / #FF9317 / #FFC01D / #16283B) Caveat: the guidelines state these are sampled approximations from a white-backed JPEG and must be confirmed against the original vector master before print production. Date: 2026-09-25 ============================================================ */ :root { /* ---- 1. TYPE — Inter is the guideline's recommended website typeface (p.4). The logo letterforms are artwork and are never recreated in Inter. */ --kds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Display face is Archivo, not Inter. The guidelines name Inter as the website typeface and it is kept for body/labels, but a product whose headlines are also Inter looks like every other AI-built site. Archivo's heavier geometric grotesk also sits closer to the YOUTH wordmark's own letterforms. */ --kds-font-display: "Archivo", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---- 2. HUE PRIMITIVES — every semantic colour re-derives from these. */ --kds-hue-flame: #FF9317; /* ORANGE — the rising mark */ --kds-hue-amber: #FFC01D; /* YELLOW — the arrowhead */ --kds-hue-rose: #EF3130; /* RED — the maple leaf */ --kds-hue-ink: #16283B; /* NAVY — the wordmark */ /* ---- 3. BRAND SURFACE COLOURS */ --ycc-navy: #16283B; --ycc-navy-deep: #0E1B29; --ycc-navy-soft: #23384F; --ycc-orange: #FF9317; --ycc-yellow: #FFC01D; --ycc-red: #EF3130; --ycc-ivory: #FAF7F2; --ycc-ivory-warm: #F3EDE4; /* The logo's own gradient — the single visual signature of the brand. Use for the mark, the accent rule, progress and one hero block per page. */ --ycc-rise: linear-gradient(120deg, var(--ycc-red) 0%, var(--ycc-orange) 48%, var(--ycc-yellow) 100%); --ycc-rise-soft: linear-gradient(120deg, color-mix(in srgb, var(--ycc-red) 14%, transparent) 0%, color-mix(in srgb, var(--ycc-orange) 14%, transparent) 48%, color-mix(in srgb, var(--ycc-yellow) 14%, transparent) 100%); /* ---- 4. SEMANTIC OVERRIDES NOTE ON CONTRAST: #FF9317 against white is only ~2.0:1. The brand's own lockup puts navy ink beside the orange mark, so brand buttons take NAVY text (7.2:1) rather than white. This is on-brand AND accessible. */ --kds-brand: var(--ycc-orange); --kds-brand-fg: var(--ycc-navy); --kds-brand-soft: color-mix(in srgb, var(--ycc-orange) 14%, transparent); /* Links and interactive text are navy — the brand has no second blue, and inventing one would break the two-colour discipline of the guidelines. */ --kds-accent: #16283B; --kds-accent-fg: #FFFFFF; --kds-accent-soft: color-mix(in srgb, var(--ycc-orange) 12%, transparent); --kds-danger: #C32320; /* Motion: quick, settled, never elastic. Bounce/overshoot reads as dated. */ --kds-dur-fast: 150ms; --kds-dur-base: 220ms; --kds-dur-slow: 380ms; --kds-ease-standard: cubic-bezier(0.2, 0, 0, 1); --kds-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --kds-ease-exit: cubic-bezier(0.4, 0, 1, 1); --kds-focus-ring: var(--ycc-orange); --kds-selection: color-mix(in srgb, var(--ycc-yellow) 40%, transparent); /* ---- 5. NEUTRALS — warm ivory ramp, so every surface sits in the brand's "ivory and bronze frame" rather than a cold grey. */ --kds-n0: #0B1521; --kds-n1: #16283B; --kds-n2: #24374C; --kds-n3: #3B4E64; --kds-n4: #5A6D83; --kds-n5: #7E8FA3; --kds-n6: #A4B2C2; --kds-n7: #C8D2DD; --kds-n8: #E4E9EF; --kds-n9: #F3EDE4; --kds-n10: #FAF7F2; /* ---- 6. LAYOUT WIDTH KDS ships a 1120px container, which left ~400px of dead space each side on a 1920 monitor and made the site look like a narrow column. Job search in particular wants width: filter rail + results + map side by side. min() rather than a fixed px so small screens stay exactly as they were — below 1760 this resolves to 100% and .ycc-wrap's own padding provides the gutter, so there is no double margin on a phone. Long-form reading is unaffected: prose is capped by --kds-measure, not this. */ --kds-container: min(1760px, 100%); /* ---- 7. SHAPE — 8–12px radius per the application spec (p.6). */ /* Tight, deliberate geometry. Large radii make every card look identical and squeeze content; capped at 12px for cards and 8px for fields. */ --kds-radius-xs: 3px; --kds-radius-sm: 6px; --kds-radius-md: 8px; --kds-radius-lg: 12px; --kds-radius-xl: 12px; --kds-radius-full: 999px; /* ---- 8. VOICE Deliberately NOT set here: --kds-text-display, --kds-tracking-tight, --kds-measure and --kds-control-h. Philosophy presets are attribute-scoped ([data-kds-philosophy=...]) and therefore have the SAME specificity as :root — a value set here would load later and silently flatten Marquee's editorial scale on every marketing page. The brand owns colour, type FAMILY and shape; each surface's philosophy owns its scale and rhythm. Guideline sizes (display 48–64/700, body 16–18/400, labels 12–14/600, 44px touch targets) are met by the presets we ship. */ } /* Light theme explicit surfaces — ivory ground, white cards. */ :root, :root[data-kds-theme="light"] { --kds-bg: var(--ycc-ivory); --kds-surface: #FFFFFF; --kds-surface-2: var(--ycc-ivory); --kds-surface-3: var(--ycc-ivory-warm); --kds-fg: var(--ycc-navy); --kds-fg-muted: #4A5C72; --kds-fg-faint: #657384; --kds-border: #E2DACE; --kds-border-strong: #968D80; --kds-ink: var(--ycc-navy); --kds-ink-fg: var(--ycc-ivory); --kds-inverse: var(--ycc-navy); --kds-inverse-fg: var(--ycc-ivory); } /* --------------------------------------------------------------------------- NO DARK THEME — deliberate. This brand is navy ink on an ivory ground, and the whole layout device is flat NAVY blocks used as structure. Invert it and two things break at once: the navy wordmark in the logo disappears into the navy page, and every navy section band becomes the same colour as the background, so the page loses its structure. Every comparable Canadian job board (Workopolis, Indeed, LinkedIn, Glassdoor) ships light-only for the same reason: trust surfaces read as calm and bright. One excellent theme beats two mediocre ones. To restore dark later, this is the only file that needs a [data-kds-theme="dark"] block again. --------------------------------------------------------------------------- */ /* ============================================================================ REDUCED MOTION — re-assert, because this file loads last. kds.css zeroes --kds-dur-* inside @media (prefers-reduced-motion: reduce), but the motion block above re-declares them on :root unconditionally and this stylesheet loads after it. Same specificity, later wins, so the zeroing lost the cascade and every surface kept animating for people who asked it not to. Anything that overrides a token inside a preference query must restate that query itself. ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --kds-dur-fast: 0ms; --kds-dur-base: 0ms; --kds-dur-slow: 0ms; --kds-dur-grand: 0ms; --kds-motion-scale: 0; } }