/* * InstanceBizlist — the BIZLIST brand for bizlist.co.uk. * * This is an Instance Theme's cascading stylesheet (ADR 0019). The * Directory layout emits master's own * plugins/EgappsBizlist/webroot/css/directory.css FIRST and this file * AFTER it, so everything below wins by cascade order. * * CASCADE FOR CSS, SHADOW FOR TEMPLATES. Overriding a template forks * it and it stops receiving master's improvements; a stylesheet * cascaded on top keeps every one of them. This theme therefore forks * NO TEMPLATE AT ALL — the whole brand is values of the custom * properties master declares on :root, plus a logo. * * That means: NOTHING BUT the @font-face block and the :root block * belongs in this file. A brand that needs a selector here has found * something master's tokens cannot express, and that is a finding * against master (a token or a rule), not a rule to add quietly — a * selector in an instance file silently stops tracking master's design * the day master changes the markup underneath it. Every value below * is a token master already declares; the nine roles this edition * needed that master lacked were added to master first (plan-07 * phase-3 issue 01), each defaulting to an existing token, so an * unthemed Directory renders exactly as it did. * * There is NO COPY STEP: this file is served straight from the theme * by AssetMiddleware, unlike master's plugin stylesheet, which is * copied into webroot/egapps_bizlist/. A copy of a per-instance file * is a copy that can go stale. * * SOURCE: the BIZLIST Brand Guidelines, "Amber Equal" edition, 2026 — * six pages: cover, logo, logo rules, colour, typography, colour in * use. It is the whole specification: every earlier guideline this * theme was written from has been superseded, and nothing of the * earlier theme's colours, typefaces or rationale survives below. * * The edition's own rules, quoted where a value below depends on one: * * "Keep text ink or paper — colour lives in shapes, not words." * Hence --bl-heading is INK, not a brand colour: headlines are words. * Colour is carried by the header, the hero, the band, the buttons * and the badges — shapes. * * "Magenta stays the primary action so buttons read the same * everywhere." Hence --bl-action is magenta while --bl-brand (links, * the phone number) is purple. Master held both in one token until * this edition asked for them apart. * * "Amber. Backgrounds, panels, headlines on purple, buttons and * badges. Pairs with ink text; with purple or ink shapes, never * magenta text." Hence --bl-chrome (the header) is amber with ink * nav text, --bl-band (the Body Band) is an amber tint, and * --bl-hero-accent (the strapline on the purple hero) is amber. * * "Ink. Purple-tinted near-black. Replaces pure #000 everywhere." * * FONTS — and this phase's decision (plan-07 phase-4). The edition's * typography page is the one part of it this theme does not follow. * Its serif pairing ("a serif to say it, a sans to do it") was built * in phase 3 and the user asked for the phase-1 families back, so the * body is SOURCE SANS PRO — the brand package's own SIL OFL body * face, self-hosted below — and the headlines are FIGTREE, master's * own typeface, which is why this theme declares no face for it and * costs no extra request. * * Headlines are 800 and SENTENCE CASE. Not phase 1's 900 uppercase: * that was a licensable stand-in for Panton Extra Black under the * 2017 guidelines, which this edition superseded, and all-caps ink * headlines fight the calm the ink-headline rule above buys. Read * this paragraph before reintroducing either the serif or the * capitals — each has been tried once. */ /* * Source Sans Pro, converted from the brand package's OTFs to woff2. * Regular and Bold with their italics — the four faces running copy * can ask for. The URLs are relative to this file's SERVED location * (/instance_bizlist/css/), so the fonts beside it are ../fonts/. * Licence: "SIL Open Font License.txt" beside them. * * NO EXTERNAL REQUEST, unchanged since phase 1 and restated when the * edition's HTML linked the Google Fonts CDN: a third-party fetch on * every page of a site whose whole value is fast crawlable pages is * refused, for a file the theme can serve itself. The headline face * needs no block at all — FigtreeVariable is master's, declared in * directory.css against the app's own webroot/fonts/. */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/SourceSansPro-It.woff2') format('woff2'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/SourceSansPro-Bold.woff2') format('woff2'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/SourceSansPro-BoldIt.woff2') format('woff2'); } /* * The brand, entirely as token values. * * Contrast is recorded per value (AA is 4.5:1 for body text, 3:1 for * large text and for non-text objects such as the focus ring). The * edition's palette is a generous one: ink on paper is 16.6:1, and * the one pair that ever sat near the line — paper on the button — * was moved over it in plan-07 phase-5 (see --bl-action). */ :root { /* Purple. Links, the phone number, sub-headings. 8.77:1 on paper, and paper on it is 8.77:1 too, so it carries the hero and the footer unchanged. NOT the button fill any more — that is --bl-action below, which is what this edition split out of this token (and since plan-07 phase-5 a button's hover is derived from --bl-action too, not from purple). */ --bl-brand: #6E2882; /* Purple-deep, the edition's darkest purple tint. Link titles (a business name in a row, a tile, a news item) and the Browse Hero's ground — and, in plan-07 phase-5, the hero's speech-bubble tail (--bl-tail below). 12.48:1 on paper; the amber strapline on it is 7.38:1. DIVERGENCE, recorded: the edition's own mock grounds its hero panel in the MID purple. This token is also hover and link titles, where the deep tone is the right one, and one token cannot be two values — so the hero is deep purple here. The amber strapline reads on it exactly as the edition intends. */ --bl-brand-strong: #4C1A5C; /* Magenta, as the ACCENT: the focus ring, the parent of the tint below, highlights. 4.25:1 on paper — over the 3:1 a non-text object needs. It is never running text and never a link: those are --bl-brand. Headlines left this token in master so that an edition like this one can have ink headlines and a coloured focus ring at the same time. */ --bl-accent: #DA2F84; /* Purple-10, the edition's lightest purple tint. Featured rows, the Featured badge, the news scope chip, the child pills. --bl-brand-strong on it is 10.63:1, --bl-ink 14.14:1. DIVERGENCE, recorded: the edition's Featured badge is a SOLID purple pill with paper text. Master's badge is this tint with dark text, and two more tokens for one pill is the wrong trade, so the badge stays a tint. It still reads as the brand. */ --bl-accent-soft: #F2E4EE; /* Amber, at about a third on paper. The Body Band — the tinted ground that runs the full width of every inner page. The edition gives amber exactly this job ("backgrounds, panels"). DEEPENED from amber-10 #FEF4E0 in plan-07 phase-4: at that tint the band was a hairline lighter than the paper objects sitting on it (paper on amber-10 is 1.04:1), so the three-band rhythm was invisible and the Contact Card, the tiles and the hosted form's borderless fields did not read as objects at all. The reference lifts a white card off a mid-blue; this is the same move in the edition's own colour. A PURPLE band was refused: the Featured tint, the badge and the child pills are purple-10, and they would have vanished into it. This exact value is the phase's visual review's choice, between the amber-25 that left the band too timid and the amber-40 it judged a shade heavy. Measured on it: --bl-ink 14.46:1, --bl-brand 7.64:1, --bl-brand-strong 10.87:1, --bl-ink-muted 8.36:1 — every one of them far over the 4.5:1 body-text line, so nothing on the band has to avoid a colour. --bl-surface lifts off it at 1.15:1, where amber-10 gave 1.04:1, and the boxed objects carry a --bl-line edge as well. Deeper than this starts eating --bl-brand's headroom for no more lift. */ --bl-band: #FDE8C1; /* Ink. Body text, and the edition's replacement for pure black everywhere. Purple-tinted near-black, 16.6:1 on paper. */ --bl-ink: #1F1820; /* Secondary text: datelines, breadcrumbs, addresses, counts. 9.59:1 on paper, 9.19:1 on the band — the edition's muted tone clears AA for running text on both grounds, so nothing on this site has to avoid it. */ --bl-ink-muted: #4A3F47; /* Paper. The boxed objects (the Contact Card, the tiles) and the page ground — the edition names one paper, so both tokens take it and the site has no second off-white. The header is NOT this any more: it is --bl-chrome below. */ --bl-surface: #FCF9FB; --bl-page: #FCF9FB; /* Borders and dividers, the edition's own rule colour. 1.24:1 on paper — a divider is decoration, not an object a user has to perceive, and the edition uses it at exactly this weight. */ --bl-line: #E9DFE6; /* Magenta-deep as the ACTION: every button on the site — the news Call to Action, the hosted-form submit, the Promoted Page button in the header and the hero, the Contact Card's phone. "Magenta stays the primary action so buttons read the same everywhere." The edition's MID magenta (#DA2F84, still --bl-accent above) was the fill until plan-07 phase-5: paper on it is 4.25:1, under the 4.5:1 line for the button's 16px/600 label — recorded in phase 3 as "just under", and the design assessment's Quality Floor (A1) is what moved it. Measured on magenta-deep: paper 6.59:1, and on the band the fill lifts at 5.74:1; ink on it would be 3.90:1, so paper stays the button's ink. Every button reads as ONE deeper magenta rather than four buttons in two magentas; the accent (the focus ring, the badge tint's parent, the Featured row's edge) keeps the mid magenta, so the three-colour thesis stands. The hover is master's derivation from this value (85% action, 15% ink) and needs no second token. */ --bl-action: #A8215F; --bl-action-ink: #FCF9FB; /* Headlines are INK. "Keep text ink or paper — colour lives in shapes, not words." 16.6:1 on paper, 15.9:1 on the band. The colour a page carries comes from the header, the hero, the band and the buttons; the words stay ink. (Link TITLES are not headlines and keep --bl-brand-strong in master, which is right here too: a business name in a row is a thing you click.) */ --bl-heading: #1F1820; /* The header's ground and its nav text. Amber, ink on it at 9.82:1 — the edition's page 06 mock puts the logo on an amber bar and this is that bar. The boxed objects stay paper, which is why master had to split this role out of --bl-surface. */ --bl-chrome: #F9B740; --bl-chrome-ink: #1F1820; /* The strapline's colour on the Browse Hero's purple ground. Amber on purple-deep is 7.38:1 — the edition's cover and its purple panel both set "businesses going places" in amber on purple, and this is the same pairing. */ --bl-hero-accent: #F9B740; /* The edition's radius scale: 8px on controls, 12px on cards (tiles, the Contact Card, images). Master held one radius until this edition asked for two. */ --bl-radius: 8px; --bl-radius-card: 12px; /* Source Sans Pro for the body at 400, the weight the brand package intends it at ("the Source Sans Pro fonts should only be used in the body text of any design"). Figtree for the headlines and the strapline at 800, sentence case — see the FONTS paragraph in the header comment for why this is not phase 1's 900 uppercase. Named explicitly rather than inherited because the heavy headline is a brand decision, not master's default (master's is Figtree 700); no transform, so the copy's own casing stands, which is what keeps the strapline lowercase. */ --bl-font-body: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --bl-body-weight: 400; --bl-font-heading: 'FigtreeVariable', system-ui, -apple-system, 'Segoe UI', sans-serif; --bl-heading-weight: 800; --bl-heading-transform: none; /* The edition's mark is about 1.7:1, where the lockup it replaces was wide, so master's 2.5rem cap showed it far narrower than the edition's 120px screen minimum. 3rem is the height that gives it back its presence on the amber bar — a value, not a forked header. */ --bl-logo-height: 3rem; /* THE BRAND GRADIENT, over the Browse Hero's purple ground. Recreated from the brand package's own gradient artwork (Brand Guidelines/gradient_1.pdf, and the cover that uses it): a RADIAL sweep whose bright core sits just off the TOP-RIGHT corner and deepens diagonally to the bottom left. The artwork's own numbers are a type-3 shading centred at (604, 850) with radius 1068.75 on a 595x842 page — the core a hair outside the corner, the radius a little over the page diagonal — with three stops at 0, 0.5 and 1. `circle farthest-corner at 100% 0%` is that geometry at any size, which a fixed radius would not be. The artwork's colours are the OLD palette (full magenta running to a blue violet), superseded by the Amber Equal edition, so the shape is what is reproduced here and the tones are this edition's: magenta #DA2F84 into the mid purple #6E2882 into purple-deep #4C1A5C. The last stop IS --bl-brand-strong, which is deliberate: it is the hero's ground colour underneath, and the colour of the hero's speech-bubble tail. So the bottom left of the band — the corner the tail drops out of — is exactly the colour it was before this gradient existed, and the tail still matches. The gradient ADDS light at the top right rather than restating the whole band. The hero's copy is left-aligned and the top right is the empty half, so paper text never crosses the magenta core. Master ships `none` and no brand (ADR 0008); this is a VALUE, so the theme still forks no template and carries no selector. */ --bl-hero-gradient: radial-gradient(circle farthest-corner at 100% 0%, #DA2F84 0%, #6E2882 50%, #4C1A5C 100%); /* THE SIGNATURE (plan-07 phase-5). The mark is two overlapping speech bubbles — purple behind, magenta in front, each with its tail — and the site has exactly two objects that speak: the Browse Hero (the Directory's own words) and the Contact Card (the business's facts). Master gives both a tail sized by this token and ships it at 0px; this value is the mark restated at page scale by the page's own structure — nothing animates, nothing is added to the copy. 1.375rem is sized to read as STRUCTURE rather than ornament; it is this theme's to tune, and any change belongs in this comment with its reason. */ --bl-tail: 1.375rem; }