/*
* Case switcher.
*
* Same rules as every component stylesheet: design-system `--btx-*` tokens
* only, a fallback on every var(). See cta-button/style.css for the full note.
*
* Two surfaces are in play — the band and the filled card — and the ink for
* each is computed in PHP against whatever an editor picked, arriving as
* `--btxc-case-switch-*`. Nothing here names a colour token for type.
*
* THE JOIN WITH THE HERO
*
* This block sits directly on top of a hero painted with the same background,
* and the two are meant to read as one ground — the same arrangement
* `service-switcher` makes and for the same reason. So there is no bottom
* radius, no bottom border and only a breathing gap under the cards: nothing
* may draw attention to the seam.
*/
@layer bertex-components {
.btxc-case-switch {
--btxc-case-switch-bg: transparent;
--btxc-case-switch-ink: var( --btx-color-primary-1, #1a2744 );
--btxc-case-switch-quiet: var( --btx-color-primary-1-light-40, #2e4578 );
--btxc-case-switch-accent: var( --btxc-case-switch-quiet );
--btxc-case-switch-current-bg: var( --btx-color-text-bg-1, #f9fafb );
--btxc-case-switch-current-ink: var( --btx-color-primary-1, #1a2744 );
--btxc-case-switch-current-quiet: var( --btx-color-primary-1-light-40, #2e4578 );
box-sizing: border-box;
/*
* Split rather than shorthand, for the same reason the hero and the
* service switcher split theirs: when this block leads the document the
* site header overlays it, and the top edge has to clear a bar only the
* host template can measure.
*
* `--btxc-case-switch-offset-top` is never given a value here, only a
* fallback at the point of use — a default declared in this layer would
* beat a theme's, which is always the earlier layer.
*/
padding-block-start: calc(
var( --btx-spacing-m, 1.5rem ) + var( --btxc-case-switch-offset-top, 0px )
);
padding-block-end: var( --btx-spacing-xs, 1rem );
padding-inline: var( --btx-spacing-m, 1.25rem );
background: var( --btxc-case-switch-bg );
color: var( --btxc-case-switch-ink );
}
/*
* The section is the background box and `__inner` caps the content — the
* same split the hero and the service switcher make, so "full screen width"
* is the section shedding its cap while the content inside stays put.
*/
.btxc-case-switch--width-wide {
max-width: var( --btx-max-width, 1440px );
margin-inline: auto;
}
.btxc-case-switch--width-full {
max-width: none;
}
.btxc-case-switch__inner {
box-sizing: border-box;
max-width: var( --btx-max-width, 1440px );
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var( --btx-spacing-s, 1rem );
}
/* ── Header ────────────────────────────────────────────────────────── */
/*
* Eyebrow and intro on one baseline, wrapping to two lines when the band
* is narrow. A rather than a heading: it introduces the navigation, it
* does not open a section, and putting an
above the page's is
* how a case study ends up with its outline inverted.
*/
.btxc-case-switch__head {
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var( --btx-spacing-xs, 0.75rem );
}
/*
* Bare `monospace`, the same deliberate exception the other components
* make: the design system publishes a heading family and a body family and
* no third. See the note in booking-panel/style.css.
*/
.btxc-case-switch__eyebrow {
font-family: monospace;
font-size: var( --btx-font-body-xs, 0.8125rem );
line-height: var( --btx-line-height-heading, 1.2 );
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --btxc-case-switch-accent );
}
.btxc-case-switch__intro {
font-size: var( --btx-font-body-s, 0.9375rem );
line-height: var( --btx-line-height-body, 1.6 );
color: var( --btxc-case-switch-quiet );
}
/* ── The cards ─────────────────────────────────────────────────────── */
/*
* `auto-fit` rather than a fixed three, because the count is whatever is
* published and the cap is a prop. At four the cards are already at their
* narrowest readable width; past that the row wraps rather than shrinking
* the type, which is the failure that actually matters here.
*/
.btxc-case-switch__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
gap: var( --btx-spacing-xxs, 0.875rem );
}
.btxc-case-switch__item {
display: flex;
}
/*
* `!important` on the colour, and no `wp-element-button` on the markup.
*
* These are links, so theme.json's unlayered
* `a:where(:not(.wp-element-button)){color:…}` rule would otherwise take
* them, and unlayered beats every cascade layer whatever the specificity.
* Core's opt-out class is the wrong tool — it opts out of the link colour
* by opting into theme.json's button styling, which owns background,
* border, padding and typography, and would paint the current card and the
* ones that are not identically. Same trade service-switcher makes; the
* note there has the long version.
*/
.btxc-case-switch__card {
box-sizing: border-box;
flex: 1;
display: flex;
flex-direction: column;
gap: var( --btx-spacing-xxxs, 0.5rem );
padding: var( --btx-spacing-xs, 1.25rem ) var( --btx-spacing-s, 1.5rem );
background: transparent;
border: 1px solid color-mix( in srgb, var( --btxc-case-switch-ink ) 28%, transparent );
border-radius: var( --btx-border-radius-lg, 0.75rem );
text-decoration: none;
color: var( --btxc-case-switch-ink ) !important;
transition:
background 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;
}
.btxc-case-switch__card:hover {
background: color-mix( in srgb, var( --btxc-case-switch-ink ) 10%, transparent );
border-color: color-mix( in srgb, var( --btxc-case-switch-ink ) 50%, transparent );
}
.btxc-case-switch__card:focus-visible {
outline: 2px solid var( --btxc-case-switch-ink );
outline-offset: 3px;
}
.btxc-case-switch__label {
font-family: monospace;
font-size: var( --btx-font-body-xs, 0.75rem );
line-height: var( --btx-line-height-heading, 1.2 );
letter-spacing: 0.1em;
text-transform: uppercase;
color: var( --btxc-case-switch-quiet );
}
.btxc-case-switch__title {
font-family: var( --btx-font-heading-family, "Outfit", sans-serif );
font-size: var( --btx-font-heading-m, 1.3125rem );
font-weight: 600;
line-height: var( --btx-line-height-heading, 1.2 );
text-wrap: pretty;
}
.btxc-case-switch__meta {
font-size: var( --btx-font-body-s, 0.875rem );
line-height: var( --btx-line-height-body, 1.5 );
color: var( --btxc-case-switch-quiet );
}
/*
* The page you are on. Its type is measured against the fill in PHP, so a
* pale card on a navy band gets near-black ink without a second setting.
* Still a link, and still marked with aria-current — colour alone is not a
* state anyone can hear.
*
* The lift is small on purpose: this card has to read as *selected*, not as
* the one being hovered.
*/
.btxc-case-switch__card--current {
background: var( --btxc-case-switch-current-bg );
border-color: transparent;
color: var( --btxc-case-switch-current-ink ) !important;
box-shadow: 0 0.625rem 1.625rem rgb( 0 0 0 / 28% );
}
.btxc-case-switch__card--current:hover {
background: var( --btxc-case-switch-current-bg );
border-color: transparent;
transform: none;
}
.btxc-case-switch__card--current .btxc-case-switch__label,
.btxc-case-switch__card--current .btxc-case-switch__meta {
color: var( --btxc-case-switch-current-quiet );
}
.btxc-case-switch__card--current:focus-visible {
outline-color: var( --btxc-case-switch-current-bg );
}
/* ── Narrow ────────────────────────────────────────────────────────── */
/*
* Below the grid's own breaking point the cards are already one per row,
* which is right — three stacked cards is a short list, and the reader
* scrolls past it to the headline either way. Nothing to do but close the
* gaps a little.
*/
@media ( width < 48rem ) {
.btxc-case-switch__card {
padding: var( --btx-spacing-xxs, 1rem ) var( --btx-spacing-xs, 1.125rem );
}
}
}
@media ( prefers-reduced-motion: reduce ) {
@layer bertex-components {
.btxc-case-switch__card {
transition: none;
}
}
}