/* * Parker design tokens — the palette and type scale every academics section * draws from. * * Read off the DC Program Page Figma file, which exposes them as named * variables. Naming them here rather than repeating hex literals in each * design's stylesheet is what makes a skin a handful of overrides instead of a * fork: a section says `var(--pk-heading)` and the skin decides what that is. * * Loaded before any design stylesheet, so a design can override a token on its * own root without touching this file. */ :root { /* ---- palette, as named in Figma ---- */ --pk-primary-blue: #0B1267; --pk-rich-blue: #0E1781; --pk-border-blue: #1463B0; --pk-secondary-blue: #254CA7; --pk-light-blue: #6FB8FF; /* eyebrow on dark backgrounds */ --pk-off-white: #FCF9F9; --pk-charcoal: #343434; --pk-body: #0B0B0B; --pk-accent-orange: #D65D33; --pk-light-orange: #FA8157; /* "Light Orange" in the file — split band's bottom edge */ --pk-tint-blue: #E0ECF8; /* bullet / icon-tile fill */ --pk-tint-sky: #E6F2FE; /* degree-info tile fill (918:10755) */ --pk-tint-grey: #E9E9E9; /* FAQ item fill */ /* ---- families ---- */ --pk-sans: 'Barlow', system-ui, -apple-system, sans-serif; /* * `azo-sans-web` first, and that is not a nicety: it is the family name * Typekit actually defines (kit jgc4boc). "Azo Sans" matches nothing, so * every heading silently fell back to Barlow. * * It was invisible until the section CSS started winning against the * theme: Elementor's kit sets `font-family:"azo-sans-web"` on h2, that rule * outranked ours at (0,1,1) vs (0,1,0), and so the headings happened to be * right for the wrong reason. Raising our specificity made the real value * take effect and the fallback appear. Caught by reading document.fonts on * the local site, not by looking — Barlow Black and Azo Sans Black are * similar enough at a glance. */ --pk-display: 'azo-sans-web', 'Azo Sans', 'Barlow', system-ui, -apple-system, sans-serif; /* * ---- type scale ---- * Sizes do not change between breakpoints. That is measured, not an * oversight: the mobile frames use the same 16/26/22/20 as desktop. */ --pk-eyebrow-size: 18px; /* Barlow ExtraBold, letter-spacing 0 */ --pk-eyebrow-alt-size: 16px; /* Azo Sans Black Italic, ls .05em */ --pk-h2-size: 30px; --pk-h3-size: 26px; --pk-h4-size: 24px; --pk-copy-size: 20px; --pk-copy-lg-size: 22px; --pk-copy-sm-size: 18px; --pk-link-size: 14px; --pk-button-size: 16px; --pk-tight: 1.2; --pk-loose: 1.5; --pk-track: .05em; /* ---- geometry ---- */ --pk-radius: 8px; --pk-radius-sm: 3px; --pk-radius-pill: 20px; /* * ---- motion ---- * The curves and durations section transitions share. Standard is the * accordions' open/close and their colour fades; out starts fast and * settles, for things that grow — program-nav's card expand. A curve one * design uses once stays a literal in that design; a curve two designs * repeat belongs here. assets/js/motion.js reads the durations back from * the computed style, so a change here moves the scripts' timing too. * Not everything follows: program-nav's looks E and H hand-time their * two-beat open/close against 280/320 (the 220ms reveal delay, the * 200/150ms close delays, the shadow's 275ms) — re-measure those beats * in program-nav/style.css whenever these durations change. * Fast is hover feedback — a colour, filter or opacity fade, the text * link's chevron — on the shared parts, the hero, program-nav and * content-media's globe pause toggle. * Nudge is the chevron that slides or turns on hover, a beat behind the * colour: program-nav's, and the solid button's in parts.css, which copied * it to match the nav. The accordion's .18s panel fade stays a literal: same * number, a different beat, one design. */ --pk-ease-standard: cubic-bezier(.4, 0, .2, 1); --pk-ease-out: cubic-bezier(.2, .8, .2, 1); --pk-dur-fast: 150ms; --pk-dur-nudge: 180ms; --pk-dur-base: 280ms; --pk-dur-slow: 320ms; /* * ---- roles ---- * What a section actually references. A skin reassigns these; nothing below * this line should appear as a literal in a design's stylesheet. */ --pk-fg: var(--pk-body); --pk-heading-fg: var(--pk-primary-blue); --pk-eyebrow-fg: var(--pk-border-blue); --pk-muted-fg: var(--pk-charcoal); --pk-panel-bg: var(--pk-tint-blue); --pk-panel-fg: var(--pk-primary-blue); --pk-fact-bg: var(--pk-tint-sky); /* degree-info tiles */ --pk-fact-border: rgba(20, 99, 176, .15); /* Border Blue at 15% */ --pk-link-fg: var(--pk-accent-orange); /* The hand-drawn underline under text links. Orange in every frame — * including on dark grounds under off-white link text — so it does not * follow --pk-link-fg; a skin that wants otherwise reassigns it. */ --pk-chalk: var(--pk-accent-orange); /* Inline links inside body copy — Secondary Blue per 482:1343 ("Parker * Seminars"), the academics default. Distinct from --pk-link-fg, which is * the chalk CTA links' colour and stays orange. */ --pk-copy-link-fg: var(--pk-secondary-blue); --pk-rule: var(--pk-border-blue); /* The neutral hairline (525:5524's column divider) — never the blue rule. */ --pk-rule-soft: #D1D1D1; } /* * The dark skin. Applied to a section root, so it cascades to every part inside * without any part needing to know which skin it is in — that is the whole * reason these are roles and not colours. */ .pk-skin-dark { --pk-fg: var(--pk-off-white); --pk-heading-fg: var(--pk-off-white); --pk-eyebrow-fg: var(--pk-light-blue); --pk-muted-fg: var(--pk-off-white); --pk-link-fg: var(--pk-off-white); --pk-copy-link-fg: var(--pk-off-white); --pk-rule: rgba(252, 249, 249, .35); } /* The brand skin: solid Rich Blue panel, used by the split band. */ .pk-skin-brand { --pk-fg: var(--pk-off-white); --pk-heading-fg: var(--pk-off-white); --pk-eyebrow-fg: var(--pk-off-white); --pk-muted-fg: var(--pk-off-white); --pk-link-fg: var(--pk-off-white); --pk-copy-link-fg: var(--pk-off-white); --pk-rule: rgba(252, 249, 249, .35); }