/* ============================================================================= MINET BRAND TOKENS — the single definition of every brand value. Guide: docs/brand/MINET-BRAND-GUIDE.md Consumed by: buyonline/, admin/, api/ (error + doc templates). No hex literal may appear anywhere else in any of the three apps. Changing a brand colour, font or radius means editing THIS file only. ========================================================================== */ /* ---- Fonts --------------------------------------------------------------- Corbel: supplied by Minet (assets/webfonts). Office/document default — policy PDFs, certificates, letters, email templates. Titillium Web: OFL stand-in for the brand's Titillium. Self-hosted; never hotlinked from Google Fonts (KYC/payment pages take no 3rd-party requests). Prelo Slab: licensed display face, NOT supplied. Drop the woff2 files into brand/fonts/, uncomment the @font-face below, and every headline in all three apps picks it up — no other change needed. -------------------------------------------------------------------------- */ @font-face { font-family: 'Corbel'; src: url('fonts/Corbel.woff2') format('woff2'), url('fonts/Corbel.woff') format('woff'), url('fonts/Corbel.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Titillium Web — the OFL stand-in for the brand's Titillium (guide §3.2). NOT VENDORED YET: the rules below are commented out so the page does not fire 404s for files that are not there; the stack falls back to Corbel meanwhile. To activate: put TitilliumWeb-{Regular,SemiBold,Bold}.woff2 in brand/fonts/, uncomment, and run brand/sync.sh. Self-host only — no Google Fonts link on a page that carries KYC or payment data. */ /* @font-face { font-family: 'Titillium Web'; src: url('fonts/TitilliumWeb-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Titillium Web'; src: url('fonts/TitilliumWeb-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Titillium Web'; src: url('fonts/TitilliumWeb-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Prelo Slab'; src: url('fonts/PreloSlab-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } */ :root { /* ---- Colour: brand --------------------------------------------------- ONE red everywhere: #DA291C — the brand book's digital value for Pantone 485, and what Minet's letterhead artwork uses. Confirmed for the site too on 12 Sep 2026. It also removes an accessibility problem the site used to work around. Contrast is symmetric, so the old #ED1C24 measured 4.38:1 against white and failed WCAG AA in both directions; #DA291C measures 4.87:1 and passes at any size. The site previously needed a second token for that reason. --minet-red-action survives as a NAME, not a different colour: at the point of use it says "white text sits on this fill". -------------------------------------------------------------------- */ --minet-red: #DA291C; --minet-red-action: #DA291C; --minet-red-hover: #B8231A; /* hover/active of a red fill (6.38:1) */ --minet-red-pantone: #DA291C; /* the same value, named for print-bound artwork */ /* The same colour as three numbers, COMMA-SEPARATED, for a third-party stylesheet whose own variable expects a triple — the cookie-consent vendor CSS feeds it to a legacy rgba(). CSS cannot take a hex apart, so the alternative is someone writing the components out by hand somewhere else, which is how a brand colour drifts. NOT FOR COMPOSITING. This comment used to offer `rgb(var(--minet-red-action-rgb) / 40%)` as the example, and that is invalid CSS: Color 4 takes commas or a slash, never both, so any rule written from it is dropped silently. One shipped — the compare screen's "See details" pill rendered with no fill at all. To composite, use `color-mix(in srgb, var(--minet-red-action) 8%, var(--minet-white))`. Keep it in step with --minet-red-action above. */ --minet-red-action-rgb: 218, 41, 28; --minet-black: #000000; /* Pantone Black */ --minet-ink: #1B1B1B; --minet-text: #202020; /* Ink and text as triples, for the same reason and with the same warning as --minet-red-action-rgb above: the admin console's Reback theme (Bootstrap 5.3) builds its link and body colours as rgba(var(--…-rgb), a). Keep each in step with its colour. */ --minet-ink-rgb: 27, 27, 27; --minet-text-rgb: 32, 32, 32; --minet-grey: #9A9A9B; /* Pantone Cool Gray 7C */ --minet-muted: #666666; --minet-line: #E5E5E5; /* A visible hairline where --minet-line would disappear: the ring of an unchecked radio, today's date in a calendar. Added because four rules already reached for it through a fallback, which is a token that does not exist pretending to be one. */ --minet-line-strong: #B4B4B4; /* The edge of something you TYPE or TAP an answer into: a field, a select, an unchosen option. It is the only grey here that clears the 3:1 WCAG 1.4.11 asks of a control's boundary — 3.45:1 on white, 3.09:1 on --minet-surface — where --minet-line-strong is 2.07:1 and the surface fill fields used to rely on is 1.12:1. Not for dividers or cards: those stay on --minet-line, so a box with this edge always means "answer here". */ --minet-control-border: #8A8A8A; --minet-surface: #F2F2F3; --minet-white: #FFFFFF; /* ---- Colour: semantic (not in the brand book; chosen to sit beside the red) */ --minet-success: #000000; --minet-warning: #B26A00; /* The same amber, darkened until WHITE clears AA on it (4.99:1 against 4.24:1). --minet-warning is a border and an ink colour; this is the one to fill with when something white sits on top. The same split as --minet-red / --minet-red-action, and for the same reason: a warning nobody can read is not a warning. */ --minet-warning-fill: #A26000; --minet-danger: #B3121B; /* darker than the brand red on purpose: an error must never read as branding */ /* The same triple, for the admin console's Reback theme: Bootstrap builds its danger rings and tints as rgba(var(--…-rgb), a). Keep it in step. */ --minet-danger-rgb: 179, 18, 27; --minet-info: #1F5C99; /* Quiet fills for a status badge — worked out once here rather than eyeballed again in every app that needs a green pill. --warning, --danger and --info are each their semantic colour at about 12% over white. --success-tint is NOT: it is still the 12% of the green that --minet-success used to be, kept deliberately so a "paid" badge stays recognisably positive now that its ink is black. The pair no longer share a hue, and that is the intent, not an oversight. */ --minet-success-tint: #E4F1EA; --minet-warning-tint: #FBEFDE; --minet-danger-tint: #FBE6E7; --minet-info-tint: #E5EDF5; /* ---- Type ----------------------------------------------------------- */ --font-display: "Prelo Slab", "Titillium Web", Corbel, "Segoe UI", Arial, sans-serif; --font-body: "Titillium Web", Corbel, "Segoe UI", Arial, sans-serif; --font-doc: Corbel, "Segoe UI", Arial, sans-serif; --fs-eyebrow: 0.875rem; /* 14px, 700, uppercase, .08em tracking */ --fs-h1: 2.75rem; /* 44px */ --fs-h2: 2rem; /* 32px */ --fs-h3: 1.5rem; /* 24px */ --fs-card-title: 1.25rem; /* 20px */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ --fs-legal: 0.75rem; /* 12px */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.6; --tracking-eyebrow: 0.08em; /* ---- Layout --------------------------------------------------------- */ --content-width: 1280px; /* brand book B.3.1 standard web width */ --gutter: 1.5rem; --utility-bar-height: 50px; --header-height: 72px; /* ---- Shape ---------------------------------------------------------- The brand is square-edged; only the logo's holding shape is rounded. */ --radius: 2px; --radius-pill: 999px; /* badges only */ --border: 1px solid var(--minet-line); --focus-ring: 2px solid var(--minet-red); --focus-offset: 2px; /* ---- Spacing (4px base) --------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; /* ---- Controls -------------------------------------------------------- */ --control-height: 56px; /* hero filter inputs in the supplied mockup */ /* Form fields, which are read and filled rather than glanced at. The mockup's 56px is a landing-page height: on a column of eight of them it reads as padding rather than as a control, and pushes the button that matters below the fold. Still well over the 44px touch minimum. */ --control-height-form: 48px; --button-height: 44px; /* == minimum accessible touch target */ --tap-target-min: 44px; /* ---- Logo ------------------------------------------------------------ The site uses the letterhead mark (brand/logo/minet-mark.png), trimmed to its artwork, so a height here is the height of the mark itself. The endorsement is a separate asset and appears only where the design has it — the footer, not the header. 5mm print minimum ⇒ 24px absolute floor. Clear space = the height of the monogram box, on all four sides. */ --logo-height: 40px; --logo-height-footer: 44px; --aon-height-footer: 22px; --logo-height-min: 24px; --logo-clear-space: 1em; /* ---- Texture --------------------------------------------------------- The tribal band (brand/texture/minet-tribal.png) that sits on top of the footer, edge to edge, as the designer's pages have it — a divider, which is what the brand guide allows a country texture to be, and never behind copy or a form field. 20px, set 14 Oct 2026 to sit quieter than the design's 44px. The artwork is drawn at 50px, so this is a scale DOWN, never up: the band stays crisp, and repeats more often across the page. -------------------------------------------------------------------- */ --texture-band-height: 20px; } /* Brand red fails AA for small text on white (4.38:1). Anything relying on a brand colour to carry meaning must also carry a label or icon — never colour alone. See MINET-BRAND-GUIDE.md §7. */ *:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }