/*!design-tokens {"system":"broadside","themes":{"dark":{"accent":"#9DBBF2","accentFg":"#131720","bandStrong":"#FFB79A","bg":"#131720","bg2":"#1B2130","fg":"#EDE5D4","field":"#1D3670","fieldFg":"#EDE5D4","maxw":"74rem","muted":"#A79C87","rule":"#5E6B8C","ruleStrong":"#6B7B9E","stamp":"#F27A5A","stampFg":"#131720"},"light":{"accent":"#123A82","accentFg":"#F0EADB","bandStrong":"#FFC9A8","bg":"#F0EADB","bg2":"#E4DAC3","fg":"#1B1712","field":"#123A82","fieldFg":"#F4EEDF","maxw":"74rem","muted":"#5A5145","rule":"#85765A","ruleStrong":"#7C6B49","stamp":"#A83217","stampFg":"#F7F1E4"}},"v":1} */ /* Website Factory design layer - system: broadside, vocabulary: listing. GENERATED from design/css/*.css by design/build.py. Do not hand-edit a built site.css: edit the shared layer so BOTH builders get the change. Type is self-hosted from ./fonts/*.woff2 - relative, no data: URIs, no external requests. */ :root { --fg: #1B1712; --bg: #F0EADB; --accent: #123A82; --accent-fg: #F0EADB; --bg-2: #E4DAC3; --muted: #5A5145; --rule: #85765A; --rule-strong: #7C6B49; --field: #123A82; --field-fg: #F4EEDF; --band-strong: #FFC9A8; --stamp: #A83217; --stamp-fg: #F7F1E4; --maxw: 74rem; } @media (prefers-color-scheme: dark) { :root { --fg: #EDE5D4; --bg: #131720; --accent: #9DBBF2; --accent-fg: #131720; --bg-2: #1B2130; --muted: #A79C87; --rule: #5E6B8C; --rule-strong: #6B7B9E; --field: #1D3670; --field-fg: #EDE5D4; --band-strong: #FFB79A; --stamp: #F27A5A; --stamp-fg: #131720; --maxw: 74rem; } } /* =========================================================================== BROADSIDE - shared base layer. Consumed by BOTH site builders. World: American agricultural spot-colour printing. The seed catalogue, the feed-sack, the county extension broadside: flat inks on a stock, heavy rules, Egyptian display, leader dots, a printer's colophon at the foot of the sheet. Colour strategy COMMITTED - press blue owns the masthead, table head, answer band and footer. Vermillion is the second ink, rationed BY ROLE, not by count. In this base layer it FILLS exactly three elements: the footer verification stamp, the DATA SOURCES label, and the skip-link (which paints only on keyboard focus); a vocabulary layer adds at most the same role again - pipeline.css .verify-stamp. Every OTHER appearance is a line or a mark, never a field: the rules under the masthead, above the sources colophon and above the footer (and listing.css's double rule over the answer band), the mascot glyph, the "you are here" marker in the nav and the browse lists, and the focus ring. This note is graded - the factory selftest derives the fill set from the SHIPPED stylesheet - because a CSS comment is published bytes. No green, no texture, no script, no photos. Token contract: design/tokens.py. Every colour here comes from a token that the contrast gate measures. Optional tokens carry a derived fallback so a four-token palette (the pipeline niches) still renders - see the alias block. =========================================================================== */ /* --- token aliases ------------------------------------------------------- Read tokens through `var(--token, )` ONCE, here, instead of redeclaring them in :root. A :root redeclaration would override the palette the pipeline injects inline in (the inline block comes BEFORE this stylesheet, so a later :root would win). Resolving lazily per element keeps an explicitly declared token authoritative in both builders. */ :root { --d-bg: var(--bg); --d-fg: var(--fg); --d-bg2: var(--bg-2, color-mix(in srgb, var(--fg) 8%, var(--bg))); --d-muted: var(--muted, color-mix(in srgb, var(--fg) 62%, var(--bg))); --d-rule: var(--rule, color-mix(in srgb, var(--fg) 45%, var(--bg))); --d-rule-strong: var(--rule-strong, color-mix(in srgb, var(--fg) 68%, var(--bg))); --d-accent: var(--accent); --d-accent-fg: var(--accent-fg); --d-field: var(--field, var(--accent)); --d-field-fg: var(--field-fg, var(--accent-fg)); --d-band-strong: var(--band-strong, var(--accent-fg)); --d-stamp: var(--stamp, var(--accent)); --d-stamp-fg: var(--stamp-fg, var(--accent-fg)); --d-maxw: var(--maxw, 44rem); --d-focus: var(--d-stamp); --display: Bitter, "Source Serif 4", Georgia, "Times New Roman", serif; --text: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; } /* --- type: self-hosted, relative .woff2, zero external requests ----------- One face per family, weight RANGES not lists: a list makes the foundry emit one @font-face per weight all pointing at the same variable binary. */ @font-face { font-family: "Bitter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/bitter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-serif-4-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--d-bg); color: var(--d-fg); font-family: var(--text); font-size: 17px; line-height: 1.55; font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; /* the sheet IS the container: full-bleed bands measure their gutter with 100cqw, and every breakpoint below is a container query on this element. */ container-type: inline-size; container-name: site; } /* the gutter that turns a centred column into a full-bleed printed band */ body > * { --pad: clamp(1.15rem, calc((100cqw - var(--d-maxw)) / 2), 20rem); } /* --- type scale ---------------------------------------------------------- */ h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.018em; font-weight: 800; text-wrap: balance; } main h1 { font-size: clamp(2rem, 6.2cqi, 3.4rem); margin: 0.55rem 0 0.15rem; } main h2 { font-size: clamp(1.05rem, 2.1cqi, 1.32rem); font-weight: 700; letter-spacing: 0.005em; margin: 2.6rem 0 0.65rem; display: flex; align-items: center; gap: 0.8rem; } main h2::after { content: ""; flex: 1 1 auto; height: 0; border-top: 2px solid var(--d-rule-strong); } main h3 { font-size: 1.02rem; font-weight: 700; margin: 1.1rem 0 0.15rem; } p { margin: 0 0 0.85rem; } a { color: var(--d-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--d-focus); outline-offset: 2px; } img, svg { max-width: 100%; height: auto; } .muted, .none { color: var(--d-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 20; background: var(--d-stamp); color: var(--d-stamp-fg); padding: 0.55rem 0.9rem; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* --- masthead: the committed ink, ruled off in vermillion ---------------- */ .site-header { max-width: none; margin: 0; background: var(--d-field); color: var(--d-field-fg); padding: 0.85rem var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.6rem; border-bottom: 3px solid var(--d-stamp); } .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem, 2.3cqi, 1.32rem); letter-spacing: -0.02em; color: var(--d-field-fg); text-decoration: none; } .wordmark .mascot { color: var(--d-stamp); flex: 0 0 auto; width: 30px; height: 30px; } .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.35rem; margin: 0; padding: 0; } .site-nav a { color: var(--d-field-fg); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.82; padding: 0.15rem 0; } .site-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; } .site-nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -3px 0 var(--d-stamp); } main { display: block; max-width: none; padding: 0 var(--pad) 3rem; } /* --- breadcrumb ---------------------------------------------------------- */ .breadcrumb { margin: 1.1rem 0 0; font-size: 0.74rem; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0; padding: 0; } .breadcrumb li { display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .breadcrumb li + li::before { content: "\2215"; margin-right: 0.45rem; color: var(--d-muted); } .breadcrumb [aria-current="page"] { color: var(--d-muted); } /* --- controls: print has no 999px radius --------------------------------- */ .btn, .btn-secondary { font-family: var(--display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.55rem 1rem; border-radius: 0; cursor: pointer; border: 1px solid var(--d-fg); background: var(--d-bg); color: var(--d-fg); text-decoration: none; display: inline-block; } .btn { background: var(--d-field); border-color: var(--d-field); color: var(--d-field-fg); } .btn:hover, .btn-secondary:hover { box-shadow: inset 0 0 0 2px currentColor; } .btn[disabled], .btn:disabled { cursor: not-allowed; opacity: 0.6; } /* --- the colophon: provenance is a first-class printed region ------------ */ .sources { margin-top: 3rem; padding-top: 0; border-top: 5px solid var(--d-stamp); } .sources h2 { display: inline-block; margin: 0 0 0.9rem; background: var(--d-stamp); color: var(--d-stamp-fg); font-family: var(--display); font-weight: 800; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.3rem 0.7rem 0.28rem; } .sources h2::after { display: none; } .sources > p { max-width: 78ch; font-size: 0.94rem; color: var(--d-muted); } .sources ul, .src-list { list-style: none; padding: 0; margin: 0.9rem 0 1rem; border-top: 1px solid var(--d-rule); } .sources li, .src-list li { font-size: 0.85rem; margin: 0; padding: 0.45rem 0; border-bottom: 1px solid var(--d-rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; word-break: break-word; } .sources li a { font-weight: 600; } .fetched { color: var(--d-muted); margin-left: auto; white-space: nowrap; font-family: var(--display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; } /* --- foot of the sheet --------------------------------------------------- */ .site-footer { max-width: none; margin: 0; background: var(--d-field); color: var(--d-field-fg); padding: 1.6rem var(--pad) 2rem; border-top: 3px solid var(--d-stamp); font-size: 0.88rem; } .site-footer a { color: var(--d-field-fg); } .site-footer .colophon { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2cqi, 1.22rem); letter-spacing: -0.015em; margin: 0 0 0.9rem; color: var(--d-field-fg); } .site-footer .stamp { display: inline-block; background: var(--d-stamp); color: var(--d-stamp-fg); padding: 0.5rem 0.85rem; margin: 0 0 0.9rem; max-width: 62ch; font-size: 0.82rem; border-radius: 0; } .site-footer .stamp a { color: var(--d-stamp-fg); } .site-footer .stamp strong { font-family: var(--display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.76rem; } .site-footer .fineprint { font-size: 0.8rem; opacity: 0.85; max-width: 78ch; margin: 0; } /* --- narrow -------------------------------------------------------------- */ /* body IS the container, and a container query cannot style its own container, so the one rule that targets body uses a media query. body has no margin, so its inline-size is the viewport width and the two agree exactly. */ @media (max-width: 40rem) { body { font-size: 16px; } } @container site (max-width: 40rem) { .site-header { padding-block: 0.7rem; gap: 0.35rem 1rem; } .site-nav a { font-size: 0.66rem; letter-spacing: 0.07em; } main { padding-bottom: 2rem; } .sources li, .src-list li { font-size: 0.8rem; } .fetched { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* =========================================================================== BROADSIDE - LISTING vocabulary. The class set `sites-src/goat-breeders/generate.py` emits: .answer-block .updated .filters .table-wrap table.listing .tag ul.browse .faq .claim-form Pure CSS over the existing markup - the generator needed no new elements or classes for this direction, which is why Broadside was the cheapest to wire. =========================================================================== */ /* --- the printed standfirst --------------------------------------------- The head of the sheet carries all three inks in order: buff stock, a vermillion double rule, then the answer block as a full-bleed press-blue band. Without this the committed ink owns ~10% of the first screen. */ .answer-block { margin: 1.15rem calc(-1 * var(--pad)) 1.7rem; padding: 1.3rem var(--pad) 1.45rem; background: var(--d-field); color: var(--d-field-fg); border-top: 7px double var(--d-stamp); } .answer-block p { margin: 0; max-width: 62ch; font-size: clamp(1.05rem, 1.9cqi, 1.22rem); line-height: 1.5; } .answer-block strong { font-weight: 700; color: var(--d-band-strong); } .updated { margin: -0.9rem 0 1.9rem; font-family: var(--display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--d-muted); } .updated time { color: var(--d-fg); } /* --- filter form --------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.85rem 1.1rem; align-items: flex-end; margin: 0.9rem 0 1.4rem; padding: 1rem 1.1rem; background: var(--d-bg2); border: 1px solid var(--d-rule-strong); } .field { display: flex; flex-direction: column; gap: 0.3rem; } .field label, legend { font-family: var(--display); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.13em; } .field select, .field input { font: inherit; font-size: 0.95rem; padding: 0.45rem 0.55rem; border: 1px solid var(--d-fg); border-radius: 0; background: var(--d-bg); color: var(--d-fg); min-width: 11.5rem; } .count { margin: 0; align-self: center; font-family: var(--display); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--d-muted); } .noscript-note, .coming-soon { border: 1px solid var(--d-rule); background: var(--d-bg2); padding: 0.7rem 0.95rem; font-size: 0.92rem; } /* --- the table: the hero ------------------------------------------------- */ .table-wrap { overflow-x: auto; margin: 0.4rem 0 1.2rem; border: 1px solid var(--d-field); background: var(--d-bg); } table.listing { width: 100%; min-width: 44rem; border-collapse: separate; border-spacing: 0; font-size: 0.925rem; } table.listing caption { text-align: left; } table.listing thead th { position: sticky; top: 0; z-index: 2; background: var(--d-field); color: var(--d-field-fg); font-family: var(--display); font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; text-align: left; white-space: nowrap; padding: 0.6rem 0.75rem; } table.listing tbody tr { background: var(--d-bg); transition: background 110ms ease-out; } table.listing tbody tr:nth-child(even) { background: var(--d-bg2); } table.listing tbody tr:hover { background: color-mix(in srgb, var(--d-field) 14%, var(--d-bg)); } table.listing td { padding: 0.5rem 0.75rem; vertical-align: top; border-top: 1px solid var(--d-rule); } table.listing tbody tr:first-child td { border-top: 0; } table.listing td.farm { font-weight: 600; font-size: 0.97rem; position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 1px 0 0 var(--d-rule); min-width: 12rem; } table.listing thead th:first-child { position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--d-field); } table.listing td.reg { color: var(--d-muted); white-space: nowrap; font-family: var(--display); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } table.listing td.breeds { min-width: 11rem; } /* "no website published" is the MAJORITY case in the widest column (97 of 182 rows), so it has to read as a deliberate printed absence mark, not as a broken cell. Same treatment for a listing whose stored url did not verify: the farm still prints, it just does not become a link. */ .none { color: var(--d-muted); font-family: var(--display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } /* breed marks: ruled boxes, not pills - print has no 999px radius */ .tag { display: inline-block; margin: 0 0.25rem 0.22rem 0; padding: 0.02rem 0.4rem; border: 1px solid color-mix(in srgb, var(--d-accent) 45%, transparent); border-radius: 0; background: transparent; font-family: var(--display); font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--d-accent); text-decoration: none; white-space: nowrap; } .tag:hover { background: var(--d-accent); color: var(--d-accent-fg); border-color: var(--d-accent); } /* --- record tables: one row of the dataset, turned on its side ------------ */ /* A record table is a CARD, not a listing. The two rules that make a 182-row listing usable are exactly wrong for it: * `min-width: 44rem` forces sideways scrolling on a phone, and this site's per-entity page IS the product for a parent reading on one; * the height cap below hides rows inside a nested scroller. Both are lifted here for record tables ONLY. The scoping classes are emitted by `pipeline/directory/render.record_table` and by nothing else, so a niche that builds no record table (goat-breeders builds none) is untouched: these three declarations are inert in its stylesheet. No colour literal, so the rule-18 contrast gate has nothing new to measure. */ table.listing.record { min-width: 0; } .table-wrap.record-wrap { max-height: none; overflow: visible; } /* the sticky first column is what makes a wide listing readable while it scrolls sideways; with nothing to scroll it is only a shadow in the way, and on a narrow screen its 12rem floor is a third of the viewport. */ table.listing.record td.farm { position: static; box-shadow: none; min-width: 7rem; } /* `.none` is `white-space: nowrap` so an absence mark never breaks across lines in a listing cell. In a record the absence mark is a SENTENCE ("none published, so none can be checked"), and an unbreakable sentence is what was still pushing a 375px page sideways after the two rules above. */ table.listing.record .none { white-space: normal; } /* the column headings are `nowrap` so a listing's headings stay on one line while it scrolls sideways. A record has exactly two, they are sentences ("What was checked" / "What was found"), and together they measured 347px — which is what was still pinning the card wider than a 375px phone after everything else had been allowed to shrink. */ table.listing.record thead th { white-space: normal; } /* a certificate mark is `nowrap` so it reads as one unit in a listing cell; "OEKO-TEX STANDARD 100" is 163px of unbreakable mark, which is the last thing holding a record card open on a 320px screen. In a card it may break. */ table.listing.record .tag { white-space: normal; } /* --- browse lists: catalogue leader dots --------------------------------- */ ul.browse { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.05rem 2.2rem; grid-template-columns: 1fr; } @container site (min-width: 34rem) { ul.browse { grid-template-columns: 1fr 1fr; } } @container site (min-width: 56rem) { ul.browse { grid-template-columns: 1fr 1fr 1fr; } } @container site (min-width: 76rem) { ul.browse { grid-template-columns: repeat(4, 1fr); } } ul.browse li { position: relative; display: flex; align-items: baseline; padding: 0.28rem 0; overflow: hidden; } /* rows with no count (the "Browse other states" list) draw no leader into empty space - :has() is supported everywhere current */ ul.browse li:not(:has(.muted))::before { display: none; } ul.browse li::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0.62em; border-bottom: 1px dotted var(--d-rule); } ul.browse li > a { position: relative; background: var(--d-bg); padding-right: 0.4rem; text-decoration: none; font-weight: 600; } ul.browse li > a:hover { text-decoration: underline; } ul.browse li > a[aria-current="page"] { color: var(--d-stamp); } ul.browse li .muted { position: relative; margin-left: auto; background: var(--d-bg); padding-left: 0.4rem; color: var(--d-muted); font-family: var(--display); font-weight: 700; font-size: 0.78rem; } /* --- FAQ ----------------------------------------------------------------- */ .faq .faq-item { margin: 0; padding: 0.95rem 0; border-top: 1px solid var(--d-rule); } .faq .faq-item:first-of-type { border-top: 2px solid var(--d-rule-strong); } .faq .faq-item h3 { margin: 0 0 0.25rem; } .faq .faq-item p { margin: 0; max-width: 74ch; color: var(--d-muted); } /* --- claim form ---------------------------------------------------------- */ .claim-form { display: grid; gap: 1rem; margin: 1rem 0; max-width: 34rem; } .checks { display: grid; gap: 0.3rem; grid-template-columns: 1fr 1fr; } .check { font-weight: 400; display: flex; gap: 0.4rem; align-items: center; } .breeds-field { border: 1px solid var(--d-rule-strong); padding: 0.6rem 0.9rem; } @container site (max-width: 40rem) { .filters { padding: 0.8rem; } .field { flex: 1 1 100%; } .field select { min-width: 0; width: 100%; } table.listing { font-size: 0.86rem; } table.listing td.farm { min-width: 9.5rem; } } /* --- the nested table viewport ------------------------------------------ `position: sticky` on `thead th` has never worked inside a wrapper that is only `overflow-x: auto`: the header sticks to a scrollport that does not scroll vertically, so on the 49- and 182-row tables the column headings slide away after about four rows. A scroll container cannot mix `overflow-x: auto` with `overflow-y: visible`, so the only working fix is to give the wrapper a height. Wide containers only - a nested vertical scroller traps touch, so narrow widths keep plain page scroll. Reversible in one line: delete this block and the headers go back to scrolling away. */ @container site (min-width: 46rem) { .table-wrap { max-height: min(76vh, 42rem); overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--d-rule-strong) var(--d-bg2); scrollbar-width: thin; } /* the same scroll furniture for WebKit, drawn as printed rules rather than left as raw OS chrome sitting inside a press-blue ruled box */ .table-wrap::-webkit-scrollbar { width: 12px; height: 12px; } .table-wrap::-webkit-scrollbar-track { background: var(--d-bg2); } .table-wrap::-webkit-scrollbar-thumb { background: var(--d-rule-strong); border: 3px solid var(--d-bg2); border-radius: 0; } .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--d-field); } .table-wrap::-webkit-scrollbar-corner { background: var(--d-bg2); } }