/* ========================================================================== fallslocal.com -- Sioux Falls business directory Operated by ZVARIO LLC, a South Dakota company. No framework. No build step. One stylesheet. Mobile-first. No JavaScript anywhere on the site, and nothing in this file assumes any. ⛔ THE DESIGN BRIEF (2026-07 redesign): commit to the hero. A thin white header bar; a full-bleed photographic hero taking ~85% of the fold with huge centered type and the search bar as the visual centerpiece; then a QUIET centered welcome block on plain paper. Loud, then quiet -- that contrast is the design. The type scale is the other half of it: the hero H1 runs to 72px against an 18px body, which is what makes the page read as designed rather than defaulted. The one local colour cue that is NOT invented: SIOUX QUARTZITE. The falls the city is named for run over pink quartzite, every historic building downtown is faced in it, and it is in all five photographs. Deep quartzite (--quartz-d) is the accent -- the solid search button, card hovers. Pine green stays for links and the footer. ========================================================================== ⛔ WCAG AA CONTRAST -- COMPUTED, NOT EYEBALLED. Ratios below are calculated with the WCAG 2.1 relative-luminance formula (scratchpad/wcag.py; reproducible from the hex values here). AA requires 4.5:1 for body text, 3:1 for large text (>=24px, or >=18.66px bold). Every pair used in this file: --- base surfaces --- --ink #1a1d21 on #ffffff (header) = 16.91:1 AAA (header nav, buttons) --ink #1a1d21 on --paper #fdfcfa = 16.50:1 AAA (body text) --muted #5a6068 on --paper #fdfcfa = 6.19:1 AA (meta, captions) --muted #5a6068 on #ffffff = 6.35:1 AA (placeholder, welcome sub) --link #0b5d51 on --paper #fdfcfa = 7.59:1 AAA (links) --link-h #083f37 on --paper #fdfcfa = 11.53:1 AAA (link hover) --ink #1a1d21 on --panel #f2efe9 = 14.74:1 AAA (text in panels) --muted #5a6068 on --panel #f2efe9 = 5.53:1 AA (meta in panels) --paper #fdfcfa on --pine #12241f = 15.78:1 AAA (footer) --pine-t #cfe3dd on --pine #12241f = 12.09:1 AAA (footer links) #ffffff on --quartz-d #7a2f3e = 9.12:1 AAA (search button) --paper #fdfcfa on --link #0b5d51 = 7.59:1 AAA (primary .btn) --ink #1a1d21 on --amber #f0c05a = 9.98:1 AAA (claim callout, CTA) --quartz-d #7a2f3e on --paper #fdfcfa = 8.89:1 AAA (accent text, counts) --link-h #083f37 on --amber #f0c05a = 6.98:1 AA (links inside callout) --amber #f0c05a on --ink #1a1d21 = 9.98:1 AAA (removal button) ⛔ ONE PAIR IS BANNED AND THE BAN IS ENFORCED BY A RULE FURTHER DOWN: --link-h #083f37 on --link #0b5d51 = 1.52:1 ⛔ UNREADABLE That is what `.claim-callout a` did to `.claim-callout .btn` before this was measured. See the block above `.claim-callout .btn`. --- ⭐ TYPE NEVER SITS ON A PHOTOGRAPH (DAYLIGHT, 2026-07-21) --------------- ⛔ NO PHOTOGRAPH IS EVER DARKENED TO MAKE TEXT READABLE. No filter, no brightness, no opacity, no scrim, no plate. That rule is unchanged and it was always kept. ⭐ AND NOW NO WORD IS LAID OVER A PICTURE AT ALL. Every text-over-photo arrangement on this site has been dismantled: the hero (2026-07-20), and the category mastheads, the homepage section bands and the CTA band (2026-07-21). Words live on --paper; pictures live in their own frames. ⛔ WHY, BECAUSE THIS IS THE WHOLE LESSON OF THIS CODEBASE. When type sits on a photograph the contrast ratio becomes a property of THE PIXELS, so the pixels have to be controlled. That is what happened: 28 band images were generated to a spec demanding "a genuinely unlit black quadrant in the lower left", and CSS clamps kept the glyphs inside it. It measured beautifully (14.03:1 worst case) and it made the site dark -- the homepage bands rendered at 8.4% and 15.6% luminance. The no-darkening rule was honoured to the letter the entire time, because the darkness was baked into the source images. ⭐ A CONTRAST RATIO IS A CONSTRAINT, NOT A GOAL. Optimising for the number produces a black rectangle that scores 18:1. That lesson was recorded at home.html:66 after the hero was fixed, and never applied to the 28 band images generated to exactly the spec it warns about. It is applied everywhere now. ⭐ THE CONSEQUENCE: every ratio on this site is FLAT-ON-FLAT and fixed in this file, so no image can ever change one. --ink on --paper 16.50:1, --muted on --paper 6.19:1, --quartz-d on --paper 8.89:1, --ink on --amber 9.98:1, --paper on --pine 15.78:1. There is nothing left to re-measure when a photograph is swapped, no per-image glyph scan, no object-position that is secretly a contrast control, and no clamp that is secretly a contrast control. Swapping a band image is now purely a question of whether the picture is any good. See IMAGE-SPEC.md. ⛔ IF YOU EVER WANT A SCRIM, THE TYPE HAS CREPT BACK ONTO A PICTURE. Move the type off; do not darken the picture. Note the probe must out-specificity `.btn-add`'s own `!important` colour or the glyphs stay painted and the button scores 1.00:1 against itself -- the probe script handles this. --rule #d6d1c7 on --paper is 1.48:1 and --quartz #e8b4bd on --paper is 1.67:1: borders and rules only, never text. Quartzite for TEXT on paper is --quartz-d #7a2f3e (8.89:1). ⛔ If you change a colour, RECOMPUTE. If you change an image, an object-position or any of the clamps listed above, RE-MEASURE at real glyph positions at BOTH breakpoints -- there is no worst-case shortcut any more, because there is no plate to compute against. ========================================================================== */ :root { --paper: #fdfcfa; --panel: #f2efe9; --ink: #1a1d21; --muted: #5a6068; --link: #0b5d51; --link-h: #083f37; --pine: #12241f; --pine-t: #cfe3dd; --amber: #f0c05a; --rule: #d6d1c7; --hairline:#e7e3da; /* Sioux quartzite. --quartz is a rule/border colour and a sub-line colour over --shade only; --quartz-d is the accent safe for text on paper. */ --quartz: #e8b4bd; --quartz-d: #7a2f3e; --quartz-dd:#5f2430; /* search button hover; darker than --quartz-d, so white on it only gains contrast (9.12:1 floor). */ /* ⛔ --shade IS GONE (2026-07-20) AND MUST NOT COME BACK. It was the opaque plate behind hero and CTA-band type. Every word over a photograph now sits on a genuinely unlit region of the photograph itself, exactly as the category mastheads do. If text over an image does not measure, the answer is a different IMAGE or a tighter width clamp -- never a plate, a scrim or a filter. See the two contrast blocks further down. */ --measure: 68ch; --max: 1080px; --wide: 1280px; /* Spacing rhythm. One scale, used everywhere. */ --s1: .35rem; --s2: .7rem; --s3: 1.1rem; --s4: 1.75rem; --s5: 2.75rem; --s6: 4rem; --s7: 5.5rem; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* System fonts only, deliberately: a webfont is a render-blocking request on a phone with a bad connection, which is exactly the visitor we are optimising for. The serif stack resolves to a real book face on every major platform. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.65; /* 18px base, not 16px: this is a reading page, and older business owners are a meaningful share of the audience. */ } img { max-width: 100%; height: auto; } a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } a:hover, a:focus { color: var(--link-h); } /* Focus is VISIBLE and never removed. The claim and removal forms must be completable by keyboard. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; } .wrap-wide { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; } .skip { position: absolute; left: -9999px; background: var(--paper); color: var(--ink); padding: .75rem 1rem; z-index: 100; } .skip:focus { left: 1rem; top: 1rem; } /* --- header --------------------------------------------------------------- A thin WHITE strip, ~88px on desktop. Wordmark hard left, category nav CENTERED with dropdown carets, search icon + bordered "Add Your Business" on the right, with real horizontal breathing room between the three. ⛔ THE MOBILE MENU IS A
/ AND USES NO JAVASCRIPT. The browser opens and closes it natively; keyboard-operable and screen-reader- announced for free, and it works on the phone with the bad connection this whole site is built for. ⛔ EXACTLY ONE OF THE TWO NAVS IS DISPLAYED, EVER. Below 62em the disclosure is shown and the wide nav is display:none; above 62em the reverse. A closed
hides its slot at the UA level and no CSS on the child can force it open -- a previous build shipped a desktop nav that was INVISIBLE while every geometric probe said it was fine. Two containers, one data source. See base.html. */ .site-header { background: #ffffff; color: var(--ink); border-bottom: 1px solid var(--hairline); } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 4rem; flex-wrap: wrap; } .brand-block { line-height: 1; } .brand { display: block; font-family: var(--serif); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; line-height: 1.05; } .brand:hover, .brand:focus { color: var(--ink); } .brand-sub { display: block; font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; } /* Desktop nav: centered, with CSS-only dropdowns. Hidden below 62em. */ .site-nav-wide { display: none; } /* Right cluster: search icon + bordered CTA. Hidden below 62em (the mobile menu carries its own CTA copy instead). */ .header-right { display: none; } .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--ink); border-radius: 50%; } .icon-link:hover, .icon-link:focus { color: var(--quartz-d); } .icon-link svg { display: block; } /* ⛔ "Add Your Business": the header's one call to action -- a BORDERED button with an arrow glyph, per the reference direction. Ink on white = 16.91:1. It points at the SAME claim flow the listing pages use; there is no second signup path. */ .btn-add { display: inline-block; font-family: var(--sans); font-size: .88rem; font-weight: 600; letter-spacing: .01em; padding: .55rem 1.15rem; background: transparent; color: var(--ink) !important; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; white-space: nowrap; } .btn-add:hover, .btn-add:focus { background: var(--ink); color: #ffffff !important; } .btn-add .arrw { font-family: var(--sans); } /* The mobile disclosure. Second flex item, so it sits to the RIGHT of the wordmark; when open its