/* RANKED brand v2 "City Desk" (docs/BRAND.md): fonts and tokens. The only place a colour, a font family or a type size is defined; components.css only reads these. Light by default, dark under prefers-color-scheme. ranked/design.py bundles this file, then components.css, into one content-hashed stylesheet (the v2 bundle). */ /* Fonts (SIL OFL 1.1, self-hosted, Latin + Latin-1; the licences ship beside them in /assets/fonts/) */ @font-face { font-family: "Big Shoulders"; src: url("/assets/fonts/bigshoulders-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Big Shoulders Stencil"; src: url("/assets/fonts/bigshoulders-stencil-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-italic-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Overpass Mono"; src: url("/assets/fonts/overpass-mono-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { color-scheme: light dark; /* brand constants, the same in both themes */ --navy: #0B1220; --white: #FFFFFF; --yellow: #FFD23F; /* the ONE urgent / primary colour: the primary button, the band, the leader's tile, the mark */ --yellow-hover: #FFDC66; --on-yellow: #0B1220; --ice: #9CC3FF; /* water and data on the plate */ /* surfaces and text */ --ground: #F3F6FA; --card: #FFFFFF; --ink: #0B1220; --muted: #4D5B73; --line: #D5DDE8; --line-strong: #8E9BB0; /* separators, chip borders, dotted leaders: decorative, never the only cue */ --link: #1F5FBF; --focus: #0B1220; /* data marks */ --bar: #0B1220; /* meter fill */ --track: #E1E7EF; /* meter track, chart windows */ --dot: #808DA3; /* the other companies in a spread: 3:1 on the ground (data, not decoration) */ /* the plate (masthead sign), the callback strip and the footer */ --plate: #0B1220; --plate-ink: #FFFFFF; --plate-soft: rgba(255, 255, 255, .80); --plate-mid: rgba(255, 255, 255, .86); --plate-dim: rgba(255, 255, 255, .50); --plate-rule: rgba(255, 255, 255, .34); --plate-hair: rgba(255, 255, 255, .24); --plate-tint: rgba(255, 255, 255, .10); /* a city's block inside its county on the map */ --plate-edge: rgba(255, 255, 255, .92); --plate-land-a: #13203A; --plate-land-b: #1A2B49; --plate-land-c: #101B30; --plate-stroke: rgba(255, 255, 255, .55); /* drawn lines on the plate (product drawings) */ --plate-stroke-ref: rgba(255, 255, 255, .60); --plate-stroke-base: rgba(255, 255, 255, .70); --ice-tint: rgba(156, 195, 255, .16); /* a drawn frame's fill on the plate */ --ice-scan: rgba(156, 195, 255, .06); /* the LCD's scan lines */ --lcd-ink: #DCEBFF; /* a camera screen's text: the same in both themes */ --lcd-bezel: #03060C; --lcd-screen: #070D19; --foot: #0B1220; --foot-soft: rgba(255, 255, 255, .80); --foot-copy: rgba(255, 255, 255, .78); --foot-rule: rgba(255, 255, 255, .20); --cb-edge: #0B1220; /* the strip's edge: the plate colour in light, a hairline in dark */ /* controls */ --btn-line: #0B1220; /* edge on the yellow button so it holds on a pale ground */ --ink-btn: #0B1220; --ink-btn-text: #FFFFFF; --field: #6B7A93; --field-bg: #FFFFFF; --mark-tile: #0B1220; --mark-glyph: #FFD23F; /* type families: the designed faces first, system faces only as the fallback */ --f-display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; --f-stencil: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif; --f-body: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* type scale (phone values; the desktop values are set at 1024px below) */ --t-mast: clamp(80px, 25.5vw, 112px); --t-h1: 48px; --t-h2: 30px; --t-h3: 19px; --t-body: 17px; --t-small: 15px; --t-micro: 14px; /* the floor: nothing on a page is smaller, SVG labels included */ /* spacing (4px base), width, radii (three, no more) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --gutter: 16px; --max: 1216px; --r-ctl: 8px; --r-card: 12px; --r-plate: 16px; } @media (prefers-color-scheme: dark) { :root { --ground: #0B1220; --card: #131F35; --ink: #DCEBFF; --muted: #9AABC6; --line: #2A3A57; --line-strong: #5D6F8E; --link: #7FB2FF; --focus: #FFD23F; --bar: #DCEBFF; --track: #22314D; --dot: #566A8A; --plate: #121E36; --plate-land-a: #18284A; --plate-land-b: #1F3256; --plate-land-c: #15223D; --foot: #070C17; --cb-edge: #2A3A57; --btn-line: #FFD23F; --ink-btn: #DCEBFF; --ink-btn-text: #0B1220; --field: #7C8CA8; --field-bg: #0B1220; --mark-tile: #FFD23F; --mark-glyph: #0B1220; } } @media (min-width: 768px) { :root { --gutter: 32px; } } @media (min-width: 1024px) { :root { --t-mast: 172px; --t-h1: 88px; --t-h2: 40px; --t-h3: 20px; --t-body: 18px; --t-small: 16px; } } /* RANKED brand v2 "City Desk" with the points row (docs/BRAND.md): every component rule. Colours, fonts and sizes come only from tokens.css (a test fails on a colour literal here). Phone first (390), then 768 and 1024px. The markup each rule expects is emitted by ds/v2/_macros.html (one macro per component; ds/v2/README.md). No JavaScript, no external requests, no style="" attributes: bar widths are , never inline widths. Sections 1 Base, type 6 Answer, funnel, facts 11 Step rail, warning 16 Indexes (board, idx, routes) 2 Layout helpers 7 Hazard band, valve 12 Chart frame, big numeral, 17 Words and documents (say, ex, 3 Buttons 8 Points row, list layout freeze chart, spread letter, doc, split, vs) 4 Header, crumbs 9 Callback strip, form 13 Method card, provenance 18 Method extras (eq, share, gaps) 5 Plate, maps 10 Records, live block 14 Plate grid, chips, footer 19 Generated drawings (who, tl, 15 Page head, section heads bill, wc, cdf, doc page) */ /* 1 ---------------------------------------------------------------- Base and type roles */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.5 var(--f-body); font-kerning: normal; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, svg { display: block; max-width: 100%; } p, ul, ol, dl, figure, blockquote { margin: 0; } ul, ol { padding: 0; } b, strong { font-weight: 700; } h1, h2, h3, h4 { margin: 0; color: inherit; text-wrap: balance; } /* Display (Big Shoulders): plate mast, h1, h2, numerals. Body (Overpass): h3 and everything else. */ h1, .t-h1 { font: 800 var(--t-h1)/.92 var(--f-display); letter-spacing: -.005em; } h2, .t-h2 { font: 800 var(--t-h2)/1 var(--f-display); letter-spacing: 0; } h3, .t-h3 { font: 700 var(--t-h3)/1.3 var(--f-body); } .t-small { font-size: var(--t-small); line-height: 1.45; } .t-mono, .mono { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0; } .num { font-variant-numeric: tabular-nums; } /* a column of numbers that must align: Overpass + tnum */ a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: var(--s2); top: -100px; z-index: 10; background: var(--yellow); color: var(--on-yellow); padding: var(--s2) var(--s3); border-radius: var(--r-ctl); font-weight: 700; } .skip:focus { top: var(--s2); } /* 2 ---------------------------------------------------------------- Layout helpers */ .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .sec { margin-top: var(--s7); } .sec-tight { margin-top: var(--s5); } .stack > * + * { margin-top: var(--s4); } .nw { white-space: nowrap; } @media (max-width: 1023px) { .only-desk { display: none !important; } } @media (min-width: 1024px) { .only-phone { display: none !important; } .sec { margin-top: var(--s8); } } /* two equal columns from 1024px (two rails, two charts); one column on phones */ .two { display: grid; gap: var(--s7); align-items: start; } @media (min-width: 1024px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* main column + side column; a 7:5 split */ @media (min-width: 1024px) { .cols { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: var(--s8); align-items: start; } .cols--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } .side-stack { display: grid; gap: var(--s5); align-content: start; } .cols > .side-stack { margin-top: var(--s7); } @media (min-width: 1024px) { .cols > .side-stack { margin-top: 0; } .side-stack--stick { position: sticky; top: var(--s5); } } /* 3 ---------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 52px; padding: 10px 22px; border-radius: var(--r-ctl); border: 2px solid transparent; font: 700 18px/1.15 var(--f-body); text-align: center; text-decoration: none; cursor: pointer; } .btn-primary { background: var(--yellow); color: var(--on-yellow); border-color: var(--btn-line); } /* ONE per page */ .btn-primary:hover { background: var(--yellow-hover); } .btn-ink { background: var(--ink-btn); color: var(--ink-btn-text); border-color: var(--ink-btn); } /* every other button */ .btn-ink:hover, .call:hover { opacity: .9; } .btn-block { display: flex; width: 100%; } /* the pay-per-call link (checks.py reads ' .wrap { padding: 0 var(--s2); } .plate-edge { position: relative; border: 2px solid var(--plate-edge); border-radius: var(--r-card); padding: 10px 14px 12px; } .plate a { color: var(--plate-ink); } .plate-top { display: flex; align-items: center; gap: 10px; min-height: 28px; color: var(--plate-soft); } .plate-top .mark { width: 28px; height: 28px; } .plate-top .crumbs ol { font-size: 15px; } .plate-top .crumbs li + li::before, .plate-top .crumbs [aria-current] { color: var(--plate-soft); } .plate-top .crumbs a { text-decoration-color: var(--plate-hair); } .plate-top > p, .plate-top > span { font-size: 15px; line-height: 1.3; } /* no crumb: one short line after the mark */ @media (max-width: 767px) { /* phone: the lockup already links home, so the plate crumb starts one level down */ .plate-top .crumbs li:first-child { display: none; } .plate-top .crumbs li:nth-child(2)::before { content: none; } } .plate-h1 { margin-top: 6px; } .plate-mast { display: block; font: 900 var(--t-mast)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; margin-left: -.03em; overflow-wrap: normal; } .plate-mast--md { font-size: clamp(64px, 18vw, 80px); line-height: .84; } .plate-mast--sm { font-size: clamp(52px, 14vw, 64px); line-height: .88; } .plate-mast--xs { font-size: clamp(44px, 13.4vw, 56px); line-height: .88; } .plate-sub { display: block; font: 800 25px/1.05 var(--f-display); margin-top: 6px; } .plate [data-answer] { color: var(--plate-soft); font-size: 16px; line-height: 1.4; margin-top: var(--s2); max-width: 36em; text-wrap: pretty; } .plate-map { margin: 10px 0 0; } .plate-map figcaption, .plate-cap { font-size: var(--t-micro); line-height: 1.35; color: var(--plate-soft); margin-top: var(--s1); } .plate--city .plate-mast:not([class*="plate-mast--"]) { font-size: clamp(72px, 22vw, 96px); } /* a city mast a step smaller; a sized one keeps its size */ @media (min-width: 1024px) { .plate { padding: var(--s3) 0; } .plate > .wrap { padding: 0 var(--gutter); } .plate-edge { border-radius: var(--r-plate); padding: var(--s5) var(--s6) var(--s6); } .plate-top { min-height: 40px; } .plate-top .mark { width: 40px; height: 40px; } .plate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; } .plate-mast--md { font-size: 152px; line-height: .82; } .plate-mast--sm { font-size: 120px; line-height: .86; } .plate-mast--xs { font-size: 100px; line-height: .86; } .plate--city .plate-mast:not([class*="plate-mast--"]) { font-size: 136px; } .plate-sub { font-size: 40px; margin-top: var(--s3); } .plate [data-answer] { font-size: 19px; margin-top: var(--s4); } .plate-map { margin: 0; } /* no figure for the right half: one column on purpose, the mast a step down, the answer on a wider line */ .plate--solo:not(.plate--city) .plate-mast:not(.plate-mast--sm):not(.plate-mast--xs) { font-size: 152px; line-height: .82; } .plate--solo [data-answer] { max-width: 60ch; } } /* a document-led plate's right half: the days as the numeral, the clock to scale under it (desktop) */ .plate-dl { margin: 0; } .plate-dl .tl { margin-top: var(--s5); } /* a big numeral inside the plate: a hairline above it on phones, the full size in the right half on desktop */ .plate .big-num { margin-top: var(--s3); border-top: 1px solid var(--plate-hair); padding-top: var(--s3); } .plate .big-num b { font-size: 92px; } .plate .big-num span { font-size: 22px; } .plate .big-num small { color: var(--plate-soft); } @media (min-width: 1024px) { .plate .big-num { margin-top: 0; border-top: 0; padding-top: 0; } .plate .big-num b { font-size: 176px; } .plate .big-num span { font-size: 32px; } } /* destination signs (home plate): the biggest places in display caps, each with its count */ .signs { list-style: none; margin-top: var(--s3); border-top: 1px solid var(--plate-hair); } .signs li { border-bottom: 1px solid var(--plate-hair); } .signs a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); min-height: 44px; padding: 5px 0 4px; color: var(--plate-ink); text-decoration: none; } .sign-name { display: block; font: 900 34px/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; } .sign-sub { display: none; } .sign-n { text-align: right; font-size: var(--t-micro); line-height: 1.1; color: var(--plate-soft); white-space: nowrap; } .sign-n b { display: inline-block; margin-right: 5px; font: 900 26px/1 var(--f-display); color: var(--plate-ink); } .signs a:hover .sign-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } @media (max-width: 1023px) { .signs--words .sign-name { font-size: 28px; line-height: .96; } } /* a problem's words, not a place */ .signs-more { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s3); font-size: 15px; color: var(--plate-soft); } .signs-more a { color: var(--plate-ink); font-weight: 700; } @media (min-width: 1024px) { .signs { margin-top: var(--s5); } .signs a { padding: 10px 0 8px; } .sign-name { font-size: 64px; } .sign-sub { display: block; margin-top: 4px; font-size: 15px; color: var(--plate-soft); } .sign-n { font-size: 15px; } .sign-n b { display: block; margin-right: 0; font-size: 44px; } } /* maps: generated SVG (ranked/design_svg.py), white and ice on navy, schematic (never geographic), no yellow */ .corridor { width: 100%; height: auto; } .c-line { stroke: var(--plate-ink); stroke-width: 3; } .c-stop { fill: var(--plate); stroke: var(--plate-ink); stroke-width: 3; } .c-here { fill: var(--plate-ink); } .c-here-ring { fill: none; stroke: var(--plate-ink); stroke-width: 2; } .c-place { font: 800 15px var(--f-display); fill: var(--plate-ink); text-transform: uppercase; letter-spacing: .02em; } .c-place-lg { font-size: 21px; } .c-brk { fill: none; stroke: var(--plate-dim); stroke-width: 1.2; } .c-count { font: 500 14px var(--f-body); fill: var(--plate-mid); } .c-n { font: 800 20px var(--f-display); fill: var(--plate-ink); } .metro { width: 100%; height: auto; border-radius: var(--r-ctl); } .m-land-a { fill: var(--plate-land-a); } .m-land-b { fill: var(--plate-land-b); } .m-land-c { fill: var(--plate-land-c); } .m-county { fill: none; stroke: var(--plate-rule); stroke-width: 1.5; stroke-dasharray: 5 5; } .m-road { fill: none; stroke: var(--plate-ink); stroke-width: 4; stroke-linejoin: round; } .m-stop { fill: var(--plate); stroke: var(--plate-ink); stroke-width: 3; } .m-here { fill: var(--plate-ink); } .m-here-ring { fill: none; stroke: var(--plate-ink); stroke-width: 2; } .m-place { font: 800 21px var(--f-display); fill: var(--plate-ink); text-transform: uppercase; letter-spacing: .02em; } .m-place-sm { font-size: 18px; } .m-place-lg { font-size: 34px; } .m-hwy { font: 700 17px var(--f-body); fill: var(--plate-soft); } .m-cty { font: 600 18px var(--f-body); fill: var(--plate-mid); } .m-count { font: 900 48px var(--f-display); fill: var(--plate-ink); } .m-north { fill: var(--plate-soft); } .m-city { fill: var(--plate-tint); stroke: var(--plate-ink); stroke-width: 2; stroke-linejoin: round; } .m-city-l { fill: var(--plate-ink); font-weight: 700; } /* the state transit map (with .metro) */ .m-halo { paint-order: stroke; stroke: var(--plate); stroke-width: 6px; stroke-linejoin: round; } .m-n { font: 900 20px var(--f-display); fill: var(--ice); } .m-n-lg { font-size: 28px; } .m-big { font-size: 24px; } .m-lead { fill: none; stroke: var(--plate-soft); stroke-width: 1.5; } /* 6 ---------------------------------------------------------------- Answer, funnel (proof line), facts */ [data-answer] { font-size: 19px; line-height: 1.45; max-width: 40em; } .funnel { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--s1); margin-top: var(--s3); font-size: var(--t-small); line-height: 1.2; } .funnel > span { white-space: nowrap; } .funnel > span + span::before { content: "›"; display: inline-block; padding: 0 10px; font: 400 22px/1 var(--f-body); color: var(--muted); } .funnel b { font: 900 28px/1 var(--f-display); font-variant-numeric: tabular-nums; } .plate .funnel { color: var(--plate-soft); border-top: 1px solid var(--plate-hair); padding-top: var(--s2); margin-top: var(--s2); } .plate .funnel b { color: var(--plate-ink); } .plate .funnel > span + span::before { color: var(--plate-soft); } @media (min-width: 1024px) { .funnel { font-size: 16px; margin-top: var(--s5); } .funnel b { font-size: 48px; } .funnel > span + span::before { font-size: 30px; padding: 0 var(--s3); } .side-stack .funnel { font-size: var(--t-small); margin-top: var(--s3); } .side-stack .funnel b { font-size: 28px; } .side-stack .funnel > span + span::before { font-size: 22px; padding: 0 10px; } } ul.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); } ul.facts li { font-size: var(--t-micro); line-height: 1.25; } ul.facts b { display: block; font: 900 30px/1 var(--f-display); margin-bottom: 2px; } .plate ul.facts { border-top: 1px solid var(--plate-hair); padding-top: 10px; color: var(--plate-soft); } .plate ul.facts b { color: var(--plate-ink); } .page-head > ul.facts { border-top: 2px solid var(--ink); padding-top: var(--s3); margin-top: var(--s5); max-width: 40em; } .page-head > ul.facts li { color: var(--muted); } .page-head > ul.facts b { color: var(--ink); font-size: 48px; } /* the zero facts on a trust page are its hero numbers */ @media (min-width: 1024px) { ul.facts { gap: var(--s5); margin-top: var(--s5); } ul.facts li { font-size: 15px; } ul.facts b { font-size: 52px; margin-bottom: var(--s1); } .page-head > ul.facts { margin-top: var(--s6); } .page-head > ul.facts b { font-size: 72px; } } /* 7 ---------------------------------------------------------------- Hazard band (the public notice; full bleed) */ .band { background: var(--yellow); color: var(--on-yellow); } .band::before { content: ""; display: block; height: 14px; background: repeating-linear-gradient(-45deg, var(--navy) 0 10px, var(--yellow) 10px 20px); } .band::after { content: ""; display: block; height: 5px; background: var(--navy); } .band-in { padding: var(--s4) var(--gutter) var(--s5); } .band a { color: var(--on-yellow); } .band-label { font: 900 54px/.88 var(--f-stencil); text-transform: uppercase; letter-spacing: .005em; margin: 0; text-wrap: balance; } .band-label > span { display: block; } .band-label > span + span { font-size: 30px; margin-top: var(--s2); } .band-steps { list-style: none; counter-reset: step; display: grid; gap: var(--s3); margin-top: var(--s4); } .band-steps > li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s3); font-size: 17px; line-height: 1.4; } .band-steps > li::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--yellow); font: 900 19px/32px var(--f-display); text-align: center; } .band-steps b { display: block; } .band-text { margin-top: var(--s4); font-size: 17px; line-height: 1.4; max-width: 36em; } /* a record's own words, when it gives no two steps */ .band-fig { margin-top: var(--s4); max-width: 380px; } .band-call { margin-top: var(--s3); padding: var(--s2) 0 var(--s3); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); font-size: 15px; line-height: 1.35; } /* phones: right after the label, between two rules */ .band-call span, .band-call em { display: block; font-style: normal; } .band-call a { display: inline-block; white-space: nowrap; margin: 2px 0 4px; font: 900 44px/1 var(--f-display); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; font-variant-numeric: tabular-nums; } .band-call--bill em { margin-top: var(--s1); font: 800 26px/1.08 var(--f-display); } /* no city number: "the number on your water bill" */ @media (min-width: 1024px) { .band-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s6) var(--gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4.6fr) minmax(296px, 3.4fr); column-gap: var(--s7); align-items: start; } .band-label { grid-column: 1; grid-row: 1 / span 2; font-size: 76px; } .band-label > span + span { font-size: 40px; margin-top: var(--s3); } .band-steps, .band-text { grid-column: 2; grid-row: 1; margin-top: 0; } .band-fig { grid-column: 2; grid-row: 2; } .band-call { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0 0 0 var(--s5); border-top: 0; border-bottom: 0; border-left: 2px solid var(--navy); } .band-call a { font-size: 50px; margin: var(--s2) 0; } .band-call--bill em { font-size: 34px; margin-top: var(--s2); } } /* the valve diagram inside the band: navy on yellow, in both themes */ .valve { width: 100%; height: auto; } .v-pipe { stroke: var(--navy); stroke-width: 5; } .v-box { fill: none; stroke: var(--navy); stroke-width: 2; stroke-dasharray: 6 5; } .v-valve { fill: var(--navy); stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; } .v-stem { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; } .v-meter { fill: var(--yellow); stroke: var(--navy); stroke-width: 3; } .v-t, .v-t-top { font: 600 14px var(--f-body); fill: var(--navy); } .v-tb { font: 800 15px var(--f-body); fill: var(--navy); } .v-n { fill: var(--navy); } .v-nt { font: 900 15px var(--f-display); fill: var(--yellow); } /* 8 ---------------------------------------------------------------- Ranked list: head, column heads, points rows */ .list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); border-top: 4px solid var(--ink); padding-top: var(--s3); } .list-count { font: 800 22px/1 var(--f-display); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .list-key { margin-top: var(--s2); font-size: var(--t-micro); line-height: 1.45; color: var(--muted); } .list-key a { color: var(--ink); font-weight: 600; } .rank-cols { display: none; } .ranks { list-style: none; } .rank { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: var(--s3); grid-template-areas: "n id pts" "why why why"; padding: 14px 0; border-bottom: 1px solid var(--line); } .rank-n { grid-area: n; align-self: start; width: 36px; height: 36px; display: grid; place-items: center; font: 900 26px/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; } .rank--podium .rank-n { background: var(--plate); color: var(--plate-ink); border-radius: var(--r-ctl); box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px var(--plate-edge); } .rank-id { grid-area: id; min-width: 0; } .rank-name { font: 700 19px/1.25 var(--f-body); } /* separators: a hairline before each item; the one that would start a wrapped line is clipped (overflow + -8px) */ .rank-legal { display: flex; flex-wrap: wrap; overflow: hidden; margin: 2px 0 0 -8px; font-size: var(--t-micro); line-height: 1.35; color: var(--muted); } .rank-legal > span { margin-left: -1px; padding: 0 7px 0 8px; border-left: 1px solid var(--line-strong); } .rank-legal .id { font-family: var(--f-mono); font-size: var(--t-micro); } .rank-dba { font-size: var(--t-micro); line-height: 1.35; color: var(--muted); } .rank-flag { margin-top: var(--s1); font-size: var(--t-micro); font-weight: 700; line-height: 1.35; padding-left: 24px; position: relative; } .rank-flag::before { content: "!"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--ground); font: 900 14px/18px var(--f-body); text-align: center; } /* the why strip: one cell per signal that scored the list, in rank.SIGNALS order. Numbers as meters (points out of the signal's share), yes/no as a mark. A flex row, so a list scored on two, three, four or five signals all fit; the column heads (.why-h) use the same flex rules, so they line up on desktop. */ .why { grid-area: why; list-style: none; display: flex; gap: 0 var(--s2); margin-top: 10px; } .sig { flex: 1 1 0; min-width: min-content; font-size: var(--t-micro); line-height: 1.2; color: var(--muted); } .sig--exp { flex-grow: .8; } .sig--rate { flex-grow: 1.2; } .sig-l { display: block; margin-top: 6px; white-space: nowrap; } .sig-hr { color: var(--ink); font-weight: 700; } :lang(es) .sig-hr { white-space: normal; } /* "Muy bien calificada" may take two lines */ .sig--nm .sig-l { white-space: normal; font-style: italic; } /* not measured: the list's middle points, said in words */ .sig meter { display: block; width: 100%; contain: inline-size; height: 8px; margin-top: 3px; -webkit-appearance: none; appearance: none; background: var(--track); border: 0; border-radius: 0; } .sig meter::-webkit-meter-bar { background: var(--track); border: 0; border-radius: 0; height: 8px; } .sig meter::-webkit-meter-optimum-value, .sig meter::-webkit-meter-suboptimum-value, .sig meter::-webkit-meter-even-less-good-value { background: var(--bar); border-radius: 0; } .sig meter::-moz-meter-bar { background: var(--bar); } .sig--nm meter::-webkit-meter-optimum-value, .sig--nm meter::-webkit-meter-suboptimum-value, .sig--nm meter::-webkit-meter-even-less-good-value { background: var(--dot); } .sig--nm meter::-moz-meter-bar { background: var(--dot); } .sig--yes, .sig--no, .sig--na { flex: 0 0 auto; position: relative; padding-left: 2px; color: var(--ink); } .sig--yes::before { content: ""; display: block; width: 8px; height: 14px; margin: -4px 0 0 6px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); } .sig--yes .sig-l, .sig--no .sig-l, .sig--na .sig-l { margin-top: 7px; } .sig--no, .sig--na { color: var(--muted); } .sig--no::before { content: "×"; display: block; height: 14px; font: 900 22px/12px var(--f-body); color: var(--ink); } .sig--na::before { content: "–"; display: block; height: 14px; font: 900 22px/12px var(--f-body); color: var(--muted); } .sig--na .sig-l { font-style: italic; } /* inline pass/fail marks in running text (keys, method) */ .ok, .no { position: relative; padding-left: 19px; white-space: nowrap; } .ok::before { content: ""; position: absolute; left: 3px; top: .1em; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .no::before { content: "×"; position: absolute; left: 1px; top: -.1em; font: 900 18px/1 var(--f-body); color: var(--ink); } .pts { grid-area: pts; align-self: start; text-align: right; line-height: 1; } .pts b { display: inline-block; font: 900 44px/.9 var(--f-display); font-variant-numeric: tabular-nums; } /* "of 100" is said once, on the leader at desktop; screen readers hear it on every row */ .pts span { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); font-size: var(--t-micro); color: var(--muted); white-space: nowrap; } .pts--lead b { background: var(--yellow); color: var(--on-yellow); padding: 9px 8px 7px 9px; clip-path: polygon(0 7%, 12.5% 0, 25% 7%, 37.5% 0, 50% 7%, 62.5% 0, 75% 7%, 87.5% 0, 100% 7%, 100% 93%, 87.5% 100%, 75% 93%, 62.5% 100%, 50% 93%, 37.5% 100%, 25% 93%, 12.5% 100%, 0 93%); } .pts b small { font-size: .62em; } /* a list shown to one decimal (points.decimals): the decimal set smaller */ /* the rest of a long list (ranks 13+), compact behind a details: rank, name, license, points on one line each */ .ranks-more { margin-top: var(--s5); border-top: 2px solid var(--ink); } .ranks-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; list-style: none; font: 800 24px/1.1 var(--f-display); } .ranks-more > summary::-webkit-details-marker { display: none; } .ranks-more > summary::after { content: "+"; flex: none; width: 32px; height: 32px; border: 2px solid var(--btn-line); border-radius: var(--r-ctl); font: 900 22px/28px var(--f-body); text-align: center; } .ranks-more[open] > summary::after { content: "–"; } .ranks-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .rank--compact { grid-template-areas: "n id pts"; align-items: center; padding: var(--s2) 0; } .rank--compact .rank-n { height: auto; font-size: 20px; } .rank--compact .rank-name { font-size: 16px; line-height: 1.3; } .rank--compact .rank-legal { margin-top: 0; } .rank--compact .pts { align-self: center; } .rank--compact .pts b { font-size: 26px; } .list-more { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); font-weight: 600; } .why-h { display: flex; gap: 0 var(--s3); } .wh { flex: 1 1 0; min-width: 0; } .wh--mark { flex: 0 0 56px; } @media (min-width: 1024px) { .rank-cols, .rank { grid-template-columns: 44px minmax(0, 1fr) 400px 96px; column-gap: var(--s5); } /* 96: "100" on the leader's tile */ .rank-cols { display: grid; grid-template-areas: "n id why pts"; align-items: end; padding: var(--s3) 0 var(--s2); border-bottom: 2px solid var(--ink); font-size: var(--t-micro); line-height: 1.25; color: var(--muted); font-weight: 600; } .rank-cols .name-h { grid-area: id; } .rank-cols .why-h { grid-area: why; } .rank-cols .pts-h { grid-area: pts; text-align: right; } .rank { grid-template-areas: "n id why pts"; padding: var(--s4) 0; align-items: start; } .rank-n { width: 44px; height: 44px; font-size: 30px; } .rank-name { font-size: 20px; } .why { gap: 0 var(--s3); margin-top: 6px; } .sig { min-width: 0; } .sig--exp, .sig--rate { flex-grow: 1; } .sig--yes, .sig--no, .sig--na { flex: 0 0 56px; } .sig meter, .sig meter::-webkit-meter-bar { height: 10px; } .sig meter { max-width: 160px; } /* one meter never becomes a slab on a list of few signals */ .sig--yes .sig-l, .sig--no .sig-l, .sig--na .sig-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the column head names them */ .sig--yes::before { margin: -6px 0 0 8px; width: 9px; height: 17px; } .pts b { font-size: 54px; } .pts--lead span { position: static; width: auto; height: auto; clip-path: none; margin-top: 6px; } .list-layout--dec .rank-cols, .list-layout--dec .rank { grid-template-columns: 44px minmax(0, 1fr) 376px 120px; } /* "100.0" on the tile */ /* the why column sized by the signals that scored the list (views: list-layout--n1 ... --n5; five keep 400px) */ .list-layout--n1 .rank-cols, .list-layout--n1 .rank { grid-template-columns: 44px minmax(0, 1fr) 160px 96px; } .list-layout--n2 .rank-cols, .list-layout--n2 .rank { grid-template-columns: 44px minmax(0, 1fr) 240px 96px; } .list-layout--n3 .rank-cols, .list-layout--n3 .rank { grid-template-columns: 44px minmax(0, 1fr) 300px 96px; } .list-layout--n4 .rank-cols, .list-layout--n4 .rank { grid-template-columns: 44px minmax(0, 1fr) 360px 96px; } .list-layout--dec.list-layout--n1 .rank-cols, .list-layout--dec.list-layout--n1 .rank { grid-template-columns: 44px minmax(0, 1fr) 160px 120px; } .list-layout--dec.list-layout--n2 .rank-cols, .list-layout--dec.list-layout--n2 .rank { grid-template-columns: 44px minmax(0, 1fr) 240px 120px; } .list-layout--dec.list-layout--n3 .rank-cols, .list-layout--dec.list-layout--n3 .rank { grid-template-columns: 44px minmax(0, 1fr) 300px 120px; } .list-layout--dec.list-layout--n4 .rank-cols, .list-layout--dec.list-layout--n4 .rank { grid-template-columns: 44px minmax(0, 1fr) 336px 120px; } .rank--compact { grid-template-areas: "n id id pts"; padding: var(--s2) 0; align-items: center; } .rank--compact .rank-n { height: auto; font-size: 22px; } .rank--compact .rank-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s4); } .rank--compact .rank-name { font-size: 17px; } .rank--compact .rank-legal { margin: 0; } .rank--compact .rank-legal > span { border-left: 0; padding: 0; margin: 0; } .rank--compact .pts b { font-size: 28px; } } /* the list page: phone order = plate, ranks 1-3, callback strip, ranks 4+, more links, spread; then (outside .list-layout) the method at full width, the band and the form. Desktop: the strip (stretched beside ranks 1-3) and the spread (sticky) move to a 320px side column; the DOM order stays the phone order. */ .list-layout .cb { margin: var(--s5) calc(-1 * var(--gutter)) 0; border-radius: 0; } .list-layout .list-side { margin-top: var(--s7); display: grid; gap: var(--s7); } @media (min-width: 768px) { .list-layout .cb { margin: var(--s5) 0 0; border-radius: var(--r-card); } } @media (min-width: 1024px) { .list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--s7); grid-template-areas: "head cb" "key cb" "cols cb" "a cb" "b side" "c side" "more side"; grid-template-rows: auto auto auto auto auto auto 1fr; } .list-layout .list-head { grid-area: head; } .list-layout .list-key { grid-area: key; } .list-layout .rank-cols { grid-area: cols; } .list-layout .ranks-a { grid-area: a; } .list-layout .ranks-b { grid-area: b; } .list-layout .ranks-more { grid-area: c; } .list-layout .list-more { grid-area: more; } .list-layout .cb { grid-area: cb; margin: 0; align-self: stretch; display: flex; flex-direction: column; padding: var(--s5); } .list-layout .cb-note { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--plate-hair); } .cb-tel { display: block; width: max-content; margin-top: var(--s1); font: 900 34px/1.05 var(--f-display); } .list-layout .list-side { grid-area: side; margin-top: var(--s6); align-self: start; position: sticky; top: var(--s5); } } /* 9 ---------------------------------------------------------------- Callback strip (one button) and the forms */ .cb { background: var(--plate); color: var(--plate-ink); padding: 20px var(--gutter); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--cb-edge); } .cb-title { font: 800 28px/1 var(--f-display); text-wrap: balance; } .cb-text { margin-top: var(--s2); color: var(--plate-soft); font-size: 16px; line-height: 1.45; } .cb .btn { margin-top: var(--s4); width: 100%; } .cb-note { margin-top: var(--s3); font-size: var(--t-micro); line-height: 1.45; color: var(--plate-soft); } .cb-note a { color: var(--plate-ink); font-weight: 700; white-space: nowrap; } .cb-steps { list-style: none; counter-reset: cb; display: grid; gap: 6px; margin-top: var(--s4); font-size: 15px; line-height: 1.35; color: var(--plate-soft); } .cb-steps li { counter-increment: cb; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; } .cb-steps li::before { content: counter(cb); width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--plate-edge); color: var(--plate-ink); font: 900 14px/22px var(--f-display); text-align: center; } @media (min-width: 768px) { .cb--bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); align-items: center; padding: var(--s5) var(--s6); } .cb--bar .btn { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: auto; min-width: 280px; } } /* the forms: the callback (section.cta#get-help > form.form#callback), the freeze alerts, the removal request. Single step; the consent paragraphs keep the engine's markup (p.consent: checkbox, then its label). */ .form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) var(--s4); } .form > p { margin-top: var(--s2); color: var(--muted); } .form > .consent { color: var(--muted); } .field { display: grid; gap: 6px; margin-top: var(--s4); } .field label { font-weight: 700; font-size: 16px; } .field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--field); border-radius: var(--r-ctl); background: var(--field-bg); color: var(--ink); font: 400 17px/1.3 var(--f-body); } .field textarea { min-height: 96px; resize: vertical; } .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); } .field-hint { font-size: var(--t-micro); line-height: 1.45; color: var(--muted); } .consent { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--s4); font-size: var(--t-micro); line-height: 1.45; color: var(--muted); } .consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--focus); } .consent label { font-weight: 400; } .form .btn, .form .call { margin-top: var(--s5); } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .removal .form { max-width: 44rem; } /* the claim page's removal request: a form, not a banner */ .system-wait { max-width: 44rem; } /* a confirmation page with no rail: the while-you-wait block, one column */ .form-links { margin-top: var(--s3); font-size: var(--t-micro); color: var(--muted); } @media (min-width: 1024px) { .form { padding: var(--s6); } } /* 10 --------------------------------------------------------------- Official records and the live block */ /* A record section keeps the engine's markup:
then a bare

(ranked/ops.py reads it for the lost-facts guard, and a class would blind it), its words, a of
rows and bare
  • entries. So it is styled by the attribute, never by a class. */ section[data-kind] { border-top: 4px solid var(--ink); padding-top: var(--s3); } section[data-kind] + section[data-kind] { margin-top: var(--s6); } section[data-kind] > p { margin-top: var(--s3); max-width: 42em; } section[data-kind] > ul, section[data-kind] > ol { list-style: none; margin-top: var(--s3); } section[data-kind] > ul > li, section[data-kind] > ol > li { padding: var(--s2) 0; border-top: 1px solid var(--line); } table.facts { width: 100%; border-collapse: collapse; margin-top: var(--s3); } table.facts th, table.facts td { padding: 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.4; } table.facts th { width: 34%; padding-right: var(--s4); color: var(--muted); font-weight: 600; font-size: var(--t-small); } .recs { display: grid; gap: var(--s6); } /* a list's local records ("What applies in Austin", under a list head): each under a 2px rule, its heading a step down from a section's; two columns from 1024px */ .recs-area > .list-head + .recs { margin-top: var(--s5); } .recs > section[data-kind] { border-top-width: 2px; } .recs > section[data-kind] + section[data-kind] { margin-top: 0; } .recs > section[data-kind] > h2 { font-size: 26px; } @media (min-width: 1024px) { /* two balanced columns that the records flow down: no holes beside a short record */ .recs { display: block; columns: 2; column-gap: var(--s7); } .recs > section[data-kind] { break-inside: avoid; margin-bottom: var(--s7); } .recs > section[data-kind] > h2 { font-size: 30px; } } .live { border-top: 4px solid var(--ink); padding-top: var(--s3); } .live:empty { display: none; } .live ul { list-style: none; margin-top: var(--s3); } .live li { padding: var(--s2) 0; border-top: 1px solid var(--line); } .live p { margin-top: var(--s2); font-size: var(--t-micro); color: var(--muted); } /* 11 --------------------------------------------------------------- Step rail (a transit line of stops) and warning */ .rail-head { display: flex; align-items: flex-start; gap: var(--s3); } .rail-head::before { content: ""; flex: none; width: 34px; height: 10px; margin-top: .36em; border-radius: 5px; background: var(--ink); } .rail { list-style: none; margin-top: var(--s4); } .rail > li { position: relative; padding: 0 0 var(--s5) 38px; } .rail > li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ground); border: 4px solid var(--ink); z-index: 1; } .rail > li::after { content: ""; position: absolute; left: 10px; top: 12px; bottom: -12px; width: 4px; background: var(--ink); } .rail > li:last-child { padding-bottom: 0; } .rail > li:last-child::after { display: none; } .rail h3 { font-size: var(--t-h3); } .rail p { margin-top: 2px; } .rail--now > li:first-child::before { background: var(--ink); box-shadow: 0 0 0 4px var(--ground), 0 0 0 6px var(--ink); } .rail--now > li:first-child h3 { font-size: 21px; } .dont { position: relative; margin-top: var(--s5); padding: var(--s3) 0 var(--s3) 44px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-weight: 700; font-size: 18px; line-height: 1.35; } .dont::before { content: ""; position: absolute; left: 0; top: var(--s3); width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); } .dont::after { content: "×"; position: absolute; left: 0; top: var(--s3); width: 30px; height: 30px; font: 900 28px/30px var(--f-body); text-align: center; } .dont span { display: block; font-weight: 400; font-size: 16px; color: var(--muted); margin-top: 2px; } .asks { list-style: none; display: grid; gap: 2px; margin-top: var(--s2); font-size: 16px; line-height: 1.4; color: var(--muted); } .asks li { position: relative; padding-left: 18px; } .asks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--muted); } /* 12 --------------------------------------------------------------- Chart frame, big numeral, freeze chart, spread */ .chart-title { font: 800 26px/1.05 var(--f-display); } .chart > svg { width: 100%; height: auto; margin-top: var(--s3); } .chart-src { margin-top: var(--s2); font: 400 var(--t-micro)/1.45 var(--f-mono); color: var(--muted); } .plate .chart-title { color: var(--plate-ink); } .plate .chart-src { color: var(--plate-soft); } .big-num { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--s3); } .big-num b { font: 900 112px/.78 var(--f-display); font-variant-numeric: tabular-nums; } .big-num span { font: 800 24px/1 var(--f-display); padding-bottom: 2px; } .big-num small { display: block; font: 400 var(--t-micro)/1.4 var(--f-body); color: var(--muted); margin-top: var(--s1); } @media (min-width: 1024px) { .big-num b { font-size: 176px; } .big-num span { font-size: 32px; } } .fz-bar { fill: var(--ink); } .fz-bar0 { fill: var(--line-strong); } .fz-win { fill: var(--track); } .fz-wl { font: 600 14px var(--f-body); fill: var(--muted); } .fz-v { font: 900 22px var(--f-display); fill: var(--ink); } .fz-m { font: 600 15px var(--f-body); fill: var(--muted); } .fz-base { stroke: var(--ink); stroke-width: 2; } .fz-today { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; } .fz-tl { font: 600 14px var(--f-body); fill: var(--ink); } .plate .fz-bar { fill: var(--ice); } .plate .fz-bar0 { fill: var(--plate-dim); } .plate .fz-win { fill: var(--plate-land-b); } .plate .fz-wl, .plate .fz-m { fill: var(--plate-soft); font-size: 16px; } .plate .fz-v { fill: var(--plate-ink); font-size: 30px; } .plate .fz-base { stroke: var(--plate-edge); } .plate .fz-today { stroke: var(--plate-soft); } .plate .fz-tl { fill: var(--plate-ink); font-size: 15px; } .spread .chart-title { font-size: 24px; } .sp-band { fill: var(--track); } .sp-other { fill: var(--dot); } .sp-shown { fill: var(--ink); } .sp-axis, .sp-tick { stroke: var(--ink); stroke-width: 1.5; } .sp-t { font: 600 16px var(--f-body); fill: var(--muted); font-variant-numeric: tabular-nums; } /* 16 units: >= 14px down to a 315px render */ .sp-cap { font-weight: 400; } .sp-l { font: 700 16px var(--f-body); fill: var(--ink); } .sp-med { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; } /* 13 --------------------------------------------------------------- Method card (a receipt of the formula), stamp, provenance */ .method { border-top: 4px solid var(--ink); padding-top: var(--s3); } .method > p { margin-top: var(--s3); font-size: 16px; line-height: 1.5; } .method-side { margin-top: var(--s3); } .method-side > * + * { margin-top: var(--s3); } .method-side > p:first-child { font-size: 16px; line-height: 1.5; } .method-side > .act { margin-top: var(--s5); } @media (min-width: 1024px) { .method--wide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--s7); align-items: start; } .method-side { margin-top: 0; padding-top: var(--s1); } } .formula, .ledger { list-style: none; margin-top: var(--s4); } .formula > li, .ledger > li { display: grid; grid-template-columns: auto minmax(var(--s4), 1fr) auto; align-items: baseline; padding: var(--s2) 0; } .formula > li::before, .ledger > li::before { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin: 0 var(--s2) 7px; border-bottom: 2px dotted var(--line-strong); } .formula b { grid-column: 1; grid-row: 1; font-weight: 700; } .formula-pts { grid-column: 3; grid-row: 1; font: 900 28px/1 var(--f-display); font-variant-numeric: tabular-nums; } .formula > li > p { grid-column: 1 / -1; font-size: 15px; line-height: 1.4; color: var(--muted); margin-top: 2px; } .formula .formula-sum { border-top: 2px solid var(--ink); margin-top: var(--s1); padding-top: var(--s3); } .formula .formula-sum b { font: 800 24px/1 var(--f-display); } .formula .formula-sum .formula-pts { font-size: 40px; } .ledger { margin-top: var(--s3); } .ledger > li > b { grid-column: 1; grid-row: 1; font-weight: 700; } .ledger > li > span { grid-column: 3; grid-row: 1; text-align: right; color: var(--muted); } .ledger > li > p { grid-column: 1 / -1; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); } .stamp { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s4); font: 400 15px/1.2 var(--f-mono); } .stamp::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--line-strong); } .stamp b { order: 2; font: 900 32px/1 var(--f-display); } .prov { font-size: var(--t-micro); line-height: 1.5; color: var(--muted); max-width: 64em; } .prov a { color: inherit; } .sources { list-style: none; margin-top: var(--s2); font-size: var(--t-micro); line-height: 1.5; color: var(--muted); } .sources li + li { margin-top: var(--s1); } .sources a { color: var(--ink); } /* 14 --------------------------------------------------------------- Plate grid (hubs), chips, footer */ .plates { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--s3); } .plate-tile { display: block; height: 100%; background: var(--plate); color: var(--plate-ink); text-decoration: none; border-radius: var(--r-card); padding: var(--s3); box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px var(--plate-edge); } .plate-tile:hover { box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 4px var(--yellow); } .plate-tile-name { display: block; font: 900 34px/.88 var(--f-display); text-transform: uppercase; margin-top: var(--s2); } .plate-tile-sub { display: block; margin-top: var(--s2); font-size: var(--t-micro); line-height: 1.35; color: var(--plate-soft); } .plate-tile-sub b { color: var(--plate-ink); font: 900 22px/1 var(--f-display); margin-right: 4px; } .plate-tile .mark { width: 24px; height: 24px; } .plate-tile--wide .plate-tile-name { font-size: 64px; } .stack > .plate-tile, .side-stack > .plate-tile { height: auto; } .plates--four, .plates--few { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* four tiles (404, state): 2 x 2, then one row; five to seven (a state hub without a map): 2, then 3 a row */ @media (min-width: 1024px) { .plates--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plates--few { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plates--four .plate-tile, .plates--few .plate-tile { padding: var(--s4); } .plates--four .plate-tile-name, .plates--few .plate-tile-name { font-size: 52px; } .plates--four .plate-tile-sub b, .plates--few .plate-tile-sub b { font-size: 28px; } .plate-map .plates--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plate-map .plates--four .plate-tile-name { font-size: 44px; } } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; background: var(--card); } .chip:hover { border-color: var(--ink); } .site-foot { background: var(--foot); color: var(--plate-ink); margin-top: var(--s8); padding: var(--s7) 0 var(--s6); } .site-foot a { color: var(--plate-ink); } .foot-grid { display: grid; gap: var(--s6); } .foot-claim { font: 900 34px/.95 var(--f-display); margin-top: var(--s5); text-wrap: balance; } .foot-claim + p { margin-top: var(--s2); color: var(--foot-soft); font-size: 16px; max-width: 34em; } .foot-links { list-style: none; display: grid; gap: var(--s2); align-content: start; font-size: 16px; } .foot-copy { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--foot-rule); font-size: var(--t-micro); color: var(--foot-copy); } .site-foot .lockup .mark { width: 36px; height: 36px; } @media (min-width: 1024px) { .foot-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--s7); } .foot-claim { font-size: 44px; } } /* 15 --------------------------------------------------------------- Page head (no plate), section heads, lede, actions */ .page-head { padding-top: var(--s6); } .page-head .crumbs { margin-bottom: var(--s4); } .page-head h1 { max-width: 13em; } .page-head [data-answer] { margin-top: var(--s4); } @media (min-width: 1024px) { .page-head { padding-top: var(--s8); } .page-head [data-answer] { font-size: 21px; margin-top: var(--s5); } } .head-grid > figure { margin-top: var(--s6); } @media (min-width: 1024px) { .head-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: center; } .head-grid > figure { margin-top: 0; } } .ruled { border-top: 4px solid var(--ink); padding-top: var(--s3); } .ruled > p { margin-top: var(--s3); } .ruled > p + p { margin-top: var(--s2); } .ruled > .chips { margin-top: var(--s4); } .lede { margin-top: var(--s3); max-width: 44em; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .lede a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); } .note { margin-top: var(--s3); font-size: 15px; line-height: 1.45; color: var(--muted); } .jump { display: inline-block; margin-top: var(--s3); font-weight: 700; color: var(--ink); } .prose { max-width: 42em; } .prose > p + p { margin-top: var(--s3); } .act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); } .act .btn { width: 100%; } .act a:not(.btn) { font-weight: 600; color: var(--ink); } @media (min-width: 768px) { .act .btn { width: auto; min-width: 300px; } } /* 16 --------------------------------------------------------------- Indexes */ .board { list-style: none; margin-top: var(--s4); } @media (min-width: 768px) { .board { columns: 2; column-gap: var(--s7); } } @media (min-width: 1024px) { .board { columns: 3; } } .board li { break-inside: avoid; } .board a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s3); padding: 10px 0 9px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; } .board-name { font: 800 26px/1 var(--f-display); text-transform: uppercase; letter-spacing: .005em; } .board-sub { grid-column: 1; margin-top: 2px; font-size: var(--t-micro); line-height: 1.3; color: var(--muted); } .board-n { grid-column: 2; grid-row: 1; font: 700 19px/1 var(--f-body); font-variant-numeric: tabular-nums; text-align: right; } .board a:hover .board-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .idx { display: grid; gap: var(--s6); margin-top: var(--s5); } @media (min-width: 1024px) { .idx { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s6); row-gap: var(--s7); } .idx-wide { grid-column: 1 / -1; } } .idx-state { border-top: 2px solid var(--ink); padding-top: var(--s2); } .idx-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s3); font: 800 28px/1.05 var(--f-display); } .idx-h a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; } .idx-h span { font: 600 15px/1.2 var(--f-body); color: var(--muted); font-variant-numeric: tabular-nums; } .idx ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--s3); font-size: 17px; line-height: 1.3; } .idx li a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); text-underline-offset: .2em; } .idx li a:hover { text-decoration-color: currentColor; } .idx li span { margin-left: 5px; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; } .routes { list-style: none; display: grid; gap: var(--s6); margin-top: var(--s5); } @media (min-width: 1024px) { .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); } } .routes > li { border-top: 2px solid var(--ink); padding-top: var(--s3); } .routes h3 { font: 800 32px/1 var(--f-display); } .routes h3 a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; } .routes p { margin-top: var(--s2); } .routes .route-note { color: var(--muted); font-size: 16px; } .routes .chips { margin-top: var(--s3); } .routes .route-more { margin-top: var(--s2); font-size: 15px; line-height: 1.45; color: var(--muted); } /* the places past five chips */ .routes .route-more a { color: var(--ink); font-weight: 600; } @media (min-width: 1024px) { .routes h3 { font-size: 40px; } } /* 17 --------------------------------------------------------------- Words and documents */ .say { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-card); padding: var(--s5) var(--s4); } .say > p { margin-top: var(--s2); color: var(--muted); font-size: 16px; } .say-list { list-style: none; margin-top: var(--s3); } .say-list > li { padding: var(--s3) 0; border-top: 1px solid var(--line); } .say q { display: block; font: 700 21px/1.3 var(--f-body); quotes: "\201C" "\201D"; } .say-list span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--muted); } .say-list b { display: block; font: 700 21px/1.3 var(--f-body); } .say-tag { display: inline-block; margin-top: var(--s3); font: 600 var(--t-micro)/1.3 var(--f-body); color: var(--muted); } @media (min-width: 1024px) { .say { padding: var(--s6); } .say q { font-size: 24px; } .say-list--cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); } .side-stack .say, .cols--split .say { padding: var(--s5); } .side-stack .say-list--cols { display: block; } } .ex { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) var(--s4); } .ex-label { font: 800 24px/1.05 var(--f-display); } .ex-say { margin-top: var(--s3); font-size: 21px; line-height: 1.75; } .ex-part { background: var(--track); border-radius: 4px; padding: 3px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ex-n, .ex-key li::before { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--ground); font: 900 15px/1 var(--f-display); vertical-align: 3px; } .ex-n { margin: 0 2px 0 6px; } .ex-end { white-space: nowrap; } .ex-key { list-style: none; counter-reset: ex; display: grid; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; } .ex-key li { counter-increment: ex; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; } .ex-key li::before { content: counter(ex); vertical-align: 0; } .ex-key b { display: block; color: var(--ink); } .ex-key span { color: var(--muted); } @media (min-width: 1024px) { .ex { padding: var(--s6); } .ex-say { font-size: 26px; } .ex-label { font-size: 28px; } } .letter { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); } .letter-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; } .letter-meta dt { color: var(--muted); } .letter-meta dd { margin: 0; font-weight: 700; } .letter-body { list-style: none; margin-top: var(--s3); display: grid; gap: var(--s2); font-size: 16px; line-height: 1.4; } .letter-body li { padding-bottom: var(--s2); border-bottom: 1px dotted var(--line-strong); } .letter-body li:last-child { border-bottom: 0; padding-bottom: 0; } .letter-body span { color: var(--muted); } @media (min-width: 1024px) { .letter { padding: var(--s5) var(--s6); } } .doc { border-top: 4px solid var(--ink); padding-top: var(--s4); display: grid; gap: var(--s4); } section[data-kind] > .doc { border-top: 0; padding-top: 0; margin-top: var(--s4); } /* the record's own rule heads it */ .doc-title { font: 800 32px/1 var(--f-display); text-wrap: balance; } .doc-act { list-style: none; } .send > li:only-child { display: block; } /* how to send, in the record's own words (no channel fields) */ .doc-head { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--s4); align-items: start; } .doc-svg { width: 88px; height: auto; } .doc h2 { font-size: 32px; } .doc-meta { margin-top: var(--s2); font: 400 var(--t-micro)/1.4 var(--f-mono); color: var(--muted); } .doc-body > p { margin-top: 0; } .doc-body .btn { margin-top: var(--s4); width: 100%; } .send { list-style: none; } .send > li { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; column-gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; } .send > li > b { font-weight: 700; } .send .mono { font-size: 15px; overflow-wrap: anywhere; } .send-h { font: 800 24px/1 var(--f-display); margin-bottom: var(--s2); } @media (min-width: 768px) { .doc-body .btn { width: auto; } .send > li { grid-template-columns: 120px minmax(0, 1fr); } } @media (min-width: 1024px) { .doc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s8); padding-top: var(--s5); } .doc-head { grid-template-columns: 132px minmax(0, 1fr); column-gap: var(--s5); } .doc-svg { width: 132px; } .doc h2 { font-size: 44px; } .doc-title { font-size: 44px; } .doc-body { grid-column: 1; } .doc-send { grid-column: 2; grid-row: 1 / span 2; } } .split { display: grid; margin-top: var(--s4); border-top: 4px solid var(--ink); } .split-side { padding: var(--s4) 0 var(--s5); } .split-side + .split-side { border-top: 2px solid var(--ink); } .split-who { font: 900 40px/.9 var(--f-display); text-transform: uppercase; } .split-side ul { list-style: none; margin-top: var(--s3); } .split-side li { padding: var(--s2) 0; border-top: 1px solid var(--line); } .split-call { margin-top: var(--s3); font-weight: 700; } .split-call a { white-space: nowrap; color: inherit; } @media (min-width: 768px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split-side:first-child { padding-right: var(--s5); } .split-side + .split-side { border-top: 0; border-left: 2px solid var(--ink); padding-left: var(--s5); } } /* vs: two things (or a field and its source) side by side, row by row (claim, reference) */ .vs { margin-top: var(--s4); } .vs-head, .vs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s4); } .vs-head { border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); } .vs-head span { font: 900 30px/.95 var(--f-display); text-transform: uppercase; } .vs-head .vs-q { display: none; } .vs-row { padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); } .vs-row > h3, .vs-row > .vs-q { grid-column: 1 / -1; font: 700 17px/1.3 var(--f-body); margin-bottom: var(--s1); } .vs-row > p { font-size: 16px; line-height: 1.45; } .vs-row > p b { display: block; font: 800 24px/1.05 var(--f-display); margin-bottom: 2px; } .vs-row .vs-src { color: var(--muted); } .vs--table .vs-head span { font: 700 15px/1.2 var(--f-body); text-transform: none; color: var(--muted); } @media (min-width: 1024px) { .vs-head, .vs-row { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr); column-gap: var(--s6); } .vs-head .vs-q { display: block; font: 600 15px/1.2 var(--f-body); text-transform: none; color: var(--muted); align-self: end; } .vs-head span { font-size: 40px; } .vs--table .vs-head span { font-size: 15px; } .vs-row > h3, .vs-row > .vs-q { grid-column: 1; margin: 0; font-size: 18px; } .vs-row > p { font-size: 17px; } } /* 18 --------------------------------------------------------------- Method extras (methodology page) */ .eq { list-style: none; margin-top: var(--s4); } .eq > li { display: grid; grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "n v" "m v"; column-gap: var(--s4); align-items: end; padding: var(--s3) 0; border-top: 1px solid var(--line); } .eq-n { grid-area: n; font-weight: 700; line-height: 1.25; } .eq-n small { display: block; font-weight: 400; font-size: var(--t-micro); color: var(--muted); } .eq meter { grid-area: m; display: block; width: 100%; height: 10px; margin-top: 6px; -webkit-appearance: none; appearance: none; background: var(--track); border: 0; } .eq meter::-webkit-meter-bar { background: var(--track); border: 0; border-radius: 0; height: 10px; } .eq meter::-webkit-meter-optimum-value, .eq meter::-webkit-meter-suboptimum-value, .eq meter::-webkit-meter-even-less-good-value { background: var(--bar); border-radius: 0; } .eq meter::-moz-meter-bar { background: var(--bar); } .eq b { grid-area: v; font: 900 44px/.85 var(--f-display); text-align: right; } .eq--pass .eq-n { align-self: center; } .eq--pass .eq-n small { padding-left: 19px; } .eq-sum { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s1); padding-top: var(--s3); border-top: 3px solid var(--ink); } .eq-sum > span { font: 800 26px/1 var(--f-display); } .eq-sum .pts { grid-area: auto; } @media (min-width: 1024px) { .eq b { font-size: 48px; } .eq > li { padding: 10px 0; } .eq-fig { max-width: 640px; } } .share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin-top: var(--s4); } .share-h { font-weight: 700; font-size: 16px; line-height: 1.3; min-height: 2.6em; } .share-bar { list-style: none; display: flex; flex-direction: column; gap: 3px; height: 260px; margin-top: var(--s2); } .share-bar > li { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s3); background: var(--ink); color: var(--ground); font-size: 15px; font-weight: 700; line-height: 1.1; } .share-bar b { font: 900 26px/1 var(--f-display); } .share-out { margin-top: var(--s2); padding: var(--s2) var(--s3); border: 2px dashed var(--line-strong); color: var(--muted); font-size: var(--t-micro); line-height: 1.35; } @media (min-width: 1024px) { .share { max-width: 560px; gap: var(--s6); } .share-bar { height: 300px; } } .gaps { list-style: none; margin-top: var(--s4); } .gaps > li { position: relative; padding: var(--s4) 0 var(--s4) 44px; border-top: 1px solid var(--line); } .gaps > li::before { content: ""; position: absolute; left: 2px; top: calc(var(--s4) + 2px); width: 24px; height: 24px; border-radius: 50%; border: 3px dashed var(--ink); } .gaps b { display: block; font: 800 26px/1.02 var(--f-display); } .gaps p { margin-top: var(--s1); font-size: 16px; line-height: 1.5; color: var(--muted); } @media (min-width: 1024px) { .gaps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); } .side-stack .gaps { display: block; } .side-stack .gaps b { font-size: 24px; } } /* 19 --------------------------------------------------------------- Generated drawings (class names are the contract) Ink on the ground by default; inside .plate white and ice. No yellow except in the band. */ .who { width: 100%; height: auto; } .w-grade { stroke: var(--line-strong); stroke-width: 2; } .w-pipe { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .w-main { fill: var(--ink); } .w-box { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; } .w-meter { fill: var(--ground); stroke: var(--ink); stroke-width: 4; } .w-needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; } .w-valve { fill: var(--ink); } .w-house { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .w-div { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; } .w-brk { fill: none; stroke: var(--ink); stroke-width: 3; } .w-own { font: 900 32px var(--f-display); fill: var(--ink); text-transform: uppercase; letter-spacing: .01em; } .w-sub { font: 400 22px var(--f-body); fill: var(--muted); } .w-t { font: 600 22px var(--f-body); fill: var(--ink); } .plate .w-grade { stroke: var(--plate-hair); } .plate .w-pipe { stroke: var(--ice); } .plate .w-main { fill: var(--ice); } .plate .w-box, .plate .w-house, .plate .w-brk, .plate .w-div, .plate .w-needle { stroke: var(--plate-ink); } .plate .w-meter { fill: var(--plate); stroke: var(--plate-ink); } .plate .w-valve, .plate .w-own, .plate .w-t { fill: var(--plate-ink); } .plate .w-sub { fill: var(--plate-soft); } .tl { width: 100%; height: auto; } .tl-win { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; } .tl-rev { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; } .tl-tick { stroke: var(--ink); stroke-width: 2; } .tl-stop { fill: var(--ground); stroke: var(--ink); stroke-width: 4; } .tl-dot { fill: var(--ink); } .tl-brk { fill: none; stroke: var(--ink); stroke-width: 2.5; } .tl-l { font: 800 26px var(--f-display); fill: var(--ink); } .tl-t { font: 600 22px var(--f-body); fill: var(--ink); } .tl-s { font: 400 22px var(--f-body); fill: var(--muted); } .plate .tl-win { stroke: var(--ice); } .plate .tl-rev, .plate .tl-tick, .plate .tl-brk { stroke: var(--plate-ink); } .plate .tl-stop { fill: var(--plate); stroke: var(--plate-ink); } .plate .tl-dot, .plate .tl-l, .plate .tl-t { fill: var(--plate-ink); } .plate .tl-s { fill: var(--plate-soft); } .bill { width: 100%; max-width: 560px; height: auto; } .b-norm { fill: var(--ink); } .b-norm-t { font: 600 22px var(--f-body); fill: var(--ground); } .b-ex { fill: url(#b-hatch); stroke: var(--ink); stroke-width: 2.5; } .b-hatch-l { stroke: var(--ink); stroke-width: 3; } .b-off { opacity: .32; } .b-base { stroke: var(--ink); stroke-width: 2; } .b-brk { fill: none; stroke: var(--ink); stroke-width: 2.5; } .b-l { font: 800 24px var(--f-display); fill: var(--ink); } .b-t { font: 600 22px var(--f-body); fill: var(--muted); } .wc { width: 100%; height: auto; } .wc-body { fill: var(--card); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .wc-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .wc-thin { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 4; } .wc-water { fill: var(--ice); stroke: none; } .wc-air { fill: var(--card); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; } .wc-flow { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .wc-head { fill: var(--ink); } .wc-name { font: 800 22px var(--f-display); fill: var(--ink); text-transform: uppercase; letter-spacing: .01em; } .wc-t { font: 500 15px var(--f-body); fill: var(--muted); } .wc-tb { font: 700 15px var(--f-body); fill: var(--ink); } .plate .wc-body, .plate .wc-air { fill: var(--plate); stroke: var(--plate-ink); } .plate .wc-line, .plate .wc-flow { stroke: var(--plate-ink); } .plate .wc-thin { stroke: var(--plate-dim); } .plate .wc-head, .plate .wc-name, .plate .wc-tb { fill: var(--plate-ink); } .plate .wc-t { fill: var(--plate-soft); } .cdf { width: 100%; max-width: 600px; height: auto; } .cd-grid { stroke: var(--line); stroke-width: 1.5; } .cd-axis { stroke: var(--ink); stroke-width: 2; } .cd-line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; } .cd-dot { fill: var(--ground); stroke: var(--ink); stroke-width: 3.5; } .cd-lead { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; } .cd-t { font: 600 22px var(--f-body); fill: var(--muted); } .cd-l { font: 700 22px var(--f-body); fill: var(--ink); } .plate .cd-grid { stroke: var(--plate-hair); } .plate .cd-axis { stroke: var(--plate-ink); } .plate .cd-line { stroke: var(--ice); } .plate .cd-dot { fill: var(--plate); stroke: var(--plate-ink); } .plate .cd-lead { stroke: var(--plate-soft); } .plate .cd-t { fill: var(--plate-soft); } .plate .cd-l { fill: var(--plate-ink); } .d-page { fill: var(--card); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .d-fold { fill: var(--track); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .d-rule { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; } .d-head { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; } .d-box { fill: none; stroke: var(--ink); stroke-width: 2; } .d-tag { fill: var(--ink); } .d-tt { font: 900 22px var(--f-display); fill: var(--ground); letter-spacing: .02em; } /* 20 --------------------------------------------------------------- Problem pages (city x problem; ds/v2/_problem.html) Each official record stays
    with a bare

    (ranked/ops.py reads it), so it is dressed by its container (.band--rec, .rails, .say, .prob-main) and by the attribute, never by a class of its own. */ /* a short page (a confirmation, a 404) keeps its footer at the bottom of the screen */ body { display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1 0 auto; } .prob-main { display: grid; gap: var(--s7); align-content: start; } .prob-main > section[data-kind] + section[data-kind] { margin-top: 0; } /* the hazard band from a city's shutoff rule (macros.rec_band; problem pages and lists): the fixed stencil label, then the record (its heading as a small title over the rule's own sentences, numbered when there are two), the utility's call, the meter box. The record keeps its
    and bare

    (ranked/ops.py reads them). */ .band--rec .band-in > section[data-kind] { margin-top: var(--s4); border-top: 0; padding-top: 0; } .band--rec .band-in > section[data-kind] > h2 { font: 800 15px/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .06em; } .band-rule { display: grid; gap: var(--s3); margin-top: var(--s2); max-width: 36em; font-size: 17px; line-height: 1.45; } section[data-kind] > .band-rule > p { margin: 0; max-width: none; } .band-rule--steps { counter-reset: step; } .band-rule--steps > p { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s3); } .band-rule--steps > p::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--yellow); font: 900 19px/32px var(--f-display); text-align: center; } @media (min-width: 1024px) { .band--rec .band-in > section[data-kind] { grid-column: 2; grid-row: 1; margin-top: 0; } .band-rule { font-size: 18px; } .band--rec .band-fig { grid-column: 2; grid-row: 2; align-self: start; margin-top: var(--s5); } .band--rec .band-call { grid-column: 3; grid-row: 1 / span 2; } } /* steps as rails: the dash before each rail's heading, the rail's stops instead of the record list's rules */ .rails > section[data-kind] { border-top: 0; padding-top: 0; } .rails > section[data-kind] + section[data-kind] { margin-top: var(--s7); } .two.rails > section[data-kind] + section[data-kind] { margin-top: 0; } .rails > section[data-kind] > h2 { display: flex; align-items: flex-start; gap: var(--s3); } .rails > section[data-kind] > h2::before { content: ""; flex: none; width: 34px; height: 10px; margin-top: .36em; border-radius: 5px; background: var(--ink); } section[data-kind] > ol.rail { margin-top: var(--s4); } section[data-kind] > ol.rail > li { padding: 0 0 var(--s5) 38px; border-top: 0; } section[data-kind] > ol.rail > li:last-child { padding-bottom: 0; } section[data-kind] > ul.dont { margin-top: var(--s5); } section[data-kind] > ul.dont > li { padding: 0; border-top: 0; } /* the freeze normals: the numeral, the season (phones; the desktop plate has it), the table */ section[data-kind] > .big-num { margin-top: var(--s4); } section[data-kind] > .big-num b { font-size: 96px; } .fs-fig { margin-top: var(--s4); } @media (min-width: 1024px) { section[data-kind] > .big-num b { font-size: 120px; } } /* whose side: the utility boundary's two sentences */ section[data-kind] > .split { border-top: 0; margin-top: var(--s3); } .split-text { margin-top: var(--s3); } /* the English phrases on the say card */ .say > section[data-kind] { border-top: 0; padding-top: 0; } .say > section[data-kind] > p { margin-top: var(--s2); color: var(--muted); font-size: 16px; } .say > section[data-kind] > ol > li { padding: var(--s3) 0; } /* a document-led page: the one rule that decides, beside the sign, and the form it names */ .plate-note { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--plate-hair); } .plate-note-label { font: 700 15px/1.3 var(--f-body); color: var(--plate-soft); } .plate-note-text { margin-top: var(--s1); font: 800 26px/1.08 var(--f-display); color: var(--plate-ink); text-wrap: pretty; } .plate-note-act { margin-top: var(--s4); } .plate .btn-ink { background: var(--plate-ink); color: var(--navy); border-color: var(--plate-ink); } @media (min-width: 1024px) { .plate-note { margin-top: 0; padding-top: 0; border-top: 0; } .plate-note-label { font-size: 18px; } .plate-note-text { margin-top: var(--s2); font-size: 44px; } } /* what we don't know, under the sources */ .prov-h { margin-top: var(--s4); font: 700 15px/1.3 var(--f-body); color: var(--muted); } /* the freeze season (design_svg.freeze_season_svg): ink on the ground, ice and white inside .plate */ .fs { width: 100%; height: auto; } .fs-band { fill: var(--ink); } .fs-stem { fill: none; stroke: var(--ink); stroke-width: 2; } .fs-date { font: 800 26px var(--f-display); fill: var(--ink); } .fs-sub { font: 600 15px var(--f-body); fill: var(--muted); } .fs-axis, .fs-tick { stroke: var(--ink); stroke-width: 2; } .fs-m { font: 600 16px var(--f-body); fill: var(--muted); } .plate .fs-band { fill: var(--ice); } .plate .fs-stem { stroke: var(--plate-soft); } .plate .fs-date { fill: var(--plate-ink); font-size: 38px; } .plate .fs-sub { fill: var(--plate-soft); font-size: 18px; } .plate .fs-m { fill: var(--plate-soft); font-size: 18px; } .plate .fs-axis, .plate .fs-tick { stroke: var(--plate-edge); } /* G ---------------------------------------------------------------- Guide sites (ranked/guides.py, ds/v2/_guide.html) The five starter sites' guides, home and own pages (docs/BRAND.md "Guide sites"). Tokens only, as components.css. Phone first; the main column is .cols's (a 368px side column from 1024px). */ /* a guide's body: sections opened by a ruled h2, prose at a reading measure, tables and notes beside it */ .g-sec { margin-top: var(--s7); } .g-sec:first-child { margin-top: 0; } .g-glance + .g-sec { margin-top: var(--s6); } .g-body { margin-top: var(--s4); } .g-body > * + * { margin-top: var(--s4); } .g-body > p, .g-body > .g-list, .g-body > .g-note, .g-body > .g-h3 { max-width: 42em; } .g-body a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); } .g-h3 { margin-top: var(--s5); } .g-body > .g-h3:first-child { margin-top: 0; } .g-list { padding-left: 1.25em; } .g-list > li + li { margin-top: var(--s2); } .g-list > li::marker { color: var(--muted); } .g-note { border-left: 4px solid var(--ink); padding: var(--s1) 0 var(--s1) var(--s4); } .g-limits { margin-top: var(--s4); color: var(--muted); font-size: var(--t-small); line-height: 1.5; max-width: 48em; } /* a reference table: the caption above, the table in its own scroller so a wide one never widens the page */ .g-table { margin-top: var(--s5); } .g-table figcaption { font-size: var(--t-small); line-height: 1.45; color: var(--muted); max-width: 48em; } .g-scroll { margin-top: var(--s3); overflow-x: auto; border-top: 2px solid var(--ink); } .g-scroll:focus-visible { outline-offset: 4px; } .g-scroll table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.45; } .g-scroll th, .g-scroll td { padding: var(--s3) var(--s3) var(--s3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .g-scroll thead th { font-size: var(--t-micro); font-weight: 700; color: var(--muted); white-space: nowrap; border-bottom: 2px solid var(--ink); } .g-scroll tbody th { font-weight: 700; min-width: 7em; } .g-scroll--wide table { min-width: 40em; } /* four columns or more: scroll rather than squeeze */ .g-scroll td.g-blank, .g-scroll th.g-blank { border-bottom: 1px dashed var(--line-strong); min-width: 8em; } @media (min-width: 1024px) { .g-scroll th, .g-scroll td { padding-right: var(--s4); } } /* what you're deciding, and the one action: a card at the head of the main column */ .g-glance { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-card); padding: var(--s4); } .g-glance > p { margin-top: var(--s2); } .g-glance .act { margin-top: var(--s4); } .g-glance .btn { white-space: normal; text-align: left; } @media (min-width: 1024px) { .g-glance { padding: var(--s5); } } /* the outside pages to check (side column) and the sources (full width, numbered, two columns on desktop) */ .g-checks { list-style: none; margin-top: var(--s4); border-top: 4px solid var(--ink); } .g-checks > li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .g-kind { display: block; font: 400 var(--t-micro)/1.3 var(--f-mono); color: var(--muted); } .g-checks a { display: inline-block; margin-top: var(--s1); color: var(--ink); font-weight: 700; line-height: 1.35; text-decoration-color: var(--line-strong); } .g-checks p { margin-top: var(--s2); font-size: var(--t-small); line-height: 1.45; color: var(--muted); } .g-host { font-size: var(--t-micro); color: var(--muted); overflow-wrap: anywhere; } .g-checks .g-host { display: block; margin-top: var(--s1); font-family: var(--f-mono); } .g-sources { list-style: decimal; padding-left: 1.75em; margin-top: var(--s4); } .g-sources li { break-inside: avoid; } .g-sources a { overflow-wrap: anywhere; } @media (min-width: 1024px) { .g-sources { columns: 2; column-gap: var(--s8); } } /* the home: every guide by topic, two or three columns of questions; the numbered facts */ .g-topics { display: grid; gap: var(--s7); margin-top: var(--s6); } @media (min-width: 1024px) { .g-topics { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s7) var(--s8); align-items: start; } } .g-topic > .lede { margin-top: var(--s2); } .g-qa { list-style: none; margin-top: var(--s4); border-top: 2px solid var(--ink); } .g-qa > li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .g-qa a { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); text-decoration-color: var(--line-strong); } .g-qa a:hover { text-decoration-color: currentColor; } .g-qa p { margin-top: var(--s1); font-size: var(--t-small); line-height: 1.45; color: var(--muted); } .g-facts { list-style: none; margin-top: var(--s5); border-top: 2px solid var(--ink); } .g-facts > li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .g-facts p { max-width: 42em; } .g-facts a { color: var(--ink); font-weight: 600; } /* a drawing a guide's own values support: the SD card's rows of contacts (guides.sd_rows_svg). Ink on the ground, white inside the plate. */ .gsd { width: 100%; height: auto; max-width: 400px; margin: 0 auto; } .plate-map .gsd { max-width: 380px; } .gsd-body { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; } .gsd-row { fill: var(--ink); } .gsd-row--more { fill: none; stroke: var(--ink); stroke-width: 2; } .gsd-lock { fill: var(--track); stroke: var(--line-strong); stroke-width: 1.5; } .gsd-n { font: 900 34px var(--f-display); fill: var(--ink); } .gsd-t { font: 400 18px var(--f-mono); fill: var(--muted); } .plate .gsd-body { fill: var(--plate-land-b); stroke: var(--plate-ink); } .plate .gsd-row { fill: var(--plate-ink); } .plate .gsd-row--more { fill: none; stroke: var(--ice); } .plate .gsd-lock { fill: var(--plate-land-a); stroke: var(--plate-rule); } .plate .gsd-n { fill: var(--plate-ink); } .plate .gsd-t { fill: var(--plate-soft); } /* RANKED brand v2: the product pages (ranked/product, camerasranked.com; macros in ds/v2/_product.html). Reads the tokens only, like components.css; ranked/design.py bundles it after components.css into the v2 bundle. Sections: P1 plate (code numerals, the drawing in two copies, the message screen), P2 drawings, P3 the pick and the differences, P4 where it sits and what it fits, P5 comparisons, models and folded lists, P6 spec sheet, numbered sources and tables, P7 families on one axis. */ /* P1 ---------------------------------------------------------------- Plate */ /* the code numerals: a model's code or a range as the mast, its full name small under it */ .plate-code { display: block; font: 900 clamp(76px, 24vw, 104px)/.82 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; } .plate-code--md { font-size: clamp(56px, 16vw, 72px); line-height: .86; } .plate-code small { display: block; font: 800 20px/1.1 var(--f-display); letter-spacing: .01em; color: var(--plate-soft); margin: var(--s2) 0 var(--s3); overflow-wrap: normal; } .plate-code .code-brand { margin: 0 0 var(--s1); } @media (min-width: 1024px) { .plate-code { font-size: 160px; } .plate-code--md { font-size: 112px; } .plate-code small { font-size: 26px; } } /* compare plate: "vs" on a hairline between two code numerals */ .code-vs { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s2); font: 800 20px/1 var(--f-display); color: var(--plate-soft); } .code-vs::after { content: ""; flex: 1; border-top: 1px solid var(--plate-hair); } @media (min-width: 1024px) { .code-vs { font-size: 26px; } } /* the plate figure: the drawing in the right half on desktop; on phones the same drawing comes again straight after the plate, ink on the ground (.chart--lead), so the phone plate stays short */ .plate-fig { margin: var(--s4) 0 0; } .plate-fig figcaption { font-size: var(--t-micro); line-height: 1.35; color: var(--plate-soft); margin-top: var(--s2); } .plate-fig svg { display: block; margin: 0 auto; } @media (min-width: 1024px) { .plate-fig { margin: 0; } } .chart--lead > svg { display: block; max-width: 400px; margin: var(--s3) auto 0; } /* the plate's key facts on the navy */ .plate .facts { margin-top: var(--s4); } .plate .facts b { white-space: nowrap; } /* a value and its unit on one line ("24.5 MP") */ /* the message screen (a message page): the h1 is the message, laid over the drawn screen; the answer follows */ .lcd { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; } .lcd-cam { grid-area: 1 / 1; width: 100%; height: auto; margin-top: var(--s2); } .lcd-h1 { grid-area: 1 / 1; align-self: start; display: flex; align-items: center; justify-content: center; margin: calc(var(--s2) + 15%) 33.2% 0 8.7%; aspect-ratio: 372 / 248; padding: 0 4%; overflow: hidden; font: 700 7.4cqi/1.12 var(--f-mono); letter-spacing: -.01em; color: var(--lcd-ink); text-align: center; text-wrap: balance; overflow-wrap: anywhere; } .lcd-h1--long { font-size: 5.2cqi; } .lcd-h1--longer { font-size: 4cqi; } .lcd [data-answer] { margin-top: var(--s4); } .cam-body { fill: var(--plate-land-b); stroke: var(--plate-ink); stroke-width: 3; } .cam-evf { fill: var(--plate-land-a); stroke: var(--plate-ink); stroke-width: 3; } .cam-bezel { fill: var(--lcd-bezel); stroke: var(--plate-stroke); stroke-width: 2; } .cam-screen { fill: var(--lcd-screen); } .cam-ctl { fill: var(--plate-land-a); stroke: var(--plate-ink); stroke-width: 2.5; } .cam-dot { fill: var(--plate-ink); } .cam-icon { fill: none; stroke: var(--ice); stroke-width: 2.5; stroke-linejoin: round; } .cam-icon-t { font: 900 30px var(--f-display); fill: var(--ice); } .cam-scan { stroke: var(--ice-scan); stroke-width: 1; } /* the actions row straight under the plate */ .act--lead { margin-top: 0; } /* P2 ---------------------------------------------------------------- Drawings (ranked/design_svg.py, product section) */ /* a barrel to scale: side-on or standing, one scale for every item on the page, dimension lines in mono */ .lens { width: 100%; max-width: 400px; height: auto; } @media (min-width: 1024px) { .lens--up { max-width: 480px; } } .ln-a { fill: var(--ink); } .ln-b { fill: none; stroke: var(--ink); stroke-width: 2.5; } .ln-mount { opacity: .85; } .ln-ring { fill: none; stroke: var(--ground); stroke-width: 2; } .ln-ring-b { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .5; } .ln-rib { stroke: var(--ground); stroke-width: 1.2; } .ln-rib-b { stroke: var(--ink); stroke-width: 1; opacity: .55; } .ln-thread { stroke: var(--yellow); stroke-width: 4; } .ln-dim { fill: none; stroke: var(--muted); stroke-width: 1.5; } .ln-dt { font: 400 19px var(--f-mono); fill: var(--ink); } .ln-plus { font-weight: 700; } .ln-over { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; } .ln-name { font: 700 20px var(--f-body); fill: var(--ink); } .ln-w { font: 400 18px var(--f-mono); fill: var(--muted); } .ln-base { stroke: var(--muted); stroke-width: 2; } .plate .ln-a { fill: var(--ice); } .plate .ln-b { stroke: var(--plate-ink); } .plate .ln-ring, .plate .ln-rib { stroke: var(--plate); } .plate .ln-ring-b { stroke: var(--plate-ink); } .plate .ln-rib-b { stroke: var(--plate-ink); opacity: .5; } .plate .ln-dim { stroke: var(--plate-stroke); } .plate .ln-dt, .plate .ln-name { fill: var(--plate-ink); } .plate .ln-w { fill: var(--plate-soft); } .plate .ln-over { stroke: var(--plate-ink); } .plate .ln-base { stroke: var(--plate-stroke-base); } /* frames to scale: the reference frame and each crop factor's frame inside it */ .frame { width: 100%; max-width: 400px; height: auto; } .fr-ref { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 4; } .fr-a { fill: var(--track); stroke: var(--ink); stroke-width: 2.5; } .fr-b { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 5 3; } .fr-rl { font: 400 16px var(--f-mono); fill: var(--muted); } .fr-l { font: 600 17px var(--f-body); fill: var(--ink); } .plate .fr-ref { stroke: var(--plate-stroke-ref); } .plate .fr-a { fill: var(--ice-tint); stroke: var(--ice); } .plate .fr-b { stroke: var(--plate-ink); } .plate .fr-rl { fill: var(--plate-soft); } .plate .fr-l { fill: var(--plate-ink); } /* two ranges on one log axis */ .rg { width: 100%; max-width: 480px; height: auto; } .rg-a { fill: var(--ink); } .rg-b { fill: none; stroke: var(--ink); stroke-width: 2.5; } .rg-x { fill: var(--ink); } .rg-grid { stroke: var(--line); stroke-width: 1; } .rg-axis { stroke: var(--ink); stroke-width: 1.5; } .rg-t { font: 400 15px var(--f-mono); fill: var(--muted); } .rg-n { font: 700 17px var(--f-body); fill: var(--ink); } .rg-l { font: 700 16px var(--f-body); fill: var(--ink); } /* P3 ---------------------------------------------------------------- The pick in points, the differences */ .pick { display: grid; } .score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--s2); } .score-side { padding: var(--s3) var(--s3) var(--s4) 0; } .score-side + .score-side { padding-left: var(--s3); border-left: 1px solid var(--line); } .score-name { font: 700 17px/1.25 var(--f-body); } .score .pts { text-align: left; margin-top: var(--s3); } .score .pts b { font-size: 64px; } .score .pts span { position: static; width: auto; height: auto; clip-path: none; margin-top: var(--s2); } .score-why { margin-top: var(--s2); font-size: 15px; line-height: 1.4; color: var(--muted); } .score-why b { color: var(--ink); } .score-rule { margin-top: var(--s3); font-size: 15px; line-height: 1.45; color: var(--muted); } .score-rule a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); } @media (min-width: 1024px) { .pick { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--s8); align-items: end; } .pick .score-rule { margin-top: 0; } .score-side { padding: var(--s4) var(--s5) var(--s5) 0; } .score-side + .score-side { padding-left: var(--s5); } .score-name { font-size: 20px; } .score .pts b { font-size: 88px; } } /* differences in the points-row grammar, without ranks */ .diffs { list-style: none; } .diff-cols { display: none; } .diff { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); grid-template-areas: "id pts" "v v" "gap gap"; padding: 14px 0; border-bottom: 1px solid var(--line); } .diff-id { grid-area: id; min-width: 0; } .diff-id h3 { font-size: 19px; } .diff-rule { font-size: var(--t-micro); line-height: 1.35; color: var(--muted); margin-top: 2px; } .diff-v { grid-area: v; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); margin-top: var(--s2); } .diff-v > span { display: block; font: 400 18px/1.3 var(--f-body); font-variant-numeric: tabular-nums; } .diff-k { display: block; font-size: var(--t-micro); color: var(--muted); } .diff-v .ok { font-weight: 700; padding-left: 0; padding-right: 20px; } .diff-v .ok::before { left: auto; right: 4px; top: .15em; } .diff-gap { grid-area: gap; margin-top: var(--s2); } .diff-gap svg { display: block; width: 100%; height: 12px; } .diff-gap p { margin-top: 4px; font-size: var(--t-micro); line-height: 1.35; color: var(--muted); } .diff-gap p b { color: var(--ink); } .gp-track { fill: var(--track); } .gp-bar { fill: var(--ink); } .gp-under { fill: var(--line-strong); } .gp-free { fill: var(--dot); } .gp-tick { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 2; } .diff .pts b { font-size: 40px; } .diff .pts span { position: static; width: auto; height: auto; clip-path: none; margin-top: 4px; } .diff--off .pts b { color: var(--muted); } .diff--free .pts span { margin-top: 0; } sup.fn { font: 600 14px/0 var(--f-body); margin-left: 1px; } sup.fn a { color: var(--muted); text-decoration: none; padding: 0 2px; } @media (min-width: 1024px) { .diff-cols, .diff { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 112px; column-gap: var(--s5); } .diff-cols { display: grid; grid-template-areas: "id v gap pts"; align-items: end; padding: var(--s3) 0 var(--s2); border-bottom: 2px solid var(--ink); font-size: var(--t-micro); font-weight: 600; color: var(--muted); } .diff-cols .dc-v { grid-area: v; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); } .diff-cols .dc-gap { grid-area: gap; } .diff-cols .dc-pts { grid-area: pts; text-align: right; } .diff { grid-template-areas: "id v gap pts"; align-items: start; padding: var(--s4) 0; } .diff-v, .diff-gap { margin-top: 2px; } .diff-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .diff .pts b { font-size: 48px; } } /* same on both: one muted line of shared specs, not a table */ .same-h { margin-top: var(--s5); font-size: 17px; } .same { display: flex; flex-wrap: wrap; row-gap: var(--s1); overflow: hidden; margin: var(--s2) 0 0 -13px; list-style: none; font-size: 16px; line-height: 1.4; } .same li { margin-left: -1px; padding: 0 12px; border-left: 1px solid var(--line-strong); } .same b { font-weight: 600; } /* P4 ---------------------------------------------------------------- Where it sits, what it fits */ .ctx { list-style: none; margin-top: var(--s4); } .ctx > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "s s" "e e"; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .ctx-k { grid-area: k; font-weight: 700; } .ctx-v { grid-area: v; font: 900 30px/1 var(--f-display); } .ctx svg { grid-area: s; width: 100%; height: 30px; margin-top: var(--s2); } .ctx-ends { grid-area: e; display: flex; justify-content: space-between; gap: var(--s3); margin-top: 4px; font-size: var(--t-micro); line-height: 1.3; color: var(--muted); } .ctx-ends span:last-child { text-align: right; } .cx-track { fill: var(--track); } .cx-peer { stroke: var(--dot); stroke-width: 2; } .cx-this { stroke: var(--ink); stroke-width: 5; } @media (min-width: 1024px) { .ctx > li { grid-template-columns: 200px 150px minmax(0, 1fr); grid-template-areas: "k v s" "k v e"; column-gap: var(--s5); align-items: center; } .ctx svg { margin-top: 0; } } .fit { list-style: none; margin-top: var(--s4); border-top: 4px solid var(--ink); } .fit > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .fit-state { align-self: start; display: grid; place-items: center; min-height: 44px; padding: 4px; border-radius: var(--r-ctl); font: 800 17px/1 var(--f-display); text-align: center; } .fit--yes .fit-state { background: var(--ink); color: var(--ground); } .fit--limits .fit-state { border: 2px solid var(--ink); color: var(--ink); } .fit--unk .fit-state { border: 2px dashed var(--muted); color: var(--muted); } /* a value not stated: no claim */ .fit-body { min-width: 0; } .fit-body h3 { font-size: 19px; } .fit-body > p { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--muted); } .fit-body .models { margin-top: var(--s3); } .fit a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); } @media (min-width: 1024px) { .fit > li { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s5); } .fit-state { min-height: 52px; font-size: 19px; } } /* P5 ---------------------------------------------------------------- Comparisons, models, folded lists */ .cmp { list-style: none; margin-top: var(--s4); border-top: 4px solid var(--ink); } .cmp > li { padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); } .cmp a { display: block; color: var(--ink); text-decoration: none; font: 800 24px/1.05 var(--f-display); } .cmp a:hover .cmp-n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } .cmp p { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--muted); } .cmp p b { color: var(--ink); } @media (min-width: 1024px) { .cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); } .cmp a { font-size: 28px; } } .models { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .models li { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); font-size: 15px; line-height: 1.25; } .models a { color: var(--ink); text-decoration-color: var(--line-strong); } .model-group { padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .model-group h3 { font-size: 17px; margin-bottom: var(--s2); } .model-group h3 span { font-weight: 400; color: var(--muted); } .model-group > p { margin-bottom: var(--s3); font-size: 16px; line-height: 1.45; } .more { margin-top: var(--s3); border-bottom: 1px solid var(--line); } .more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; cursor: pointer; list-style: none; font-weight: 700; } .more > summary::-webkit-details-marker { display: none; } .more > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-3px); } .more[open] > summary::after { transform: rotate(-135deg) translateY(-3px); } .more summary span { margin-left: auto; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; } .more-list { list-style: none; padding-bottom: var(--s4); font-size: 16px; line-height: 1.35; } .more-list li { padding: 6px 0; } .more-list a { color: var(--ink); text-decoration-color: var(--line-strong); } .more > .bars { margin-top: calc(-1 * var(--s2)); } .more-h { margin-top: var(--s4); font-size: 17px; } @media (min-width: 1024px) { .more-list { columns: 3; column-gap: var(--s6); } .more-list li { break-inside: avoid; } } .finder { margin-top: var(--s4); border-top: 4px solid var(--ink); } .finder .more { margin-top: 0; } .finder .models { padding: var(--s1) 0 var(--s4); } @media (min-width: 1024px) { .finder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); align-items: start; } } .qa { list-style: none; margin-top: var(--s4); border-top: 4px solid var(--ink); } .qa > li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .qa h3 { font-size: 19px; line-height: 1.3; } .qa h3 a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: .2em; } .qa p { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--muted); } /* P6 ---------------------------------------------------------------- Spec sheet, numbered sources, tables */ .specs { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: var(--s3) 0 0; border-top: 2px solid var(--ink); } .specs dt, .specs dd { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.35; } .specs dt { color: var(--muted); font-size: 16px; padding-right: var(--s3); } .specs dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .sources--num { list-style: decimal; padding-left: 1.5em; } .sources--num li::marker { color: var(--ink); font-weight: 700; } .sources--num a { overflow-wrap: anywhere; } /* a link named by its address never widens the page */ .ptable-wrap { margin-top: var(--s4); overflow-x: auto; } .ptable { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums; } .ptable th, .ptable td { padding: 10px var(--s3) 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .ptable thead th { font-size: var(--t-micro); font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); } .ptable tbody th { font-weight: 700; } .ptable a { color: var(--ink); text-decoration-color: var(--line-strong); } .ptable td, .ptable th { overflow-wrap: anywhere; } /* a long maker value never widens the page */ .ptable--full tbody th { width: 40%; font-weight: 600; } .ptable--full thead th { overflow-wrap: normal; } /* two products side by side (the key specifications, the makers' full tables), or any row head with two values (a group page's models): on a phone each row's head spans the two values under it, each under its column's name */ @media (max-width: 767px) { .ptable--pair thead tr, .ptable--pair tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); } .ptable--pair thead th:first-child { display: none; } .ptable--pair th, .ptable--pair td { padding-right: 0; } .ptable--pair tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; border-bottom: 0; } .ptable--pair tbody td { padding-top: 2px; } } /* the rows only one maker's table holds, under that product's own heading */ .also h3 { font-size: 17px; } section.also + section.also { margin-top: 0; } /* the grid's gap spaces them, not a record section's sibling margin (components.css, section[data-kind] + section[data-kind]: as specific, earlier in the bundle) */ .also .ptable-wrap { margin-top: var(--s2); } /* a page's blocks: the manuals' notes as a plain list, the steps as a rail (components.css) */ .block-list { list-style: disc; padding-left: 1.2em; margin-top: var(--s3); max-width: 44em; font-size: 16px; line-height: 1.45; } .block-list li + li { margin-top: var(--s2); } .rail em { font-style: normal; font-weight: 700; } /* the page that answers a related question, under a plate's answer */ .see-also { margin-top: var(--s3); font-size: 16px; line-height: 1.4; } .see-also a { font-weight: 600; } .offers p + p { margin-top: var(--s2); } /* P7 ---------------------------------------------------------------- Families on one axis (a section index) */ .plates--fam { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } .plates--fam .plate-tile { padding: 10px; } .plates--fam .plate-tile-name { font-size: 22px; overflow-wrap: normal; margin-top: 8px; } .plates--fam .plate-tile-sub { margin-top: 6px; } @media (min-width: 768px) { .plates--fam { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); } .plates--fam .plate-tile { padding: var(--s3); } .plates--fam .plate-tile-name { font-size: 26px; } } @media (min-width: 1024px) { .plates--fam { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; } .plates--fam .plate-tile-name { font-size: 24px; } } .tile-span { display: block; width: 100%; height: 10px; margin-top: 2px; } .ts-track { fill: var(--plate-hair); } .ts-bar { fill: var(--ice); } .fams > .fam:first-child { padding-top: 0; } .fam { padding-top: var(--s5); } .fam .list-head + .lede { margin-bottom: var(--s2); } .bars { list-style: none; } .bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name meta" "bar bar"; column-gap: var(--s3); padding: 6px 0 7px; border-bottom: 1px solid var(--line); } .bar-name { grid-area: name; min-width: 0; font-size: 16px; line-height: 1.3; font-weight: 600; } a.bar-name { color: var(--ink); text-decoration-color: var(--line-strong); } a.bar-name:hover { text-decoration-color: currentColor; } .bar-meta { grid-area: meta; font-size: var(--t-micro); line-height: 1.3; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; } .bar-svg { grid-area: bar; width: 100%; height: 12px; margin-top: 4px; } .br-grid { stroke: var(--line); stroke-width: 1; } .br-a { fill: var(--ink); } .br-b { fill: var(--card); stroke: var(--ink); stroke-width: 2; } .br-unk { fill: var(--card); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; } .bar-head { display: none; } .bar-axis { position: relative; height: 20px; margin-top: var(--s3); border-bottom: 2px solid var(--ink); font: 400 14px/1 var(--f-mono); color: var(--muted); } .bar-axis span { position: absolute; top: 0; transform: translateX(-50%); } .bar-axis span.at-0 { transform: none; } .bar-axis span.at-100 { transform: translateX(-100%); } .bar-key { margin-top: var(--s5); font-size: var(--t-micro); line-height: 1.45; color: var(--muted); } .bar-key b { color: var(--ink); } @media (min-width: 1024px) { .fams { columns: 2; column-gap: var(--s8); } .fam { break-inside: avoid; padding-top: var(--s7); } .bar-row, .bar-head { grid-template-columns: 216px minmax(0, 1fr); grid-template-areas: "name bar" "meta bar"; column-gap: var(--s4); align-items: center; } .bar-head { display: grid; } .bar-head .bar-axis { grid-column: 2; } .bar-svg { margin-top: 0; } .bar-name { font-size: 15px; } } /* the axis's tick labels at their place, one class a percent (no style attributes: publish.check_site) */ .at-0 { left: 0; } .at-1 { left: 1%; } .at-2 { left: 2%; } .at-3 { left: 3%; } .at-4 { left: 4%; } .at-5 { left: 5%; } .at-6 { left: 6%; } .at-7 { left: 7%; } .at-8 { left: 8%; } .at-9 { left: 9%; } .at-10 { left: 10%; } .at-11 { left: 11%; } .at-12 { left: 12%; } .at-13 { left: 13%; } .at-14 { left: 14%; } .at-15 { left: 15%; } .at-16 { left: 16%; } .at-17 { left: 17%; } .at-18 { left: 18%; } .at-19 { left: 19%; } .at-20 { left: 20%; } .at-21 { left: 21%; } .at-22 { left: 22%; } .at-23 { left: 23%; } .at-24 { left: 24%; } .at-25 { left: 25%; } .at-26 { left: 26%; } .at-27 { left: 27%; } .at-28 { left: 28%; } .at-29 { left: 29%; } .at-30 { left: 30%; } .at-31 { left: 31%; } .at-32 { left: 32%; } .at-33 { left: 33%; } .at-34 { left: 34%; } .at-35 { left: 35%; } .at-36 { left: 36%; } .at-37 { left: 37%; } .at-38 { left: 38%; } .at-39 { left: 39%; } .at-40 { left: 40%; } .at-41 { left: 41%; } .at-42 { left: 42%; } .at-43 { left: 43%; } .at-44 { left: 44%; } .at-45 { left: 45%; } .at-46 { left: 46%; } .at-47 { left: 47%; } .at-48 { left: 48%; } .at-49 { left: 49%; } .at-50 { left: 50%; } .at-51 { left: 51%; } .at-52 { left: 52%; } .at-53 { left: 53%; } .at-54 { left: 54%; } .at-55 { left: 55%; } .at-56 { left: 56%; } .at-57 { left: 57%; } .at-58 { left: 58%; } .at-59 { left: 59%; } .at-60 { left: 60%; } .at-61 { left: 61%; } .at-62 { left: 62%; } .at-63 { left: 63%; } .at-64 { left: 64%; } .at-65 { left: 65%; } .at-66 { left: 66%; } .at-67 { left: 67%; } .at-68 { left: 68%; } .at-69 { left: 69%; } .at-70 { left: 70%; } .at-71 { left: 71%; } .at-72 { left: 72%; } .at-73 { left: 73%; } .at-74 { left: 74%; } .at-75 { left: 75%; } .at-76 { left: 76%; } .at-77 { left: 77%; } .at-78 { left: 78%; } .at-79 { left: 79%; } .at-80 { left: 80%; } .at-81 { left: 81%; } .at-82 { left: 82%; } .at-83 { left: 83%; } .at-84 { left: 84%; } .at-85 { left: 85%; } .at-86 { left: 86%; } .at-87 { left: 87%; } .at-88 { left: 88%; } .at-89 { left: 89%; } .at-90 { left: 90%; } .at-91 { left: 91%; } .at-92 { left: 92%; } .at-93 { left: 93%; } .at-94 { left: 94%; } .at-95 { left: 95%; } .at-96 { left: 96%; } .at-97 { left: 97%; } .at-98 { left: 98%; } .at-99 { left: 99%; } .at-100 { left: 100%; } /* 21 --------------------------------------------------------------- Landing sites (ranked/landing.py, ds/v2/_landing.html) The trade landing (docs/BRAND.md "Trade landing"; docs/LANDING.md): the kit's questions as numbered stops on one line, the trade's labelled schematic when it has one (design_svg.trade_svg), the method card's link. Reads tokens only, like components.css; design.py bundles it after components.css into the v2 stylesheet. */ /* the questions: stops on a line in the kit's order, numbered, linking nowhere (no answer page exists yet) */ .qs { list-style: none; counter-reset: q; margin-top: var(--s5); } .qs > li { counter-increment: q; position: relative; padding: 0 0 var(--s5) 52px; min-height: 36px; } .qs > li::before { content: counter(q); position: absolute; left: 0; top: -3px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--ink); background: var(--ground); color: var(--ink); font: 900 19px/1 var(--f-display); } .qs > li::after { content: ""; position: absolute; left: 16px; top: 30px; bottom: -3px; width: 4px; background: var(--ink); } .qs > li:last-child { padding-bottom: 0; } .qs > li:last-child::after { display: none; } .qs h3 { font: 800 26px/1.04 var(--f-display); text-wrap: balance; } @media (min-width: 1024px) { /* five or fewer: the line laid flat, one column a stop */ .qs--n2, .qs--n3, .qs--n4, .qs--n5 { display: grid; column-gap: var(--s5); } .qs--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qs--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qs--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qs--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .qs--n2 > li, .qs--n3 > li, .qs--n4 > li, .qs--n5 > li { padding: 52px 0 0; } .qs--n2 > li::before, .qs--n3 > li::before, .qs--n4 > li::before, .qs--n5 > li::before { top: 0; } .qs--n2 > li::after, .qs--n3 > li::after, .qs--n4 > li::after, .qs--n5 > li::after { left: 34px; right: calc(-1 * var(--s5)); top: 16px; bottom: auto; width: auto; height: 4px; } .qs h3 { font-size: 30px; } } /* a mast with an accented or tilded capital (ÁRBOL, MÉTODO; macros.plate's accent): room above it for the mark */ .plate-mast--accent { padding-top: .2em; } /* the plate's three facts, held to the answer's measure on a solo plate (a landing plate is solo unless its trade has a drawing) */ .land-facts { max-width: 46em; } /* the method card's one link (a landing has no form, so no filled button) */ .method-side > .method-more { margin-top: var(--s4); } .method-more a { font-weight: 700; color: var(--ink); } /* the card with no formula (a vertical no config ranks: the rule in words): the heading, then the rule, the stamp and the link; on desktop the two halves of the page, like the plate */ @media (min-width: 1024px) { .method--plain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); align-items: start; } } /* a drawn plate's mast scales with its half on desktop, so the 1280px fit landing._fits_half checks (550px, design.MAST and MAST_COLUMNS) holds at every desktop width: the half is (100vw - 180px) / 2, where 180px = 2 x the gutter (32) + 2 x the plate's edge (2) + 2 x its padding (--s6, 32) + the grid gap (--s7, 48). Dividing by 1120 rather than 1100 leaves room for a 20px scrollbar inside 100vw; from 1300px up the min() keeps the comps' size. */ @media (min-width: 1024px) { .land-drawn .plate-mast { font-size: min(172px, calc((100vw - 180px) * 172 / 1120)); } .land-drawn .plate-mast--md { font-size: min(152px, calc((100vw - 180px) * 152 / 1120)); } .land-drawn .plate-mast--sm { font-size: min(120px, calc((100vw - 180px) * 120 / 1120)); } .land-drawn .plate-mast--xs { font-size: min(100px, calc((100vw - 180px) * 100 / 1120)); } } /* the lockup (header and footer) on a 320px phone: the longest brands (COMMERCIAL KITCHEN RANKED) fit at 19px, not at 25px, which pushed the page 14 to 38px wide */ @media (max-width: 359px) { .lockup-word { font-size: 19px; } } /* the trade's labelled schematic: ink on the ground, white inside the plate; a phone copy after the plate */ .draw { width: 100%; height: auto; } .draw-fig { margin-top: var(--s5); } .draw-fig figcaption { margin-top: var(--s2); font-size: var(--t-micro); line-height: 1.4; color: var(--muted); } .plate .draw-fig figcaption { color: var(--plate-soft); } @media (min-width: 1024px) { .plate .draw-fig { margin-top: 0; } } .dr-grade { stroke: var(--line-strong); stroke-width: 2; } .dr-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .dr-heavy { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .dr-thin { fill: none; stroke: var(--ink); stroke-width: 1.5; } .dr-soft { fill: var(--track); } .dr-fill { fill: var(--ink); } .dr-cut { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 6; } .dr-lead { fill: none; stroke: var(--muted); stroke-width: 1.5; } .dr-t { font: 600 24px var(--f-body); fill: var(--ink); } .plate .dr-grade { stroke: var(--plate-hair); } .plate .dr-line, .plate .dr-heavy, .plate .dr-thin { stroke: var(--plate-ink); } .plate .dr-soft { fill: var(--plate-land-b); } .plate .dr-fill { fill: var(--plate-ink); } .plate .dr-cut { stroke: var(--ice); } .plate .dr-lead { stroke: var(--plate-soft); } .plate .dr-t { fill: var(--plate-ink); }