/* =============================================================================
Rise Foundation Payments - design system
Typography and palette follow risefoundation.am, the foundation's own site.
That resemblance is not cosmetic: a payment page looking unconnected to the
site someone just left is indistinguishable from a phishing redirect.
Fonts are self-hosted and subset in wwwroot/fonts - no CDN fonts or scripts on
a page that takes card details, since every extra origin is another party who
could alter it. The brand faces used to be merely NAMED in the stack and never
shipped, which meant Armenian silently fell through to whatever the operating
system happened to provide.
Colours are role-named (--brand-500, --ink-700) rather than named after the
hue, so a repalette is a token change and no component rule moves. Every value
that carries text has its contrast ratio recorded beside it; the buttons on
this site spend money, and an unreadable one is not a styling nicety.
Dark mode overrides tokens only, never component rules, so the two themes
cannot drift apart.
============================================================================= */
/* ---- fonts -------------------------------------------------------------------------------------
Self-hosted and subset, from the same origin as everything else. No third-party font host is
reachable from this page; see the no-CDN note above. Families match risefoundation.am so the
payment surface is recognisably the same organisation.
Each face declares a unicode-range, so the browser picks a file by CODEPOINT rather than by family
order. Two consequences worth knowing: Armenian text can never be rendered in a Latin-only face
however the stack is ordered or however is tagged, and a page with no Armenian on it
never downloads the Armenian files at all.
Build steps and the reasons behind the subset are in wwwroot/fonts/README.md. */
@font-face {
font-family: "Noto Sans"; src: url("fonts/noto-sans-latin.woff2") format("woff2");
font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Noto Sans Armenian"; src: url("fonts/noto-sans-armenian.woff2") format("woff2");
font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0530-058F, U+FB13-FB17;
}
@font-face {
font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin.woff2") format("woff2");
font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Noto Serif Armenian"; src: url("fonts/noto-serif-armenian.woff2") format("woff2");
font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0530-058F, U+FB13-FB17;
}
:root {
/* Navy, from the foundation's logo. Sampled off wwwroot/favicon.png, which is exactly three
colours on white: navy #005271, teal #2a9d8f, crimson #ee4266.
--brand-500 used to be #2440a8, an indigo that appears NOWHERE in the logo. It was synthesised,
which is why it was the only value in this file with no provenance line beside it, and it is
almost certainly the shape of a fix for a real problem: navy is the only logo colour that can
legally carry white button text. Measured against white, the teal gives 3.32:1 and the crimson
3.75:1 - both under the 4.5:1 that the 15px button label needs - while the navy gives 8.59:1.
So the interactive rungs are the logo navy and a darker navy, and the ramp is re-derived from it
rather than having one value swapped: hue 196.5 to 198 the whole way up, which is also the hue
family the dark block has always used. The two themes were different hues until this change.
--brand-500 #005271 logo navy. White label 8.59:1; as a focus ring 8.59:1 on --surface and
7.29:1 on --page-bg, both over the 3:1 WCAG 1.4.11 asks of a control.
--brand-600 #003f57 the hover, 7.8 L* darker so a press is visible. White label 11.36:1.
Also carries TEXT - a:hover, .filters__clear, .choice__go - at 11.36:1
on white, so it is held to 4.5:1 and not just to the 3:1 of a fill.
--brand-700 is deliberately NOT the logo navy: it is still risefoundation.am's blue-navy, it
colours every link and heading, and moving it is a far larger change than the buttons. It means
the site currently carries two navies - see the note on it below.
The 50/100/200 rungs are tints and borders and carry no text of their own; they were re-hued
with the rest so the ramp is one family, at the same lightness they had, so nothing changed
weight. --brand-700 on --brand-50 is 14.22:1. */
--brand-50: #eef5f8;
--brand-100: #ddecf2;
--brand-200: #b9d8e4;
--brand-300: #3aa8a0; /* the logo teal, lightened - 2.88:1 on white, so BORDERS AND TINTS ONLY, never behind text */
--brand-500: #005271; /* interactive: buttons, focus rings - white label 8.59:1 */
--brand-600: #003f57; /* hover, and link hover - white label 11.36:1 */
--brand-700: #16204a; /* risefoundation.am navy, NOT the logo navy - links and headings on white, 15.68:1 */
/* The donate button, and nothing else. Still deliberately outside the brand ramp - its job is to
not read as one more navy button, which is why it was asked for - and now that is the REASON for
the colour rather than a coincidence of it: #9a2b1e is risefoundation.am's --color-flag, the
stamp red that site already reserves for giving. One giving colour across the foundation, no new
token, and 169.8 degrees of hue away from --brand-500, so it cannot be mistaken for the primary.
The brick also holds up as TEXT, which is what settled it against the crimson: risefoundation.am
uses --color-flag for drop caps and honour-roll notes on its #eaedec paper, where #9a2b1e is
6.51:1 and the crimson #cf2149 measured 4.49:1 - a hundredth short of AA, on eight usages.
Do not reach for the raw logo crimson #ee4266 here: 3.75:1 behind a white label and 3.18:1 as
text on the paper. It fails both roles, which is why the logo pink is a tint colour only.
--donate-500 #9a2b1e, white label 7.67:1
--donate-600 #7c2318, white label 9.95:1 (the hover, 7.1 L* darker) */
--donate-500: #9a2b1e;
--donate-600: #7c2318;
/* Warm gold, shared with bebras.am's --color-accent. Highlights and value
flags only - never a primary action, so "attention" and "the thing to
click" stay visually distinct. */
--accent-50: #fdf3df;
--accent-200: #f7dfa8;
--accent-500: #f0a81e;
--accent-700: #5a2c05; /* ink on the amber flag - 5.7:1. Never lighten this, in either theme. */
--ink-900: #1c2226;
--ink-700: #39434a;
--ink-500: #4f585e;
--ink-400: #767f84;
--ink-200: #d2d8d7;
--ink-100: #dfe4e3;
--ink-50: #f2f4f3;
--white: #ffffff;
--success-50: #eaf5f2;
--success-200: #a9d8cd;
--success-700: #0f6f5c;
--warn-50: #fdf4e6;
--warn-200: #f7dfa8;
--warn-700: #8e4708;
--danger-50: #fbeceb;
--danger-200: #f3bfbd;
/* Logo pink #ee4266 gives only 3.75:1 with white, so the button tone is a shade
deeper; the lighter pink stays for borders and tinted panels. */
--danger-500: #d3282c;
--danger-700: #a11418;
--page-bg: #eaedec; /* risefoundation.am --background */
/* The admin sidebar's own ground. It used to be var(--text), which is near-white in dark mode -
so the panel rendered white-on-white and was unreadable. Navy also makes it the most direct
cue to risefoundation.am anywhere in the product. White label: 15.7:1 light, 17.5:1 dark. */
--admin-shell-bg: #16204a;
--surface: var(--white);
--border: var(--ink-200);
/* The boundary of anything you can operate.
--border is a divider: it separates a card from the page, a row from the next row, and being
quiet is its whole job. Reused as the EDGE OF A CONTROL it is 1.44:1 light and 1.28:1 dark,
against the 3:1 that WCAG 1.4.11 asks of a user-interface component boundary - so
.btn--secondary and the stepper buttons had no perceivable edge at all and read as text that
happened to be indented. This is the same family, dark enough to be an edge: 3.1:1 light. */
--border-control: var(--ink-400);
--text: var(--ink-900);
--text-muted: var(--ink-500);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
--shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .05);
--shadow-lg: 0 8px 30px rgba(15, 23, 42, .10);
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
--ff-sans-am: "Noto Sans Armenian";
--ff-sans: "Noto Sans";
--ff-serif-am: "Noto Serif Armenian";
--ff-serif: "Source Serif 4";
--ff-fb-sans: "Segoe UI", "Arial Armenian", system-ui, -apple-system, sans-serif;
--ff-fb-serif: Georgia, "Times New Roman", serif;
/* Armenian first, matching risefoundation.am. Ordering is cosmetic rather than functional -
unicode-range already decides which file serves which character - but it settles the codepoints
both families could draw, such as digits and punctuation. */
--font-sans: var(--ff-sans-am), var(--ff-sans), var(--ff-fb-sans);
--font-serif: var(--ff-serif-am), var(--ff-serif), var(--ff-fb-serif);
/* Kept so nothing referencing --font breaks while the switch-over happens in the next commit. */
--font: var(--font-sans);
/* Display face for headings, as used across bebras.am and codzilla.am. Falls
back to the body stack, so a missing file costs weight, not legibility. */
--font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
--content-width: 68rem;
--narrow-width: 44rem;
}
/* Latin-first when the element is tagged en or ru, Armenian-first otherwise - as risefoundation.am
does. Custom properties inherit, so Bebras inside Armenian prose picks this
up without a rule of its own. */
:lang(en), :lang(ru) {
--font-sans: var(--ff-sans), var(--ff-sans-am), var(--ff-fb-sans);
--font-serif: var(--ff-serif), var(--ff-serif-am), var(--ff-fb-serif);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--text);
background: var(--page-bg);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ---------- Typography ---------------------------------------------------- */
/* Headings in the serif, body and forms in the sans. risefoundation.am sets serif for BODY copy too,
which suits an editorial site; here the body is 15px form labels, table cells and 13px hints, and a
serif at those sizes is materially harder to scan. Same identity, different register.
The old -.01em tracking was tuned for Inter and a serif does not want it, and 650 is heavy on Source
Serif, so both are reset here rather than inherited. */
h1, h2, h3, h4, .card__title, .product__name, .offer__name, .choice__title, .empty__title {
font-family: var(--font-serif);
font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
}
h1, h2, h3, h4 { margin: 0 0 var(--space-3); }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.375rem; margin-top: var(--space-6); }
h3 { font-size: 1.125rem; margin-top: var(--space-5); }
h1:focus, h2:focus { outline: none; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-600); }
small, .text-sm { font-size: .875rem; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger-700); }
code { font-family: var(--font-mono); font-size: .8125em; word-break: break-all; }
/* ---------- Layout -------------------------------------------------------- */
.page { flex: 1 0 auto; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
/* Used both as a modifier on .page and as a standalone wrapper inside it, so it has to centre itself. */
.page--narrow { max-width: var(--narrow-width); margin-inline: auto; }
/* Visible to screen readers only - for labels that would be redundant on screen. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.site-header__inner { max-width: var(--content-width); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.site-header__brand { font-weight: 700; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: var(--space-2); margin-inline-end: auto; }
.site-header__mark { width: 2rem; height: 2rem; border-radius: var(--radius-sm); flex: none; object-fit: contain; }
.site-header__name { display: flex; flex-direction: column; line-height: 1.2; }
.site-header__name span:last-child { font-size: .75rem; font-weight: 500; color: var(--text-muted); }
.site-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-700); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.site-nav a:hover { background: var(--ink-100); color: var(--text); }
.site-nav a.active { background: var(--brand-50); color: var(--brand-700); }
/* The right-hand group: things reached for at any moment, kept together and away from the two
destination links on the left. */
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
/* Icon-only, so it needs a real hit area rather than the size of the glyph: 2.5rem square is the
smallest comfortable tap target, and an icon in a header is exactly where a too-small one hurts. */
.site-header__basket {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-sm);
color: var(--ink-700);
text-decoration: none;
}
.site-header__basket:hover { background: var(--ink-100); color: var(--text); }
.site-header__basket.active { background: var(--brand-50); color: var(--brand-700); }
.site-header__basket svg { width: 1.25rem; height: 1.25rem; }
/* Slightly tighter than a page button - it is chrome, not a call to action on the page itself - and
its own colour, so it does not read as one more navy button in a row of navy.
Selected as .btn.site-header__donate, not .site-header__donate. Both this rule and .btn--primary are
single-class selectors, and .btn--primary is declared further down the file, so an equal-specificity
rule here would lose the cascade and the button would stay navy for no visible reason. */
.site-header__donate { padding: .4375rem var(--space-3); font-size: .9375rem; }
.btn.site-header__donate { background: var(--donate-500); color: var(--surface); }
.btn.site-header__donate:hover:not(:disabled) { background: var(--donate-600); color: var(--surface); }
.btn.site-header__donate:focus-visible { outline-color: var(--donate-500); }
@media (max-width: 30rem) {
/* On a narrow phone the donate label is the first thing to give way: the basket and the language
switcher are navigation a visitor may need at any point, while supporting the foundation has its
own page reachable from the footer. */
/* Matched on .btn as well, because the element carries both classes and .btn's own
`display: inline-flex` is declared LATER in this file. Two single-class selectors of equal
specificity are settled by source order, so this rule lost every time and the donate button
stayed on screen at every width - the one responsive rule in the header, doing nothing. */
.btn.site-header__donate { display: none; }
}
.site-footer { flex: none; background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-6) var(--space-4); font-size: .875rem; color: var(--text-muted); }
.site-footer__inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Full width under the columns: it applies to every page, so it reads as a standing statement rather
than one more footer column. */
.site-footer__assurance { flex: 1 0 100%; padding-top: var(--space-4); border-top: 1px solid var(--border); max-width: 70ch; }
/* ---------- Cards & surfaces ---------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: var(--space-4); }
/* A card laid out BY A GRID must not space itself: the grid's own `gap` already did it, and a second
helping of spacing on one axis only is not spacing, it is a misalignment.
This is the defect behind "3 cards, they are not aligned properly". .card + .card matched every shop
card after the first, so the second and third cards on /shop started 16px lower than the first - a
ragged top edge across the row - and because a grid row stretches to its tallest item, the first card
came out 16px TALLER than its neighbours to make up the difference. Measured at 1440px before this
rule: tops 284.78 / 300.78 / 300.78, heights 885.39 / 869.39 / 869.39. After it, and with the cover
box corrected further down: tops all 284.78, heights all 845.11.
Scoped to grid children rather than removed, because stacked cards in normal flow - which is most of
the admin panel - still need the margin; there is no gap to do it for them there. */
.grid > .card + .card { margin-top: 0; }
.card__title { margin: 0 0 var(--space-1); font-size: 1.0625rem; }
.card__hint { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: .875rem; }
.grid { display: grid; gap: var(--space-4); }
/* auto-fill with 1fr tracks gives every card in a row the same WIDTH; align-items: stretch gives every
card in a row the same HEIGHT, whatever is inside it - a long Armenian title, a comparison price, an
out-of-stock badge - because the row is sized by its tallest card and each card is then stretched to
it. stretch is also the initial value; it is written down because the equal-height promise on this
page rests on it, and on .product__foot's auto margin having a definite height to push against. */
.grid--products { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
/* ---------- Page header --------------------------------------------------- */
.page-header { margin-bottom: var(--space-5); }
.page-header__lead { color: var(--text-muted); max-width: 60ch; margin: 0; }
.breadcrumb { display: flex; gap: var(--space-2); font-size: .875rem; color: var(--text-muted); margin-bottom: var(--space-2); padding: 0; list-style: none; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
/* ---------- Buttons ------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: .5625rem var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent;
font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer;
text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.btn--primary { background: var(--brand-500); color: var(--surface); }
.btn--primary:hover:not(:disabled) { background: var(--brand-600); color: var(--surface); }
.btn--secondary { background: var(--surface); color: var(--ink-700); border-color: var(--border-control); }
.btn--secondary:hover:not(:disabled) { background: var(--ink-100); color: var(--text); }
.btn--danger { background: var(--danger-500); color: var(--surface); }
.btn--danger:hover:not(:disabled) { background: var(--danger-700); color: var(--surface); }
.btn--ghost { background: transparent; color: var(--ink-700); padding-inline: var(--space-2); }
.btn--ghost:hover:not(:disabled) { background: var(--ink-100); }
.btn--lg { padding: .75rem var(--space-5); font-size: 1rem; }
.btn--block { width: 100%; }
/* ---------- Forms --------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field > label, .field__label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--space-1); }
.field__hint { display: block; font-size: .8125rem; color: var(--text-muted); margin-bottom: var(--space-2); }
.field__required { color: var(--danger-500); margin-inline-start: 2px; }
/* Purchase flow: brief essentials stay visible; supporting copy opens in place. */
.flow-note { font-size: .875rem; color: var(--text-muted); margin: 0 0 var(--space-4); }
.flow-disclosure {
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); margin-block: var(--space-4);
}
.flow-disclosure > summary {
padding: .75rem var(--space-4); cursor: pointer; font-size: .875rem;
font-weight: 600; min-height: 44px; overflow-wrap: anywhere;
}
.flow-disclosure > summary:hover { color: var(--brand-600); }
.flow-disclosure > summary:focus-visible {
outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: var(--radius-sm);
}
.flow-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.flow-disclosure__body { padding: var(--space-4); }
.flow-disclosure__body > :last-child { margin-bottom: 0; }
.flow-disclosure--optional { background: var(--page-bg); box-shadow: none; }
.participant-card .flow-disclosure:last-child { margin-bottom: 0; }
.participant-consent { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.participant-consent > label.checkbox, .participant-publication > label.checkbox, .flow-disclosure__body label.checkbox {
display: flex; font-weight: 400; font-size: .875rem;
}
.participant-publication { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.participant-publication > h3 { margin: 0 0 var(--space-3); font-size: .875rem; }
.participant-publication > .field__hint { margin: var(--space-2) 0 0; }
.representative-reuse { margin-top: var(--space-1); white-space: normal; text-align: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.form-grid > * { min-width: 0; }
@media (max-width: 540px) {
.form-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Matches on what an input is NOT, rather than listing the types it might be.
Blazor's emits a bare with no type attribute at all unless one is passed
explicitly, so an `input[type=text]` selector silently skipped every plain text field - names,
school, address - leaving them as unstyled browser rectangles while the email and number fields
next to them looked right. Excluding the controls that must not look like text boxes is the only
form of this rule that cannot be defeated by a missing attribute. */
input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file], [type=range], [type=color], [type=hidden]),
select,
textarea {
width: 100%; padding: .5625rem var(--space-3); font: inherit; font-size: .9375rem; color: var(--text);
background: var(--surface); border: 1px solid var(--ink-400); border-radius: var(--radius-sm);
transition: border-color .12s ease, box-shadow .12s ease;
}
input:not([type=checkbox], [type=radio]):hover, select:hover, textarea:hover { border-color: var(--ink-500); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none; border-color: var(--brand-500);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent);
}
/* Checkboxes and radios keep a real outline.
The rule above turns the outline off for every input and replaces it with a box-shadow ring, which
is right for a text box - it follows the border - and wrong for these two: a native checkbox paints
its own box inside the element, so a box-shadow lands behind it and is not visible at all. The
result was a control with no focus indicator whatever, on the delivery choice, the gift, and the
marketing agreement - three decisions about money and consent that a keyboard user could land on
without being able to tell they had.
2.4.7, and not a theoretical one: the gift checkbox changes what the card is charged. */
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
box-shadow: none;
}
/* --text-muted, not --ink-400. Placeholder text is text: 1.4.3 asks 4.5:1 of it, and --ink-400 gives
4.09:1 on white and 4.34:1 on the dark ground - close enough to look deliberate and still short in
both themes. --text-muted is the vetted muted tone, 7.0:1 light and 7.34:1 dark. */
input::placeholder { color: var(--text-muted); }
/* Inputs are full width by default, so text is never clipped. The narrower tiers below exist only
where a field's width usefully signals how much is expected - a postcode in a full-width box invites
a sentence - and every one is sized for its content in Armenian rather than for Latin digits.
Erring wide: a field that is slightly too long costs nothing, one that truncates costs the user. */
.input--narrow { max-width: 9rem; } /* pure digits: quantity, postcode, stock */
.input--code { max-width: 15rem; } /* short text or codes: unit, ADG code */
.input--money { max-width: 15rem; } /* an amount in drams, up to eight digits with separators */
/* A select's width is the width of its longest option, so it cannot be capped by a fixed max-width -
that was clipping "— Ընտրեք —" on the grade picker. Sized to content instead, with a floor so a
one-digit option list is still a comfortable target, and a ceiling of the container so a long option
cannot push the form sideways. */
select {
width: auto;
min-width: 12rem;
max-width: 100%;
}
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 500; cursor: pointer; }
.checkbox input[type=checkbox] { width: 1.125rem; height: 1.125rem; margin: .1875rem 0 0; flex: none; accent-color: var(--brand-500); cursor: pointer; }
/* Blazor validation hooks */
.valid.modified:not([type=checkbox]) { border-color: var(--success-700); }
.invalid { border-color: var(--danger-500); }
.validation-message { display: block; color: var(--danger-700); font-size: .8125rem; margin-top: var(--space-1); }
.validation-errors { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--danger-50); border: 1px solid var(--danger-200); border-radius: var(--radius-sm); color: var(--danger-700); font-size: .875rem; }
.validation-errors ul { margin: 0; padding-inline-start: var(--space-4); }
/* ---------- Alerts & callouts --------------------------------------------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid; font-size: .9375rem; }
.alert__icon { flex: none; font-size: 1rem; line-height: 1.5; }
.alert__body { min-width: 0; }
.alert--info { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.alert--success { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.alert--warning { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.alert--danger { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
/* A destructive, irreversible action. Visually distinct from a mere warning so
"this cannot be undone" is legible before the click, not after. */
.danger-zone { border: 1px solid var(--danger-200); border-radius: var(--radius); background: var(--danger-50); padding: var(--space-5); }
.danger-zone__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 1rem; font-weight: 700; color: var(--danger-700); }
.danger-zone__body { font-size: .9375rem; color: var(--ink-700); }
.danger-zone__consequences { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); font-size: .9375rem; color: var(--ink-700); }
.danger-zone__consequences li { margin-bottom: var(--space-1); }
.danger-zone__confirm { padding: var(--space-3); background: var(--surface); border: 1px solid var(--danger-200); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
/* ---------- Badges -------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: .125rem var(--space-2); border-radius: 999px; font-size: .75rem; font-weight: 650; border: 1px solid; white-space: nowrap; }
.badge--neutral { background: var(--ink-100); border-color: var(--border); color: var(--ink-700); }
.badge--info { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.badge--success { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.badge--warning { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
/* The basket table on a phone.
Every column had white-space: nowrap - the headers, the numeric cells, and the "one participant per
line" badge, which in Armenian is «Մեկ մասնակցի համար» and is by some way the widest single thing in
the table. Together they held the table above every phone width in all three languages, so the
checkout's first screen scrolled sideways for everyone on a mobile. It is inside .table-wrap and
therefore scrolls rather than pushing the page, which is why nothing looked broken - it just meant
the total was off-screen on the page whose job is showing the total.
So the two rules that can wrap, wrap. The numeric cells keep nowrap: a price broken across two lines
is worse than a narrow column, and they are short. */
@media (max-width: 40rem) {
table.data thead th { white-space: normal; }
table.data .badge { white-space: normal; text-align: center; border-radius: var(--radius-sm); }
}
.badge--danger { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
/* ---------- Tables -------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data th, table.data td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data thead th { background: var(--ink-50); font-size: .8125rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--ink-50); }
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Keep each basket item's controls together when a four-column table no longer fits. Explicit
table roles in the markup preserve relationships when these cells switch to grid layout. */
.basket-items__label { display: none; }
@media (max-width: 40rem) {
.basket-items { overflow: visible; }
.basket-items table.data, .basket-items tbody { display: block; }
.basket-items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.basket-items tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-4); gap: var(--space-3); border-bottom: 1px solid var(--border); }
.basket-items tbody tr:last-child { border-bottom: none; }
.basket-items table.data td { display: block; border: 0; padding: 0; min-width: 0; white-space: normal; }
.basket-items__name { grid-column: 1 / -1; overflow-wrap: anywhere; }
.basket-items table.data td.basket-items__quantity { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.basket-items table.data td.basket-items__amount { display: flex; flex-direction: column; align-items: end; }
.basket-items__action { grid-column: 1 / -1; justify-self: end; }
.basket-items__label { display: inline; font-size: .8125rem; color: var(--text-muted); }
}
/* The static shell remains visible until the deferred route actually has content. No database or
session-storage work is moved into prerendering just to show a heading and a retry link. */
.page:has(> .route-content > *) > .startup-shell { display: none; }
.startup-shell { padding-block: var(--space-5); }
/* Key/value detail list, used for order metadata */
.kv { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: .9375rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
/* ---------- Product cards ------------------------------------------------- */
/* Registration and checkout share a form-first layout. Reference information follows the action. */
.purchase-page { max-width: 1060px; margin-inline: auto; }
.purchase-page > .steps, .purchase-page > nav { margin-bottom: 2rem; }
.purchase-heading { margin-bottom: 2rem; }
.purchase-kicker { color: var(--brand-500); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; margin: 0 0 .625rem; }
.purchase-heading .page-header { margin-bottom: 0; }
.purchase-heading h1 { font-size: clamp(1.875rem, 3.2vw, 2.625rem); line-height: 1.15; margin-bottom: .75rem; }
.purchase-heading p:not(.purchase-kicker) { max-width: 42rem; }
.purchase-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.purchase-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.purchase-main > .card + .card { margin-top: 0; }
.purchase-rail { position: sticky; top: 6rem; min-width: 0; }
.purchase-section, .purchase-payment {
padding: 1.75rem; border: 1px solid var(--border); border-radius: 18px;
background: var(--surface); box-shadow: none; min-width: 0;
}
.purchase-section__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.purchase-section__head h2, .purchase-section__head .card__title { font-size: 1.125rem; margin: 0; }
.purchase-section__head .btn { margin-block: -.5rem; }
.count-selector { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; min-height: 150px; }
.count-selector .stepper { margin: 0; }
.steps__link, .steps__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.steps__link { color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.steps__link:hover > span:not(.steps__num) { text-decoration: underline; text-underline-offset: .2em; }
.steps__link:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 4px; }
.purchase-page .field > label:not(.checkbox) { font-size: .875rem; margin-bottom: .5rem; }
.purchase-page input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), .purchase-page select {
min-height: 46px; border-radius: 9px; font-size: 1rem;
}
.purchase-page select { max-width: none; width: 100%; }
.purchase-page .form-grid { margin-bottom: 1.25rem; }
.purchase-section > .form-grid:last-child { margin-bottom: 0; }
.purchase-page .field { margin-bottom: 1.25rem; }
.purchase-page .field:last-child { margin-bottom: 0; }
.purchase-page .field__hint { line-height: 1.5; }
.purchase-page .checkbox { font-weight: 400; line-height: 1.55; font-size: .875rem; }
.purchase-page .field > label.checkbox { display: flex; font-weight: 400; }
.consent-panel { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.consent-panel .participant-consent { padding-top: 0; border-top: 0; }
.consent-panel .participant-publication { padding-top: 1.25rem; }
.participant-add {
display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 60px; padding: 1rem;
border: 1px dashed var(--border-control); border-radius: 14px; background: transparent;
color: var(--brand-700); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.participant-add > span { font-size: 1.5rem; font-weight: 400; }
.participant-remove { flex-shrink: 0; }
.participant-add:hover:not(:disabled) { background: var(--brand-50); border-color: var(--brand-500); }
.participant-add:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.participant-add:disabled { opacity: .5; cursor: not-allowed; }
.summary.order-overview { padding: 1.5rem; border-radius: 18px; background: var(--surface); }
.order-overview__heading { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; }
.order-overview__heading h2 { margin: 0; font-size: 1.125rem; }
.order-overview__heading a { font-size: .8125rem; }
.order-overview .summary__line { align-items: flex-start; gap: .75rem; padding-block: .875rem; font-size: .875rem; }
.order-overview .summary__line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.order-overview .summary__line .num { flex-shrink: 0; }
.order-overview .summary__sub { font-size: .75rem; margin-top: .375rem; line-height: 1.45; }
.order-overview .summary__total { gap: 1rem; margin-top: .5rem; padding-top: 1.25rem; align-items: baseline; }
.order-overview .summary__total > :first-child { font-size: .875rem; font-weight: 500; }
.order-overview .summary__total > :last-child { font-size: 1.375rem; white-space: nowrap; }
.order-overview__footer { margin-top: 1.5rem; }
.purchase-actions { display: flex; gap: 1rem; align-items: center; }
.purchase-action-buttons { display: flex; flex: 1; gap: .625rem; align-items: center; min-width: 0; }
.purchase-action-buttons .btn--primary { flex: 1; min-width: 0; }
.purchase-back { flex: 0 0 auto; padding-inline: .75rem; white-space: nowrap; }
.purchase-actions .btn--primary { justify-content: center; gap: .75rem; white-space: normal; }
.purchase-action-total { display: none; }
.purchase-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.purchase-support__card { min-width: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: .8125rem; line-height: 1.6; color: var(--text-muted); }
.purchase-support__card h2 { font-size: .9375rem; color: var(--text); margin: 0 0 .625rem; }
.purchase-support__card p { margin: 0 0 .75rem; }
.purchase-support .flow-disclosure { background: transparent; border: 0; margin: .5rem 0 0; }
.purchase-support .flow-disclosure > summary { padding: .375rem 0; min-height: 36px; }
.purchase-support .flow-disclosure__body { padding: .75rem 0 0; }
#participant-data-summary { scroll-margin-top: 6rem; }
.contact-identity { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--page-bg); }
.contact-identity__name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.purchase-page .delivery-choice { padding: 1rem; margin: 0; border: 1px solid var(--border-control); border-radius: 10px; }
.purchase-page .delivery-choice:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.purchase-page .delivery-choice + .field { margin-top: 1.25rem; }
.purchase-payment { max-width: calc(100% - 352px); margin-top: 1.5rem; }
.purchase-payment > :first-child { margin-top: 0; }
.purchase-payment > .purchase-actions { margin-top: 1.5rem; justify-content: space-between; }
.purchase-payment .flow-disclosure { margin-top: 0; }
.purchase-page .secured { padding: .875rem 1rem; margin-bottom: 1.5rem; font-size: .875rem; }
.purchase-page .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purchase-page .offer__image { aspect-ratio: 4 / 3; object-fit: contain; padding: 1rem; }
.purchase-page .offer__image--empty { min-height: 150px; }
.purchase-page .offer__body { padding: 1.25rem; }
.purchase-page .offer__foot { padding: 0 1.25rem 1.25rem; }
.purchase-page .offer__desc { font-size: .8125rem; line-height: 1.6; }
.purchase-page .offer__price { font-size: 1.25rem; }
.purchase-page .flow-nav { margin-top: 0; padding-top: 0; border: 0; }
@media (max-width: 900px) {
.purchase-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; }
.purchase-section, .purchase-payment, .order-overview { padding: 1.25rem; }
.purchase-payment { max-width: calc(100% - 300px); }
.purchase-page .offers { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.purchase-page { padding-bottom: 6rem; }
.purchase-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.purchase-rail { position: static; }
.purchase-heading { margin-bottom: 1.5rem; }
.purchase-heading h1 { font-size: 1.875rem; }
.purchase-support { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; padding-top: 1.25rem; }
.purchase-payment { max-width: none; }
.purchase-actions { position: fixed; bottom: 0; inset-inline: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--border); padding: .875rem 1rem max(.875rem, env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px #0000000d; }
.purchase-action-total { display: flex; flex-direction: column; flex: 0 0 auto; gap: .125rem; font-size: .75rem; }
.purchase-action-total strong { font-size: 1rem; white-space: nowrap; }
.purchase-actions .btn--primary { flex: 1; min-width: 0; font-size: .9375rem; padding-inline: .875rem; }
.purchase-actions .btn--secondary { flex: 0 1 auto; font-size: .8125rem; padding-inline: .625rem; }
.purchase-actions .btn--lg { min-height: 48px; }
.purchase-page .steps { display: grid; grid-template-columns: repeat(4, auto); font-size: .75rem; gap: .375rem; }
.purchase-page .steps li { flex-direction: column; gap: .375rem; text-align: center; min-width: 0; }
.purchase-page .steps__link, .purchase-page .steps__item { flex-direction: column; gap: .375rem; max-width: 100%; }
.purchase-page .steps__link > span:not(.steps__num), .purchase-page .steps__item > span:not(.steps__num) { max-width: 100%; white-space: nowrap; }
.purchase-page .steps li::after { display: none; }
}
@media (max-width: 380px) {
.purchase-page { padding-bottom: 7.5rem; }
.purchase-actions:has(.purchase-action-total) { flex-wrap: wrap; gap: .5rem; }
.purchase-action-total { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; }
.purchase-action-buttons { flex-basis: 100%; }
}
.product { display: flex; flex-direction: column; gap: var(--space-2); }
.product__name { font-size: 1.0625rem; margin: 0; }
.product__desc { color: var(--text-muted); font-size: .9375rem; margin: 0; }
.product__price { font-size: 1.25rem; font-weight: 700; }
/* The call to action, pinned to the bottom of the card.
margin-top: auto is the whole mechanism: the card is a flex column stretched to its grid row, the
auto margin eats every pixel of leftover space above the button, and so a row of cards puts its
buttons on one baseline however differently the titles, descriptions, prices and stock badges above
them happen to wrap.
It replaces `flex: 1 0 auto` on .product__desc, which used to take up the slack instead. That worked
only for as long as every product had a description - and this page renders the description
conditionally, because the catalogue lets one be blank. Measured at 1440px with the middle and right
products' descriptions removed: their buttons floated 94.94px above the card's bottom edge while the
left one's sat 25px above it, putting the row 69.93px out of line. Bottom-aligning the FOOT rather
than growing a sibling that may not exist cannot come apart that way; with the same content the row
now measures 0px.
padding-top rather than a margin, because margin-top is spent on the alignment: it keeps the button
the same 16px clear of the text above it (8px of it the column's own gap) that the old
margin-top: var(--space-2) gave. */
.product__foot { margin-top: auto; padding-top: var(--space-2); }
/* ---------- Home page routing choices ------------------------------------- */
.choices { display: grid; gap: var(--space-3); }
.choice {
display: flex; flex-direction: column; gap: var(--space-1);
padding: var(--space-5); background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); text-decoration: none; color: inherit;
box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease;
}
.choice:hover { border-color: var(--brand-300); box-shadow: var(--shadow); color: inherit; }
.choice:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.choice__title { font-size: 1.0625rem; }
.choice__desc { color: var(--text-muted); font-size: .9375rem; }
/* ---------- Upsell: the one persuasive page ------------------------------- */
/* Reassurance first. A parent will not weigh a second purchase while still unsure the first worked. */
.secured {
display: flex; gap: var(--space-3); align-items: center;
padding: var(--space-4); margin-bottom: var(--space-5);
background: var(--success-50); border: 1px solid var(--success-200);
border-radius: var(--radius); color: var(--success-700);
}
.secured__tick {
display: grid; place-items: center; flex: none;
width: 1.75rem; height: 1.75rem; border-radius: 999px;
background: var(--success-700); color: var(--surface); font-weight: 700;
}
.media { border-radius: var(--radius); overflow: hidden; background: var(--ink-100); }
.media video { display: block; width: 100%; height: auto; }
.offers { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.offer {
position: relative; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-sm);
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.offer:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* The better-value option is meant to win the glance - a heavier border and a flag, not a trick. */
.offer--best { border-color: var(--brand-300); border-width: 2px; box-shadow: var(--shadow); }
.offer--chosen { border-color: var(--success-700); border-width: 2px; }
.offer__flag {
position: absolute; inset-block-start: 0; inset-inline-end: 0;
padding: var(--space-1) var(--space-3);
background: var(--accent-500); color: var(--accent-700);
font-size: .8125rem; font-weight: 700;
border-end-start-radius: var(--radius);
}
/* Portrait, for the same reason .product__image is - the real covers are portrait, and the landscape
box this used to be cropped straight through the title and the year. cover rather than contain is
safe now that the box and the source are within a few percent of each other: it fills edge to edge
and takes a sliver off instead of a band out of the middle.
NOT the same ratio as .product__image, which is now 4/5 because that is what the covers in covers/
measure (800x1000). This box is still 3/4, which against a 0.80 source crops about 3% off each
vertical edge. Left alone deliberately: it belongs to the Bebras books step, which needs a headcount
before it will render an offer and so was not measured while the shop cards were - and an unmeasured
layout change is how the shop got here. Worth revisiting with that page in front of you. */
.offer__image { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ink-100); }
.offer__image--empty {
display: grid; place-items: center; padding: var(--space-4);
color: var(--text-muted); font-size: .8125rem; text-align: center;
background: linear-gradient(135deg, var(--ink-100), var(--brand-50));
}
.offer__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1 0 auto; }
.offer__name { margin: 0; font-size: 1.0625rem; }
.offer__desc { margin: 0; font-size: .9375rem; color: var(--text-muted); flex: 1 0 auto; }
.offer__pricing { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.offer__price { font-size: 1.5rem; font-weight: 700; }
.offer__was { color: var(--text-muted); text-decoration: line-through; font-size: 1rem; }
/* The shop card's equivalent of .offer__was. Same treatment, smaller, because the shop card's price
sits on one line with it rather than in a dedicated pricing row. */
.product__was { color: var(--text-muted); text-decoration: line-through; font-size: 0.875rem; margin-left: 0.375rem; }
.offer__scarce { font-size: .875rem; font-weight: 600; color: var(--danger-700); }
.offer__foot { padding: 0 var(--space-4) var(--space-4); }
@media (max-width: 30rem) {
.offers { grid-template-columns: 1fr; }
}
/* ---------- Steps / progress ---------------------------------------------- */
.steps { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; font-size: .875rem; }
.steps li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.steps li::after { content: ""; width: 1.25rem; height: 1px; background: var(--border); margin-inline-start: var(--space-1); }
.steps li:last-child::after { display: none; }
.steps__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--ink-100); color: var(--text-muted); font-size: .75rem; font-weight: 700; flex: none; }
.steps li.is-current { color: var(--text); font-weight: 600; }
.steps li.is-current .steps__num { background: var(--brand-500); color: var(--surface); }
.steps li.is-done .steps__num { background: var(--success-700); color: var(--surface); } /* 6.1:1 light, 8.9:1 dark */
/* ---------- Flow controls ------------------------------------------------- */
/* Headcount picker. Big targets because this is the first thing anyone touches, often on a phone. */
.stepper { display: flex; align-items: center; gap: var(--space-4); }
.stepper__btn {
width: 2.75rem; height: 2.75rem; flex: none;
display: grid; place-items: center;
font-size: 1.5rem; line-height: 1; font-family: inherit;
background: var(--surface); color: var(--brand-700);
/* An edge you can see, for the same reason as .btn--secondary: this is a control, not a divider,
and it is the first thing anyone touches in the registration flow. */
border: 1px solid var(--border-control); border-radius: var(--radius-sm);
cursor: pointer;
}
.stepper__btn:hover:not(:disabled) { background: var(--brand-50); border-color: var(--brand-300); }
.stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.stepper__value { font-size: 1.75rem; font-weight: 700; min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; }
/* Back / running total / forward, in that order, on every step. */
.flow-nav {
display: flex; align-items: center; gap: var(--space-3);
margin-top: var(--space-5); padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.flow-nav__total { margin-inline: auto; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
@media (max-width: 30rem) {
.flow-nav { flex-wrap: wrap; }
.flow-nav__total { order: -1; width: 100%; align-items: flex-start; margin-inline: 0; margin-bottom: var(--space-2); }
.flow-nav .btn--lg { flex: 1 0 auto; }
}
/* Compact quantity control inside an offer card - reuses the stepper buttons. */
.qty { display: flex; align-items: center; gap: var(--space-2); }
.qty__value { font-size: 1.125rem; font-weight: 700; min-width: 1.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.qty__total { margin-inline-start: auto; font-weight: 650; }
/* Type-to-search picker (schools). Absolute list so it overlays what follows rather
than shoving the form down as suggestions appear. */
.picker { position: relative; }
.picker__input { width: 100%; }
.picker__list {
position: absolute; inset-inline: 0; top: calc(100% + 2px); z-index: 20;
margin: 0; padding: 0; list-style: none;
max-height: 15rem; overflow-y: auto;
background: var(--surface); border: 1px solid var(--brand-300);
border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.picker__list--empty { padding: var(--space-3) var(--space-4); font-size: .875rem; color: var(--text-muted); }
.picker__option {
display: flex; justify-content: space-between; gap: var(--space-3);
width: 100%; padding: var(--space-2) var(--space-3);
font: inherit; font-size: .9375rem; text-align: start;
background: none; border: 0; border-bottom: 1px solid var(--border);
cursor: pointer; color: inherit;
}
.picker__option:last-child { border-bottom: 0; }
.picker__option:hover, .picker__option[aria-selected="true"] { background: var(--brand-50); }
.picker__meta { color: var(--text-muted); font-size: .8125rem; }
/* A school already chosen reads as settled rather than as an editable field, so a stray keystroke
cannot silently clear it. */
.picker__chosen {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--brand-50); border: 1px solid var(--brand-300);
border-radius: var(--radius-sm);
}
/* ---------- Basket summary ------------------------------------------------ */
.summary { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.summary__line { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: .9375rem; }
/* A line whose caveat sits on the row below it: the border moves to the note, so the two read as one
entry rather than two. */
/* The delivery-or-collection choice, which follows the contact fields directly.
The space above is deliberately larger than the gap between two form fields: this is not another
field to fill in, it is a decision that changes what the card is charged and whether an address is
asked for at all. Sitting one field-gap below a phone input, it read as the last item of the form
rather than a question about the order. */
.delivery-choice { margin: var(--space-6) 0 var(--space-4); }
.summary__line--tight { border-bottom: 0; padding-bottom: 0; }
/* A summary row that is a real description list.
carries the label/value pairing in dt and dd, and a screen reader announces the pair as one
entry; the admin bank-operations panel used div > span > span, so "Response code" and "00" arrived
as two unrelated strings. dd's browser default indent has to go, or the value drifts 40px right of
where the flex layout puts it. */
.summary__line > dt,
.summary__line > dd { margin: 0; }
.summary__line > dt { font-weight: inherit; }
/* A detail belonging to the line above it - which participant, which option - on its own row so it
cannot run into the product name or be stranded mid-wrap by a separator. */
.summary__sub { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--text-muted); }
/* The aside under a summary line - how a fee behaves, not what it costs. Smaller and italic so it is
plainly secondary to the figure above, and indented to the same edge as the label it belongs to. */
.summary__note {
padding: .1875rem var(--space-4) var(--space-3);
border-bottom: 1px solid var(--border);
font-size: .8125rem;
font-style: italic;
color: var(--text-muted);
}
.summary__total { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); font-weight: 700; font-size: 1.0625rem; background: var(--ink-50); }
/* ---------- Icons ------------------------------------------------------------ */
/* Sized in em so an icon matches whatever text it sits beside, and coloured by currentColor so it
inherits the button it is in rather than needing a rule per variant. */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.icon--lg { width: 1.25em; height: 1.25em; }
/* An icon-only control still has to be a real target. 44px is the smallest comfortable one, and a row
of them in a table is exactly where a 20px hit area hurts - see .btn--icon below. */
.btn--icon {
display: inline-grid; place-items: center;
width: 2.25rem; height: 2.25rem; padding: 0;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--ink-700); cursor: pointer;
}
.btn--icon:hover:not(:disabled) { background: var(--ink-100); border-color: var(--border-control); }
.btn--icon:disabled { opacity: .4; cursor: not-allowed; }
.btn--icon--danger { color: var(--danger-700); }
.btn--icon--danger:hover:not(:disabled) { background: var(--danger-50); border-color: var(--danger-200); }
.btn--icon { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.125rem; text-decoration: none; }
.btn--icon:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.btn--icon--primary { background: var(--brand-500); color: var(--surface); border-color: var(--brand-500); }
.btn--icon--primary:hover:not(:disabled) { background: var(--brand-700); color: var(--surface); border-color: var(--brand-700); }
/* A row of them, kept from wrapping into a ragged column on a narrow table cell. */
.row-actions { display: inline-flex; gap: var(--space-1); align-items: center; }
/* ---------- Page help ------------------------------------------------------- */
/* The question mark beside a page title. Quiet until wanted - it is an offer, not an instruction -
but a real target, and never smaller than the heading it sits beside. */
/* The title and its help trigger on one line, wrapping together rather than the mark stranding
itself on a line of its own when the heading is long - which in Armenian it usually is.
A wrapper around the h1 rather than the h1 itself, so the heading's own text content stays exactly
the title - see the comment in PageHeader.razor. */
.page-header__title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.page-header__title-row > h1 {
margin: 0;
/* Long translated words must fit a narrow screen without widening the title's flex row. */
min-width: 0;
overflow-wrap: anywhere;
}
.page-help__trigger {
display: inline-grid; place-items: center;
width: 1.75rem; height: 1.75rem; margin-inline-start: var(--space-2);
padding: 0; border: 1px solid var(--border-control); border-radius: 999px;
background: var(--surface); color: var(--text-muted);
font-size: 1rem; cursor: pointer; vertical-align: middle;
}
.page-help__trigger:hover { color: var(--brand-700); border-color: var(--brand-300); }
/* The panel itself. A native