/* ── No Kings ───────────────────────────────────────────────────────────── Indivisible's No Kings mobilisation, served on a partner's own hostname. Colour values are the official Brandfolder swatches from brandfolder.com/indivisibleproject/nokings, cross-checked against the live theme tokens on nokings.org and against the logo artwork pixel by pixel. Do not edit the hexes here -- if the brand ships new swatches, re-sync from Brandfolder. See docs/nokings-brand.md. Mix target: ~70% ink · ~25% paper · ~5% gold. Red is the brand's loudest colour and this app cannot spend it: --wait-long is red because the county tells voters a red pin means "over 30 minutes". So red lives in the mark artwork and in --brand-error, and is never a UI ground. The hard constraint this tenant exists under: NON-PARTISAN. No party mark, no party colours, no campaign language, no link to a party site. Indivisible is a 501(c)(4), the No Kings host toolkit forbids joint branding with partisan organisations, and this page carries their domain in the address bar. The app serves a county party too -- on a different hostname, from a shell that carries no brand literal at all. That separation is the whole design; test/tenants.mjs fails the build if it ever leaks. Every token below is required of every tenant; test/tenants.mjs asserts that nothing index.html consumes is missing here. The `-rgb` triplets feed the alpha derivations in index.html's :root and must track their hex partner -- they are the same colour written twice, so change them together. ------------------------------------------------------------------------ */ /* ── Type ───────────────────────────────────────────────────────────────── The two faces nokings.org itself uses, both on Google Fonts under the OFL, self-hosted and subset so the brand does not depend on a font CDN on election day -- and so the CSP can stay default-src 'self' with no font-src exception. The print materials use Lino Gothic and Helvetica Neue Condensed; both are commercial, and neither is substituted for here. See docs/nokings-brand.md for the subsetting recipe. These live here rather than in index.html because they are this brand's typefaces, not the app's: the shell is served on every hostname, and a tenant using system fonts should not carry a rival's @font-face rules. Relative url() resolves against this file, so `fonts/Roboto.woff2` is /tenants/nokings/fonts/Roboto.woff2 with nothing in nginx to configure. */ @font-face { font-family: 'Bowlby One SC'; src: url('fonts/BowlbyOneSC.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto.woff2') format('woff2-variations'), url('fonts/Roboto.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* ── Base palette ───────────────────────────────────────────────── */ /* Ink rather than the swatch's pure #000000: the shell paints large flat panels with this, and a hair off black keeps them from vibrating against the basemap. --brand-primary-deep IS the true black. */ --brand-primary: #0E0E10; /* Ink */ --brand-primary-rgb: 14, 14, 16; --brand-primary-deep: #000000; /* Black, official */ --brand-primary-deep-rgb: 0, 0, 0; --brand-primary-soft: #23232A; --brand-primary-soft-rgb: 35, 35, 42; /* Gold, official swatch. Three golds are live in the brand at once -- #FFBA08 inside the logo file, #FCA311 on the swatch, the placards, the site icon and the web token, and #F9C430 as a second swatch. #FCA311 is the one the brand uses everywhere except inside its own artwork, so it is the interface gold; the artwork keeps its own. See docs/nokings-brand.md. */ --brand-accent: #FCA311; /* Gold */ --brand-accent-rgb: 252, 163, 17; --brand-accent-soft: #F9C430; /* the official second gold */ --brand-surface: #FCFCFB; /* paper */ --brand-surface-rgb: 252, 252, 251; --brand-surface-2: #F2F2F0; --brand-surface-3: #E0E0DC; --brand-muted: #6B6B73; --brand-muted-rgb: 107, 107, 115; /* ── Text on each ground ────────────────────────────────────────── */ --brand-on-primary: #FCFCFB; --brand-on-primary-rgb: 252, 252, 251; --brand-on-surface: #0E0E10; --brand-on-accent: #0E0E10; --brand-on-surface-muted: #4C4C55; /* ── Status ─────────────────────────────────────────────────────── */ /* Brand red is #FF0000, which is 4.0:1 on paper -- under the 4.5:1 an error message has to clear. Darkened to 5.9:1 and kept here only; the mark artwork carries the real red. */ --brand-error: #C2181C; --brand-warn-text: #8A5B00; /* "may be out of date" note */ /* The 15-30 minute bucket. Gold rather than a generic amber, for the same reason tcdp spends its gold here: it is this brand's one warm accent, and it sits correctly between the structural green and red in index.html. Red could not take this slot -- it would make "15-30 minutes" and "over 30 minutes" the same colour. */ --wait-medium: var(--brand-accent); /* ── Type ───────────────────────────────────────────────────────── */ /* @font-face for these is at the top of this file. Roboto covers the kicker as well as body: the brand names exactly two web faces, and index.html already gives every kicker uppercase and 0.08em tracking of its own. */ --brand-font-display: 'Bowlby One SC', 'Roboto', Impact, sans-serif; --brand-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --brand-font-kicker: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; --brand-wordmark-width: 148px; --brand-wordmark-width-sm: 124px; } /* ── Tenant-owned markup ───────────────────────────────────────────────── The wordmark is TYPE, not the official lockup, and the doc says so. The only official vector lockup published is stacked, drawn for light backgrounds, and 2.1 MB with a single usable variant; both wordmark slots here are horizontal strips on ink. So the two slots set "NO KINGS" in the brand's own web heading face, and the official artwork carries the 44px mark, the favicon and the share image, where it fits exactly. Nothing here is drawn: the wordmark is live text, and the gold bar under it in both slots is the shell's own `border-bottom: 3px solid var(--brand-accent)` on .es-brand and #election-card, which every tenant gets. This tenant adds no ornament of its own. */ /* ── The campaign banner in the election card ───────────────────────────── The official "Vote Early" lockup on its dark texture, full-bleed to the edges of the ink plate. It cancels .ec-brand's padding with negative margins rather than the plate losing its padding, so the wordmark beneath keeps its inset. The texture is near-black and so is --brand-primary, so the two meet without a seam. It shows in BOTH modes. There is one election card, and it should look the same whichever mode is selected -- the banner is the collection's masthead here, not per-mode copy. It used to hide itself in Election Day mode, on the grounds that the artwork reads VOTE EARLY; that made one card read as two different cards, which was the worse trade. If the wording is ever a problem on Election Day, the fix is a second, mode-neutral banner asset -- not hiding the masthead. */ .nk-ec-stack { display: block; width: 100%; } .nk-banner { display: block; width: calc(100% + 28px); height: auto; margin: -11px -14px 9px; /* cancels .ec-brand's padding */ border-bottom: 1px solid rgba(var(--brand-on-primary-rgb), 0.10); } @media (max-width: 600px) { /* The card is 214px here; the banner still spans it edge to edge. */ .nk-banner { margin-bottom: 8px; } } /* The wordmark is text inside an , so without this the anchor paints a default underline in the default link colour straight through it. tcdp never needed this rule because its wordmark is an . */ .nk-wordmark-link { display: block; text-decoration: none; color: inherit; } .nk-wordmark { display: block; width: var(--brand-wordmark-width); font-family: var(--brand-font-display); font-weight: 400; /* Bowlby One SC ships one weight */ font-size: 24px; /* "NO KINGS" measures 133px here */ line-height: 1.05; letter-spacing: 0.005em; text-transform: uppercase; color: var(--brand-on-primary); } .nk-wordmark-sm { width: var(--brand-wordmark-width-sm); font-size: 20px; /* 111px in the 124px election card */ } /* The shell sizes .panel-title for a CONDENSED display face. Bowlby One SC is emphatically not one: at the shell's 19px a long county place name -- "Floyd Gunn Jr High / Fine Arts & Dual Language Academy" -- wraps to three lines of ultra-bold caps in a 340px panel, where a condensed face takes two. 15px puts it back to two. Typeface metrics are the brand's business, which is why this lives here and not in the shell, and why it is the only rule in this file that reaches for a shell selector. theme.css is included at the end of , after index.html's