@charset "UTF-8";
/* scss/site.scss */
/* scss/base/_tokens.scss
Guillemet design tokens — brand-neutral defaults.
Sites theme these by overriding the CSS custom properties on .
Never hard-code brand color values in component partials; consume tokens. */
/* Single source of truth */
/* Inclusive max for a breakpoint “band” (next-min - epsilon) */
/* Core media helper */
/* Common “human” mixins */
/* Spacing map stays available to Sass consumers (layouts, switch utilities).
md..3xl are the mobile tier; the custom properties step up at the shared
tablet and desktop breakpoints below. This keeps layout rhythm tied to the
component system instead of the viewport continuing to pull it apart. */
@layer tokens {
:root {
/* ------------------------------------------------------------------
COLOR — neutral defaults (deep slate-teal "utility steel" family).
Brands override: primary family, accent, paper/wash surfaces, ink.
------------------------------------------------------------------ */
/* Ink ramp (text + deep fields) */
--color-ink: #14201f;
--color-ink-soft: #3d4c4a;
--color-ink-faint: #6b7877;
/* Primary family */
--color-primary: #256b6f; /* workhorse brand color */
--color-primary-deep: #123c40; /* deep color fields, footers, hero floors */
--color-primary-bright: #3d9298; /* links/hover accents on dark fields */
/* Accent (disciplined use: eyebrows, markers, motifs, key CTAs) */
--color-accent: #e8b53a;
--color-accent-ink: #423104; /* readable text on accent fills */
/* Surfaces */
--color-paper: #f7f6f1; /* page background: warm paper, not #fff */
--color-card: #fffefb; /* raised card surface */
--color-wash: #e8f0ee; /* tinted band background */
--color-line: #ccd8d5; /* hairlines / borders */
--color-line-on-dark: color-mix(in srgb, #fff 22%, transparent);
--color-fg-on-dark: #ffffff;
/* Feedback */
--color-success: #197b43;
--color-alert: #b26a00;
--color-error: #b03018;
/* ------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------ */
--header-height: clamp(60px, 8vw, 80px);
--nav-h: var(--header-height);
/* Spacing vars from map */
--space-nn: 0;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.25rem;
--space-xl: 1.75rem;
--space-2xl: 2.5rem;
--space-3xl: 3.25rem;
--space-dy: 1.25rem;
--space-dy: var(--space-lg);
/* Section rhythm (vertical paddings used by Section densities) */
--section-pad-compact: 1.75rem;
--section-pad: 2.5rem;
--section-pad-spacious: 3rem;
/* Container padding follows the same three-tier spacing staircase. */
--container-pad-inline: 1rem;
/* ------------------------------------------------------------------
RADII — droplet-derived scale. --radius-drop is the signature shape:
three generous corners and one near-square "drip" corner. The contrast
is deliberately exaggerated so the shape reads as intentional; it is
reserved for prominent brand surfaces. Individual components may use
the same three-round, one-tight rhythm at an appropriate scale.
------------------------------------------------------------------ */
--radius-xs: 3px;
--radius-sm: 6px;
--radius-md: 10px; /* default */
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
--radius-drop: 2.25rem 2.25rem 2.25rem 4px;
--radius-drop-sm: 1.25rem 1.25rem 1.25rem 3px;
/* Back-compat alias */
--radius: var(--radius-md);
/* ------------------------------------------------------------------
WAVE SEAMS — both source SVGs are bottom-filled silhouettes.
The crest is reserved for hero bottoms. The no-crest source is the
system default and flips vertically when it carves a section top.
------------------------------------------------------------------ */
--wave-mask: url("/media/svg/waves/wave-no-crest.svg");
--wave-mask-hero: url("/media/svg/waves/wave-with-crest.svg");
--wave-h-hero: clamp(2.6rem, 6vw, 4.5rem);
--wave-h-section: clamp(1.3rem, 3vw, 2.25rem);
--wave-min-inline-size: 800px;
--wave-inline-size: max(100%, var(--wave-min-inline-size));
/* ------------------------------------------------------------------
MOTION — durations + easings. Honor prefers-reduced-motion below.
------------------------------------------------------------------ */
--dur-quick: 110ms;
--dur-base: 200ms;
--dur-slow: 340ms;
--ease-out: cubic-bezier(.16, .84, .26, 1);
--ease-in-out: cubic-bezier(.6, 0, .3, 1);
--ease-spring: cubic-bezier(.2, 1.5, .3, 1);
/* Back-compat aliases */
--anim-transition: var(--dur-quick);
--anim-transition-slow: var(--dur-base);
/* ------------------------------------------------------------------
CONTAINERS
------------------------------------------------------------------ */
--container-max-xs: 600px;
--container-max-sm: 800px;
--container-max-md: 1000px;
--container-max-lg: 1200px;
--container-max-xl: 1500px;
--gutter: 1rem;
}
@media (min-width: 600px) {
:root {
--space-lg: 1.375rem;
--space-xl: 2.25rem;
--space-2xl: 3.25rem;
--space-3xl: 4rem;
--section-pad-compact: 2rem;
--section-pad: 3rem;
--section-pad-spacious: 3.5rem;
--container-pad-inline: 1.5rem;
--gutter: 2rem;
}
}
@media (min-width: 1200px) {
:root {
--space-lg: 1.5rem;
--space-xl: 2.75rem;
--space-2xl: 4rem;
--space-3xl: 5rem;
--section-pad-compact: 2.25rem;
--section-pad: 3.25rem;
--section-pad-spacious: 4rem;
--container-pad-inline: 2rem;
}
}
:root {
/* Edge gutters per container size (xs..xl) and defaults (lg) */
--container-w-xs: min(100% - calc(2 * var(--container-pad-inline)), var(--container-max-xs));
--edge-raw-xs: calc((100% - var(--container-w-xs)) / 2);
--edge-left-xs: max(var(--edge-raw-xs), env(safe-area-inset-left));
--edge-right-xs: max(var(--edge-raw-xs), env(safe-area-inset-right));
--container-w-sm: min(100% - calc(2 * var(--container-pad-inline)), var(--container-max-sm));
--edge-raw-sm: calc((100% - var(--container-w-sm)) / 2);
--edge-left-sm: max(var(--edge-raw-sm), env(safe-area-inset-left));
--edge-right-sm: max(var(--edge-raw-sm), env(safe-area-inset-right));
--container-w-md: min(100% - calc(2 * var(--container-pad-inline)), var(--container-max-md));
--edge-raw-md: calc((100% - var(--container-w-md)) / 2);
--edge-left-md: max(var(--edge-raw-md), env(safe-area-inset-left));
--edge-right-md: max(var(--edge-raw-md), env(safe-area-inset-right));
--container-w-lg: min(100% - calc(2 * var(--container-pad-inline)), var(--container-max-lg));
--edge-raw-lg: calc((100% - var(--container-w-lg)) / 2);
--edge-left-lg: max(var(--edge-raw-lg), env(safe-area-inset-left));
--edge-right-lg: max(var(--edge-raw-lg), env(safe-area-inset-right));
--container-w-xl: min(100% - calc(2 * var(--container-pad-inline)), var(--container-max-xl));
--edge-raw-xl: calc((100% - var(--container-w-xl)) / 2);
--edge-left-xl: max(var(--edge-raw-xl), env(safe-area-inset-left));
--edge-right-xl: max(var(--edge-raw-xl), env(safe-area-inset-right));
--container-max: var(--container-max-lg);
--container-w: var(--container-w-lg);
--edge-raw: var(--edge-raw-lg);
--edge-left: var(--edge-left-lg);
--edge-right: var(--edge-right-lg);
/* Switch (auto stack) thresholds */
--switch-xs: 22rem;
--switch-sm: 30rem;
--switch-md: 40rem;
--switch-lg: 52rem;
--switch-xl: 64rem;
/* ------------------------------------------------------------------
TYPE SCALE — fluid, clamp-based. Root = 18px.
xs..xl are the legacy step names; 2xl/3xl/display extend upward
for the oversized display voice.
------------------------------------------------------------------ */
font-size: 18px;
--font-2xs: .72rem; /* 13px — eyebrows, meta */
--font-xs: .8rem; /* 14.4px — labels, buttons */
--font-sm: .95rem; /* 17px — body default */
--font-md: 1.1rem; /* 20px — lead-ish, card headings */
--font-lg: clamp(1.24rem, 1.12rem + .55vw, 1.52rem); /* h3 / small headings */
--font-xl: clamp(1.65rem, 1.38rem + 1.25vw, 2.3rem); /* h2 */
--font-2xl: clamp(2.1rem, 1.7rem + 1.9vw, 3.1rem); /* section display */
--font-3xl: clamp(2.5rem, 2rem + 2.7vw, 4rem); /* hero display */
--font-display-max: clamp(2.75rem, 2.05rem + 3.9vw, 4rem); /* home hero only */
--font-card-heading: var(--font-md);
/* Text rhythm + readable measures. These belong to prose roles rather
than individual components, so the same body variation behaves the
same way in a hero, form, card, or editorial composition. */
--leading-compact: 1.45;
--leading-body: 1.6;
--leading-loose: 1.7;
--measure-sm: 36ch;
--measure-md: 56ch;
--measure-lg: 68ch;
/* Eyebrow preset — typography is universal; components only vary color,
spacing context, and optional icon treatment. */
--eyebrow-font-size: var(--font-2xs);
--eyebrow-font-weight: 800;
--eyebrow-letter-spacing: .12em;
--eyebrow-line-height: 1.2;
/* Shared public-action scale. Both flat Guillemet buttons and the
site-owned depth treatment consume these tokens so a composition
cannot drift into a second control size. Compact form and icon-only
controls remain separate component roles. */
--button-control-font-size: var(--font-xs);
--button-control-padding-block: .95em;
--button-control-padding-inline: 1.5em;
--button-disabled-opacity: .48;
--button-disabled-saturation: .38;
/* Display voice metrics (consumed by typography + components).
Tuned for Montserrat: it runs wider and rounder than Poppins, so the
tracking is looser than the old Poppins values — over-tightening
makes the round counters collide. */
--display-tracking: -.01em;
--display-leading: .96;
/* Aliases */
--font-size-body: var(--font-sm);
/* Legacy heading-size aliases (resets still consume these) */
--font-size-h1: var(--font-3xl);
--font-size-h2: var(--font-xl);
--font-size-h3: var(--font-lg);
--font-size-h4: var(--font-md);
}
/* ------------------------------------------------------------------
DERIVED ALIASES — values computed from other tokens.
Declared on both :root and body: custom properties resolve their
var() references at the element where they are declared, so these
must also live on , where site themes override the base
tokens (body[data-brand]) — otherwise the aliases would freeze the
neutral :root defaults.
------------------------------------------------------------------ */
:root, body {
--color-primary-depth: color-mix(in srgb, var(--color-primary) 72%, black);
--color-secondary: var(--color-accent); /* legacy alias */
--color-secondary-depth: color-mix(in srgb, var(--color-secondary) 72%, black);
/* Legacy surface aliases (components still consume these) */
--color-bg-dark: var(--color-primary-deep);
--color-bg-light: var(--color-paper);
--color-bg: var(--color-bg-light);
--color-bg-muted: var(--color-wash);
/* Foreground aliases */
--color-fg-on-light: var(--color-ink);
--color-fg-heading-on-light: var(--color-ink);
--color-fg-heading: var(--color-fg-heading-on-light);
--color-fg: var(--color-fg-on-light);
/* Media overlay + photo treatment tokens */
--color-overlay: color-mix(in srgb, var(--color-primary-deep) 74%, transparent);
--treat-tint: var(--color-primary-deep); /* duotone shadow color */
--treat-tint-high: var(--color-primary-bright); /* duotone highlight color */
--treat-scrim: var(--color-primary-deep); /* gradient scrim base */
/* ----------------------------------------------------------------
ELEVATION — layered, ink-tinted (never flat gray drop shadows).
Depth logic: 1 = resting card, 2 = raised/hover, 3 = floating chrome.
---------------------------------------------------------------- */
--shadow-color: var(--color-ink);
--shadow-1:
0 1px 2px color-mix(in srgb, var(--shadow-color) 10%, transparent),
0 2px 6px color-mix(in srgb, var(--shadow-color) 7%, transparent);
--shadow-2:
0 2px 4px color-mix(in srgb, var(--shadow-color) 9%, transparent),
0 10px 24px -8px color-mix(in srgb, var(--shadow-color) 22%, transparent);
--shadow-3:
0 4px 10px color-mix(in srgb, var(--shadow-color) 10%, transparent),
0 24px 56px -16px color-mix(in srgb, var(--shadow-color) 30%, transparent);
/* Back-compat alias */
--shadow: var(--shadow-1);
/* Borders */
--border-hairline: 1px solid var(--color-line);
--border-hairline-on-dark: 1px solid var(--color-line-on-dark);
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-quick: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
}
}
}
/* scss/base/_resets.scss */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
max-width: 100%;
overflow-x: clip;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-body);
font-size: var(--font-size-body);
}
img, picture, video, canvas, svg {
display: block;
max-inline-size: 100%;
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p, ul, ol {
margin: 0;
line-height: var(--leading-body);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: 1.1;
font-family: var(--font-display);
}
h1 {
font-size: var(--font-size-h1);
}
h2 {
font-size: var(--font-size-h2);
}
h3 {
font-size: var(--font-size-h3);
}
h4 {
font-size: var(--font-size-h4);
}
:root {
scroll-padding-top: 80px;
} /* if you have a fixed header */
button {
font-size: var(--font-size-body);
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
/* scss/site.scss */
/* scss/base/_layouts.scss */
/* Stack utilities */
.v-stack, .v-stack--dy, .v-stack--3xl, .v-stack--2xl, .v-stack--xl, .v-stack--lg, .v-stack--md, .v-stack--sm, .v-stack--xs, .v-stack--nn {
display: flex;
flex-direction: column;
--flow-space: 0;
gap: var(--gap, var(--flow-space));
}
.h-stack, .h-stack--dy, .h-stack--3xl, .h-stack--2xl, .h-stack--xl, .h-stack--lg, .h-stack--md, .h-stack--sm, .h-stack--xs, .h-stack--nn {
display: flex;
flex-direction: row;
--flow-space: 0;
gap: var(--gap, var(--flow-space));
flex-wrap: wrap;
align-items: center;
}
.cluster, .cluster--dy, .cluster--3xl, .cluster--2xl, .cluster--xl, .cluster--lg, .cluster--md, .cluster--sm, .cluster--xs, .cluster--nn {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
--flow-space: var(--space-md);
gap: var(--gap, 0);
}
/* Reusable CTA grouping. The mobile-full modifier belongs on prominent
conversion groups (heroes, action bands, feature CTAs), not every button. */
.action-group {
--flow-space: var(--space-md);
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--gap, var(--flow-space));
min-inline-size: 0;
}
@media (max-width: calc(600px - 0.02px)) {
.action-group--mobile-full {
align-items: center;
flex-direction: column;
inline-size: 100%;
}
.action-group--mobile-full > .button,
.action-group--mobile-full > .button > .button__main {
inline-size: 100%;
}
}
.nowrap {
flex-wrap: nowrap !important;
}
.wrap {
flex-wrap: wrap !important;
}
/* Size modifiers (BEM): .v-stack--sm | .h-stack--lg | .cluster--md */
.v-stack--nn {
--flow-space: var(--space-nn);
}
.h-stack--nn {
--flow-space: var(--space-nn);
}
.cluster--nn {
--flow-space: var(--space-nn);
}
.v-stack--xs {
--flow-space: var(--space-xs);
}
.h-stack--xs {
--flow-space: var(--space-xs);
}
.cluster--xs {
--flow-space: var(--space-xs);
}
.v-stack--sm {
--flow-space: var(--space-sm);
}
.h-stack--sm {
--flow-space: var(--space-sm);
}
.cluster--sm {
--flow-space: var(--space-sm);
}
.v-stack--md {
--flow-space: var(--space-md);
}
.h-stack--md {
--flow-space: var(--space-md);
}
.cluster--md {
--flow-space: var(--space-md);
}
.v-stack--lg {
--flow-space: var(--space-lg);
}
.h-stack--lg {
--flow-space: var(--space-lg);
}
.cluster--lg {
--flow-space: var(--space-lg);
}
.v-stack--xl {
--flow-space: var(--space-xl);
}
.h-stack--xl {
--flow-space: var(--space-xl);
}
.cluster--xl {
--flow-space: var(--space-xl);
}
.v-stack--2xl {
--flow-space: var(--space-2xl);
}
.h-stack--2xl {
--flow-space: var(--space-2xl);
}
.cluster--2xl {
--flow-space: var(--space-2xl);
}
.v-stack--3xl {
--flow-space: var(--space-3xl);
}
.h-stack--3xl {
--flow-space: var(--space-3xl);
}
.cluster--3xl {
--flow-space: var(--space-3xl);
}
.v-stack--dy {
--flow-space: var(--space-dy);
}
.h-stack--dy {
--flow-space: var(--space-dy);
}
.cluster--dy {
--flow-space: var(--space-dy);
}
/* Switcher: auto-stack horizontal stacks when container is below a threshold
Use as: …
or …
- Side-by-side above threshold, full-width below threshold.
*/
/* Allow plain `.switch` for default (md) threshold */
.h-stack.switch, .switch.h-stack--nn, .switch.h-stack--xs, .switch.h-stack--sm, .switch.h-stack--md, .switch.h-stack--lg, .switch.h-stack--xl, .switch.h-stack--2xl, .switch.h-stack--3xl, .switch.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.switch > *, .switch.h-stack--nn > *, .switch.h-stack--xs > *, .switch.h-stack--sm > *, .switch.h-stack--md > *, .switch.h-stack--lg > *, .switch.h-stack--xl > *, .switch.h-stack--2xl > *, .switch.h-stack--3xl > *, .switch.h-stack--dy > * {
/* Intrinsic switch: side-by-side above threshold, full-width below */
flex-grow: 1;
flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
min-inline-size: 0;
}
/* Threshold modifiers (tokens from _tokens.scss) — can be used without `.switch`.
Only xs..xl thresholds exist as tokens (--switch-xs … --switch-xl). */
.h-stack.switch--xs, .switch--xs.h-stack--nn, .switch--xs.h-stack--xs, .switch--xs.h-stack--sm, .switch--xs.h-stack--md, .switch--xs.h-stack--lg, .switch--xs.h-stack--xl, .switch--xs.h-stack--2xl, .switch--xs.h-stack--3xl, .switch--xs.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.switch--xs > *, .switch--xs.h-stack--nn > *, .switch--xs.h-stack--xs > *, .switch--xs.h-stack--sm > *, .switch--xs.h-stack--md > *, .switch--xs.h-stack--lg > *, .switch--xs.h-stack--xl > *, .switch--xs.h-stack--2xl > *, .switch--xs.h-stack--3xl > *, .switch--xs.h-stack--dy > * {
/* Intrinsic switch: side-by-side above threshold, full-width below */
flex-grow: 1;
flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
min-inline-size: 0;
}
.h-stack.switch--xs, .switch--xs.h-stack--nn, .switch--xs.h-stack--xs, .switch--xs.h-stack--sm, .switch--xs.h-stack--md, .switch--xs.h-stack--lg, .switch--xs.h-stack--xl, .switch--xs.h-stack--2xl, .switch--xs.h-stack--3xl, .switch--xs.h-stack--dy {
--switch: var(--switch-xs);
}
.h-stack.switch--sm, .switch--sm.h-stack--nn, .switch--sm.h-stack--xs, .switch--sm.h-stack--sm, .switch--sm.h-stack--md, .switch--sm.h-stack--lg, .switch--sm.h-stack--xl, .switch--sm.h-stack--2xl, .switch--sm.h-stack--3xl, .switch--sm.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.switch--sm > *, .switch--sm.h-stack--nn > *, .switch--sm.h-stack--xs > *, .switch--sm.h-stack--sm > *, .switch--sm.h-stack--md > *, .switch--sm.h-stack--lg > *, .switch--sm.h-stack--xl > *, .switch--sm.h-stack--2xl > *, .switch--sm.h-stack--3xl > *, .switch--sm.h-stack--dy > * {
/* Intrinsic switch: side-by-side above threshold, full-width below */
flex-grow: 1;
flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
min-inline-size: 0;
}
.h-stack.switch--sm, .switch--sm.h-stack--nn, .switch--sm.h-stack--xs, .switch--sm.h-stack--sm, .switch--sm.h-stack--md, .switch--sm.h-stack--lg, .switch--sm.h-stack--xl, .switch--sm.h-stack--2xl, .switch--sm.h-stack--3xl, .switch--sm.h-stack--dy {
--switch: var(--switch-sm);
}
.h-stack.switch--md, .switch--md.h-stack--nn, .switch--md.h-stack--xs, .switch--md.h-stack--sm, .switch--md.h-stack--md, .switch--md.h-stack--lg, .switch--md.h-stack--xl, .switch--md.h-stack--2xl, .switch--md.h-stack--3xl, .switch--md.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.switch--md > *, .switch--md.h-stack--nn > *, .switch--md.h-stack--xs > *, .switch--md.h-stack--sm > *, .switch--md.h-stack--md > *, .switch--md.h-stack--lg > *, .switch--md.h-stack--xl > *, .switch--md.h-stack--2xl > *, .switch--md.h-stack--3xl > *, .switch--md.h-stack--dy > * {
/* Intrinsic switch: side-by-side above threshold, full-width below */
flex-grow: 1;
flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
min-inline-size: 0;
}
.h-stack.switch--md, .switch--md.h-stack--nn, .switch--md.h-stack--xs, .switch--md.h-stack--sm, .switch--md.h-stack--md, .switch--md.h-stack--lg, .switch--md.h-stack--xl, .switch--md.h-stack--2xl, .switch--md.h-stack--3xl, .switch--md.h-stack--dy {
--switch: var(--switch-md);
}
.h-stack.switch--lg, .switch--lg.h-stack--nn, .switch--lg.h-stack--xs, .switch--lg.h-stack--sm, .switch--lg.h-stack--md, .switch--lg.h-stack--lg, .switch--lg.h-stack--xl, .switch--lg.h-stack--2xl, .switch--lg.h-stack--3xl, .switch--lg.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.switch--lg > *, .switch--lg.h-stack--nn > *, .switch--lg.h-stack--xs > *, .switch--lg.h-stack--sm > *, .switch--lg.h-stack--md > *, .switch--lg.h-stack--lg > *, .switch--lg.h-stack--xl > *, .switch--lg.h-stack--2xl > *, .switch--lg.h-stack--3xl > *, .switch--lg.h-stack--dy > * {
/* Intrinsic switch: side-by-side above threshold, full-width below */
flex-grow: 1;
flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
min-inline-size: 0;
}
.h-stack.switch--lg, .switch--lg.h-stack--nn, .switch--lg.h-stack--xs, .switch--lg.h-stack--sm, .switch--lg.h-stack--md, .switch--lg.h-stack--lg, .switch--lg.h-stack--xl, .switch--lg.h-stack--2xl, .switch--lg.h-stack--3xl, .switch--lg.h-stack--dy {
--switch: var(--switch-lg);
}
.h-stack.switch--xl, .switch--xl.h-stack--nn, .switch--xl.h-stack--xs, .switch--xl.h-stack--sm, .switch--xl.h-stack--md, .switch--xl.h-stack--lg, .switch--xl.h-stack--xl, .switch--xl.h-stack--2xl, .switch--xl.h-stack--3xl, .switch--xl.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.switch--xl > *, .switch--xl.h-stack--nn > *, .switch--xl.h-stack--xs > *, .switch--xl.h-stack--sm > *, .switch--xl.h-stack--md > *, .switch--xl.h-stack--lg > *, .switch--xl.h-stack--xl > *, .switch--xl.h-stack--2xl > *, .switch--xl.h-stack--3xl > *, .switch--xl.h-stack--dy > * {
/* Intrinsic switch: side-by-side above threshold, full-width below */
flex-grow: 1;
flex-basis: calc((var(--switch, var(--switch-md)) - 100%) * 999);
min-inline-size: 0;
}
.h-stack.switch--xl, .switch--xl.h-stack--nn, .switch--xl.h-stack--xs, .switch--xl.h-stack--sm, .switch--xl.h-stack--md, .switch--xl.h-stack--lg, .switch--xl.h-stack--xl, .switch--xl.h-stack--2xl, .switch--xl.h-stack--3xl, .switch--xl.h-stack--dy {
--switch: var(--switch-xl);
}
/* Child behavior helpers */
.grow {
flex: 1 1 auto;
}
.nogrow {
flex: 0 0 auto;
}
.push {
margin-inline-start: auto;
}
/* Width utilities: near-full width on mobile, capped on desktop
Use as: .w--xs | .w--sm | .w--md | .w--lg | .w--xl
Full width (no max) use: .w--full
*/
.w--full {
inline-size: 100%;
margin-inline: 0;
}
.w--xs {
inline-size: min(100% - 2 * var(--container-pad-inline), var(--container-max));
margin-inline: auto;
--container-max: var(--container-max-xs);
}
.w--xs--full {
inline-size: min(100%, var(--container-max));
margin-inline: auto;
padding-left: max(0%, env(safe-area-inset-left));
padding-right: max(0%, env(safe-area-inset-right));
--container-max: var(--container-max-xs);
}
.w--xs--full > .content {
max-inline-size: var(--container-max);
margin-inline: auto;
inline-size: 100%;
}
.w--sm {
inline-size: min(100% - 2 * var(--container-pad-inline), var(--container-max));
margin-inline: auto;
--container-max: var(--container-max-sm);
}
.w--sm--full {
inline-size: min(100%, var(--container-max));
margin-inline: auto;
padding-left: max(0%, env(safe-area-inset-left));
padding-right: max(0%, env(safe-area-inset-right));
--container-max: var(--container-max-sm);
}
.w--sm--full > .content {
max-inline-size: var(--container-max);
margin-inline: auto;
inline-size: 100%;
}
.w--md {
inline-size: min(100% - 2 * var(--container-pad-inline), var(--container-max));
margin-inline: auto;
--container-max: var(--container-max-md);
}
.w--md--full {
inline-size: min(100%, var(--container-max));
margin-inline: auto;
padding-left: max(0%, env(safe-area-inset-left));
padding-right: max(0%, env(safe-area-inset-right));
--container-max: var(--container-max-md);
}
.w--md--full > .content {
max-inline-size: var(--container-max);
margin-inline: auto;
inline-size: 100%;
}
.w--lg {
inline-size: min(100% - 2 * var(--container-pad-inline), var(--container-max));
margin-inline: auto;
--container-max: var(--container-max-lg);
}
.w--lg--full {
inline-size: min(100%, var(--container-max));
margin-inline: auto;
padding-left: max(0%, env(safe-area-inset-left));
padding-right: max(0%, env(safe-area-inset-right));
--container-max: var(--container-max-lg);
}
.w--lg--full > .content {
max-inline-size: var(--container-max);
margin-inline: auto;
inline-size: 100%;
}
.w--xl {
inline-size: min(100% - 2 * var(--container-pad-inline), var(--container-max));
margin-inline: auto;
--container-max: var(--container-max-xl);
}
.w--xl--full {
inline-size: min(100%, var(--container-max));
margin-inline: auto;
padding-left: max(0%, env(safe-area-inset-left));
padding-right: max(0%, env(safe-area-inset-right));
--container-max: var(--container-max-xl);
}
.w--xl--full > .content {
max-inline-size: var(--container-max);
margin-inline: auto;
inline-size: 100%;
}
/* Safe-area aware content padding */
.w--xs > .content,
.w--xs--full > .content,
.w--xs.content {
padding-left: max(var(--container-pad-inline), env(safe-area-inset-left));
padding-right: max(var(--container-pad-inline), env(safe-area-inset-right));
}
.w--sm > .content,
.w--sm--full > .content,
.w--sm.content {
padding-left: max(var(--container-pad-inline), env(safe-area-inset-left));
padding-right: max(var(--container-pad-inline), env(safe-area-inset-right));
}
.w--md > .content,
.w--md--full > .content,
.w--md.content {
padding-left: max(var(--container-pad-inline), env(safe-area-inset-left));
padding-right: max(var(--container-pad-inline), env(safe-area-inset-right));
}
.w--lg > .content,
.w--lg--full > .content,
.w--lg.content {
padding-left: max(var(--container-pad-inline), env(safe-area-inset-left));
padding-right: max(var(--container-pad-inline), env(safe-area-inset-right));
}
.w--xl > .content,
.w--xl--full > .content,
.w--xl.content {
padding-left: max(var(--container-pad-inline), env(safe-area-inset-left));
padding-right: max(var(--container-pad-inline), env(safe-area-inset-right));
}
/* Bleed a child to container edges without entering unsafe areas */
.bleed-inline {
margin-inline-start: calc(-1 * max(var(--container-pad-inline), env(safe-area-inset-left)));
margin-inline-end: calc(-1 * max(var(--container-pad-inline), env(safe-area-inset-right)));
}
.absolute-stretch {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.absolute-center {
position: absolute;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
top: 50%;
transform: translateY(-50%);
}
.absolute-contain {
position: absolute !important;
height: 100%;
width: 100%;
object-fit: contain;
}
.relative {
position: relative;
}
/* Grid helpers: standalone utilities for 2–5 column grids */
.grid--2 {
display: grid;
row-gap: var(--gap, var(--space-md));
column-gap: var(--gap, var(--space-md));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
display: grid;
row-gap: var(--gap, var(--space-md));
column-gap: var(--gap, var(--space-md));
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
display: grid;
row-gap: var(--gap, var(--space-md));
column-gap: var(--gap, var(--space-md));
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid--5 {
display: grid;
row-gap: var(--gap, var(--space-md));
column-gap: var(--gap, var(--space-md));
grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Responsive: stack to 1 column under 600px for all grids */
@media (max-width: 599px) {
.grid--2, .grid--3, .grid--4, .grid--5 {
grid-template-columns: 1fr;
}
}
/* Gap utilities usable with flex/grid stacks and grids */
.gap--nn {
--gap: var(--space-nn);
}
.gap--xs {
--gap: var(--space-xs);
}
.gap--sm {
--gap: var(--space-sm);
}
.gap--md {
--gap: var(--space-md);
}
.gap--lg {
--gap: var(--space-lg);
}
.gap--xl {
--gap: var(--space-xl);
}
.gap--2xl {
--gap: var(--space-2xl);
}
.gap--3xl {
--gap: var(--space-3xl);
}
.gap--dy {
--gap: var(--space-dy);
}
/* Dual-axis gap utilities (row-gap / column-gap) */
.gap--nn--nn {
row-gap: var(--space-nn);
column-gap: var(--space-nn);
}
.gap--nn--xs {
row-gap: var(--space-nn);
column-gap: var(--space-xs);
}
.gap--nn--sm {
row-gap: var(--space-nn);
column-gap: var(--space-sm);
}
.gap--nn--md {
row-gap: var(--space-nn);
column-gap: var(--space-md);
}
.gap--nn--lg {
row-gap: var(--space-nn);
column-gap: var(--space-lg);
}
.gap--nn--xl {
row-gap: var(--space-nn);
column-gap: var(--space-xl);
}
.gap--nn--2xl {
row-gap: var(--space-nn);
column-gap: var(--space-2xl);
}
.gap--nn--3xl {
row-gap: var(--space-nn);
column-gap: var(--space-3xl);
}
.gap--nn--dy {
row-gap: var(--space-nn);
column-gap: var(--space-dy);
}
.gap--xs--nn {
row-gap: var(--space-xs);
column-gap: var(--space-nn);
}
.gap--xs--xs {
row-gap: var(--space-xs);
column-gap: var(--space-xs);
}
.gap--xs--sm {
row-gap: var(--space-xs);
column-gap: var(--space-sm);
}
.gap--xs--md {
row-gap: var(--space-xs);
column-gap: var(--space-md);
}
.gap--xs--lg {
row-gap: var(--space-xs);
column-gap: var(--space-lg);
}
.gap--xs--xl {
row-gap: var(--space-xs);
column-gap: var(--space-xl);
}
.gap--xs--2xl {
row-gap: var(--space-xs);
column-gap: var(--space-2xl);
}
.gap--xs--3xl {
row-gap: var(--space-xs);
column-gap: var(--space-3xl);
}
.gap--xs--dy {
row-gap: var(--space-xs);
column-gap: var(--space-dy);
}
.gap--sm--nn {
row-gap: var(--space-sm);
column-gap: var(--space-nn);
}
.gap--sm--xs {
row-gap: var(--space-sm);
column-gap: var(--space-xs);
}
.gap--sm--sm {
row-gap: var(--space-sm);
column-gap: var(--space-sm);
}
.gap--sm--md {
row-gap: var(--space-sm);
column-gap: var(--space-md);
}
.gap--sm--lg {
row-gap: var(--space-sm);
column-gap: var(--space-lg);
}
.gap--sm--xl {
row-gap: var(--space-sm);
column-gap: var(--space-xl);
}
.gap--sm--2xl {
row-gap: var(--space-sm);
column-gap: var(--space-2xl);
}
.gap--sm--3xl {
row-gap: var(--space-sm);
column-gap: var(--space-3xl);
}
.gap--sm--dy {
row-gap: var(--space-sm);
column-gap: var(--space-dy);
}
.gap--md--nn {
row-gap: var(--space-md);
column-gap: var(--space-nn);
}
.gap--md--xs {
row-gap: var(--space-md);
column-gap: var(--space-xs);
}
.gap--md--sm {
row-gap: var(--space-md);
column-gap: var(--space-sm);
}
.gap--md--md {
row-gap: var(--space-md);
column-gap: var(--space-md);
}
.gap--md--lg {
row-gap: var(--space-md);
column-gap: var(--space-lg);
}
.gap--md--xl {
row-gap: var(--space-md);
column-gap: var(--space-xl);
}
.gap--md--2xl {
row-gap: var(--space-md);
column-gap: var(--space-2xl);
}
.gap--md--3xl {
row-gap: var(--space-md);
column-gap: var(--space-3xl);
}
.gap--md--dy {
row-gap: var(--space-md);
column-gap: var(--space-dy);
}
.gap--lg--nn {
row-gap: var(--space-lg);
column-gap: var(--space-nn);
}
.gap--lg--xs {
row-gap: var(--space-lg);
column-gap: var(--space-xs);
}
.gap--lg--sm {
row-gap: var(--space-lg);
column-gap: var(--space-sm);
}
.gap--lg--md {
row-gap: var(--space-lg);
column-gap: var(--space-md);
}
.gap--lg--lg {
row-gap: var(--space-lg);
column-gap: var(--space-lg);
}
.gap--lg--xl {
row-gap: var(--space-lg);
column-gap: var(--space-xl);
}
.gap--lg--2xl {
row-gap: var(--space-lg);
column-gap: var(--space-2xl);
}
.gap--lg--3xl {
row-gap: var(--space-lg);
column-gap: var(--space-3xl);
}
.gap--lg--dy {
row-gap: var(--space-lg);
column-gap: var(--space-dy);
}
.gap--xl--nn {
row-gap: var(--space-xl);
column-gap: var(--space-nn);
}
.gap--xl--xs {
row-gap: var(--space-xl);
column-gap: var(--space-xs);
}
.gap--xl--sm {
row-gap: var(--space-xl);
column-gap: var(--space-sm);
}
.gap--xl--md {
row-gap: var(--space-xl);
column-gap: var(--space-md);
}
.gap--xl--lg {
row-gap: var(--space-xl);
column-gap: var(--space-lg);
}
.gap--xl--xl {
row-gap: var(--space-xl);
column-gap: var(--space-xl);
}
.gap--xl--2xl {
row-gap: var(--space-xl);
column-gap: var(--space-2xl);
}
.gap--xl--3xl {
row-gap: var(--space-xl);
column-gap: var(--space-3xl);
}
.gap--xl--dy {
row-gap: var(--space-xl);
column-gap: var(--space-dy);
}
.gap--2xl--nn {
row-gap: var(--space-2xl);
column-gap: var(--space-nn);
}
.gap--2xl--xs {
row-gap: var(--space-2xl);
column-gap: var(--space-xs);
}
.gap--2xl--sm {
row-gap: var(--space-2xl);
column-gap: var(--space-sm);
}
.gap--2xl--md {
row-gap: var(--space-2xl);
column-gap: var(--space-md);
}
.gap--2xl--lg {
row-gap: var(--space-2xl);
column-gap: var(--space-lg);
}
.gap--2xl--xl {
row-gap: var(--space-2xl);
column-gap: var(--space-xl);
}
.gap--2xl--2xl {
row-gap: var(--space-2xl);
column-gap: var(--space-2xl);
}
.gap--2xl--3xl {
row-gap: var(--space-2xl);
column-gap: var(--space-3xl);
}
.gap--2xl--dy {
row-gap: var(--space-2xl);
column-gap: var(--space-dy);
}
.gap--3xl--nn {
row-gap: var(--space-3xl);
column-gap: var(--space-nn);
}
.gap--3xl--xs {
row-gap: var(--space-3xl);
column-gap: var(--space-xs);
}
.gap--3xl--sm {
row-gap: var(--space-3xl);
column-gap: var(--space-sm);
}
.gap--3xl--md {
row-gap: var(--space-3xl);
column-gap: var(--space-md);
}
.gap--3xl--lg {
row-gap: var(--space-3xl);
column-gap: var(--space-lg);
}
.gap--3xl--xl {
row-gap: var(--space-3xl);
column-gap: var(--space-xl);
}
.gap--3xl--2xl {
row-gap: var(--space-3xl);
column-gap: var(--space-2xl);
}
.gap--3xl--3xl {
row-gap: var(--space-3xl);
column-gap: var(--space-3xl);
}
.gap--3xl--dy {
row-gap: var(--space-3xl);
column-gap: var(--space-dy);
}
.gap--dy--nn {
row-gap: var(--space-dy);
column-gap: var(--space-nn);
}
.gap--dy--xs {
row-gap: var(--space-dy);
column-gap: var(--space-xs);
}
.gap--dy--sm {
row-gap: var(--space-dy);
column-gap: var(--space-sm);
}
.gap--dy--md {
row-gap: var(--space-dy);
column-gap: var(--space-md);
}
.gap--dy--lg {
row-gap: var(--space-dy);
column-gap: var(--space-lg);
}
.gap--dy--xl {
row-gap: var(--space-dy);
column-gap: var(--space-xl);
}
.gap--dy--2xl {
row-gap: var(--space-dy);
column-gap: var(--space-2xl);
}
.gap--dy--3xl {
row-gap: var(--space-dy);
column-gap: var(--space-3xl);
}
.gap--dy--dy {
row-gap: var(--space-dy);
column-gap: var(--space-dy);
}
/* Equal-width rows using Flex (alternative to .grid)
- Use on any .h-stack: ...
- Children share width equally per row and wrap as needed.
- Control minimum column width via --equal-min or presets below.
*/
.h-stack.equal, .equal.h-stack--nn, .equal.h-stack--xs, .equal.h-stack--sm, .equal.h-stack--md, .equal.h-stack--lg, .equal.h-stack--xl, .equal.h-stack--2xl, .equal.h-stack--3xl, .equal.h-stack--dy {
flex-wrap: wrap;
}
.h-stack.equal > *, .equal.h-stack--nn > *, .equal.h-stack--xs > *, .equal.h-stack--sm > *, .equal.h-stack--md > *, .equal.h-stack--lg > *, .equal.h-stack--xl > *, .equal.h-stack--2xl > *, .equal.h-stack--3xl > *, .equal.h-stack--dy > * {
flex: 1 1 var(--equal-min, 18rem); /* default min column width */
min-inline-size: 0; /* prevent overflow from long content */
}
/* Preset minimums for consistency (xs..xl) */
.h-stack.equal--xs, .equal--xs.h-stack--nn, .equal--xs.h-stack--xs, .equal--xs.h-stack--sm, .equal--xs.h-stack--md, .equal--xs.h-stack--lg, .equal--xs.h-stack--xl, .equal--xs.h-stack--2xl, .equal--xs.h-stack--3xl, .equal--xs.h-stack--dy {
--equal-min: 10rem;
}
.h-stack.equal--sm, .equal--sm.h-stack--nn, .equal--sm.h-stack--xs, .equal--sm.h-stack--sm, .equal--sm.h-stack--md, .equal--sm.h-stack--lg, .equal--sm.h-stack--xl, .equal--sm.h-stack--2xl, .equal--sm.h-stack--3xl, .equal--sm.h-stack--dy {
--equal-min: 14rem;
}
.h-stack.equal--md, .equal--md.h-stack--nn, .equal--md.h-stack--xs, .equal--md.h-stack--sm, .equal--md.h-stack--md, .equal--md.h-stack--lg, .equal--md.h-stack--xl, .equal--md.h-stack--2xl, .equal--md.h-stack--3xl, .equal--md.h-stack--dy {
--equal-min: 18rem;
}
.h-stack.equal--lg, .equal--lg.h-stack--nn, .equal--lg.h-stack--xs, .equal--lg.h-stack--sm, .equal--lg.h-stack--md, .equal--lg.h-stack--lg, .equal--lg.h-stack--xl, .equal--lg.h-stack--2xl, .equal--lg.h-stack--3xl, .equal--lg.h-stack--dy {
--equal-min: 22rem;
}
.h-stack.equal--xl, .equal--xl.h-stack--nn, .equal--xl.h-stack--xs, .equal--xl.h-stack--sm, .equal--xl.h-stack--md, .equal--xl.h-stack--lg, .equal--xl.h-stack--xl, .equal--xl.h-stack--2xl, .equal--xl.h-stack--3xl, .equal--xl.h-stack--dy {
--equal-min: 26rem;
}
/* Main-axis justification helpers (affect last row when not full) */
.justify-start {
justify-content: flex-start !important;
}
.justify-center {
justify-content: center !important;
}
.justify-end {
justify-content: flex-end !important;
}
.justify-between {
justify-content: space-between !important;
}
.align-start {
align-items: start;
}
.align-center {
align-items: center;
}
.align-end {
align-items: end;
}
.align-stretch {
align-items: stretch;
}
/* Cross-axis alignment helpers (make items equal height in a row) */
.stretch-items {
align-items: stretch !important;
} /* parent: flex/grid */
.stretch-self {
align-self: stretch !important;
} /* child: override per-item */
/* Center text/utilities */
.center-text {
text-align: center;
}
.center-items {
align-items: center;
} /* on flex/grid parents */
/* Padding utilities (pad--xs, pad--sm, pad--md, pad--lg, pad--xl) */
.pad--nn {
padding: var(--space-nn);
}
.pad--nn--nn {
padding-block: var(--space-nn);
padding-inline: var(--space-nn);
}
.pad--nn--xs {
padding-block: var(--space-nn);
padding-inline: var(--space-xs);
}
.pad--nn--sm {
padding-block: var(--space-nn);
padding-inline: var(--space-sm);
}
.pad--nn--md {
padding-block: var(--space-nn);
padding-inline: var(--space-md);
}
.pad--nn--lg {
padding-block: var(--space-nn);
padding-inline: var(--space-lg);
}
.pad--nn--xl {
padding-block: var(--space-nn);
padding-inline: var(--space-xl);
}
.pad--nn--2xl {
padding-block: var(--space-nn);
padding-inline: var(--space-2xl);
}
.pad--nn--3xl {
padding-block: var(--space-nn);
padding-inline: var(--space-3xl);
}
.pad--nn--dy {
padding-block: var(--space-nn);
padding-inline: var(--space-dy);
}
.pad--xs {
padding: var(--space-xs);
}
.pad--xs--nn {
padding-block: var(--space-xs);
padding-inline: var(--space-nn);
}
.pad--xs--xs {
padding-block: var(--space-xs);
padding-inline: var(--space-xs);
}
.pad--xs--sm {
padding-block: var(--space-xs);
padding-inline: var(--space-sm);
}
.pad--xs--md {
padding-block: var(--space-xs);
padding-inline: var(--space-md);
}
.pad--xs--lg {
padding-block: var(--space-xs);
padding-inline: var(--space-lg);
}
.pad--xs--xl {
padding-block: var(--space-xs);
padding-inline: var(--space-xl);
}
.pad--xs--2xl {
padding-block: var(--space-xs);
padding-inline: var(--space-2xl);
}
.pad--xs--3xl {
padding-block: var(--space-xs);
padding-inline: var(--space-3xl);
}
.pad--xs--dy {
padding-block: var(--space-xs);
padding-inline: var(--space-dy);
}
.pad--sm {
padding: var(--space-sm);
}
.pad--sm--nn {
padding-block: var(--space-sm);
padding-inline: var(--space-nn);
}
.pad--sm--xs {
padding-block: var(--space-sm);
padding-inline: var(--space-xs);
}
.pad--sm--sm {
padding-block: var(--space-sm);
padding-inline: var(--space-sm);
}
.pad--sm--md {
padding-block: var(--space-sm);
padding-inline: var(--space-md);
}
.pad--sm--lg {
padding-block: var(--space-sm);
padding-inline: var(--space-lg);
}
.pad--sm--xl {
padding-block: var(--space-sm);
padding-inline: var(--space-xl);
}
.pad--sm--2xl {
padding-block: var(--space-sm);
padding-inline: var(--space-2xl);
}
.pad--sm--3xl {
padding-block: var(--space-sm);
padding-inline: var(--space-3xl);
}
.pad--sm--dy {
padding-block: var(--space-sm);
padding-inline: var(--space-dy);
}
.pad--md {
padding: var(--space-md);
}
.pad--md--nn {
padding-block: var(--space-md);
padding-inline: var(--space-nn);
}
.pad--md--xs {
padding-block: var(--space-md);
padding-inline: var(--space-xs);
}
.pad--md--sm {
padding-block: var(--space-md);
padding-inline: var(--space-sm);
}
.pad--md--md {
padding-block: var(--space-md);
padding-inline: var(--space-md);
}
.pad--md--lg {
padding-block: var(--space-md);
padding-inline: var(--space-lg);
}
.pad--md--xl {
padding-block: var(--space-md);
padding-inline: var(--space-xl);
}
.pad--md--2xl {
padding-block: var(--space-md);
padding-inline: var(--space-2xl);
}
.pad--md--3xl {
padding-block: var(--space-md);
padding-inline: var(--space-3xl);
}
.pad--md--dy {
padding-block: var(--space-md);
padding-inline: var(--space-dy);
}
.pad--lg {
padding: var(--space-lg);
}
.pad--lg--nn {
padding-block: var(--space-lg);
padding-inline: var(--space-nn);
}
.pad--lg--xs {
padding-block: var(--space-lg);
padding-inline: var(--space-xs);
}
.pad--lg--sm {
padding-block: var(--space-lg);
padding-inline: var(--space-sm);
}
.pad--lg--md {
padding-block: var(--space-lg);
padding-inline: var(--space-md);
}
.pad--lg--lg {
padding-block: var(--space-lg);
padding-inline: var(--space-lg);
}
.pad--lg--xl {
padding-block: var(--space-lg);
padding-inline: var(--space-xl);
}
.pad--lg--2xl {
padding-block: var(--space-lg);
padding-inline: var(--space-2xl);
}
.pad--lg--3xl {
padding-block: var(--space-lg);
padding-inline: var(--space-3xl);
}
.pad--lg--dy {
padding-block: var(--space-lg);
padding-inline: var(--space-dy);
}
.pad--xl {
padding: var(--space-xl);
}
.pad--xl--nn {
padding-block: var(--space-xl);
padding-inline: var(--space-nn);
}
.pad--xl--xs {
padding-block: var(--space-xl);
padding-inline: var(--space-xs);
}
.pad--xl--sm {
padding-block: var(--space-xl);
padding-inline: var(--space-sm);
}
.pad--xl--md {
padding-block: var(--space-xl);
padding-inline: var(--space-md);
}
.pad--xl--lg {
padding-block: var(--space-xl);
padding-inline: var(--space-lg);
}
.pad--xl--xl {
padding-block: var(--space-xl);
padding-inline: var(--space-xl);
}
.pad--xl--2xl {
padding-block: var(--space-xl);
padding-inline: var(--space-2xl);
}
.pad--xl--3xl {
padding-block: var(--space-xl);
padding-inline: var(--space-3xl);
}
.pad--xl--dy {
padding-block: var(--space-xl);
padding-inline: var(--space-dy);
}
.pad--2xl {
padding: var(--space-2xl);
}
.pad--2xl--nn {
padding-block: var(--space-2xl);
padding-inline: var(--space-nn);
}
.pad--2xl--xs {
padding-block: var(--space-2xl);
padding-inline: var(--space-xs);
}
.pad--2xl--sm {
padding-block: var(--space-2xl);
padding-inline: var(--space-sm);
}
.pad--2xl--md {
padding-block: var(--space-2xl);
padding-inline: var(--space-md);
}
.pad--2xl--lg {
padding-block: var(--space-2xl);
padding-inline: var(--space-lg);
}
.pad--2xl--xl {
padding-block: var(--space-2xl);
padding-inline: var(--space-xl);
}
.pad--2xl--2xl {
padding-block: var(--space-2xl);
padding-inline: var(--space-2xl);
}
.pad--2xl--3xl {
padding-block: var(--space-2xl);
padding-inline: var(--space-3xl);
}
.pad--2xl--dy {
padding-block: var(--space-2xl);
padding-inline: var(--space-dy);
}
.pad--3xl {
padding: var(--space-3xl);
}
.pad--3xl--nn {
padding-block: var(--space-3xl);
padding-inline: var(--space-nn);
}
.pad--3xl--xs {
padding-block: var(--space-3xl);
padding-inline: var(--space-xs);
}
.pad--3xl--sm {
padding-block: var(--space-3xl);
padding-inline: var(--space-sm);
}
.pad--3xl--md {
padding-block: var(--space-3xl);
padding-inline: var(--space-md);
}
.pad--3xl--lg {
padding-block: var(--space-3xl);
padding-inline: var(--space-lg);
}
.pad--3xl--xl {
padding-block: var(--space-3xl);
padding-inline: var(--space-xl);
}
.pad--3xl--2xl {
padding-block: var(--space-3xl);
padding-inline: var(--space-2xl);
}
.pad--3xl--3xl {
padding-block: var(--space-3xl);
padding-inline: var(--space-3xl);
}
.pad--3xl--dy {
padding-block: var(--space-3xl);
padding-inline: var(--space-dy);
}
.pad--dy {
padding: var(--space-dy);
}
.pad--dy--nn {
padding-block: var(--space-dy);
padding-inline: var(--space-nn);
}
.pad--dy--xs {
padding-block: var(--space-dy);
padding-inline: var(--space-xs);
}
.pad--dy--sm {
padding-block: var(--space-dy);
padding-inline: var(--space-sm);
}
.pad--dy--md {
padding-block: var(--space-dy);
padding-inline: var(--space-md);
}
.pad--dy--lg {
padding-block: var(--space-dy);
padding-inline: var(--space-lg);
}
.pad--dy--xl {
padding-block: var(--space-dy);
padding-inline: var(--space-xl);
}
.pad--dy--2xl {
padding-block: var(--space-dy);
padding-inline: var(--space-2xl);
}
.pad--dy--3xl {
padding-block: var(--space-dy);
padding-inline: var(--space-3xl);
}
.pad--dy--dy {
padding-block: var(--space-dy);
padding-inline: var(--space-dy);
}
main > * + * {
margin-block-start: var(--space-md);
}
/* Sections own their vertical rhythm. Stacking a generic main-flow margin on
top of both sections' padding created a third, accidental gap. */
main > .content-section + .content-section {
margin-block-start: 0;
}
main:not(:has(> .hero:first-child)) {
padding-top: var(--space-md);
}
main {
padding-bottom: var(--space-xl);
}
.z-1 {
position: relative;
z-index: 1;
}
/* scss/base/_fonts.scss
Framework font tokens only — brand-neutral system defaults.
Actual brand fonts (@font-face + token overrides) live in the site layer
(site/resources/scss/base/_fonts.scss), keeping guillemet reusable. */
:root {
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-body);
--font-heading: var(--font-display);
}
/* scss/site.scss */
/* scss/base/_typography.scss */
/* Body */
body {
font-size: var(--font-size-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Headings — display voice: heavy, tight, confident */
h1, h2, h3, h4, h5, h6 {
color: var(--color-fg-heading);
font-family: var(--font-display);
}
h1 {
font-size: var(--font-3xl);
font-weight: 800;
letter-spacing: var(--display-tracking);
line-height: var(--display-leading);
}
h2 {
font-size: var(--font-xl);
font-weight: 800;
letter-spacing: -0.008em;
line-height: 1.02;
}
h3 {
font-size: var(--font-lg);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
}
h4 {
font-size: var(--font-md);
font-weight: 700;
line-height: 1.25;
margin: 0 0 var(--space-xs);
}
/* Oversized display helpers — for hero/landmark moments only.
Montserrat 800 for lettered display (900 clogs at size); 900 stays
reserved for numerals (.stat, metric moments). */
.display-1 {
font-size: var(--font-display-max);
font-weight: 800;
letter-spacing: -0.008em;
line-height: 0.92;
}
.display-2 {
font-size: var(--font-2xl);
font-weight: 800;
letter-spacing: var(--display-tracking);
line-height: 1;
}
/* Text helpers */
.sup,
.eyebrow,
.text-eyebrow {
font-family: var(--font-display);
font-size: var(--eyebrow-font-size);
font-weight: var(--eyebrow-font-weight);
letter-spacing: var(--eyebrow-letter-spacing);
line-height: var(--eyebrow-line-height);
text-transform: uppercase;
margin: 0;
}
.sup {
color: var(--color-primary);
display: inline-block;
}
.text-body {
font-size: var(--font-sm);
line-height: var(--leading-body);
text-wrap: pretty;
}
.lead,
.text-lead {
font-size: var(--font-md);
line-height: var(--leading-body);
text-wrap: pretty;
}
.muted,
.text-muted {
font-size: var(--font-xs);
line-height: var(--leading-compact);
opacity: 0.68;
}
.text-subtle {
color: color-mix(in srgb, currentColor 78%, transparent);
}
.error {
font-size: var(--font-sm);
color: var(--color-alert);
font-weight: 600;
}
.small,
.text-small {
font-size: var(--font-xs);
line-height: var(--leading-compact);
}
.all-caps {
text-transform: uppercase;
}
strong {
font-weight: 650;
}
.measure--sm {
max-inline-size: var(--measure-sm);
}
.measure--md {
max-inline-size: var(--measure-md);
}
.measure--lg {
max-inline-size: var(--measure-lg);
}
.text-balance {
text-wrap: balance;
}
.text-pretty {
text-wrap: pretty;
}
.text-center {
text-align: center;
}
.font--light {
font-weight: 300;
}
.font--normal {
font-weight: 400;
}
.font--medium {
font-weight: 500;
}
.font--semibold {
font-weight: 600;
}
.font--bold {
font-weight: 700;
}
.font--extrabold {
font-weight: 800;
}
.text--2xs {
font-size: var(--font-2xs);
}
.text--xs {
font-size: var(--font-xs);
}
.text--sm {
font-size: var(--font-sm);
}
.text--md {
font-size: var(--font-md);
}
.text--lg {
font-size: var(--font-lg);
}
.text--xl {
font-size: var(--font-xl);
}
.text--2xl {
font-size: var(--font-2xl);
}
.text--3xl {
font-size: var(--font-3xl);
}
html {
color: var(--color-fg);
}
.text-on-dark {
color: var(--color-fg-on-dark);
}
.color-primary {
color: var(--color-primary);
}
.color-accent {
color: var(--color-accent);
}
/* Numeric emphasis (metrics, prices) */
.stat {
font-family: var(--font-display);
font-size: var(--font-2xl);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 0.95;
}
/* scss/components/_button.scss */
/*
Button system
- Outer: .button (clickable wrapper / transform anchor)
- Variant: .button-primary / .button-secondary / .button-tertiary (color behavior)
- Main: .button__main (visual button box: padding, border, bg)
- Label: .button__label (text layer)
- Modifier: .inverted (transparent default, same hover swap)
- Adjacent link: .button-link (underlined action link sized to sit with buttons)
Color API (set these on a wrapper class or directly on the element):
--btn-accent: border + hover text (brand/ink)
--btn-surface: default text + hover bg (surface/contrast)
*/
.button {
/* Safe defaults. Public actions use one shared control scale; surrounding
compositions must not change it implicitly. */
--btn-accent: var(--color-primary);
--btn-surface: var(--color-fg-on-dark);
--btn-arrow-size: 0.82em;
--btn-arrow-gap: 0.4em;
--btn-arrow-drift: 0.2em;
--btn-label-shift: calc((var(--btn-arrow-size) + var(--btn-arrow-gap)) / 2);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
text-decoration: none;
cursor: pointer;
user-select: none;
/* Outer is the transform anchor */
transition: transform var(--dur-quick) var(--ease-out);
font-family: var(--font-display);
font-size: var(--button-control-font-size);
font-weight: 700;
letter-spacing: 0.012em;
text-transform: none;
}
.button-accent {
--btn-accent: var(--color-accent);
--btn-surface: var(--color-accent-ink);
}
/* Shared action hierarchy: conversion accent, brand-colored support, then a
quiet neutral surface. Site-owned dimensional buttons consume the same
primary / secondary / tertiary class contract. */
.button-primary {
--btn-accent: var(--color-accent);
--btn-surface: var(--color-accent-ink);
}
.button-on-dark {
--btn-accent: var(--color-fg-on-dark);
--btn-surface: var(--color-primary-deep);
}
.button-secondary {
--btn-accent: var(--color-primary);
--btn-surface: var(--color-fg-on-dark);
}
.button-tertiary {
--btn-accent: var(--color-card);
--btn-surface: var(--color-fg-on-light);
}
.button-link {
--button-link-accent: var(--btn-accent, var(--color-primary));
align-items: center;
align-self: center;
color: var(--button-link-accent);
cursor: pointer;
display: inline-flex;
font-family: var(--font-display);
font-size: var(--button-control-font-size);
font-weight: 700;
justify-content: center;
line-height: 1;
padding: 0.35em 1em;
text-align: center;
text-decoration-line: underline;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.3em;
transition: color var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out), text-underline-offset var(--dur-base) var(--ease-out);
}
.button-link-primary {
--btn-accent: var(--color-primary);
}
.button-link-secondary {
--btn-accent: var(--color-secondary);
}
.button-link-tertiary {
--btn-accent: var(--color-fg-heading-on-light, var(--color-fg-on-light));
}
.button-link.inverted {
--btn-accent: var(--color-fg-on-dark);
}
.button-link:hover {
color: var(--button-link-accent);
text-decoration-line: underline;
}
.button-link:focus-visible {
outline: 2px solid var(--button-link-accent);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.button-link:hover {
opacity: 0.74;
text-underline-offset: 0.46em;
}
}
.button:hover {
text-decoration: none;
}
/* Keyboard focus */
.button:focus-visible {
outline: 2px solid var(--btn-accent);
outline-offset: 3px;
}
.button:disabled,
.button[aria-disabled=true] {
filter: saturate(var(--button-disabled-saturation));
opacity: var(--button-disabled-opacity);
cursor: not-allowed;
pointer-events: none;
transform: none;
}
/* MAIN LAYER: the actual visual box */
.button__main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-arrow-gap);
padding: var(--button-control-padding-block) var(--button-control-padding-inline);
border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
border: 2px solid transparent;
font: inherit;
line-height: 1;
white-space: nowrap;
transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.button__main::after {
content: "";
flex: 0 0 var(--btn-arrow-size);
inline-size: var(--btn-arrow-size);
block-size: var(--btn-arrow-size);
background-color: currentColor;
mask: url("/media/svg/arrow-right.svg") center/contain no-repeat;
-webkit-mask: url("/media/svg/arrow-right.svg") center/contain no-repeat;
opacity: 0;
transform-origin: center;
transform: translateX(calc(-1 * var(--btn-arrow-drift)));
transition: opacity var(--dur-base) var(--ease-out), background-color var(--dur-quick) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
/* LABEL LAYER */
.button__label {
display: inline-block;
transform: translateX(var(--btn-label-shift));
transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.button:hover .button__label {
transform: translateX(0);
}
.button:hover .button__main::after {
opacity: 1;
transform: translateX(0);
}
}
.button:focus-visible .button__label {
transform: translateX(0);
}
.button:focus-visible .button__main::after {
opacity: 1;
transform: translateX(0);
}
/* ------------------------------------------
VARIANT: Primary / Secondary / Tertiary
Default: bg/border = accent, text = surface
Hover: bg = surface, text = accent
------------------------------------------ */
.button-primary .button__main,
.button-secondary .button__main,
.button-tertiary .button__main {
background-color: var(--btn-accent);
border-color: var(--btn-accent);
color: var(--btn-surface);
box-shadow: var(--shadow-1);
}
@media (hover: hover) and (pointer: fine) {
.button-primary:hover .button__main,
.button-secondary:hover .button__main,
.button-tertiary:hover .button__main {
background-color: var(--btn-surface);
color: var(--btn-accent);
box-shadow: var(--shadow-2);
}
}
.button-primary:active,
.button-secondary:active,
.button-tertiary:active {
transform: translateY(1px);
}
/* ------------------------------------------
MODIFIER: Inverted (outline)
------------------------------------------ */
.button-primary.inverted .button__main,
.button-secondary.inverted .button__main,
.button-tertiary.inverted .button__main {
background-color: transparent;
border-color: var(--btn-accent);
color: var(--btn-accent);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.button-primary.inverted:hover .button__main,
.button-secondary.inverted:hover .button__main,
.button-tertiary.inverted:hover .button__main {
background-color: var(--btn-accent);
color: var(--btn-surface);
}
}
/* Also declared on body so the color-mix() references to --color-primary
resolve against site theme overrides set on body[data-brand]. */
:root, body {
/* Form shells follow the page surface; fields remain card surfaces so
controls retain a clear boundary without introducing a third "white". */
--form-surface: var(--color-paper, #f7f6f1);
/* Inputs */
--field-bg: var(--color-card, #fffefb);
--field-bg-muted: #f7f8fa;
--field-border: #d6d9de;
--field-border-hover: #b8bec7;
--field-border-focus: color-mix(in srgb, var(--color-primary, #3b82f6) 70%, var(--color-card) 30%);
--field-border-error: #dc2626;
--field-text: #0f172a;
--field-placeholder: #94a3b8;
--field-pad-x: calc(var(--space-sm) * 1.5);
--field-pad-y: var(--space-sm);
--field-control-height: 2.5rem;
--field-font-size: 0.95rem;
--field-line: 1.4;
--help-text: #64748b;
--error-text: #dc2626;
/* Focus ring uses primary */
--focus-ring: 0 0 0 4px color-mix(in srgb, var(--color-primary, #3b82f6) 25%, transparent);
/* Subtle elevation (can be removed if you prefer “flat”) */
--field-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.form-field input,
.form-field textarea,
.form-field select,
.form-field button {
font-family: var(--font-body);
}
/* -----------------------------------------
Field wrapper + label
----------------------------------------- */
.form-field {
position: relative;
}
.form-field label {
font-size: 0.75rem;
font-weight: 650;
color: #475569;
letter-spacing: 0.02em;
line-height: 1.2;
}
/* -----------------------------------------
Base inputs
----------------------------------------- */
.form-field input:not([type=checkbox]),
.form-field select,
.form-field textarea {
appearance: none;
width: 100%;
min-block-size: var(--field-control-height);
box-sizing: border-box;
font-size: var(--field-font-size);
line-height: var(--field-line);
color: var(--field-text);
background: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: var(--radius);
padding: var(--field-pad-y) var(--field-pad-x);
box-shadow: var(--field-shadow);
transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.form-field input:not([type=checkbox])::placeholder,
.form-field select::placeholder,
.form-field textarea::placeholder {
color: var(--field-placeholder);
}
.form-field input:not([type=checkbox]):hover,
.form-field select:hover,
.form-field textarea:hover {
border-color: var(--field-border-hover);
}
.form-field input:not([type=checkbox]):focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--field-border-focus);
box-shadow: var(--focus-ring);
}
.form-field input:not([type=checkbox]):disabled,
.form-field select:disabled,
.form-field textarea:disabled {
background: var(--field-bg-muted);
color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
}
/* Better autofill appearance (Chrome/Safari) */
.form-field input:-webkit-autofill,
.form-field textarea:-webkit-autofill,
.form-field select:-webkit-autofill {
-webkit-text-fill-color: var(--field-text);
transition: background-color 9999s ease-in-out 0s; /* prevents yellow flash */
box-shadow: 0 0 0px 1000px var(--field-bg) inset;
}
/* Textarea refinement */
.form-field textarea {
resize: vertical;
min-height: 7rem;
}
/* Select chevron */
.form-field select {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1rem;
padding-right: 2.35rem;
}
.form-field select {
color: var(--field-text);
}
/* Placeholder selected → muted text */
.form-field select option:disabled:checked {
color: var(--field-placeholder);
}
/* Ensure the select itself looks muted when placeholder is selected */
.form-field select:has(option:disabled:checked) {
color: var(--field-placeholder);
}
/* -----------------------------------------
Error state
----------------------------------------- */
.form-field.is-error input:not([type=checkbox]),
.form-field.is-error select,
.form-field.is-error textarea {
border-color: var(--field-border-error);
}
.form-field.is-error input:not([type=checkbox]):focus,
.form-field.is-error select:focus,
.form-field.is-error textarea:focus {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--field-border-error) 22%, transparent);
}
.form-field .error {
font-size: 0.78rem;
color: var(--error-text);
margin-top: 0.1rem;
line-height: 1.25;
}
.form-notice {
font-size: 0.9rem;
line-height: 1.4;
padding: 0.9rem 1rem;
border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--field-border-error) 20%, white 80%);
background: color-mix(in srgb, var(--field-border-error) 7%, white 93%);
color: var(--error-text);
}
/* Help text */
.form-field .help {
font-size: 0.78rem;
color: var(--help-text);
line-height: 1.25;
}
/* -----------------------------------------
Checkbox (modern + crisp)
----------------------------------------- */
.form-field .checkbox {
align-items: center;
cursor: pointer;
font-size: 0.9rem;
color: var(--field-text);
user-select: none;
}
.form-field .checkbox input[type=checkbox] {
appearance: none;
inline-size: 1.1rem;
block-size: 1.1rem;
min-inline-size: 1.1rem;
min-block-size: 1.1rem;
flex: 0 0 1.1rem;
aspect-ratio: 1;
box-sizing: border-box;
margin: 0;
padding: 0;
border-radius: 0.32rem;
border: 1.5px solid var(--field-border);
background: var(--field-bg);
display: grid;
place-content: center;
transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.form-field .checkbox input[type=checkbox]::after {
content: "";
width: 0.48rem;
height: 0.28rem;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) scale(0);
transition: transform 140ms ease;
}
.form-field .checkbox input[type=checkbox]:hover {
border-color: var(--field-border-hover);
}
.form-field .checkbox input[type=checkbox]:checked {
background: var(--color-primary, #3b82f6);
border-color: var(--color-primary, #3b82f6);
}
.form-field .checkbox input[type=checkbox]:checked::after {
transform: rotate(-45deg) scale(1);
}
.form-field .checkbox input[type=checkbox]:active {
transform: scale(0.98);
}
.form-field .checkbox input[type=checkbox]:focus {
outline: none;
box-shadow: var(--focus-ring);
}
/* -----------------------------------------
Required indicator (only if a label exists)
----------------------------------------- */
.form-field label::after {
content: "*";
color: var(--field-border-error);
margin-left: 0.2em;
display: none;
}
/* Only show the asterisk if:
1) field contains [required]
2) AND there actually is a label rendered (not empty)
*/
.form-field:has([required]) label:not(:empty)::after {
display: inline;
}
/* -----------------------------------------
Submit button (default form renderer)
Targets: