@charset "UTF-8";
/* =============================================================================
מושכות — pages.css
The inner pages: /pages/schedule.html, apps.html, horses.html, pension.html,
privacy.html, terms.html.
Owned by: Inner pages. Requires base.css + components.css (in that order).
Nothing here re-declares a token, a button, a card, a device frame, the
header, the footer, the store badges or the accessibility widget — all of
that is the foundation's and is consumed as-is. This file adds only what an
inner page needs on top:
§1 page hero §7 legend
§2 section sub-nav §8 device stage
§3 split rows §9 office screen recreations (.oscr / .board)
§4 pipeline / flow §10 PWA screen recreations (.ui-*)
§5 numbered steps §11 roles table
§6 rule lists + notes §12 legal layout (TOC + long-form)
§13 closing CTA band
§14 high contrast · §15 responsive safety
RTL logical properties only. Palette: only the hexes documented in the brief,
consumed through the semantic tokens in base.css §2.2.
============================================================================= */
/* -----------------------------------------------------------------------------
0. The icon sprite.
Every page carries one
at the top of and draws from it with
.
The symbols carry geometry only, so `fill`, `stroke` and `stroke-width` are
inherited from .icon in components.css §3 and every icon on the site keeps
the one stroke weight. The sprite itself must occupy no space and must not be
reachable: it is out of flow, zero-sized and clipped.
-------------------------------------------------------------------------- */
.icon-sprite {
position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
pointer-events: none;
}
/* -----------------------------------------------------------------------------
0.1 The measure, MEASURED.
The brief caps a line at 75 characters. `ch` is the advance of the digit
zero, and in Fabs a Hebrew character averages 0.36em against a `1ch` of
0.646em — so a 62ch column holds ~96 Hebrew characters, not 62. Every prose
width on these pages is therefore set from two properties solved against
real Hebrew rather than from the Latin-shaped --measure:
--measure-he 41ch on a 16px rung ≈ 73 characters
--measure-he-lede 46ch on a 22px rung ≈ 72 characters
pages.css is loaded only by the inner pages, so these declarations cannot
reach the landing.
-------------------------------------------------------------------------- */
:root {
--measure-he: 41ch;
--measure-he-lede: 46ch;
}
.lede { max-inline-size: var(--measure-he-lede); }
/* -----------------------------------------------------------------------------
0.2 Block rhythm utilities.
These pages stack several blocks inside one , and the gap between
them is a rhythm decision, not a per-instance one. Two named steps off the
8px system replace the ad-hoc `style="margin-block-start: …"` those stacks
used to carry, so the vertical rhythm is declared once and every page keeps
it. (The remaining inline styles on these pages are `grid-row` on the board's
lessons — that is DATA, the row a lesson occupies, not styling.)
-------------------------------------------------------------------------- */
.u-mt-2 { margin-block-start: var(--space-2); }
.u-mt-3 { margin-block-start: var(--space-3); }
.u-mt-4 { margin-block-start: var(--space-4); }
.u-mt-5 { margin-block-start: var(--space-5); }
.u-mt-7 { margin-block-start: var(--space-7); }
.u-block { margin-block-start: clamp(3rem, 6vw, 5rem); } /* block → block */
.u-block-sm { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
/* =============================================================================
1. PAGE HERO
The login screen's language applied to a page header, in FULL: the brand
photograph full-bleed under a heavy frosted layer, and then one big white
card at the system's 32px ceiling with the login card's own deep shadow —
holding, like the landing's hero card does, a SHARP piece of that same
photograph. The frosted band is the atmosphere; the crisp crop inside the
card is the picture. A page that opens on blur alone opens on nothing.
…
…
…
…
…buttons…
……
…
Each page sets its own crop through two custom properties, so the four
feature pages open on four different pictures of the same shoot rather than
on one repeated header: --band-pos moves the blurred backdrop, --shot-pos
and --shot-zoom frame the sharp crop in the card.
============================================================================= */
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) clamp(3rem, 7vw, 6rem);
margin-block-start: calc(var(--header-h) * -1); /* the header floats over it */
background-color: var(--bg-deep);
/* Defaults; the per-page modifiers below re-aim them. */
--band-pos: 50% 62%;
--shot-pos: 62% 50%;
--shot-zoom: 1;
}
.page-hero__media {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
}
.page-hero__media picture { position: absolute; inset: 0; display: block; }
/* 118% tall, pulled up 9%: headroom for the parallax travel, exactly the move
the landing hero makes, and no horizontal over-scan at all — the layer is
never wider than the band, so nothing here can report as document overflow.
`cover` therefore crops horizontally, and --band-pos chooses which part of
the scene the band shows: the trees, the rider, or the open field. */
.page-hero__media img {
position: absolute;
inset-block-start: -9%;
inset-inline: 0;
inline-size: 100%;
block-size: 118%;
object-fit: cover;
object-position: var(--band-pos);
}
/* The login screen's `bg-white/30 backdrop-blur-[36px]`, retuned for this band.
A 36px blur is a low-pass filter: it averages chroma away as well as detail,
and a white veil on top pulls what survives towards neutral, which is exactly
how the band read grey. Tinting the veil with --cream-warm instead of white
and pushing saturation back up through the same backdrop filter restores the
photograph's own warmth without touching the palette. */
.page-hero__media .frost {
background-color: rgba(244, 230, 216, 0.34); /* --cream-warm */
-webkit-backdrop-filter: blur(32px) saturate(168%);
backdrop-filter: blur(32px) saturate(168%);
}
/* Warm light over the band plus the foot fade that dissolves it into the page
field instead of ending it on a line. Ochre high on the inline-end side,
rust low on the reading side: the same two hues the rest of the site uses,
at wash strength. */
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(120% 90% at 84% 4%, rgba(202, 144, 37, 0.26), transparent 56%),
radial-gradient(100% 85% at 6% 98%, rgba(131, 67, 49, 0.24), transparent 60%),
/* The band's top strip is the only part of the photograph that is sky, and
a blurred sky is the one cool area in a warm frame. A tan veil that fades
out by a third of the way down reads as light on the picture and keeps
the whole band inside the palette. */
linear-gradient(to bottom, rgba(233, 216, 196, 0.55) 0%, rgba(233, 216, 196, 0) 34%),
linear-gradient(to top, var(--bg) 0%, rgba(248, 244, 237, 0) 24%);
pointer-events: none;
}
.page-hero__inner { position: relative; }
/* THE CARD. 32px radius (--r-3xl, the system ceiling), the login card's deep
soft shadow, the hairline ring. `overflow: hidden` is load-bearing: the
photographic panel inside bleeds to the card's own edges and is clipped by
its radius, the way the landing's cutout is. */
.page-hero__card {
--card-pad: clamp(1.5rem, 3.2vw, 3rem);
position: relative;
overflow: hidden;
max-inline-size: 74rem;
padding: var(--card-pad);
background-color: var(--surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-xl), var(--ring-hairline);
}
.page-hero__copy > * + * { margin-block-start: var(--space-4); }
.page-hero__copy .lede { max-inline-size: var(--measure-he-lede); }
.page-hero__copy .cluster { margin-block-start: var(--space-6); }
/* The sharp crop. Below 960px it is a band across the card, bleeding to both
inline edges; above it, a full-height column on the card's inline-end side. */
.page-hero__shot {
position: relative;
overflow: hidden;
margin: var(--space-6) calc(var(--card-pad) * -1) 0;
aspect-ratio: 16 / 10;
background-color: var(--bg-deep);
}
.page-hero__shot picture {
position: absolute;
inset: 0;
display: block;
}
.page-hero__shot img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--shot-pos);
scale: var(--shot-zoom);
}
/* A frosted plate on the photograph naming what this page is about. It is the
one element that differs in content between the four heroes, and it is the
reason the crop can be a picture rather than a texture: the type is on the
plate, never on the photograph. */
.page-hero__plate {
position: absolute;
inset-inline: var(--space-4);
inset-block-end: var(--space-4);
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--r-lg);
background-color: rgba(255, 253, 249, 0.92); /* --white-warm */
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
box-shadow: var(--shadow-md), var(--ring-hairline);
}
.page-hero__plate .icon { flex: none; color: var(--brand-ink); margin-block-start: 0.1em; }
.page-hero__plate b {
display: block;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text);
}
.page-hero__plate span {
display: block;
margin-block-start: 0.15em;
font-size: var(--fs-2xs);
font-weight: 300;
line-height: 1.5;
color: var(--text-2);
}
@media (min-width: 960px) {
.page-hero__card {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
column-gap: clamp(1.75rem, 3.2vw, 3.25rem);
padding-block-start: 0;
padding-inline-end: 0; /* the panel reaches the card edge */
}
.page-hero__copy {
grid-column: 1;
grid-row: 1;
padding-block-start: var(--card-pad);
}
.page-hero__shot {
grid-column: 2;
grid-row: 1;
margin: 0;
aspect-ratio: auto;
min-block-size: 24rem;
}
.page-hero__facts {
grid-column: 1 / -1;
grid-row: 2;
padding-inline-end: var(--card-pad);
}
}
/* Per-page crops. Five genuinely different windows onto one photograph. The
earlier values were too timid — at `cover` in a tall column they all resolved
to roughly the same framing, so the five feature pages opened on what read as
the same picture. These push far enough apart to be separate images: the
whole scene, the rider, the horse's head, the open field, the worked sand. */
.page-hero--schedule { --band-pos: 34% 62%; --shot-pos: 50% 46%; --shot-zoom: 1.02; --hero-accent: var(--brand); }
.page-hero--apps { --band-pos: 72% 58%; --shot-pos: 63% 20%; --shot-zoom: 2.15; --hero-accent: var(--teal); }
.page-hero--horses { --band-pos: 12% 66%; --shot-pos: 31% 41%; --shot-zoom: 2.45; --hero-accent: var(--brand); }
.page-hero--pension { --band-pos: 96% 70%; --shot-pos: 99% 58%; --shot-zoom: 1.35; --hero-accent: var(--olive); }
.page-hero--reports { --band-pos: 54% 54%; --shot-pos: 46% 94%; --shot-zoom: 1.95; --hero-accent: var(--ochre); }
/* The plate icon carries the page's accent, so the five heroes differ in colour
as well as in crop without introducing any colour outside the palette. */
.page-hero__plate .icon { color: var(--hero-accent, var(--brand-ink)); }
/* MIRRORED COMPOSITION on alternating pages. Same card, opposite arrangement:
walking the four feature pages no longer feels like reloading one page. */
@media (min-width: 960px) {
.page-hero--apps .page-hero__card,
.page-hero--pension .page-hero__card {
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
padding-inline: 0 var(--card-pad); /* panel reaches the OTHER edge */
}
.page-hero--apps .page-hero__copy,
.page-hero--pension .page-hero__copy { grid-column: 2; }
.page-hero--apps .page-hero__shot,
.page-hero--pension .page-hero__shot { grid-column: 1; }
.page-hero--apps .page-hero__facts,
.page-hero--pension .page-hero__facts {
padding-inline: var(--card-pad) 0;
}
}
/* Three short facts at the foot of the card. Not statistics — capabilities. */
.page-hero__facts {
display: grid;
gap: var(--space-4) var(--space-5);
margin-block-start: var(--space-6);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--border);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.page-hero__fact {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.page-hero__fact .icon { color: var(--brand-ink); margin-block-start: 0.1em; }
.page-hero__fact b {
display: block;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text);
}
.page-hero__fact span {
display: block;
margin-block-start: 0.15em;
font-size: var(--fs-xs);
font-weight: 300;
line-height: 1.5;
color: var(--text-2);
}
/* Breadcrumbs */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--text-2);
}
/* 44px, not the 28px a breadcrumb usually gets: these are the second real
target on the page on a phone, and the brief's floor is 44. The row reads no
taller because the extra height is padding around a 12px label. */
.crumbs a {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
padding-inline: 0.25rem;
margin-inline: -0.25rem;
border-radius: var(--r-xs);
transition: color var(--dur-2) ease;
}
.crumbs { min-block-size: 2.75rem; }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs__sep { color: var(--text-3); }
.crumbs [aria-current="page"] { color: var(--text-3); }
/* A hero variant with no photograph, for the legal pages: calmer, flatter, and
with no card — a legal document opens on the page itself. */
.page-hero--plain {
background-color: var(--bg-warm);
border-block-end: 1px solid var(--border);
padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)) clamp(2rem, 4vw, 3rem);
}
.page-hero--plain::after { content: none; }
.page-hero--plain .lede { max-inline-size: var(--measure-he-lede); }
/* =============================================================================
2. SECTION SUB-NAV
A sticky rail of in-page anchors directly under the site header.
============================================================================= */
:root:has(.subnav) {
scroll-padding-block-start: calc(var(--header-h) + 3.75rem + var(--space-4));
}
.subnav {
position: sticky;
inset-block-start: var(--header-h);
z-index: var(--z-sticky);
background-color: rgba(248, 244, 237, 0.9);
border-block-end: 1px solid var(--border);
-webkit-backdrop-filter: blur(16px) saturate(120%);
backdrop-filter: blur(16px) saturate(120%);
}
/* The rail scrolls sideways on a phone, so it has to SAY it does. The mask
fades the last few pixels of whichever end still has content past it: with
`scroll-driven` unavailable everywhere, the fade is drawn on both ends and
the list's `min-inline-size: 100%` guarantees it is only visible when the
content actually overflows. Pointer-events stay on the scroller itself. */
.subnav__inner {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to left, transparent 0, #000 1.75rem, #000 calc(100% - 1.75rem), transparent 100%);
mask-image: linear-gradient(to left, transparent 0, #000 1.75rem, #000 calc(100% - 1.75rem), transparent 100%);
}
.subnav__inner::-webkit-scrollbar { display: none; }
/* Nothing to scroll: no fade, and no clipped first/last label. */
@media (min-width: 1100px) {
.subnav__inner { -webkit-mask-image: none; mask-image: none; }
}
.subnav__list {
display: flex;
align-items: center;
gap: var(--space-1);
inline-size: max-content;
min-inline-size: 100%;
}
.subnav__link {
position: relative;
display: inline-flex;
align-items: center;
min-block-size: 3.25rem;
padding-inline: var(--space-3);
font-size: var(--fs-xs);
font-weight: 500;
white-space: nowrap;
color: var(--text-2);
border-radius: var(--r-sm);
transition: color var(--dur-2) ease;
}
.subnav__link::after {
content: "";
position: absolute;
inset-block-end: 0;
inset-inline: var(--space-3);
block-size: 2px;
border-radius: var(--r-pill);
background-color: var(--brand);
transform-origin: 100% 50%;
scale: 0 1;
transition: scale var(--dur-3) var(--ease-brand);
}
.subnav__link:hover { color: var(--brand-ink); }
.subnav__link:hover::after,
.subnav__link.is-current::after { scale: 1 1; }
.subnav__link.is-current { color: var(--brand-ink); }
/* =============================================================================
3. SPLIT ROWS
The workhorse of every inner page: prose on one side, a device or a diagram
on the other, alternating.
…
…
.split--flip puts the media on the reading edge (the right, in RTL).
============================================================================= */
.split {
display: grid;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
@media (min-width: 900px) {
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Unflipped, track 1 (the RIGHT one, in RTL) holds the text. */
.split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--wide-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split--flip .split__text { order: 2; }
.split--flip .split__media { order: 1; }
/* Flipping swaps which element sits in which TRACK, so the track widths have
to swap with it. Without this, .split--flip.split--wide-media gave the
media the narrow track and the wide one to the prose: the exact opposite
of what the modifier asks for. */
.split--flip.split--wide-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.split--flip.split--wide-media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.split + .split { margin-block-start: clamp(3.5rem, 8vw, 7rem); }
.split__text > * + * { margin-block-start: var(--space-4); }
.split__text .eyebrow + * { margin-block-start: var(--space-3); }
.split__text .cluster { margin-block-start: var(--space-5); }
.split__media { min-inline-size: 0; }
/* A slim run of key/value facts under a split's prose. */
.factline {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
margin-block-start: var(--space-5);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--border);
}
.factline > div { min-inline-size: 7rem; }
.factline dt {
font-size: var(--fs-2xs);
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--text-3);
}
.factline dd {
margin-block-start: 0.1em;
font-size: var(--fs-md);
font-weight: 500;
color: var(--brand-ink);
}
/* =============================================================================
4. PIPELINE / FLOW
The "four sources merge into one board" diagram, and the nightly job's chain.
…icon…
…
…
============================================================================= */
.flow {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
counter-reset: flow;
}
/* Inside a split's media column an auto-fit grid wraps three steps into 2 + 1,
which reads as a mistake. .flow--stack keeps them in one column. */
.flow--stack { grid-template-columns: minmax(0, 1fr); }
.flow__step {
position: relative;
padding: clamp(1.25rem, 2vw, 1.75rem);
background-color: var(--surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-sm), var(--ring-hairline);
}
/* The connector: a hairline with a rust head, pointing along the reading
direction (right → left). It is drawn from a step's inline-END edge, which in
RTL is its LEFT side, so it lands in the gap between that step and the next
one. Drawing it from inline-start would put the first step's connector
outside the grid entirely. The last step has no next step, so no connector. */
.flow--linked .flow__step::after {
content: "";
position: absolute;
inset-block-start: 2.4rem;
inset-inline-end: calc(var(--space-4) * -1);
inline-size: var(--space-4);
block-size: 2px;
border-radius: var(--r-pill);
background: linear-gradient(to left, var(--rust-a24), var(--brand));
}
.flow--linked .flow__step:last-child::after { content: none; }
@media (max-width: 899px) {
.flow--linked .flow__step::after { content: none; }
}
.flow__mark {
display: inline-grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
margin-block-end: var(--space-4);
border-radius: var(--r-md);
background-color: var(--rust-a08);
color: var(--brand-ink);
box-shadow: var(--ring-hairline);
}
.flow__mark .icon { inline-size: 1.375rem; block-size: 1.375rem; }
.flow__num {
counter-increment: flow;
font-family: var(--font-num);
font-size: var(--fs-sm);
font-weight: 800;
}
.flow__num::before { content: counter(flow); }
.flow__title {
font-size: var(--fs-lg);
font-weight: 800;
line-height: 1.3;
color: var(--text);
}
.flow__body {
margin-block-start: var(--space-2);
max-inline-size: var(--measure-he);
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.flow__tag { margin-block-start: var(--space-3); }
/* The merge diagram: N source cards on one side, one outcome card on the other,
with a rust brace between them. */
.merge {
display: grid;
gap: var(--space-5);
align-items: center;
}
@media (min-width: 860px) {
.merge { grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.9fr); }
}
.merge__sources { display: grid; gap: var(--space-3); }
.merge__source {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs), var(--ring-hairline);
}
.merge__source .icon { color: var(--brand-ink); flex: none; margin-block-start: 0.1em; }
.merge__source b { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.merge__source span {
display: block;
margin-block-start: 0.15em;
font-size: var(--fs-xs);
font-weight: 300;
line-height: 1.55;
color: var(--text-2);
}
.merge__arrow {
display: grid;
place-items: center;
color: var(--brand);
}
/* The glyph points along the reading direction (leftwards). Stacked, the flow
runs downwards instead, so it turns anticlockwise: (-1,0) → (0,+1). */
.merge__arrow .icon { inline-size: 2rem; block-size: 2rem; rotate: -90deg; }
@media (min-width: 860px) {
.merge__arrow .icon { rotate: 0deg; }
}
.merge__out {
padding: clamp(1.5rem, 2.5vw, 2rem);
background-color: var(--bg-warm);
border-radius: var(--r-2xl);
box-shadow: var(--ring-hairline);
}
.merge__out h3 { font-size: var(--fs-xl); font-weight: 800; color: var(--text); }
.merge__out p {
margin-block-start: var(--space-3);
max-inline-size: var(--measure-he);
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
/* =============================================================================
5. NUMBERED STEPS
A vertical run with a rust rail: used for the nightly job and for the
coverage flow.
…
…
============================================================================= */
.stepper {
position: relative;
counter-reset: step;
padding-inline-start: 0;
}
.stepper__item {
position: relative;
padding-inline-start: 3.75rem;
padding-block-end: var(--space-7);
}
.stepper__item:last-child { padding-block-end: 0; }
/* The rail. */
.stepper__item::before {
content: "";
position: absolute;
inset-inline-start: 1.34rem;
inset-block: 2.75rem 0;
inline-size: 2px;
border-radius: var(--r-pill);
background: linear-gradient(to bottom, var(--rust-a24), rgba(179, 88, 48, 0.06));
}
.stepper__item:last-child::before { content: none; }
/* The numeral. */
.stepper__item::after {
counter-increment: step;
content: counter(step);
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: var(--r-full);
background-color: var(--brand);
color: var(--on-brand);
font-family: var(--font-num);
font-size: var(--fs-sm);
font-weight: 800;
box-shadow: var(--shadow-rust);
}
.stepper__title {
font-size: var(--fs-lg);
font-weight: 800;
line-height: 1.3;
color: var(--text);
padding-block-start: 0.35rem;
}
.stepper__body {
margin-block-start: var(--space-2);
max-inline-size: var(--measure-he);
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.stepper__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-start: var(--space-3);
}
/* =============================================================================
6. RULE LISTS + NOTES
============================================================================= */
/* A definition grid for the concrete rules (defaults, ranges, meanings). */
.rules {
display: grid;
gap: var(--space-3);
}
.rule {
display: grid;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
background-color: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs), var(--ring-hairline);
}
@media (min-width: 680px) {
.rule {
grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
align-items: baseline;
gap: var(--space-4);
}
}
.rule__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.rule__desc {
max-inline-size: var(--measure-he); /* the 75-character cap, at every width */
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.rule__value {
justify-self: start;
font-family: var(--font-num);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--brand-ink);
white-space: nowrap;
}
@media (min-width: 680px) { .rule__value { justify-self: end; } }
/* Checklist — a plain run of ticked lines. */
.ticks { display: grid; gap: var(--space-3); }
.ticks li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
max-inline-size: var(--measure-he);
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.ticks .icon {
flex: none;
inline-size: 1.25rem;
block-size: 1.25rem;
margin-block-start: 0.28em;
color: var(--brand-ink);
stroke-width: 2;
}
.ticks strong { font-weight: 500; color: var(--text); }
/* A warm aside. .note--soon marks a roadmap item. */
.note {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--bg-warm);
border-radius: var(--r-xl);
box-shadow: var(--ring-hairline);
}
.note .icon { flex: none; color: var(--brand-ink); margin-block-start: 0.1em; }
.note h3 { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.note p {
margin-block-start: var(--space-2);
max-inline-size: var(--measure-he);
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.note--soon { background-color: rgba(202, 144, 37, 0.12); }
.note--soon .icon { color: var(--cocoa); }
/* Cards in a grid — the generic feature tile used on apps.html / pension.html. */
/* 22rem (352px) is chosen so a full-width container settles on THREE columns at
every desktop width: the tile groups on these pages come in threes and sixes,
and a 4-wide track left a ragged two-item last row on every one of them. In a
split's media column the same rule resolves to one column, which is what a
narrow column wants anyway. */
.tiles {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
/* For short tiles that read fine two-up inside a split's media column. */
.tiles--dense { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.tile {
padding: clamp(1.25rem, 2vw, 1.75rem);
background-color: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-sm), var(--ring-hairline);
transition: box-shadow var(--dur-3) var(--ease-brand), translate var(--dur-3) var(--ease-brand);
}
.tile:hover { box-shadow: var(--shadow-lg), var(--ring-hairline); translate: 0 -3px; }
.tile__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-3);
}
.tile__head .icon { color: var(--brand-ink); flex: none; }
.tile h3 { font-size: var(--fs-md); font-weight: 800; line-height: 1.3; color: var(--text); }
.tile p {
max-inline-size: var(--measure-he);
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.tile ul { margin-block-start: var(--space-3); display: grid; gap: var(--space-2); }
.tile ul li {
position: relative;
padding-inline-start: var(--space-4);
font-size: var(--fs-xs);
font-weight: 300;
line-height: 1.6;
color: var(--text-2);
}
.tile ul li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 0.65em;
inline-size: 0.3125rem;
block-size: 0.3125rem;
border-radius: var(--r-full);
background-color: var(--brand);
}
/* =============================================================================
7. LEGEND
Names the lesson-type tints used inside the recreated screens, so the colour
coding reads as a system rather than as decoration.
============================================================================= */
.legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-block-start: var(--space-4);
}
.legend li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--text-2);
}
.legend i {
inline-size: 0.75rem;
block-size: 0.75rem;
border-radius: 0.25rem;
background-color: var(--lt, var(--brand));
box-shadow: var(--ring-hairline);
}
/* Lesson-type tints. Six types, four brand hues plus two ink steps — every one
of them a documented value. Used by the legend, the board and the PWA chips
so a type is the same colour everywhere on the site. */
.lt-therapy { --lt: var(--teal); }
.lt-sport { --lt: var(--olive); }
.lt-group { --lt: var(--ochre); }
.lt-maccabi { --lt: var(--rust); }
.lt-trial { --lt: var(--rust-deepest); }
.lt-intake { --lt: var(--charcoal); }
/* =============================================================================
8. DEVICE STAGE
Layout wrappers that hold the frames from components.css §9.
============================================================================= */
.stage { position: relative; }
.stage--desktop { max-inline-size: 100%; }
/* Two phones, the second lifted and overlapped. */
.stage--duo {
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(0.75rem, 3vw, 2rem);
}
.stage--duo .device-phone { --phone-w: min(100%, 15.5rem); }
@media (min-width: 620px) {
.stage--duo .device-phone { --phone-w: min(48%, 19rem); }
.stage--duo .device-phone:first-child { margin-block-end: clamp(1rem, 3vw, 2.5rem); }
}
@media (max-width: 619px) {
.stage--duo { flex-wrap: wrap; }
.stage--duo .device-phone { --phone-w: min(100%, 19rem); }
.stage--duo .device-phone + .device-phone { display: none; }
}
.stage--single { display: flex; justify-content: center; }
/* A caption under a frame. */
.stage__caption {
max-inline-size: var(--measure-he);
margin-block-start: var(--space-4);
margin-inline: auto;
font-size: var(--fs-xs);
font-weight: 300;
line-height: 1.6;
text-align: center;
color: var(--text-3);
}
/* A start-aligned caption should hug the reading edge, not sit centred with a
ragged start. `margin-inline: auto` above is what centres the box. */
.stage__caption.u-text-start { margin-inline-start: 0; }
/* A soft rust glow behind a frame, so a device on the cream field has weight. */
.stage--glow::before {
content: "";
position: absolute;
z-index: -1;
inset: 8% -6% 2%;
border-radius: var(--r-3xl);
background: radial-gradient(60% 55% at 50% 45%, var(--rust-a14), transparent 72%);
filter: blur(18px);
pointer-events: none;
}
/* =============================================================================
9. OFFICE SCREEN RECREATIONS
Everything inside a .device-desktop__screen. `.oscr` is its own container so
the whole office UI scales with the frame instead of with the viewport, and
every internal size is in `em` off one clamped root — which is exactly how a
real screenshot behaves when you shrink it.
============================================================================= */
/* A browser window is not a fixed-ratio object, and a panel screen whose content
is 530px tall inside a 737px 16/10 frame reads as a half-empty page rather
than as a screenshot. .device-desktop--fit drops the ratio and lets the
content set the height; the ratio stays on the frames that are deliberately
CROPPED (the week board, which continues past the fold in the real app). */
.device-desktop--fit .device-desktop__screen { aspect-ratio: auto; }
.device-desktop--fit .oscr { min-block-size: 0; }
.oscr {
container-type: inline-size;
container-name: oscr;
display: flex;
inline-size: 100%;
block-size: 100%;
line-height: 1.45;
background-color: var(--bg);
color: var(--text);
text-align: start;
overflow: hidden;
}
/* THE ROOT SIZE, and why it is not on .oscr itself.
An element cannot query its own container, so a `cqi` written in .oscr's own
font-size resolved against the nearest ANCESTOR container — and there is
none, so it fell back to the VIEWPORT. The office UI was therefore sized by
the browser window instead of by the frame it sits in: at a 768px viewport
every frame, wide or narrow, rendered its root at ~8px and its table text at
0.72em of that, which is texture rather than a screen. Declaring the size one
level down anchors `cqi` to .oscr, which is what the whole em system below
was written against.
The floor is 10px, not 7.5px: below that the 0.72em labels stop being
readable at 1:1, and a frame that has run out of room must drop CONTENT — a
sidebar, a day column, a table column — not shrink the type further. The
ladder at the end of this section does exactly that. */
.oscr > * { font-size: clamp(10px, 1.21cqi, 13px); }
/* 9.1 Sidebar */
.oscr__side {
flex: none;
inline-size: 13.5em;
padding: 1.15em 0.9em;
background-color: var(--bg-warm);
border-inline-start: 0;
border-inline-end: 1px solid var(--border);
}
.oscr__brand { display: flex; align-items: center; margin-block-end: 1.4em; padding-inline: 0.35em; }
.oscr__brand img { block-size: 1.5em; inline-size: auto; }
.oscr__nav { display: grid; gap: 0.15em; }
.oscr__nav li {
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.5em 0.65em;
border-radius: 0.55em;
font-size: 0.92em;
font-weight: 300;
color: var(--text-2);
}
.oscr__nav li .icon { inline-size: 1.05em; block-size: 1.05em; stroke-width: 1.7; }
.oscr__nav li.is-active {
background-color: var(--rust-a08);
color: var(--brand-ink);
font-weight: 500;
}
.oscr__nav-group {
margin-block: 0.9em 0.35em;
padding-inline: 0.65em;
font-size: 0.72em;
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--text-3);
}
/* 9.2 Main column */
.oscr__main { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; }
.oscr__bar {
display: flex;
align-items: center;
gap: 0.75em;
padding: 0.85em 1.1em;
border-block-end: 1px solid var(--border);
background-color: var(--surface);
}
.oscr__title { font-size: 1.15em; font-weight: 800; color: var(--text); }
.oscr__sub { font-size: 0.82em; font-weight: 300; color: var(--text-3); }
.oscr__tools { display: flex; align-items: center; gap: 0.4em; margin-inline-start: auto; }
.oscr__chip {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.32em 0.7em;
border-radius: 999px;
font-size: 0.78em;
font-weight: 500;
color: var(--text-2);
background-color: var(--surface-muted);
box-shadow: var(--ring-hairline);
white-space: nowrap;
}
.oscr__chip .icon { inline-size: 0.9em; block-size: 0.9em; }
.oscr__chip--brand { background-color: var(--brand); color: var(--on-brand); box-shadow: none; }
.oscr__chip--ghost { background-color: transparent; }
.oscr__body { flex: 1; min-block-size: 0; padding: 0.9em 1.1em; overflow: hidden; }
/* 9.3 The schedule board — a port of ScheduleBoard.tsx.
Time axis on the reading edge (right, in RTL), days flowing right→left from
Sunday, 15-minute rows, lessons as blocks spanning rows. */
.board {
display: flex;
flex-direction: column;
block-size: 100%;
border-radius: 0.65em;
border: 1px solid var(--border);
background-color: var(--surface);
overflow: hidden;
}
.board__head {
display: grid;
grid-template-columns: 3.4em repeat(6, minmax(0, 1fr));
background-color: var(--bg-warm);
border-block-end: 1px solid var(--border);
}
.board__head > * {
padding: 0.45em 0.3em;
text-align: center;
font-size: 0.8em;
font-weight: 500;
color: var(--text-2);
border-inline-end: 1px solid var(--border);
}
.board__head > *:last-child { border-inline-end: 0; }
.board__head .board__corner { font-size: 0.72em; color: var(--text-3); font-weight: 500; }
.board__head b { display: block; font-weight: 800; color: var(--text); }
.board__head em {
display: block;
font-style: normal;
font-family: var(--font-num);
font-size: 0.82em;
font-weight: 300;
color: var(--text-3);
}
.board__grid {
--row: 1.55em;
display: grid;
grid-template-columns: 3.4em repeat(6, minmax(0, 1fr));
flex: 1;
min-block-size: 0;
overflow: hidden;
}
.board__times {
display: grid;
grid-auto-rows: calc(var(--row) * 4); /* one label per hour */
border-inline-end: 1px solid var(--border);
}
.board__times span {
padding-block-start: 0.2em;
text-align: center;
font-family: var(--font-num);
font-size: 0.78em;
font-weight: 300;
color: var(--text-3);
border-block-end: 1px solid var(--border);
}
.board__col {
display: grid;
grid-auto-rows: var(--row);
border-inline-end: 1px solid var(--border);
/* Hour lines drawn as a background so no extra element is needed per slot. */
background-image: repeating-linear-gradient(
to bottom,
var(--border) 0 1px,
transparent 1px calc(var(--row) * 4)
);
}
.board__col:last-child { border-inline-end: 0; }
.board__lesson {
--tint: var(--lt, var(--brand));
position: relative;
margin: 0.1em 0.18em;
padding: 0.28em 0.42em;
border-radius: 0.4em;
border: 1px solid color-mix(in srgb, var(--tint) 42%, transparent);
border-inline-start: 0.28em solid var(--tint);
background-color: color-mix(in srgb, var(--tint) 11%, var(--white));
overflow: hidden;
}
.board__lesson b {
display: block;
font-size: 0.82em;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.board__lesson span {
display: block;
font-family: var(--font-num);
font-size: 0.72em;
font-weight: 300;
color: var(--text-2);
white-space: nowrap;
}
.board__horse {
display: inline-flex;
align-items: center;
gap: 0.25em;
margin-block-start: 0.2em;
padding: 0.08em 0.4em;
border-radius: 999px;
background-color: rgba(80, 93, 47, 0.14);
color: var(--olive);
font-size: 0.68em;
font-weight: 500;
white-space: nowrap;
max-inline-size: 100%;
overflow: hidden;
}
.board__horse--warn { background-color: rgba(202, 144, 37, 0.22); color: var(--cocoa); }
.board__horse .icon { inline-size: 0.72em; block-size: 0.72em; }
/* A lesson carrying a warning gets an ochre pip on its inline-end corner. */
.board__lesson--warn::after {
content: "";
position: absolute;
inset-block-start: 0.22em;
inset-inline-end: 0.22em;
inline-size: 0.4em;
block-size: 0.4em;
border-radius: var(--r-full);
background-color: var(--ochre);
box-shadow: 0 0 0 2px var(--white);
}
.board__lesson--ghost {
background-color: var(--surface);
border-style: dashed;
border-inline-start-style: solid;
opacity: 0.85;
}
/* 9.4 A generic office table (kovens, treatments, billing). */
.otable { inline-size: 100%; border-collapse: collapse; }
.otable th,
.otable td {
padding: 0.42em 0.6em;
text-align: start;
border-block-end: 1px solid var(--border);
font-size: 0.85em;
vertical-align: middle;
}
.otable thead th {
font-size: 0.75em;
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--text-3);
background-color: var(--bg-warm);
white-space: nowrap;
}
.otable tbody td { font-weight: 300; color: var(--text-2); }
.otable tbody td:first-child { font-weight: 500; color: var(--text); }
.otable .num { font-family: var(--font-num); }
.opill {
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.16em 0.6em;
border-radius: 999px;
font-size: 0.78em;
font-weight: 500;
white-space: nowrap;
background-color: var(--surface-muted);
color: var(--text-2);
box-shadow: var(--ring-hairline);
}
.opill--rust { background-color: var(--rust-a08); color: var(--brand-ink); box-shadow: none; }
.opill--ochre { background-color: rgba(202, 144, 37, 0.2); color: var(--cocoa); box-shadow: none; }
.opill--olive { background-color: rgba(80, 93, 47, 0.14); color: var(--olive); box-shadow: none; }
.opill--teal { background-color: rgba(137, 172, 173, 0.26); color: var(--cocoa); box-shadow: none; }
/* 9.5 An office detail card (horse card, pension client card). */
.opanel {
display: grid;
gap: 0.75em;
block-size: 100%;
grid-template-columns: minmax(0, 1fr);
align-content: start;
}
@container oscr (min-width: 640px) {
.opanel--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.opanel--inset { margin-block-start: 0.75em; }
.ocard {
padding: 0.85em 0.95em;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 0.7em;
}
.ocard__title {
display: flex;
align-items: center;
gap: 0.45em;
margin-block-end: 0.55em;
font-size: 0.88em;
font-weight: 500;
color: var(--text);
}
.ocard__title .icon { inline-size: 1em; block-size: 1em; color: var(--brand-ink); }
.ocard__title .opill { margin-inline-start: auto; }
.okv { display: grid; gap: 0.3em; }
.okv > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6em;
padding-block: 0.22em;
border-block-end: 1px dashed var(--border);
font-size: 0.85em;
}
.okv > div:last-child { border-block-end: 0; }
.okv dt { font-weight: 300; color: var(--text-2); }
.okv dd { font-weight: 500; color: var(--text); font-family: var(--font-num); white-space: nowrap; }
.obar {
block-size: 0.42em;
border-radius: 999px;
background-color: var(--surface-muted);
overflow: hidden;
}
.obar i { display: block; block-size: 100%; background-color: var(--brand); border-radius: 999px; }
/* The office cards' two secondary parts: a footnote under a table or a key/value
list, and a wrapped run of pills. Both used to be written inline. */
.ocard__note {
margin-block-start: 0.55em;
font-size: 0.8em;
font-weight: 300;
line-height: 1.5;
color: var(--text-3);
}
.ocard__lead { font-size: 0.85em; font-weight: 300; color: var(--text-2); }
.opills { display: flex; flex-wrap: wrap; gap: 0.4em; margin-block-start: 0.55em; }
.okv + .obar { margin-block-start: 0.6em; }
/* 9.6 Reports — the office's own hand-rolled charts.
ReportsView.tsx and CompanyTrackingView.tsx use no chart library: a bar is
two divs and the heatmap is a grid. These are ports of exactly that. */
.ostats {
display: grid;
gap: 0.65em;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr));
margin-block-end: 0.85em;
}
.ostat {
padding: 0.7em 0.8em;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 0.7em;
}
.ostat dt { font-size: 0.75em; font-weight: 300; color: var(--text-3); }
.ostat dd {
margin-block-start: 0.25em;
font-family: var(--font-num);
font-size: 1.5em;
font-weight: 800;
line-height: 1.1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.ostat dd.is-good { color: var(--olive); }
.ostat dd.is-warn { color: var(--brand-ink); }
.ogrid { display: grid; gap: 0.65em; grid-template-columns: minmax(0, 1fr); }
@container oscr (min-width: 620px) { .ogrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obars { display: grid; gap: 0.45em; }
.obars > div { display: grid; gap: 0.22em; }
.obars dt {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5em;
font-size: 0.8em;
font-weight: 300;
color: var(--text-2);
}
.obars dt b { font-family: var(--font-num); font-weight: 500; color: var(--text); }
.obars dd {
block-size: 0.5em;
border-radius: 999px;
background-color: var(--surface-muted);
overflow: hidden;
}
.obars dd i {
display: block;
block-size: 100%;
border-radius: 999px;
background-color: var(--tone, var(--brand));
}
.tone-done { --tone: var(--olive); }
.tone-plan { --tone: var(--teal); }
.tone-miss { --tone: var(--ochre); }
.tone-cancel { --tone: var(--rust-deepest); }
/* The activity heatmap: one cell per day of the month, tinted by lesson count. */
.oheat {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1.15em, 1fr));
gap: 0.22em;
}
.oheat i {
aspect-ratio: 1;
border-radius: 0.25em;
background-color: color-mix(in srgb, var(--brand) calc(var(--v, 0) * 1%), var(--surface-muted));
box-shadow: var(--ring-hairline);
}
.oheat-legend {
display: flex;
align-items: center;
gap: 0.35em;
margin-block-start: 0.55em;
font-size: 0.72em;
font-weight: 300;
color: var(--text-3);
}
.oheat-legend i {
inline-size: 0.75em;
block-size: 0.75em;
border-radius: 0.2em;
background-color: color-mix(in srgb, var(--brand) calc(var(--v, 0) * 1%), var(--surface-muted));
box-shadow: var(--ring-hairline);
}
/* 9.7 THE NARROWING LADDER.
Each rung buys room for the type by removing the most expensive piece of
chrome still on screen, then spends it: the root size steps back UP as the
frame gets narrower, so the smallest label never drops below ~7px and the
lesson and table text stay in the 8-10px band at every frame width. That is
how a real screenshot behaves when you crop it — it loses columns, not
readability. */
/* The sidebar is 13.5em of pure chrome and the first thing to go. */
@container oscr (max-width: 900px) {
.oscr > * { font-size: clamp(10px, 1.62cqi, 13px); }
.oscr__side { display: none; }
.oscr__tools .oscr__chip--ghost { display: none; }
}
/* Six weekdays no longer fit; Sunday through Thursday is still a week. */
@container oscr (max-width: 660px) {
.oscr > * { font-size: clamp(10.5px, 2.12cqi, 13px); }
.oscr__sub { display: none; }
.board__head,
.board__grid { grid-template-columns: 3.1em repeat(5, minmax(0, 1fr)); }
.board__col:nth-child(n + 7),
.board__head > *:nth-child(n + 7) { display: none; }
.otable td:nth-child(n + 5),
.otable th:nth-child(n + 5) { display: none; }
.opanel--split { grid-template-columns: minmax(0, 1fr); }
}
@container oscr (max-width: 500px) {
.oscr > * { font-size: clamp(10.5px, 2.75cqi, 13px); }
.board__head,
.board__grid { grid-template-columns: 3em repeat(4, minmax(0, 1fr)); }
.board__col:nth-child(n + 6),
.board__head > *:nth-child(n + 6) { display: none; }
.otable td:nth-child(n + 4),
.otable th:nth-child(n + 4) { display: none; }
}
/* A phone-width frame. Three days and three table columns, at full type size. */
@container oscr (max-width: 380px) {
.oscr > * { font-size: clamp(11px, 3.55cqi, 13px); }
.board__head,
.board__grid { grid-template-columns: 2.9em repeat(3, minmax(0, 1fr)); }
.board__col:nth-child(n + 5),
.board__head > *:nth-child(n + 5) { display: none; }
.otable td:nth-child(n + 3),
.otable th:nth-child(n + 3) { display: none; }
.oscr__chip:not(.oscr__chip--brand) { display: none; }
}
/* =============================================================================
10. PWA SCREEN RECREATIONS
Everything inside a .device-phone__app. All sizes are in `cqi`, which
components.css §9.1 anchors to the frame's rendered width: 1cqi is 1% of the
phone, and the real device is 393px, so a Tailwind value of Npx in the app
is N/3.93 cqi here. That is how these screens stay life-size at any frame.
============================================================================= */
/* 10.1 The shell header — StudentPwaShell / InstructorPwaShell. */
.ui-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.5cqi;
padding: 4.07cqi 5.09cqi 4.07cqi;
}
.ui-head__hello { font-size: 3.05cqi; font-weight: 500; color: var(--ink-faint); }
.ui-head__name {
display: block;
margin-block-start: 0.15em;
font-size: 4.83cqi;
font-weight: 800;
line-height: 1.2;
color: var(--cocoa);
}
.ui-head__side { display: flex; align-items: center; gap: 2.54cqi; }
.ui-avatar {
display: grid;
place-items: center;
inline-size: 10.18cqi;
block-size: 10.18cqi;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--rust-deep), var(--rust-deepest));
color: var(--cream-warm);
font-size: 3.31cqi;
font-weight: 800;
box-shadow: 0 2px 10px -3px rgba(131, 67, 49, 0.4);
}
.ui-bell {
position: relative;
display: grid;
place-items: center;
inline-size: 10.18cqi;
block-size: 10.18cqi;
border-radius: var(--r-full);
color: var(--ink-soft);
}
.ui-bell .icon { inline-size: 5.09cqi; block-size: 5.09cqi; }
.ui-bell i {
position: absolute;
inset-block-start: 2.04cqi;
inset-inline-end: 2.04cqi;
inline-size: 2.04cqi;
block-size: 2.04cqi;
border-radius: var(--r-full);
background-color: var(--brand);
}
/* Guide shell header — a day pager rather than a greeting. */
.ui-daybar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.04cqi;
padding: 3.05cqi 4.07cqi;
}
.ui-daybar__nav {
display: grid;
place-items: center;
inline-size: 8.9cqi;
block-size: 8.9cqi;
border-radius: var(--r-full);
color: var(--ink-soft);
}
.ui-daybar__nav .icon { inline-size: 5.09cqi; block-size: 5.09cqi; }
.ui-daybar__label { font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); text-align: center; }
/* 10.2 The scrolling body. */
.ui-body {
display: flex;
flex-direction: column;
gap: 4.07cqi;
padding-inline: 4.07cqi;
padding-block-start: 1cqi;
/* Clearance for the floating pill nav, which sits over this column exactly as
it does in the real shell (pb-28 there). */
padding-block-end: 24cqi;
}
.ui-body--tight { gap: 3.05cqi; }
.ui-body--flush { padding-inline: 0; }
/* 10.3 The frosted card — value for value from globals.css `.jc-card`. */
.ui-card {
position: relative;
border-radius: 6.62cqi;
background-color: var(--glass-fill);
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-md);
-webkit-backdrop-filter: var(--blur-glass);
backdrop-filter: var(--blur-glass);
overflow: hidden;
}
.ui-card--sm { border-radius: 5.6cqi; }
.ui-card__pad { padding: 5.09cqi; }
.ui-card__pad--tight { padding: 4.07cqi; } /* the app's p-4 */
.ui-eyebrow {
padding-inline: 1cqi;
margin-block-end: 2.04cqi;
font-size: 2.8cqi;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--ink-faint);
}
.ui-sect {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.04cqi;
margin-block-end: 2.54cqi;
padding-inline: 1cqi;
}
.ui-sect b { font-size: 4.33cqi; font-weight: 800; color: var(--cocoa); }
.ui-sect a { display: inline-flex; align-items: center; gap: 0.5cqi; font-size: 3.31cqi; font-weight: 800; color: var(--rust-deep); }
.ui-sect a .icon { inline-size: 3.56cqi; block-size: 3.56cqi; }
/* The pension client's section headings are a rung quieter than the student's
(`text-[14px] font-bold text-[--jc-text-soft]` in PensionHome.tsx). */
.ui-sect--soft b { font-size: 3.56cqi; color: var(--ink-soft); }
.ui-sect--soft a { font-size: 3.05cqi; }
/* 10.4b Pension-client home — PensionHome.tsx, block for block.
The hero is the MONTHLY BASE FEE, not the horse: the fee is the 2xl
extrabold number and the horse is a 13px side item next to it. */
.ui-tags { display: flex; flex-wrap: wrap; gap: 2.04cqi; margin-block-end: 3.05cqi; }
.ui-money { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.54cqi; }
.ui-money__lbl { font-size: 3.31cqi; font-weight: 300; color: var(--ink-soft); }
.ui-money__val {
margin-block-start: 0.5cqi;
font-size: 6.11cqi;
font-weight: 800;
line-height: 1.15;
color: var(--cocoa);
font-variant-numeric: tabular-nums;
}
.ui-money__side {
display: inline-flex;
align-items: center;
gap: 1.02cqi;
font-size: 3.31cqi;
font-weight: 300;
color: var(--ink-soft);
}
.ui-money__side .icon { inline-size: 3.82cqi; block-size: 3.82cqi; }
/* The annual third-party-insurance notice, shown to SHARED boarders. The app
draws it in its own amber; here it is the site's ochre, which is the same
signal in the documented palette. */
.ui-notice {
display: flex;
align-items: flex-start;
gap: 2.54cqi;
padding: 3.05cqi 4.07cqi;
border-radius: 4.07cqi;
background-color: rgba(202, 144, 37, 0.18);
border: 1px solid rgba(202, 144, 37, 0.34);
}
.ui-notice .icon { flex: none; inline-size: 4.58cqi; block-size: 4.58cqi; color: var(--cocoa); margin-block-start: 0.3cqi; }
.ui-notice b { display: block; font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); }
.ui-notice span { display: block; margin-block-start: 0.5cqi; font-size: 3.05cqi; font-weight: 300; line-height: 1.55; color: var(--ink-soft); }
.ui-svcrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.54cqi;
padding: 3.05cqi 4.07cqi;
}
.ui-svcrow b { display: inline-flex; align-items: center; gap: 2.04cqi; font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); }
.ui-svcrow b .icon { inline-size: 3.56cqi; block-size: 3.56cqi; color: var(--ochre); }
.ui-svcrow span { font-size: 3.31cqi; font-weight: 300; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ui-orders { display: flex; flex-direction: column; gap: 2.04cqi; }
.ui-orderrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.54cqi;
padding: 3.05cqi 3.56cqi;
}
.ui-orderrow b { display: block; font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); }
.ui-orderrow > div span { display: block; margin-block-start: 0.5cqi; font-size: 3.05cqi; font-weight: 300; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ui-linkrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.54cqi;
padding: 3.56cqi 4.07cqi;
}
.ui-linkrow b { font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); }
.ui-linkrow .icon { inline-size: 4.07cqi; block-size: 4.07cqi; color: var(--ink-faint); }
/* 10.4 Chips — the app's rounded tags, in the site's palette. */
.ui-chip {
display: inline-flex;
align-items: center;
gap: 1.02cqi;
block-size: 6.11cqi;
padding-inline: 2.54cqi;
border-radius: var(--r-pill);
font-size: 2.8cqi;
font-weight: 800;
white-space: nowrap;
background-color: var(--surface-muted);
color: var(--ink-soft);
}
.ui-chip .icon { inline-size: 3.05cqi; block-size: 3.05cqi; stroke-width: 2; }
.ui-chip--olive { background-color: rgba(80, 93, 47, 0.16); color: var(--olive); }
.ui-chip--ochre { background-color: rgba(202, 144, 37, 0.22); color: var(--cocoa); }
.ui-chip--rust { background-color: var(--rust-a08); color: var(--brand-ink); }
.ui-chip--teal { background-color: rgba(137, 172, 173, 0.3); color: var(--cocoa); }
.ui-chip--ink { background-color: rgba(56, 60, 63, 0.12); color: var(--charcoal); }
.ui-chip--solid { background-color: var(--rust-deep); color: var(--cream-warm); }
/* 10.5 The hero "next lesson" card — StudentHome.tsx HeroCard. */
.ui-hero__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.04cqi;
margin-block-end: 3.05cqi;
}
.ui-hero__when {
font-size: 5.6cqi;
font-weight: 800;
line-height: 1.2;
color: var(--cocoa);
font-variant-numeric: tabular-nums;
}
.ui-hero__meta {
margin-block: 1.02cqi 4.07cqi;
font-size: 3.31cqi;
font-weight: 300;
color: var(--ink-soft);
}
.ui-rows { display: flex; flex-direction: column; gap: 2.54cqi; }
.ui-inforow { display: flex; align-items: center; gap: 2.54cqi; }
.ui-inforow__ico {
display: grid;
place-items: center;
flex: none;
inline-size: 8.14cqi;
block-size: 8.14cqi;
border-radius: var(--r-full);
background-color: var(--surface-muted);
color: var(--ink-soft);
}
.ui-inforow__ico .icon { inline-size: 3.82cqi; block-size: 3.82cqi; }
.ui-inforow p { font-size: 3.56cqi; font-weight: 300; color: var(--ink-soft); }
.ui-inforow b { font-weight: 800; color: var(--cocoa); }
.ui-btn {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
min-block-size: 13.23cqi;
margin-block-start: 5.09cqi;
border-radius: var(--r-pill);
background-color: var(--rust-deep);
color: var(--cream-warm);
font-size: 4.07cqi;
font-weight: 800;
box-shadow: 0 8px 20px -8px rgba(131, 67, 49, 0.7);
}
.ui-btn--ghost {
background-color: rgba(255, 255, 255, 0.6);
color: var(--rust-deep);
box-shadow: var(--ring-hairline);
}
/* 10.6 Stat tiles — pack ring + credits. */
.ui-tiles { display: flex; gap: 3.05cqi; }
.ui-tile {
flex: 1;
min-inline-size: 0;
padding: 4.07cqi;
border-radius: 5.6cqi;
background-color: var(--glass-fill);
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-md);
-webkit-backdrop-filter: var(--blur-glass);
backdrop-filter: var(--blur-glass);
}
.ui-tile__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.02cqi;
margin-block-end: 2.04cqi;
}
.ui-tile__lbl { font-size: 2.54cqi; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-faint); }
.ui-tile__ico {
display: grid;
place-items: center;
inline-size: 7.12cqi;
block-size: 7.12cqi;
border-radius: var(--r-full);
background-color: var(--rust-a08);
color: var(--rust-deep);
}
.ui-tile__ico .icon { inline-size: 3.56cqi; block-size: 3.56cqi; }
.ui-tile__row { display: flex; align-items: center; justify-content: space-between; gap: 2.04cqi; }
.ui-tile__name { font-size: 3.31cqi; font-weight: 800; color: var(--cocoa); }
.ui-tile__note { margin-block-start: 0.5cqi; font-size: 2.54cqi; font-weight: 300; color: var(--ink-faint); }
.ui-tile--solid {
background: linear-gradient(135deg, var(--rust-deep), var(--rust-deepest));
border-color: transparent;
color: var(--cream-warm);
box-shadow: 0 12px 28px -12px rgba(131, 67, 49, 0.6);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.ui-tile--solid .ui-tile__lbl { color: rgba(244, 230, 216, 0.78); }
.ui-tile--solid .ui-tile__ico { background-color: rgba(255, 255, 255, 0.16); color: var(--cream-warm); }
.ui-tile--solid .ui-tile__note { color: rgba(244, 230, 216, 0.82); }
.ui-big {
font-size: 7.12cqi;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ui-big small { font-size: 3.31cqi; font-weight: 500; margin-inline-start: 1.02cqi; }
.ui-ring { flex: none; inline-size: 16.28cqi; block-size: 16.28cqi; position: relative; }
.ui-ring svg { inline-size: 100%; block-size: 100%; rotate: -90deg; }
.ui-ring__val {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
text-align: center;
}
.ui-ring__val b { font-size: 4.58cqi; font-weight: 800; line-height: 1; color: var(--cocoa); font-variant-numeric: tabular-nums; }
.ui-ring__val span { font-size: 2.29cqi; line-height: 1.2; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* 10.7 List rows inside a card. */
.ui-list > * + * { border-block-start: 1px solid var(--hairline); }
.ui-listrow {
display: flex;
align-items: center;
gap: 2.54cqi;
min-block-size: 14.76cqi;
padding: 3.05cqi 4.07cqi;
}
.ui-listrow__date { font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-listrow__time { font-size: 3.56cqi; font-weight: 300; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.ui-listrow__ico {
display: grid;
place-items: center;
flex: none;
inline-size: 8.14cqi;
block-size: 8.14cqi;
border-radius: var(--r-full);
background-color: var(--surface-muted);
color: var(--ink-soft);
}
.ui-listrow__ico .icon { inline-size: 3.56cqi; block-size: 3.56cqi; }
.ui-listrow__text { min-inline-size: 0; flex: 1; }
.ui-listrow__text p { font-size: 3.18cqi; font-weight: 300; line-height: 1.5; color: var(--ink-soft); }
.ui-listrow__text span { display: block; margin-block-start: 0.4cqi; font-size: 2.8cqi; color: var(--ink-faint); }
/* 10.8 The guide's lesson card — LessonCard.tsx. One neutral base for every
lesson; the TYPE is the coloured tag (the client asked for that uniformity). */
.ui-lesson {
--tint: var(--lt, var(--brand));
padding: 3.05cqi;
border-radius: 4.07cqi;
background-color: rgba(255, 253, 249, 0.74); /* --white-warm */
border: 1px solid var(--hairline);
box-shadow: var(--shadow-sm);
}
.ui-lesson--now {
border-color: transparent;
box-shadow: 0 0 0 2px var(--rust-deep), 0 0 0 4px rgba(255, 253, 249, 0.9), var(--shadow-sm);
}
.ui-lesson--off { opacity: 0.62; }
.ui-lesson__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 2.04cqi;
}
.ui-lesson__time {
font-size: 3.56cqi;
font-weight: 800;
color: var(--cocoa);
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
}
.ui-lesson__who {
font-size: 3.56cqi;
font-weight: 800;
color: var(--cocoa);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The schedule tab's card leads with the date+time line rather than a name, so
it takes the size the guide card gives the student name. */
.ui-lesson__who--lg { font-size: 4.07cqi; }
.u-mt-ui { margin-block-start: 2.5cqi; }
.ui-lesson__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.02cqi 2.04cqi;
margin-block-start: 1.53cqi;
}
.ui-lesson__hint { font-size: 2.8cqi; font-weight: 300; color: var(--ink-faint); }
.ui-lesson__badges { display: flex; flex-wrap: wrap; gap: 1.53cqi; margin-block-start: 2.04cqi; }
.ui-now {
display: inline-flex;
align-items: center;
gap: 1.02cqi;
block-size: 6.11cqi;
padding-inline: 2.04cqi;
border-radius: var(--r-pill);
background-color: var(--rust-deep);
color: var(--cream-warm);
font-size: 2.54cqi;
font-weight: 800;
letter-spacing: 0.04em;
}
.ui-now i { inline-size: 1.53cqi; block-size: 1.53cqi; border-radius: var(--r-full); background-color: var(--cream-warm); }
/* The break separator between two lessons. */
.ui-break { display: flex; align-items: center; gap: 2.04cqi; padding: 0.5cqi 2.04cqi; }
.ui-break i { flex: 1; block-size: 1px; background-color: var(--hairline); }
.ui-break span {
display: inline-flex;
align-items: center;
gap: 1.02cqi;
padding: 0.5cqi 2.04cqi;
border-radius: var(--r-pill);
background-color: rgba(241, 236, 227, 0.7); /* --surface-muted #f1ece3 */
font-size: 2.8cqi;
font-weight: 500;
color: var(--ink-faint);
}
.ui-break .icon { inline-size: 3.05cqi; block-size: 3.05cqi; }
/* 10.9 The prep / breakdown checklist — InstructorHorsePrep.tsx. */
.ui-check__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.04cqi;
padding: 3.05cqi 4.07cqi;
}
.ui-check__head b { display: inline-flex; align-items: center; gap: 2.04cqi; font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); }
.ui-check__head .icon { inline-size: 4.07cqi; block-size: 4.07cqi; }
.ui-check__count {
padding: 0.5cqi 2.04cqi;
border-radius: var(--r-pill);
background-color: rgba(255, 255, 255, 0.6);
font-size: 2.8cqi;
font-weight: 800;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.ui-check__hint { padding: 0 5.09cqi 1.53cqi; font-size: 2.8cqi; font-weight: 500; color: var(--ink-faint); }
.ui-check__list { padding: 0 3.05cqi 3.05cqi; display: flex; flex-direction: column; gap: 1.02cqi; }
.ui-check__item {
display: flex;
align-items: center;
gap: 2.54cqi;
padding: 2.04cqi 2.54cqi;
border-radius: 3.05cqi;
}
.ui-check__item--done { background-color: rgba(80, 93, 47, 0.12); }
.ui-check__box {
display: grid;
place-items: center;
flex: none;
inline-size: 6.11cqi;
block-size: 6.11cqi;
border-radius: var(--r-full);
border: 1px solid var(--cocoa-a16);
background-color: rgba(255, 255, 255, 0.7);
color: transparent;
}
.ui-check__box .icon { inline-size: 3.56cqi; block-size: 3.56cqi; stroke-width: 3; }
.ui-check__item--done .ui-check__box {
background-color: var(--olive);
border-color: var(--olive);
color: var(--cream-warm);
}
.ui-check__name { flex: 1; font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); }
.ui-check__at { font-size: 3.05cqi; font-weight: 300; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* 10.9b The student schedule's sticky control block — StudentSchedule.tsx. */
.ui-schedhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.04cqi;
padding: 3.05cqi 4.07cqi 1.53cqi;
}
.ui-schedhead > b { font-size: 5.09cqi; font-weight: 800; color: var(--cocoa); }
.ui-schedhead__side { display: flex; align-items: center; gap: 1.02cqi; }
.ui-pill {
display: inline-flex;
align-items: center;
gap: 1.02cqi;
padding: 1.53cqi 3.05cqi;
border-radius: var(--r-pill);
background-color: rgba(255, 255, 255, 0.6);
font-size: 3.05cqi;
font-weight: 800;
color: var(--rust-deep);
white-space: nowrap;
}
.ui-pill .icon { inline-size: 3.56cqi; block-size: 3.56cqi; }
.ui-iconbtn {
display: grid;
place-items: center;
flex: none;
inline-size: 9.16cqi;
block-size: 9.16cqi;
border-radius: 3.05cqi;
color: var(--ink-soft);
}
.ui-iconbtn .icon { inline-size: 5.09cqi; block-size: 5.09cqi; }
/* 10.10 Segmented control + week strip (student schedule tab). */
.ui-seg {
display: flex;
gap: 1.02cqi;
padding: 1.02cqi;
border-radius: var(--r-pill);
background-color: rgba(255, 255, 255, 0.5);
box-shadow: var(--ring-hairline);
}
.ui-seg span {
flex: 1;
display: grid;
place-items: center;
min-block-size: 8.14cqi;
border-radius: var(--r-pill);
font-size: 3.31cqi;
font-weight: 800;
color: var(--ink-soft);
}
.ui-seg span[aria-current] { background-color: var(--rust-deep); color: var(--cream-warm); }
.ui-week { display: flex; justify-content: space-between; gap: 1.02cqi; }
.ui-week div {
flex: 1;
display: grid;
justify-items: center;
gap: 1.02cqi;
padding: 2.04cqi 0;
border-radius: 3.56cqi;
font-size: 2.8cqi;
font-weight: 500;
color: var(--ink-soft);
}
.ui-week div b { font-size: 3.56cqi; font-weight: 800; color: var(--cocoa); font-variant-numeric: tabular-nums; }
.ui-week div i { inline-size: 1.53cqi; block-size: 1.53cqi; border-radius: var(--r-full); background-color: var(--rust-deep); }
.ui-week div[aria-current] { background-color: rgba(255, 255, 255, 0.62); box-shadow: var(--ring-hairline); }
/* 10.11 An empty-state block. */
.ui-empty {
display: grid;
justify-items: center;
text-align: center;
padding: 8.14cqi 5.09cqi;
}
.ui-empty__ico {
display: grid;
place-items: center;
inline-size: 14.24cqi;
block-size: 14.24cqi;
margin-block-end: 3.05cqi;
border-radius: var(--r-full);
background-color: var(--surface-muted);
color: var(--ink-soft);
}
.ui-empty__ico .icon { inline-size: 6.62cqi; block-size: 6.62cqi; }
.ui-empty b { font-size: 4.07cqi; font-weight: 800; color: var(--cocoa); }
.ui-empty p { margin-block-start: 1.02cqi; max-inline-size: 61cqi; font-size: 3.31cqi; font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
/* =============================================================================
11. ROLES TABLE
============================================================================= */
/* Columns, not full-width rows. Each role is one short line, so a stacked row
left ~60% of its width empty and the block ate a whole screen of height.
auto-fit keeps it tidy at any count and any width. */
.roles {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
align-items: stretch;
}
.role {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background-color: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-xs), var(--ring-hairline);
}
.role__name {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-md);
font-weight: 500;
color: var(--text);
}
.role__name .icon { color: var(--brand-ink); flex: none; }
.role__body {
/* no measure cap here: the column IS the measure */
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
/* Pushed to the card's foot so the "where" chips line up across the row
regardless of how many lines each description wraps to. */
.role__where {
display: block;
margin-block-start: auto;
padding-block-start: var(--space-3);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--text-3);
}
/* =============================================================================
12. LEGAL LAYOUT
A calmer, longer measure with a sticky table of contents on desktop.
…
============================================================================= */
/* The single-column base is `minmax(0, 1fr)` rather than an implicit `auto`
track. An auto track sizes to the widest item's min-content, and one of the
items is a .table-wrap carrying the foundation's 20rem table floor — which at
320px is wider than the column and pushed the whole document sideways. With
an explicit 0 minimum the track can never exceed the container, and the wide
table scrolls inside its own wrapper, which is what that wrapper is for. */
.legal {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
align-items: start;
}
.legal__body { min-inline-size: 0; }
/* The document takes the reading edge (track 1 = the RIGHT column in RTL) and
the table of contents sits outboard of it. The aside is FIRST in the markup
so that on a phone, where the two stack, the contents list comes before the
clauses; `order` moves it outboard only once there is room for a column. */
/* The document column is sized by the measure, not by the container, and the
pair is centred: a 41ch column of clauses floating at one edge of a 1144px
container reads as a layout accident. */
@media (min-width: 1000px) {
.legal {
grid-template-columns: minmax(0, 39ch) minmax(0, 15rem);
justify-content: center;
}
.legal__body { order: 1; }
.legal__aside { order: 2; }
}
.legal__aside { min-inline-size: 0; }
@media (min-width: 1000px) {
.legal__aside {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-5));
max-block-size: calc(100dvh - var(--header-h) - var(--space-8));
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* A clause runs long and unbroken where marketing prose does not, so the
legal column sits two characters tighter than the shared measure: measured,
41ch let a few sentences reach 76 characters here. */
.legal__body { max-inline-size: 39ch; }
.legal__body > section { scroll-margin-block-start: calc(var(--header-h) + var(--space-6)); }
.legal__body > section + section { margin-block-start: var(--space-9); }
.legal__body h2 {
font-size: var(--fs-xl);
font-weight: 800;
line-height: 1.3;
color: var(--text);
margin-block-start: 0;
}
.legal__body h2 + * { margin-block-start: var(--space-3); }
.legal__body h3 { font-size: var(--fs-lg); margin-block-start: var(--space-6); }
.legal__body p,
.legal__body li {
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-loose);
color: var(--text-2);
}
.legal__body strong { font-weight: 500; color: var(--text); }
.legal__body > section > * + * { margin-block-start: var(--space-4); }
.legal__body ul { display: grid; gap: var(--space-2); padding-inline-start: var(--space-5); }
.legal__body ul li { position: relative; list-style: none; }
.legal__body ul li::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--space-5) * -1);
inset-block-start: 0.82em;
inline-size: 0.375rem;
block-size: 0.375rem;
border-radius: var(--r-full);
background-color: var(--brand);
}
/* An inline link inside a sentence is exempt from WCAG 2.5.8, because its size
is constrained by the surrounding text. The brief asks for 44px anyway, so
the hit area is grown with symmetric block padding cancelled by an equal
negative margin: the target becomes ~44px tall, the line box does not move,
and nothing reflows. Safe here because these links are sparse (an address,
a mail link) and never stack on consecutive lines. */
.legal__body a {
color: var(--brand-ink);
text-decoration: underline;
text-underline-offset: 0.22em;
padding-block: 0.85em;
margin-block: -0.85em;
}
.legal__body a:hover { color: var(--brand-ink-strong); }
/* Document meta strip under the H1. */
.legal-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
margin-block-start: var(--space-4);
}
.legal-meta div {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-size: var(--fs-xs);
color: var(--text-2);
}
.legal-meta dt { font-weight: 500; color: var(--text-3); }
.legal-meta dd { font-weight: 500; color: var(--text); font-family: var(--font-num); }
/* Table of contents. */
.toc__title {
margin-block-end: var(--space-3);
font-size: var(--fs-2xs);
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--text-3);
}
/* The rail runs down the edge of the list that faces the document, i.e. its
inline-START edge (physically the right, in RTL), and the current-section
marker is drawn on that same edge so the two line up. */
.toc__list {
display: grid;
gap: 0;
border-inline-start: 1px solid var(--border);
}
.toc__link {
position: relative;
display: flex;
align-items: center;
padding-block: var(--space-2);
padding-inline: var(--space-4) 0;
min-block-size: 2.75rem; /* 44px touch target */
font-size: var(--fs-xs);
font-weight: 300;
line-height: 1.5;
color: var(--text-2);
transition: color var(--dur-2) ease;
}
.toc__link::before {
content: "";
position: absolute;
inset-inline-start: -1px;
inset-block: 0.35rem;
inline-size: 2px;
border-radius: var(--r-pill);
background-color: var(--brand);
scale: 1 0;
transform-origin: 50% 0;
transition: scale var(--dur-3) var(--ease-brand);
}
.toc__link:hover { color: var(--brand-ink); }
.toc__link.is-current { color: var(--brand-ink); font-weight: 500; }
.toc__link.is-current::before { scale: 1 1; }
/* The TOC is a nav on mobile too, but flat and scrollable rather than sticky. */
@media (max-width: 999px) {
.toc__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
border-inline-start: 0;
padding: var(--space-3);
background-color: var(--bg-warm);
border-radius: var(--r-lg);
}
.toc__link { padding: var(--space-2) var(--space-3); border-radius: var(--r-pill); }
.toc__link::before { content: none; }
.toc__link.is-current { background-color: var(--rust-a08); }
}
/* An inline editorial marker for a clause that still needs a real value. Rare,
deliberately visible, and never fabricated. */
.todo {
display: inline-flex;
align-items: baseline;
gap: 0.35em;
padding: 0.1em 0.5em;
border-radius: var(--r-xs);
background-color: rgba(202, 144, 37, 0.2);
color: var(--cocoa);
font-weight: 500;
}
/* =============================================================================
12.5 STATEMENT BAND
Every one of these pages is 8,000px of light cream. Once per page the field
goes dark and the argument is stated in one sentence, on the same deep rust
field the landing's build section uses — so the break in rhythm is a move the
site already owns rather than a new idea. It sits at a DIFFERENT point in
each page's run, which is what stops the four reading as one template.
…
……
…
…
============================================================================= */
.statement {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(3.5rem, 7vw, 6.5rem);
background-color: var(--rust-deepest);
color: var(--cream-warm);
}
.statement__field {
position: absolute;
inset: 0;
z-index: -1;
background-image:
radial-gradient(120% 90% at 80% 0%, rgba(131, 67, 49, 0.85), rgba(131, 67, 49, 0) 62%),
radial-gradient(90% 70% at 10% 100%, rgba(202, 144, 37, 0.18), rgba(202, 144, 37, 0) 60%);
pointer-events: none;
}
.statement__inner { position: relative; }
.statement__eyebrow {
margin-block-end: var(--space-4);
font-size: var(--fs-2xs);
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--tan);
}
.statement__line {
max-inline-size: 22ch;
font-size: var(--fs-3xl);
font-weight: 800;
line-height: 1.24;
color: var(--white);
}
.statement__line em { font-style: normal; color: var(--ochre); }
.statement__facts {
display: grid;
gap: var(--space-4) var(--space-6);
margin-block-start: clamp(2rem, 4vw, 3rem);
padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
border-block-start: 1px solid rgba(244, 230, 216, 0.24);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.statement__facts dt {
font-size: var(--fs-2xs);
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--tan);
}
.statement__facts dd {
margin-block-start: 0.35em;
max-inline-size: 34ch;
font-size: var(--fs-sm);
font-weight: 300;
line-height: var(--lh-body);
color: var(--cream-warm);
}
html[data-a11y-contrast="on"] .statement {
background-color: var(--white);
color: var(--charcoal);
border-block: 2px solid var(--charcoal);
}
html[data-a11y-contrast="on"] .statement__field { background-image: none; }
html[data-a11y-contrast="on"] .statement__eyebrow,
html[data-a11y-contrast="on"] .statement__facts dt { color: var(--charcoal); }
html[data-a11y-contrast="on"] .statement__line,
html[data-a11y-contrast="on"] .statement__facts dd { color: var(--charcoal); }
html[data-a11y-contrast="on"] .statement__line em { color: var(--brand-ink-strong); }
html[data-a11y-contrast="on"] .statement__facts { border-block-start-color: var(--charcoal); }
/* =============================================================================
13. CLOSING CTA BAND
============================================================================= */
.cta-band {
position: relative;
overflow: hidden;
padding-block: clamp(3rem, 6vw, 5.5rem);
background-color: var(--bg-deep);
}
.cta-band__inner {
display: grid;
gap: var(--space-6);
align-items: center;
}
@media (min-width: 860px) {
.cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-9); }
}
.cta-band h2 { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.18; color: var(--text); }
.cta-band p {
margin-block-start: var(--space-4);
max-inline-size: var(--measure-he-lede);
font-size: var(--fs-md);
font-weight: 300;
line-height: var(--lh-body);
color: var(--text-2);
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Cross-links to the sibling inner pages, at the foot of each one. */
.morelinks {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
margin-block-start: var(--space-7);
}
.morelink {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background-color: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs), var(--ring-hairline);
transition: box-shadow var(--dur-3) var(--ease-brand), translate var(--dur-3) var(--ease-brand);
}
.morelink:hover { box-shadow: var(--shadow-md), var(--ring-hairline); translate: -3px 0; }
.morelink b { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.morelink span { display: block; margin-block-start: 0.15em; font-size: var(--fs-xs); font-weight: 300; color: var(--text-2); }
.morelink .icon { flex: none; margin-inline-start: auto; color: var(--brand-ink); }
/* =============================================================================
14. HIGH CONTRAST
base.css §7.2 flips the tokens; these are the parts of this file that carry
their own translucency or a shadow-only edge and would otherwise dissolve.
============================================================================= */
html[data-a11y-contrast="on"] .page-hero { background-color: var(--white); }
html[data-a11y-contrast="on"] .page-hero__media { opacity: 0.14; }
html[data-a11y-contrast="on"] .page-hero::after { background: none; }
/* The sharp crop survives — it is the picture, not a text bed — but it gets a
charcoal edge so it does not float, and the plate on it goes fully opaque. */
html[data-a11y-contrast="on"] .page-hero__shot { box-shadow: inset 0 0 0 2px var(--charcoal); }
html[data-a11y-contrast="on"] .page-hero__plate {
background-color: var(--white);
box-shadow: inset 0 0 0 2px var(--charcoal);
}
html[data-a11y-contrast="on"] .page-hero__fact,
html[data-a11y-contrast="on"] .subnav,
html[data-a11y-contrast="on"] .flow__step,
html[data-a11y-contrast="on"] .merge__source,
html[data-a11y-contrast="on"] .merge__out,
html[data-a11y-contrast="on"] .rule,
html[data-a11y-contrast="on"] .note,
html[data-a11y-contrast="on"] .tile,
html[data-a11y-contrast="on"] .role,
html[data-a11y-contrast="on"] .morelink,
html[data-a11y-contrast="on"] .ui-card,
html[data-a11y-contrast="on"] .ui-tile,
html[data-a11y-contrast="on"] .ui-lesson,
html[data-a11y-contrast="on"] .ocard,
html[data-a11y-contrast="on"] .ostat,
html[data-a11y-contrast="on"] .board {
background-color: var(--white);
box-shadow: inset 0 0 0 2px var(--charcoal);
border-color: var(--charcoal);
}
html[data-a11y-contrast="on"] .ui-tile--solid,
html[data-a11y-contrast="on"] .ui-btn,
html[data-a11y-contrast="on"] .ui-avatar,
html[data-a11y-contrast="on"] .oscr__chip--brand {
background: var(--brand);
color: var(--white);
box-shadow: none;
}
html[data-a11y-contrast="on"] .ui-chip,
html[data-a11y-contrast="on"] .opill,
html[data-a11y-contrast="on"] .board__horse,
html[data-a11y-contrast="on"] .ui-seg span,
html[data-a11y-contrast="on"] .ui-check__count,
html[data-a11y-contrast="on"] .ui-break span {
background-color: var(--white);
color: var(--cocoa);
box-shadow: inset 0 0 0 1.5px var(--charcoal);
}
html[data-a11y-contrast="on"] .ui-chip--solid,
html[data-a11y-contrast="on"] .ui-seg span[aria-current],
html[data-a11y-contrast="on"] .ui-now { background-color: var(--brand); color: var(--white); box-shadow: none; }
/* The lesson-type tint is the only thing that tells one block from another, and
flattening it would make the board unreadable in the mode meant to make it
MORE readable. The block goes white with a charcoal outline like every other
surface; the tint survives on the thick edge bar, and on the legend swatch
that names it, each of which gains a charcoal ring so it still has a visible
boundary against the white page. */
html[data-a11y-contrast="on"] .board__lesson {
background-color: var(--white);
border-color: var(--charcoal);
border-inline-start-width: 0.34em;
}
html[data-a11y-contrast="on"] .legend i { box-shadow: inset 0 0 0 2px var(--charcoal); }
html[data-a11y-contrast="on"] .stage--glow::before { content: none; }
html[data-a11y-contrast="on"] .stepper__item::before { background: var(--charcoal); }
html[data-a11y-contrast="on"] .flow--linked .flow__step::after { background: var(--charcoal); }
html[data-a11y-contrast="on"] .toc__list { border-inline-start-color: var(--charcoal); }
html[data-a11y-contrast="on"] .todo { background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--charcoal); }
/* =============================================================================
15. RESPONSIVE SAFETY
============================================================================= */
@media (max-width: 640px) {
.split { gap: var(--space-7); }
.stepper__item { padding-inline-start: 3.25rem; }
.stepper__item::after { inline-size: 2.4rem; block-size: 2.4rem; }
.stepper__item::before { inset-inline-start: 1.14rem; inset-block-start: 2.4rem; }
}
@media (max-width: 420px) {
.page-hero__facts { gap: var(--space-2); }
.factline { gap: var(--space-2) var(--space-4); }
}
/* Nothing on these pages may scroll the document sideways. */
.page-hero,
.section,
.statement,
.cta-band { overflow-x: clip; }
/* Print — the legal pages are the ones farm owners actually print. */
@media print {
.page-hero__media,
.subnav,
.legal__aside,
.cta-band,
.morelinks,
.stage { display: none !important; }
.page-hero { margin-block-start: 0; padding-block: 0 1rem; }
.legal { display: block; }
.legal__body { max-inline-size: none; }
}