/* * Ballyhass design tokens * * Phase 1 deliverable from the Master Handover (section 14.1, "design tokens * and component library"). See docs/master-brief/. * * Purpose: give the component system one place to read brand values from, so a * component never hard-codes a hex. Values are taken from the client brand * document (docs/brand-guidelines.md) and from what the theme measurably * already uses, not invented. * * This file defines variables and styles nothing. Adding it changes no pixel. * It is the foundation the components are built on, not a restyle. * * Handover section 13 asks for evolution rather than abandonment, so the * palette here is the existing one. What is new is that the accessible * pairings are encoded as tokens instead of left to each author to remember. */ :root { /* --------------------------------------------------------------------- * Brand palette. Client brand document, in its own order of precedence. * ------------------------------------------------------------------ */ --bh-blue: #00B6D9; /* Primary, Ballyhass Blue */ --bh-white: #FFFFFF; /* Secondary */ --bh-navy: #21272F; /* Tertiary, Ballyhass Navy Blue */ --bh-yellow: #E4FF1A; /* Quaternary, Activities Yellow */ --bh-pink: #FF4F8E; /* Quinary, Ballyhass Pink */ /* --------------------------------------------------------------------- * Text-safe blue. * * Ballyhass Blue on white is 2.42:1 and fails WCAG 2.2 AA. It is a fill * colour, not a text colour. Use this for blue text and links on white * (5.01:1). The brand guide's accessibility override names this value. * ------------------------------------------------------------------ */ --bh-blue-text: #0B7A8E; /* The same blue, deeper, for small blue text on a tinted surface, where * --bh-blue-text drops under 4.5:1 (4.44:1 on Padel's sand #F3F1EC). * 5.09:1 there, 5.74:1 on white. axe-core, 31 October 2026. */ --bh-blue-text-deep: #097083; /* Neutrals for component surfaces, all navy-biased so they sit with the * brand. --bh-muted is secondary text on white (6.4:1). */ --bh-muted: #56606B; --bh-surface-2: #F1F4F7; --bh-line: #D7DDE3; /* The edge of a field you type in or choose from (text, date, number, * select, textarea). WCAG 1.4.11 asks 3:1 for what identifies it: this is * 4.06:1 on white and 3.68:1 on --bh-surface-2. --bh-line (1.37:1) stays * for dividers and card edges, never a field's only edge. */ --bh-field-edge: #767F89; /* --------------------------------------------------------------------- * Foreground for each brand surface. * * Always set colour and background together, as a pair: * background: var(--bh-pink); color: var(--bh-on-pink); * * Navy is the brand's text colour and clears AA on every brand surface, * so it is the answer everywhere except on navy itself. Measured: * ------------------------------------------------------------------ */ --bh-on-blue: var(--bh-navy); /* 6.23:1 */ --bh-on-yellow: var(--bh-navy); /* 13.34:1 */ --bh-on-pink: var(--bh-navy); /* 4.84:1 */ --bh-on-white: var(--bh-navy); /* 15.04:1 */ --bh-on-navy: var(--bh-white); /* 15.04:1 */ /* Two things these tokens exist to stop: * white on Blue 2.42:1 and white on Pink 3.11:1 * Both appear in the brand document's own examples and both fail AA. * * And one that is not a pairing but a rule: Activities Yellow on white is * 1.13:1. Yellow is a background and an accent. It is never text on white. * * --bh-on-pink at 4.84:1 clears AA and does not clear AAA (7:1). If a pink * surface ever carries long-form reading copy rather than a button label, * revisit it rather than assuming this token covers it. */ /* --------------------------------------------------------------------- * Customer support green: the help hub on the main FAQ page and the * customer information band on the Terms pages (inc/help-hub.php). * * Not a brand guide colour. It is the dark green of the help page * Ballyhass designed for the old site (page 456, /faqs2/), which Eoghan * asked to bring back on 30 October 2026 (Teamwork 11931155). Its values * are that page's. Measured: * white on green-deep 13.75:1 white on green 9.60:1 * yellow on green-deep 12.19:1 yellow on green 8.51:1 * green on green-mint 8.79:1 navy on green-mint 13.78:1 * Ballyhass Blue on green is 3.97:1: a focus ring or a fill, never text. * ------------------------------------------------------------------ */ --bh-green-deep: #0F332A; --bh-green: #124E3F; --bh-green-mint: #EEF7F3; --bh-on-green: var(--bh-white); /* --------------------------------------------------------------------- * Bunkhouse Village purple: the Bunkhouse Village hub (bunkhouse-hub.css), * and the rule and attribution of a quote placed on a Bunkhouse page, * .bh-trust-quotes--bunkhouse in components.css (4 November 2026). * * Not a Ballyhass brand guide colour. It is Bunkhouse Village's own * purple, which Eoghan asked the hub to carry (Teamwork 11931846 and * 11931965 point 11). The value is the one bunkhousevillage.ie itself * uses for its section backgrounds, its buttons and its footer (its * Elementor stylesheets post-10.css, post-26.css and post-29.css, read * 3 November 2026). The purple of the Bunkhouse Village logo in the media * library (2026/08/V01_Bunkhouse_logo1.png) samples #894C90, the same * colour within a few units. Deep and tint are the same purple mixed * 40% with black and 90% with white. Measured: * white on purple 6.32:1 yellow on purple 5.61:1 * purple on white 6.32:1 purple on tint 5.46:1 * white on purple-deep 11.51:1 yellow on purple-deep 10.20:1 * navy on tint 12.99:1 * So white and yellow are the text on purple, and purple itself may be * text on white and on the tint. Navy on purple is 2.38:1, and Ballyhass * Blue and Pink on purple are 2.62:1 and 2.04:1: never text, never a * focus ring on purple. The site's focus ring holds on purple through * its white halo (6.32:1). * ------------------------------------------------------------------ */ --bh-bunkhouse-purple: #8D4489; --bh-bunkhouse-purple-deep: #552952; --bh-bunkhouse-purple-tint: #F4ECF3; --bh-on-bunkhouse-purple: var(--bh-white); /* --------------------------------------------------------------------- * Type. Poppins for all UI; Kontora is a logo face and is never loaded. * The scale is the set of sizes the theme actually uses today, named. * ------------------------------------------------------------------ */ --bh-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bh-text-2xs: 0.75rem; /* 12px */ --bh-text-xs: 0.875rem; /* 14px, the most-used size in the theme */ --bh-text-sm: 1rem; /* 16px, body */ --bh-text-md: 1.125rem; /* 18px */ --bh-text-lg: 1.375rem; /* 22px */ --bh-text-xl: 1.625rem; /* 26px */ --bh-text-2xl: 2.5rem; /* 40px */ --bh-text-3xl: 3.75rem; /* 60px, display */ /* Handover 13 wants oversized, confident, editorial headings. 2xl and 3xl * are where that lives; they are deliberately far from the body sizes * rather than a smooth ramp. */ --bh-weight-regular: 400; --bh-weight-medium: 500; /* body copy, per the brand guide */ --bh-weight-semibold: 600; --bh-weight-bold: 700; /* buttons and subtitles, per the guide */ --bh-weight-black: 900; /* display */ --bh-leading-tight: 1.1; --bh-leading-body: 1.5; /* --------------------------------------------------------------------- * Shape. The guide calls buttons "rounded square", and highlighted text * blocks explicitly square. * ------------------------------------------------------------------ */ --bh-radius-none: 0; /* highlighted text blocks, per the guide */ --bh-radius-sm: 4px; --bh-radius-md: 8px; --bh-radius-pill: 50px; --bh-radius-full: 50%; /* Navy at low alpha rather than black, so shadows sit in the brand's * neutral rather than greying it. */ --bh-shadow-sm: 0 1px 3px rgba(33, 39, 47, 0.12); --bh-shadow-md: 0 4px 12px rgba(33, 39, 47, 0.16); /* --------------------------------------------------------------------- * Spacing, on a 4px base. * ------------------------------------------------------------------ */ --bh-space-1: 0.25rem; /* 4px */ --bh-space-2: 0.5rem; /* 8px */ --bh-space-3: 0.75rem; /* 12px */ --bh-space-4: 1rem; /* 16px */ --bh-space-5: 1.25rem; /* 20px */ --bh-space-6: 1.5rem; /* 24px */ --bh-space-8: 2rem; /* 32px */ --bh-space-12: 3rem; /* 48px */ --bh-space-16: 4rem; /* 64px */ /* --------------------------------------------------------------------- * Focus (WCAG 2.2 1.4.11, 2.4.7, 2.4.13; 31 October 2026). * * One indicator for every control, keyboard only: a navy ring 3px wide, * 2px out from the control, with white on both sides of it (a 2px white * gap inside, a 2px white edge outside). Navy and white are 15.04:1 * apart, so one of them is 3:1 or more against anything a control sits * on: white, Ballyhass Blue (navy 6.23:1), navy (white 15.04:1), yellow, * pink or a photograph (WCAG technique C40). The ring alone is a 3px * perimeter, more than the 2px 2.4.13 asks for. * * It replaces Ballyhass Blue, which was 2.42:1 on white and so failed * 1.4.11 on most of the site, and the yellow and white rings components * swapped in on dark sections. refinements.css section 6 applies it. * ------------------------------------------------------------------ */ --bh-focus-width: 3px; --bh-focus-offset: 2px; --bh-focus-color: var(--bh-navy); --bh-focus-halo: var(--bh-white); /* The white either side of the ring: a box-shadow 7px out (offset 2px + * ring 3px + edge 2px), which the outline is drawn over. */ --bh-focus-shadow: 0 0 0 calc(var(--bh-focus-offset) + var(--bh-focus-width) + 2px) var(--bh-focus-halo); /* --------------------------------------------------------------------- * Minimum touch target. WCAG 2.2 AA 2.5.8 is 24x24 CSS px; 44px is the * comfortable target the handover's mobile-first principle argues for. * ------------------------------------------------------------------ */ --bh-target-min: 24px; --bh-target-comfortable: 44px; } /* * Not tokens, and deliberately not promoted to tokens: the theme still carries * Bootstrap 4 defaults that are not Ballyhass colours and should be migrated * out rather than named. * * #212529 Bootstrap body text (40 occurrences) * #6c757d Bootstrap secondary (20) * #007bff Bootstrap primary (11) * #15429B "royal-blue", a theme-map leftover, used for links (11) * * Counted in the compiled stylesheet on 2026-10-03. Giving them token names * would make them look sanctioned. They are not part of the brand. */