/* Marion County Animal Control — design system * * Inherits the mcema.us civic-document architecture: dark ink surfaces, * monospace eyebrow labels, a Fraunces display face, hairline rules, and * zero border-radius on structural chrome. Retuned for a shelter: the * county seal-gold stays as the institutional voice, and a warmer clay * accent carries the adoption/donation side so "adopt this dog" does not * read like a hazmat advisory. * * BRAND TOKENS ARE SAMPLED FROM THE AGENCY'S OWN ICON SET — the Adoptables, * Rabies, and Support-a-Shelter-Animal images on marioncountyil.gov. They * are the real colors, not a designer's guess, and each was checked against * --ink for WCAG AA before being adopted (see the notes on each token). * * Every brand color on the site resolves through the :root block below, so * retuning the whole estate is a few lines here, NOT a find-and-replace * across the pages. Keep it that way — never hardcode a brand hex below * this block. If the county supplies an official badge with different * values, change them here and the entire site follows. * * Dark-only, deliberately. mcema.us learned this the hard way: a half- * implemented light palette flipped the text tokens while the surfaces * stayed dark, making the page unreadable. Do not add a light block here * unless every surface below gets a light counterpart in the same commit. * * --------------------------------------------------------------------- * READABILITY PASS * --------------------------------------------------------------------- * The first cut of this file was legible in the abstract and tiring in * practice. Three things were wrong, and all three are the same mistake * made in different places — treating a public-information site like a * design portfolio. * * 1. Body text ran 15.5px in --steel-1 (#b5bec9) on #0b0d10. That is * technically AA, but it is a GREY paragraph. Every sentence on this * site is something a resident needs: an address, a holding period, * a 24-hour reporting duty. Body copy is now 17px in a near-cream * that clears AAA, and the muted tone was demoted to captions only. * * 2. Section headings were 12px uppercase mono. At that size a heading * stops out-ranking the paragraph under it, so the page reads as one * continuous grey slab with no way in. Headings now carry the display * serif and real size, with the mono treatment kept as a KICKER above * them — the label voice survives without doing a heading's job. * * 3. The ink ladder was near-neutral blue-black, so cards, tables, and * the page all sat at visually the same depth and the whole thing * looked flat and cheap. The surfaces are now warmed a few degrees * toward the brand amber and separated by wider steps, which is why * a card now reads as an object instead of a rectangle. * * Layout, class names, and DOM structure are UNCHANGED. This is a * material and typographic pass only — no page markup was touched. */ /* ============================================================ TOKENS ============================================================ */ :root { /* Surfaces — ink ladder. Warmed off pure blue-black (hue pulled toward the brand amber) and given wider steps between rungs. Flat neutral greys are what made the first pass look cheap: with only 5 points of luminance between the page and a card, the card never reads as a physical object. */ --ink: #0c0d0f; --ink-1: #14161a; --ink-2: #1c1f25; --ink-3: #262a31; --rule: #343a44; --rule-soft: #23272e; /* Text. --cream is body copy and must stay near-white: 16.9:1 on --ink. --cream-2 is the warm variant for display type. --steel-1 was doing paragraph duty and was too dim for it; it is now a SECONDARY tone (12.2:1) for card body and table cells. --steel is captions and timestamps ONLY — never a full sentence. */ --cream: #f4efe6; --cream-2: #ece0c9; --steel-1: #cdd5de; --steel: #96a1af; /* Institutional voice — sampled from the agency's own Adoptables icon. #cc8430 is their literal brand amber, not an approximation. 6.40:1 on --ink, so it clears WCAG AA for body text, not just large text. --gold-bright (9.94:1) carries every link and hover state, because the base gold on a tinted card surface is closer to the floor. */ --gold: #cc8430; --gold-bright:#f0ac52; --gold-pale: #f7d5a5; /* headings and kickers that must not shout */ /* Action voice. MCAC's palette is effectively single-hue warm amber: their Adoptables (#cc8430) and Support-a-Shelter (#cc8448) icons are nearly the same color, so mapping them to two "different" brand colors would collapse into one and destroy the institutional/action distinction the layout depends on. Instead the second voice is separated by DEPTH, not hue — #c06c00 is the deeper, fully-saturated orange from their own Rabies icon. Still genuinely their brand, but reads unmistakably as "this is a button". 4.99:1 against --ink, and 4.99:1 for --ink text sitting on the fill. */ --clay: #c06c00; --clay-bright:#e08a1a; --clay-deep: #60483c; /* their brown, from the Adoptables illustration */ /* Status */ --ok: #7ade97; --info: #7ab8e4; --warn: #f6a800; --urgent: #e0605a; /* lifted from #b73a32 — the old red failed AA */ /* Tints */ --tint-gold: rgba(204, 132, 48, 0.085); --tint-clay: rgba(192, 108, 0, 0.095); --tint-ok: rgba(122, 222, 151, 0.07); --tint-urgent:rgba(224, 96, 90, 0.085); /* Type */ --font-display: 'Fraunces', 'Source Serif Pro', Georgia, serif; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --font-stamp: 'Special Elite', 'Courier New', monospace; /* Layout */ --pad: clamp(20px, 4vw, 56px); --nav-h: 68px; --measure: 64ch; /* tightened from 68ch — shorter lines are easier to track */ /* Motion. A spring curve, not a CSS default. Heavy at the start, long settle, so anything a person can push on behaves like it has mass. */ --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 0.2, 1); /* Depth. --lip is the hairline catching light on a top edge, --trough the shadow a recessed panel casts on itself. Near-invisible alone; together they are what makes a flat panel read as machined. */ --lip: inset 0 1px 0 rgba(244, 239, 230, 0.06); --trough: inset 0 -1px 0 rgba(0, 0, 0, 0.5); --lift-1: 0 1px 2px rgba(0,0,0,0.32), 0 10px 26px -14px rgba(0,0,0,0.6); --lift-2: 0 2px 5px rgba(0,0,0,0.36), 0 26px 54px -22px rgba(0,0,0,0.78); color-scheme: dark; } /* The toggle is not wired; if a stray data-theme lands, hold the dark palette. */ [data-theme="light"] { color-scheme: dark; } /* ============================================================ RESET + BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-sans); font-feature-settings: "kern", "liga", "calt"; /* 17px, not 15.5px. This site's whole job is being read — often on a phone, often by someone stressed about a missing animal. */ font-size: 17px; line-height: 1.72; background: var(--ink); color: var(--cream); overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } ::selection { background: var(--gold); color: var(--ink); } /* Film grain. Fixed and pointer-events-none, on its own layer, NEVER attached to a scrolling container — a noise texture that scrolls repaints the entire composite layer every frame. Inlined as a data: URI, which the img-src 'self' data: policy in _headers permits. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ ACCESSIBILITY ============================================================ */ .skip-link { position: absolute; left: 8px; top: 8px; z-index: 100000; padding: 10px 16px; background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transform: translateY(-200%); transition: transform 0.18s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--gold-bright); outline-offset: 2px; } :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ CLASSIFICATION BAR — the civic "this is an official page" signal ============================================================ */ .classif { background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); border-bottom: 1px solid rgba(204, 132, 48, 0.45); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-pale); text-align: center; padding: 8px 12px; } .classif b { color: var(--cream); padding: 0 10px; letter-spacing: 0.35em; font-weight: 600; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 900; background: rgba(12,13,15,0.86); /* backdrop-filter stays confined to this sticky bar. Applied to any scrolling region it forces a continuous GPU repaint of everything behind it, which is the most common cause of jank on a blurred site. */ backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(244,239,230,0.03), 0 12px 34px -20px rgba(0,0,0,0.95); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); min-height: var(--nav-h); /* 18px, not 28px. With nine items plus the badge, the wider gap pushed the DONATE button onto a second row at 1440px — the nav read as broken rather than as full. The nav is the densest row on the site; it gets the tightest spacing, and everything else keeps the generous scale. */ display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; } /* The badge SVG paints with currentColor, so the brand color is set HERE and never as an inline style attribute. `style-src 'self'` in _headers blocks inline style ATTRIBUTES, not just