@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");
@import url("/app.css");
/* tokens.css
The single shared stylesheet for the equine design mockups.
The two typefaces are imported above so a screen file needs only this link.
Every screen links this file and adds only its own layout.
Everything here is extracted from reference/14-app-screens-catalogue.html.
Nothing has been redesigned. Where the reference wrote a colour value inline
or hardcoded it inside a component rule, it has been lifted into a custom
property here and referenced, so that no screen file needs to carry a value.
Values marked FLAG are extracted faithfully but were raised as
inconsistencies in the reference. Do not consolidate them without a decision.
*/
/* ============================================================
1. TOKENS
============================================================ */
:root{
/* ---- Palette, as documented in CLAUDE.md ---- */
--porcelain:#F7F8FA; /* page background */
--paper:#FFFFFF; /* cards, panels, tables */
--ink:#10233F; /* primary, navigation, buttons, headings */
--ink2:#16243A; /* body text */
--muted:#5A6673; /* secondary text */
--soft:#8A94A2; /* tertiary text, table headers */
--line:#DDE3EA; /* borders */
--line2:#EDF0F4; /* internal rules */
--gold:#A98430; /* accent. Rules and marks only, never a status */
--gold-t:#78642C; /* gold used for words */
--gold-bg:#FBF7EC; /* accent background */
--ok:#2F7A5B; /* done, sound, up to date */
--due:#B8862B; /* due soon */
--over:#B23D2E; /* overdue, missed */
--rest:#3A6BA5; /* box rest, not in work */
/* ---- Palette present in the reference but not documented ----
FLAG. CLAUDE.md states the fourteen above are the whole palette.
These fourteen more are in the reference file and are needed to
reproduce it. They want either adopting or removing. */
--deck:#E7EAEE; /* the surround behind the mockup frames */
--text-2:#55616F; /* intro and caption prose. A fourth grey */
--text-3:#3A4A5E; /* secondary button label. A fifth grey */
--edge:#C6CDD6; /* mockup frame and caption rule */
--edge-btn:#C6CED8; /* secondary button border */
--photo:#DFE5EC; /* photo and avatar placeholder fill */
--track:#E9EDF2; /* meter track */
--tint:#F4F6F9; /* selected type tile fill */
--tint-head:#FAFBFC; /* calendar day of week strip */
--faint:#C3CAD3; /* dates outside the shown month */
--nav-text:#A8B7CA; /* sidebar link */
--nav-text-dim:#C8D2DF;/* sidebar body text */
--nav-group:#6E7F96; /* sidebar group label */
--nav-on:#1A2F4E; /* sidebar current item fill */
--nav-line:#24395A; /* sidebar rule under the brand */
/* ---- Status tints, for chips and the gold note ---- */
--ok-line:#BFDCCD; --ok-bg:#F2F9F5;
--due-line:#E6D3AC; --due-bg:#FCF8EF;
--over-line:#EBC5BF; --over-bg:#FCF3F1;
--gold-line:#E4D6B4; --gold-note-t:#6A5327;
/* ---- Type ----
Body 15px. Newsreader for headings and the brand, Inter Tight for
everything else. Tabular numerals on dates, weights and money. */
--font-body:"Inter Tight",system-ui,sans-serif;
--font-head:Newsreader,Georgia,serif;
--w-400:400; --w-500:500; --w-600:600;
/* FLAG. Twenty two distinct sizes appear in the reference. Extracted as
found. Recommend consolidating to eight before any of this is built. */
--t-display:1.9rem; /* h1, and the big cost total */
--t-h2:1.5rem; /* horse name on the record header */
--t-h3:1.45rem; /* screen heading in the topbar */
--t-cap:1.2rem; /* mockup caption heading */
--t-brand:1.1rem; /* sidebar brand */
--t-phone:1.05rem; /* phone header */
--t-h4:1rem; /* card header */
--t-lead:.95rem; /* large phone button */
--t-base:.92rem; /* caption prose, timeline title */
--t-md:.9rem; /* sidebar link, input, person name */
--t-sm:.88rem; /* tab, key and value row */
--t-table:.87rem; /* table cell */
--t-note:.86rem; /* gold decision note */
--t-btn:.85rem; /* button, type tile, timeline body */
--t-xs:.82rem; /* meter label, attention timing */
--t-2xs:.8rem; /* field label, sub label, small print */
--t-3xs:.78rem; /* timeline date, filter pill */
--t-4xs:.76rem; /* chip, attribution line */
--t-5xs:.75rem; /* table header, calendar cell */
--t-6xs:.72rem; /* sidebar group label, tab bar */
--t-7xs:.7rem; /* count pill */
--t-8xs:.68rem; /* calendar event */
--lh:1.55;
/* ---- Spacing ----
FLAG. Twenty four distinct spacing values appear in the reference and
they do not form a scale. These are the recurring ones. Components below
use them where the reference value matched exactly, and a literal value
where it did not. Both want reconciling. */
--s1:.15rem; --s2:.25rem; --s3:.35rem; --s4:.45rem; --s5:.6rem;
--s6:.7rem; --s7:.8rem; --s8:.95rem; --s9:1rem; --s10:1.2rem;
--s11:2rem; --s12:3rem; --s13:5rem;
--gutter:1rem; /* card gap */
--pad-card:.95rem; /* card body and table cell padding */
--pad-main:1.2rem; /* app main region */
/* ---- Radius ----
One radius, 3px, on everything inside the app. The larger radii below
belong to the mockup furniture, not to the product. */
--r:3px;
--r-pill:99px; /* chips, filter pills, meter track, count pill */
--r-round:50%; /* status dots, avatars */
--r-frame:5px; /* FLAG. Mockup frame only */
--r-phone:22px; /* FLAG. Phone bezel only */
--r-ev:2px; /* FLAG. Calendar event. The only 2px in the file */
/* ---- Shadow. One, used sparingly ---- */
--shadow:0 10px 28px rgba(20,30,45,.10);
--shadow-phone:0 10px 28px rgba(20,30,45,.12); /* FLAG. Same shadow at .12 */
/* ---- Focus ---- */
/* The focus ring needs 3:1 against both light and ink surfaces, and it is
the one non-text contrast a keyboard user depends on entirely, so it
should not be borderline. --gold was 2.89:1 on the deck grey.
--focus-ring #8A7333 is 3.80:1 on the worst light surface and 3.80:1 on
deep ink: the single most balanced value in the palette. It is the old
--gold-t, which was fine as a ring and too light as text. */
--focus-ring:#8A7333;
--focus:2.5px solid var(--focus-ring);
--focus-offset:2px;
/* ---- Layout ---- */
--page-max:1080px;
--side-w:212px;
--bp-side:820px; /* sidebar appears */
--bp-grid:760px; /* two column card grid */
--bp-types:600px; /* type tiles go four across */
--phone-max:340px;
--table-min:560px;
--touch:44px; /* minimum target. Enforced on .inp and .btn-lg */
}
/* ============================================================
2. BASE
============================================================ */
*{box-sizing:border-box}
body{
margin:0;
background:var(--porcelain);
color:var(--ink2);
font-family:var(--font-body);
font-size:15px;
line-height:var(--lh);
}
/* A sheet presenting framed mockups sits on the deck colour and adds
class="deck" to body. A screen that is the app itself does not. */
body.deck{background:var(--deck)}
.serif{font-family:var(--font-head);font-weight:var(--w-500)}
.nums{font-variant-numeric:tabular-nums}
h1{
font-family:var(--font-head);font-weight:var(--w-400);
font-size:var(--t-display);letter-spacing:-.015em;
margin:0 0 .5rem;color:var(--ink);
}
:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
/* Not in the reference. Added because CLAUDE.md requires it. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;
}
}
/* ============================================================
3. MOCKUP FURNITURE
The sheet a set of screens is presented on. Not part of the product.
============================================================ */
.page{max-width:var(--page-max);margin:0 auto;padding:var(--s11) 1rem var(--s13)}
.intro p{max-width:64ch;color:var(--text-2);margin:0 0 var(--s5)}
.cap{margin:var(--s12) 0 .9rem;padding-bottom:.65rem;border-bottom:2px solid var(--edge)}
.cap h2{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-cap);
margin:0 0 var(--s2);color:var(--ink);
}
.cap p{margin:0;color:var(--text-2);font-size:var(--t-base);max-width:68ch}
.frame{
border:1px solid var(--edge);border-radius:var(--r-frame);overflow:hidden;
background:var(--porcelain);box-shadow:var(--shadow);
}
/* Gold decision note */
.dec{
background:var(--gold-bg);border:1px solid var(--gold-line);
border-left:3px solid var(--gold);border-radius:var(--r);
padding:var(--s6) .85rem;margin:var(--s7) 0 0;
font-size:var(--t-note);color:var(--gold-note-t);
}
.dec b{font-weight:var(--w-600)}
/* ============================================================
4. APP SHELL
============================================================ */
/* 1fr is minmax(auto,1fr), and that auto minimum is MIN-CONTENT, so a wide
child forces the track past its container instead of being made to fit.
.frame has overflow:hidden, so the excess is clipped and unreachable rather
than scrollable: measured at 375px, 26 text nodes of the homepage preview
were painted between x=424 and x=584 in a 375px viewport, in the section
headed "Drawn to the last detail".
minmax(0,1fr) lets the track shrink. Grid and flex items also default to
min-width:auto, which is the same trap one level down, so the items holding
wide content say min-width:0 explicitly.
This is the first time these layouts have been measured at a phone width.
The project's own notes record resize_window reporting success while the
viewport stayed put, so nothing had ever verified them. */
.app{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.app{grid-template-columns:var(--side-w) minmax(0,1fr)}}
/* A screen drawn without the sidebar. In the reference this was written as
an inline grid-template-columns override on five of the eight screens. */
.app.wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.app.wide{grid-template-columns:minmax(0,1fr)}}
/* Sidebar */
.side{background:var(--ink);color:var(--nav-text-dim);padding:.9rem 0}
.side .bd{
display:flex;align-items:center;gap:.5rem;padding:0 1rem 1rem;
font-family:var(--font-head);font-size:var(--t-brand);color:var(--paper);
border-bottom:1px solid var(--nav-line);margin-bottom:var(--s7);
}
.side .bd i{
width:16px;height:16px;border-radius:var(--r-round);
background:var(--gold);display:inline-block;
}
.side a:not(.btn){
display:flex;align-items:center;justify-content:space-between;gap:.5rem;
padding:.5rem 1rem;color:var(--nav-text);text-decoration:none;font-size:var(--t-md);
}
.side a:not(.btn).on{
color:var(--paper);background:var(--nav-on);border-left:3px solid var(--gold);
padding-left:calc(1rem - 3px);
}
.side .pill{
background:var(--over);color:var(--paper);font-size:var(--t-7xs);
padding:.05rem var(--s3);border-radius:var(--r-pill);
}
.side .grp{font-size:var(--t-6xs);color:var(--nav-group);padding:.9rem 1rem .3rem}
/* Main region and topbar */
.main{padding:var(--pad-main);min-width:0}
.topbar{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;margin-bottom:1.1rem}
.topbar h3{
font-family:var(--font-head);font-weight:var(--w-400);font-size:var(--t-h3);
margin:0;color:var(--ink);
}
.topbar .sp{margin-left:auto;display:flex;gap:var(--s4)}
/* ============================================================
5. BUTTONS
FLAG. All three variants come out about 32px tall against the 44px
minimum in CLAUDE.md. Extracted at the drawn size.
============================================================ */
.btn{
padding:var(--s4) var(--s7);border-radius:var(--r);font-size:var(--t-btn);
font-weight:var(--w-600);border:1.5px solid transparent;text-decoration:none;
display:inline-block;cursor:pointer;font-family:inherit;line-height:var(--lh);
}
.btn-p{background:var(--ink);color:var(--paper)}
.btn-s{border-color:var(--edge-btn);color:var(--text-3);background:var(--paper)}
.btn-g{border-color:var(--gold);color:var(--gold-t);background:var(--paper)}
/* Large phone button */
.bigbtn{
display:block;width:100%;text-align:left;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r);padding:.85rem .9rem;
margin-bottom:.5rem;font-size:var(--t-lead);font-weight:var(--w-600);
color:var(--ink);font-family:inherit;cursor:pointer;
}
.bigbtn small{
display:block;font-weight:var(--w-400);color:var(--muted);
font-size:var(--t-2xs);margin-top:.1rem;
}
/* ============================================================
6. CARD
============================================================ */
.card{
background:var(--paper);border:1px solid var(--line);
border-radius:var(--r);margin-bottom:var(--s9);
}
.card .hd{
padding:var(--s6) var(--s8);border-bottom:1px solid var(--line2);
display:flex;align-items:center;gap:var(--s5);
}
.card .hd .hd-h,.card .hd h2,.card .hd h3,.card .hd h4{
margin:0;font-family:var(--font-head);font-weight:var(--w-500);
font-size:var(--t-h4);color:var(--ink);
}
.card .hd .rt{margin-left:auto;font-size:var(--t-2xs);color:var(--text-2)}
.card .bd2{padding:var(--pad-card)}
.grid2{display:grid;gap:var(--gutter);grid-template-columns:1fr}
@media(min-width:760px){.grid2{grid-template-columns:1.35fr 1fr}}
/* ============================================================
7. ATTENTION LIST
============================================================ */
.attn{border-left:3px solid var(--over)}
.attn ul{list-style:none;margin:0;padding:0}
.attn li{
display:flex;gap:var(--s5);align-items:baseline;padding:.55rem var(--s8);
border-bottom:1px solid var(--line2);font-size:var(--t-md);
}
.attn li:last-child{border-bottom:none}
.attn li em{
font-style:normal;color:var(--text-2);margin-left:auto;
font-size:var(--t-xs);white-space:nowrap;
}
/* ============================================================
8. STATUS DOT
Two dot forms exist in the reference: .dotm standing at the head of an
attention row, and .dot i paired inline with its word elsewhere. Both kept.
The status colour was written inline on every dot in the reference. The
modifiers below replace that, so no screen file carries a colour value.
Rule: every dot carries a word beside it.
============================================================ */
.dotm{
width:7px;height:7px;border-radius:var(--r-round);display:inline-block;
flex:none;position:relative;top:-1px;
}
.dot{display:inline-flex;align-items:center;gap:.38rem}
.dot i{width:7px;height:7px;border-radius:var(--r-round);display:inline-block;flex:none}
.is-ok{background:var(--ok)}
.is-due{background:var(--due)}
.is-over{background:var(--over)}
.is-rest{background:var(--rest)}
.is-ink{background:var(--ink)}
.sub{font-weight:var(--w-400);color:var(--text-2);font-size:var(--t-2xs)}
/* ============================================================
9. TABLE
============================================================ */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:var(--table-min);font-size:var(--t-table)}
th,td{
text-align:left;padding:.58rem var(--s8);white-space:nowrap;
border-bottom:1px solid var(--line2);
}
thead th{color:var(--text-2);font-weight:var(--w-500);font-size:var(--t-5xs)}
tbody th{font-weight:var(--w-600);color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
/* ============================================================
10. HORSE HEADER, CHIPS AND TABS
============================================================ */
.hhead{display:flex;gap:.9rem;align-items:flex-start;flex-wrap:wrap}
.hphoto{width:76px;height:76px;border-radius:var(--r);background:var(--photo);flex:none}
.hhead h3{margin:0 0 var(--s1)}
/* These three were written as inline styles in the reference */
.hhead .hbody{flex:1;min-width:200px}
.hhead .hname{font-size:var(--t-h2);color:var(--ink)}
.hhead .hmeta{color:var(--muted);font-size:var(--t-sm)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:.5rem}
.chip{
font-size:var(--t-4xs);padding:.16rem var(--s4);border-radius:var(--r-pill);
border:1px solid var(--line);background:var(--paper);color:var(--muted);
}
.chip.ok{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)}
.chip.due{border-color:var(--due-line);color:var(--due);background:var(--due-bg)}
.chip.over{border-color:var(--over-line);color:var(--over);background:var(--over-bg)}
.tabs{
display:flex;gap:.1rem;overflow-x:auto;
border-bottom:1px solid var(--line);margin:var(--s9) 0;
}
.tabs a{
padding:.5rem .75rem;font-size:var(--t-sm);color:var(--muted);
text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;
}
.tabs a.on{color:var(--ink);border-bottom-color:var(--gold);font-weight:var(--w-600)}
/* ============================================================
11. METER
============================================================ */
.m{margin-bottom:var(--s7)}
.m:last-child{margin-bottom:0}
.ml{display:flex;justify-content:space-between;font-size:var(--t-xs);margin-bottom:var(--s2)}
.ml span:last-child{color:var(--muted)}
.bar2{height:6px;background:var(--track);border-radius:var(--r-pill);overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--ink)}
.bar2.g i{background:var(--gold)}
/* ============================================================
12. TIMELINE LIST AND FILTER PILLS
============================================================ */
.tl{list-style:none;margin:0;padding:0}
.tl li{
display:grid;grid-template-columns:78px 1fr;gap:var(--s6);
padding:.75rem var(--s8);border-bottom:1px solid var(--line2);
}
.tl li:last-child{border-bottom:none}
.tl .dt{
font-size:var(--t-3xs);color:var(--text-2);padding-top:.1rem;
font-variant-numeric:tabular-nums;
}
.tl strong{display:block;font-size:var(--t-base);font-weight:var(--w-600)}
.tl p{margin:var(--s1) 0 0;font-size:var(--t-btn);color:var(--muted)}
.tl .by{font-size:var(--t-4xs);color:var(--text-2);margin-top:var(--s2)}
.filters{
display:flex;gap:var(--s3);flex-wrap:wrap;padding:var(--s6) var(--s8);
border-bottom:1px solid var(--line2);
}
.f{
font-size:var(--t-3xs);padding:.2rem .55rem;border:1px solid var(--line);
border-radius:var(--r-pill);background:var(--paper);color:var(--muted);
}
.f.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* ============================================================
13. CAPTURE: TYPE TILES, FORM FIELD, OFFLINE BANNER
============================================================ */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(min-width:600px){.types{grid-template-columns:repeat(4,1fr)}}
.type{
border:1px solid var(--line);border-radius:var(--r);padding:var(--s7) var(--s5);
text-align:center;background:var(--paper);font-size:var(--t-btn);
}
.type.on{
border-color:var(--ink);border-width:2px;background:var(--tint);
font-weight:var(--w-600);color:var(--ink);
}
.field{margin-bottom:var(--s7)}
.field label{display:block;font-size:var(--t-2xs);color:var(--muted);margin-bottom:var(--s2)}
.inp{
border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
padding:.5rem .65rem;font-size:var(--t-md);color:var(--ink2);font-family:inherit;
}
.inp.full{display:block;width:100%}
.inp.area{min-height:64px}
.offline{
display:flex;align-items:center;gap:var(--s4);font-size:var(--t-2xs);
color:var(--gold-t);background:var(--gold-bg);border:1px solid var(--gold-line);
border-radius:var(--r);padding:.4rem var(--s5);margin-bottom:.9rem;
}
/* ============================================================
14. CALENDAR
============================================================ */
/* minmax(0,1fr), not 1fr. A bare 1fr is minmax(auto,1fr) and that auto
minimum is MIN-CONTENT, so a cell holding an event chip with
white-space:nowrap pushes its own column wider and starves the rest. With
real events in it the seven columns measured 102, 111, 121, 135, 27, 27 and
120 pixels, and the grid overflowed its card. Two columns at 27px is not a
calendar.
This is the same fault that took the mobile app shell out in September, in a
component that had been drawn and never rendered with content in it. The
min-width on the cell is the other half: without it the child can still
refuse to shrink. */
.cal{
display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
border-left:1px solid var(--line2);border-top:1px solid var(--line2);
}
.cal div{
border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);
min-height:56px;padding:.3rem var(--s3);font-size:var(--t-5xs);min-width:0;
}
.cal .dow{
min-height:0;color:var(--text-2);text-align:center;
padding:var(--s3) 0;background:var(--tint-head);
}
.cal .num{color:var(--text-2);font-variant-numeric:tabular-nums}
.cal .ev{
display:block;font-size:var(--t-8xs);padding:.08rem var(--s2);
border-radius:var(--r-ev);margin-top:var(--s1);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;color:var(--paper);
}
.cal .out{color:var(--muted)} /* was --faint at 1.65:1 */
/* Today, in the grid. A ring rather than a fill, because a fill would compete
with the event chips sitting inside the same cell. */
.cal .is-today{box-shadow:inset 0 0 0 2px var(--gold)}
/* The key under the grid.
.ev.ok and its siblings set only a background: the padding, the radius and
the white text all live on .cal .ev, scoped to the grid. So a chip used in a
legend outside the grid was a bare coloured block with body text on it, and
on the gold that is dark on dark. This gives a legend the same chip.
The due fill takes deep ink for the same reason it does in the grid: gold
with white on it is 1.9:1, and deep ink on gold is 5.38:1. */
.evkey{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.evkey .ev{
display:inline-block;font-size:var(--t-8xs);padding:.08rem var(--s3);
border-radius:var(--r-ev);color:var(--paper);white-space:nowrap;
}
.evkey .ev.due,.evkey .ev.due b{color:var(--ink-deep)}
/* Event fills. Written inline in the reference. */
.ev.ok{background:var(--ok)}
.ev.due{background:var(--due)}
.ev.over{background:var(--over)}
.ev.rest{background:var(--rest)}
.ev.ink{background:var(--ink)}
/* ============================================================
15. PEOPLE
============================================================ */
.person{
display:flex;align-items:center;gap:var(--s6);
padding:var(--s6) var(--s8);border-bottom:1px solid var(--line2);
}
.person:last-child{border-bottom:none}
.person .av{width:34px;height:34px;border-radius:var(--r-round);background:var(--photo);flex:none}
.person strong{display:block;font-size:var(--t-md)}
.person small{color:var(--text-2);font-size:var(--t-2xs)}
.person .role{margin-left:auto;font-size:var(--t-2xs);color:var(--muted);text-align:right}
.person .role small{color:var(--text-2)}
/* ============================================================
16. COSTS
============================================================ */
.big{
font-family:var(--font-head);font-size:var(--t-display);color:var(--ink);
line-height:1;font-variant-numeric:tabular-nums;
}
.kv{
display:flex;justify-content:space-between;font-size:var(--t-sm);
padding:.42rem 0;border-bottom:1px solid var(--line2);
}
.kv:last-child{border-bottom:none}
.kv span:last-child{font-variant-numeric:tabular-nums}
/* ============================================================
17. PHONE FRAME AND BOTTOM TAB BAR
============================================================ */
.phone{
max-width:var(--phone-max);margin:0 auto;border:1px solid var(--edge);
border-radius:var(--r-phone);overflow:hidden;background:var(--porcelain);
box-shadow:var(--shadow-phone);
}
.phone .ph{
background:var(--ink);color:var(--paper);padding:var(--s7) .9rem;
font-family:var(--font-head);font-size:var(--t-phone);
}
.phone .pb{padding:.9rem}
.tabbar{display:flex;border-top:1px solid var(--line);background:var(--paper)}
.tabbar span{
flex:1;text-align:center;padding:var(--s5) .2rem;
font-size:var(--t-6xs);color:var(--text-2);
}
.tabbar span.on{color:var(--ink);font-weight:var(--w-600);box-shadow:inset 0 2px 0 var(--gold)}
/* ============================================================
18. PUBLIC WEBSITE
The signed out marketing and tools site in draftdesign/.
Not extracted from the reference, because the reference draws no public
pages. Built only from the tokens above: no new colour, radius, shadow or
type size. Three deliberate departures from the reference, each flagged
in a gold note on the page and raised in DECISIONS.md:
D29 targets here are 44px, where the reference draws 32px buttons
D30 secondary prose uses --text-2, because --muted and --soft fail AA
D31 the hero heading is --t-display, the largest size the reference has
Superseded. See section 19: a display scale was added on your
instruction to make the homepage read premium.
============================================================ */
/* Skip link */
.skip{
position:absolute;left:-9999px;top:0;z-index:10;
background:var(--ink);color:var(--paper);padding:var(--s6) var(--s9);
border-radius:var(--r);font-size:var(--t-btn);font-weight:var(--w-600);
}
.skip:focus{left:var(--s9);top:var(--s9)}
/* Container */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--s9)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--s9)}
/* Header. The gold hairline under it is the first premium note on the
page, and gold as a rule is what the accent is for. */
.sitehead{
background:var(--paper);border-bottom:1px solid var(--gold);
position:sticky;top:0;z-index:5;
}
.sitehead .in{
display:flex;align-items:center;gap:var(--s9);
min-height:64px;flex-wrap:wrap;padding:var(--s4) 0;
}
.brand{
display:inline-flex;align-items:center;gap:var(--s5);
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-brand);
color:var(--ink);text-decoration:none;margin-right:auto;
min-height:var(--touch);
}
.brand i{
width:16px;height:16px;border-radius:var(--r-round);
background:var(--gold);display:inline-block;flex:none;
}
.brand small{
display:block;font-family:var(--font-body);font-size:var(--t-4xs);
font-weight:var(--w-400);color:var(--text-2);margin-top:-.2rem;
}
.nav{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.nav a:not(.btn){
display:inline-flex;align-items:center;min-height:var(--touch);
padding:0 var(--s6);color:var(--text-2);text-decoration:none;
font-size:var(--t-md);font-weight:var(--w-500);border-radius:var(--r);
}
.nav a:not(.btn):hover{color:var(--ink);background:var(--porcelain)}
.nav a:not(.btn).on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.nav .div{width:1px;height:24px;background:var(--line);margin:0 var(--s4)}
/* Buttons at the size CLAUDE.md asks for. See D29. */
.btn-lg{
display:inline-flex;align-items:center;justify-content:center;
min-height:var(--touch);padding:0 var(--s10);border-radius:var(--r);
font-size:var(--t-md);font-weight:var(--w-600);border:1.5px solid transparent;
text-decoration:none;cursor:pointer;font-family:inherit;
}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center}
/* Section rhythm */
.band{padding:var(--s12) 0;border-bottom:1px solid var(--line)}
.band.tint{background:var(--porcelain)}
.band.ink{background:var(--ink);border-bottom:none}
.band.last{border-bottom:none}
.eyebrow{
font-size:var(--t-4xs);font-weight:var(--w-600);letter-spacing:.08em;
text-transform:uppercase;color:var(--gold-t);margin:0 0 var(--s4);
}
.band.ink .eyebrow{color:var(--gold)}
.h2{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-h3);
color:var(--ink);margin:0 0 var(--s5);letter-spacing:-.01em;
}
.band.ink .h2{color:var(--paper)}
.h3{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-h4);
color:var(--ink);margin:0 0 var(--s2);
}
.lede{font-size:var(--t-lead);color:var(--text-2);margin:0 0 var(--s9);max-width:64ch}
.band.ink .lede{color:var(--nav-text-dim)}
.p{color:var(--text-2);margin:0 0 var(--s5);max-width:68ch}
.p.tight{margin-bottom:var(--s2)}
.fine{font-size:var(--t-2xs);color:var(--text-2);margin:var(--s5) 0 0}
/* Hero */
.hero{padding:var(--s12) 0}
@media(min-width:820px){.hero-grid{grid-template-columns:1.05fr .95fr}}
/* Scoped to :not(.mega) so it cannot out-specify the component class. The
unscoped version was (0,1,1) against .mega at (0,1,0) and won, which is
why the headline rendered at the old display size. */
.hero h1:not(.mega){font-size:var(--t-display);line-height:1.15;margin:0 0 var(--s6);max-width:22ch}
/* Column sets */
@media(min-width:600px){.cols-2,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:760px){.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.cols-4{grid-template-columns:repeat(4,1fr)}}
/* A whole card that is one link */
/* Marked list. The mark is gold, the meaning is in the words. */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:0 0 var(--s6) var(--s10);color:var(--text-2)}
.ticks li:last-child{padding-bottom:0}
.ticks li::before{
content:"";position:absolute;left:0;top:.5rem;
width:7px;height:7px;background:var(--gold);
}
.ticks strong{color:var(--ink);font-weight:var(--w-600);display:block}
.band.ink .p,.band.ink .ticks li{color:var(--nav-text-dim)}
.band.ink .ticks strong{color:var(--paper)}
.band.ink .fine{color:var(--nav-text)}
/* Sources box. Deliberately not gold, so it is not read as a decision note. */
.src{
background:var(--porcelain);border:1px solid var(--line);
border-left:3px solid var(--ink);border-radius:var(--r);
padding:var(--s7) var(--s8);margin:var(--s9) 0;font-size:var(--t-md);
}
/* Was .src h4, which sat between the page h1 and the first section h2 and
skipped two levels. Same declarations, honest level. */
.src .src-h,.src .hd-h,.src h4{
margin:0 0 var(--s4);font-family:var(--font-head);font-weight:var(--w-500);
font-size:var(--t-h4);color:var(--ink);
}
.src ul{list-style:none;margin:0;padding:0}
.src li{padding:var(--s3) 0;border-bottom:1px solid var(--line2);color:var(--text-2)}
.src li:last-child{border-bottom:none}
.src .when{display:block;font-size:var(--t-2xs);color:var(--text-2)}
/* First thing in a column, so it lines up with the heading beside it */
.first{margin-top:0}
/* Unconfirmed content. Every invented rule or URL wears one of these. */
.tbc{
font-size:var(--t-4xs);font-weight:var(--w-600);color:var(--gold-note-t);
background:var(--gold-bg);border:1px dashed var(--gold-line);
border-radius:var(--r);padding:.05rem var(--s3);white-space:nowrap;
}
/* Guide prose */
.prose{max-width:68ch}
.prose h2{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-cap);
color:var(--ink);margin:var(--s11) 0 var(--s5);
}
.prose h3{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-h4);
color:var(--ink);margin:var(--s9) 0 var(--s2);
}
.prose p{margin:0 0 var(--s6);color:var(--ink2)}
.prose ul,.prose ol{margin:0 0 var(--s6);padding-left:var(--s10);color:var(--ink2)}
.prose li{margin-bottom:var(--s3)}
.prose a:not(.btn){color:var(--gold-t);text-decoration:underline}
/* On this page */
.toc{border-left:2px solid var(--line);padding-left:var(--s8)}
.toc .toc-h,.toc .hd-h,.toc h4{
margin:0 0 var(--s4);font-size:var(--t-4xs);font-weight:var(--w-600);
letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
}
.toc a{
display:flex;align-items:center;min-height:var(--touch);
font-size:var(--t-md);color:var(--text-2);text-decoration:none;
}
.toc a:hover{color:var(--ink)}
/* Breadcrumb */
.crumb{font-size:var(--t-2xs);color:var(--text-2);margin:0 0 var(--s5)}
.crumb a:not(.btn){color:var(--text-2)}
/* Footer */
.foot{background:var(--ink);color:var(--nav-text-dim);padding:var(--s12) 0 var(--s11)}
.foot-grid{display:grid;gap:var(--s9);grid-template-columns:1fr}
@media(min-width:600px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
/* Was .foot h5. An sitting directly after an skips three levels
and gives a screen reader a broken outline, so the markup is
, so the browser heading defaults for size,
weight and margin have to be reset explicitly. The clause title is the
heading for its clause: that is what it is, and saying so gives a screen
reader user a list of clauses to jump between. */
.doc .cl-no{
margin:0;font-family:var(--font-body);
font-size:var(--t-2xs);font-weight:var(--w-400);
letter-spacing:.08em;text-transform:uppercase;
color:var(--text-3);
}
.doc .cl-no b{
display:block;font-family:var(--font-head);font-weight:var(--w-500);
font-size:var(--t-h4);color:var(--gold-dp);letter-spacing:0;
font-variant-numeric:tabular-nums;text-transform:none;margin-bottom:var(--s2);
}
.doc .cl-body > :first-child{margin-top:0}
.doc .cl-body > :last-child{margin-bottom:0}
.doc .cl-body h3{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-h4);
color:var(--ink);margin:var(--s6) 0 var(--s3);
}
.doc .cl-body p{margin:0 0 var(--s5);font-size:var(--t-md);color:var(--text-3);line-height:1.65}
.doc .cl-body ul{margin:0 0 var(--s5);padding-left:0;list-style:none}
.doc .cl-body li{
position:relative;padding-left:var(--s7);margin-bottom:var(--s3);
font-size:var(--t-md);color:var(--text-3);line-height:1.6;
}
/* A gold en rule rather than a bullet, to match the rules used everywhere
else on the site. */
.doc .cl-body li::before{
content:"";position:absolute;left:0;top:0.62em;
width:calc(var(--s5));height:1px;background:var(--gold-line);
}
.doc .cl-body dl{margin:0 0 var(--s5)}
.doc .cl-body dt{
font-size:var(--t-xs);font-weight:var(--w-600);color:var(--ink);
margin-top:var(--s4);
}
.doc .cl-body dd{margin:0 0 var(--s3);font-size:var(--t-md);color:var(--text-3);line-height:1.6}
@media (max-width:820px){
.doc > .cl{grid-template-columns:1fr;gap:var(--s4)}
}
/* ---- The last updated line ------------------------------------------ */
.updated{
font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;
color:var(--text-3);margin:0 0 var(--s9);
font-variant-numeric:tabular-nums;
}
/* ---- The legal index -------------------------------------------------
Reuses the ruled index from section 23 but carries a sentence, so it is
its own small variant rather than a fourth use of .lxb.
-------------------------------------------------------------------- */
.lgx{list-style:none;margin:0;padding:0;border-top:2px solid var(--gold-line)}
.lgx li{border-bottom:1px solid var(--line)}
.lgx a{
display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
gap:var(--s9);padding:var(--s7) 0;text-decoration:none;color:inherit;
}
.lgx a:hover .lgx-name,.lgx a:focus-visible .lgx-name{color:var(--gold-dp)}
.lgx-name{
font-family:var(--font-head);font-weight:var(--w-500);font-size:var(--t-h4);
color:var(--ink);
}
.lgx-when{
display:block;font-size:var(--t-3xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--text-3);margin-top:var(--s2);
font-variant-numeric:tabular-nums;
}
.lgx p{margin:0;font-size:var(--t-md);color:var(--text-3);line-height:1.55}
/* A row that is deliberately not a link, because the page it would point at
does not exist. Same grid, no hover, and the name is not drawn as
something to click. */
.lgx-off{
display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
gap:var(--s9);padding:var(--s7) 0;
}
.lgx-off .lgx-name{color:var(--text-3);font-style:italic}
@media (max-width:820px){.lgx-off{grid-template-columns:1fr;gap:var(--s3)}}
@media (max-width:820px){
.lgx a{grid-template-columns:1fr;gap:var(--s3)}
}
/* ---- The summary, on a privacy notice -------------------------------
The reference site opens its privacy policy with a plain summary before
the clauses, which is the single most useful thing on the page. Ruled,
not boxed, and set slightly larger than the clauses so it reads first.
-------------------------------------------------------------------- */
.gist{
border-top:2px solid var(--gold-line);border-bottom:2px solid var(--gold-line);
padding:var(--s8) 0;margin:0 0 var(--s11);
}
.gist ul{margin:0;padding:0;list-style:none}
.gist li{
position:relative;padding-left:var(--s8);margin-bottom:var(--s5);
font-size:var(--t-sm);color:var(--text-3);line-height:1.6;
}
.gist li:last-child{margin-bottom:0}
.gist li::before{
content:"";position:absolute;left:0;top:0.66em;
width:var(--s6);height:1px;background:var(--gold-dp);
}
/* ---- The section head -----------------------------------------------
Was defined inline in index.html, which meant every new page had to
redeclare it or silently lose the layout. It is used by ten pages now,
so it belongs here. The clamp sits on the text column rather than the
grid, or the margin grid collapses to the width of a paragraph.
-------------------------------------------------------------------- */
.sect-head{margin:0 0 var(--s10)}
.sect-head > div{max-width:62ch}
/* Inline code, used on the cookies page to name a cookie exactly. */
code{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.9em;color:var(--ink);background:var(--porcelain);
border:1px solid var(--line);border-radius:var(--r);padding:0.05em 0.35em;
}
/* ============================================================
25. THE CONTRAST FIXES
------------------------------------------------------------
From `npm run a11y:pages`, which resolves every text node in every mockup
page against its real ancestor background and computes the WCAG 2.2 ratio.
Fifteen distinct failures, all verified against the markup rather than
guessed at from the stylesheet.
Two of them were tokens too light to carry text on any light surface, and
those are fixed at source in section 2 rather than here:
--muted #6E7C8C -> #5A6673 was 4.26:1 on white, now 5.86:1
--gold-t #8A7333 -> #806B2F was 4.31:1 on porcelain, now 4.87:1
--soft #8A94A2 was carrying text on nineteen rules at 3.07:1. It is
unchanged, because 3.07:1 satisfies the 3:1 rule for hairlines and dots
which is all it is now used for, and every text use moved to --text-2.
A correction to D126 while it is in view: it recorded --text-2 as failing
at 4.19:1. That figure belongs to --muted. --text-2 measures 6.31:1 on
white and 5.23:1 on the darkest light surface, and passes everywhere. The
comment in section 24 that moved the legal pages off it was acting on the
wrong number; no harm done, since --text-3 is darker still.
What follows is the failures that were about context rather than colour.
============================================================ */
/* ---- The comparison table on the ink band ---------------------------
This is the one somebody actually noticed, and it was mine.
The table sits in . It used to be wrapped in a
.card, which painted white behind it, and the dark text on that white was
fine. Section 23 removed the card as decoration. It was not decoration: it
was the only thing making the table legible.
.compare .now was --ink on --ink-deep. That is 1.11:1. Near-black on
near-black, which is not low contrast, it is invisible.
-------------------------------------------------------------------- */
.on-ink .compare .now{color:var(--paper)}
.on-ink .compare .was{color:var(--nav-text-dim)}
.on-ink .compare thead th{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.on-ink .compare thead th:last-child{color:var(--gold-hi)}
.on-ink .compare td{border-bottom-color:var(--ink-hair)}
/* The tick before a .now cell was gold, which is 5:1 on ink and fine, but
the rule that set it assumed a light background for the surrounding text. */
.on-ink .compare .now::before{color:var(--gold-hi)}
/* ---- A ghost button on a light background ---------------------------
.btn-ghost was defined twice, and both definitions were for use on ink:
--gold at 3.48:1 and then --gold-hi at 2.39:1 on white. It was only ever
used on the hero, so nobody had noticed, until the about page and the
accessibility page put one on a light band.
The base case is now the light one, because that is the safe default, and
the ink context overrides it. That ordering is the fix: a component whose
only definition assumes a dark parent will fail the first time somebody
uses it anywhere else.
-------------------------------------------------------------------- */
.btn-ghost{background:transparent;border-color:var(--gold-dp);color:var(--gold-dp)}
.on-ink .btn-ghost{border-color:var(--gold-hi);color:var(--gold-hi)}
/* ---- A button inside something that styles links --------------------
.nav a is (0,1,1). .btn-p is (0,1,0). So the navigation link colour beat
the primary button colour, and "Start free" in the header rendered in
secondary grey on the ink fill at 2.49:1, on nine pages. The most
important control on the site, and it was the least readable thing on it.
.prose a did the same on the guide page at 2.61:1.
Restated as a rule worth remembering: a container that colours every
descendant link will out-specify a single-class button, every time.
-------------------------------------------------------------------- */
.nav a.btn-p,.prose a.btn-p,.fine a.btn-p,.p a.btn-p,.crumb a.btn-p{
color:var(--paper);
}
.nav a.btn-gold,.prose a.btn-gold,.fine a.btn-gold,.p a.btn-gold{
color:var(--ink-deep);
}
.nav a.btn-ghost,.prose a.btn-ghost,.fine a.btn-ghost,.p a.btn-ghost{
color:var(--gold-dp);
}
.on-ink .nav a.btn-ghost,.on-ink .prose a.btn-ghost{color:var(--gold-hi)}
.nav a.btn-s,.prose a.btn-s{color:var(--text-3)}
.nav a.btn-g,.prose a.btn-g{color:var(--gold-dp)}
/* ---- Group labels in the dark rail ----------------------------------
--nav-group is 4.26:1 on --ink-deep, set at 11.5px. Large-text rules do
not apply anywhere near that size, so it needs the full 4.5:1.
--nav-text is 8.54:1 and is already the rail's own secondary colour.
-------------------------------------------------------------------- */
.rail .grp,.side .grp{color:var(--nav-text)}
.nav-item .tag{color:var(--text-2)}
.rail .nav-item .tag,.side .nav-item .tag{color:var(--nav-text)}
/* ---- The offline note on the gold wash ------------------------------
--gold-t on --gold-bg was 4.28:1. The token is darker now, which fixes
it, but this note is small and important enough to take the deeper gold
and stop being borderline.
-------------------------------------------------------------------- */
.offline{color:var(--gold-note-t)}
/* ---- Days outside the current month ---------------------------------
--faint at 1.65:1 was being used for the numbers on the greyed-out days
either side of a month. Those are still information: somebody checking
whether the farrier is due on the 31st needs to read them.
WCAG has an exception for genuinely disabled controls. A date you can
still click is not disabled, so the exception does not apply.
-------------------------------------------------------------------- */
.cal .out{color:var(--muted)}
.cal .out .num{color:var(--muted)}
/* A day outside the month is a link to that month, so it needs to look like a
day number rather than like body copy with a rule under it, and it needs a
target somebody can hit outdoors. The cell is about 90px wide, so 44px
inside it is comfortable. Underline on hover and on focus only, which keeps
the grid quiet while still saying it is a link when you go for it. */
.cal .out a.num{text-decoration:none;display:inline-flex;align-items:center;
justify-content:center;min-width:44px;min-height:44px;margin:-10px 0 -6px -10px;
border-radius:2px}
.cal .out a.num:hover{color:var(--ink);text-decoration:underline}
.cal .out a.num:focus-visible{color:var(--ink);outline:2px solid var(--gold);
outline-offset:-2px;text-decoration:underline}
/* ---- Status chips ---------------------------------------------------
.chip.due used --due at 3.06:1 on its own wash. Every status chip already
carries a word as well as a colour, which satisfies 1.4.1, but the word
still has to be readable.
-------------------------------------------------------------------- */
.chip.due{color:var(--gold-note-t)}
.chip.over{color:var(--over)}
.chip.ok{color:var(--ok)}
/* ---- The due event in the calendar ----------------------------------
White on --due #B8862B is 3.24:1. The other three event colours are
fine with white on them, at 5.18, 5.83 and 5.49, so this was the one
odd one out rather than a systemic problem: gold is simply lighter than
green, red and blue at the same apparent saturation.
Deep ink on the gold is 5.38:1, and it matches how .btn-gold already
works. Darkening --due instead would have been the other option, but
--due is also the border and dot colour for the whole due state and
changing it would ripple further than this one chip.
-------------------------------------------------------------------- */
.cal .ev.due{color:var(--ink-deep)}
.cal .ev.due b{color:var(--ink-deep)}
/* ============================================================
26. CONTROL BORDERS, 1.4.11
------------------------------------------------------------
The text audit came back clean, and then the non-text audit found the
thing that actually matters most on a form.
Every text input in the application used border:1px solid var(--line).
That is #DDE3EA on white, which is 1.29:1. An input's border is the only
thing that says "this is a box you type in", so 1.4.11 requires 3:1
against what is next to it. At 1.29:1 the field boundary is very nearly
invisible, on the registration and sign-in forms, which are the first two
screens anybody meets.
The same applied to the federated sign-in buttons at 1.59:1 and to the
selectable option rows on the preferences page.
None of this showed up in the text audit, because the text inside those
controls is fine. It is the container that was missing.
--control-edge is the lightest blue-grey in the palette family that
clears 3:1 on every light surface a control sits on, deck included:
3.64 on white, 3.01 on deck. --line is unchanged and stays what it is,
a hairline between rows of visible text, where 1.4.11 does not reach.
============================================================ */
:root{
--control-edge:#7C8798; /* 3.64:1 on paper, 3.01:1 on deck */
}
/* Text fields, selects and text areas. */
.inp,select.inp,textarea.inp{border-color:var(--control-edge)}
/* The focused state keeps the gold outline from --focus, which is 3.48:1 and
passes, and thickens the border so focus does not rely on the outline
alone where a platform suppresses it. */
.inp:focus-visible{border-color:var(--ink);border-width:1.5px}
/* Buttons whose only boundary is a border. .btn-p and .btn-gold are filled,
so their edge is the fill and they are not affected. */
.btn-s,.oauth-btn{border-color:var(--control-edge)}
/* Selectable rows on the preferences page: these are controls, and the
border is what distinguishes one option from the page. */
.prefopt{border-color:var(--control-edge)}
.prefopt.on{border-color:var(--ink)}
/* The upload target is a control, and a dashed --soft border at 3.07:1 on
white is inside tolerance but drops to 2.54:1 on the porcelain it is
actually drawn on. */
.drop,.dropzone{border-color:var(--control-edge)}
/* ---- Dead rules removed --------------------------------------------
.cal .out used --faint at 1.65:1 and was superseded in section 25.
Leaving the old rule in place means the audit keeps reporting a failure
that no longer renders, and the next person cannot tell which of the two
is live. --faint now has no remaining use as a text colour.
-------------------------------------------------------------------- */
/* ============================================================
27. THE GLOSS LAYER
------------------------------------------------------------
Brief: slicker, really modern, glossy, think Apple. The homepage has to
make somebody want to sign in. The same theme carries into the app.
------------------------------------------------------------
THE TENSION, AND HOW IT IS RESOLVED
------------------------------------------------------------
Two turns ago the brief was that AI-built sites are recognisable and this
one must not be. Apple's visual language is the single most copied on the
web, so "think Apple" and "be unique" pull against each other, and
following both literally gives you the same frosted-glass dark hero that
ships on a thousand landing pages.
The way out is to separate what Apple does well from what Apple looks
like.
What they do well is a method, and it is worth copying exactly:
- one idea per screen, and very few words on it
- type set enormous and tracked tight
- space instead of borders
- very HIGH contrast, near-black and white, never washed out
- motion that is short, eased, and only ever transform and opacity
- the product itself as the hero, lit like an object
What they look like is a palette and a material, and copying that is what
makes a page generic. So the material here is not aluminium and glass.
It is brass and ink: a plate on a stable door, lit. That is the one thing
no other site has, and it is where all the gloss is spent.
------------------------------------------------------------
WHAT THIS RELAXES, DELIBERATELY
------------------------------------------------------------
Section 3 says one radius, one shadow, no gradients. I wrote that rule
from the catalogue reference and it is the right rule for a record book.
It is the wrong rule for a page whose job is to make somebody sign in, so
the brief overrides it. Precisely:
- a second and third radius, for glossy surfaces only. --r stays 3px
and the app keeps it, because 14px corners on a dense data table read
as bloated rather than premium.
- four elevation levels instead of one shadow, all large and soft and
low opacity, which is what reads as lift rather than as a border.
- gradients, but only as light on a material: a specular sweep across
brass, an edge highlight on a dark surface, a glow behind a lit
object. Never as a decorative colour wash, which is the thing the
original rule existed to prevent.
Contrast is not relaxed. Apple pages are high contrast, not low, so
nothing here needed to be dimmed to look expensive. Every value below
still passes AA and npm run a11y:pages proves it.
============================================================ */
:root{
/* ---- Motion -------------------------------------------------------
One curve for entrances, one for surfaces that respond to a pointer.
The entrance curve is a strong ease-out: almost all of the movement
happens immediately and it settles, which is what makes a reveal feel
like the page is confident rather than slow. */
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-glass:cubic-bezier(.4,0,.2,1);
--dur-fast:180ms;
--dur-mid:420ms;
--dur-slow:760ms;
/* ---- Elevation ----------------------------------------------------
Large radius, low opacity, offset mostly downward, plus a tight
contact shadow. A single 40px blur at 30% reads as a drop shadow from
2012; two layers at 8% and 4% read as an object above a surface. */
--lift-1:0 1px 2px rgba(10,26,49,.06), 0 2px 8px rgba(10,26,49,.04);
--lift-2:0 2px 4px rgba(10,26,49,.06), 0 8px 24px rgba(10,26,49,.06);
--lift-3:0 4px 8px rgba(10,26,49,.07), 0 18px 48px rgba(10,26,49,.09);
--lift-4:0 8px 16px rgba(10,26,49,.08), 0 32px 88px rgba(10,26,49,.14);
/* On ink, a shadow is invisible. Lift comes from an edge highlight
instead, which is how a real object catches light along its top face. */
--edge-light:inset 0 1px 0 rgba(255,255,255,.10);
--edge-light-strong:inset 0 1px 0 rgba(255,255,255,.16);
/* ---- Glass --------------------------------------------------------
Saturation is raised as well as blurred. Blur alone gives you grey
mud; the saturation boost is what keeps the brass warm through it. */
--glass-blur:saturate(180%) blur(20px);
--glass-ink:rgba(10,26,49,.72);
--glass-paper:rgba(255,255,255,.72);
/* ---- Radii for glossy surfaces ------------------------------------ */
--r-lg:14px;
--r-xl:24px;
/* ---- Display type -------------------------------------------------
Bigger and tighter than --t-hero. Tracking goes negative as size
goes up, which is what stops a large serif looking gappy. */
--t-mega:clamp(2.6rem,6.2vw,6rem); /* fits the column, not the viewport */
--tr-mega:-.032em;
--tr-lede:-.018em; /* not --tr-tight: that is -.025em and already in use */
}
/* Reduced motion: the global block in section 4 zeroes durations, which
does not reach a scroll-driven animation because its driver is the
scroll position rather than a clock. Switching the timeline off is what
actually stops it. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-timeline:none !important}
.sweep::after,.glow::before{display:none !important}
}
/* ---- Scroll-driven reveals -------------------------------------------
No JavaScript. animation-timeline: view() ties the animation to the
element's own position in the viewport, so it plays as it arrives and is
correct on load, on resize and on a restored scroll position, all of
which an IntersectionObserver has to be told about.
Where it is unsupported the element is simply visible, which is the
right fallback: the content was never hidden by default.
-------------------------------------------------------------------- */
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
.rv{
animation:rv-in linear both;
animation-timeline:view();
animation-range:entry 4% cover 26%;
}
.rv-2{animation-range:entry 4% cover 34%}
.rv-3{animation-range:entry 4% cover 42%}
}
}
@keyframes rv-in{
from{opacity:0;transform:translateY(26px) scale(.985)}
to{opacity:1;transform:none}
}
/* ---- The specular sweep ----------------------------------------------
The signature. A band of light travelling across brass, once on load and
again on hover. This is the one piece of gloss that is not borrowed:
Apple lights aluminium, and this lights a nameplate on a stable door.
It is a gradient, which section 3 forbids, and it is allowed here for
the reason the rule exists: it is not a colour wash, it is a highlight
on a metal surface, and without it brass looks like paint.
-------------------------------------------------------------------- */
.sweep{position:relative;overflow:hidden;isolation:isolate}
.sweep::after{
content:"";position:absolute;inset:-40% -60%;pointer-events:none;z-index:2;
background:linear-gradient(104deg,
transparent 38%,
rgba(255,255,255,.03) 45%,
rgba(255,241,209,.16) 50%,
rgba(255,255,255,.03) 55%,
transparent 62%);
transform:translateX(-62%);
}
@media(prefers-reduced-motion:no-preference){
.sweep::after{
animation:sweep var(--dur-slow) var(--ease-glass) 700ms both;
}
.sweep:hover::after{animation:sweep 1100ms var(--ease-glass)}
}
@keyframes sweep{
from{transform:translateX(-62%)}
to{transform:translateX(62%)}
}
/* ---- The glow --------------------------------------------------------
A lit object throws light onto what is behind it. Without this the plate
sits on the ink like a sticker; with it, it sits in a space.
-------------------------------------------------------------------- */
.glow{position:relative}
.glow::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
inset:-18% -12% -22%;
background:
radial-gradient(58% 46% at 50% 42%, rgba(201,162,83,.20), transparent 68%),
radial-gradient(80% 62% at 50% 58%, rgba(42,64,102,.42), transparent 72%);
filter:blur(6px);
}
/* ---- Glass surfaces --------------------------------------------------
backdrop-filter needs something behind it to filter, so a glass header
only works while it is over content. The fallback colour is opaque
enough to be legible on its own where the filter is unsupported.
-------------------------------------------------------------------- */
.glass{
background:var(--glass-ink);
box-shadow:var(--edge-light);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.glass{
background:var(--glass-ink);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
}
}
/* ---- The condensing header -------------------------------------------
Tall and transparent over the hero, short and frosted once you scroll.
Driven by scroll(), so again no JavaScript and no scroll listener
running on the main thread.
-------------------------------------------------------------------- */
/* The default is frosted, not transparent, and that ordering matters.
The first version defaulted to transparent and became opaque through a
scroll-driven animation. That looked right and had a real bug in it: the
reduced-motion block below switches animation-timeline off, so a
reduced-motion user got a permanently transparent header, and white text
on white as soon as they scrolled past the hero.
Safe first, enhancement on top. Frosted is the declared state, so it is
legible with no CSS support, no animation, and reduced motion. The
transparency over the hero is added back only where scroll-driven
animation exists and motion is welcome. */
.sitehead.sticky-glass{
/* Solid at rest, so it is continuous with the hero behind it. */
background:var(--ink-deep);
border-bottom:1px solid var(--ink-hair);
transition:background var(--dur-mid) var(--ease-glass),
border-color var(--dur-mid) var(--ease-glass);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.sitehead.sticky-glass{
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
}
}
.sitehead.sticky-glass .in{min-height:78px;transition:min-height var(--dur-mid) var(--ease-glass)}
@supports (animation-timeline:scroll()){
@media(prefers-reduced-motion:no-preference){
.sitehead.sticky-glass{
animation:head-condense linear both;
animation-timeline:scroll(root);
animation-range:0 180px;
}
.sitehead.sticky-glass .in{
animation:head-shrink linear both;
animation-timeline:scroll(root);
animation-range:0 180px;
}
}
}
@keyframes head-condense{
from{background:var(--ink-deep);border-bottom-color:transparent}
to{background:var(--glass-ink);border-bottom-color:var(--ink-hair)}
}
/* Belt and braces: if anything above fails, the header is still frosted. */
@media(prefers-reduced-motion:reduce){
.sitehead.sticky-glass{
background:var(--glass-ink) !important;
border-bottom-color:var(--ink-hair) !important;
animation:none !important;
}
.sitehead.sticky-glass .in{min-height:64px !important;animation:none !important}
}
@keyframes head-shrink{ from{min-height:78px} to{min-height:58px} }
/* The old "unsupported" fallback lived here. It is gone because frosted is
now the declared default, so there is nothing left to fall back to. */
/* ---- Lit surfaces on ink ---------------------------------------------
A panel on a dark ground, with an edge highlight along the top and a
very slight tonal lift, so it reads as a face catching light rather
than as a lighter rectangle.
-------------------------------------------------------------------- */
.lit{
background:linear-gradient(180deg, var(--ink-mid), var(--ink-deep));
border:1px solid var(--ink-hair);
border-radius:var(--r-lg);
box-shadow:var(--edge-light);
}
.lit-strong{box-shadow:var(--edge-light-strong), var(--lift-4)}
/* ---- Pointer response ------------------------------------------------
Short, eased, transform and opacity only, so it never triggers layout.
2px of travel: enough to feel responsive, not enough to look bouncy.
-------------------------------------------------------------------- */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.press{transition:transform var(--dur-fast) var(--ease-glass),
box-shadow var(--dur-fast) var(--ease-glass)}
.press:hover{transform:translateY(-2px)}
.press:active{transform:translateY(0)}
}
/* ---- Display type ----------------------------------------------------
The headline gets the full mega scale and negative tracking. balance
keeps the last line from orphaning a single word, which is the thing
that makes large type look accidental.
-------------------------------------------------------------------- */
.mega{
font-family:var(--font-head);font-weight:var(--w-500);
font-size:var(--t-mega);line-height:.98;letter-spacing:var(--tr-mega);
margin:0;text-wrap:balance;
}
.on-ink .mega{color:var(--paper)}
.mega em{
font-style:normal;color:var(--gold-hi);
/* A single word in brass. One accent, on the word that matters. */
}
.sub-mega{
font-size:clamp(1.05rem,1.9vw,1.45rem);line-height:1.5;
letter-spacing:var(--tr-lede);max-width:34ch;margin:var(--s9) 0 0;
}
.on-ink .sub-mega{color:var(--nav-text-dim)}
/* ---- The hero, glossy ------------------------------------------------
Full height, so the first screen is one idea and nothing else. The
header sits over it, so the top padding clears the header rather than
the section starting below it.
-------------------------------------------------------------------- */
.hero-glossy{
background:var(--ink-deep);
/* No header offset: the sticky header is in flow above this, not over it. */
padding:var(--s12) 0;
position:relative;overflow:hidden;
}
/* A very slight vertical grade on the ground itself. Not a decorative
wash: it is the falloff of the light the plate is throwing, and without
it a full-bleed dark section reads as flat paint. */
.hero-glossy::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(72% 58% at 68% 34%, rgba(42,64,102,.55), transparent 70%);
}
.hero-glossy > .wrap{position:relative;z-index:1;max-width:1320px}
@media(min-width:900px){
.hero-glossy{min-height:min(92vh,880px);display:flex;align-items:center}
.hero-glossy > .wrap{width:100%}
}
.hero-cols{display:grid;gap:var(--s12);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
.hero-cols{grid-template-columns:1.02fr .98fr;gap:var(--s12)}
}
.hero-say .btn-row{margin-top:var(--s11)}
.hero-fine{
margin:var(--s9) 0 0;font-size:var(--t-3xs);letter-spacing:.06em;
text-transform:uppercase;color:var(--nav-text);
}
/* The plate is an object in a space, so it is allowed to sit slightly off
axis. Two degrees: enough to read as placed rather than pasted, not
enough to look like a stock mockup. */
.plate-stage{perspective:1200px}
.plate-stage .plate{
transform:rotate(-1.4deg);
border-radius:var(--r-lg);
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.plate-stage .plate{transition:transform var(--dur-mid) var(--ease-out)}
.plate-stage:hover .plate{transform:rotate(0deg) translateY(-4px)}
}
@media(max-width:899px){
.plate-stage .plate{transform:none}
}
/* The engraved corners and the guilloche both sit inside a plate that now
has a larger radius, so they need to follow it or they cut the corner
off the wrong shape. */
.plate .plate-in{border-radius:calc(var(--r-lg) - 4px)}
.plate.gl::before{border-radius:calc(var(--r-lg) - 4px)}
/* On a glossy hero the buttons get the larger radius too. Everything
inside the application keeps --r. */
.hero-glossy .btn-lg,.sitehead .btn-lg{border-radius:var(--r-lg)}
/* ---- The glass header over ink ---------------------------------------
The brand and the links have to be legible against the hero before the
header frosts, so they take the on-ink treatment from the start rather
than switching colour partway through the scroll.
-------------------------------------------------------------------- */
/* No background here. .sitehead.sticky-glass already declares the frosted
default and this rule used to override it back to transparent, which
reintroduced the white-on-white bug from a second direction. This rule
sets colours only. */
.sitehead.on-ink .brand{color:var(--paper)}
/* --nav-text is 3.54:1 once the frosted header is composited over a light
page, which is the state it is in for most of the scroll. The brighter
dim tone clears AA against both the hero ink and the frosted-over-white
case. Found by the audit only after it learned to read rgba(). */
.sitehead.on-ink .brand small{color:var(--nav-text-dim)}
.sitehead.on-ink .nav a:not(.btn){color:var(--nav-text-dim)}
.sitehead.on-ink .nav a:not(.btn):hover{color:var(--paper);background:rgba(255,255,255,.07)}
.sitehead.on-ink .nav a:not(.btn).on{color:var(--paper)}
.sitehead.on-ink .nav .div{background:var(--ink-hair)}
/* A signed-in visitor to the homepage gets the app navigation on the same
glass header, and .nav-user was --text-2: a dark colour for light
surfaces, at 1.14:1 on the frosted ink. Only surfaced once the glass was
applied to the signed-in homepage as well as the signed-out one. */
.sitehead.on-ink .nav-user{color:var(--nav-text-dim)}
.sitehead.on-ink .nav-user strong{color:var(--paper)}
.sitehead.on-ink .nav a.btn-p{
background:var(--gold-hi);color:var(--ink-deep);border-color:var(--gold-hi);
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.sitehead.on-ink .nav a:not(.btn){transition:color var(--dur-fast) var(--ease-glass),
background var(--dur-fast) var(--ease-glass)}
}
/* ---- The cookie choice ----------------------------------------------
Docked to the bottom, not a modal. It never covers the content, it can
be scrolled past, and it does not trap focus, because a consent banner
that blocks the page is a worse experience than the tracking it asks
about.
Accept and decline are the same size and weight, side by side. Under UK
GDPR consent must be freely given, so refusing has to be no harder than
agreeing; a grey text link beside a filled button is a dark pattern with
a legal opinion attached.
-------------------------------------------------------------------- */
.consent{
position:sticky;bottom:0;z-index:6;
background:var(--glass-ink);border-top:1px solid var(--gold-hi);
box-shadow:var(--edge-light-strong);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.consent{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
}
.consent-in{
max-width:var(--page-max);margin:0 auto;padding:var(--s7) var(--s9);
display:grid;gap:var(--s7);align-items:center;
}
@media(min-width:760px){
.consent-in{grid-template-columns:1fr auto;gap:var(--s10)}
}
.consent-say{
margin:0;font-size:var(--t-md);line-height:1.55;color:var(--nav-text-dim);
max-width:70ch;
}
.consent-say strong{color:var(--paper);font-weight:var(--w-600)}
.consent-say a{color:var(--gold-hi);text-decoration:underline}
.consent-do{display:flex;gap:var(--s5);flex-wrap:wrap}
.consent-do .btn-p{background:var(--gold-hi);color:var(--ink-deep);border-color:var(--gold-hi)}
.consent-do .btn-s{
background:transparent;color:var(--nav-text-dim);border-color:var(--nav-text);
}
@media(hover:hover){
.consent-do .btn-s:hover{color:var(--paper);border-color:var(--paper)}
}
/* ---- The horse profile ----------------------------------------------
A document, so it reuses .doc and .rec from sections 23 and 24 rather
than inventing a layout. Three additions only.
-------------------------------------------------------------------- */
/* The per-section Change link. Sits top right of the clause body so it is
reachable without hunting, and is a link rather than a button because it
goes somewhere rather than doing something. */
.cl-edit{
float:right;font-size:var(--t-xs);color:var(--gold-dp);
border-bottom:1px solid var(--gold-line);padding-bottom:1px;
text-decoration:none;margin-left:var(--s7);
}
.cl-edit:hover,.cl-edit:focus-visible{border-bottom-color:var(--gold-dp)}
/* A restricted value: a microchip or passport number. Marked so the owner
can see at a glance which values are never shared, without a legend. */
.rec .rec-restricted{
font-variant-numeric:tabular-nums;
border-bottom:1px dotted var(--gold-line);
}
/* Field hints. Under the input, not beside it, so they do not compete with
the label on a narrow screen. */
.field .hint{
margin:var(--s3) 0 0;font-size:var(--t-3xs);color:var(--text-3);line-height:1.45;
}
/* Visually hidden, for a legend that duplicates a visible heading. The
heading is the accessible name; the legend is there because a fieldset
without one is a fieldset a screen reader cannot announce. */
.vh{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ---- Control sizes, 2.5.8 Target Size ------------------------------
Every text input on the horse form measured 35px against a declared
--touch of 44px, and the checkboxes measured 20px against the WCAG 2.2
minimum of 24px. D29 has been open about exactly this since the start,
and building a 37-field form is what finally made it measurable rather
than theoretical.
The inputs go to --touch because that is what the token is for and a
form filled in with cold hands is the whole premise. The checkboxes go
to 24px rather than 44px, because 44 is a comically large tick box and
the label is clickable, so the effective target is already the width of
the row.
-------------------------------------------------------------------- */
.inp,select.inp,textarea.inp{min-height:var(--touch)}
textarea.inp{min-height:calc(var(--touch) * 1.6)}
/* A date input renders its own picker button, so it needs the height but
not extra vertical padding. */
input.inp[type="date"]{padding-top:0;padding-bottom:0}
.checkrow input[type="checkbox"],.checkrow input[type="radio"]{
width:24px;height:24px;
}
/* The whole row is the target, not just the box. */
.checkrow{align-items:flex-start;gap:var(--s5);min-height:var(--touch)}
.checkrow label{cursor:pointer}
/* ---- The record timeline --------------------------------------------
Ruled rows with the date in the margin, the same device as the legal
clauses and the ruled index, because this is a document too.
The three states that matter are all visible rather than hidden:
an entry that has been corrected, an entry that is part of the
statutory record, and an offered date nobody has accepted yet.
-------------------------------------------------------------------- */
.tl{list-style:none;margin:0;padding:0;border-top:2px solid var(--gold-line)}
.tl-item{
display:grid;grid-template-columns:1fr;gap:var(--s4);
padding:var(--s8) 0;border-bottom:1px solid var(--line);
}
@media(min-width:760px){
.tl-item{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:var(--s9)}
}
.tl-when{display:flex;flex-direction:column;gap:var(--s2)}
.tl-date{font-size:var(--t-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.tl-kind{
font-size:var(--t-3xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
}
.tl-title{
margin:0 0 var(--s3);font-family:var(--font-head);font-weight:var(--w-500);
font-size:var(--t-h4);color:var(--ink);
}
.tl-detail{margin:0 0 var(--s3);font-size:var(--t-md);color:var(--text-3)}
.tl-notes{margin:0 0 var(--s4);font-size:var(--t-md);color:var(--text-3);line-height:1.6}
.tl-meta{margin:0;display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center}
.tl-by{font-size:var(--t-3xs);color:var(--text-3)}
.tl-flag{
font-size:var(--t-4xs);letter-spacing:.08em;text-transform:uppercase;
color:var(--gold-note-t);border:1px solid var(--gold-line);
border-radius:var(--r);padding:2px var(--s4);
}
.tl-flag.is-old{color:var(--text-3);border-color:var(--line)}
/* An entry that has been corrected. Struck through rather than removed:
the record shows what was written and what it was changed to, which is
the whole reason corrections exist rather than edits. */
.tl-item.is-superseded .tl-title{text-decoration:line-through;color:var(--text-3)}
.tl-item.is-superseded{background:var(--porcelain)}
.tl-correction{
margin:var(--s5) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--gold-line);
}
.tl-corr-head{
margin:0 0 var(--s3);font-size:var(--t-3xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--gold-dp);
}
/* A date the record has worked out and is offering. Nothing is in the
calendar until this is accepted, so it reads as a question. */
.tl-offer{
margin:var(--s6) 0 0;padding:var(--s6) 0 0;border-top:1px dashed var(--gold-line);
display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;
}
/* Wide enough that the sentence does not break after two words and leave
the date stranded on a line of its own, which is what it did. */
.tl-offer p{margin:0;font-size:var(--t-md);color:var(--text-3);flex:1 1 22rem;min-width:0}
.tl-do{margin:var(--s5) 0 0}
.tl-do a{font-size:var(--t-xs);color:var(--gold-dp);border-bottom:1px solid var(--gold-line)}
.tl-do a:hover{border-bottom-color:var(--gold-dp)}
.tl-orig{margin:var(--s5) 0 0;font-size:var(--t-md);color:var(--text-3)}
/* Grouped by month once there is enough to need it. */
.tl-month{margin:0 0 var(--s11)}
.tl-month-name{
margin:0 0 var(--s5);font-size:var(--t-3xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--text-3);font-family:var(--font-body);
font-weight:var(--w-600);
}
/* Filters. Real links, not spans, so a keyboard can reach them: D128 was
about exactly this and the record is the worst possible page to lose. */
.tl-filters{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s9) 0 var(--s11)}
.tl-filter{
display:inline-flex;align-items:center;gap:var(--s3);min-height:var(--touch);
padding:0 var(--s6);border:1px solid var(--control-edge);border-radius:var(--r-lg);
font-size:var(--t-xs);color:var(--text-3);text-decoration:none;
}
.tl-filter span{font-variant-numeric:tabular-nums;color:var(--text-3);opacity:.75}
.tl-filter.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tl-filter.on span{color:var(--paper)}
@media(hover:hover){.tl-filter:hover{border-color:var(--ink)}}
/* A row in the ruled index that is a link. */
.lx-row{
display:flex;align-items:baseline;gap:var(--s3);width:100%;
text-decoration:none;color:inherit;min-height:var(--touch);
}
.lx li:has(.lx-row){padding:0}
.lx-row:hover .lx-name,.lx-row:focus-visible .lx-name{color:var(--gold-dp)}
/* A field error, under the input it belongs to. */
.field .err{
margin:var(--s3) 0 0;font-size:var(--t-3xs);color:var(--over);line-height:1.45;
}
/* ---- Removed in the September 2026 clean-up --------------------------
These were orphaned by the document pass in section 23 and the gloss
pass in section 27, which replaced cards and tiles with ruled rows:
.badge-claim .badges .feat .featgrid .tile .platform .platforms
.cols .cols-2 .cols-3 .cols-4 .hero-grid .flat .soon
npm run css:lint reports 70 unused classes in total. The rest are left
alone deliberately: some belong to the reference folder, some are
applied by name at runtime, and deleting rules to satisfy a linter is
how you break a page nobody happens to be looking at.
-------------------------------------------------------------------- */
/* ---- The medicines record, built to be printed -----------------------
The statutory document. It is filed in a folder in a yard, so it is
laid out for A4 and paper rather than for a screen, and the screen
version is just the paper one on a screen.
-------------------------------------------------------------------- */
.mr{border-top:2px solid var(--gold-line);padding-top:var(--s9)}
.mr-head h2{
margin:0 0 var(--s7);font-family:var(--font-head);font-weight:var(--w-500);
font-size:var(--t-h3);color:var(--ink);
}
.mr-ident{
display:grid;gap:var(--s5) var(--s9);margin:0 0 var(--s10);
grid-template-columns:1fr;
}
@media(min-width:600px){.mr-ident{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.mr-ident{grid-template-columns:repeat(4,1fr)}}
.mr-ident dt{
font-size:var(--t-4xs);letter-spacing:.08em;text-transform:uppercase;
color:var(--text-3);margin:0 0 var(--s2);
}
.mr-ident dd{margin:0;font-size:var(--t-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.mr-table{width:100%;border-collapse:collapse;font-size:var(--t-xs);min-width:800px}
.mr-table th{
text-align:left;padding:var(--s4) var(--s5);border-bottom:2px solid var(--gold-line);
font-size:var(--t-4xs);letter-spacing:.08em;text-transform:uppercase;
color:var(--text-3);font-weight:var(--w-600);vertical-align:bottom;
}
.mr-table td{
padding:var(--s5);border-bottom:1px solid var(--line);vertical-align:top;
color:var(--ink);
}
.mr-table tbody tr:nth-child(even) td{background:var(--porcelain)}
/* A value that was never written down. Shown as words rather than an empty
cell, because an empty cell on a printed record looks like a printing
fault and this is the truth. */
.mr-absent{color:var(--text-3);font-style:italic}
/* A superseded row stays, struck through, with its correction beneath. */
.mr-superseded td{color:var(--text-3);text-decoration:line-through}
.mr-superseded td:first-child{text-decoration:none}
.mr-correction td{
background:var(--gold-bg);border-bottom:2px solid var(--gold-line);
text-decoration:none;color:var(--ink);
}
.mr-by{display:block;margin-top:var(--s2);font-size:var(--t-4xs);color:var(--text-3)}
.mr-none{font-size:var(--t-md);color:var(--text-3);max-width:64ch}
.mr-foot{
margin:var(--s10) 0 0;padding-top:var(--s7);border-top:1px solid var(--line);
}
.mr-foot p{margin:0 0 var(--s5);font-size:var(--t-3xs);color:var(--text-3);line-height:1.6;max-width:80ch}
/* ---- Print ----------------------------------------------------------
Everything that is navigation on a screen is noise on paper. The
record itself keeps its rules, because a table of medicines without
lines is unreadable once it is in a folder.
-------------------------------------------------------------------- */
@media print{
.no-print,.sitehead,.foot,.rail,.side,.ribbon,.skip,.preview-bar,
.consent,.tl-filters,.btn-row{display:none !important}
body{background:#fff;color:#000;font-size:10pt}
.band{padding:0}
.wrap{max-width:none;padding:0}
.mr{border-top:none;padding-top:0}
.mr-table{min-width:0;font-size:9pt}
.mr-table thead{display:table-header-group} /* repeat the header per page */
.mr-table tr{page-break-inside:avoid}
.mr-table tbody tr:nth-child(even) td{background:transparent}
.mr-table th,.mr-table td{border-color:#999}
.mr-superseded td{color:#555}
.mr-correction td{background:transparent;border-top:1px solid #999}
.mr-absent{color:#555}
.mr-foot{page-break-inside:avoid}
a[href]::after{content:""} /* no printed URLs */
}
/* ---- SECTION 31. THE YARD PLAN -----------------------------------------
The plan is an SVG because the Content-Security-Policy is style-src 'self'
with no unsafe-inline, so a `style="left:26%"` on a positioned div is
dropped by the browser SILENTLY and every zone stacks at the origin. SVG
puts the geometry in x/y/width/height attributes, which are presentation
attributes rather than CSS, so only the colour lives here.
Everything below is measured in the SVG's own user units, which the viewBox
normalises, so the text keeps the same apparent size whether the plan is
one row of paddocks or four. Do not put px sizes on the text: the viewBox
is the whole point.
------------------------------------------------------------------------ */
.plan{border:1px solid var(--line);border-radius:2px;background:var(--porcelain);
padding:var(--s5);overflow:hidden}
.planvg{display:block;width:100%;height:auto;max-height:64vh}
.zone rect{stroke-width:.35;transition:none}
.zone .zname{font-family:var(--font-head);font-size:2.6px;font-weight:500;
fill:var(--ink)}
.zone .zsub,.zone .zmeta{font-family:var(--font-body);font-size:2.1px;
fill:var(--text-2)}
.zone .zmeta{font-size:1.9px;fill:var(--muted)}
/* Land, stable and arena read as different SURFACES, which is what they are.
The occupancy state is a second channel on top, never the only one: every
shape carries its words. */
.z-land rect{fill:#EAF0E9;stroke:#B7C7B4}
.z-stable rect{fill:#F1EDE4;stroke:#CFC3A8}
.z-arena rect{fill:#E9EDF3;stroke:#B6C2D4}
.s-used rect{stroke-width:.6;stroke:var(--ok)}
.s-over rect{stroke-width:.7;stroke:var(--over)}
.s-free rect{stroke-dasharray:1.2 1.2}
/* The whole shape is the target, and it is a link, so it needs a focus state
that survives being inside an SVG. Outline is unreliable on SVG children in
some engines, so the stroke does the work. */
.zone{cursor:pointer}
.zone:hover rect{stroke:var(--gold);stroke-width:.8}
.zone:focus-visible rect{stroke:var(--gold);stroke-width:1;outline:none}
.zone:focus-visible .zname{fill:var(--gold-dp)}
/* A bay in the tack room. Same card, but they sit in a row that wraps, and a
bay with nothing on it must not stretch to match a full one. */
.bay{margin-bottom:var(--s7)}
@media(min-width:900px){
.bays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s7);align-items:start}
.bay{margin-bottom:0}
}
/* No dark variant, on purpose. This stylesheet has no prefers-color-scheme
block anywhere else: Catalogue is one committed light palette, porcelain and
ink. A dark plan sitting inside a light page would be worse than no dark
mode at all, and adding the media query here would have been the first and
only one in 2800 lines. If the product ever gets a dark theme it gets one
everywhere, in the token block, not per component. */
/* ---- SECTION 32. THE FORECAST -----------------------------------------
The shape of the reference product's weather card, in Catalogue.
The verdict is carried by the WORD in .wx-v, never by the tint. The tint is
a second channel for people who read colour quickly, and the strip is
readable printed, in grey, and by anybody who cannot separate the hues,
because every cell spells out Good, Care or Avoid.
Tints are deliberately weak. Three saturated blocks in a row would compete
with the gold, which in this product marks rules and never a status.
------------------------------------------------------------------------ */
.wx-now{display:flex;align-items:center;justify-content:space-between;
gap:var(--s9);flex-wrap:wrap;border:1px solid var(--line);border-radius:2px;
padding:var(--s7) var(--s9)}
.wx-temp{font-family:var(--font-head);font-size:var(--t-h3);font-weight:500;
color:var(--ink);margin:0;line-height:1.1;font-variant-numeric:tabular-nums}
.wx-now .fine{margin:var(--s2) 0 0}
.wx-verdict{margin:0;font-size:var(--t-2xs);font-weight:var(--w-600);
letter-spacing:.02em;white-space:nowrap}
.wx-strip{display:flex;gap:var(--s5);min-width:34rem}
.wx-day{flex:1 1 0;min-width:0;text-align:center;border:1px solid var(--line);
border-radius:2px;padding:var(--s6) var(--s3)}
.wx-day p{margin:0}
.wx-dow{font-size:var(--t-3xs);font-weight:var(--w-600);color:var(--muted);
text-transform:uppercase;letter-spacing:.06em}
.wx-what{font-size:var(--t-3xs);color:var(--text-2);margin-top:var(--s2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-t{font-size:var(--t-2xs);margin-top:var(--s3);font-variant-numeric:tabular-nums}
.wx-t b{color:var(--ink);font-weight:var(--w-600)}
.wx-t span{color:var(--muted)}
.wx-r{font-size:var(--t-3xs);color:var(--muted);font-variant-numeric:tabular-nums}
.wx-v{font-size:var(--t-3xs);font-weight:var(--w-600);margin-top:var(--s3)}
/* The tone, on the cell and on the current conditions block alike.
The three washes are the palette's own --ok-bg / --due-bg / --over-bg with
their matching lines, not hex literals: a status wash invented here is one
that drifts from every chip in the product the first time the palette moves.
The amber TEXT is --gold-note-t and not --due, and that is not a preference.
--due on --due-bg resolves to 3.01:1 against the 4.5 that AA needs, which is
the same failure section 25 already recorded for .chip.due at 3.06:1 and
fixed the same way. Reaching for the obvious token would have shipped a
verdict word nobody with low vision could read, on the one line of the cell
that exists to carry the verdict. */
.wx-good{background:var(--ok-bg);border-color:var(--ok-line)}
.wx-good .wx-v,.wx-good .wx-verdict{color:var(--ok)}
.wx-care{background:var(--due-bg);border-color:var(--due-line)}
.wx-care .wx-v,.wx-care .wx-verdict{color:var(--gold-note-t)}
.wx-avoid{background:var(--over-bg);border-color:var(--over-line)}
.wx-avoid .wx-v,.wx-avoid .wx-verdict{color:var(--over)}
.wx-none{background:var(--porcelain)}
.wx-none .wx-v,.wx-none .wx-verdict{color:var(--muted)}
/* The thresholds. Closed by default because most visits want the strip, open
because a verdict with a hidden rule is not one somebody can argue with. */
.wx-key summary{font-size:var(--t-2xs);color:var(--gold-dp);cursor:pointer;
font-weight:var(--w-600);padding:var(--s3) 0;min-height:44px;
display:flex;align-items:center}
.wx-key summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wx-key ul{margin:0 0 var(--s7);padding-left:var(--s10)}
.wx-key li{margin-bottom:var(--s2)}
/* ---- SECTION 33. THE iOS ZOOM, AND FORM CONTROLS ON A PHONE -----------
Safari on iOS zooms the whole page when a form control is focused whose
font-size is under 16px. It is not a preference and there is no way to
switch it off: `maximum-scale=1` in the viewport does it, and that breaks
pinch to zoom for everybody who needs it, which is a WCAG 1.4.4 failure and
a worse trade by a wide margin.
Every text control in this product measured 14.4px, so every one of them
jumped the page on focus. On a form filled in a gateway with cold hands
that is not cosmetic: the field you were typing in moves out from under
your thumb and the page has to be pinched back afterwards.
16px at phone and tablet widths, the desktop size left alone. Reusing the
899px breakpoint the stylesheet already has rather than adding a tenth one.
------------------------------------------------------------------------ */
@media(max-width:899px){
.inp,select.inp,textarea.inp,input,select,textarea{font-size:16px}
/* 16px type needs the room, or the text sits tight against the border. */
.inp{padding:.55rem .7rem}
}
/* ---- SECTION 34. THE STABLE DOOR CARD ---------------------------------
Designed to be PRINTED and read at arm's length in poor light by somebody
in a hurry, so the ordinary page hierarchy does not apply: the name is
enormous, the warning is the loudest thing after it, and the phone numbers
are bold because they are what somebody is looking for.
Sized to sit inside an A5 landscape sleeve, which is what yards actually
have on doors.
------------------------------------------------------------------------ */
.doorcard{border:2px solid var(--ink);border-radius:2px;background:var(--paper);
padding:var(--s11) var(--s11) var(--s9);max-width:34rem}
.dc-name{font-family:var(--font-head);font-size:2.6rem;line-height:1.05;
font-weight:var(--w-500);color:var(--ink);margin:0}
.dc-breeding{font-size:var(--t-md);color:var(--text-2);margin:var(--s3) 0 0}
/* The warning. Not gold: gold marks rules in this product and never a status,
and this is the most status-like thing there is. */
.dc-warn{border:2px solid var(--over);border-radius:2px;background:var(--over-bg);
padding:var(--s7) var(--s9);margin:var(--s10) 0 0}
.dc-warn-h{font-family:var(--font-head);font-size:var(--t-h4);font-weight:var(--w-600);
color:var(--over);margin:0;text-transform:uppercase;letter-spacing:.04em}
.dc-warn-b{font-size:var(--t-md);color:var(--ink);margin:var(--s2) 0 0}
.dc-block{margin:var(--s10) 0 0;border-top:1px solid var(--line);padding-top:var(--s7)}
.dc-h{font-size:var(--t-3xs);text-transform:uppercase;letter-spacing:.1em;
color:var(--muted);font-weight:var(--w-600);margin:0 0 var(--s5)}
.dc-row{display:flex;justify-content:space-between;gap:var(--s9);
padding:var(--s3) 0;align-items:baseline}
.dc-k{color:var(--text-2);font-size:var(--t-2xs);white-space:nowrap}
.dc-v{font-size:var(--t-md);color:var(--ink);text-align:right}
.dc-v b{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dc-none{color:var(--muted);font-size:var(--t-2xs)}
.dc-foot{font-size:var(--t-3xs);color:var(--muted);margin:var(--s10) 0 0;
border-top:1px solid var(--line);padding-top:var(--s5)}
@media print{
/* The card is the page. Everything explaining it is for the screen. */
.no-print,.pagehead,.lede-lg{display:none !important}
.doorcard{border-width:2px;border-color:#000;max-width:none;
padding:12mm;page-break-inside:avoid}
.dc-name{font-size:32pt;color:#000}
.dc-breeding,.dc-v,.dc-warn-b{color:#000}
.dc-warn{border-color:#000;background:#fff}
.dc-warn-h{color:#000}
.dc-h,.dc-k,.dc-none,.dc-foot{color:#333}
}