/* ========================================================================== Ballyhass checkout -------------------------------------------------------------------------- Tokens follow the client brand document — see docs/brand-guidelines.md. Names match the guide's own names so the two can be diffed by eye. Two deliberate departures from the guide, both for WCAG 2.2 AA on a transactional page (measured ratios are in the brand doc): · Never white-on-blue (2.42:1) or white-on-pink (3.11:1), which the guide's own examples use — navy text is used on both instead. · --bh-blue-text is a darkened blue for text/links on white, because full-strength Ballyhass Blue on white is 2.42:1. ========================================================================== */ /* Poppins, served from this site (phone speed, 31 October 2026, FSD REQ-NF001). It came from Google Fonts: a render-blocking stylesheet on one more origin, then the files from a second, so a phone opened two extra connections before any text could be drawn in the brand face. The files are Google's own woff2 subsets, latin and latin-ext, under the SIL Open Font License (fonts/poppins/OFL.txt). A browser fetches only the weights and subsets a page uses; the layouts preload the two the first screen needs (500 for body text, 900 for the heading). swap keeps text visible while a file arrives. */ @font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins/poppins-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins/poppins-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/poppins/poppins-900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/poppins/poppins-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The hidden attribute means hidden, whatever the element's own display. The browser's [hidden] rule loses to any author display (.bh-grid-2 is a grid, an inline display:flex), which is how "Myself" on the waiver form still showed the authority line and asked for the signer's name a second time (Eoghan, comment 11929142). */ [hidden] { display: none !important; } :root { /* ── Brand palette (Ballyhass Adventure Group, p9) ────────────────────── */ --bh-blue: #00B6D9; /* 01 Primary — Ballyhass Blue */ --bh-white: #FFFFFF; /* 02 Secondary — White */ --bh-ink: #21272F; /* 03 Tertiary — Ballyhass Navy Blue */ --bh-yellow: #E4FF1A; /* 04 Quaternary — Activities Yellow */ --bh-pink: #FF4F8E; /* 05 Quinary — Ballyhass Pink */ /* Derived. Not brand colours — tints and accessible substitutes. */ --bh-blue-text: #0B7A8E; /* 5.01:1 on white, for blue text and links */ --bh-blue-banner:#05BDD9; /* the banner image's own painted blue, measured from its pixels, so the fill behind the header's text meets the picture with no seam. Navy text on it is 6.65:1. */ --bh-blue-dark: #009BB8; /* hover fill only, never behind white text */ --bh-pink-dark: #F03A7B; --bh-yellow-dark:#C8E000; --bh-ink-70: #5C6570; --bh-ink-45: #8A9099; /* lines and borders, and a disabled button: 3.21:1, never text */ /* Focus (WCAG 2.2 1.4.11, 2.4.7, 2.4.13; 31 October 2026): a navy ring 3px wide, 2px out, with white either side of it. Navy and white are 15.04:1 apart, so one of them is 3:1 or more against anything a control sits on (technique C40): white, Ballyhass Blue (navy 6.23:1), the navy header (white 15.04:1), yellow or a photograph. The website uses the same ring (its tokens.css, "Focus"). */ --bh-focus-ring: var(--bh-ink); --bh-focus-halo: #FFFFFF; --bh-focus-width: 3px; --bh-focus-offset: 2px; --bh-focus-shadow: 0 0 0 calc(var(--bh-focus-offset) + var(--bh-focus-width) + 2px) var(--bh-focus-halo); --bh-field: #EDEDED; /* The edge of a field (WCAG 1.4.11, 3:1 for what identifies it; accessibility assessment, 3 November 2026). The grey fill alone was 1.17:1 on white. This is 4.06:1 on white and 3.47:1 on the fill itself, the same edge as the website's (its tokens.css). */ --bh-field-edge: #767F89; --bh-field-hi: #E3E3E3; --bh-line: #DFE2E5; --bh-panel: #FFFFFF; --bh-wash: #F6F7F8; --bh-danger: #C62828; --bh-success: #1B7F4B; /* "Buttons are designed with a rounded square shape, whereas highlighted texts feature a straight square shape." (p11) */ --bh-r-field: 4px; --bh-r-btn: 8px; --bh-r-card: 8px; --bh-r-highlight: 0px; --bh-shadow: 0 1px 2px rgba(33, 39, 47, .06), 0 8px 24px rgba(33, 39, 47, .07); --bh-shadow-sm: 0 1px 2px rgba(33, 39, 47, .08); --bh-gutter: clamp(16px, 4vw, 40px); --bh-max: 1200px; } /* --------------------------------------------------------------- reset ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; /* "Use a medium weight for body text" (p11). */ font-weight: 500; line-height: 1.55; color: var(--bh-ink); background: var(--bh-panel); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; } a { color: var(--bh-blue-text); } /* One focus indicator for every control, keyboard only (the tokens above). It was Ballyhass Blue, 2.42:1 on white, which fails WCAG 1.4.11, with white in the header and hero and other colours on single components. Written once, here, with !important so a component's own box-shadow cannot take the white away. A control drawn as a card around a hidden input (a time slot, a choice) shows it on the card instead. A field you type in takes it however it was focused, as browsers do: Chrome does not count a date field reached by Tab on a phone as :focus-visible, nor even :focus (its inner field has it), hence :focus-within. */ :focus-visible, :is(input, textarea):focus-within:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=file], [type=color], [type=image]), .bh-slot input:focus-visible + .bh-slot__body { outline: var(--bh-focus-width) solid var(--bh-focus-ring) !important; outline-offset: var(--bh-focus-offset) !important; box-shadow: var(--bh-focus-shadow) !important; } .bh-slot input:focus-visible { outline: none !important; box-shadow: none !important; } @supports selector(:has(*)) { .bh-choice:has(:focus-visible), .bh-yg-choice:has(:focus-visible) { outline: var(--bh-focus-width) solid var(--bh-focus-ring) !important; outline-offset: var(--bh-focus-offset) !important; box-shadow: var(--bh-focus-shadow) !important; } .bh-choice :focus-visible, .bh-yg-choice :focus-visible { outline: none !important; box-shadow: none !important; } } .bh-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bh-skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--bh-ink); color: #fff; padding: 12px 20px; border-radius: var(--bh-r-field); font-weight: 600; text-decoration: none; transition: top .15s ease; } .bh-skip:focus { top: 8px; } /* -------------------------------------------------------------- header ---- */ .bh-header { background: var(--bh-ink); color: #fff; } .bh-header__in { max-width: var(--bh-max); margin: 0 auto; padding: 14px var(--bh-gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bh-header__logo img { height: 38px; width: auto; } .bh-header__right { display: flex; align-items: center; gap: 12px; font-size: 14px; } .bh-header__hi { color: rgba(255,255,255,.8); } .bh-header__link { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 9px 16px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px; background: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .bh-header__link:hover { background: rgba(255,255,255,.12); border-color: #fff; } /* ---------------------------------------------------------------- hero ---- */ /* The header: the heading and its description on painted blue, with the brush strokes under them. Eoghan, 3 November 2026 (comment 11932022, point 1): on My family the description ran into the turquoise-to-yellow paint stroke and was hard to read. The banner is 1920x450 and reads top to bottom as blue to 47%, a torn blue-to-yellow edge to 57%, Activities Yellow to 90% and a torn white foot. It was drawn to the size of the header itself (cover here, 100% 100% on the account's slim header), so the torn edge always sat about halfway down the header, wherever the text happened to be: on every account page, the checkout, the waiver pages and the sign-in pages, at every width, and more so when the text wrapped at 200% zoom or under the visitor's own text spacing. Now the strokes have a height of their own (--bh-hero-paint), drawn at the foot of the header, and the header keeps that height plus a gap free below its text (padding-bottom). The picture's blue half sits above the strokes and the header's own fill, the same painted blue, behind the rest, so the text is always on flat blue, however many lines it takes. Nothing fixes the header's height: it grows with its text, and the strokes move down with it. HeaderPaintStrokesTest keeps it that way. */ .bh-hero { --bh-hero-paint: clamp(26px, 5.5vw, 84px); --bh-hero-paint-gap: clamp(14px, 2vw, 24px); position: relative; /* The bottom 54% of the picture is the strokes, so it is drawn at the strokes' height / 0.54 (a few pixels of its blue fall inside --bh-hero-paint, never a stroke above it). */ background: var(--bh-blue-banner) url('/img/banner--checkout.jpg') center bottom / 100% calc(var(--bh-hero-paint) / 0.54) no-repeat; /* The banner is flat painted colour, so the WebP is 14 KB against the JPEG's 165 KB and looks the same. It is the largest thing on most pages' first screen, which makes it what a phone's load time is measured to, so the layouts preload this exact file (phone speed, 31 October 2026). A browser that cannot read image-set() keeps the JPEG from the line above. */ background-image: image-set(url('/img/banner--checkout.webp') type('image/webp'), url('/img/banner--checkout.jpg') type('image/jpeg')); padding: clamp(24px, 5vw, 44px) 0 calc(var(--bh-hero-paint) + var(--bh-hero-paint-gap)); } .bh-hero__in { max-width: var(--bh-max); margin: 0 auto; padding: 0 var(--bh-gutter); } .bh-hero__title { font-size: clamp(38px, 7vw, 62px); font-weight: 900; letter-spacing: -.02em; margin-top: 14px; } .bh-hero__sub { margin: 6px 0 0; font-weight: 500; max-width: 46ch; color: var(--bh-ink); } /* ------------------------------------------------------------- pathway ---- */ .bh-pathway { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; font-size: 15px; } /* A step still to come was navy at 45% (2.23:1 on the header's blue) and its number navy at 60% in a pale circle (2.66:1), below the 4.5:1 its words need (WCAG 1.4.3; found retesting the header, 4 November 2026, finding B7). Every step's words are full navy now (6.65:1), and the state is in the circle's shape rather than a faded colour: an outline still to come, a tick in a filled circle when done, and the current step filled and bold. */ .bh-pathway__item { display: flex; align-items: center; gap: 9px; color: var(--bh-ink); font-weight: 500; } .bh-pathway__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 2px var(--bh-ink); color: var(--bh-ink); font-size: 14px; font-weight: 700; line-height: 1; } .bh-pathway__rule { width: clamp(14px, 3vw, 40px); height: 2px; background: rgba(33, 39, 47, .2); margin: 0 6px; } .bh-pathway__item--done { color: var(--bh-ink); } .bh-pathway__item--done .bh-pathway__num { background: rgba(33, 39, 47, .8); color: #fff; } .bh-pathway__item--now { color: var(--bh-ink); font-weight: 700; } .bh-pathway__item--now .bh-pathway__num { background: var(--bh-ink); color: #fff; } /* Steps already completed are links back; keep them looking like steps. */ a.bh-pathway__item { text-decoration: none; } a.bh-pathway__item:hover { text-decoration: underline; } /* On a phone only the current step shows its name. The others are hidden from sight only: with display: none a completed step's link back had no name at all (axe link-name, 390px, 31 October 2026). */ @media (max-width: 640px) { .bh-pathway__item:not(.bh-pathway__item--now) > span:not(.bh-pathway__num) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .bh-pathway__rule { width: 14px; margin: 0 2px; } } /* --------------------------------------------------------------- shell ---- */ .bh-shell { max-width: var(--bh-max); margin: 0 auto; padding: clamp(24px, 4vw, 44px) var(--bh-gutter) 80px; display: grid; grid-template-columns: minmax(0, 1fr) 372px; align-items: start; gap: clamp(20px, 3vw, 40px); } .bh-shell--narrow { grid-template-columns: minmax(0, 1fr); max-width: 760px; } /* One column at the full page width. --narrow is right for a form, where a long measure hurts; it is wrong for a six-column table, which it squeezed into 760px until the activity name wrapped over four lines and the row's buttons were pushed out of sight. */ .bh-shell--single { grid-template-columns: minmax(0, 1fr); } @media (max-width: 960px) { .bh-shell { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------- panel ---- */ .bh-panel { background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-r-card); box-shadow: var(--bh-shadow-sm); padding: clamp(20px, 3vw, 30px); } .bh-panel + .bh-panel { margin-top: 20px; } .bh-panel__title { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .bh-panel__hint { color: var(--bh-ink-70); font-size: 14.5px; margin: 0 0 22px; } /* The guide's "subtitle": bold, all caps, in Ballyhass Blue. Uses the darkened blue token — full-strength blue on white is 2.42:1. */ .bh-step { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bh-blue-text); margin-bottom: 6px; } /* ----------------------------------------------------- panel weight ------- */ /* NOT EVERY CARD MATTERS EQUALLY. Eoghan, 26 September 2026: "Almost every section is: white card + border + heading with roughly equal visual weight. So when I first arrive, my eye has to work quite hard to understand: What matters right now?" Three weights, not a colour scheme: the next real-world action leads, anything with a deadline is flagged, and discovery and history recede. */ /* The next visit, and only that. A left edge in Ballyhass Blue plus a little more presence, without a second background colour competing with the status tones. */ .bh-panel--lead { border-left: 4px solid var(--bh-blue); box-shadow: 0 6px 20px rgba(33, 39, 47, .10); } /* Something with a deadline. Amber rather than red: a membership in its grace period is a prompt, not a failure. */ .bh-panel--act { border-left: 4px solid #B26A00; background: #FFFBF4; } /* Discovery and history. Present, scannable, and clearly behind the rest. */ .bh-panel--quiet { background: transparent; box-shadow: none; border-color: var(--bh-line); } .bh-panel--quiet .bh-panel__title { font-size: 17px; } /* ----------------------------------------------------- status pills ------- */ /* "I would use status colour / labels more deliberately. Not lots of colour everywhere, but enough to establish hierarchy." Every tone is checked against its own background for WCAG 2.2 AA, because the brand's own white-on-blue and white-on-pink examples fail it. */ .bh-status { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; white-space: nowrap; border: 1px solid transparent; } /* Active and nothing to do. Deliberately the quietest of the three: Eoghan asked that a healthy pass "be visually quieter than a membership in grace or something requiring payment", so hierarchy comes from the absence of urgency. */ .bh-status--ok { color: #17603A; background: #EAF6EF; border-color: #CBE6D7; } /* Grace, expiring soon, or a balance owing. The one that should catch the eye. #8A4B00 on #FFF4E5 is 6.3:1. */ .bh-status--warn { color: #8A4B00; background: #FFF4E5; border-color: #F2D9B3; } /* Ended. Attention without alarm: nothing is wrong, it is simply over. */ .bh-status--off { color: #4A4F57; background: #F1F2F4; border-color: #DDE0E4; } /* A date or figure that has to be read first: the grace deadline, the credit balance. Used inside a row's meta line, never as the whole line. */ .bh-emphasis { font-weight: 700; color: var(--bh-navy); } /* A membership row: name, status pill, then its own meta underneath. Keeps the memberships in ONE section rather than one card each, which is what he asked for: "the membership area could carry more of the hierarchy within one section rather than each membership feeling like another full card." */ .bh-list__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* --------------------------------------------------- group portal -------- */ /* Erica's group booking header, 24 September 2026. The group's own name first, because a leader arriving here wants to see their school before they see ours. Navy ground with yellow for the countdown, which is the brand's own highlight pairing and the one that passes AA. */ .bh-group-header { background: var(--bh-navy); color: #fff; border-radius: var(--bh-r-card); padding: clamp(20px, 3vw, 30px); margin-bottom: 16px; } .bh-group-header__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-yellow); margin-bottom: 6px; } .bh-group-header__name { font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin: 0 0 6px; } .bh-group-header__meta { color: rgba(255, 255, 255, .82); font-size: 14.5px; margin: 0 0 18px; } .bh-group-header__visit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--bh-yellow); border-radius: 6px; padding: 14px 18px; } .bh-group-header__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-top: 8px; } .bh-group-header__label:first-child { margin-top: 0; } .bh-group-header__countdown { text-align: right; } .bh-group-header__days { display: block; font-size: clamp(30px, 5vw, 44px); font-weight: 700; line-height: 1; color: var(--bh-yellow); } /* The five tabs. Real links, so each is an address a leader can send to a colleague. */ .bh-tabs--five { display: flex; flex-wrap: wrap; gap: 4px; } .bh-tabs--five .bh-tab { flex: 0 1 auto; } /* A figure and its label: the readiness counts, the age split, the booking finances. */ .bh-stat { background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-r-card); padding: 16px 18px; } .bh-stat__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bh-ink-70); margin-bottom: 4px; } .bh-stat__value { display: block; font-size: 24px; font-weight: 700; color: var(--bh-navy); } .bh-stat__note { display: block; font-size: 13px; color: var(--bh-ink-70); margin-top: 4px; } /* -------------------------------------------------------------- fields ---- */ .bh-field { margin-bottom: 20px; } .bh-field:last-child { margin-bottom: 0; } .bh-label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; } .bh-label__opt { color: var(--bh-ink-70); font-weight: 500; } .bh-input, .bh-select { width: 100%; height: 60px; padding: 0 20px; font: inherit; color: var(--bh-ink); background: var(--bh-field); border: 1px solid var(--bh-field-edge); border-radius: var(--bh-r-field); appearance: none; transition: background .15s ease, border-color .15s ease; } .bh-input::placeholder { color: var(--bh-ink-70); } .bh-input:hover:not(:disabled), .bh-select:hover:not(:disabled) { background: var(--bh-field-hi); } .bh-input:disabled, .bh-select:disabled { opacity: .55; cursor: not-allowed; } .bh-select { padding-right: 48px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2321272F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; } /* Icon-prefixed field (location pin, calendar) */ .bh-field--icon { position: relative; } .bh-field--icon .bh-input, .bh-field--icon .bh-select { padding-left: 48px; } .bh-field__icon { position: absolute; left: 18px; bottom: 20px; width: 20px; height: 20px; color: var(--bh-ink-70); pointer-events: none; } .bh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 620px) { .bh-grid-2 { grid-template-columns: 1fr; } } .bh-error { display: block; color: var(--bh-danger); font-size: 13.5px; font-weight: 500; margin-top: 7px; } /* --------------------------------------------------------------- slots ---- */ .bh-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; } .bh-slot { position: relative; } .bh-slot input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .bh-slot__body { display: block; padding: 14px 16px; background: var(--bh-field); border: 2px solid transparent; border-radius: var(--bh-r-field); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .bh-slot input:hover + .bh-slot__body { background: var(--bh-field-hi); } /* Selection is Ballyhass Blue with Navy copy (6.23:1). Keeping it off Navy stops the chosen slot reading as another primary button, and puts the brand's primary colour to work on the one thing the customer is choosing. */ .bh-slot input:checked + .bh-slot__body { background: var(--bh-blue); border-color: var(--bh-ink); color: var(--bh-ink); } .bh-slot input:disabled + .bh-slot__body { opacity: .5; cursor: not-allowed; background: var(--bh-field); } .bh-slot__time { display: block; font-weight: 700; font-size: 17px; } .bh-slot__meta { display: block; font-size: 12.5px; color: var(--bh-ink-70); margin-top: 2px; } /* Duration and arrival, deliberately quieter than the time above them. Eoghan, 24 September 2026: "The time itself should remain the strongest element. I would not overload every session with too much explanatory text." So this sits below .bh-slot__time at a smaller size, and the scarcity line below it only appears when there is genuinely something to say. */ .bh-slot__detail { display: block; font-size: 12.5px; color: var(--bh-ink-70); margin-top: 2px; } /* Scarcity reads as a warning rather than as more grey text, because it is the one line on the card that should change a customer's mind. */ .bh-slot__meta { font-weight: 600; } /* Navy at 75% on Ballyhass Blue was 3.95:1 at 12.5px ("Continue at standard prices" on step 3, axe, 31 October 2026). Navy itself is 6.23:1. */ .bh-slot input:checked + .bh-slot__body .bh-slot__meta { color: var(--bh-ink); } /* On the chosen slot the quieter line is Navy, as the time is: Navy-70 on Ballyhass Blue is 2.4:1 and fails AA, and for a stay this line is its drop-off and collection (31 October 2026). */ .bh-slot input:checked + .bh-slot__body .bh-slot__detail { color: var(--bh-ink); } /* A stay (a camp week) reads as its dates, nights, drop-off and collection, not a start time, so it takes the whole row rather than a time-sized tile. */ .bh-slot--stay { grid-column: 1 / -1; } /* ------------------------------------------------------------- stepper ---- */ .bh-tiers { display: grid; gap: 4px; } .bh-tier { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--bh-line); } .bh-tier:last-child { border-bottom: 0; } .bh-tier__name { font-weight: 600; } .bh-tier__price { display: block; font-size: 13px; font-weight: 500; color: var(--bh-ink-70); } .bh-stepper { display: flex; align-items: center; gap: 6px; } .bh-stepper__btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--bh-blue); background: #fff; color: var(--bh-blue-text); border-radius: 50%; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; } /* Navy on Blue (6.23:1), not white on Blue (2.42:1). */ .bh-stepper__btn:hover:not(:disabled) { background: var(--bh-blue); color: var(--bh-ink); } .bh-stepper__btn:disabled { opacity: .35; cursor: not-allowed; } .bh-stepper__val { min-width: 46px; text-align: center; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- buttons ---- */ /* "Subtitles and buttons should be in all capital letters and always in bold weight" and "buttons are designed with a rounded square shape" (p11). */ .bh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; text-decoration: none; border: 2px solid transparent; border-radius: var(--bh-r-btn); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease; } .bh-btn:active { transform: translateY(1px); } .bh-btn--block { display: flex; width: 100%; } /* Primary is Navy, as the guide's worked examples show. Activities Yellow is a highlight colour there, never a button fill. */ .bh-btn--primary { background: var(--bh-ink); border-color: var(--bh-ink); color: #fff; } .bh-btn--primary:hover:not(:disabled) { background: #000; border-color: #000; } /* Ballyhass Pink. Navy label, not white: white on pink is 3.11:1. */ .bh-btn--pink { background: var(--bh-pink); border-color: var(--bh-pink); color: var(--bh-ink); } .bh-btn--pink:hover:not(:disabled) { background: var(--bh-pink-dark); border-color: var(--bh-pink-dark); } /* Ballyhass Blue. Navy label, not white: white on blue is 2.42:1. */ .bh-btn--blue { background: var(--bh-blue); border-color: var(--bh-blue); color: var(--bh-ink); } .bh-btn--blue:hover:not(:disabled) { background: var(--bh-blue-dark); border-color: var(--bh-blue-dark); } .bh-btn--ghost { background: #fff; border-color: var(--bh-ink); color: var(--bh-ink); } .bh-btn--ghost:hover:not(:disabled) { background: var(--bh-ink); color: #fff; } .bh-btn--sm { min-height: 44px; padding: 0 18px; font-size: 13px; } .bh-btn--muted, .bh-btn:disabled, .bh-btn[aria-disabled="true"] { background: var(--bh-field); border-color: var(--bh-field); color: var(--bh-ink-45); cursor: not-allowed; transform: none; } .bh-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--bh-ink-70); text-decoration: none; margin-bottom: 14px; } .bh-back:hover { color: var(--bh-ink); } /* ------------------------------------------------------------- summary ---- */ .bh-summary { background: var(--bh-wash); border: 1px solid var(--bh-line); border-radius: var(--bh-r-card); padding: 24px; position: sticky; top: 20px; } .bh-summary__title { font-size: 22px; font-weight: 700; margin-bottom: 16px; } .bh-summary__card { background: #fff; border-radius: var(--bh-r-field); padding: 16px; box-shadow: var(--bh-shadow-sm); } .bh-summary__head { display: flex; gap: 14px; align-items: flex-start; } /* No per-category imagery is exposed by the API, so this is a branded mark rather than a grey void waiting for a photo that never arrives. */ .bh-summary__thumb { flex: 0 0 74px; width: 74px; height: 74px; border-radius: var(--bh-r-field); background: var(--bh-blue); color: #fff; display: grid; place-items: center; } .bh-summary__thumb svg { width: 34px; height: 34px; } .bh-summary__act { font-size: 19px; font-weight: 700; line-height: 1.2; } .bh-summary__venue { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bh-ink-70); } .bh-summary__rule { border: 0; border-top: 1px solid var(--bh-line); margin: 16px 0; } .bh-summary__lbl { font-size: 15px; font-weight: 700; margin-bottom: 3px; } .bh-summary__val { font-size: 14.5px; color: var(--bh-ink-70); margin: 0 0 14px; } .bh-summary__val:last-child { margin-bottom: 0; } .bh-summary__val--empty { color: var(--bh-ink-70); font-style: italic; } /* Aquapark: the length chosen, under the date and as strong as it (comment 11930380, point 7). */ .bh-summary__val + .bh-summary__duration { margin-top: -10px; } .bh-summary__duration strong { color: var(--bh-ink); font-weight: 700; } .bh-summary__line { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 5px 0; } .bh-summary__line--save { color: var(--bh-success); font-weight: 600; } .bh-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 800; padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--bh-ink); } /* The guide's "highlighted text": Activities Yellow block carrying Navy copy, with square corners — "highlighted texts feature a straight square shape", as opposed to the rounded square used for buttons (p11). */ .bh-upsell { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px; background: var(--bh-yellow); color: var(--bh-ink); border-radius: var(--bh-r-highlight); font-size: 14px; font-weight: 500; } .bh-upsell strong { font-weight: 800; } .bh-upsell a { color: var(--bh-ink); } .bh-upsell__badge { flex: 0 0 auto; background: var(--bh-ink); color: var(--bh-yellow); font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 5px 9px; border-radius: var(--bh-r-highlight); text-transform: uppercase; } /* Mobile: the summary is more useful pinned to the bottom than 2000px down. */ @media (max-width: 960px) { .bh-summary { position: static; } .bh-aside { order: 2; } } /* -------------------------------------------------------- states/alerts --- */ .bh-alert { border-radius: var(--bh-r-field); padding: 14px 18px; margin-bottom: 22px; font-size: 14.5px; font-weight: 500; border-left: 4px solid; } .bh-alert--error { background: #FDECEC; border-color: var(--bh-danger); color: #8E1F1F; } .bh-alert--info { background: #E6F8FB; border-color: var(--bh-blue); color: #0A5A68; } .bh-alert--success { background: #E8F5EE; border-color: var(--bh-success); color: #14603A; } /* Two views already asked for this variant and got the bare .bh-alert, so an expiring pass and an overdue deadline read exactly like a neutral note. Amber on #7A4300 is 7.4:1, well inside AA. */ .bh-alert--warning { background: #FFF6E5; border-color: #E0A106; color: #7A4300; } /* A booking conversation, not a chat feed. Ballyhass asked that this read as correspondence attached to a visit rather than as a messenger window. */ /* What the cart already holds, shown on step 1 where the summary is otherwise client-side and only reflects the selection in progress. */ .bh-held { margin-bottom: 18px; padding: 12px 14px; background: var(--bh-field); border-radius: var(--bh-r-field); } .bh-held__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bh-ink-70); } .bh-held__count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(33, 39, 47, .10); font-size: 11px; line-height: 18px; } .bh-held__item { margin-bottom: 8px; } .bh-held__act { display: block; font-size: 14px; font-weight: 600; color: var(--bh-ink); } .bh-held__meta { display: block; font-size: 12.5px; color: var(--bh-ink-70); } .bh-held__note { margin: 10px 0 0; font-size: 12px; color: var(--bh-ink-70); } /* Minus, the number, plus. Each is a plain submit carrying the quantity it would set, so the control needs no JavaScript and the cart that comes back is the real one rather than a form somebody forgot to submit. */ .bh-qty { display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; } .bh-qty__lbl { font-size: 12px; color: var(--bh-ink-70); margin-right: 2px; } .bh-qty__step { width: 30px; height: 30px; font: inherit; font-size: 16px; line-height: 1; color: var(--bh-ink); background: var(--bh-field); border: 1px solid var(--bh-line); border-radius: 4px; cursor: pointer; } .bh-qty__step:hover:not(:disabled) { background: var(--bh-field-hi); } .bh-qty__step:disabled { opacity: .4; cursor: default; } /* At a quantity of one the minus control is a link into the removal confirmation rather than a disabled button, so it needs the same box. */ a.bh-qty__step { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .bh-qty__now { min-width: 26px; text-align: center; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bh-ink); } .bh-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; } .bh-thread__item { padding: 12px 14px; border-radius: var(--bh-r-field); background: var(--bh-field); border-left: 3px solid var(--bh-line); } .bh-thread__item--mine { background: #E6F8FB; border-left-color: var(--bh-blue); } .bh-thread__who { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--bh-ink); } .bh-thread__topic, .bh-thread__when { font-weight: 500; color: var(--bh-ink-70); margin-left: 8px; } .bh-thread__body { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-line; } .bh-alert ul { margin: 0; padding-left: 18px; } .bh-empty { text-align: center; padding: 28px 20px; background: var(--bh-wash); border: 1px dashed var(--bh-line); border-radius: var(--bh-r-field); color: var(--bh-ink-70); font-size: 14.5px; } .bh-loading { display: flex; align-items: center; gap: 10px; color: var(--bh-ink-70); font-size: 14.5px; padding: 18px 0; } .bh-spinner { width: 20px; height: 20px; border: 2.5px solid var(--bh-field-hi); border-top-color: var(--bh-blue); border-radius: 50%; animation: bh-spin .7s linear infinite; } @keyframes bh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------- footer ---- */ .bh-footer { background: var(--bh-ink); color: rgba(255,255,255,.7); font-size: 13.5px; padding: 26px 0; margin-top: auto; } .bh-footer__in { max-width: var(--bh-max); margin: 0 auto; padding: 0 var(--bh-gutter); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; } .bh-footer a { color: #fff; text-decoration: none; } .bh-footer a:hover { text-decoration: underline; } .bh-secure { display: inline-flex; align-items: center; gap: 7px; } html, body { min-height: 100%; } body { display: flex; flex-direction: column; } .bh-main { flex: 1 0 auto; } /* Alpine: hide templated markup until the component boots. */ [x-cloak] { display: none !important; } /* --------------------------------------------------------------- modal ---- */ .bh-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--bh-gutter); overflow-y: auto; } .bh-modal[hidden] { display: none; } .bh-modal__backdrop { position: fixed; inset: 0; background: rgba(33, 39, 47, .6); } .bh-modal__panel { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: var(--bh-r-card); box-shadow: var(--bh-shadow); padding: clamp(22px, 4vw, 32px); margin: auto; } .bh-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--bh-field); color: var(--bh-ink); border: 0; border-radius: 50%; cursor: pointer; } .bh-modal__close:hover { background: var(--bh-field-hi); } .bh-modal__title { font-size: 24px; font-weight: 800; } .bh-modal__hint { margin: 6px 0 20px; font-size: 14.5px; color: var(--bh-ink-70); } .bh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bh-field); border-radius: var(--bh-r-field); padding: 4px; margin-bottom: 22px; } .bh-tab { padding: 11px 8px; font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bh-ink-70); background: none; border: 0; border-radius: 4px; cursor: pointer; } .bh-tab.is-active { background: #fff; color: var(--bh-ink); box-shadow: var(--bh-shadow-sm); } /* The same control as a set of links rather than buttons, for a tab set that changes the page rather than the state of one. Three across for Upcoming, Past and Cancelled; it collapses to one column on a phone, where three uppercase labels in a row do not fit. */ .bh-tabs--three { grid-template-columns: repeat(3, 1fr); } a.bh-tab { display: block; text-align: center; text-decoration: none; } a.bh-tab:hover { color: var(--bh-ink); } /* Navy on the count's tint: the tab's grey was 4.19:1 on it at 11px (axe, 31 October 2026). */ .bh-tab__count { color: var(--bh-ink); display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; /* No --bh-ink-10 token exists; a fallback nobody can see is worse than a literal that matches the navy it is derived from. */ background: rgba(33, 39, 47, .10); font-size: 11px; line-height: 18px; vertical-align: 1px; } @media (max-width: 520px) { .bh-tabs--three { grid-template-columns: 1fr; } } /* Provider buttons carry Navy labels on light surfaces — brand-neutral chrome so no provider's own colour fights the Ballyhass palette. */ .bh-social { display: grid; gap: 10px; } .bh-social__btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; font-weight: 700; font-size: 14.5px; color: var(--bh-ink); text-decoration: none; background: #fff; border: 1.5px solid var(--bh-line); border-radius: var(--bh-r-btn); } .bh-social__btn:hover { background: var(--bh-wash); border-color: var(--bh-ink-45); } .bh-social__mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--bh-ink); color: #fff; font-size: 12px; font-weight: 800; } .bh-or { position: relative; text-align: center; margin: 20px 0; font-size: 13px; color: var(--bh-ink-70); } .bh-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--bh-line); } .bh-or span { position: relative; background: #fff; padding: 0 12px; } .bh-hint { display: block; font-size: 13px; color: var(--bh-ink-70); margin-top: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ Quick Book — /book/{activity} One card, everything visible: the activity is fixed by the URL, so only date, time and party are left and they all fit on one screen. Reached most often from a phone (a CTA on an activity page, or a QR code at the venue), so it is laid out mobile-first with a sticky total. ═════════════════════════════════════════════════════════════════════════ */ .bh-quick__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } /* "Highlighted texts feature a straight square shape" — navy block, yellow text, square corners (brand guide p11). */ .bh-quick__activity { display: inline-block; background: var(--bh-ink); color: var(--bh-yellow); border-radius: var(--bh-r-highlight); padding: 6px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.05rem, 3.4vw, 1.3rem); line-height: 1.25; } .bh-quick__venue { display: block; margin-top: 8px; color: var(--bh-ink-70); font-weight: 500; } .bh-quick__change { color: var(--bh-blue-text); font-weight: 600; font-size: .875rem; white-space: nowrap; } .bh-quick__jumped { background: var(--bh-wash); border-left: 4px solid var(--bh-blue); border-radius: var(--bh-r-field); padding: 12px 14px; margin: 0 0 22px; color: var(--bh-ink); font-weight: 500; } .bh-quick__block { border: 0; padding: 0; margin: 0 0 24px; /* A fieldset takes its intrinsic width from its content and refuses to shrink, so the date strip's own overflow-x never engaged — the whole page scrolled sideways instead of the strip scrolling inside itself. */ min-width: 0; } /* "Subtitles are in bold and all caps" (brand guide p10). */ .bh-quick__legend { padding: 0; margin-bottom: 10px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bh-ink-70); } /* ── Date strip ─────────────────────────────────────────────────────────── */ /* Only bookable days are listed, so this scrolls rather than paging: real availability is sparse and a fixed week would be mostly dead cells. */ /* Both strips swipe natively on touch. The arrows are for pointer devices, where there is nothing to swipe, and only appear when there is more to see. */ .bh-scroller { position: relative; display: flex; align-items: center; min-width: 0; } .bh-daystrip, .bh-timestrip { display: flex; min-width: 0; max-width: 100%; flex: 1; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .bh-daystrip::-webkit-scrollbar, .bh-timestrip::-webkit-scrollbar { height: 4px; } .bh-daystrip::-webkit-scrollbar-thumb, .bh-timestrip::-webkit-scrollbar-thumb { background: var(--bh-line); border-radius: 2px; } .bh-scroller__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--bh-line); border-radius: 50%; background: var(--bh-panel); color: var(--bh-ink); cursor: pointer; box-shadow: var(--bh-shadow-sm); } .bh-scroller__arrow:hover { background: var(--bh-blue); border-color: var(--bh-ink); } .bh-scroller__arrow svg { width: 17px; height: 17px; } .bh-scroller__arrow--prev { left: -6px; } .bh-scroller__arrow--next { right: -6px; } /* Fade the chips into the arrow, so the one underneath reads as continuing off-screen rather than as being obscured by a button on top of it. */ .bh-scroller__arrow::before { content: ""; position: absolute; /* Tall enough to cover a whole chip: the arrow is 34px and the date chips are ~76px, so a short fade left the selected chip peeking around it. */ top: -30px; bottom: -30px; width: 30px; pointer-events: none; } .bh-scroller__arrow--prev::before { left: 100%; background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--bh-panel)); } .bh-scroller__arrow--next::before { right: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bh-panel)); } /* Touch devices swipe; an arrow there is a target sitting on top of the chips. */ @media (hover: none), (pointer: coarse) { .bh-scroller__arrow { display: none; } } .bh-day { flex: 0 0 auto; scroll-snap-align: start; min-width: 64px; padding: 10px 8px; background: var(--bh-field); border: 2px solid transparent; border-radius: var(--bh-r-btn); color: var(--bh-ink); cursor: pointer; text-align: center; font-family: inherit; transition: background .12s ease, border-color .12s ease; } .bh-day:hover { background: var(--bh-field-hi); } /* Navy text on blue — white on blue is 2.42:1 and fails WCAG AA. */ .bh-day.is-on { background: var(--bh-blue); border-color: var(--bh-ink); color: var(--bh-ink); } .bh-day__name { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bh-ink-70); } .bh-day.is-on .bh-day__name { color: var(--bh-ink); } .bh-day__num { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .bh-day__note { display: block; font-size: .6rem; font-weight: 700; text-transform: uppercase; color: var(--bh-danger); } /* ── Time grid ──────────────────────────────────────────────────────────── */ .bh-time { flex: 0 0 auto; scroll-snap-align: start; min-width: 96px; } .bh-time { padding: 10px 6px; background: var(--bh-field); border: 2px solid transparent; border-radius: var(--bh-r-btn); color: var(--bh-ink); cursor: pointer; font-family: inherit; text-align: center; transition: background .12s ease, border-color .12s ease; } .bh-time:hover:not(:disabled) { background: var(--bh-field-hi); } .bh-time:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; } .bh-time.is-on { background: var(--bh-blue); border-color: var(--bh-ink); color: var(--bh-ink); } .bh-time__at { display: block; font-size: 1.05rem; font-weight: 700; } .bh-time__left { display: block; font-size: .7rem; font-weight: 500; color: var(--bh-ink-70); } .bh-time.is-on .bh-time__left { color: var(--bh-ink); } /* ── Party ──────────────────────────────────────────────────────────────── */ /* Three tiers on one line. A full-size stepper is ~138px, so three of those plus gaps overflow a narrow phone — below 30rem they stack back into rows rather than being squeezed to an untappable size. */ .bh-quick__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .bh-quick__tier { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: var(--bh-wash); border-radius: var(--bh-r-card); text-align: center; } .bh-quick__tiername { font-weight: 600; font-size: .9rem; line-height: 1.2; } .bh-quick__tiername small { font-weight: 500; color: var(--bh-ink-70); } .bh-quick__tierprice { color: var(--bh-ink-70); font-weight: 500; font-size: .8rem; } /* Trimmed to fit three across; still a 34px target, above the 24px minimum for WCAG 2.5.8 and comfortably tappable. */ .bh-stepper--compact { gap: 2px; } .bh-stepper--compact .bh-stepper__btn { width: 34px; height: 34px; font-size: 18px; } .bh-stepper--compact .bh-stepper__val { min-width: 30px; font-size: 16px; } @media (max-width: 30rem) { .bh-quick__tiers { grid-template-columns: 1fr; } .bh-quick__tier { flex-direction: row; justify-content: space-between; text-align: left; padding: 8px 12px; } .bh-quick__tiername { flex: 1; } .bh-stepper--compact .bh-stepper__btn { width: 38px; height: 38px; } .bh-stepper--compact .bh-stepper__val { min-width: 40px; } } /* ── Total and actions ──────────────────────────────────────────────────── */ .bh-quick__foot { border-top: 1px solid var(--bh-line); padding-top: 18px; display: grid; gap: 14px; } .bh-quick__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bh-quick__amount { font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 800; color: var(--bh-ink); } .bh-quick__people { color: var(--bh-ink-70); font-weight: 500; } .bh-quick__or { position: relative; text-align: center; margin: 14px 0; color: var(--bh-ink-70); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .bh-quick__or::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--bh-line); } .bh-quick__or span { position: relative; background: var(--bh-panel); padding: 0 12px; } #bh-express { min-height: 48px; } /* On a phone the total and CTA stay in reach while the customer scrolls the time grid. Kept off larger screens, where the whole card is already visible. */ @media (max-width: 640px) { .bh-quick__foot { position: sticky; bottom: 0; background: var(--bh-panel); margin: 0 calc(var(--bh-gutter) * -1) calc(var(--bh-gutter) * -1); padding: 14px var(--bh-gutter) calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(33, 39, 47, .08); z-index: 2; } /* Scrolling to a control (tabbing, or a validation jump) stops above the foot rather than under it: the Under 18 stepper landed half hidden (WCAG 2.2 2.4.11). The foot is about 140px with a wallet, more with one. */ :root:has(.bh-quick__foot) { scroll-padding-bottom: 180px; } } /* The same on a short screen as the booking page's panel (B12): at 400% zoom the foot, about 140px, would cover more than half of a 256px window, so there it stays in the page's flow. */ @media (max-width: 640px) and (max-height: 559.98px) { .bh-quick__foot { position: static; box-shadow: none; } :root:has(.bh-quick__foot) { scroll-padding-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .bh-day, .bh-time { transition: none; } } .bh-day__month { display: block; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--bh-blue-text); } .bh-day.is-on .bh-day__month { color: var(--bh-ink); } /* ========================================================================== Customer portal -------------------------------------------------------------------------- The portal shipped on a separate Bootstrap 5 CDN layout with a hardcoded #1e3a5f navbar, so the screens a customer sees *after* they book looked nothing like the ones they booked through. Same brand, same tokens, same primitives as the checkout: only these few components were missing. ========================================================================== */ /* ----------------------------------------------------------- header nav ---- */ .bh-header__nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .bh-header__navlink { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600; font-size: 13.5px; letter-spacing: .02em; padding: 8px 14px; border-radius: var(--bh-r-btn); white-space: nowrap; transition: background .15s ease, color .15s ease; } .bh-header__navlink:hover { background: rgba(255,255,255,.1); color: #fff; } .bh-header__navlink.is-on { color: var(--bh-ink); background: var(--bh-yellow); } /* The nav is the primary way around the portal, so it goes under the logo where the header cannot hold it in one row, rather than being hidden behind a toggle the customer has to find. Every link reachable at every width (Eoghan, 3 November 2026, comment 11931884, point 1). The row was moved down only at 720px, but logo, nav, greeting and Sign out need about 1,050px, so from 721px to about 1,050px the header ran off the right edge and the whole page scrolled sideways. Below 720px the links scrolled in a strip with its scrollbar hidden, which a mouse cannot move. So the nav takes its own row below 1,180px (room for a long first name in the greeting) and wraps onto a second line when it needs to. Only a phone-sized touch screen swipes it, which is the one place a swipe exists. The header itself may wrap at any width, so a longer greeting never pushes it past the edge. */ .bh-header__in { flex-wrap: wrap; } .bh-header__nav { flex-wrap: wrap; min-width: 0; } @media (max-width: 1180px) { .bh-header__nav { order: 3; width: 100%; margin: 4px -6px 0; } } @media (max-width: 559px) and (pointer: coarse) { .bh-header__nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .bh-header__nav::-webkit-scrollbar { display: none; } } /* ----------------------------------------------------------- slim hero ---- */ /* Portal pages are somewhere you land repeatedly, not a one-off flow, so the hero is trimmed back — enough to carry the brand, not enough to push the content the customer came for below the fold. It was stretched to 100% 100% so that a short header still showed both the blue and the yellow. That put the torn blue-to-yellow edge halfway down the header, through the description (comment 11932022, point 1). The strokes now have their own height, smaller here than on the checkout, and sit under the text as they do there (.bh-hero above). */ .bh-hero--slim { --bh-hero-paint: clamp(24px, 4.5vw, 64px); padding: clamp(22px, 3.5vw, 34px) 0 calc(var(--bh-hero-paint) + var(--bh-hero-paint-gap)); } .bh-hero--slim .bh-hero__title { font-size: clamp(30px, 5vw, 46px); margin-top: 0; } .bh-hero__crumb { display: inline-flex; align-items: center; gap: 7px; color: var(--bh-ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; margin-bottom: 10px; } .bh-hero__crumb:hover { text-decoration: underline; } /* --------------------------------------------------------- panel header ---- */ /* Title on the left, one action on the right, aligned on the title's baseline. */ .bh-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .bh-panel__head .bh-panel__title { margin-bottom: 0; } /* A panel whose whole body is a table or a list sits flush to its own edges. */ .bh-panel--flush { padding: 0; overflow: hidden; } .bh-panel--flush .bh-panel__head { margin: 0; padding: 18px clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--bh-line); } /* --------------------------------------------------------------- chips ---- */ /* Square corners are the brand's highlight shape (p11) — buttons are rounded, highlights are not. A status is a highlight, so it takes the square form and never gets mistaken for something clickable. Tones are the bh-alert palette, so an "unsigned" chip and the alert warning the customer about it are visibly the same idea. */ .bh-chip { display: inline-block; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--bh-r-highlight); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; line-height: 1.5; } .bh-chip--paid { background: #E8F5EE; border-color: var(--bh-success); color: #14603A; } .bh-chip--pending { background: #F4FFB0; border-color: var(--bh-yellow-dark); color: var(--bh-ink); } .bh-chip--failed { background: #FDECEC; border-color: var(--bh-danger); color: #8E1F1F; } .bh-chip--void { background: var(--bh-field); border-color: var(--bh-line); color: var(--bh-ink-70); } .bh-chip--info { background: #E6F8FB; border-color: var(--bh-blue); color: #0A5A68; } /* --------------------------------------------------------------- table ---- */ /* position:relative makes this the containing block for the absolutely positioned .bh-visually-hidden inside the table's header. Without it that span's containing block is the page, so on a phone it sat at its static position 618px across — outside the viewport but inside the document — and gave a 619px scroll width. The page scrolled sideways by an amount nothing visible accounted for. */ .bh-tablewrap { overflow-x: auto; position: relative; } .bh-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .bh-table th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--bh-ink-70); background: var(--bh-wash); padding: 12px clamp(14px, 2vw, 20px); border-bottom: 1px solid var(--bh-line); white-space: nowrap; } .bh-table td { padding: 16px clamp(14px, 2vw, 20px); border-bottom: 1px solid var(--bh-line); vertical-align: middle; } .bh-table tbody tr:last-child td { border-bottom: 0; } .bh-table tbody tr:hover { background: var(--bh-wash); } .bh-table__ref { font-weight: 700; letter-spacing: .02em; } .bh-table__num { text-align: right; font-variant-numeric: tabular-nums; } .bh-table__act { text-align: right; white-space: nowrap; } .bh-table__act .bh-btn + .bh-btn { margin-left: 8px; } /* ---------------------------------------------------------------- list ---- */ /* Rows of bookings on the dashboard: same hairline rhythm as the table, but stacked rather than columnar, because two of them sit side by side. */ .bh-list { list-style: none; margin: 0; padding: 0; } .bh-list__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--bh-line); } .bh-list__item:last-child { border-bottom: 0; } .bh-list__main { min-width: 0; } /* The button goes under the words when they would have less than 12rem beside it (signed-in pass, 4 November 2026, finding B13). The name gave all the ground: on the overview's "A few things to sort", "Balance of €1,850.00 still to pay" had 115px beside VIEW BALANCE at 390px, and its two-line limit cut "still to pay" off; at 320px it had 45px and showed 2 of its 8 lines. */ .bh-list__item { flex-wrap: wrap; } .bh-list__item > .bh-list__main { flex: 1 1 12rem; } .bh-list__name { font-weight: 700; font-size: 15.5px; /* Two lines, then ellipsis. Truncating to one line turned every activity into "Ballyhass Coachfo…", which names nothing. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* The button keeps its own width; only the name gives ground. */ .bh-list__item > .bh-btn, .bh-list__item > a.bh-btn { flex: 0 0 auto; white-space: nowrap; } .bh-list__meta { font-size: 13.5px; color: var(--bh-ink-70); margin-top: 2px; } /* --------------------------------------------------------- detail pairs ---- */ .bh-dl { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 0; margin: 0; } .bh-dl dt { font-weight: 700; font-size: 14.5px; padding: 11px 0; border-bottom: 1px solid var(--bh-line); } .bh-dl dd { margin: 0; padding: 11px 0; color: var(--bh-ink-70); border-bottom: 1px solid var(--bh-line); } .bh-dl dt:last-of-type, .bh-dl dd:last-of-type { border-bottom: 0; } @media (max-width: 520px) { .bh-dl { grid-template-columns: minmax(0, 1fr); } .bh-dl dt { padding-bottom: 0; border-bottom: 0; } .bh-dl dd { padding-top: 2px; } } /* --------------------------------------------------------------- cards ---- */ /* A card is at least 320px, or the whole width where the column is narrower: at 320px (400% zoom) the column is 288px, and a 320px minimum scrolled the account overview sideways (WCAG 1.4.10; signed-in pass, 4 November 2026, finding B8). */ .bh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; } /* A row of actions that stays on one line until it can't. */ .bh-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ------------------------------------------------------------ paginator ---- */ /* Laravel's default paginator markup is Tailwind-flavoured; the portal renders the simple variant, which is a plain