/* Page-level layout scaffolding shared across static templates */ .rsdf-page-hero { background: var(--rsdf-white); color: var(--rsdf-green-dark); text-align: center; /* Notice height included so an active notice never covers the page title. */ padding: calc(var(--rsdf-header-height-collapsed) + var(--rsdf-notice-height) + 48px) 0 32px; } .rsdf-page-hero h1 { font-family: var(--rsdf-font-body); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 400; line-height: 1.5; margin: 0; } .rsdf-section { padding: 56px 0; } .rsdf-card { background: var(--rsdf-white); border-radius: 22px; padding: 24px; } .rsdf-placeholder-note { background: var(--rsdf-grey); border-left: 4px solid var(--rsdf-orange); padding: 12px 16px; font-family: var(--rsdf-font-ui); font-size: 0.9rem; margin-bottom: 24px; } /* Friendly (non-debug) empty state, e.g. the Gallery page before any photos have been added — distinct from .rsdf-placeholder-note, which is a build note rather than something a visitor should see. */ .rsdf-empty-note { text-align: center; color: #6b6f66; font-size: 1.05rem; padding: 48px 0; margin: 0; } /* ---------------------------------------------------------------- */ /* Homepage — mirrors Design Assets/…Homepage-v1.jpg */ /* ---------------------------------------------------------------- */ .rsdf-home-hero { position: relative; min-height: 620px; display: flex; align-items: center; background-color: var(--rsdf-green-dark); /* fallback only while the photo loads */ background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--rsdf-white); padding-top: var(--rsdf-header-height); } /* * Parallax — implemented as a JS-driven transform on a dedicated background * layer (assets/js/parallax.js), NOT background-attachment: fixed. * * background-attachment: fixed was tried first and didn't work reliably: it's * a long-documented WebKit/Safari quirk that fixed backgrounds behave * correctly on the element but are inconsistent on arbitrary elements * within the page (which is exactly what these hero/photo-panel sections are) * — Safari desktop, not just iOS, is affected. A real transform-based parallax * works identically everywhere since it doesn't rely on that rendering path at * all: the background lives on its own absolutely-positioned layer, sized * larger than its section so there's room to move without gapping, and JS * translates it vertically based on scroll position. */ .rsdf-parallax-section { position: relative; overflow: hidden; /* clips the oversized background layer below */ } .rsdf-parallax-bg { position: absolute; left: 0; right: 0; top: -15%; height: 130%; /* taller than the section so vertical movement never reveals an edge */ background-position: center; background-size: cover; background-repeat: no-repeat; will-change: transform; z-index: 0; } /* Content sits above the background layer */ .rsdf-parallax-section > *:not(.rsdf-parallax-bg) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .rsdf-parallax-bg { transform: none !important; } } .rsdf-home-hero__inner { position: relative; width: 100%; max-width: var(--rsdf-content-max-width); margin-inline: auto; padding-inline: var(--rsdf-gutter); display: flex; /* Mobile-first: welcome text stacks above the widget, centred — see the min-width:641px override below for the tablet/desktop side-by-side layout, where the two are bottom-aligned instead. */ flex-direction: column; align-items: center; gap: 24px; /* Zero unless a notice is showing, in which case the booking card starts below it rather than underneath it. */ padding-top: var(--rsdf-notice-height); } /* * Welcome headline, overlaid on the hero photo (client wording, "Home page * wording" doc, 2026-08-12). Text-shadow rather than a background scrim * behind the text alone — the photo itself already has a dark gradient * overlay (see the inline style on .rsdf-parallax-bg in front-page.php), so * a second box behind just the words would read as a mismatched patch * rather than one composition. */ .rsdf-hero-welcome { color: var(--rsdf-white); max-width: 560px; text-align: center; transition: opacity 200ms ease, transform 200ms ease; } .rsdf-hero-welcome__eyebrow { margin: 0 0 8px; font-family: var(--rsdf-font-ui); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .rsdf-hero-welcome__title { margin: 0; font-family: var(--rsdf-font-display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); } /* * Shrinks and fades once the booking widget reaches its second stage — the * date/time panel opening (.rsdf-bw.is-expanded, toggled in * booking-widget.js's revealWidget()) widens the widget to the left, which * would otherwise run straight over this text. prefers-reduced-motion users * still get the end state, just without the transition (the transition * itself is skipped by the browser under that setting automatically since it * only animates opacity/transform, not layout). */ .rsdf-home-hero__inner:has(.rsdf-bw.is-expanded) .rsdf-hero-welcome { opacity: 0; transform: scale(0.92) translateX(-12px); pointer-events: none; } /* * Tablet and desktop: the booking card is anchored to the TOP of the hero, not * vertically centred. * * Centring is what made the card appear to jump around. The card changes height * as you use it — the summary line and price appear once a date is chosen, and * the payment step is taller again — and with align-items: center every one of * those changes moves the card's top edge by half the difference. Anchoring it * means the card only ever grows downwards from a fixed position. * * padding-bottom then guarantees clearance between the card and the bottom edge * of the hero photograph. Previously there was none: min-height 620px minus the * header's own height left less room than the card needs, so it ran flush into * the join with the section below. * * The card's own top edge is unchanged — padding-top still resolves to exactly * the header height, as before — so this doesn't move the approved composition, * it only stops the card drifting and gives it room underneath. */ @media (min-width: 641px) { .rsdf-home-hero { align-items: flex-start; padding-bottom: 80px; } .rsdf-home-hero__inner { /* Side by side, welcome text on the left in the space the widget's own right-alignment leaves free — and bottom-aligned, so the welcome text's baseline sits level with the bottom of the calendar card rather than its top. */ flex-direction: row; justify-content: space-between; align-items: flex-end; } .rsdf-hero-welcome { text-align: left; } /* * The welcome text fades to opacity:0 above (see the :has() rule), but * opacity doesn't take it out of flex layout — it was still reserving its * full width as a flex sibling, so the widget was competing with an * invisible block for space on the row. On anything narrower than the * hero's own max-width that forced the widget itself to shrink below the * width its date/time panel actually needs, clipping the "5-8 dogs" pill * and the time slots off the right edge instead of just leaving a gap. * Collapsing the welcome text's width at the same moment it fades hands * that space back to the widget, matching the width transition to the * existing opacity/transform one so they read as one movement. */ .rsdf-hero-welcome { transition: opacity 200ms ease, transform 200ms ease, width 200ms ease, margin-right 200ms ease; } .rsdf-home-hero__inner:has(.rsdf-bw.is-expanded) .rsdf-hero-welcome { width: 0; min-width: 0; margin-right: -24px; } } /* Mobile: widget centres and stacks full-width beneath the hero rather than floating top-right, per spec §5.3 — the booking widget is mobile-first. */ @media (max-width: 640px) { .rsdf-home-hero { min-height: 0; /* Calendar card keeps its position — this just extends the section further down so more of the background photo shows beneath it, instead of the placeholder box that used to sit there. */ padding-bottom: 260px; } /* The 400px cap was binding before the 24px gutter did on some mobile widths, leaving more than 24px of space either side — remove it here so the card always runs flush to the gutter. Doubled selector (not just extra specificity weight) because the base .rsdf-hero-widget rule sits further down the file — at equal specificity the later rule wins regardless of media query, so this needs to actually out-rank it, not just tie. */ .rsdf-hero-widget.rsdf-hero-widget { max-width: none; } } /* Floating "select a date" calendar card, top-right of the hero */ .rsdf-hero-widget { width: 100%; max-width: 400px; background: var(--rsdf-cream); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } .rsdf-hero-widget__header { background: var(--rsdf-green-dark); color: var(--rsdf-white); padding: 16px 20px; } .rsdf-hero-widget__header p { margin: 0; font-family: var(--rsdf-font-ui); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; } .rsdf-hero-widget__header strong { display: block; font-family: var(--rsdf-font-display); font-size: 1.1rem; font-weight: 500; margin-top: 4px; } .rsdf-hero-widget__body { padding: 20px 24px 24px; } /* Spacing/type bumped up to use the extra room from the 320->400px widget width */ .rsdf-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; font-family: var(--rsdf-font-ui); font-size: 0.85rem; text-align: center; color: var(--rsdf-green-dark); margin-bottom: 20px; } .rsdf-calendar-grid span.is-label { font-weight: 700; opacity: 0.6; font-size: 0.7rem; } .rsdf-calendar-grid span.is-selected { background: var(--rsdf-green-dark); color: var(--rsdf-white); border-radius: 6px; padding: 6px 0; } .rsdf-calendar-grid span:not(.is-label):not(.is-selected) { padding: 6px 0; } /* * FAQ page layout — image rail + questions. * * Single column on mobile/tablet (rail collapses above the questions would be * one 4-image-tall block pushing every answer below the fold, so the rail is * hidden below 1024px instead — the accordion is the part that matters on a * narrow screen). From 1024px up, the questions column is a fixed 690px * (client-specified) and the rail takes whatever's left of the container — * which, since the images are set from aspect-ratio rather than a fixed * pixel size, means they scale up to fill that space rather than sitting at * a fixed small size. */ .rsdf-faqs-layout { display: block; } .rsdf-faqs-media { display: none; } @media (min-width: 1024px) { .rsdf-faqs-layout { display: grid; grid-template-columns: 1fr 690px; gap: 56px; align-items: start; } .rsdf-faqs-media { display: block; } /* * The "scrolls slower, stops when the copy runs out" effect is pure CSS, * no scroll-tied JS: position: sticky pins this column in the viewport * while .rsdf-faqs-layout (the grid row, sized to the taller questions * column) scrolls past underneath it, then releases it once the grid * row's own bottom edge reaches it — i.e. exactly when the copy runs out. * `top` clears the fixed header + any active site notice, same offset * .rsdf-page-hero uses, plus a little breathing room. */ .rsdf-faqs-media__sticky { position: sticky; top: calc(var(--rsdf-header-height-collapsed) + var(--rsdf-notice-height) + 24px); } .rsdf-faqs-media__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; /* matches .rsdf-card / .rsdf-gallery__item radius */ margin-bottom: 24px; /* same spacing as .rsdf-gallery__item */ } } /* FAQ accordion — native

, so it works without JavaScript and screen readers already understand the open/closed state. */ .rsdf-faqs { max-width: 820px; border-top: 1px solid rgba(51, 59, 48, 0.15); } .rsdf-faq { border-bottom: 1px solid rgba(51, 59, 48, 0.15); } .rsdf-faq summary { cursor: pointer; padding: 18px 32px 18px 0; font-size: 1.05rem; font-weight: 500; list-style: none; position: relative; } .rsdf-faq summary::-webkit-details-marker { display: none; } .rsdf-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: var(--rsdf-orange); } .rsdf-faq[open] summary::after { content: '\2212'; } .rsdf-faq__answer { padding: 0 32px 20px 0; max-width: 68ch; } .rsdf-faq__answer p { margin: 0 0 12px; } /* Intro tagline strip */ .rsdf-intro { text-align: center; padding: 120px 0; } .rsdf-intro p { font-size: clamp(1.4rem, 2.2vw, 1.8rem); /* Fills the full 1200px container (via the parent .rsdf-container) rather than a narrower centred column — was previously capped at 760px. */ margin-inline: auto; width: 100%; max-width: 900px; line-height: 1.5; } /* Dark two-column editorial section */ .rsdf-editorial { background: var(--rsdf-green-dark); color: var(--rsdf-white); padding: 140px 0; } .rsdf-editorial__grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 768px) { .rsdf-editorial__grid { grid-template-columns: 1fr 1.3fr; gap: 56px; } } .rsdf-editorial h2 { font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.7rem); } /* Mobile: bring body copy in an extra 24px past the standard .rsdf-container gutter (24px), so it lines up with the pricing card's own text — the card sits at 24px from the edge with 24px of internal padding, so its copy reads at 48px from the screen edge. These selectors are more specific than the plain .rsdf-container rule so they win regardless of source order. */ @media (max-width: 640px) { .rsdf-intro .rsdf-container, .rsdf-editorial .rsdf-container, .rsdf-footer .rsdf-container { padding-inline: calc(var(--rsdf-gutter) + 24px); } } /* Pricing panel floated over the photo strip */ .rsdf-photo-panel { position: relative; min-height: 700px; background: var(--rsdf-green-mid) center/cover no-repeat; display: flex; align-items: center; } .rsdf-photo-panel__inner { width: 100%; max-width: var(--rsdf-content-max-width); margin-inline: auto; padding-inline: var(--rsdf-gutter); } @media (max-width: 640px) { .rsdf-photo-panel { min-height: 0; padding-block: 40px; background-color: var(--rsdf-orange); } /* Placeholder fill while there's no mobile-friendly crop of the photo yet — swap back to the photo (remove this rule) once one's ready. */ .rsdf-photo-panel > .rsdf-parallax-bg { display: none; } .rsdf-photo-panel__inner { display: flex; justify-content: center; } /* Flex items shrink to content width by default, which is what was leaving big gaps either side of the card — fill out to the 24px gutter from .rsdf-photo-panel__inner instead. The 400px max-width also needs removing here or it binds before the gutter does on some mobile widths (tablet/desktop keep the cap — this is scoped to mobile only). Doubled selector (not just extra specificity weight) because the base .rsdf-pricing-card rule sits further down the file — at equal specificity the later rule wins regardless of media query, so this needs to actually out-rank it, not just tie. */ .rsdf-pricing-card.rsdf-pricing-card { width: 100%; max-width: none; } } .rsdf-pricing-card { max-width: 400px; background: var(--rsdf-cream); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .rsdf-pricing-card__header { background: var(--rsdf-green-dark); color: var(--rsdf-white); padding: 16px 24px; font-family: var(--rsdf-font-display); } /* carries its own bold weight from the browser default stylesheet, which a font-weight set on the parent doesn't override — has to be set directly on the element, same as .rsdf-hero-widget__header strong. */ .rsdf-pricing-card__header strong { font-weight: 500; } .rsdf-pricing-card__body { padding: 20px 24px; font-family: var(--rsdf-font-ui); } .rsdf-pricing-card__tier { padding: 12px 0; border-bottom: 1px solid var(--rsdf-grey); } .rsdf-pricing-card__tier:last-of-type { border-bottom: none; } .rsdf-pricing-card__tier strong { display: block; font-family: var(--rsdf-font-body); } .rsdf-pricing-card__tier small { color: #6b6f66; font-size: 0.75rem; } .rsdf-pricing-card .rsdf-btn { width: 100%; margin-top: 8px; } /* * Facilities — "own special box like a featured box... a dog image behind * and a box like Prices with the content inside it" (client wording doc, * 2026-08-12). Deliberately the same parallax-photo + floating-card pattern * as .rsdf-photo-panel/.rsdf-pricing-card above, just wider (the facility * list needs more room than four pricing rows) and left-aligned rather than * right, so the two panels read as a matched pair rather than duplicates. */ .rsdf-facilities { position: relative; min-height: 640px; background: var(--rsdf-green-mid) center/cover no-repeat; display: flex; align-items: center; } .rsdf-facilities__inner { width: 100%; max-width: var(--rsdf-content-max-width); margin-inline: auto; padding: 56px var(--rsdf-gutter); display: flex; justify-content: flex-end; } @media (max-width: 640px) { .rsdf-facilities { min-height: 0; padding-block: 40px; background-color: var(--rsdf-orange); } .rsdf-facilities > .rsdf-parallax-bg { display: none; } .rsdf-facilities__inner { display: flex; justify-content: center; } } .rsdf-facilities-card { max-width: 560px; background: var(--rsdf-cream); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .rsdf-facilities-card.rsdf-facilities-card { width: 100%; } @media (max-width: 640px) { .rsdf-facilities-card.rsdf-facilities-card { max-width: none; } } .rsdf-facilities-card__header { background: var(--rsdf-green-dark); color: var(--rsdf-white); padding: 16px 24px; font-family: var(--rsdf-font-display); font-size: 1.1rem; } .rsdf-facilities-card__header strong { font-weight: 500; } .rsdf-facilities-card__body { padding: 24px; font-family: var(--rsdf-font-ui); } .rsdf-facilities-card__intro { margin: 0 0 12px; font-weight: 600; color: var(--rsdf-green-dark); } .rsdf-facilities-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .rsdf-facilities-card__list li { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rsdf-grey); } .rsdf-facilities-card__list li:last-child { padding-bottom: 0; border-bottom: none; } .rsdf-facilities-card__icon { flex: 0 0 auto; font-size: 1.2rem; line-height: 1.4; } /* Matches .rsdf-pricing-card__tier strong exactly — same title line style in both cards, per the client's request 2026-08-12 to bring the two panels' typography in line with each other. */ .rsdf-facilities-card__list strong { display: block; font-family: var(--rsdf-font-body); } /* Matches the plain "£9 for a 30 minute session" line in the pricing card (not its smaller, grey ".rsdf-pricing-card__tier small" sub-line) — same reasoning as above. */ .rsdf-facilities-card__desc { display: block; } /* ---------------------------------------------------------------- * Map — shared by the homepage and the contact page (rsdf_map_embed()). * Full-bleed on both: a map is the one element on either page that earns the * whole width, since a postage stamp of one tells you nothing. * ---------------------------------------------------------------- */ .rsdf-map-section { position: relative; background-color: var(--rsdf-mint); } .rsdf-map__frame { line-height: 0; /* kills the inline-descender gap under the iframe */ background: var(--rsdf-mint); } .rsdf-map__frame iframe { display: block; width: 100%; /* Set per-instance by rsdf_map_embed(); the fallback matters only if the custom property is somehow missing. */ height: var(--rsdf-map-height, 480px); border: 0; } @media (max-width: 640px) { .rsdf-map__frame iframe { height: 360px; } } .rsdf-map-section__label { margin: 20px; background: rgba(51, 59, 48, 0.85); color: var(--rsdf-white); font-family: var(--rsdf-font-ui); font-size: 0.8rem; padding: 8px 16px; border-radius: 999px; } /* * Grass strip — sits as an overlapping transition between the map section and * the footer, per the homepage visual: the blades read as growing up out of the * footer and over the map's bottom edge, rather than a flat divider between them. */ .rsdf-grass-strip { position: relative; z-index: 2; display: block; width: 100%; height: auto; margin-top: -70px; /* pull up so it overlaps the map section's bottom */ margin-bottom: -30px; /* and reach down over the footer's top edge */ pointer-events: none; } @media (max-width: 640px) { .rsdf-grass-strip { margin-top: -32px; margin-bottom: -16px; } } .rsdf-grass-strip img { width: 100%; height: auto; display: block; } /* Footer — matches visual's three-column layout + bottom bar */ .rsdf-footer { background: var(--rsdf-green-dark); color: var(--rsdf-white); } .rsdf-footer__main { /* * padding-block (not the `padding` shorthand) deliberately — this element * also carries the .rsdf-container class, which sets padding-inline: 24px * for the left/right gutter. An earlier version of this rule used the * 3-value `padding: 48px 0 40px` shorthand, which explicitly zeroes * left/right padding and silently overrode that gutter — the footer's * content was measuring ~1248px (the raw max-width, un-gutted) while every * other .rsdf-container section correctly measured 1200px. That was the bug. */ padding-block: 48px 40px; display: flex; flex-direction: column; /* mobile: single stacked column, spec §5.3 */ gap: 32px; } .rsdf-footer__nav-group { display: grid; grid-template-columns: 1fr; gap: 24px; } /* Tablet: nav columns sit side by side under the brand block */ @media (min-width: 640px) and (max-width: 1023px) { .rsdf-footer__nav-group { grid-template-columns: repeat(3, 1fr); gap: 24px; } } /* * Desktop: brand stays left at a fixed max-width; the nav-group is pushed to * the right edge as a unit (margin-left: auto) with columns sized to their * own content rather than stretched evenly — this is what actually produces * Boss Office's look, where the three columns cluster together on the right * with a large gap from the brand block, instead of spreading evenly across * the remaining grid width. */ @media (min-width: 1024px) { .rsdf-footer__main { flex-direction: row; align-items: flex-start; justify-content: space-between; } .rsdf-footer__brand { flex: 0 0 auto; max-width: 300px; } .rsdf-footer__nav-group { /* Fixed column width (not auto) — the sign-off bar's links row below uses this exact same width/gap/right-alignment combination, which is what actually makes the two rows line up column-for-column rather than just clustering in the same general area. */ grid-template-columns: repeat(3, 160px); gap: 64px; margin-left: auto; } } /* Footer uses the no-background logo variant (Design Assets/…-no-bg.svg), different proportions (273:73) from the boxed header/OG version. */ .rsdf-footer__brand img { width: 230px; height: auto; margin-bottom: 50px; } .rsdf-footer__contact { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 600; margin: 0 0 8px; } .rsdf-footer__contact a { color: var(--rsdf-white); text-decoration: none; } .rsdf-footer__social { display: flex; gap: 12px; margin-top: 36px; } /* * Sits in its own .rsdf-container row, directly beneath .rsdf-footer__main * and still on the footer's own dark background — a single line spanning * the full content width, with a hairline rule separating it from the nav * columns above and enough bottom padding to breathe before the white * Combustion sign-off bar starts immediately after. */ .rsdf-footer__legal-line { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.6); margin: 0; padding: 20px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; } @media (min-width: 1024px) { .rsdf-footer__legal-line { text-align: left; } } /* * Inverted from the previous outline treatment: solid white circle, dark icon * — matches boss-office.co.uk's footer exactly. */ .rsdf-footer__social a { width: 32px; height: 32px; border-radius: 50%; background: var(--rsdf-white); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: opacity var(--rsdf-duration) var(--rsdf-ease); } .rsdf-footer__social a svg { width: 20px; height: 20px; fill: var(--rsdf-green-dark); } .rsdf-footer__social a:hover { opacity: 0.8; transform: scale(1.1); transition: transform .2s; /* Animation */ } /* * Utility nav columns use Open Sans, not the Lora brand face — matches * boss-office.co.uk's footer exactly, which is a dense functional area * (links, hours), not editorial content. Lora stays everywhere else. */ .rsdf-footer h3, .rsdf-footer ul, .rsdf-footer__brand > *:not(img) { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .rsdf-footer h3 { font-size: 13px; letter-spacing: 0.01em; opacity: 0.55; font-weight: 400; margin: 0 0 14px; } .rsdf-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; } .rsdf-footer li { margin-bottom: 10px; line-height: 1.4; font-weight: 400; } .rsdf-footer a { color: var(--rsdf-white); text-decoration: none; } .rsdf-footer a:hover { text-decoration: underline; } /* * Note: the white credit bar below the footer (Combustion Studios + legal * links) is no longer styled here — it's self-contained in * inc/combustion-signoff-bar.php, which is a portable module reused across * every Combustion Studios build. Don't add footer-bottom styles back here. */ /* Photo gallery — masonry via CSS columns, equal gaps, staggered heights because each source photo keeps its natural aspect ratio (no cropping). */ .rsdf-gallery-section { background: var(--rsdf-white); padding: 80px 0; } .rsdf-gallery { column-count: 1; column-gap: 24px; } .rsdf-gallery__item { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 24px; border-radius: 22px; overflow: hidden; } .rsdf-gallery__item img { display: block; width: 100%; height: auto; } @media (min-width: 640px) { .rsdf-gallery { column-count: 2; } } @media (min-width: 1024px) { .rsdf-gallery { column-count: 3; } }