/* * Design tokens — the single scale the whole site is built on. * * Loaded before every other Smart College stylesheet so programme.css, * home.css, catalogue.css and site.css all resolve against the same values. * Colour is deliberately absent: it arrives from the active palette, injected * inline in as --sc-* so the admin can repaint the site. This file owns * everything that is *not* colour. * * Why it exists. A token extraction of the live homepage on 5 Oct 2026 found * twelve distinct body font sizes — 12, 12.16, 12.48, 12.8, 13.5, 14, 14.08, * 15, 15.2, 15.52, 16, 24 — five font weights, five line heights and six corner * radii. The fractional values were never designed; they are relative units * compounding through nested elements. upgrad.com, measured the same way, uses * five sizes and one radius. That difference is most of what reads as polish. * * EVERY VALUE IS IN PX, ON PURPOSE. The theme sets html { font-size: 10px }, * so 1rem is 10px and anything sized in rem here would render at 62.5%. That * bug already shipped once and shrank the entire site. */ :root { /* ---- Faces ---- * Inter for text, Poppins for display and figures, Tajawal for Arabic — * the Al Masa pairing, carried across so the two sites read as one house. * Poppins is reserved for headings and the big numbers; its wide counters * fall apart at body sizes. */ --sc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --sc-font-display: "Poppins", var(--sc-font-body); --sc-font-arabic: "Tajawal", system-ui, sans-serif; /* The navy is never flat. This tile is the Smart College equivalent of Al * Masa's billboard pattern — same 480×280 grid, same gold line art at 1.2 * stroke and 20% strength, drawn from an academic vocabulary. It lives * here rather than in the palette because Palette::css() only emits hex. */ --sc-pattern: url('/assets/images/brand/pattern-academic.svg'); /* ---- Type scale: eight steps, nothing between them ---- */ --t-xs: 13px; /* labels, eyebrows, badges */ --t-sm: 15px; /* secondary text, captions, table cells */ --t-base: 17px; /* body — above 16 because Arabic reads small */ --t-lg: 20px; /* lead paragraphs, card titles */ --t-xl: 26px; /* h3 */ --t-2xl: 34px; /* h2 */ --t-3xl: 44px; /* h1 */ --t-display: 56px; /* hero only */ /* Three weights, not five. 500 and 800 are retired: at these sizes they were indistinguishable from their neighbours and only added noise. */ --w-body: 400; --w-semi: 600; --w-bold: 700; /* Latin and Arabic need different leading. Arabic ascenders and descenders reach further, so the same 1.65 that is comfortable in Lexend is tight in Tajawal. */ --lh-tight: 1.3; /* headings */ --lh-body: 1.65; /* Latin body */ --lh-arabic: 1.8; /* Arabic body */ --measure: 72ch; /* longest comfortable line for body copy */ /* ---- Space: a 4px rhythm, seven steps ---- */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px; --s-7: 96px; --section-y: var(--s-6); /* vertical section padding, mobile */ --gutter: var(--s-3); /* page side gutter, mobile */ /* ---- Shape: two radii, replacing 18/99/999/12/100%/30 ---- */ --r-card: 12px; --r-pill: 999px; /* ---- Depth: three levels, tinted navy ---- A black shadow over a navy-tinted page reads as dirt; tinting it with the brand ink keeps it reading as depth. */ --shadow-rest: 0 1px 2px rgba(10, 16, 51, .06); --shadow-raised: 0 8px 24px -12px rgba(10, 16, 51, .18); --shadow-overlay: 0 24px 56px -24px rgba(10, 16, 51, .30); --border: 1px solid var(--sc-line, #E2E0DB); /* ---- Motion ---- */ --ease: cubic-bezier(.22, .61, .36, 1); --dur-fast: 150ms; --dur: 220ms; --dur-slow: 320ms; /* ---- Layering: a named scale, so nothing invents its own z-index ---- */ --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-overlay: 1000; /* ------------------------------------------------------------ gold --- * * Navy grounds. Cream reads. Gold accents. * * Gold is a rule, a monogram, a number or a single word. Never a field, * never a gradient, never a background. Flooding gold is the fastest way * to make this brand look cheap. * * The tokens below exist so that rule can be followed without thinking, * and there is deliberately **no gold background token**. If a component * needs a gold surface, the component is wrong. * * One measured clause. On the navy ink the gold reads at 6.94:1; on the * cream paper it reads at 2.55:1, which fails WCAG at every size. So the * gold word and the gold number live on the dark ground. On a light * surface, gold is a rule — or, where a word is genuinely needed, the * deep gold `--sc-accent-ink`, which is the same hue and saturation * dropped in lightness to clear 4.53:1 on this palette's own paper. */ --rule-gold: 1px solid var(--sc-accent); --rule-gold-thick: 2px solid var(--sc-accent); /* The gold word, by ground. Use the first on navy, the second on cream. */ --gold-on-dark: var(--sc-accent); --gold-on-light: var(--sc-accent-ink); } @media (min-width: 768px) { :root { --section-y: var(--s-7); --gutter: var(--s-4); } } /* The display step is the only place a fluid size is justified: it is one element per page and it has to survive a 375px screen. clamp() is given px bounds for the same reason everything else is in px. */ @media (max-width: 767px) { :root { --t-display: 36px; --t-3xl: 32px; --t-2xl: 26px; --t-xl: 21px; } } /* Arabic sets one step larger at body sizes and looser. Scoped to [dir] rather than :lang so it follows the document direction the layout actually sets. */ [dir="rtl"] { --t-base: 18px; --t-sm: 16px; --lh-body: var(--lh-arabic); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }