/* * BEXON CORPORATE — enterprise, advisory, consultancy, professional services. * --------------------------------------------------------------------------- * * ## The world this borrows from * * The confident end of corporate: a dark rounded card carrying the promise, a * soft accent glow behind the headline, and metrics stated as facts. Informed by * the Bexon HTML pack, but every rule here is authored — four of that pack's * dependencies (Font Awesome Pro, GSAP ScrollSmoother, GSAP SplitText, Isotope) * are commercial or copyleft and cannot ship inside a product. * * ## Type — Lexend + Source Sans 3 * * The "Corporate Trust" pairing from the ui-ux-pro-max catalogue. Lexend was * designed for reading ease and carries authority without shouting, which is * what an advisory firm's site has to do; Source Sans 3 carries the prose. * * ## Neutrals are the THEME's; primary and accent are the CUSTOMER's * * The scaffolding below (ink, surface, border, muted) is a trust-navy set from * the "Banking/Traditional Finance" palette. `--primary` and `--accent` are * deliberately absent from it: they arrive on from the organization's own * brand tokens (App\Support\Branding\BrandTokens), so this template wears each * customer's colours without anybody editing CSS. * * ## Logical properties throughout * * `margin-inline`, `inset-inline-start`, `padding-block` — never `left`/`right`. * The Bexon pack's RTL stylesheet is 43 KB against 810 KB precisely because it * kept this discipline. Free now, expensive to retrofit. * * ## No fixed heights, and clamp() everywhere * * That pack sets `min-height: 792px` on its hero and `height: 505px` on panels, * with `overflow: hidden` — which clips real CMS copy the moment a customer * writes two more words. It also contains zero `clamp()` and 1,370 media * queries. This is fluid-first; there is no breakpoint ladder to maintain. * * Mechanics are in _shared/base.css. This file is skin only. */ :root { /* Widths the per-block width setting resolves against (see base.css). */ --cms-shell: 74rem; --cms-wide: 90rem; --cms-narrow: var(--cms-measure); --cms-gutter: 1.75rem; --cms-bg: #ffffff; --cms-fg: #0f172a; --cms-muted: #475569; --cms-border: #e2e8f0; --cms-surface: #f1f5f9; --cms-surface-2: #e8ecf1; --cms-ink: #0f172a; --cms-danger: #dc2626; --cms-measure: 42rem; --cms-space: clamp(4rem, 8vw, 7rem); /* * Corporate-soft. One radius token rather than the 355 hardcoded * `border-radius` declarations the reference pack carries — those are what * make a theme impossible to restyle later. */ --cms-radius: 14px; --cms-radius-sm: 8px; --cms-radius-lg: 24px; --cms-display: 'Lexend', var(--brand-font-sans, system-ui), sans-serif; --cms-body: 'Source Sans 3', var(--brand-font-sans, system-ui), system-ui, -apple-system, 'Segoe UI', sans-serif; --cms-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -12px rgb(15 23 42 / .12); --cms-shadow-lg: 0 2px 4px rgb(15 23 42 / .04), 0 28px 64px -24px rgb(15 23 42 / .22); /* * The empty-picture-slot artwork: a rising bar chart with a trend line, * the advisory sector's own shorthand. Used as a MASK (see the * placeholder rule) so it takes the customer's colour rather than one * baked in here — a data-URI SVG is an isolated document and var() * cannot reach inside it. */ --cms-art-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 130h160'/%3E%3Cpath d='M45 130V95M85 130V70M125 130V80M165 130V40'/%3E%3Cpath d='M35 60l40-22 38 16 52-34' stroke-width='5'/%3E%3Ccircle cx='165' cy='20' r='7' fill='%23000' stroke='none'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root { --cms-bg: #0b1220; --cms-fg: #e8eef7; --cms-muted: #94a3b8; --cms-border: #1e293b; --cms-surface: #111a2b; --cms-surface-2: #162034; --cms-ink: #070d18; --cms-danger: #f87171; } } body { background: var(--cms-bg); color: var(--cms-fg); font: 400 17px/1.7 var(--cms-body); -webkit-font-smoothing: antialiased; } a { color: var(--primary, #1d4ed8); } h1, h2, h3 { font-family: var(--cms-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; } h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); margin: 0 0 1rem; } /* --- shell --------------------------------------------------------------- */ .cms-shell { max-width: var(--cms-shell); margin: 0 auto; padding: 0 var(--cms-gutter); } .cms-header { border-block-end: 1px solid var(--cms-border); padding-block: 1.1rem; background: color-mix(in srgb, var(--cms-bg) 88%, transparent); backdrop-filter: blur(10px); position: sticky; inset-block-start: 0; z-index: 20; } .cms-header .cms-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .cms-header.is-stuck { box-shadow: var(--cms-shadow); } .cms-brand { font-family: var(--cms-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; color: var(--cms-fg); } .cms-brand__logo { display: block; } .cms-nav a { text-decoration: none; color: var(--cms-muted); font-weight: 500; font-size: .95rem; transition: color .16s ease; } .cms-nav a:hover, .cms-nav a:focus { color: var(--cms-fg); } .cms-main { padding-block-end: var(--cms-space); } .cms-preview-bar { background: var(--accent, #0f766e); color: var(--accent-foreground, #fff); padding-block: .55rem; font-size: .8125rem; font-weight: 600; text-align: center; } .cms-skip { background: var(--cms-fg); color: var(--cms-bg); padding: .75rem 1rem; } /* --- primitives ---------------------------------------------------------- */ .cms-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--cms-radius-sm); padding: .95rem 1.75rem; font-family: var(--cms-display); font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; line-height: 1; box-shadow: var(--cms-shadow); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } .cms-btn:hover, .cms-btn:focus-visible { transform: translateY(-2px); box-shadow: var(--cms-shadow-lg); filter: brightness(1.05); } .cms-measure { max-width: var(--cms-measure); } .cms-muted { color: var(--cms-muted); } .cms-card { border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1.75rem; background: var(--cms-bg); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .cms-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--cms-border)); box-shadow: var(--cms-shadow); } .cms-card--filled { background: var(--cms-surface); border-color: transparent; } .cms-error { color: var(--cms-danger); font-size: .9rem; font-weight: 500; } .cms-field { display: grid; gap: .45rem; } .cms-field__label { font-weight: 600; font-size: .9375rem; } .cms-field__optional { font-weight: 400; color: var(--cms-muted); } .cms-input, .cms-textarea { border: 1px solid var(--cms-border); border-radius: var(--cms-radius-sm); padding: .85rem 1rem; font: inherit; background: var(--cms-bg); color: var(--cms-fg); transition: border-color .16s ease, box-shadow .16s ease; } .cms-input:focus, .cms-textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .cms-file { font: inherit; color: var(--cms-fg); } .cms-notice { padding: 1.25rem 1.5rem; background: var(--cms-surface); border-radius: var(--cms-radius); border-inline-start: 4px solid var(--primary); } .cms-rule { border: 0; height: 1px; background: var(--cms-border); margin-block: var(--cms-space); } .cms-intro { max-width: var(--cms-measure); font-size: 1.15rem; color: var(--cms-muted); } /* * Section headings carry a small accent tick above them — the one decorative * device this theme spends, so it stays a signature rather than noise. */ .cms-block-text__heading, .cms-block-faq__heading, .cms-block-steps__heading, .cms-block-feature-grid__heading, .cms-block-services__heading, .cms-block-careers__heading, .cms-block-testimonials__heading, .cms-block-stats__heading, .cms-block-gallery__heading, .cms-block-team__heading, .cms-block-slider__heading, .cms-block-video__heading, .cms-block-embed__heading, .cms-block-opening-hours__heading, .cms-block-contact-form__heading { font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin: 0 0 1.75rem; padding-block-start: 1.25rem; position: relative; } .cms-block-text__heading::before, .cms-block-faq__heading::before, .cms-block-steps__heading::before, .cms-block-feature-grid__heading::before, .cms-block-services__heading::before, .cms-block-careers__heading::before, .cms-block-testimonials__heading::before, .cms-block-stats__heading::before, .cms-block-gallery__heading::before, .cms-block-team__heading::before, .cms-block-slider__heading::before, .cms-block-video__heading::before, .cms-block-embed__heading::before, .cms-block-opening-hours__heading::before, .cms-block-contact-form__heading::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--accent); } /* --- blocks -------------------------------------------------------------- */ /* * hero — the signature. * * A dark rounded card carrying the promise, with a soft accent glow behind the * words. The glow is a radial gradient rather than a blurred element: `filter: * blur(65px)` on a real div (which is what the reference pack does) forces a * compositing layer the size of the hero and costs real frames on a phone. */ .cms-block-hero { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); } /* * Square, on every corner (owner, 2026-09-16). The rounded card read as a * floating panel rather than a banner. The picture behind it (`.cms-bg`) * inherits this radius, so it squares off too. */ .cms-block-hero__inner, .cms-block-hero { border-radius: 0; } .cms-block-hero { background: radial-gradient(60% 80% at 15% 20%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 70%), radial-gradient(50% 70% at 85% 10%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 65%), var(--cms-ink); color: #f8fafc; padding-inline: clamp(1.5rem, 5vw, 4rem); } .cms-block-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.5rem; padding: .45rem 1rem; /* Glass chip: translucent over the gradient, not a flat swatch. */ background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(8px); border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: #e2e8f0; } .cms-block-hero__headline { margin: 0 0 1.25rem; color: #f8fafc; font-size: clamp(2.5rem, 6vw, 4.25rem); max-width: 18ch; } .cms-block-hero__body { max-width: var(--cms-measure); font-size: 1.15rem; color: rgb(226 232 240 / .82); } .cms-block-hero__actions { margin-block-start: 2.25rem; } .cms-block-hero__actions .cms-btn { background: #ffffff; color: var(--cms-ink); } /* text */ .cms-block-text { margin-block: var(--cms-space); max-width: var(--cms-measure); } /* image */ .cms-block-image { margin-block: var(--cms-space); } .cms-block-image__img { border-radius: var(--cms-radius); box-shadow: var(--cms-shadow); } .cms-block-image__caption { margin-block-start: .75rem; color: var(--cms-muted); font-size: .9rem; } /* cta */ .cms-block-cta { margin-block: var(--cms-space); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); border-radius: var(--cms-radius-lg); background: radial-gradient(70% 100% at 80% 0%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%), var(--cms-ink); color: #f8fafc; text-align: center; } .cms-block-cta__headline { margin: 0 0 1rem; color: #f8fafc; font-size: clamp(1.9rem, 4vw, 3rem); } .cms-block-cta__body { max-width: var(--cms-measure); margin-inline: auto; color: rgb(226 232 240 / .82); } .cms-block-cta__actions { margin: 2rem 0 0; } .cms-block-cta .cms-btn { background: #ffffff; color: var(--cms-ink); } /* gallery */ .cms-block-gallery { margin-block: var(--cms-space); } .cms-block-gallery__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .cms-block-gallery__img { border-radius: var(--cms-radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* faq */ .cms-block-faq { margin-block: var(--cms-space); max-width: var(--cms-measure); } .cms-block-faq__item { border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1.25rem 1.5rem; margin-block-end: .75rem; background: var(--cms-bg); } .cms-block-faq__question { cursor: pointer; font-family: var(--cms-display); font-weight: 500; font-size: 1.05rem; } .cms-block-faq__answer { margin-block-start: .85rem; color: var(--cms-muted); } /* team */ .cms-block-team { margin-block: var(--cms-space); } .cms-block-team__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .cms-block-team__portrait { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--cms-radius); margin-block-end: 1rem; } .cms-block-team__name { display: block; font-family: var(--cms-display); font-weight: 600; font-size: 1.1rem; } .cms-block-team__role { display: block; color: var(--cms-muted); font-size: .9375rem; } /* testimonials */ .cms-block-testimonials { margin-block: var(--cms-space); } .cms-block-testimonials__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .cms-block-testimonials__quote { position: relative; margin: 0; padding: 2.75rem 1.75rem 1.75rem; background: var(--cms-surface); border-radius: var(--cms-radius); } .cms-block-testimonials__quote::before { content: "\201C"; position: absolute; inset-block-start: .5rem; inset-inline-start: 1.25rem; font-family: var(--cms-display); font-size: 4rem; line-height: 1; color: var(--accent); opacity: .32; } .cms-block-testimonials__text { margin: 0 0 1.25rem; font-size: 1.05rem; } .cms-block-testimonials__cite { color: var(--cms-muted); font-size: .9rem; font-style: normal; font-weight: 600; } /* logos */ .cms-block-logos { margin-block: var(--cms-space); } .cms-block-logos__heading { margin: 0 0 1.5rem; font-family: var(--cms-body); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cms-muted); text-align: center; } .cms-block-logos__heading::before { display: none; } .cms-block-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; } .cms-block-logos__img { max-height: 2.25rem; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; } .cms-block-logos__img:hover { opacity: 1; filter: none; } /* embed */ .cms-block-embed { margin-block: var(--cms-space); } /* contact_form */ .cms-block-contact-form { margin-block: var(--cms-space); max-width: 38rem; } .cms-block-contact-form__body { color: var(--cms-muted); margin-block-end: 1.75rem; } .cms-block-contact-form__form { display: grid; gap: 1.15rem; } /* careers */ .cms-block-careers { margin-block: var(--cms-space); } .cms-block-careers__body { color: var(--cms-muted); max-width: var(--cms-measure); margin-block-end: 1.75rem; } .cms-block-careers__list { display: grid; gap: 1rem; } /* * services — the interactive matrix. * * Detail is revealed on hover AND on focus-within, or the whole card is * unreachable from a keyboard. `max-height` rather than `display`, so the * transition has something to animate against. */ .cms-block-services { margin-block: var(--cms-space); } .cms-block-services__body { color: var(--cms-muted); max-width: var(--cms-measure); margin-block-end: 2rem; } .cms-block-services__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .cms-block-services__grid > li { border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1.75rem; background: var(--cms-bg); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .cms-block-services__grid > li:hover, .cms-block-services__grid > li:focus-within { border-color: color-mix(in srgb, var(--primary) 40%, var(--cms-border)); box-shadow: var(--cms-shadow-lg); transform: translateY(-3px); } .cms-block-services__grid .cms-listing__summary { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .28s ease, opacity .22s ease, margin .28s ease; margin-block-start: 0; } .cms-block-services__grid > li:hover .cms-listing__summary, .cms-block-services__grid > li:focus-within .cms-listing__summary { max-height: 12rem; opacity: 1; margin-block-start: .75rem; } .cms-block-services__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--cms-radius-sm); margin-block-end: 1.25rem; } /* stats — the metric counters. */ .cms-block-stats { margin-block: var(--cms-space); padding-block: clamp(2.5rem, 5vw, 4rem); border-radius: var(--cms-radius-lg); background: var(--cms-surface); } .cms-block-stats__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; } .cms-block-stats__item { display: flex; flex-direction: column-reverse; text-align: center; } .cms-block-stats__figure { margin: 0; font-family: var(--cms-display); font-weight: 600; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.03em; color: var(--primary); /* Tabular, so a counting animation does not make the row jitter. */ font-variant-numeric: tabular-nums; } .cms-block-stats__label { margin-block-start: .75rem; font-size: .9375rem; color: var(--cms-muted); } /* split_about */ .cms-block-split-about { margin-block: var(--cms-space); display: grid; gap: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: center; } .cms-block-split-about__img { border-radius: var(--cms-radius-lg); width: 100%; box-shadow: var(--cms-shadow-lg); } .cms-block-split-about__eyebrow { margin: 0 0 .85rem; display: inline-block; color: var(--accent); font-weight: 600; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; } .cms-block-split-about__heading { margin: 0 0 1.15rem; font-size: clamp(1.9rem, 3.6vw, 2.75rem); } .cms-block-split-about__body { color: var(--cms-muted); } .cms-block-split-about__actions { margin: 2rem 0 0; } .cms-block-split-about--flip .cms-block-split-about__media { order: 2; } /* * The empty picture slot. Authored art rather than a grey box, as a MASK so it * takes the customer's own accent — a data-URI SVG is an isolated document and * `var()` cannot reach inside it, so a background version would bake one * palette into every customer's site permanently. */ .cms-block-split-about__media--placeholder { position: relative; aspect-ratio: 4 / 3; border-radius: var(--cms-radius-lg); background: radial-gradient(70% 90% at 30% 20%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 70%), var(--cms-surface); } .cms-block-split-about__media--placeholder::before { content: ""; position: absolute; inset: 18%; background: var(--primary); opacity: .5; -webkit-mask: var(--cms-art-chart) center / contain no-repeat; mask: var(--cms-art-chart) center / contain no-repeat; } /* steps */ .cms-block-steps { margin-block: var(--cms-space); } .cms-block-steps__body { color: var(--cms-muted); max-width: var(--cms-measure); margin-block-end: 2.5rem; } .cms-block-steps__list { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: cms-step; /* * The connecting line is drawn with --cms-progress, which motion.js sets * from scroll position. It is 1 with reduced motion and 1 with no * JavaScript at all, so the line is simply already drawn — never missing. */ position: relative; } .cms-block-steps__item { counter-increment: cms-step; position: relative; padding-block-start: 3.5rem; } .cms-block-steps__item::before { content: counter(cms-step, decimal-leading-zero); position: absolute; inset-block-start: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-family: var(--cms-display); font-weight: 600; font-size: 1rem; } .cms-block-steps__title { margin: 0 0 .5rem; font-family: var(--cms-display); font-weight: 600; font-size: 1.2rem; } .cms-block-steps__text { margin: 0; color: var(--cms-muted); } /* slider */ .cms-block-slider { margin-block: var(--cms-space); } .cms-block-slider__heading { margin-block-end: 1.5rem; } .cms-block-slider__viewport { border-radius: var(--cms-radius-lg); } .cms-block-slider__slide { min-height: min(70vh, 32rem); } .cms-block-slider__art { background: radial-gradient(60% 80% at 25% 25%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 70%), var(--cms-ink); } .cms-block-slider__caption { padding: clamp(1.75rem, 4vw, 3rem); width: 100%; background: linear-gradient(to top, rgb(15 23 42 / .9), rgb(15 23 42 / .05)); color: #f8fafc; } .cms-block-slider__eyebrow { margin: 0 0 .6rem; display: inline-block; padding: .35rem .85rem; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); backdrop-filter: blur(8px); border-radius: 999px; font-size: .75rem; font-weight: 600; } .cms-block-slider__headline { margin: 0 0 .6rem; font-family: var(--cms-display); font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -.02em; } .cms-block-slider__body { margin: 0; max-width: 38rem; opacity: .88; } .cms-block-slider__actions { margin: 1.5rem 0 0; } .cms-block-slider__controls { gap: .5rem; margin-block-start: 1.25rem; justify-content: center; } .cms-block-slider__arrow { width: 2.75rem; height: 2.75rem; border: 1px solid var(--cms-border); border-radius: 50%; background: var(--cms-bg); color: var(--cms-fg); } .cms-block-slider__arrow:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .cms-block-slider__dots { gap: .4rem; align-items: center; } .cms-block-slider__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cms-border); } .cms-block-slider__dot.is-active { background: var(--primary); width: 1.5rem; border-radius: 999px; } .cms-block-slider__play { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--cms-border); border-radius: 50%; background: var(--cms-bg); color: var(--cms-fg); cursor: pointer; margin-inline-end: auto; } .cms-block-slider__play:hover, .cms-block-slider__play:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .cms-block-slider__play svg { width: 1rem; height: 1rem; } .cms-block-slider--controls-over .cms-block-slider__viewport { position: relative; } .cms-block-slider--controls-over .cms-block-slider__controls { position: absolute; inset-inline: 0; inset-block-end: 1.5rem; margin: 0; z-index: 2; } .cms-block-slider--controls-over .cms-block-slider__arrow, .cms-block-slider--controls-over .cms-block-slider__play { background: rgb(255 255 255 / .9); color: var(--cms-ink); border-color: transparent; } .cms-block-slider--controls-over .cms-block-slider__dot { background: rgb(255 255 255 / .5); } .cms-block-slider--controls-over .cms-block-slider__dot.is-active { background: #fff; } /* video */ .cms-block-video { margin-block: var(--cms-space); } .cms-block-video__body { color: var(--cms-muted); max-width: var(--cms-measure); margin-block-end: 1.25rem; } .cms-block-video__frame { border-radius: var(--cms-radius-lg); background: var(--cms-surface); overflow: hidden; } .cms-block-video--background { margin-block: var(--cms-space); } .cms-block-video--background .cms-block-video__frame { min-height: 22rem; } /* feature_grid */ .cms-block-feature-grid { margin-block: var(--cms-space); } .cms-block-feature-grid__body { color: var(--cms-muted); max-width: var(--cms-measure); margin-block-end: 2rem; } .cms-block-feature-grid__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .cms-block-feature-grid__item { background: var(--cms-bg); border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1.75rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .cms-block-feature-grid__item:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--cms-border)); box-shadow: var(--cms-shadow); transform: translateY(-3px); } .cms-block-feature-grid__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--cms-radius-sm); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); margin-block-end: 1.15rem; } .cms-block-feature-grid__icon .cms-icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; } .cms-block-feature-grid__title { margin: 0 0 .45rem; font-family: var(--cms-display); font-weight: 600; font-size: 1.1rem; } .cms-block-feature-grid__text { margin: 0; color: var(--cms-muted); } /* opening_hours */ .cms-block-opening-hours { margin-block: var(--cms-space); max-width: 34rem; } .cms-block-opening-hours__body { color: var(--cms-muted); margin-block-end: 1.5rem; } .cms-block-opening-hours__list { border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1.25rem 1.5rem; } .cms-block-opening-hours__row { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .55rem; } .cms-block-opening-hours__day { font-weight: 600; } .cms-block-opening-hours__hours { color: var(--cms-muted); text-align: end; font-variant-numeric: tabular-nums; } .cms-block-opening-hours__note { margin-block-start: 1.25rem; color: var(--cms-muted); font-size: .9rem; } /* booking */ .cms-block-booking { margin-block: var(--cms-space); display: grid; gap: 2rem; } .cms-block-booking__day { display: grid; gap: .85rem; } .cms-block-booking__date { margin: 0; font-size: 1.2rem; } .cms-block-booking__date::before { display: none; } .cms-block-booking__times { display: flex; flex-wrap: wrap; gap: .5rem; } .cms-block-booking__slot { display: inline-block; text-decoration: none; padding: .65rem 1.15rem; font-weight: 500; font-size: .95rem; font-variant-numeric: tabular-nums; border: 1px solid var(--cms-border); border-radius: var(--cms-radius-sm); background: var(--cms-bg); color: var(--cms-fg); transition: border-color .16s ease, background .16s ease, color .16s ease; } .cms-block-booking__slot:hover, .cms-block-booking__slot:focus { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .cms-block-booking__slot.is-unavailable { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; color: var(--cms-muted); background: var(--cms-surface); border-style: dashed; text-decoration: line-through; cursor: default; } .cms-block-booking__slot.is-unavailable:hover, .cms-block-booking__slot.is-unavailable:focus { background: var(--cms-surface); border-color: var(--cms-border); color: var(--cms-muted); } .cms-block-booking__closed { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .cms-block-booking__chosen { margin: 0 0 1.75rem; padding: 1rem 1.25rem; background: var(--cms-surface); border-radius: var(--cms-radius); } .cms-block-booking__paging { margin-block-start: 2.5rem; display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: .9rem; } /* --- shared listing bits ------------------------------------------------- */ .cms-listing__title { font-family: var(--cms-display); font-weight: 600; font-size: 1.15rem; text-decoration: none; color: var(--cms-fg); } .cms-listing__meta { margin: .4rem 0 0; color: var(--cms-muted); font-size: .875rem; } .cms-listing__facts { margin: .5rem 0 0; font-family: var(--cms-display); font-weight: 600; font-size: 1.05rem; color: var(--primary); } .cms-listing__summary { margin: .7rem 0 0; color: var(--cms-muted); } .cms-listing__more { margin: 1rem 0 0; font-weight: 600; } /* --- a photograph behind a banner --------------------------------------- */ /* * The scrim's colour. Its opacity is in _shared/base.css, because how dark * "medium" needs to be is a contrast decision and the same for every theme. */ :root { --cms-scrim: #0f172a; } /* * WITH A PICTURE, THE BLOCK IS ALWAYS LIGHT TEXT ON A DARK SCRIM. * * Not "inherit whatever this theme normally uses". Contrast must not depend on * which photograph a customer happens to upload — this theme's own hero and CTA * are designed against a known background, and a bright sky behind either * produces an unreadable headline that looks fine to everyone except the person * trying to read it. * * Written against `.cms-has-bg` rather than per block, so the hero, the call to * action and anything that gains a picture later are all covered by one rule. * The descendant selectors are two levels deep, which beats this theme's own * one-class colouring of those headings. */ .cms-has-bg { background-image: none; color: #f8fafc; } .cms-has-bg h1, .cms-has-bg h2, .cms-has-bg h3 { color: #ffffff; } .cms-has-bg p, .cms-has-bg li { color: rgb(255 255 255 / .88); } .cms-has-bg a { color: #ffffff; } /* A theme's own hero decoration must not draw over a photograph. */ .cms-has-bg::before, .cms-has-bg::after { display: none; } /* * A slide composed like the hero: words held in the middle of the frame, at the * hero's own scale rather than a caption's. */ .cms-block-slider--caption-center .cms-block-slider__headline { font-size: clamp(2.25rem, 5.5vw, 4rem); max-width: 18ch; } .cms-block-slider--caption-center .cms-block-slider__body { font-size: 1.15rem; max-width: var(--cms-measure); } .cms-block-slider--caption-center .cms-block-slider__caption { display: flex; flex-direction: column; align-items: flex-start; } /* --- the real public pages ----------------------------------------------- */ .cms-page__back { margin: 0 0 1rem; font-weight: 600; font-size: .9rem; } .cms-page__lede { color: var(--cms-muted); max-width: var(--cms-measure); font-size: 1.15rem; } .cms-page__facts { font-family: var(--cms-display); font-weight: 600; font-size: 1.25rem; color: var(--primary); } .cms-page__body { max-width: var(--cms-measure); margin-block-start: 1.75rem; } .cms-page__media { border-radius: var(--cms-radius-lg); margin-block: 2rem; box-shadow: var(--cms-shadow); } .cms-page__note { color: var(--cms-muted); font-size: .9rem; } .cms-page__section-heading { font-size: 1.75rem; margin-block-start: 0; } .cms-page__list { display: grid; gap: 1rem; margin-block-start: 2rem; } .cms-page__form { display: grid; gap: 1.15rem; max-width: 38rem; } .cms-placeholder__heading { margin: 0 0 .85rem; font-size: clamp(2.25rem, 6vw, 3.5rem); } /* --- footer -------------------------------------------------------------- */ .cms-footer { border-block-start: 1px solid var(--cms-border); padding-block: 4rem 2.5rem; color: var(--cms-muted); font-size: .9375rem; } .cms-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-block-end: 3rem; } .cms-footer__name { margin: 0 0 .35rem; font-family: var(--cms-display); font-weight: 600; font-size: 1.1rem; color: var(--cms-fg); } .cms-footer__tagline { margin: 0 0 1rem; font-size: .9rem; } .cms-footer__contact { display: grid; gap: .4rem; font-style: normal; } .cms-footer__heading { margin: 0 0 .85rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cms-fg); } .cms-footer__links { display: grid; gap: .5rem; } .cms-footer-social { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0 0 1.5rem; } .cms-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between; padding-block-start: 2rem; border-block-start: 1px solid var(--cms-border); font-size: .875rem; } .cms-footer__legal p { margin: 0; } .cms-footer--rich .cms-footer__brand { padding: 1.5rem; background: var(--cms-surface); border-radius: var(--cms-radius); } /* --- layout variants ----------------------------------------------------- */ .cms-layout--full-width .cms-main > .cms-shell { max-width: none; } .cms-layout--landing .cms-main { padding-block-start: 0; } /* --- the menu, at depth (phase 6) ---------------------------------------- * * Mechanics — the flyout positioning, the drawer, :focus-within — are in * _shared/base.css. This is skin only: what the panel is made of, and the * spacing between items. * * A floating submenu MUST carry its own background. It sits over page content, * so a transparent one is two paragraphs printed on top of each other — legible * in a screenshot of an empty page and unreadable on a real one. * ---------------------------------------------------------------------- */ .cms-nav__list { gap: 1.75rem; } .cms-nav__submenu { background: var(--cms-bg); border: 1px solid var(--cms-border); border-radius: var(--cms-radius); box-shadow: var(--cms-shadow-lg); padding: .5rem; } .cms-nav__submenu .cms-nav__list { gap: 0; } .cms-nav__submenu .cms-nav__link { display: block; padding: .5rem .75rem; white-space: nowrap; } .cms-nav__disclosure { padding-inline: .35rem; } /* The section a visitor is in, and the page they are on. */ .cms-nav__item--current > .cms-nav__link { color: var(--cms-fg); font-weight: 600; } .cms-nav__item--in-branch > .cms-nav__link { color: var(--cms-fg); } @media (max-width: 47.999em) { .cms-header .cms-shell { flex-wrap: wrap; } /* In the drawer the panel is part of the list, not a card over it. */ .cms-nav { flex-basis: 100%; padding-block: .75rem; } .cms-nav__submenu { background: none; border: 0; box-shadow: none; padding-block: 0; padding-inline-start: 1rem; } .cms-nav__submenu .cms-nav__link { white-space: normal; } .cms-nav__list { gap: .25rem; } .cms-nav__item { padding-block: .15rem; } } /* --- map, video gallery and gallery captions (phase 6) ------------------- */ .cms-block-map__heading, .cms-block-video-gallery__heading { font-size: 1.5rem; margin-bottom: 1rem; } .cms-block-map__body, .cms-block-video-gallery__body { max-width: var(--cms-measure); color: var(--cms-muted); margin-bottom: 1.5rem; } .cms-block-map__frame { border-radius: var(--cms-radius, 0); background: var(--cms-surface); } .cms-block-map__link { margin-top: .85rem; font-size: .9rem; } .cms-block-map__link a { color: var(--cms-muted); } .cms-block-video-gallery__tile { background: var(--cms-surface); border-radius: var(--cms-radius, 0); } .cms-block-video-gallery__poster--placeholder { background: var(--cms-surface-2, var(--cms-surface)); } .cms-block-video-gallery__title { font-size: .95rem; font-weight: 600; } .cms-block-video-gallery__frame { border-radius: var(--cms-radius, 0); } .cms-block-gallery__link { border-radius: var(--cms-radius, 0); overflow: hidden; } .cms-block-gallery__caption { color: var(--cms-muted); font-size: .8125rem; line-height: 1.4; } /* --- blog and news (phase 6) --------------------------------------------- */ .cms-block-blog-grid__heading { font-size: 1.5rem; } .cms-block-blog-grid__body, .cms-block-blog-grid__empty { max-inline-size: var(--cms-measure); color: var(--cms-muted); margin-block-end: 1.5rem; } .cms-block-blog-grid__thumb, .cms-blog__thumb { border-radius: var(--cms-radius, 0); } .cms-block-blog-grid__category, .cms-blog__category { align-self: flex-start; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .cms-block-blog-grid__title, .cms-blog__title { font-family: inherit; font-size: 1.125rem; margin: 0; } .cms-block-blog-grid__title a, .cms-blog__title a { color: var(--cms-fg); text-decoration: none; } .cms-block-blog-grid__title a:hover, .cms-blog__title a:hover { color: var(--primary); } .cms-block-blog-grid__meta, .cms-blog__meta { color: var(--cms-muted); font-size: .8125rem; margin: 0; } .cms-block-blog-grid__summary, .cms-blog__summary { color: var(--cms-muted); margin: 0; } .cms-block-blog-grid__all { margin-block-start: 2rem; } .cms-blog__filter { padding: .35rem .85rem; border: 1px solid var(--cms-border); border-radius: 999px; color: var(--cms-muted); font-size: .85rem; text-decoration: none; } .cms-blog__filter--current { background: var(--cms-fg); border-color: var(--cms-fg); color: var(--cms-bg); } .cms-post__title { font-size: 2rem; } .cms-post__meta { color: var(--cms-muted); font-size: .875rem; } .cms-post__header { margin-block-end: 2rem; } .cms-post__media { border-radius: var(--cms-radius, 0); margin-block-end: 2rem; } .cms-post__back { margin-block-start: 2.5rem; } /* --- posts: list and split layouts (phase 6) ----------------------------- */ .cms-block-blog-grid--list .cms-block-blog-grid__item, .cms-block-blog-grid--split .cms-block-blog-grid__item { padding-block-end: 1.5rem; border-block-end: 1px solid var(--cms-border); } .cms-block-blog-grid--list .cms-block-blog-grid__item:last-child, .cms-block-blog-grid--split .cms-block-blog-grid__item:last-child { border-block-end: 0; padding-block-end: 0; } .cms-block-blog-grid--list .cms-block-blog-grid__title { font-size: 1.05rem; } .cms-block-blog-grid__search .cms-btn { flex: none; } .cms-block-blog-grid__clear { color: var(--cms-muted); font-size: .875rem; text-decoration: none; } .cms-block-blog-grid__clear:hover { color: var(--cms-fg); } .cms-pagination__link { border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 0); color: var(--cms-muted); font-size: .875rem; } .cms-pagination__link:hover { color: var(--cms-fg); border-color: var(--cms-fg); } .cms-pagination__link--current { background: var(--cms-fg); border-color: var(--cms-fg); color: var(--cms-bg); font-weight: 600; } .cms-pagination__link--disabled:hover { color: var(--cms-muted); border-color: var(--cms-border); }