/* * Breathation components. * Ported from the design system's components/bundle.css and the artboards' inline styles * (design/static/*.html). Token names alias the theme.json presets so there is one source of truth. * * Organisation: tokens → fallback fonts → base → layout → type → buttons → block styles (.is-style-*) → * components (.br-*) → header → mobile menu → footer → sticky bar → forms → page sections. * Motion (transitions, the scroll reveal) is in motion.css, which site.js adds once the page has loaded. * Breakpoints: 781px (stack, mobile values) and 1079px (header switches to the burger). */ :root { --sand: var(--wp--preset--color--sand); --stone-100: var(--wp--preset--color--stone-100); --rule: var(--wp--preset--color--rule); --stone-200: var(--wp--preset--color--stone-200); --stone-300: var(--wp--preset--color--stone-300); --clay-light: var(--wp--preset--color--clay-light); --clay: var(--wp--preset--color--clay); --rust: var(--wp--preset--color--rust); --rust-deep: var(--wp--preset--color--rust-deep); --ink: var(--wp--preset--color--ink); --ink-muted: var(--wp--preset--color--ink-muted); --ink-hero-meta: var(--wp--custom--color--ink-hero-meta); --font-display: var(--wp--preset--font-family--display); --font-accent: var(--wp--preset--font-family--accent); --font-sans: var(--wp--preset--font-family--sans); --gutter: var(--wp--preset--spacing--gutter); --section-y: var(--wp--preset--spacing--section-y); --fluid: calc((100vw - 390px) / 1050); /* One px of the 390 artboard's 350px content column, shrinking with the column below 390. Western Sunset sizes are capped at N * var(--narrow) so long words (CANCELLATION, WONDERING?) still fit at 320-389px (WCAG reflow); from 390 up the cap never applies. theme.json's display presets use the same formula. */ --narrow: calc((100vw - 40px) / 350); /* One ch of Montserrat 400 (its "0" is 662/1000 em). A ch follows whichever font is showing, and the fallback's "0" is 5% narrower, so a measure in ch shrinks until Montserrat arrives and the text in it re-wraps. Measures on Montserrat 400 text use calc(N * var(--sans-ch)) instead: the same width as N ch once Montserrat is in, but steady. Headings and Sailors quotes keep plain ch (their faces are preloaded or not Montserrat); so does .br-studio-trav__body, which has a 600 paragraph. */ --sans-ch: 0.662em; } /* ---------- Fallback fonts: Montserrat's size from the first paint ---------- Montserrat (body text) arrives a moment after the first paint (font-display: swap; only the two display faces are preloaded). Until then the browser draws the next font in theme.json's sans stack. These faces are fonts the device already has (local() only, nothing is downloaded), resized to Montserrat's width and given its vertical metrics, so text wraps the same before and after the swap and nothing below it moves (FAQ layout shift was 0.35 at 1024px). Arial covers macOS, iOS and Windows (Arimo and Liberation Sans are Linux's Arial-width clones, so they share its numbers); Android has no Arial, so its Roboto gets a family of its own, next in the stack. How the numbers were found (15 Oct 2026): - size-adjust: the Montserrat text on the 13 pages, laid out on one line in Chrome in the theme's own woff2 files and in the local font; the ratio of the two widths. For 400, 400 italic and 600, the text the pages set in that weight (92,000, 1,900 and 17,600 characters): 400: Arial 112.57%, Roboto 112.94%. 400 italic: Arial Italic 113.65%. 600: Arial Bold 107.25%, Roboto Bold 114.14%. Text set in 500 is mostly short labels (FAQ questions and topic links), too uneven to go by, so 500 is all 120,000 characters set in 500, drawn with the regular face: Arial 114.04%, Roboto 114.65%. - ascent, descent and line gap: Montserrat's own (unitsPerEm 1000; hhea and OS/2 typo ascender 968, descender -251, line gap 0), divided by the face's size-adjust because the browser scales the overrides by it too (e.g. 96.8% / 1.1257 = 85.99%). */ @font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"); size-adjust: 112.57%; ascent-override: 85.99%; descent-override: 22.30%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"); size-adjust: 114.04%; ascent-override: 84.88%; descent-override: 22.01%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback"; font-style: italic; font-weight: 400; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Arimo Italic"), local("Liberation Sans Italic"); size-adjust: 113.65%; ascent-override: 85.18%; descent-override: 22.09%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold"); size-adjust: 107.25%; ascent-override: 90.26%; descent-override: 23.40%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 112.94%; ascent-override: 85.71%; descent-override: 22.22%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback Roboto"; font-style: normal; font-weight: 500; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 114.65%; ascent-override: 84.43%; descent-override: 21.89%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback Roboto"; font-style: normal; font-weight: 600; /* Last: Android 12 and later have one variable Roboto, found only by its regular name. */ src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); size-adjust: 114.14%; ascent-override: 84.81%; descent-override: 21.99%; line-gap-override: 0%; } /* ---------- Base: square everything except controls, no shadows anywhere ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } strong, b { font-weight: 600; } :focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; } .is-style-cta-band :focus-visible { outline-color: var(--sand); } /* Core's skip link ("Skip to content"), restyled as a rust pill. */ .skip-link.screen-reader-text:focus { left: 12px; top: 12px; z-index: 100000; width: auto; height: auto; clip: auto; clip-path: none; background: var(--rust); color: var(--sand); padding: 14px 20px; border-radius: 999px; font: 600 15px/1 var(--font-sans); text-decoration: none; } /* Hidden on phones only (Advanced → Additional CSS class), where a mobile artboard leaves an item out. */ @media (max-width: 781px) { .br-hide-mobile { display: none !important; } } /* Visible placeholder for unknown facts, e.g. [RATE], [CONFIRM]. */ .br-ph { font-weight: 600; color: var(--rust-deep); } .is-style-cta-band .br-ph { color: inherit; } /* ---------- Layout: sections run edge to edge with no gaps between them ---------- */ .wp-site-blocks > * { margin-block: 0; } .br-main { margin-block: 0; } .wp-block-post-content > .alignfull { margin-block: 0; } /* ---------- Type ---------- */ p { margin-block: 0; } h1, h2, h3, h4 { margin-block: 0; } .wp-block-post-content a:not(.wp-element-button), .br-footer a, .br-menu a { text-decoration-color: var(--clay); text-underline-offset: 4px; } .wp-block-post-content a:not(.wp-element-button):hover { color: var(--rust); } /* Links on a line of their own (not inside a sentence) get a 44px touch target without moving anything: the padding grows the hit area and the matching negative margin keeps the line box as it was. */ .br-split__link a, .br-kind__link a, .br-dl__row a, .br-home-visit__text a { display: inline-block; padding-block: max(0px, (44px - 1lh) / 2); margin-block: min(0px, (1lh - 44px) / 2); } .is-style-eyebrow { font: 600 14px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rust); } .is-style-step-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--wp--preset--font-size--step-title); line-height: 1.3; color: var(--rust); } .is-style-spoken { font-family: var(--font-accent); font-weight: 400; line-height: 1.2; color: var(--rust); } .is-style-meta { font: 500 14px/1.4 var(--font-sans); color: var(--ink-muted); } .is-style-numeral { font: 400 var(--wp--preset--font-size--numeral)/1 var(--font-accent); color: var(--clay); } .br-small { font: 400 14px/1.55 var(--font-sans); color: var(--ink-muted); } /* ---------- Buttons ---------- */ .wp-block-buttons { gap: 16px 28px; } .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; text-decoration: none; } .is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { background: transparent; color: var(--rust); border: 1.5px solid var(--rust); padding: 0 32px; } .is-style-outline > .wp-block-button__link:hover { background: var(--rust); color: var(--sand); } .is-style-on-rust > .wp-block-button__link { background: var(--sand); border-color: var(--sand); color: var(--rust); } .is-style-on-rust > .wp-block-button__link:hover { background: var(--stone-300); border-color: var(--stone-300); color: var(--rust-deep); } .is-style-on-rust-outline > .wp-block-button__link { background: transparent; border: 1.5px solid var(--sand); color: var(--sand); } .is-style-on-rust-outline > .wp-block-button__link:hover { background: var(--sand); color: var(--rust); } .is-style-arrow > .wp-block-button__link, .is-style-text > .wp-block-button__link { min-height: 44px; padding: 0; background: transparent; border: 0; border-radius: 0; letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--clay); } .is-style-arrow > .wp-block-button__link { font: 600 15px/1.4 var(--font-sans); color: var(--rust); text-underline-offset: 4px; } .is-style-text > .wp-block-button__link { font: 500 16px/1.2 var(--font-sans); color: var(--ink); text-underline-offset: 5px; } .is-style-arrow > .wp-block-button__link:hover, .is-style-text > .wp-block-button__link:hover { background: transparent; color: var(--rust); } /* ---------- Chips (non-interactive fact pills) ---------- */ .is-style-chip, .is-style-chip-tag, .is-style-chip-accent { display: inline-block; margin: 0; font: 500 14px/1 var(--font-sans); padding: 10px 14px; border-radius: 999px; background: var(--sand); border: 1px solid var(--stone-300); color: var(--ink); } .is-style-chip-tag { background: var(--stone-300); border-color: transparent; padding: 8px 12px; } .is-style-chip-accent { border-color: transparent; color: var(--rust); } .br-chips { gap: 10px; } /* ---------- Group block styles ---------- */ .is-style-section, .is-style-section-stone { padding-block: var(--section-y); } .is-style-section-stone { background: var(--stone-100); border-top: 1px solid var(--rule); } .is-style-card { border: 1px solid var(--stone-300); padding: clamp(24px, calc(24px + 8 * var(--fluid)), 32px); display: flex; flex-direction: column; } .is-style-class-card { background: var(--stone-100); border: 1px solid var(--rule); padding: var(--wp--preset--spacing--card-pad); display: flex; flex-direction: column; } .is-style-featured { background: var(--stone-300); } .is-style-panel { background: var(--stone-100); border: 1px solid var(--rule); padding: clamp(24px, calc(24px + 16 * var(--fluid)), 40px); } .is-style-rule-top { border-top: 1px solid var(--stone-300); padding-top: 22px; } /* Rust CTA band: the page's one rust moment, pattern masked clear around the heading. */ .is-style-cta-band { position: relative; overflow: hidden; background: var(--rust); color: var(--sand); padding-block: var(--wp--preset--spacing--cta-y); text-align: center; } .is-style-cta-band::before { content: ""; position: absolute; inset: 0; opacity: .11; pointer-events: none; background: url("../images/pattern-sand.png") repeat; background-size: 480px auto; -webkit-mask-image: radial-gradient(ellipse at 50% 28%, transparent 0 260px, #000 560px); mask-image: radial-gradient(ellipse at 50% 28%, transparent 0 260px, #000 560px); } .is-style-cta-band > * { position: relative; } .is-style-cta-band :where(h1, h2, h3, p, a:not(.wp-element-button)) { color: var(--sand); } .is-style-cta-band h2 { font-size: var(--wp--preset--font-size--cta-title); max-width: 20ch; margin-inline: auto; } .is-style-cta-band h2 + p { margin: 22px auto 0; font-size: var(--wp--preset--font-size--body-lg); max-width: calc(48 * var(--sans-ch)); } .is-style-cta-band .wp-block-buttons { margin-top: 34px; justify-content: center; gap: 16px; } /* A crossover strip straight after the rust band needs no hairline of its own. */ .is-style-cta-band + :is(.is-style-strip, .is-style-strip-sand) { border-top: 0; } .is-style-cta-band .br-embed, .is-style-cta-band .br-momence { margin: 48px auto 0; max-width: 960px; } /* Crossover strip: hands one audience to the other. "Crossover strip, sand" (Space Hire's "Here to breathe instead?") is the same strip on the sand ground. */ :is(.is-style-strip, .is-style-strip-sand) { background: var(--stone-100); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--wp--preset--spacing--strip-y); } .is-style-strip-sand { background: var(--sand); } .br-strip__inner { gap: 24px 48px; } :is(.is-style-strip, .is-style-strip-sand) h2 { font: 400 var(--wp--preset--font-size--strip-title)/1.2 var(--font-accent); } :is(.is-style-strip, .is-style-strip-sand) h2 + p { margin-top: 12px; max-width: calc(56 * var(--sans-ch)); font-size: var(--wp--preset--font-size--body); } :is(.is-style-strip, .is-style-strip-sand) .wp-block-button__link { min-height: 50px; padding: 0 28px; } /* Sand section with the rust pattern fading in along the right edge ("Kind words"). The pattern never sits behind text: its width (--br-pattern-w) is capped to the room right of the text column, whose max width is --br-pattern-text (the full content width unless the section sets a narrower one). At 1366px and up that cap never bites; below 1080px, where the room runs out, the pattern becomes the band across the top that the mobile artboards show. */ .is-style-pattern-edge { --br-pattern-w: 18%; --br-pattern-text: var(--wp--style--global--content-size); position: relative; overflow: hidden; padding-block: var(--section-y); } .is-style-pattern-edge::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(0px, calc(100% - max(var(--gutter), (100% - var(--wp--style--global--content-size)) / 2) - var(--br-pattern-text)), var(--br-pattern-w)); opacity: .14; pointer-events: none; background: url("../images/pattern-rust.png") repeat; background-size: 480px auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); } .is-style-pattern-edge > * { position: relative; } /* ---------- Quotes ---------- */ .wp-block-quote { margin: 0; padding: 0; border: 0; } .wp-block-quote > p { margin: 0; } .wp-block-quote cite { display: block; font: 500 15px/1.4 var(--font-sans); font-style: normal; color: var(--ink-muted); } .wp-block-quote.is-style-spoken > p { font: 400 var(--wp--preset--font-size--quote)/1.35 var(--font-accent); color: var(--rust); } .wp-block-quote.is-style-spoken cite { margin-top: 22px; } .wp-block-quote.is-style-testimonial > p { font: italic 400 17px/1.65 var(--font-sans); } .wp-block-quote.is-style-testimonial cite { margin-top: 12px; } /* ---------- Lists ---------- */ .is-style-plain { list-style: none; padding-left: 0; } /* ---------- Images ---------- */ .wp-block-image { margin: 0; } .is-style-framed img { display: block; width: 100%; object-fit: cover; border: 1px solid var(--stone-300); } .br-mark img { display: block; } /* ---------- Embed placeholder (Momence, map) ---------- */ .br-embed { display: flex; align-items: center; justify-content: center; min-height: var(--br-embed-h, 480px); border: 1px dashed var(--stone-300); background: var(--stone-100); font: 400 13px/1.6 ui-monospace, Menlo, monospace; color: var(--ink-muted); text-align: center; padding: 24px; } @media (max-width: 781px) { .br-embed { min-height: calc(var(--br-embed-h, 480px) * .76); font-size: 12px; } } .br-embed--on-rust { border-color: rgba(238, 234, 229, .6); background: rgba(92, 24, 1, .35); color: var(--sand); } /* ---------- Momence timetable: [momence slot="schedule"] once Momence's code is saved ---------- Momence's host-schedule plugin renders after load into #momence-plugin-host-schedule (no shadow DOM, no iframe). Its colours and font are --momence-* custom properties: they're re-pointed at the theme tokens on the wrapper, so they reach every view Momence shows (week list, month calendar, dropdowns, booking dialog). Shape, size and focus need direct rules. Momence's own are `#momence-plugin-host-schedule .` and load after this file, so each one here is scoped `.br-momence--schedule #momence-plugin-host-schedule` plus one of Momence's stable `momence-*` class names, which outranks them. Momence also requests the Inter font from Google itself; nothing here uses it. Placement: on Book the full timetable runs its length in the main column; inside the rust band (Home, Classes) a sand panel shows just the next five sessions, at their own height. Both reserve their height before the timetable arrives, so nothing below it moves. Momence's markup has four accessibility faults; site.js repairs them, with the names set in each page's Shortcode block. */ .br-momence--schedule { --momence-font-family: var(--font-sans); --momence-background: var(--sand); --momence-white: var(--sand); --momence-light-alpha-fill-900: var(--sand); --momence-primary-color: var(--ink); --momence-secondary-color: var(--ink-muted); --momence-tertiary-color: var(--clay); --momence-session-separator-color: var(--rule); --momence-primary-050: var(--stone-100); --momence-primary-200: var(--rust); --momence-primary-400: var(--rust); --momence-primary-500: var(--rust); --momence-primary-600: var(--rust-deep); --momence-primary-700: var(--rust-deep); --momence-black-100: var(--ink-muted); --momence-black-200: var(--ink-muted); --momence-black-300: var(--rust); --momence-black-400: var(--ink); --momence-black-500: var(--ink); --momence-grey-050: var(--stone-100); --momence-grey-100: var(--stone-100); --momence-grey-200: var(--stone-300); --momence-grey-300: var(--stone-200); --momence-grey-400: var(--clay-light); --momence-grey-500: var(--clay); --momence-dark-alpha-fill-100: var(--stone-100); --momence-dark-alpha-fill-200: var(--stone-100); --momence-dark-alpha-fill-300: var(--stone-300); --momence-dark-alpha-fill-400: var(--stone-300); --momence-dark-alpha-fill-700: var(--ink-muted); --momence-dark-alpha-fill-800: var(--ink); --momence-dark-alpha-fill-900: var(--ink); --momence-dark-background-200: var(--stone-100); --momence-dark-background-900: color-mix(in srgb, var(--ink) 76%, transparent); color: var(--ink); text-align: start; } /* The mount point keeps Momence's 320px minimum otherwise, wider than the panel's content box on small phones. */ .br-momence.br-momence--schedule #momence-plugin-host-schedule { min-width: 0; } .br-momence--schedule #momence-plugin-host-schedule .momence-host-schedule-layout { max-width: none; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule { padding: 0; } /* While it loads: Momence's dots hold still (the first screen paints finished, docs/MOTION.md), and its "powered by" mark waits for the sessions, as Momence paints it early and then pushes it down the page. */ .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-loader div div { animation: none; } .br-momence--schedule #momence-plugin-host-schedule .momence-host-schedule-layout:not(:has(.momence-host_schedule-session_list-item, .momence-host_schedule-session_list-no_results)) .momence-host_schedule-powered_by_momence { display: none; } /* A day with no classes (and "Today" on most days) shows only Momence's sentence, not its 412px grey cartoon, which isn't brand imagery and, in the band's panel, pushed the sentence out of view. */ .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-no_results-image { display: none; } /* Controls: Montserrat, pills, 44px touch targets and the theme's focus ring (Momence resets every button and link to the browser's own font and outline). The day strip scrolls sideways, so it's padded to keep focus rings in view. A lone "Classes" tab (one event type) is hidden; a second type brings it back. */ .br-momence--schedule #momence-plugin-host-schedule button { font-family: inherit; } .br-momence--schedule #momence-plugin-host-schedule :is(a, button):focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; } .br-momence--schedule #momence-plugin-host-schedule .momence-event_type_select:not(:has(> :nth-child(2))) { display: none; } .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection { padding: 6px; } /* Days share the strip by the width of their names, never narrower than the name plus 2px each side, so a week fits between the arrows down to a 360px phone without the names running together (in a column under 310px the names drop to 10px, Momence's own size); narrower still, the strip scrolls sideways as Momence's own does. From 600px the days take equal widths. */ .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-list > .momence-day_selection-item { flex: 1 1 auto; min-height: 56px; margin-right: 0; padding-inline: 2px; border-radius: 999px; letter-spacing: 0; } .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-item_day { font-size: 11px; line-height: 16px; } .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-item_highlight { font-size: 16px; line-height: 20px; } .br-momence--schedule #momence-plugin-host-schedule .momence-arrow-button { flex: none; width: 44px; height: 44px; } /* Month view: day cells are pills with a 44px target, like the rest of the controls. */ .br-momence--schedule #momence-plugin-host-schedule .momence-month-calendar-day { min-height: 44px; border-radius: 999px; } .br-momence--schedule #momence-plugin-host-schedule :is(.momence-view-toggle, .momence-quick_filters) > button, .br-momence--schedule #momence-plugin-host-schedule .momence-select-button { min-height: 44px; padding-inline: 16px; font-weight: 600; } .br-momence--schedule #momence-plugin-host-schedule .momence-quick_filters > button { text-transform: uppercase; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-powered_by_momence { box-sizing: border-box; min-height: 44px; } /* A session: square stone-100 card, Sailors title in rust, Montserrat details at 14px. Works for Momence's full cards and its compact rows (lite_mode, used here). Class photos, if added in Momence, show; the empty grey stand-in doesn't. */ .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list { margin-top: 8px; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-date_label { font: 600 13px/1.4 var(--font-sans); letter-spacing: .14em; color: var(--ink); } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item { border: 1px solid var(--rule); border-radius: 0; background: var(--stone-100); padding: var(--wp--preset--spacing--card-pad); } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-image_container:has(> .momence-host_schedule-session_list-item-image_placeholder) { display: none; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item-type { font-size: 12px; font-weight: 600; letter-spacing: .16em; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item-title { font: 400 var(--wp--preset--font-size--card-title)/1.15 var(--font-accent); color: var(--rust); } .br-momence--schedule #momence-plugin-host-schedule :is(.momence-host_schedule-session_list-item-info, .momence-host_schedule-session_list-item-description) { font-size: var(--wp--preset--font-size--small); line-height: 1.55; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-expand-button { font-size: var(--wp--preset--font-size--small); line-height: 1.55; text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 4px; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item-price > :last-child { font: 600 20px/1.3 var(--font-sans); } /* "FROM" before a price that varies: Momence draws it in its tertiary colour, which is clay here (for the icons). */ .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item-price > :not(:last-child) { color: var(--ink-muted); } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session-list-item-wrapper { width: auto; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session-list-item-wrapper :is(a, button) { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border-width: 1.5px; border-radius: 999px; font: 600 var(--wp--preset--font-size--nav)/1 var(--font-sans); letter-spacing: .03em; white-space: nowrap; } /* Compact rows: time and place, title and teacher, price and Book. Side by side when the timetable is 600px or wider; in a narrower column the title runs across the top. */ .br-momence--schedule { container-type: inline-size; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item:has(> .momence-host_schedule-session_list-lite_title_container) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "info book"; gap: 16px 10px; align-items: end; padding: 16px; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-lite_title_container { grid-area: title; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-lite_info_container { grid-area: info; margin: 0; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-lite_info_container > * { flex-wrap: wrap; font-size: var(--wp--preset--font-size--small); line-height: 1.55; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-lite_info_container > * > div { white-space: nowrap; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item > .momence-host_schedule-session-list-item-wrapper { grid-area: book; margin: 0; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item > .momence-host_schedule-session-list-item-wrapper :is(a, button) { padding-inline: 16px; } @container (max-width: 309px) { .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-item_day { font-size: 10px; } } @container (min-width: 600px) { .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-list { padding-inline: 4px; } .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-list > .momence-day_selection-item { flex-basis: 0; } .br-momence--schedule #momence-plugin-host-schedule .momence-day_selection-item_day { font-size: 12px; } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item:has(> .momence-host_schedule-session_list-lite_title_container) { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) auto; grid-template-areas: "info title book"; gap: 16px 24px; align-items: center; padding: var(--wp--preset--spacing--card-pad); } .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item > .momence-host_schedule-session-list-item-wrapper :is(a, button) { padding-inline: 24px; } } /* Book: the design's 960px box is held until the timetable arrives (it then runs its full length), which keeps the column's foot and, on phones, the aside below it out of view until then. Where the aside sits below the timetable, a visitor who has already scrolled down to it stays where they are when the timetable arrives: the timetable never serves as the browser's scroll anchor, so the aside does, and is held in place. */ .br-book__grid > .br-momence--schedule { min-width: 0; min-height: 960px; overflow-anchor: none; } @media (max-width: 781px) { .br-book__grid > .br-momence--schedule { min-height: calc(960px * .76); } } /* Rust band: a sand panel, as wide as the design's box, with the next five sessions at their own height and no scrolling inside it, so a thumb on it moves the page. The rest, and the controls to browse it (Week/Month, the day strip, Show all/Today, filters), are on Book. Everything after the fifth session is hidden, later sessions and their day labels alike (a label comes before its sessions, so none is left without one). Until the sessions arrive the panel holds the height five of them take (measured: one-line rows, which stop growing at 1440px, then stacked rows where the panel's content is under 600px wide, below a 693px window). The panel never serves as the scroll anchor, so a visitor who has scrolled past the band stays put if that height isn't exact. */ .is-style-cta-band .br-momence--schedule { padding: clamp(16px, calc(16px + 16 * var(--fluid)), 32px); background: var(--sand); overflow-anchor: none; } .is-style-cta-band .br-momence--schedule:not(:has(.momence-host_schedule-session_list-item, .momence-host_schedule-session_list-no_results)) { min-height: min(calc(967px + 72 * var(--fluid)), 1039px); } @media (max-width: 692px) { .is-style-cta-band .br-momence--schedule:not(:has(.momence-host_schedule-session_list-item, .momence-host_schedule-session_list-no_results)) { min-height: 1290px; } } .is-style-cta-band .br-momence--schedule #momence-plugin-host-schedule :is(.momence-host_schedule-first_row, .momence-host_schedule-second_row, .momence-host_schedule-third_row), .is-style-cta-band .br-momence--schedule #momence-plugin-host-schedule .momence-host_schedule-session_list-item:nth-child(5 of .momence-host_schedule-session_list-item) ~ * { display: none; } @media (prefers-reduced-motion: reduce) { /* Momence's own hover fades and loading dots (!important: its rules outrank any plain override). */ .br-momence--schedule * { transition: none !important; animation: none !important; } } /* ---------- Accordion: core Details block ---------- */ .br-accordion { border-top: 1px solid var(--stone-300); } .br-accordion .wp-block-details { margin: 0; border-bottom: 1px solid var(--rule); } .wp-block-details summary { list-style: none; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 8px; font: 500 17px/1.45 var(--font-sans); color: var(--ink); cursor: pointer; } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 1.5px solid var(--clay); border-bottom: 1.5px solid var(--clay); transform: rotate(45deg); } .wp-block-details[open] > summary { padding-bottom: 12px; } .wp-block-details[open] > summary::after { transform: rotate(-135deg); } .wp-block-details summary:hover { background: var(--stone-100); } .wp-block-details > :not(summary) { margin: 0; padding: 0 8px; max-width: calc(60 * var(--sans-ch)); font: 400 16px/1.6 var(--font-sans); } .wp-block-details > :not(summary) + :not(summary) { padding-top: 12px; } .wp-block-details > :last-child:not(summary) { padding-bottom: 24px; } /* ---------- Section header: H2 left, muted intro right, rule beneath ---------- */ .br-sechead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; padding-bottom: 36px; border-bottom: 1px solid var(--stone-300); } .br-sechead > * { margin: 0; } .br-sechead > h2 { flex: 1 1 520px; max-width: 14ch; } .br-sechead > p { flex: 0 1 440px; font-size: var(--wp--preset--font-size--body); color: var(--ink-muted); } /* ---------- Page hero (photographic): Cover with the sand wash ---------- */ .br-hero.wp-block-cover { padding: 72px var(--gutter); } .br-hero .wp-block-cover__inner-container { text-align: center; color: var(--ink); } .br-hero.wp-block-cover :where(h1, h2) { color: var(--rust); } .br-hero .br-mark { margin: 0 auto 24px; } .br-hero .br-mark img { width: 34px; height: auto; margin-inline: auto; } .br-hero .is-style-eyebrow + h1 { margin-top: 22px; } .br-hero h1 { max-width: 22ch; margin-inline: auto; text-wrap: balance; } .br-hero h1 + p { margin: 26px auto 0; max-width: calc(48 * var(--sans-ch)); font-size: var(--wp--preset--font-size--lead); } .br-hero .wp-block-buttons { margin-top: 36px; justify-content: center; } .br-hero .is-style-meta { margin-top: 28px; font-size: 15px; line-height: 1.5; color: var(--ink-hero-meta); } /* A breathing hero's pause button (Cover style "Breathing"). The hero only breathes while it has one. On the site it's hidden, except that motion.css shows it to keyboard users while the hero moves; pressed (paused), it takes the stone fill. The editor shows it, so its words can be edited. */ body:not(.editor-styles-wrapper) .br-hero-pause { display: none; } .br-hero-pause .wp-block-button__link, .br-hero-pause .wp-block-button__link:hover { min-height: 44px; padding: 0 18px; border: 1px solid var(--stone-300); background: var(--sand); color: var(--ink); font: 500 14px/1 var(--font-sans); } .br-hero-pause .wp-block-button__link[aria-pressed="true"] { background: var(--stone-300); } /* Intro paragraph under a stacked section H2. */ h2 + .br-intro { margin-top: 20px; max-width: calc(52 * var(--sans-ch)); } .br-note { margin-top: 32px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); max-width: calc(80 * var(--sans-ch)); } /* Core's constrained layout centres narrower children; keep these on the content column's left edge. */ .is-layout-constrained > :is(.br-intro, .br-note, .br-measure, .br-kind__more) { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; } /* Eyebrow with the small rust breath mark before it ("Start here"). */ .br-kicker { gap: 12px; align-items: center; } .br-kicker .br-mark img { width: 14px; } .br-kicker .is-style-eyebrow { letter-spacing: .14em; } /* "Start here" featured card: photo + body, side by side from 880px. */ .br-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } .br-start > * { margin: 0; } .br-start__photo { min-height: 460px; overflow: hidden; } .br-start__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .br-start__body { padding: 56px 56px 52px; display: flex; flex-direction: column; } .br-start__body > * { margin: 0; } .br-start__body > h2 { margin-top: 16px; line-height: 1.08; } .br-start__meta { margin-top: 10px !important; font: 500 15px/1.4 var(--font-sans); color: var(--rust-deep); } .br-start__meta + p { margin-top: 26px; max-width: calc(46 * var(--sans-ch)); } .br-start__meta + p + p { margin-top: 16px; max-width: calc(46 * var(--sans-ch)); } .br-start__body .br-chips { margin-top: 26px; } .br-start__cta { margin-top: auto !important; padding-top: 32px; gap: 16px 28px; align-items: center; } .br-start__offer { font: 500 15px/1.4 var(--font-sans); color: var(--rust-deep); } /* Session rows on Classes: name / description / aside. */ .br-sechead + .br-sessions { margin-top: 0; } .br-sessions > * { margin: 0; } .br-session { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 48px; padding: 44px 0; border-bottom: 1px solid var(--stone-300); } .br-session > *, .br-session__name > *, .br-session__aside > * { margin: 0; } .br-session .is-style-eyebrow { font-size: 13px; } .br-session__name h3 { margin-top: 14px; } .br-session__name .is-style-meta { margin-top: 8px; } .br-session__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .br-session__aside > p:first-child { line-height: 1.5; } .br-session__aside .wp-block-buttons { margin-top: 4px; } /* Card grids. */ .br-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 56px; } .br-cards > * { margin: 0; } .is-style-card > * { margin: 0; } .is-style-card > h3 { margin-top: 18px; } .is-style-card > h3 + p { margin-top: 12px; } .is-style-card > .wp-block-buttons { margin-top: auto; padding-top: 20px; } /* Two-column splits: heading column + content column. */ .br-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: start; } .br-split > *, .br-split__head > * { margin: 0; } .br-split__head > h2 { max-width: 12ch; } .br-split__head > h2 + p { margin-top: 24px; max-width: calc(40 * var(--sans-ch)); } .br-split__head > .wp-block-image { margin-top: 32px; } .br-split--faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 56px 80px; } .br-split--faq .br-split__head > h2 + p { max-width: calc(32 * var(--sans-ch)); } /* FAQ splits (Classes, Space Hire, homepage). Source order is heading, intro, questions, then the "See all questions" / conditions link, as on the mobile artboards. In two columns the link sits under the intro, left of the questions, as on desktop. */ .br-split:is(.br-split--faq, .br-split--home-faq) { row-gap: 0; } .br-split:is(.br-split--faq, .br-split--home-faq) > .br-accordion { margin-top: 56px; } .br-split:is(.br-split--faq, .br-split--home-faq) > .br-split__link { margin-top: 24px; } @media (min-width: 782px) { /* The homepage split is two columns (.75fr / 1.25fr) from here up. */ .br-split--home-faq { grid-template-rows: auto 1fr; } .br-split.br-split--home-faq > .br-accordion { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } .br-split.br-split--home-faq > .br-split__link { grid-column: 1; grid-row: 2; } } @media (min-width: 900px) { /* Two equal columns from 840px of content, as .br-split--faq's auto-fit. */ .br-split--faq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; } .br-split.br-split--faq > .br-accordion { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } .br-split.br-split--faq > .br-split__link { grid-column: 1; grid-row: 2; } } /* Fact grid ("Good to know"). */ .br-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px 36px; } .br-facts > * { margin: 0; } .br-facts .is-style-rule-top > * { margin: 0; } .br-facts .is-style-rule-top > h3 { font-size: 18px; } .br-facts .is-style-rule-top > h3 + p { margin-top: 10px; } @media (max-width: 781px) { .br-hero.wp-block-cover { min-height: 480px !important; padding: 56px 24px; } .br-hero .br-mark img { width: 28px; } .br-hero .br-mark { margin-bottom: 20px; } .br-hero h1 + p { margin-top: 20px; } .br-hero .wp-block-buttons { margin-top: 28px; flex-direction: column; align-items: stretch; gap: 14px; } .br-hero .wp-block-button:not(.is-style-text):not(.is-style-arrow) .wp-block-button__link { width: 100%; } .br-hero .wp-block-buttons .is-style-text { align-self: center; } /* Tablets get the mobile layout; keep full-width buttons to a comfortable width. Centred groups stay centred; left-aligned ones stay on the text's left edge. */ .br-hero .wp-block-buttons, .is-style-cta-band .wp-block-buttons, .br-notfound__card > .wp-block-buttons, .wp-block-buttons.br-home-classes__cta { max-width: 480px; margin-inline: auto; } .br-start__cta, .br-visit-hero__text .wp-block-buttons, .br-utility__text .wp-block-buttons { max-width: 480px; } .br-hero .is-style-meta { margin-top: 10px; font-size: 14px; } .br-start-section { padding-block: 56px 68px; } .br-start__photo { min-height: 0; height: 220px; } .br-start__body { padding: 28px 24px; } .br-start__body > h2 { margin-top: 12px; } .br-start__meta { margin-top: 8px !important; font-size: 14px; } .br-start__meta + p { margin-top: 16px; } .br-start__body .br-chips { margin-top: 18px; gap: 8px; } .br-start__cta { padding-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; } /* "Book First Breath" runs the full width of the card, with the offer line centred under it. */ .br-start__cta .wp-block-buttons { flex-direction: column; align-items: stretch; } .br-start__cta .wp-block-button__link { width: 100%; } .br-start__offer { text-align: center; font-size: 14px; } .br-sechead { display: block; padding-bottom: 0; border-bottom: 0; } .br-sechead > p { margin-top: 14px; } /* The rule above the list sits on its first row, so it arrives with that row (scroll reveal). */ .br-sechead + .br-sessions { margin-top: 28px; } .br-sechead + .br-sessions > :first-child { border-top: 1px solid var(--stone-300); } .br-session { display: block; padding: 28px 0; } .br-session > p { margin-top: 14px; font-size: 16px; } .br-session__name h3 { margin-top: 12px; } .br-session__name .is-style-meta { margin-top: 6px; } .br-session__aside { margin-top: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 12px; } .br-session__aside > p:first-child { flex-basis: 100%; font-size: 15px; } /* "Book … →" always sits at the right edge, as in the artboard: on the chip's row when it fits, else under it. */ .br-session__aside .wp-block-buttons { margin-top: 0; margin-left: auto; } .br-note { margin-top: 22px; font-size: 14px; } h2 + .br-intro { margin-top: 14px; } .br-cards { margin-top: 28px; gap: 16px; } .is-style-card > h3 { margin-top: 12px; } .is-style-card > h3 + p { margin-top: 8px; } .br-split { gap: 28px; } .br-split__head > h2 + p { margin-top: 14px; } .br-split:is(.br-split--faq, .br-split--home-faq) > .br-accordion { margin-top: 26px; } .br-split:is(.br-split--faq, .br-split--home-faq) > .br-split__link { margin-top: 22px; font-size: 16px; } .br-split__head > .wp-block-image { margin-top: 22px; } .br-facts { gap: 22px; } .br-facts .is-style-rule-top { padding-top: 16px; } .br-facts .is-style-rule-top > h3 { font-size: 17px; } .br-facts .is-style-rule-top > h3 + p { margin-top: 6px; } .wp-block-details summary { min-height: 64px; padding: 20px 4px; font-size: 16px; gap: 20px; } .wp-block-details > :not(summary) { padding-inline: 4px; } :is(.is-style-strip, .is-style-strip-sand) .br-strip__inner { display: block; } :is(.is-style-strip, .is-style-strip-sand) .wp-block-buttons { margin-top: 20px; } :is(.is-style-strip, .is-style-strip-sand) .wp-block-button__link { padding: 0 24px; } .is-style-cta-band h2 + p { margin-top: 14px; } .is-style-cta-band::before { -webkit-mask-image: radial-gradient(ellipse at 50% 30%, transparent 0 150px, #000 330px); mask-image: radial-gradient(ellipse at 50% 30%, transparent 0 150px, #000 330px); } .is-style-cta-band .wp-block-buttons { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; } .is-style-cta-band .wp-block-button__link { width: 100%; } .is-style-cta-band .br-embed, .is-style-cta-band .br-momence { margin-top: 28px; } } @media (max-width: 1079px) { .is-style-pattern-edge::before { left: 0; width: auto; bottom: auto; height: 120px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); } } /* ---------- Header ---------- */ .br-header { background: var(--sand); border-bottom: 1px solid var(--rule); position: relative; z-index: 50; } .br-header__bar { min-height: 84px; gap: 16px 48px; } .br-wordmark { flex: none; margin: 0; line-height: 0; } .br-wordmark img { display: block; width: auto !important; height: 16px; } /* The home link keeps the logo where it is but gets a 44px tall touch target (padding, cancelled by the margin). */ .br-wordmark a { display: inline-flex; padding-block: 15px; margin-block: -15px; } .br-nav { flex: 1; } .br-header .br-nav, .br-header .br-nav .wp-block-navigation__container { gap: 0 30px; justify-content: flex-end; } .br-nav .wp-block-navigation-item__content { font: 500 15px/1 var(--font-sans); color: var(--ink); text-decoration: none; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; } .br-nav .wp-block-navigation-item__content:hover, .br-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--rust); } .br-nav .wp-block-navigation-item__content[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 8px; } .br-header__book { flex: none; } .br-header__book .wp-block-button__link { min-height: 48px; padding: 0 26px; } .br-header__book .wp-block-button__link[aria-current="page"] { background: var(--rust-deep); border-color: var(--rust-deep); } .br-header .br-burger { display: none; } /* Icon buttons: the label stays in the DOM for screen readers; the glyph is drawn with pseudo-elements. */ .br-burger .wp-block-button__link, .br-menu__close .wp-block-button__link { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; overflow: hidden; font-size: 0; line-height: 0; color: var(--ink); background: transparent; border: 0; border-radius: 0; cursor: pointer; } .br-burger .wp-block-button__link:hover, .br-menu__close .wp-block-button__link:hover { background: transparent; } .br-burger .wp-block-button__link::before, .br-burger .wp-block-button__link::after { content: ""; position: absolute; right: 0; width: 24px; height: 1.5px; background: var(--rust); } .br-burger .wp-block-button__link::before { top: 18px; } .br-burger .wp-block-button__link::after { top: 25.5px; } @media (max-width: 1079px) { .br-header__bar { min-height: clamp(64px, calc(64px + 20 * var(--fluid)), 84px); } .br-header .br-nav, .br-header .br-header__book { display: none; } .br-header .br-burger { display: flex; } } @media (max-width: 781px) { .br-wordmark img { height: 14px; } } /* ---------- Mobile menu (full screen dialog, opened by assets/js/site.js) ---------- */ .br-menu { display: none; } /* margin: 0 — as a child of the header's constrained group it would otherwise inherit the 24px block gap. */ .br-menu.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1000; margin: 0; overflow-y: auto; background: var(--sand); padding: 0 var(--gutter) 28px; } html.br-menu-open { overflow: hidden; } /* At burger widths the scrollbar's room is kept even while the menu locks scrolling, so the page under the fading-in menu doesn't move (only where scrollbars take room, e.g. Windows). */ @media (max-width: 1079px) { html { scrollbar-gutter: stable; } } .br-menu > * { margin-block: 0; } /* Same height as the header bar plus its hairline, so the logo and the close button sit exactly where the logo and burger were. */ .br-menu__top { min-height: calc(clamp(64px, calc(64px + 20 * var(--fluid)), 84px) + 1px); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 1px solid var(--rule); } .br-menu__close .wp-block-button__link::before, .br-menu__close .wp-block-button__link::after { content: ""; position: absolute; top: 21px; right: 6px; width: 16px; height: 2px; background: var(--rust); transform: rotate(45deg); } .br-menu__close .wp-block-button__link::after { transform: rotate(-45deg); } .br-menu__book { margin-inline: calc(var(--gutter) * -1); padding: 20px var(--gutter); border-bottom: 1px solid var(--rule); } .br-menu__nav .wp-block-navigation__container { gap: 0; width: 100%; } .br-menu__nav, .br-menu__nav .wp-block-navigation-item { width: 100%; } .br-menu__nav .wp-block-navigation-item:not(:last-child) { border-bottom: 1px solid var(--rule); } .br-menu__nav .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 56px; padding: 14px 0; font: 500 20px/1.2 var(--font-sans); color: var(--ink); text-decoration: none; } .br-menu__nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--rust); } .br-menu__foot { margin-top: auto; padding-top: 48px; display: flex; flex-direction: column; gap: 12px; font: 400 16px/1.6 var(--font-sans); } .br-menu__foot > * { margin: 0; } .br-menu__foot .br-mark img { width: 26px; margin-bottom: 8px; } .br-menu__foot a { color: var(--ink); text-decoration: none; } /* Email and Instagram: 44px touch targets on a 44px pitch (the design's 12px gap is folded into them). */ .br-menu__foot > p > a { display: inline-flex; align-items: center; min-height: 44px; } .br-menu__foot > p:has(> a) { margin-block: -6px; } /* Site Editor only: the menu is shown under the header bar, phone width, so its content (Book button, address, email, Instagram) can be edited. The front end never has .editor-styles-wrapper. */ .editor-styles-wrapper .br-menu { --gutter: 20px; display: flex; flex-direction: column; position: relative; max-width: 390px; margin-block: 24px; padding: 0 var(--gutter) 28px; background: var(--sand); outline: 1px dashed var(--stone-300); outline-offset: 0; } .editor-styles-wrapper .br-menu__title.screen-reader-text { position: static; width: auto; height: auto; margin: 0; padding: 12px 0; overflow: visible; clip: auto; clip-path: none; font: 600 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); } .editor-styles-wrapper .br-menu > *, .editor-styles-wrapper .br-menu__foot > * { margin-block: 0; } .editor-styles-wrapper .br-menu > .br-menu__foot { margin-top: 0; } /* ---------- Footer ---------- */ .br-footer { background: var(--stone-100); border-top: 1px solid var(--rule); padding-block: 80px 40px; font: 400 16px/1.6 var(--font-sans); } /* A strip that ends the page shares its bottom hairline with the footer's top one. */ .wp-block-post-content > :is(.is-style-strip, .is-style-strip-sand):last-child { border-bottom: 0; } .br-footer > * { margin-block: 0; } .br-footer__top { gap: 20px 32px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--rule); } .br-wordmark--footer img { height: 19px; } .br-footer__strap { font-size: 15px; line-height: 1.5; color: var(--ink-muted); } .br-footer__cols { margin-top: 56px !important; display: flex; flex-wrap: wrap; gap: 48px 56px; } .br-footer__cols > * { margin: 0 !important; } .br-footer__col { flex: 1 1 150px; display: flex; flex-direction: column; gap: 12px; } .br-footer__col > * { margin: 0 !important; } .br-footer__col > h2 { margin-bottom: 6px !important; } .br-footer__contact { flex: 1.75 1 320px; gap: 10px; } .br-footer__contact > h2 { margin-bottom: 8px !important; } .br-footer__nav .wp-block-navigation__container { gap: 12px; } .br-footer__nav .wp-block-navigation-item__content { font: 400 16px/1.4 var(--font-sans); color: var(--ink); text-decoration: none; } .br-footer__nav .wp-block-navigation-item__content:hover, .br-footer a:hover, .br-footer__nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--rust); } .br-footer__contact a { color: var(--ink); text-decoration: none; } .br-footer__directions a { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 3px; } /* Phones and other touch screens: menu and contact links become 44px touch targets on a 44px pitch. The gaps are folded into the targets, so each list grows by only a few px per link. */ @media (max-width: 781px), (pointer: coarse) { .br-footer__nav .wp-block-navigation__container { gap: 0; } .br-footer__nav .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 44px; } .br-footer__col > .br-footer__nav { margin-block: -11px !important; } .br-footer__contact > p > a { display: inline-flex; align-items: center; min-height: 44px; } .br-footer__contact > p:has(> a) { margin-block: -6px !important; } } .br-newsletter { margin-top: 10px !important; display: flex; flex-direction: column; gap: 10px; } .br-newsletter > * { margin: 0; } /* "See our Privacy Policy." sits in the note's sentence, so it keeps an underline (WCAG 1.4.1) in the note's colour. */ .br-newsletter .br-small a { color: inherit; text-decoration-line: underline; } .br-footer__legal { margin-top: 64px !important; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; } .br-footer__legal > * { margin: 0; } .br-footer__links { font: 400 14px/1.8 var(--font-sans); color: var(--ink-muted); } .br-footer__links a { color: inherit; text-decoration: none; } .br-footer__links a[aria-current="page"] { color: var(--rust); } .br-in-space-hire .br-nav .wp-block-navigation-item__content[href$="/space-hire/"] { color: var(--rust); } .br-footer__ack { font: 400 14px/1.7 var(--font-sans); color: var(--ink-muted); max-width: calc(80 * var(--sans-ch)); } /* The website credit: the quietest line in the footer, underlined so the link reads as one without colour. */ .br-footer__credit { font: 400 14px/1.7 var(--font-sans); color: var(--ink-muted); } .br-footer__credit a { color: inherit; text-decoration-line: underline; } /* Template "Page, footer without the logo row" (Visit & Contact): the footer starts at its columns. */ .br-footer-no-logo .br-footer__top { display: none; } .br-footer-no-logo .br-footer__cols { margin-top: 0 !important; } .br-footer--compact { padding-block: 40px; border-top: 1px solid var(--rule); } .br-footer--compact .br-footer__top { padding: 0; border: 0; gap: 16px 32px; } .br-footer--compact .br-footer__links a { text-decoration: underline; } @media (max-width: 781px) { .br-footer { padding-block: 56px 32px; } .br-footer__top { padding-bottom: 0; border-bottom: 0; } .br-footer:not(.br-footer--compact) .br-footer__strap { display: none; } .br-wordmark--footer img { height: 15px; } .br-footer__cols { margin-top: 40px !important; flex-direction: column; gap: 34px; } .br-footer__col { gap: 14px; flex: none; } .br-footer__contact { gap: 12px; } .br-footer__legal { margin-top: 36px !important; padding-top: 22px; gap: 10px; } .br-footer--compact { padding-block: 32px; } } /* ---------- Sticky mobile bar: "Book a class" + "Enquire about hire" ---------- */ .br-stickybar { display: none; } @media (max-width: 781px) { /* Room for the bar, only on pages that have it (not the utility pages or the 404). */ body:has(.br-stickybar) { padding-bottom: 77px; } /* Tabbing scrolls the focused link clear of the bar (77px) and its focus ring. */ html:has(.br-stickybar) { scroll-padding-bottom: 93px; } .br-stickybar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--sand); border-top: 1px solid var(--rule); padding: 12px 16px; } /* Homepage: hidden while the hero is in view (site.js adds .is-visible once it has scrolled past). br-js is set in , so the bar never shows over the hero first; with no JS, or no hero, it is always shown. */ html.br-js body.home:has(.br-hero) .br-stickybar:not(.is-visible) { opacity: 0; visibility: hidden; } .br-stickybar__buttons { flex-wrap: nowrap; gap: 16px; align-items: center; } .br-stickybar__buttons > .wp-block-button:not(.is-style-text) { flex: 1; } .br-stickybar__buttons > .wp-block-button:not(.is-style-text) .wp-block-button__link { width: 100%; } .br-stickybar .is-style-text .wp-block-button__link { max-width: 120px; font-size: 14px; line-height: 1.3; text-align: left; text-underline-offset: 4px; } html.br-menu-open .br-stickybar { display: none; } /* Facilitator pages: the hire action leads. functions.php prints it first there, so Tab order matches. */ .br-facilitator .br-stickybar__buttons > .wp-block-button:not(.is-style-text) { flex: none; } .br-facilitator .br-stickybar__buttons > .wp-block-button:not(.is-style-text) .wp-block-button__link { width: auto; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 4px; } .br-facilitator .br-stickybar .is-style-text { flex: 1; } .br-facilitator .br-stickybar .is-style-text .wp-block-button__link { width: 100%; max-width: none; min-height: 52px; justify-content: center; border-radius: 999px; background: var(--rust); color: var(--sand); font: 600 15px/1 var(--font-sans); letter-spacing: .03em; text-align: center; text-decoration: none; } } /* Site Editor only: the bar sits in flow after the footer, phone width, at every preview width, so its buttons can be edited. */ .editor-styles-wrapper .br-stickybar { display: block; position: static; max-width: 390px; margin: 24px auto; padding: 12px 16px; background: var(--sand); outline: 1px dashed var(--stone-300); opacity: 1; visibility: visible; transform: none; } .editor-styles-wrapper .br-stickybar__buttons { flex-wrap: nowrap; gap: 16px; align-items: center; } /* ---------- Forms (Fluent Forms, restyled to the design) ---------- */ .fluentform .ff-el-group { margin-bottom: 0; } .fluentform .ff-el-input--label { display: block; margin-bottom: 8px; font: 500 14px/1.4 var(--font-sans); } .fluentform .ff-el-input--label label { font: 500 14px/1.4 var(--font-sans); color: var(--ink); } .fluentform { --fluentform-input-select-height: 48px; } .fluentform .ff-el-form-control { height: 48px; padding: 0 18px; border: 1px solid var(--stone-300); border-radius: 999px; background: var(--sand); font: 400 15px/1 var(--font-sans); color: var(--ink); box-shadow: none; } .fluentform .ff-el-form-control::placeholder { color: rgba(44, 31, 24, .6); } /* Fluent's own focus rule turns the field white and removes the outline. */ .fluentform .ff-el-form-control:focus { border-color: var(--rust); background-color: var(--sand); color: var(--ink); outline: 2px solid var(--rust); outline-offset: 3px; box-shadow: none; } .fluentform textarea.ff-el-form-control { height: auto; min-height: 120px; padding: 14px 18px; border-radius: 20px; line-height: 1.5; resize: vertical; } /* Single-choice Dropdown ("What’s it about?" on Visit): the artboard's pill with a clay chevron. */ .fluentform select.ff-el-form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--clay) 50%), linear-gradient(135deg, var(--clay) 50%, transparent 50%); background-position: calc(100% - 24px) 21px, calc(100% - 19px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; cursor: pointer; } .fluentform .ff-btn-submit { height: 52px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--rust) !important; color: var(--sand) !important; font: 600 15px/1 var(--font-sans); letter-spacing: .03em; cursor: pointer; box-shadow: none; opacity: 1; } .fluentform .ff-btn-submit:hover { background: var(--rust-deep) !important; } /* Fluent's `.ff-default .ff_btn_style:focus, :hover { opacity: .8; outline: 0 }` hides keyboard focus; these out-rank it and restore the design's ring (2px rust, offset 3px; sand on rust grounds). */ .fluentform .ff_btn_style.ff-btn-submit:is(:hover, :focus) { opacity: 1; } .fluentform .ff_btn_style.ff-btn-submit:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; } .is-style-cta-band .fluentform :is(.ff_btn_style.ff-btn-submit, .ff-el-form-control):is(:focus-visible, :focus) { outline-color: var(--sand); } .fluentform .ff-el-tc label, .fluentform .ff_t_c { font: 400 15px/1.5 var(--font-sans); color: var(--ink); } .fluentform input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--rust); } /* Terms checkbox: Fluent lays it out as a table; the artboard is a flex row, box nudged 2px down, 12px gap. Fluent's own rules are `.fluentform .ff-el-tc label.ff_tc_label …` (one with !important), hence the extra .ff-el-group. */ .fluentform .ff-el-group .ff-el-tc { display: block; margin: 0; } .fluentform .ff-el-group .ff-el-tc label.ff_tc_label { display: flex; align-items: flex-start; gap: 12px; margin: 0; } .fluentform .ff-el-group .ff-el-tc label.ff_tc_label > span { display: block; flex: none; width: 20px; padding: 0 !important; } .fluentform .ff-el-group .ff-el-tc label.ff_tc_label > div { display: block; padding: 0; } .fluentform .ff-el-group .ff-el-tc .ff-el-form-check-input { display: block; top: 0; margin: 2px 0 0; } .fluentform .error, .fluentform .ff-el-is-error .text-danger { color: var(--rust-deep); font: 500 14px/1.4 var(--font-sans); margin-top: 6px; } .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--rust-deep); } .ff-message-success { border: 1px solid var(--stone-300); background: var(--sand); padding: 20px 24px; font: 400 16px/1.6 var(--font-sans); color: var(--ink); box-shadow: none; } .br-ff-note { font: 400 14px/1.5 var(--font-sans); color: var(--ink-muted); } .br-ff-note a { color: inherit; } /* Newsletter (footer): label, then email + button on one row. A grid (the email group's boxes take part via display: contents) keeps the button level with the input while an error line shows under it, so the button doesn't move when the error clears. */ .br-newsletter .fluentform fieldset { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; } .br-newsletter .fluentform .ff-el-group:not(.ff_submit_btn_wrapper, .ff-hpsf-container) { display: contents; } .br-newsletter .fluentform .ff-el-input--label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px; } .br-newsletter .fluentform .ff-el-input--content { grid-column: 1; grid-row: 2; min-width: 0; } .br-newsletter .fluentform .ff-el-form-control { padding: 0 16px; } .br-newsletter .fluentform .ff_submit_btn_wrapper { grid-column: 2; grid-row: 2; align-self: start; margin: 0; } .br-newsletter .fluentform .ff-btn-submit { height: 48px; padding: 0 22px; font-size: 14px; } @media (max-width: 781px) { .br-newsletter .fluentform fieldset { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } .br-newsletter .fluentform .ff-el-input--label { margin-bottom: 0; } .br-newsletter .fluentform .ff_submit_btn_wrapper { grid-column: 1; grid-row: 3; } .br-newsletter .fluentform .ff-btn-submit { width: 100%; } } /* Two-column enquiry and contact forms inside a stone panel (Space Hire form 4, Visit form 5). Fields pair up from 220px wide, like the artboards' auto-fit grid. The submit button is a Custom Submit Button field placed before the "Handled under our Privacy Policy" note (custom HTML field, class br-ff-after-submit), so the note follows it in the source and shares its row. */ .br-form .fluentform fieldset { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .br-form .fluentform .ff-el-group { flex: 1 1 220px; min-width: 0; } .br-form .fluentform .ff-el-group.br-ff-full, .br-form .fluentform .ff-el-group:has(.ff-el-tc) { flex-basis: 100%; } .br-form .fluentform .ff-el-group.ff_submit_btn_wrapper { flex: none; margin-top: 4px; } .br-form .fluentform .ff-el-group.br-ff-after-submit { flex: 1 1 200px; align-self: center; margin: 4px 0 0 4px; } @media (max-width: 781px) { .br-form .fluentform fieldset { gap: 16px; } .br-form .fluentform .ff-el-group, .br-form .fluentform .ff-el-group.ff_submit_btn_wrapper, .br-form .fluentform .ff-el-group.br-ff-after-submit { flex: 0 0 100%; margin: 0; } .br-form .fluentform .ff-btn-submit { width: 100%; } } /* ====================================================================== * Page sections. One block per page; each is owned by one builder so edits do not collide. * ====================================================================== */ /* ==== Page: The Studio ==== */ /* Hero: lead is a touch narrower than the shared hero. */ .br-studio-hero h1 + p { max-width: calc(46 * var(--sans-ch)); } /* "Our space": Sailors statement left, body + chips right. */ .br-studio-statement { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 80px; } .br-studio-statement > *, .br-studio-statement__body > * { margin: 0; } .br-studio-statement > .is-style-spoken { flex: 1 1 420px; max-width: 16ch; line-height: 1.25; } .br-studio-statement__body { flex: 1.2 1 480px; } .br-studio-statement__body > p { max-width: calc(52 * var(--sans-ch)); } .br-studio-statement__body > p + p { margin-top: 18px; } .br-studio-statement__body > .br-chips { margin-top: 30px; } /* "Inside the room": photo grid, first photo spans 2 × 2. */ .br-studio-room .br-sechead > * { margin: 0; } .br-studio-room .br-sechead > p { flex-basis: 400px; } .br-studio-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: 300px; gap: 16px; margin-top: 36px; } .br-studio-photos > * { margin: 0; min-height: 0; overflow: hidden; } .br-studio-photos > :first-child { grid-column: span 2; grid-row: span 2; } .br-studio-photos img { width: 100%; height: 100%; object-fit: cover; } /* "What's waiting for you": wider fact grid with step-size titles. */ .br-facts--studio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 56px; } .br-facts--studio .is-style-rule-top > h3 { font-size: var(--wp--preset--font-size--step-title); } /* "Meet Trav": framed portrait + story + founder quote. */ .br-studio-trav { display: grid; grid-template-columns: clamp(280px, 36vw, 460px) minmax(0, 1fr); gap: 56px clamp(40px, 5.6vw, 80px); align-items: start; } .br-studio-trav > *, .br-studio-trav__body > * { margin: 0; } .br-studio-trav__photo { height: 580px; overflow: hidden; } .br-studio-trav__photo img { height: 100%; object-position: center top; } .br-studio-trav__body > h2 { margin-top: 18px; } .br-studio-trav__body > p { max-width: 52ch; } .br-studio-trav__body > h2 + p { margin-top: 28px; } .br-studio-trav__body > p + p { margin-top: 18px; } .br-studio-trav__body > .wp-block-quote { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--stone-300); } .br-studio-trav .wp-block-quote.is-style-spoken > p { max-width: 28ch; font-size: clamp(26px, calc(26px + 6 * var(--fluid)), 32px); line-height: 1.3; } .br-studio-trav .wp-block-quote.is-style-spoken cite { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 400; } .br-studio-trav .wp-block-quote cite::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--clay); } .br-studio-trav .wp-block-quote cite strong { color: var(--ink); } /* "Kind words": lead quote, testimonial grid, disclaimer. The pattern stays right of the 1040px quote grid. */ .br-studio-kind { --br-pattern-text: 1040px; } .br-studio-kind .wp-block-quote.is-style-spoken { margin-top: 36px; } .br-studio-kind .wp-block-quote.is-style-spoken > p { max-width: 36ch; } .br-studio-kind .br-studio-quotes { max-width: 1040px; margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 44px 56px; } .br-studio-quotes > * { margin: 0; } .br-studio-kind .br-studio-kind__note { max-width: calc(70 * var(--sans-ch)); margin-top: 48px; font: 400 14px/1.6 var(--font-sans); color: var(--ink-muted); } /* CTA band: two buttons side by side; the crossover strip follows with no rule on top. */ .br-studio-cta .wp-block-buttons { margin-top: 34px; gap: 16px; } .br-studio-cta + :is(.is-style-strip, .is-style-strip-sand) { border-top: 0; } @media (max-width: 1157px) { .br-studio-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 781px) { .br-hero.br-studio-hero.wp-block-cover { min-height: 460px !important; } .br-studio-hero .is-style-meta { display: none; } .br-studio-statement { gap: 22px; } .br-studio-statement > .is-style-spoken { max-width: none; } .br-studio-statement__body > p + p { margin-top: 14px; } .br-studio-statement__body > .br-chips { margin-top: 22px; gap: 8px; } .br-studio-statement__body .is-style-chip { padding-inline: 13px; } .br-studio-room .br-sechead > p { margin-top: 14px; } .br-studio-photos { grid-auto-rows: 160px; gap: 12px; margin-top: 24px; } /* Studio-Mobile: arches 2 × 2, two squares, then the doorway across both columns. The linen-ceiling photo carries .br-hide-mobile. The last visible photo spans both columns only when it would otherwise sit alone, so showing the ceiling photo again (or adding a photo) never leaves a gap. */ .br-studio-photos > :nth-child(even of :not(.br-hide-mobile)):nth-last-child(1 of :not(.br-hide-mobile)) { grid-column: span 2; } .br-studio-photos > :nth-child(even of :not(.br-hide-mobile)):nth-last-child(1 of :not(.br-hide-mobile)) img { object-position: center 70%; } .br-facts--studio { margin-top: 28px; } .br-studio-trav { display: block; } .br-studio-trav__photo { height: auto; max-width: 460px; aspect-ratio: 7 / 8; } .br-studio-trav > .br-studio-trav__body { margin-top: 28px; } .br-studio-trav__body > h2 { margin-top: 14px; } .br-studio-trav__body > h2 + p { margin-top: 18px; } .br-studio-trav__body > p + p { margin-top: 14px; } .br-studio-trav__body > .wp-block-quote { margin-top: 28px; padding-top: 24px; } .br-studio-trav .wp-block-quote.is-style-spoken cite { margin-top: 16px; } .br-studio-kind .wp-block-quote.is-style-spoken { margin-top: 24px; } .br-studio-kind .wp-block-quote.is-style-spoken cite { margin-top: 16px; } .br-studio-kind .br-studio-quotes { margin-top: 34px; padding-top: 26px; gap: 26px; } .br-studio-kind .is-style-testimonial cite { margin-top: 10px; } .br-studio-kind .br-studio-kind__note { margin-top: 30px; } .br-studio-cta::before { -webkit-mask-image: radial-gradient(ellipse at 50% 30%, transparent 0 150px, #000 330px); mask-image: radial-gradient(ellipse at 50% 30%, transparent 0 150px, #000 330px); } .br-studio-cta .wp-block-buttons { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; } .br-studio-cta .wp-block-button__link { width: 100%; } } /* ==== end The Studio ==== */ /* ==== Page: Space Hire ==== */ /* Every rule is scoped to a .br-hire-* section class so nothing leaks into other pages. */ /* Hero: eyebrow above the H1, narrower lead. */ .br-hire-hero h1 + p { max-width: calc(46 * var(--sans-ch)); } /* About the room: framed photo (560px at 1440, 260px at 390) beside the copy and chips. */ .br-hire-room .br-room { display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: center; } .br-hire-room .br-room > * { margin: 0; min-width: 0; } .br-hire-room .br-room__photo { flex: 1.1 1 480px; height: clamp(260px, calc(260px + 300 * var(--fluid)), 560px); } .br-hire-room .br-room__photo img { height: 100%; } .br-hire-room .br-room__body { flex: .9 1 420px; } .br-hire-room .br-room__body > * { margin: 0; } .br-hire-room .br-room__body > h2 { max-width: 14ch; } .br-hire-room .br-room__body > h2 + p { margin-top: 26px; max-width: calc(46 * var(--sans-ch)); } .br-hire-room .br-room__body > p + p { margin-top: 16px; max-width: calc(46 * var(--sans-ch)); } .br-hire-room .br-room__body > .br-chips { margin-top: 24px; } /* What you get: numbered two/three-column list under the section header. */ .br-hire-get .br-sechead > * { margin: 0; } .br-hire-get .br-sechead > p { flex-basis: 400px; } .br-hire-get .br-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 48px; margin-top: 0; } .br-hire-get .br-get > * { margin: 0; } .br-hire-get .br-get__item { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .br-hire-get .br-get__item > *, .br-hire-get .br-get__body > * { margin: 0; } .br-hire-get .br-get__num { flex: none; width: 32px; font: 400 24px/1 var(--font-accent); color: var(--rust); } .br-hire-get .br-get__title { font: 600 17px/1.4 var(--font-sans); } .br-hire-get .br-get__body > .br-get__desc { margin-top: 4px; font: 400 15px/1.55 var(--font-sans); color: var(--ink-muted); } /* Rates & capacity: rates panel + capacity card + "why 12" card. */ .br-hire-rates h2 + .br-intro { max-width: calc(56 * var(--sans-ch)); } .br-hire-rates .br-rates { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 56px; } .br-hire-rates .br-rates > * { margin: 0; min-width: 0; } .br-hire-rates .br-rates__panel { flex: 1.3 1 520px; } .br-hire-rates .br-rates__panel > * { margin: 0; } .br-hire-rates .br-rates__panel > .br-rates__list { margin-top: 24px; border-top: 1px solid var(--stone-300); } .br-hire-rates .br-rates__list > * { margin: 0; } .br-hire-rates .br-rate { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); } .br-hire-rates .br-rate > *, .br-hire-rates .br-rate__name > * { margin: 0; } .br-hire-rates .br-rate__title { font: 600 17px/1.4 var(--font-sans); } .br-hire-rates .br-rate__name > .br-rate__note { margin-top: 2px; font: 400 14px/1.5 var(--font-sans); color: var(--ink-muted); } .br-hire-rates .br-rate__price { flex: none; font: 400 32px/1 var(--font-accent); color: var(--rust); white-space: nowrap; } .br-hire-rates .br-rate__unit { font: 500 14px/1 var(--font-sans); color: var(--ink-muted); } .br-hire-rates :is(.br-rate__price, .br-capacity__fig) .br-ph { font-weight: 400; } .br-hire-rates .br-rates__panel > .br-rates__foot { margin-top: 20px; font: 400 14px/1.6 var(--font-sans); color: var(--ink-muted); } .br-hire-rates .br-rates__aside { flex: 1 1 360px; display: flex; flex-direction: column; gap: 24px; } .br-hire-rates .br-rates__aside > * { margin: 0; } .br-hire-rates .br-capacity { container-type: inline-size; padding: clamp(24px, calc(24px + 16 * var(--fluid)), 40px); } .br-hire-rates .br-capacity > * { margin: 0; } .br-hire-rates .br-capacity > .br-capacity__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } .br-hire-rates .br-capacity__grid > *, .br-hire-rates .br-capacity__item > * { margin: 0; } .br-hire-rates .br-capacity__fig { font: 400 56px/1 var(--font-accent); color: var(--rust); white-space: nowrap; } /* "[10–15]" is about 3.1em wide and stays on one line. Where the two columns are too narrow for it at 56px (beside the rates on ~970-1170px screens) it takes the phone size, 44px, and on phones narrower than the 390 artboard it shrinks with the card. */ @container (width < 372px) { .br-hire-rates .br-capacity__fig { font-size: min(44px, (100cqi - 24px) / 6.3); } } .br-hire-rates .br-capacity__item > p + p { margin-top: 8px; font: 500 15px/1.4 var(--font-sans); } .br-hire-rates .br-why > h3 { margin-top: 0; font-size: 17px; line-height: 1.4; } .br-hire-rates .br-why > h3 + p { margin-top: 8px; font-size: 15px; line-height: 1.6; } /* How it works: six steps; numerals rust (not clay), softened. The artboard's .55 opacity is 2.78:1 on stone-100 (fails AA large text); .62 is the lightest that clears 3:1. */ .br-hire-how .br-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 44px 36px; margin-top: 56px; } .br-hire-how .br-steps > * { margin: 0; } .br-hire-how .br-steps .is-style-rule-top { padding-top: 24px; } .br-hire-how .br-steps .is-style-rule-top > * { margin: 0; } .br-hire-how .br-steps .is-style-numeral { font-size: clamp(32px, calc(32px + 12 * var(--fluid)), 44px); color: var(--rust); opacity: .62; } .br-hire-how .br-steps .is-style-rule-top > h3 { margin-top: 16px; } .br-hire-how .br-steps .is-style-rule-top > h3 + p { margin-top: 12px; } /* Check availability & enquire. Source order (= reading and Tab order) is heading, intro, calendar, form, then the "Questions first?" line, as on SpaceHire-Mobile. Side by side, that line sits under the calendar, left of the form, as on SpaceHire-Desktop. */ .br-hire-enquire .br-enquire { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } .br-hire-enquire .br-enquire > * { margin: 0; min-width: 0; } .br-hire-enquire .br-enquire__intro > * { margin: 0; } .br-hire-enquire .br-enquire__intro > h2 { max-width: 14ch; } .br-hire-enquire .br-enquire__intro > h2 + p { margin-top: 24px; max-width: calc(44 * var(--sans-ch)); } .br-hire-enquire .br-enquire__intro > .br-embed { margin-top: 32px; } .br-hire-enquire .br-enquire > .br-hire-form { margin-top: 56px; } .br-hire-enquire .br-enquire > .br-enquire__more { margin-top: 24px; } @media (min-width: 1045px) { /* The artboard's flex 1 1 420px / 1 1 480px with an 80px gap (side by side from 980px of content). */ .br-hire-enquire .br-enquire { grid-template-columns: calc(420px + (100% - 980px) / 2) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 80px; } .br-hire-enquire .br-enquire > .br-hire-form { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } .br-hire-enquire .br-enquire > .br-enquire__more { grid-column: 1; grid-row: 2; } } /* Before you book: FAQ split (placement shared with the other FAQ splits, see "Two-column splits"). */ .br-hire-faq .br-split__head > h2 + p { max-width: calc(34 * var(--sans-ch)); } @media (max-width: 781px) { .br-hire-hero.br-hero.wp-block-cover { min-height: 460px !important; } .br-hire-hero .is-style-eyebrow { font-size: 13px; } .br-hire-hero .is-style-eyebrow + h1 { margin-top: 18px; } .br-hire-hero .is-style-text > .wp-block-button__link { font-size: 15px; } .br-hire-room .br-room { gap: 28px; } .br-hire-room .br-room__body > h2 + p { margin-top: 16px; } .br-hire-room .br-room__body > .br-chips { margin-top: 22px; gap: 8px; } .br-hire-room .br-chips .is-style-chip { padding-inline: 13px; } .br-hire-get .br-sechead > p { margin-top: 14px; } .br-hire-get .br-get { margin-top: 22px; } .br-hire-get .br-get > :first-child { border-top: 1px solid var(--stone-300); } .br-hire-get .br-get__item { gap: 16px; padding: 16px 0; } .br-hire-get .br-get__num { width: 28px; font-size: 22px; } .br-hire-get .br-get__title { font-size: 16px; } .br-hire-get .br-get__body > .br-get__desc { margin-top: 2px; font-size: 14px; } .br-hire-rates .br-rates { margin-top: 26px; gap: 16px; } .br-hire-rates .br-rates .is-style-eyebrow { display: none; } .br-hire-rates .br-rates__panel > .br-rates__list { margin-top: 0; border-top: 0; } .br-hire-rates .br-rate { gap: 16px; padding: 16px 0; } .br-hire-rates .br-rate:first-child { padding-top: 0; } .br-hire-rates .br-rate:last-child { padding-bottom: 0; border-bottom: 0; } .br-hire-rates .br-rate__title { font-size: 16px; } .br-hire-rates .br-rate__name > .br-rate__note { font-size: 13px; } .br-hire-rates .br-rate__price { font-size: 28px; } .br-hire-rates .br-rates__panel > .br-rates__foot { margin-top: 18px; font-size: 13px; } .br-hire-rates .br-rates__aside { gap: 16px; } .br-hire-rates .br-capacity > .br-capacity__grid { margin-top: 0; gap: 22px 16px; } .br-hire-rates .br-capacity__fig { font-size: min(44px, (100cqi - 24px) / 6.3); } .br-hire-rates .br-capacity__item > p + p { margin-top: 6px; font-size: 14px; } .br-hire-how .br-steps { margin-top: 30px; gap: 24px; } .br-hire-how .br-steps .is-style-rule-top { padding-top: 16px; } .br-hire-how .br-steps .is-style-rule-top > h3 { margin-top: 8px; font-size: 17px; } .br-hire-how .br-steps .is-style-rule-top > h3 + p { margin-top: 6px; font-size: 15px; } .br-hire-enquire .br-enquire__intro > h2 + p { margin-top: 14px; } .br-hire-enquire .br-enquire__intro > .br-embed { margin-top: 22px; min-height: 300px; } .br-hire-enquire .br-enquire > .br-hire-form { margin-top: 24px; } .br-hire-enquire .br-enquire > .br-enquire__more { margin-top: 20px; font-size: 15px; } .br-hire-enquire .br-hire-form .fluentform textarea.ff-el-form-control { min-height: 98px; } .br-hire-enquire .br-hire-form .fluentform :is(.ff-el-tc label, .ff_t_c) { font-size: 14px; } .br-hire-faq .br-split__head > h2 + p { margin-top: 14px; } } /* ==== end Space Hire ==== */ /* ==== Page: FAQ ==== */ /* Every rule is scoped to a .br-faq* class. Mobile two-level accordion: assets/js/site.js adds .is-collapsible to each topic (and .br-faq-js to ); without JS everything stays visible. */ /* Hero: stone ground, rule beneath (not above, the header already has one); topic chips below. */ .br-faq-hero.is-style-section-stone { padding-block: 96px 72px; border-top: 0; border-bottom: 1px solid var(--rule); } .br-faq-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 64px; } .br-faq-hero__row > *, .br-faq-hero__title > * { margin: 0; } .br-faq-hero__title { flex: 1 1 520px; } .br-faq-hero__row > p { flex: 0 1 460px; line-height: 1.6; } .br-faq-hero .br-kicker .is-style-eyebrow { letter-spacing: .16em; } .br-faq-hero__title h1 { margin-top: 22px; max-width: 16ch; font-size: min(clamp(32px, calc(32px + 14 * var(--fluid)), 46px), calc(32 * var(--narrow))); line-height: 1.04; } .br-faq-hero .br-faq-topics { margin-top: 48px; } .br-faq-topics > * { margin: 0; } .br-faq-topics .wp-block-buttons { gap: 10px; } .br-faq-topics .wp-block-button__link { min-height: 44px; padding: 0 16px; background: var(--sand); border: 1px solid var(--stone-300); color: var(--ink); font: 500 14px/1 var(--font-sans); letter-spacing: 0; } .br-faq-topics .wp-block-button__link:hover { background: var(--sand); border-color: var(--rust); color: var(--rust); } /* Topics: heading column left (numeral, Sailors H2, note, extras), questions right. */ .br-faq.is-style-section { padding-block: 40px 72px; } .br-faq > * { margin-block: 0; } .br-faq-topic { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-block: 72px; } .br-faq-topic + .br-faq-topic { border-top: 1px solid var(--stone-300); } .br-faq-topic > *, .br-faq-topic__head > *, .br-faq-topic__aside > * { margin: 0; } .br-faq-topic__head > h2 { margin-top: 16px; font-size: clamp(24px, calc(24px + 12 * var(--fluid)), 36px); line-height: 1.15; } .br-faq-topic__head > h2 + p { margin-top: 12px; max-width: calc(34 * var(--sans-ch)); line-height: 1.6; } .br-faq-topic__head > .wp-block-image { margin-top: 28px; max-width: 360px; } .br-faq-topic__aside .is-style-arrow .wp-block-button__link { font-weight: 500; line-height: 1.6; } .br-faq-callout.is-style-panel { max-width: 360px; padding: 24px; } .br-faq-callout > * { margin: 0; font-size: 15px; line-height: 1.6; } .br-faq-callout > p:first-child { font-weight: 600; line-height: 1.4; color: var(--rust); } .br-faq-callout > p + p { margin-top: 8px; } .br-faq-topic__toggle { display: none; } @media (min-width: 1000px) { /* Same proportions as the artboard's flex 1 1 300px / 2 1 560px with an 80px gap. */ .br-faq-topic { grid-template-columns: calc(300px + (100% - 940px) / 3) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 80px; row-gap: 0; } .br-faq-topic > .br-accordion { grid-column: 2; grid-row: 1 / span 2; } .br-faq-topic > .br-faq-topic__aside { grid-column: 1; grid-row: 2; align-self: start; } .br-faq-topic__aside > .wp-block-buttons:first-child { margin-top: 10px; } .br-faq-topic__aside > .br-faq-callout:first-child { margin-top: 28px; } } /* Questions (core Details): the FAQ artboard's row and answer measurements. */ .br-faq .wp-block-details summary { min-height: 64px; padding: 20px 8px; } .br-faq .wp-block-details[open] > summary { padding-bottom: 10px; } .br-faq .wp-block-details > :not(summary) { max-width: calc(64 * var(--sans-ch)); line-height: 1.65; } .br-faq .wp-block-details > :last-child:not(summary) { padding-bottom: 26px; } .br-faq .wp-block-details > ul { padding-left: 28px; } .br-faq .wp-block-details li { margin-block: 4px; } .br-faq .wp-block-details li:first-child { margin-top: 0; } .br-faq .wp-block-details li:last-child { margin-bottom: 0; } /* Crisis lines box inside the "something difficult" answer. */ .br-faq .wp-block-details > .br-faq-crisis.is-style-panel { max-width: calc(64 * var(--sans-ch) - 16px); margin: 16px 8px 26px; padding: 20px 22px; border-color: var(--stone-300); } .br-faq-crisis > * { margin: 0; font-size: 15px; line-height: 1.8; } .br-faq-crisis > p:first-child { margin-bottom: 6px; font-weight: 600; line-height: 1.4; color: var(--rust); } .br-faq-crisis strong { white-space: nowrap; } /* Tap-to-call crisis lines (FAQ and waiver): on phones and touch screens each number is a 44px target. Its line opens to a 44px pitch, so two numbers on neighbouring lines never overlap. */ @media (max-width: 781px), (pointer: coarse) { :is(.br-faq-crisis, .is-style-legal-callout-sand) a[href^="tel:"] { display: inline-block; line-height: 44px; } } /* Tables in answers (core Table, e.g. "What are the five sessions?"): hairline rows, eyebrow header; stacked on phones. */ .br-faq .wp-block-details > .wp-block-table { max-width: calc(72 * var(--sans-ch)); } .br-faq .wp-block-details .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .br-faq .wp-block-details .wp-block-table thead { border: 0; } .br-faq .wp-block-details .wp-block-table :is(th, td) { padding: 12px 16px 12px 0; border: 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .br-faq .wp-block-details .wp-block-table th { padding-top: 4px; font: 600 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rust); border-bottom-color: var(--stone-300); } .br-faq .wp-block-details .wp-block-table td:is(:first-child, :nth-child(2)) { white-space: nowrap; } .br-faq .wp-block-details .wp-block-table :is(th, td):last-child { padding-right: 0; } @media (max-width: 599px) { .br-faq .wp-block-details .wp-block-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .br-faq .wp-block-details .wp-block-table :is(table, tbody, tr) { display: block; } .br-faq .wp-block-details .wp-block-table tr { padding-block: 12px; border-bottom: 1px solid var(--rule); } .br-faq .wp-block-details .wp-block-table tr:first-child { padding-top: 0; } .br-faq .wp-block-details .wp-block-table td { display: inline; padding: 0; border: 0; } .br-faq .wp-block-details .wp-block-table td:first-child { display: block; } .br-faq .wp-block-details .wp-block-table td:is(:nth-child(2), :nth-child(3)) { margin-right: 10px; color: var(--ink-muted); } .br-faq .wp-block-details .wp-block-table td:last-child { display: block; margin-top: 4px; } } /* CTA band: the artboard's pattern mask, two buttons side by side. */ .br-faq-cta::before { -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 0 240px, #000 520px); mask-image: radial-gradient(ellipse at 50% 40%, transparent 0 240px, #000 520px); } .br-faq-cta .wp-block-buttons { margin-top: 34px; gap: 16px; } @media (max-width: 781px) { .br-faq-hero.is-style-section-stone { padding-block: 56px 44px; } .br-faq-hero__row { gap: 18px; } .br-faq-hero .br-kicker { gap: 10px; } .br-faq-hero .br-kicker .br-mark img { width: 13px; } .br-faq-hero .br-kicker .is-style-eyebrow { font-size: 13px; } .br-faq-hero__title h1 { margin-top: 16px; line-height: 1.08; } .br-faq-hero .br-faq-topics { margin-top: 28px; } :is(.br-faq-js, .br-js:not(.br-ready)) .br-faq-hero .br-faq-topics { display: none; } .br-faq.is-style-section { padding-block: 28px 56px; } .br-faq-topic { row-gap: 24px; padding-block: 44px; } .br-faq .wp-block-details summary { min-height: 60px; padding: 16px 4px; font-size: 16px; gap: 18px; } .br-faq .wp-block-details[open] > summary { padding-bottom: 8px; } .br-faq .wp-block-details summary::after { width: 8px; height: 8px; } .br-faq .wp-block-details > :not(summary) { padding-inline: 4px; font-size: 15px; } .br-faq .wp-block-details > :not(summary) + :not(summary) { padding-top: 10px; } .br-faq .wp-block-details > :last-child:not(summary) { padding-bottom: 20px; } .br-faq .wp-block-details > ul { padding-left: 24px; } .br-faq .wp-block-details > .br-faq-crisis.is-style-panel { margin: 14px 4px 20px; padding: 20px; } /* Two-level accordion: each topic is a row (numeral, Sailors title, count, chevron) that opens to its questions. Until site.js has built the rows (html has br-js from the script but not yet br-ready), the topic's own numeral and heading draw the same row, with room kept for the count and chevron, and only the topics with the "starts open" style show their questions. So nothing moves when the buttons replace them. */ :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic) { display: block; padding: 0; border-top: 0; } :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic):first-child { border-top: 1px solid var(--stone-300); } .br-js:not(.br-ready) .br-faq-topic:not(.is-style-faq-topic-open) > :not(.br-faq-topic__head), .br-js:not(.br-ready) .br-faq-topic__head > :not(h2, .is-style-numeral) { display: none; } .br-js:not(.br-ready) .br-faq-topic__head { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 18px 0; border-bottom: 1px solid var(--stone-300); } .br-js:not(.br-ready) .br-faq-topic__head > .is-style-numeral { flex: none; width: 34px; font-size: 26px; } .br-js:not(.br-ready) .br-faq-topic__head > h2 { flex: 1; margin: 0; padding-right: 59px; font-size: 24px; } .br-faq-topic.is-collapsible:not(.is-open) > :not(.br-faq-topic__head), .br-faq-topic.is-collapsible .br-faq-topic__head > :not(h2), .br-faq-topic.is-collapsible .br-faq-topic__label { display: none; } .br-faq-topic.is-collapsible .br-faq-topic__head > h2 { margin: 0; font-size: inherit; line-height: inherit; } .br-faq-topic.is-collapsible .br-faq-topic__toggle { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 18px 0; background: transparent; border: 0; border-bottom: 1px solid var(--stone-300); border-radius: 0; font: inherit; text-align: left; color: var(--rust); cursor: pointer; } .br-faq-topic__toggle::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px 0 4px; border-right: 1.5px solid var(--rust); border-bottom: 1.5px solid var(--rust); transform: rotate(45deg); } .br-faq-topic.is-open .br-faq-topic__toggle::after { transform: rotate(-135deg); } .br-faq-topic__n { flex: none; width: 34px; font: 400 26px/1 var(--font-accent); color: var(--clay); } .br-faq-topic__t { flex: 1; font: 400 24px/1.15 var(--font-accent); } .br-faq-topic__c { flex: none; font: 500 13px/1 var(--font-sans); color: var(--ink-muted); } :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic) > .br-accordion { border-top: 0; } :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic) .wp-block-details summary { padding-left: 50px; } :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic) .wp-block-details > :not(summary) { padding-left: 50px; } :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic) .wp-block-details > ul { padding-left: 70px; } /* A topic's links or "Not sure?" box come first when it opens, above its questions (same order as the page source). */ :is(.br-faq-topic.is-collapsible, :where(.br-js:not(.br-ready)) .br-faq-topic) > .br-faq-topic__aside { padding: 20px 4px 4px 50px; } .br-faq-callout.is-style-panel { padding: 22px; } /* The crisis lines box, moved by site.js from its answer to after the topics, always visible (FAQ-Mobile). */ .br-faq > .br-faq-crisis.is-style-panel { margin-top: 32px; padding: 22px; border-color: var(--rule); } .br-faq > .br-faq-crisis > p:first-child { margin-bottom: 8px; } .br-faq-cta::before { -webkit-mask-image: radial-gradient(ellipse at 50% 30%, transparent 0 150px, #000 330px); mask-image: radial-gradient(ellipse at 50% 30%, transparent 0 150px, #000 330px); } .br-faq-cta .wp-block-buttons { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; } .br-faq-cta .wp-block-button__link { width: 100%; } } /* ==== end FAQ ==== */ /* ==== Page: Policies (page-legal template) ==== */ /* Five policy pages share one layout (Legal-* artboards; Legal-Booking-Mobile is the mobile pattern): * stone hero → body with a left rail ("On this page" + "Our policies") and the article → stone strip. */ /* Placeholders read as the artboard's tan tag on these pages only. */ :is(.br-legal, .br-legal-hero, .br-legal-body) .br-ph { padding: 1px 6px; border-radius: 4px; background: var(--stone-200); color: inherit; font-weight: 500; font-size: .92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Hero: stone ground, hairline below (none above: the header has one). */ .br-legal-hero.is-style-section-stone { border-top: 0; border-bottom: 1px solid var(--rule); padding-block: clamp(48px, calc(48px + 40 * var(--fluid)), 88px) clamp(36px, calc(36px + 28 * var(--fluid)), 64px); } .br-legal-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px 72px; } .br-legal-hero__row > *, .br-legal-hero__title > *, .br-legal-inshort > * { margin: 0; } .br-legal-hero__title { flex: 1 1 520px; } .br-legal-hero h1 { margin-top: 20px; max-width: 18ch; font-size: min(clamp(28px, calc(28px + 14 * var(--fluid)), 42px), calc(28 * var(--narrow))); line-height: 1.04; } .br-legal-hero .is-style-eyebrow a { color: inherit; text-decoration-color: var(--clay); } .br-legal-hero__title > .is-style-meta { margin-top: 20px; font-size: 15px; line-height: 1.5; } .br-legal-hero__intro { flex: 0 1 440px; line-height: 1.6; } /* "In short" / "The essentials" box. */ .br-legal-inshort { flex: 1 1 440px; background: var(--sand); border: 1px solid var(--stone-300); padding: clamp(22px, calc(22px + 6 * var(--fluid)), 28px) clamp(20px, calc(20px + 10 * var(--fluid)), 30px); } .br-legal-inshort > ul { margin-top: 16px; padding-left: 20px; font: 400 16px/1.6 var(--font-sans); } /* Booking & Cancellation: the four notice tiles (big figure, label, sub-line; styled by position). */ .br-legal-hero .br-legal-tiles { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; } .br-legal-tiles > *, .br-legal-tile > * { margin: 0; } .br-legal-tile { flex: 1 1 200px; background: var(--sand); border: 1px solid var(--stone-300); padding: 24px 24px 22px; } .br-legal-tile.is-style-featured { background: var(--stone-300); } .br-legal-tile > :first-child { font: 400 clamp(32px, calc(32px + 16 * var(--fluid)), 48px)/1 var(--font-accent); color: var(--rust); } .br-legal-tile > :nth-child(2) { margin-top: 10px; font: 600 15px/1.4 var(--font-sans); } .br-legal-tile > :nth-child(3) { margin-top: 4px; font: 400 14px/1.5 var(--font-sans); color: var(--ink-muted); } .br-legal-tile.is-style-featured > :nth-child(3) { color: var(--ink); } /* Body: the rail ("On this page"), the article, then "Our policies". That source order is the reading and Tab order, as on Legal-Booking-Mobile; from 1000px the rail and "Our policies" stack in a left column beside the article, as on the desktop artboards. */ .br-legal-body.is-style-section { padding-block: clamp(44px, calc(44px + 36 * var(--fluid)), 80px) clamp(56px, calc(56px + 56 * var(--fluid)), 112px); } .br-legal-layout { display: grid; grid-template-columns: 280px minmax(0, 740px); grid-template-rows: auto 1fr; column-gap: 88px; align-items: start; } .br-legal-layout > *, .br-legal-rail > *, .br-legal-policies > * { margin: 0; } .br-legal-layout > .br-legal-article { grid-column: 2; grid-row: 1 / span 2; min-width: 0; } .br-legal-layout > .br-legal-policies { grid-column: 1; grid-row: 2; margin-top: 40px; } /* "On this page": a core Details block. Always open on desktop; a pill that expands below 1000px. */ .wp-block-details.br-legal-toc > ol { margin: 0; padding: 0; max-width: none; list-style: none; counter-reset: br-legal-toc; } .br-legal-toc li { margin: 0; counter-increment: br-legal-toc; } .br-legal-toc li > a { display: flex; gap: 10px; padding: 7px 0; font: 400 14px/1.45 var(--font-sans); color: var(--ink); text-decoration: none; } .br-legal-toc li > a::before { content: counter(br-legal-toc); flex: none; width: 22px; font-weight: 500; color: var(--ink-muted); } .br-legal-toc li > a:hover { color: var(--rust); } /* "Our policies": core Navigation (menu 59); core marks the current page with aria-current. */ .br-legal-policies > .is-style-eyebrow { margin-bottom: 4px; font-size: 13px; } .br-legal-policies .br-policies-nav, .br-legal-policies .br-policies-nav .wp-block-navigation__container { width: 100%; gap: 0; align-items: stretch; } .br-legal-policies .br-policies-nav .wp-block-navigation-item { width: 100%; } .br-legal-policies .br-policies-nav .wp-block-navigation-item__content { display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 500 14px/1.4 var(--font-sans); color: var(--ink); text-decoration: none; } .br-legal-policies .br-policies-nav .wp-block-navigation-item__content:hover, .br-legal-policies .br-policies-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--rust); } .br-legal-policies .br-policies-nav .wp-block-navigation-item__content[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--rust); vertical-align: middle; } /* Article: the policy text. */ .br-legal-article { font-size: var(--wp--preset--font-size--body); line-height: 1.7; } .br-legal-article > * { margin: 0; } .br-legal-article > :is(p, ul, ol) { margin-top: clamp(12px, calc(12px + 2 * var(--fluid)), 14px); } .br-legal-article > :is(ul, ol) { padding-left: clamp(20px, calc(20px + 2 * var(--fluid)), 22px); } .br-legal-article li { margin-block: clamp(5px, calc(5px + 1 * var(--fluid)), 6px); } .br-legal-article a:not(.wp-element-button) { text-underline-offset: 3px; } .br-legal-article > h2 { margin-top: clamp(44px, calc(44px + 12 * var(--fluid)), 56px); padding-top: clamp(22px, calc(22px + 6 * var(--fluid)), 28px); border-top: 1px solid var(--stone-300); font: 400 clamp(24px, calc(24px + 6 * var(--fluid)), 30px)/1.2 var(--font-accent); color: var(--rust); scroll-margin-top: 24px; } .br-legal-article > h3 { margin-top: clamp(22px, calc(22px + 6 * var(--fluid)), 28px); font: 600 clamp(16px, calc(16px + 2 * var(--fluid)), 18px)/1.4 var(--font-sans); color: var(--ink); } .br-legal-article > .is-style-meta { font-size: 15px; line-height: 1.6; } .br-legal-article > :first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Tables (core Table, no fixed layout). */ .br-legal-article > .wp-block-table { margin-top: 22px; } .br-legal-article .wp-block-table table { width: 100%; border-collapse: collapse; font: 400 15px/1.55 var(--font-sans); } .br-legal-article .wp-block-table thead { border-bottom: 0; } .br-legal-article .wp-block-table th { padding: 0 16px 12px 0; border: 0; border-bottom: 1px solid var(--stone-300); text-align: left; vertical-align: bottom; font: 600 12px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rust); } .br-legal-article .wp-block-table td { padding: 14px 16px 14px 0; border: 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .br-legal-article .br-legal-cellnote { color: var(--ink-muted); } /* Callouts (block styles "Policy callout" and "Policy callout, sand"): stone box; the sand variant is the waiver's crisis-lines box. */ .br-legal-article > :is(.is-style-legal-callout, .is-style-legal-callout-sand) { margin-top: clamp(20px, calc(20px + 4 * var(--fluid)), 24px); background: var(--stone-100); border: 1px solid var(--rule); padding: clamp(18px, calc(18px + 4 * var(--fluid)), 22px) clamp(20px, calc(20px + 6 * var(--fluid)), 26px); } :is(.is-style-legal-callout, .is-style-legal-callout-sand) > * { margin: 0; } :is(.is-style-legal-callout, .is-style-legal-callout-sand) > .br-legal-callout__note { margin-top: 10px; font-size: 15px; color: var(--ink-muted); } .br-legal-article > .is-style-legal-callout-sand { background: var(--sand); border-color: var(--stone-300); } .is-style-legal-callout-sand > :first-child { font: 600 15px/1.4 var(--font-sans); color: var(--rust); } .is-style-legal-callout-sand > :first-child + p { margin-top: 6px; font: 400 15px/1.8 var(--font-sans); } /* Waiver: "What we ask about" categories and the three outcomes (bold lead-in = the item's title). */ .br-legal-article > :is(.br-legal-cats, .br-legal-steps) { margin-top: 22px; display: grid; } .br-legal-article > .br-legal-cats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; } .br-legal-cats > * { margin: 0; padding: 16px 18px; background: var(--stone-100); border: 1px solid var(--rule); font: 400 14px/1.55 var(--font-sans); } .br-legal-cats > * > strong:first-child { display: block; margin-bottom: 4px; font: 600 15px/1.4 var(--font-sans); color: var(--rust); } .br-legal-article > .br-legal-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; } .br-legal-steps > * { margin: 0; padding-top: 16px; border-top: 1px solid var(--stone-300); font: 400 15px/1.6 var(--font-sans); } .br-legal-steps > * > strong:first-child { display: block; margin-bottom: 10px; font: 400 32px/1 var(--font-accent); color: var(--rust); } /* Space Hire Conditions: numbered clauses (paragraph style "Numbered clause") with a hanging number column. */ .br-legal-article > .is-style-legal-clause { padding-left: 52px; text-indent: -52px; } .is-style-legal-clause > strong:first-child { display: inline-block; width: 38px; margin-right: 10px; text-indent: 0; color: var(--rust); } @media (min-width: 1000px) { /* Two columns: the contents list is always shown; the summary is just its label. */ .wp-block-details.br-legal-toc::details-content { display: block; content-visibility: visible; } .wp-block-details.br-legal-toc > summary { display: block; min-height: 0; margin: 0 0 10px; padding: 0; pointer-events: none; cursor: default; font: 600 13px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rust); } .wp-block-details.br-legal-toc > summary::after { display: none; } } @media (max-width: 999px) { /* One column (Legal-Booking-Mobile): contents pill first, on the hero's stone ground, then the article, then "Our policies". Below ~990px the rail and article would wrap anyway. */ .br-legal-hero.is-style-section-stone { padding-bottom: 0; border-bottom: 0; } .br-legal-body.is-style-section { padding-top: 0; } .br-legal-layout { display: flex; flex-direction: column; align-items: stretch; } .br-legal-rail { display: contents; } .wp-block-details.br-legal-toc { margin-inline: calc(var(--gutter) * -1); padding: 24px var(--gutter) 36px; background: var(--stone-100); border-bottom: 1px solid var(--rule); } .wp-block-details.br-legal-toc > summary { min-height: 48px; padding: 0 18px; border: 1px solid var(--stone-300); border-radius: 999px; background: var(--sand); font: 500 15px/1.2 var(--font-sans); } .wp-block-details.br-legal-toc > summary:hover { background: var(--sand); } .wp-block-details.br-legal-toc[open] > summary { padding-bottom: 0; } .wp-block-details.br-legal-toc > ol { margin-top: 10px; padding: 4px 18px; background: var(--sand); border: 1px solid var(--stone-300); } .br-legal-toc li + li { border-top: 1px solid var(--rule); } .br-legal-toc li > a { min-height: 44px; align-items: center; padding: 10px 0; font-size: 15px; } .br-legal-layout > .br-legal-article { margin-top: 44px; } .br-legal-layout > .br-legal-policies { margin-top: 44px; } } @media (max-width: 781px) { .br-legal-hero .is-style-eyebrow { font-size: 13px; } .br-legal-hero h1 { margin-top: 16px; line-height: 1.08; } .br-legal-hero__title > .is-style-meta { margin-top: 14px; font-size: 14px; } .br-legal-hero__row { gap: 20px; } .br-legal-hero .br-legal-tiles { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .br-legal-tile { padding: 16px; } .br-legal-tile > :nth-child(2) { margin-top: 8px; font-size: 13px; } .br-legal-tile > :nth-child(3) { display: none; } .br-legal-policies > .is-style-eyebrow { font-size: 12px; } .br-legal-policies .br-policies-nav .wp-block-navigation-item__content { padding: 14px 0; font-size: 15px; } .br-legal-policies .br-policies-nav .wp-block-navigation-item__content[aria-current="page"]::before { display: none; } /* Tables become stacked rows; headers stay available to screen readers. */ .br-legal-article > .wp-block-table { margin-top: 14px; } .br-legal-article .wp-block-table :is(table, tbody, tr, td) { display: block; } .br-legal-article .wp-block-table table { border-top: 1px solid var(--stone-300); } .br-legal-article .wp-block-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .br-legal-article .wp-block-table tr { padding: 14px 0; border-bottom: 1px solid var(--rule); } .br-legal-article .wp-block-table td { padding: 0; border: 0; } .br-legal-article .wp-block-table td:first-child { font-weight: 600; } .br-legal-article .br-legal-cellnote { font-weight: 400; } .br-legal-article > .is-style-legal-clause { padding-left: 44px; text-indent: -44px; } .is-style-legal-clause > strong:first-child { width: 32px; margin-right: 8px; } } /* ==== end Policies ==== */ /* ==== Page: Book, Visit, utility pages, 404 ==== */ /* Quiet page head on stone with a rule under it (Book). */ .br-pagehead { background: var(--stone-100); border-bottom: 1px solid var(--rule); padding-block: 80px 56px; } .br-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; } .br-pagehead__row > *, .br-pagehead__title > * { margin: 0; } .br-pagehead__title { flex: 1 1 520px; } .br-pagehead__title h1 { margin-top: 20px; font-size: min(clamp(32px, calc(32px + 14 * var(--fluid)), 46px), calc(32 * var(--narrow))); line-height: 1.04; } .br-pagehead__title h1 + p { margin-top: 20px; max-width: calc(46 * var(--sans-ch)); } .br-pagehead .br-book-facts { flex: 0 1 520px; } .br-book-facts .is-style-chip { line-height: 1.3; } /* Book: schedule embed + aside. */ .br-book { padding-block: 56px 112px; } .br-book__grid { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; } .br-book__grid > * { margin: 0; } .br-book__grid > .br-embed, .br-book__grid > .br-momence { flex: 2 1 620px; } .br-book__aside { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; } .br-book__aside > * { margin: 0; } .br-book__aside .is-style-eyebrow { font-size: 13px; } .br-newhere { padding: 28px; } .br-newhere > * { margin: 0; } .br-newhere .br-kicker { gap: 10px; } .br-newhere .br-kicker .br-mark img { width: 13px; } .br-newhere > .is-style-spoken { margin-top: 12px; font-size: var(--wp--preset--font-size--card-title); line-height: 1.15; } .br-newhere > .is-style-spoken + p { margin-top: 10px; font-size: 15px; line-height: 1.6; } .br-sessions-list { padding: 24px 28px; } .br-sessions-list > * { margin: 0; } .br-sessions-list__rows { margin-top: 8px !important; } .br-sessions-list__rows > * { margin: 0; } .br-sessions-list .br-ses { align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); } .br-sessions-list .br-ses:last-child { border-bottom: 0; } .br-ses > * { margin: 0; } .br-ses .is-style-spoken { font-size: 22px; line-height: 1.2; } .br-ses .is-style-meta { flex: none; } .br-sessions-list .wp-block-buttons { margin-top: 0 !important; } .br-book__note { padding: 24px 28px; } .br-book__note > * { margin: 0; } .br-book__note > p + p { margin-top: 12px; font-size: 15px; } .br-book__help { padding: 4px 0; } .br-book__help > * { margin: 0; } .br-book__help-title { font: 600 16px/1.4 var(--font-sans); } .br-book__help-title + p { margin-top: 6px; font-size: 15px; } .br-book__help .br-small { margin-top: 14px; line-height: 1.6; } .br-book__help .br-small a { color: inherit; } /* Visit: hero split (text left, entrance photo right) on stone. */ .br-visit-hero { background: var(--stone-100); border-bottom: 1px solid var(--rule); } .br-visit-hero__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 72px; } .br-visit-hero__row > *, .br-visit-hero__text > * { margin: 0; } .br-visit-hero__text { flex: 1 1 460px; padding: 104px 0 96px; display: flex; flex-direction: column; justify-content: center; } .br-visit-hero__text .br-mark { margin-bottom: 24px; } .br-visit-hero__text .br-mark img { width: 34px; } .br-visit-hero__text h1 + p { margin-top: 26px; max-width: calc(40 * var(--sans-ch)); } .br-visit-hero__address { margin-top: 34px !important; font-size: clamp(24px, calc(24px + 6 * var(--fluid)), 30px); line-height: 1.3; } .br-visit-hero__text .wp-block-buttons { margin-top: 34px; } .br-visit-hero__photo { flex: 1 1 440px; min-height: 560px; overflow: hidden; border-inline: 1px solid var(--stone-300); } .br-visit-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1100px) { /* The artboard's 460px / 440px bases would stack the hero at 1024; keep it side by side on small laptops. */ .br-visit-hero__text { flex-basis: 420px; } .br-visit-hero__photo { flex-basis: 380px; } } /* Visit: "Find us" heading, map and details list. Source order (= reading and Tab order) is heading, map, details, as on Visit-Mobile. Side by side, the details sit under the heading, left of the map, as on Visit-Desktop. */ .br-findus { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } .br-findus > * { margin: 0; } .br-findus > .br-map { margin-top: 28px; } .br-dl { margin-top: 28px !important; border-top: 1px solid var(--stone-300); } .br-dl > *, .br-dl__row > * { margin: 0; } .br-dl__row { padding: 22px 0; border-bottom: 1px solid var(--rule); } .br-dl__row .is-style-eyebrow { font-size: 13px; } .br-dl__row .is-style-eyebrow + p { margin-top: 10px; } .br-map { height: 560px; border: 1px solid var(--stone-300); background: var(--stone-200); } .br-map iframe { display: block; width: 100%; height: 100%; border: 0; } @media (min-width: 996px) { /* The artboard's flex 1 1 340px / 1.6 1 520px with a 72px gap (side by side from 932px of content). */ .br-findus { grid-template-columns: calc(340px + (100% - 932px) / 2.6) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 72px; } .br-findus > .br-map { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } .br-findus > .br-dl { grid-column: 1; grid-row: 2; } } /* Visit: getting here steps (rust numerals at 55%) and the photo row. */ .br-steps--visit { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 40px 36px; } .br-steps--visit > *, .br-steps--visit .br-step > * { margin: 0; } .br-steps--visit .is-style-numeral { color: var(--rust); opacity: .62; } .br-steps--visit .br-step > h3 { margin-top: 16px; } .br-steps--visit .br-step > h3 + p { margin-top: 12px; } .br-photo-row { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; } .br-photo-row > * { margin: 0; } /* Visit: say hello. */ .br-contact { display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: flex-start; } .br-contact > *, .br-contact__intro > *, .br-contact__notes > *, .br-contact__note > * { margin: 0; } .br-contact__intro { flex: 1 1 380px; } .br-contact__intro > h2 { max-width: 12ch; } .br-contact__intro > h2 + p { margin-top: 24px; max-width: calc(40 * var(--sans-ch)); } .br-contact__notes { margin-top: 36px !important; border-top: 1px solid var(--stone-300); } .br-contact__note { padding: 20px 0; border-bottom: 1px solid var(--rule); } .br-contact__q { font: 600 16px/1.4 var(--font-sans); } .br-contact__q + p { margin-top: 6px; font-size: 15px; color: var(--ink-muted); } .br-contact__q + p a { color: var(--ink); text-underline-offset: 3px; } .br-contact__form { flex: 1.3 1 520px; } /* Utility pages (booking confirmed, enquiry received): text + photo split, compact footer. */ .br-utility { padding-block: 96px 112px; } .br-utility__row { display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: stretch; } .br-utility__row > *, .br-utility__text > * { margin: 0; } .br-utility__text { flex: 1.2 1 560px; } .br-utility--enquiry .br-utility__text { flex-basis: 520px; display: flex; flex-direction: column; justify-content: center; } .br-utility__photo { flex: 1 1 400px; min-height: 520px; overflow: hidden; border: 1px solid var(--stone-300); } .br-utility--enquiry .br-utility__photo { min-height: 560px; } .br-utility__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1100px) { .br-utility__text, .br-utility--enquiry .br-utility__text { flex-basis: 440px; } .br-utility__photo { flex-basis: 340px; } .br-utility__row { gap: 56px; } } .br-utility__text .br-mark img { width: 34px; } .br-utility__text h1, .br-notfound__card h1 { font-size: min(clamp(32px, calc(32px + 14 * var(--fluid)), 46px), calc(32 * var(--narrow))); line-height: 1.04; } .br-utility__text .br-mark + h1 { margin-top: 24px; } .br-utility__text .is-style-eyebrow + h1 { margin-top: 20px; max-width: 14ch; } .br-utility__text h1 + p { margin-top: 22px; max-width: calc(44 * var(--sans-ch)); } .br-dl--booking { margin-top: 36px !important; max-width: 560px; } .br-dl--booking .br-dl__row { padding: 18px 0; } .br-dl--booking .is-style-eyebrow { font-size: 12px; } .br-dl--booking .is-style-eyebrow + p { margin-top: 8px; line-height: 1.5; } .br-utility__text .wp-block-buttons { margin-top: 32px; gap: 14px 24px; } .br-utility__text .wp-block-button:not(.is-style-text) .wp-block-button__link { padding: 0 30px; } .br-numlist { margin-top: 40px !important; border-top: 1px solid var(--stone-300); } .br-numlist > *, .br-numlist__item > *, .br-numlist__body > * { margin: 0; } .br-utility .br-numlist__item { gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; } .br-numlist__n { flex: none; width: 36px; font: 400 30px/1 var(--font-accent); color: var(--rust); opacity: .62; } .br-numlist__title { font: 600 17px/1.4 var(--font-sans); } .br-numlist__body > .br-numlist__sub { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); } .br-utility-after { padding-block: 96px; } .br-steps--ruled { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 36px; } .br-steps--ruled > *, .br-steps--ruled .br-step > * { margin: 0; } .br-steps--ruled .br-step { border-top: 1px solid var(--stone-300); padding-top: 24px; } .br-steps--ruled .is-style-numeral { color: var(--rust); opacity: .62; } .br-steps--ruled .br-step > :is(h3, h4) { margin-top: 16px; } .br-steps--ruled .br-step > :is(h3, h4) + p { margin-top: 12px; } /* Booking confirmed, "Before you come": Momence sends every checkout here (classes, one-to-ones, room hire), so there is a column per audience: "Attending a class" (H3, Sailors card title) and "Hiring the space", each with its steps (H4 step titles) and its own note. Columns block: side by side from 782px, stacked below (class column first). Side by side, the two columns share their rows (subgrid), so the hairlines and the notes line up across them: a single list with the numeral beside the title up to 1199px, 2 x 2 with the numeral above (as in the artboard) from 1200px. A column given a fifth step drops the shared rows (a subgrid can't grow) and lays out on its own. */ .br-utility-after > .br-before { margin-top: 48px; margin-bottom: 0; } .wp-block-columns.br-before { gap: 56px; } .br-before > .br-before__col > * { margin: 0; } /* Column headings: Sailors, 24px on phones rising to the card title's 30px at 1440 (the policies' article heading size), and shrinking with the column below 390px so they always sit under the H2. */ .br-before > .br-before__col > h3 { font-size: min(clamp(24px, calc(24px + 6 * var(--fluid)), 30px), calc(24 * var(--narrow))); } .br-before .br-steps--ruled { margin-top: 28px; } .br-before > .br-before__col > .br-utility-after__note { margin-top: 40px; } .br-before .br-utility-after__note a { white-space: nowrap; } @media (min-width: 782px) { .br-before:not(:has(.br-step:nth-child(5))) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(56px, calc(56px + 24 * var(--fluid)), 80px); } .br-before:not(:has(.br-step:nth-child(5))) > .br-before__col { display: grid; grid-row: span 6; grid-template-rows: subgrid; } .br-before:not(:has(.br-step:nth-child(5))) .br-steps--ruled { grid-row: span 4; grid-template-rows: subgrid; } .br-before .br-steps--ruled { grid-template-columns: minmax(0, 1fr); gap: 0; } .br-before .br-step + .br-step { margin-top: 28px; } .br-before .br-steps--ruled .br-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: 16px; padding-top: 20px; } .br-before .br-step > .is-style-numeral { grid-row: span 2; font-size: 36px; } .br-before .br-steps--ruled .br-step > h4 { margin-top: 0; } .br-before .br-steps--ruled .br-step > h4 + p { margin-top: 6px; } } @media (min-width: 1200px) { .br-before:not(:has(.br-step:nth-child(5))) > .br-before__col { grid-row: span 4; } .br-before:not(:has(.br-step:nth-child(5))) .br-steps--ruled { grid-row: span 2; } .br-before .br-steps--ruled { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } .br-before .br-step + .br-step { margin-top: 0; } .br-before .br-step:nth-child(n + 3) { margin-top: 36px; } .br-before .br-steps--ruled .br-step { display: block; padding-top: 24px; } .br-before .br-step > .is-style-numeral { font-size: var(--wp--preset--font-size--numeral); } .br-before .br-steps--ruled .br-step > h4 { margin-top: 16px; } .br-before .br-steps--ruled .br-step > h4 + p { margin-top: 12px; } } /* Phones and touch screens: the note links are 44px targets, their lines opened to a 44px pitch (as the FAQ's tap-to-call numbers), so links on neighbouring lines never overlap. */ @media (max-width: 781px), (pointer: coarse) { .br-before .br-utility-after__note a { display: inline-block; line-height: 44px; } } /* 404: a quiet card on stone with the rust pattern fading in around it. */ .br-notfound { position: relative; overflow: hidden; background: var(--stone-100); padding-block: 96px 104px; } .br-notfound::before { content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none; background: url("../images/pattern-rust.png") repeat; background-size: 480px auto; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 0 460px, #000 820px); mask-image: radial-gradient(ellipse at 50% 45%, transparent 0 460px, #000 820px); } .br-notfound > * { position: relative; } .br-notfound__card { max-width: 760px; background: var(--stone-100); border: 1px solid var(--rule); padding: 64px 56px 56px; text-align: center; } .br-notfound__card > * { margin: 0; } .br-notfound__card .br-mark img { width: 64px; } .br-notfound__card > .is-style-eyebrow { margin-top: 28px; } .br-notfound__card > h1 { margin: 20px auto 0; max-width: 18ch; } .br-notfound__card > h1 + p { margin: 24px auto 0; max-width: calc(40 * var(--sans-ch)); } .br-notfound__card > .wp-block-buttons { margin-top: 36px; gap: 14px; } .br-notfound__card > .br-popular { margin: 56px auto 0; max-width: 520px; text-align: left; border-top: 1px solid var(--stone-300); } .br-popular .wp-block-navigation__container, .br-popular .wp-block-navigation-item { gap: 0; width: 100%; } .br-popular .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 4px; border-bottom: 1px solid var(--rule); font: 500 17px/1.4 var(--font-sans); color: var(--ink); text-decoration: none; } .br-popular .wp-block-navigation-item__content::after { content: "→" / ""; color: var(--rust); } .br-popular .wp-block-navigation-item__content:hover { background: var(--stone-100); color: var(--rust); } @media (max-width: 781px) { .br-utility { padding-block: 52px 56px; } .br-utility__photo { display: none; } .br-utility__text .br-mark img { width: 28px; } .br-utility__text .br-mark + h1, .br-utility__text .is-style-eyebrow + h1 { margin-top: 20px; } .br-utility__text h1 + p { margin-top: 16px; font-size: 16px; } .br-dl--booking { margin-top: 28px !important; } .br-dl--booking .br-dl__row { padding: 16px 0; } .br-utility__text .wp-block-buttons { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; } .br-utility__text .wp-block-button:not(.is-style-text) .wp-block-button__link { width: 100%; } .br-utility-after { padding-block: 56px; } .br-steps--ruled { margin-top: 24px; gap: 22px; } .br-steps--ruled .br-step { padding-top: 16px; } .br-steps--ruled .is-style-numeral { display: none; } .br-steps--ruled .br-step > :is(h3, h4) { margin-top: 0; font-size: 17px; } .br-steps--ruled .br-step > :is(h3, h4) + p { margin-top: 6px; font-size: 15px; } .br-utility-after > .br-before { margin-top: 32px; } .br-before .br-steps--ruled { margin-top: 20px; } .br-before > .br-before__col > .br-utility-after__note { margin-top: 28px; font-size: 15px; } .br-notfound { padding-block: 56px; } .br-notfound__card { padding: 40px 20px; } .br-notfound__card .br-mark img { width: 48px; } .br-notfound__card > .wp-block-buttons { flex-direction: column; align-items: stretch; } } @media (max-width: 781px) { .br-visit-hero__row { flex-direction: column; } .br-visit-hero__photo { order: -1; flex: none; height: 300px; min-height: 0; margin-inline: calc(var(--gutter) * -1) !important; border: 0; border-bottom: 1px solid var(--stone-300); } .br-visit-hero__text { padding: 44px 0 52px; } .br-visit-hero__text .br-mark { display: none; } .br-visit-hero__text h1 + p { margin-top: 18px; font-size: 16px; } .br-visit-hero__address { margin-top: 24px !important; } .br-visit-hero__text .wp-block-buttons { margin-top: 26px; flex-direction: column; align-items: stretch; gap: 12px; } .br-visit-hero__text .wp-block-button__link { width: 100%; } .br-visit-hero__text .is-style-text .wp-block-button__link { min-height: 52px; border: 1.5px solid var(--rust); border-radius: 999px; color: var(--rust); font: 600 15px/1 var(--font-sans); letter-spacing: .03em; text-decoration: none; } .br-map { height: 260px; margin-top: 22px !important; } .br-findus .br-dl { margin-top: 20px !important; } .br-findus .br-dl__row { padding: 18px 0; } .br-findus .br-dl__row .is-style-eyebrow { font-size: 12px; } .br-findus .br-dl__row .is-style-eyebrow + p { margin-top: 8px; font-size: 16px; } .br-steps--visit { margin-top: 28px; gap: 24px; } .br-steps--visit .br-step { border-top: 1px solid var(--stone-300); padding-top: 16px; } .br-steps--visit .is-style-numeral { display: none; } .br-steps--visit .br-step > h3 { margin-top: 0; font-size: 17px; } .br-steps--visit .br-step > h3 + p { margin-top: 6px; font-size: 15px; } .br-photo-row { display: none; } .br-contact { gap: 24px; } .br-contact__intro > h2 + p { margin-top: 14px; } .br-contact__notes { margin-top: 24px !important; } } @media (max-width: 781px) { .br-pagehead { padding-block: 44px 32px; } .br-pagehead--book .br-kicker { display: none; } .br-pagehead--book .br-pagehead__title h1 { margin-top: 0; } .br-pagehead__title h1 + p { margin-top: 14px; font-size: 16px; } .br-pagehead__row { gap: 0; } .br-pagehead .br-book-facts { margin-top: 18px; flex-direction: column; align-items: flex-start; gap: 8px; } .br-book-facts .is-style-chip { position: relative; padding: 0 0 0 16px; border: 0; border-radius: 0; background: none; font-size: 14px; line-height: 1.5; } .br-book-facts .is-style-chip::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rust); } .br-book { padding-block: 40px 56px; } .br-book__grid { gap: 40px; } .br-book__aside { gap: 20px; } .br-newhere { padding: 24px; } .br-newhere > .is-style-spoken { margin-top: 10px; font-size: 26px; } .br-newhere > .is-style-spoken + p { margin-top: 8px; } .br-sessions-list { padding: 20px 22px; } .br-sessions-list .is-style-eyebrow { font-size: 12px; } .br-ses .is-style-spoken { font-size: 20px; } .br-ses .is-style-meta { font-size: 13px; } } /* ==== end Book, Visit, utility pages, 404 ==== */ /* ==== Page: Homepage ==== */ /* Hero: 720px, homepage wash (9% → 74%). Content sits in the upper part, as in the handoff (its 535px content box is centred in the 720px hero, so the mark starts ~92px down). */ .br-hero--home.wp-block-cover { align-items: flex-start; padding-top: 92px; } .br-hero--home .br-mark { margin-bottom: 26px; } .br-hero--home h1 + p { margin-top: 28px; max-width: calc(46 * var(--sans-ch)); } .br-hero--home .wp-block-buttons { margin-top: 38px; } .br-hero--home .is-style-meta { margin-top: 30px; } /* Founder quote: "Meet Trav" heading, then portrait + Sailors quote with a clay-rule attribution. */ .br-founder > h2 { margin-bottom: 0; } .br-founder > h2 + .br-founder__row { margin-top: 48px; } .br-founder__row { display: flex; align-items: center; gap: 64px; } .br-founder__row > *, .br-founder__text > * { margin: 0; } .br-founder__photo { flex: none; width: 220px; height: 264px; } .br-founder__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border: 1px solid var(--stone-300); } .br-founder__text { flex: 1; } .wp-block-quote.br-founder__quote > p { font-size: var(--wp--preset--font-size--quote-lg); line-height: 1.3; max-width: 26ch; } .br-attrib { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px !important; font: 400 15px/1.4 var(--font-sans); } .br-attrib::before { content: ""; width: 24px; height: 1px; background: var(--clay); } .br-attrib__role { color: var(--ink-muted); } /* Classes: section header, featured First Breath card, four class cards. */ .br-sechead--home { border-bottom-color: var(--rule); } .br-sechead--home > h2 { max-width: 16ch; } .br-sechead--home > p { max-width: calc(34 * var(--sans-ch)); } .br-feature { margin-top: 36px; padding: 40px; display: flex; align-items: flex-start; gap: 56px; } .br-feature > *, .br-feature__name > *, .br-feature__body > * { margin: 0; } .br-feature__photo { flex: none; width: 200px; height: 200px; } .br-feature__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .br-feature__name { flex: 1; } .br-feature__name h3 { margin-top: 14px; line-height: 1.1; } .br-feature__meta { margin-top: 10px !important; font: 500 14px/1.4 var(--font-sans); color: var(--rust-deep); } .br-feature__body { flex: 1.2; padding-top: 6px; } .br-feature__body .is-style-chip-accent { margin-top: 20px; padding: 9px 14px; } .br-classcards { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .br-classcards > *, .br-classcards .is-style-class-card > * { margin: 0; } .br-classcards .is-style-class-card { min-height: 288px; } .br-classcards .is-style-class-card > .is-style-meta { margin-top: 8px; } .br-classcards .is-style-class-card > .is-style-meta + p { margin-top: 18px; margin-bottom: 22px; } .br-classcards .is-style-class-card > .is-style-chip-tag { margin-top: auto; align-self: flex-start; } .br-home-classes__cta { margin-top: 48px; } /* The studio: big room photo + text with chips and a photo pair. */ .br-home-studio { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; } .br-home-studio > *, .br-home-studio__text > * { margin: 0; } .br-home-studio__photo img { height: 600px; } .br-home-studio__text > h2 { max-width: 14ch; } .br-home-studio__text > h2 + p { margin-top: 26px; max-width: calc(44 * var(--sans-ch)); } .br-home-studio__text .br-chips { margin-top: 30px; } .br-home-studio__pair { margin-top: 32px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .br-home-studio__pair > * { margin: 0; } .br-home-studio__pair img { height: 230px; } /* How a session goes: steps with clay numerals; rotated submark top right. */ .br-how { position: relative; } .br-how__glyph { position: absolute; right: 48px; top: 44px; margin: 0 !important; transform: rotate(-10deg); opacity: .9; } .br-how__glyph img { width: 52px; } /* The glyph is absolutely positioned but still the first child, so the H2 would get the layout's block gap. */ .br-how > .br-how__glyph + * { margin-block-start: 0; } .br-how .br-steps--ruled { margin-top: 56px; } .br-steps--clay .is-style-numeral { color: var(--clay); opacity: 1; } .is-layout-constrained > .br-how__more { margin-top: 44px; } /* Kind words: stone ground, earth pattern on the right edge, kept right of the 900px testimonial grid. */ .br-kind { --br-pattern-w: 26%; --br-pattern-text: 900px; background: var(--stone-100); border-top: 1px solid var(--rule); } .br-kind::before { opacity: .16; } .br-kind__lead { margin-top: 36px; } .br-kind__lead > p { max-width: 36ch; } .br-kind__more { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 900px; } .br-kind__more > * { margin: 0; } .br-kind__more .wp-block-quote > p { font-size: 18px; } .br-kind__more .wp-block-quote cite { margin-top: 16px; } .is-layout-constrained > .br-kind__link { margin-top: 48px; font: 500 16px/1.6 var(--font-sans); } .br-kind__link a { color: var(--rust); } /* FAQ: heading column + seven questions. */ .br-split--home-faq { grid-template-columns: .75fr 1.25fr; gap: 80px; } .br-split--home-faq .br-split__head > h2 + p { max-width: calc(32 * var(--sans-ch)); } /* Visit: address column + map. */ .br-home-visit { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .br-home-visit > *, .br-home-visit__text > * { margin: 0; } .br-home-visit__text > h2 + p { margin-top: 32px; } .br-home-visit__text > p + p { margin-top: 20px; } .br-map--home { height: 420px; } @media (max-width: 1079px) { .br-classcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 781px) { .br-hero--home.wp-block-cover { min-height: 580px !important; padding-top: 72px; } .br-hero--home .br-mark { margin-bottom: 20px; } .br-hero--home h1 + p { margin-top: 20px; } .br-hero--home .is-style-meta { margin-top: 16px; } .br-founder > h2 + .br-founder__row { margin-top: 28px; } .br-founder__row { flex-direction: column; align-items: flex-start; gap: 28px; } /* Mobile attribution: name over role, no clay rule (handoff mobile). */ .br-attrib { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 20px !important; } .br-attrib::before { display: none; } .br-feature { flex-direction: column; gap: 14px; padding: 24px; margin-top: 28px; } .br-feature__name h3 { margin-top: 12px; } .br-feature__meta { margin-top: 8px !important; } .br-feature__body .is-style-chip-accent { margin-top: 18px; } /* The mobile handoff card has no photo (just the kicker glyph); the Image block stays for desktop. */ .br-feature__photo { display: none; } .br-feature__body { padding-top: 0; } .br-classcards { grid-template-columns: 1fr; gap: 16px; } .br-classcards .is-style-class-card { min-height: 0; } .br-classcards .is-style-class-card > .is-style-meta { margin-top: 6px; } .br-classcards .is-style-class-card > .is-style-meta + p { margin-top: 14px; margin-bottom: 16px; } .br-home-classes__cta { margin-top: 28px; } .br-home-classes__cta .wp-block-button, .br-home-classes__cta .wp-block-button__link { width: 100%; } .br-home-studio { grid-template-columns: 1fr; gap: 28px; } .br-home-studio__photo img { height: 280px; } .br-home-studio__text > h2 + p { margin-top: 16px; } .br-home-studio__text .br-chips { margin-top: 22px; } .br-home-studio__pair { margin-top: 22px !important; gap: 12px; } .br-home-studio__pair img { height: 150px; } /* The rotated glyph is desktop only ("top right on desktop"; the mobile handoff has none). */ .br-how__glyph { display: none; } /* "How a session goes", handoff mobile: 34px under the intro, 28px between steps, 18 / 10 / 8px inside. */ .br-how .br-steps--ruled { margin-top: 34px; gap: 28px; } .br-how .br-steps--ruled .br-step { padding-top: 18px; } .br-steps--clay .is-style-numeral { display: block; font-size: 36px; } .br-how .br-steps--clay .br-step > h3 { margin-top: 10px; font-size: 18px; } .br-how .br-steps--ruled .br-step > h3 + p { margin-top: 8px; } .is-layout-constrained > .br-how__more { margin-top: 28px; } .br-kind__lead { margin-top: 24px; } .br-kind__more { margin-top: 36px; padding-top: 28px; grid-template-columns: 1fr; gap: 28px; } .br-kind__more .wp-block-quote > p { font-size: 17px; } .br-split--home-faq { grid-template-columns: 1fr; gap: 28px; } .br-home-visit { grid-template-columns: 1fr; gap: 28px; } .br-home-visit__text > h2 + p { margin-top: 20px; } .br-map--home { height: 260px; } } /* ==== end Homepage ==== */ /* ==== Search results, archives and posts (templates search.html, index.html, single.html) ==== */ /* Not drawn in the designs: the Book page head (.br-pagehead) and the 404's "Popular pages" list, reused. */ .br-pagehead__title > h1:first-child { margin-top: 0; } /* A search term or category name can be one long word: let it wrap rather than run off a phone screen. */ .br-results-head h1 { overflow-wrap: anywhere; hyphens: auto; } /* Lists and post text sit closer under the page head than a full section break. */ :is(.br-results, .br-post-body).is-style-section { padding-top: clamp(40px, calc(40px + 24 * var(--fluid)), 64px); } .br-search { margin-top: 28px; max-width: 560px; } .br-search .wp-block-search__inside-wrapper { gap: 10px; padding: 0; border: 0; } .br-search .wp-block-search__input { min-height: 48px; padding: 0 18px; border: 1px solid var(--stone-300); border-radius: 999px; background: var(--sand); font: 400 16px/1.2 var(--font-sans); color: var(--ink); } .br-search .wp-block-search__input:focus-visible { border-color: var(--rust); outline: 2px solid var(--rust); outline-offset: 3px; } .br-search .wp-block-search__button { min-height: 48px; margin: 0; } .br-results .wp-block-post-template { max-width: 760px; margin: 0; padding: 0; list-style: none; } .br-results .wp-block-post-template > li { margin: 0; padding: 24px 0; border-top: 1px solid var(--stone-300); } .br-results .wp-block-post-template > li:last-child { border-bottom: 1px solid var(--stone-300); } .br-results .wp-block-post-title { margin: 0; font: 400 var(--wp--preset--font-size--card-title)/1.2 var(--font-accent); } .br-results .wp-block-post-title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rust); text-decoration: none; } .br-results .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--clay); } .br-results .wp-block-post-excerpt { margin-top: 6px; max-width: calc(64 * var(--sans-ch)); } .br-results .wp-block-post-excerpt__excerpt { margin: 0; } .br-results .wp-block-query-pagination { max-width: 760px; margin-top: 32px; gap: 16px; font-weight: 500; } .br-results .wp-block-query-pagination a, .br-results .wp-block-query-pagination .current { display: inline-flex; align-items: center; min-height: 44px; min-width: 24px; } .br-results .wp-block-query-no-results > * { margin: 0; max-width: calc(56 * var(--sans-ch)); } .br-results .wp-block-query-no-results > .br-popular { margin-top: 32px; max-width: 520px; border-top: 1px solid var(--stone-300); } @media (max-width: 781px) { .br-search { margin-top: 20px; } .br-search .wp-block-search__button { padding-inline: 22px; } .br-results .wp-block-post-template > li { padding: 18px 0; } } /* ==== end Search results, archives and posts ==== */