/* * SchoolCMS – Design Tokens * ───────────────────────────────────────────────────────────── * THIS IS THE ONLY FILE THAT CHANGES BETWEEN SITES. * Replace the values below with the client's brand colours, * fonts, and spacing. All block CSS references these variables. * * Naming convention (mirrors the Rikkyo build): * – Colours are PRIMITIVES, one token per colour named after the * colour itself (--color-plum, --color-teal) – never roles * like "primary"/"secondary". On a site build, one token per * Figma colour variable, named after the variable. * – Text styles are full font shorthands ([style] weight * size/line-height family), one token per text style – on a site * build, one per Figma text style – named by their METRICS, never * their role (--text-40ob = 40px Open Sans Bold); the Figma style * name rides in the comment. Cathedral's convention. * – Everything is px – no rem/em units anywhere in the theme. * * How to update for a new site: * 1. Replace the colour block with one token per Figma colour * variable, named after the variable * 2. Replace the font tokens with one per family the text styles * use, named after the family (--font-open-sans), pick each * family's letter, and replace the --text-* styles with one token * per Figma text style (families load via @font-face at the top * of css/base/typography.css) * 3. Adjust --container-width if the design uses a wider/narrower max-width * 4. Adjust spacing and border-radius to match the design * ───────────────────────────────────────────────────────────── */ :root { /* ── Colours ─────────────────────────────────────────────── */ /* Burlington House School – one token per Figma colour variable (file heKkCZqetGZ4Jss8DyuX3n), named after the variable with its collection prefix dropped. A usage note records where the value was SEEN on a mockup, never where it might plausibly be used – a token nothing consumes says "declared; placed on no mockup" so the next pass does not go hunting for an effect that was never drawn. The file declares a single mode. */ /* brand/ */ --color-plum: #4a3041; /* brand/plum – nav bar (nav 11010:1120) + menu overlay (tier-1 10001:593), buttons, home banner band, callout band, FAQ/document row borders (10001:1279), download discs (tinted) */ --color-plum-dark: #280024; /* brand/plum-dark – deepest ground: overlay/gradient ends, video scrims */ --color-purple: #51284f; /* brand/purple – headings (h2–h5), footer (6003:181), FAQ open row (10001:1282), plus discs, checked controls, active dots, logo mark */ --color-mauve: #7e6b6b; /* brand/mauve – muted secondary tint (components only, unplaced on mockups) */ --color-teal: #088caa; /* brand/teal – POI card Colour=Teal, home CTA card (strong: white text on it) */ --color-gold: #fdba51; /* brand/gold – POI card Colour=Yellow, highlight tags (dark text on it) */ --color-slate: #51598a; /* brand/slate – POI card Colour=Violet */ /* neutral/ */ --color-white: #ffffff; /* neutral/white – page ground, text on dark panels */ --color-black: #000000; /* neutral/black – scrim base only (see opacity/black-*) */ --color-grey-100: #f3f4f5; /* neutral/grey-100 – form fields, light surfaces */ --color-grey-200: #efefef; /* neutral/grey-200 – table stripes, light panel fill */ --color-grey-300: #d9d9d9; /* neutral/grey-300 – rules, borders, carousel dots */ --color-grey-400: #c6c6c6; /* neutral/grey-400 – inactive dots, placeholder */ --color-grey-500: #b1b3b3; /* neutral/grey-500 – disabled / faint ink (inner template) */ --color-grey-600a: #a6a8ab; /* neutral/grey-600a – logo-mark watermark, sub-headings, meta */ --color-grey-600b: #a7a9ac; /* neutral/grey-600b – near-twin of 600a, table/form hairlines */ --color-grey-800: #58595b; /* neutral/grey-800 – body copy, captions, labels */ --color-grey-900: #414042; /* neutral/grey-900 – strongest neutral ink (form) */ --color-warm-grey: #c9c1c6; /* neutral/warm-grey – mobile menu close disc, alert chrome */ --color-warm-grey-light: #dad1cd; /* neutral/warm-grey-light – warm light surface (inner template) */ /* feedback/ */ --color-error: #da291c; /* feedback/error – form validation messages */ /* opacity/ – brand colours with alpha, written as rgba() – an 8-digit hex is not honoured everywhere the tokens are read, so the alpha is explicit */ --color-plum-10: rgba(74, 48, 65, 0.1); /* opacity/plum-10 – download-button disc, tinted UI discs */ --color-plum-20: rgba(74, 48, 65, 0.2); /* opacity/plum-20 – declared; placed on no mockup */ --color-plum-30: rgba(74, 48, 65, 0.3); /* opacity/plum-30 – declared; placed on no mockup */ --color-plum-80: rgba(74, 48, 65, 0.8); /* opacity/plum-80 – declared; placed on no mockup (the callout and home-downloads photo bands are a mix-blend-mode photo over --color-plum under --gradient-scrim-dark, not a flat wash – checked 2026-09-14) */ --color-plum-dark-0: rgba(40, 0, 36, 0); /* opacity/plum-dark-0 – declared; placed on no mockup (the footer and inner banner are FLAT fills, checked 2026-09-10) */ --color-plum-dark-70: rgba(40, 0, 36, 0.7); /* opacity/plum-dark-70 – home banner film-disc wash (ellipse-6/7 in 129:986, #280024 at 70 %) */ --color-purple-0: rgba(81, 40, 79, 0); /* opacity/purple-0 – declared; placed on no mockup (the button arrow and the POI Yellow card are both flat, checked 2026-09-10) */ --color-purple-60: rgba(81, 40, 79, 0.6); /* opacity/purple-60 – alert backdrop */ --color-purple-70: rgba(81, 40, 79, 0.7); /* opacity/purple-70 – declared; placed on no mockup (the film-disc wash is plum-dark-70, checked 2026-09-14) */ --color-teal-80: rgba(8, 140, 170, 0.8); /* opacity/teal-80 – POI Colour=Teal card fill */ --color-teal-90: rgba(8, 140, 170, 0.9); /* opacity/teal-90 – home CTA card fill */ --color-gold-80: rgba(253, 186, 81, 0.8); /* opacity/gold-80 – POI Colour=Yellow card fill */ --color-slate-80: rgba(81, 89, 138, 0.8); /* opacity/slate-80 – POI Colour=Violet card fill */ --color-white-10: rgba(255, 255, 255, 0.1); /* opacity/white-10 – hairlines on dark panels */ --color-white-20: rgba(255, 255, 255, 0.2); /* opacity/white-20 – footer/form-card fill on plum */ --color-white-40: rgba(255, 255, 255, 0.4); /* opacity/white-40 – button arrow disc fill */ --color-white-60: rgba(255, 255, 255, 0.6); /* opacity/white-60 – secondary text on dark */ --color-dark-0: rgba(17, 22, 34, 0); /* opacity/dark-0 – photo-scrim gradient start (#111622) */ --color-dark-70: rgba(17, 22, 34, 0.7); /* opacity/dark-70 – photo-scrim gradient end (#111622) */ --color-black-0: rgba(0, 0, 0, 0); /* opacity/black-0 – scrim gradient end */ --color-black-10: rgba(0, 0, 0, 0.1); /* opacity/black-10 – card shadow, nav hairline */ --color-black-20: rgba(0, 0, 0, 0.2); /* opacity/black-20 – home shadows */ --color-black-25: rgba(0, 0, 0, 0.25); /* opacity/black-25 – POI card shadow */ --color-black-50: rgba(0, 0, 0, 0.5); /* opacity/black-50 – alert backdrop */ --color-black-80: rgba(0, 0, 0, 0.8); /* opacity/black-80 – photo scrim start */ --color-black-90: rgba(0, 0, 0, 0.9); /* opacity/black-90 – inner template scrim */ /* ── Typography ──────────────────────────────────────────── */ /* Burlington House School – two families, self-hosted from the developer's font drop (fonts/kievit-ot, fonts/cultura-new; the @font-face rules head css/base/typography.css). Family letters for the --text-* names: k = Kievit OT, c = Cultura New. Kievit's Light face is declared at 300 – the design's "book" 350 renders with that file. Cultura New Book (400) stands in for the design's Cultura New Light (300), which the drop does not hold. */ --font-kievit: 'Kievit OT', 'Gill Sans', 'Trebuchet MS', 'Segoe UI', Helvetica, Arial, sans-serif; --font-cultura: 'Cultura New', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; /* Text styles – one token per Figma text style (file heKkCZqetGZ4Jss8DyuX3n, "components" 11010:1374), named by the DESKTOP METRICS, never by role: --text- family: k = Kievit OT, c = Cultura New weight: l = Light (300 – the design's 350 "book"), r = Regular (400 – Cultura New Book), x = Extrabold (800 – the design's 750) Value: full font shorthand – weight size/line-height family – line-height in px. letter-spacing can't ride in the shorthand: a style with tracking says so in its comment and the consumer sets it (2.4px at 12px = the design's letter-spacing/2-4 = 20 %). The comment names the Figma style, so roles stay readable without a lookup. Ordered by size. MOBILE-FIRST: the design's variable collection has a second mode for the 360-wide mockups (font-size/80 → 40, font-size/70 → 36, font-size/40 → 24, font-size/30 → 20, font-size/18 → 16 …), so the bare values below ARE that mobile mode – the desktop metrics in the token's name – and the nested @media brings in the desktop mode from 992px, fluid up to the drawn px at 1560 (see its own comment), so every `font: var(--text-…)` consumer is responsive for free. Body small is placed on no mobile mockup and keeps its one value. */ --text-12kl: 300 11px/16px var(--font-kievit); /* sub-heading – caps kicker over section titles, POSTED date; desktop 12px/20px, tracking 3.6px = 30 % (mobile 3.3px) */ --text-12kx: 800 11px/16px var(--font-kievit); /* button – .button label, nav top-bar links, cite, tags, footer Directions; desktop 12px/20px, uppercase, tracking 2.4px = 20 % (mobile 2.2px) */ --text-14kl: 300 14px/26px var(--font-kievit); /* body small – footer legal bar, form consent line (one value – no mobile placement) */ --text-16kl: 300 14px/23px var(--font-kievit); /* body-2 – footer address columns; desktop 16px/26px */ --text-18kl: 300 16px/27px var(--font-kievit); /* body · Body – paragraph copy, breadcrumbs, form placeholders, banner card sub-lines; desktop 18px/30px */ --text-20kl: 300 16px/20px var(--font-kievit); /* h5 – menu tier-2/3 items, footer school names, POI card titles; desktop 20px/30px */ --text-30kl: 300 20px/25px var(--font-kievit); /* h4 – the inner template's "H3 Heading", highlight card titles, "Watch our school film", FAQ plus glyph; desktop 30px/38px */ --text-30kx: 800 20px/25px var(--font-kievit); /* h4 bold – declared in components, placed on no mockup; desktop 30px/38px */ --text-40kl: 300 24px/30px var(--font-kievit); /* h3 – the inner template's "H2 Heading", every standard block's section title, banner card titles, "Get in touch"; desktop 40px/50px */ --text-40cl: 300 24px/30px var(--font-cultura); /* h3 serif – menu tier-1 items; desktop 40px/50px */ --text-70cl: 300 36px/36px var(--font-cultura); /* h2 – inner page title (the H1), home/callout/quote/alert section titles, quote text; desktop 70px/70px */ --text-80cl: 300 40px/40px var(--font-cultura); /* h1 – home banner headline; desktop 80px/80px */ --text-80kl: 300 40px/40px var(--font-kievit); /* display – welcome-zoom "Think Differently", journey "Start your Burlington Journey"; desktop 80px/80px */ /* Desktop mode – the 1560-wide mockups – from 992px, FLUID BELOW 1560. Every desktop size is clamp(floor, D/15.6vw, D): exactly the drawn D px at 1560 and shrinking in proportion to the viewport below it – 97 % on a 1512-wide laptop, 92 % at 1440 – down to a floor at 1200 (77 % of D), or the mobile metric where that is higher, so nothing on a 992-wide tablet is smaller than the phone's. Line-heights are the drawn ratios, unitless, so they scale with the size. Hannah Condry laid the mockup over the build on her 1512-wide screen and read everything as a little too large and cramped (Feedbucket #988634, #988638, #988655): at the mockup's own px the type IS 3 % larger against a 1512 frame than the drawing is against its 1560 one. Charlie's call, 2026-09-22 – the one place vw is allowed in the theme's type; the page margins stay Bootstrap's. Tracking is set by the consumers in px and does not scale: 2.4px on 11–12px type is within the design's own rounding. */ @media (min-width: 992px) { --text-12kl: 300 clamp(11px, 0.7692vw, 12px)/1.6667 var(--font-kievit); --text-12kx: 800 clamp(11px, 0.7692vw, 12px)/1.6667 var(--font-kievit); --text-16kl: 300 clamp(14px, 1.0256vw, 16px)/1.625 var(--font-kievit); --text-18kl: 300 clamp(16px, 1.1538vw, 18px)/1.6667 var(--font-kievit); --text-20kl: 300 clamp(16px, 1.2821vw, 20px)/1.5 var(--font-kievit); --text-30kl: 300 clamp(23px, 1.9231vw, 30px)/1.2667 var(--font-kievit); --text-30kx: 800 clamp(23px, 1.9231vw, 30px)/1.2667 var(--font-kievit); --text-40kl: 300 clamp(31px, 2.5641vw, 40px)/1.25 var(--font-kievit); --text-40cl: 300 clamp(31px, 2.5641vw, 40px)/1.25 var(--font-cultura); --text-70cl: 300 clamp(54px, 4.4872vw, 70px)/1 var(--font-cultura); --text-80cl: 300 clamp(62px, 5.1282vw, 80px)/1 var(--font-cultura); --text-80kl: 300 clamp(62px, 5.1282vw, 80px)/1 var(--font-kievit); } /* ── Spacing ─────────────────────────────────────────────── */ /* Burlington House School declares no spacing variables – the scale below is the base placeholder except --space-xl, which is the BLOCK RHYTHM (.contentBlock's collapsed margin, css/base/content.css): the inner template 10001:987 stacks its blocks exactly 100px apart (callout → form, 24 blocks), the mobile home 10001:2042 64px, so the token is responsive like the --text-* styles. Measurements the mockups repeat without a variable, for component agents: 24px card gutter (= Bootstrap's --bs-gutter-x), 45px heading → content (FAQ, POI, table), 32px FAQ-row side padding, 132px page margins. */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 64px; /* block rhythm – mobile home mockup; 100px from 992px below */ --space-2xl: 64px; --space-3xl: 96px; /* ── Layout ──────────────────────────────────────────────── */ /* The inner mockups are 1560 wide with 132px margins = a 1296 content column. Bootstrap's .container is 1320 outside its 12px + 12px gutter from 1200px, so its CONTENT box is exactly 1296 – the token names the outer width the vendor CSS and the editor canvas read. */ --container-width: 1320px; /* Bootstrap .container from 1200px – 1296 content + 24px gutter */ --container-wide-width: 1400px; /* placeholder kept – no variable; home band content measures 1407–1471 */ /* ── Borders & Radius ────────────────────────────────────── */ /* No radius variables declared – values measured from the mockups, each reused across components. (Circular shapes – plus/burger/arrow discs, dots – use border-radius: 50% directly: geometry, not corner rounding.) */ --border-radius-sm: 5px; /* footer form fields 6003:212 (checkbox 2px is its own) */ --border-radius-md: 10px; /* highlights location tags 129:344 (left corners only) */ --border-radius-lg: 30px; /* every "frosted" card – POI, CTA, highlights, home downloads, footer form, alert photo */ --border-radius-pill: 100vmax; /* FAQ / Download rows (drawn 45px on a 47px row), chips */ /* ── Shadows ─────────────────────────────────────────────── */ /* No shadow variables declared – the two effects the mockups apply, built from the declared opacity colours. */ --shadow-sm: 5px 5px 10px var(--color-black-10); /* burger disc drop-shadow 11010:814 */ --shadow-md: 10px 10px 40px var(--color-black-25); /* "frosted" cards – POI, CTA, home downloads, footer form; highlights card on hover */ --shadow-lg: 16px 16px 56px var(--color-black-25); /* the theme's own raised depth – NOT drawn: --shadow-md carried further for a card that lifts on hover (poi) */ /* ── Effects ─────────────────────────────────────────────── */ /* backdrop-filter blur behind every "frosted" layer (POI/highlights/ downloads cards, footer form card + fields, burger disc; the CTA card draws 10px). The .button arrow disc's 4px blur is its own – css/base/buttons.css. */ --blur-frosted: 15px; /* ── Gradients ───────────────────────────────────────────── */ /* Photo scrims the mockups repeat, built from the opacity colours – transparent at the top, dark at the foot where the caption sits. */ --gradient-scrim: linear-gradient(180deg, var(--color-black-0) 0%, var(--color-black-80) 100%); /* home banner school cards 129:986 (×3, mobile too), POI photo tiles 11010:1076 (×3) */ --gradient-scrim-dark: linear-gradient(180deg, var(--color-dark-0) 0%, var(--color-dark-70) 100%); /* callout-photo-bg 10001:1261 (rectangle-33), video scrims – the opacity/dark pair, NOT plum */ /* ── Transitions ─────────────────────────────────────────── */ /* No motion variables declared – the house hover speed. */ --transition-base: 0.2s ease; --transition-slow: 0.4s ease; /* ── Plugin blocks ───────────────────────────────────────── */ /* The Interactive Map block comes from the Innermedia 2D Map plugin (Burlington House's own copy – inc/plugin-specifics.php), which reads these custom properties (the plugin's README lists the full set). They carry the look of the theme's own map block it replaced on 2026-10-19 – a plum pin turning purple under the pointer, a white popup with grey-800 copy and a 40px title, its media on purple – so restyle the map through these, never in the plugin. */ --im-2d-map-accent: var(--color-plum); /* pin disc and name pill, popup close, Back */ --im-2d-map-accent-hover: var(--color-purple); /* pin disc on hover */ --im-2d-map-accent-contrast: var(--color-white); /* rings and text on the accent */ --im-2d-map-popup-text: var(--color-grey-800); /* popup copy */ --im-2d-map-popup-title: var(--color-grey-800); /* popup title */ --im-2d-map-title-size: 40px; /* popup title – --text-40kl's size */ --im-2d-map-media-bg: var(--color-purple); /* behind popup images and the video poster */ --im-2d-map-control-text: var(--color-purple); /* carousel arrows */ --im-2d-map-note: var(--color-purple); /* the logged-in notes */ --im-2d-map-radius: var(--border-radius-md); /* popup corners */ --im-2d-map-popup-max-width: 1000px; /* the live site's popup width – the theme's ran to twice that (Feedbucket #1037141) */ --im-2d-map-scroll-offset: calc(var(--header-height) + 24px); /* a map swapped in or out scrolls back clear of the fixed header */ /* Desktop block rhythm – the 1560-wide inner template – from 992px */ @media (min-width: 992px) { --space-xl: 100px; } } /* The divider block's .spacer-* / .divider-line rules used to sit here. They are one block's styles, so they live with that block now (blocks/standard/divider/divider.css) – the grey full-width background line this file drew ran straight through the badge the block's own rule already leaves a gap for. tokens.css declares tokens, nothing else. */