/* ============================================================================
Nova Market — stylesheet
Section order: tokens → base → layout → navbar → buttons → hero → company
strip → products (toolbar, grid, card) → modal → cart → auth card → form
fields → features → features (collapsible) → footer → responsive.
Every section is wrapped in matching BEGIN/END banners.
Bump the ?v= query on the in index.html after editing this file —
browsers cache local CSS aggressively, even on a hard reload.
============================================================================ */
/* ==== BEGIN: Design tokens ================================================= */
:root {
/* Sage bands — the navbar and footer share one colour, so it lives in a
single token both point at. */
--surface-band: #6f9f6f;
--surface-nav: var(--surface-band);
--surface-footer: var(--surface-band);
/* Creamy-white main section, with two supporting surfaces stepped off it:
--card sits above the page (raised), --bg-soft below it (inset). */
--bg: #f8f5ec; /* main section — creamy white */
--card: #fffdf7; /* raised cards — warm white */
--bg-soft: #edefe4; /* inset fields, media boxes */
--border: #d7dfd2; /* hairlines — sage-tinted */
/* Ink, not white: this is a light theme. Both clear AA on cream (13.4:1)
and on the sage bands (4.8:1). */
--text: #1d2b20;
--text-dim: #5a6b5c;
/* Accents. --accent-2 and --danger are darkened from typical dark-theme
values, which fail contrast as text on cream (1.7:1 and 2.5:1).
--accent-2 doubles as the company-name colour on product cards. */
--accent: #6c5ce7;
/* Second stop of the primary button's gradient. It is a token because a
company landing page overrides --accent with its own colour, and a
hardcoded purple second stop then clashes with every one of them. */
--accent-lift: #8b7cf0;
--accent-2: #0a7a68;
/* A FIGURE THIS SHOP INVENTED rather than one the manufacturer published —
pack size, trade or wholesale, marked per field by 026's three flags.
WHY A NEW HUE AND NOT AN EXISTING ONE. It had to be distinct from all four
colours already carrying meaning here: --accent purple is "the primary
action", --accent-2 teal is already "a term of sale" (see .product-compare),
--danger red is "this failed or is destructive", and the sunset is "pay on
delivery". A defaulted price is none of those — it is not an error and not
an offer, it is a placeholder waiting for someone to correct it — so
reusing any of them would have made two different things the same colour.
MEASURED: #8a2f6b on --card is 7.65:1, which clears AA for normal text with
room and very nearly AAA, so the figure stays as readable as the ones
around it. Deliberately NOT red: these products are orderable and their
prices are real charges, so colouring them like a failure would say the
wrong thing to a customer looking at the face page. */
--provisional: #8a2f6b;
--danger: #c0392b;
--star: #b5811f; /* rating glyph — warm gold */
/* Sunset yellow — the navbar monogram badge, gold falling to orange. Warm
against the sage band rather than tinted from it, which is the point: the
badge is the one place on the bar that is not a shade of green.
--brand-ink carries BOTH the "SP" monogram and the wordmark beside it, and
it is a token because the two have to stay the same ink — a monogram a
shade off its own wordmark reads as a rendering fault.
Measured by repainting this gradient to a canvas at the badge's real 38px,
masking it to the glyphs and reading the pixels actually behind ink — not
from the stop values, which are optimistic: the glyphs sit in the middle of
the sweep and never touch the pale corner. Worst glyph pixel 7.4:1, best
9.0:1, so the monogram clears AAA on every pixel of the plate. The wordmark
is 5.4:1 on the sage band, against the 4.8:1 plain --text was giving it.
There is no footer plate any more — the footer heading is the name alone,
so the navbar's 38px badge is now the only place this gradient carries a
glyph. The rule the footer used to keep is still worth stating, because it
is what made resizing the plate free: glyph and box scaled together, so the
type landed on the same part of the sweep and 7.4:1 / 9.0:1 held without
re-measuring. That does not generalise — .btn-sunset resizes the box
WITHOUT the type and its numbers move, see the note there.
Cream ink — what the badge used over its old purple — measures 1.8:1 on this
plate and is unreadable. The ink flips dark exactly because the plate went
light; the two cannot be changed independently. */
--sunset-1: #ffc24b;
--sunset-2: #f9a337;
--sunset-3: #f2802a;
--brand-ink: #14220f;
/* -- Fulfilment states -----------------------------------------------------
The admin order table's dropdown, asked for on 2026-08-23: red while
Processing, sunset yellow once Shipped, green once Delivered.
THE INK IS PAIRED WITH THE PLATE AND FLIPS BETWEEN THEM. Measured contrast
against 12.8px text, which needs 4.5:1:
#c0392b on white ink ... 5.44:1 PASS
#ffc24b on dark ink .... 10.33:1 PASS
#2e7d4f on white ink ... 5.05:1 PASS
One ink for all three is what makes this look easy and is exactly the trap:
white on #ffc24b measures 1.61:1, which is not text. Dark ink on #c0392b is
3.05:1 — legal for headings, not for this. So the pairs travel together, the
same rule the sunset tokens above keep.
GREEN IS A NEW TOKEN rather than a reuse. accent-2 (#0a7a68) is the nearest
existing colour and measures 5.25:1, but it is a teal that reads as brand
furniture next to the sage nav; #2e7d4f is unambiguously "done". */
--fulfil-processing: #c0392b;
--fulfil-processing-ink: #ffffff;
--fulfil-shipped: #ffc24b;
--fulfil-shipped-ink: var(--brand-ink);
--fulfil-delivered: #2e7d4f;
--fulfil-delivered-ink: #ffffff;
/* -- The account plate, by gender ------------------------------------------
Asked for on 2026-09-14: "pink color for a female user and sunset yellow
for a male user". Collected at sign-up (GENDERS in app.jsx, mirrored by the
backend and by migration 030's CHECK) and applied by genderPlateClass().
SUNSET YELLOW IS THE TOKEN THAT ALREADY MEANS IT — --sunset-1, aliased
rather than re-typed, the --surface-nav rule. It is NOT --fulfil-shipped,
which is the same hex: that one means "this order has shipped", and
pointing a second meaning at it would be the reuse --provisional's note
forbids. Two names, one hue, because one is a ramp stop and the other is a
meaning.
FLAT, NOT THE BRAND GRADIENT. The gradient's ratios can only be had by
rasterising the composited stack (see the note above), and a 44px circle
whose ink sits dead centre would need re-measuring on every resize. A flat
plate is one exact number. It also keeps the two plates comparable to each
other, which a gradient and a flat colour would not be.
THE PINK IS NEW, and it has to answer the two that exist. --provisional
(#8a2f6b) already means "a figure this shop invented" and is a plum dark
enough to need pale ink; --hero-magenta (#ff9ecb) is a banner copy colour
scoped to .hero-banner and was measured as INK on a dark panel, never as a
surface. Neither is a light plate for dark ink, which is what this needs.
#f7b2cd was chosen for weight as much as hue: its relative luminance is
0.560 against --sunset-1's 0.604, so the two plates carry the same visual
weight on the bar — a pink markedly darker or lighter would read as one
gender being emphasised over the other.
Measured, ink on plate, against 13.1px bold text — which is NOT WCAG large
(18.66px bold is the bar), so 4.5:1 applies and not 3:1:
--brand-ink on #f7b2cd ... 9.64:1 PASS, clears AAA
--brand-ink on #ffc24b ... 10.33:1 PASS, clears AAA
AND THE EDGE, which is where this change actually costs something. The
cream plate it replaces measures 3.01:1 against the sage band — just over
WCAG 1.4.11's 3:1 for a UI component's boundary. Both coloured plates are
well under it: #ffc24b is 1.90:1 on the band and #f7b2cd is 1.78:1. That
is stated rather than glossed, because it is a real regression and the
reason the rules below swap .btn's --border hairline for a --brand-ink
ring, which measures 5.42:1 on the band and restores the boundary with
room the cream plate never had.
NOT A COLOUR-ONLY MESSAGE, so 1.4.1 is not engaged: the plate still prints
the customer's initials, the button still carries their name in its
aria-label, and the hue reflects something they entered about themselves
rather than anything they have to act on. For the same reason no claim is
made that pink and sunset are separable under deuteranopia — they are
close in hue there, and nothing depends on telling them apart. */
--gender-female: #f7b2cd;
--gender-female-ink: var(--brand-ink);
--gender-male: var(--sunset-1);
--gender-male-ink: var(--brand-ink);
--radius: 14px;
--shadow: 0 12px 32px rgba(28,46,32,0.10);
/* Fallback height of the fixed navbar, used before JS runs. The
useFixedNavHeight hook measures the real height on mount and on resize
and writes it to this property inline on , which wins over this
rule — so editing the value here only affects the first paint. */
--nav-h: 70px;
/* -- The page column ----------------------------------------------------
THE FOUR NUMBERS BELOW DECIDE THE WHOLE WIDE-SCREEN LAYOUT, and they are
here rather than beside .product-grid because the catalogue is what sets
the page's measure: above 1400px the container is DERIVED from the width
four cards want, so the navbar, hero, showcase, company strip, catalogue
and footer all sit on one column with one pair of margins. See "The page
column on a wide screen" in the responsive section.
--card-cap is the knob. Four columns is a hard maximum (asked for on
2026-08-30), so the side margin on a big panel is entirely a consequence
of how wide a card is allowed to get — there is no third option. Measured,
at a 3840px panel: 22rem leaves 23.1% of the screen as margin each side,
24rem leaves 20.8%, 26rem leaves 18.5%. 24rem is the shipped compromise —
past that the card is mostly air, because its content is short lines and a
name plate rather than a photograph.
rem, NOT px, and that is why there is ONE set of these rather than four:
the bands below lift the root font (17/19/22px), so the cap ramps with the
type on its own and the card stays the same size RELATIVE TO ITS OWN TEXT
at every width. Same rule the 1900px block states for every other
component. */
--card-cap: 24rem;
--card-gap: 1.75rem;
--catalogue-col: calc(4 * var(--card-cap) + 3 * var(--card-gap));
/* The gutter between the page column and the screen edge. Lifted per band
below; it is the ONE length here chosen by eye rather than derived,
because it spaces the page against the SCREEN rather than text against
its own box. .container reads it for its padding so the column maths and
the padding can never drift apart. */
--page-pad: 24px;
/* What .container is actually capped at. Replaced wholesale above 1400px. */
--page-col: 1160px;
/* #/admin is the one surface that does NOT ride the catalogue's column: its
tables want the whole band. These are the container caps the page itself
used before the column was derived, kept verbatim so the dashboards did
not move when it was. */
--admin-col: 1160px;
/* -- The console's own ground ----------------------------------------------
Asked for on 2026-09-21: "style the Administration UI, include appealing
background color". The console used to sit on --bg, the same cream as the
catalogue, so the one screen that writes to the live database looked exactly
like the one that browses it. These three give it a ground of its own.
A PALE SAGE, NOT A NEW HUE. #/admin opens between two saturated
--surface-band bars — the fixed navbar above and the footer below, which
renders on this route too — so a ground from any other family would put
three unrelated colours down one screen. This is the same green, taken most
of the way to white.
MEASURED, because everything that sits DIRECTLY on this ground is text the
panels do not own — the masthead heading and its line about writing to the
live database. By the WCAG relative-luminance formula:
--text #1d2b20 on --admin-ground ... 12.24:1 clears AAA
--text-dim #5a6b5c on --admin-ground ... 4.70:1 clears AA, not AAA
The dim figure is what fixed the value. A ground one step deeper (#dbe5d6)
measures 4.38:1 and fails, so this is close to as dark as the ground can go
while the masthead's second line stays in the ink the rest of the file uses
for a second line. The alternative — promoting that line to full --text —
buys a darker ground at the cost of making a note read like a heading.
THE CARDS LIFT MORE THAN THEY DID, which is the point of the change.
--card #fffdf7 against this ground is 1.19:1 where it was 1.07:1 against
--bg. Neither is a boundary WCAG would accept unaided, and on this ground
the --border hairline does not rescue it either — measured, --border
#d7dfd2 against --admin-ground is 1.129:1, a colour chosen for cream and
all but gone here. What separates a panel is --shadow plus that 1.19:1
step; the hairline is kept because it still does the work on every cream
route the same class appears on. The gain is that a row of white panels now
reads as panels rather than as regions of one sheet.
--admin-thead is the table's own heading strip, about two thirds of the way
from --card to the ground (0.63 per channel, 0.65 by luminance) so the head
separates from the body inside a panel without becoming a second band:
--text-dim on it is 5.01:1. Named --admin-thead and NOT --admin-head-row,
which is a live layout class fifty lines into the admin block — a token and
a selector sharing a name with only a leading -- between them is a wrong
edit waiting to happen in a file navigated by grep.
--admin-row-bad is the bulk upload's "this row would not parse" tint. It is
a token rather than a literal only because the stripe below forced the rule
to be restated at a higher specificity, and one colour written twice is one
colour that drifts.
--admin-stripe is the alternating table row, and it is deliberately FAINTER
than the --bg-soft that :hover paints. Zebra and hover are two signals on
the same surface, and if the resting stripe is as strong as the pointer's
the pointer stops saying anything. Composited over --card the stripe is
L 0.942 and --bg-soft is L 0.853, so hover still visibly darkens an even
row. Note the alpha is quantised to 11/255 on the way to the screen, so the
composite is measured from that rather than from the 0.045 written here. */
--admin-ground: #e4ecdf;
--admin-thead: #eef2e8;
--admin-stripe: rgba(111, 159, 111, 0.045);
--admin-row-bad: rgba(192, 57, 43, 0.06);
}
/* ==== END: Design tokens =================================================== */
/* ==== BEGIN: Base / reset ================================================== */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
scroll-behavior: smooth;
}
#root { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { letter-spacing: -0.2px; }
/* ==== END: Base / reset ==================================================== */
/* ==== BEGIN: Layout — page bands & container =============================== */
/* Each band paints edge to edge; the .container inside it keeps content on one
shared grid. See the App component in app.jsx. */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
}
/* Navbar band — pinned to the top of the viewport, so it sits above the page
content and out of normal flow. A soft shadow separates it from the cream
below; a hairline border would read as a highlight against the sage. */
.navbar-wrap {
position: fixed;
top: 0;
left: 0;
/* --scrollbar-gutter is set by useScrollLock while an overlay is open. Taking
the body out of flow removes the document scrollbar, and this bar is fixed
with right: 0, so without the fallback-guarded variable it would spread
about 15px into the space the scrollbar just vacated -- the whole navbar
visibly jumping wider the moment a modal opens. 0px when nothing is
locked, which is every other moment. */
right: var(--scrollbar-gutter, 0px);
z-index: 100;
background: var(--surface-nav);
box-shadow:
0 1px 0 rgba(28,46,32,0.14),
0 4px 16px rgba(28,46,32,0.08);
}
/* Body band — creamy white, with two very faint green glows behind the hero
that echo the sage bands. */
.body-wrap {
flex: 1;
padding-top: var(--nav-h); /* clears the fixed navbar above */
background:
radial-gradient(1000px 500px at 10% -10%, rgba(16,185,129,0.10), transparent),
radial-gradient(800px 400px at 100% 0%, rgba(0,212,181,0.07), transparent),
var(--bg);
}
/* THE SAME BAND, WEARING THE CONSOLE'S GROUND. Set on the band and not on
.admin-wrap, because a background belongs to the thing that paints edge to
edge and .admin-wrap is a .container — it stops at the column. On #/admin,
is the only child of this element (app.jsx returns it before the
normal tree), so this colours the console and can reach nothing else.
The full-bleed alternative, a 100vw pseudo-element under .admin-wrap, is
wrong here for one reason and it is not the obvious one. 100vw is measured
against the initial containing block with scrollbars assumed ABSENT, so on a
page with a document scrollbar it is wider than the client area and puts a
horizontal scroll on a file whose comments fight horizontal scroll in half a
dozen places (.admin-table-scroll at the Tables banner below, .admin-message-
body, the product table, .bulk-body). What it does NOT do is move when
useScrollLock takes that scrollbar away — same reason — and the responsive
section says so at the "100vw does not change" note, which is why 88vw is
safe for --page-col there. Stated because the plausible-sounding second
objection is the false one.
One glow rather than the catalogue's two, pinned to the top where the tab
strip is, and in the sage rather than the hero's emerald and teal — those two
exist to sit behind the hero banner, which this route does not render. Without
it a 1160px column of flat colour under a saturated navbar looks like a
rendering fault rather than a choice. */
.body-wrap.is-admin {
background:
radial-gradient(1100px 420px at 50% -8%, rgba(111,159,111,0.22), transparent),
var(--admin-ground);
}
.container {
max-width: var(--page-col);
margin: 0 auto;
padding: 0 var(--page-pad);
width: 100%;
}
/* The admin dashboards keep the full band — see --admin-col. 0,2,0 against the
0,1,0 above, so this wins wherever either rule sits in the file.
max(), and it is not decoration. --admin-col is the container ladder the page
itself used before the column was derived from the catalogue, and that ladder
still steps at 1600/1900/2400/3200 while the page column now starts widening
at 1400. Taken on its own it would make the dashboards NARROWER than the
storefront over 1400–1899 — measured, 1160 against 1394.8 at a 1600px
monitor, an admin screen visibly inset from the site it administers. The
whole point of the exclusion is that these tables want MORE width than the
catalogue's measure, never less. */
.container.admin-wrap { max-width: max(var(--admin-col), var(--page-col)); }
/* Anchor targets would otherwise land underneath the fixed navbar when jumped
to from the hero buttons, or from an #about deep link. */
.products,
.company-strip,
.profile {
scroll-margin-top: calc(var(--nav-h) + 20px);
}
/* ==== END: Layout — page bands & container ================================= */
/* ==== BEGIN: Navbar ======================================================== */
/* Three zones: brand, search (grows), then the sign-in and cart actions. */
/* WRAPS AT EVERY WIDTH as of 2026-08-30, not only below 767px.
The 767px block below already wrapped this row and gave the search its own
full-width line, and that width was chosen for a PORTRAIT phone. A phone held
sideways is 915px and misses it entirely — and it is the harder case, because
landscape is where the breadcrumb, the search and three actions all want the
same row. Wrapping unconditionally means the row breaks when it does not fit
rather than when a number in this file says it might not, so a long company
name in the crumb is handled at 1023px the same way it is at 700px.
It costs nothing where everything fits: a flex line that is not overfull does
not wrap. And the bar's height is measured rather than declared —
useFixedNavHeight writes --nav-h on every resize — so a row that becomes two
moves the page down with it instead of hiding under the bar. */
.navbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.125rem;
padding: 0.875rem 0;
}
/* The plate-to-name gap was 0.6875rem — 11px against a 38px plate, 0.29 of the
mark. Reported on 2026-08-30 as no spacing at all, and from three metres on a
TV that is a fair description: the monogram plate and the "S" of "Savannah"
read as one object. 0.9375rem is 15px at a 16px root and 0.39 of the plate,
which is the ratio the lockup was drawn at. In rem, so it holds that ratio
through the 17/19/22px bands (15.9/17.8/20.6px) instead of tightening as the
plate grows. The 479px block below keeps its own smaller figure — the plate
is smaller there too. */
.brand {
display: flex;
align-items: center;
gap: 0.9375rem;
flex-shrink: 0;
}
/* The wordmark, STACKED: "Savannah" over "PHARMACEUTICALS LIMITED" in small
tracked capitals. Two lines rather than one because the full legal name is
what the bar should say and one line cannot afford it -- inline, and showing only
the TRADING name, it measured 286px and left a company-page search field 0px at
768px, which is why the old bar printed a truncated "Savannah" from 1023px down.
Stacked, the whole LEGAL name measures 205px: the bar gained "Limited" and lost
80px at the same time, which is the whole argument for the second line.
Still ONE flex item, and that is load-bearing: .brand is a flex row with a
0.9375rem gap, so two bare children would open that gap inside the name itself. */
.brand-name {
display: flex;
flex-direction: column;
justify-content: center;
/* nowrap on the column, not the lines: .brand does not shrink, so there is
nowhere for a THIRD line to go if either of these two wrapped. */
white-space: nowrap;
}
.brand-line-a {
font-weight: 800;
font-size: 1.22rem;
line-height: 1.04;
letter-spacing: -0.2px;
color: var(--brand-ink);
}
/* Hierarchy here is size, weight and tracking ONLY -- deliberately not opacity.
Dropped to 82% over the sage band this line measures 4.1:1, and at ~9px it is
the smallest type on the bar, which is the last place to spend contrast. Full
--brand-ink keeps it at 5.4:1. */
.brand-line-b {
margin-top: 2px;
/* Cancels the trailing letter-space the tracking adds after the final "D",
which would otherwise pad the column 1.4px wider than its glyphs and leave
the lockup looking left-shifted under "Savannah". */
margin-right: -0.145em;
font-weight: 700;
font-size: 0.575rem;
line-height: 1.1;
letter-spacing: 0.145em;
text-transform: uppercase;
color: var(--brand-ink);
}
/* The "SP" monogram on its sunset plate. See --sunset-* / --brand-ink for why
the ink is dark rather than the cream the old purple plate carried. */
.brand-mark {
width: 2.375rem;
height: 2.375rem;
border-radius: 0.6875rem;
background: linear-gradient(145deg, var(--sunset-1) 0%, var(--sunset-2) 52%, var(--sunset-3) 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.98rem;
letter-spacing: 0.5px;
/* Centres the pair against that tracking: flex centres the whole advance
width, trailing letter-space included, which sits "SP" a hair to the left. */
text-indent: 0.5px;
color: var(--brand-ink);
flex-shrink: 0;
transition: box-shadow 0.15s ease, transform 0.15s ease;
/* The monogram is safe (7.4:1) but the PLATE is not: sampled against the sage
at its four corners it runs 1.2:1 to 1.9:1, so the square itself has almost
no edge to stand on and dissolves into the band at a glance. Hence a border
drawn in shadow rather than none: pale inner rim to lift the top, hairline to
draw the boundary, soft drop to seat it. This is the shape's contrast, not
the text's, which is why it is solved with an outline instead of a colour. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
0 0 0 1px rgba(28,46,32,0.18),
0 2px 6px rgba(28,46,32,0.22);
}
/* 38px of plate is a big enough target to want feedback, which the old 32px
square never had. Hovering ANYWHERE on the lockup lifts it -- the trigger is
the whole link, the thing that moves is only the badge, so the name does not
shift under the pointer.
`a.brand`, not `.brand`: the footer heading wears the same class and is an