/* ========================================================================== HORRY COUNTY MUSEUM — v3 TOKENS v3 sits between the two earlier prototypes. v1 was a dark editorial site of its own invention; v2 was a close copy of www.horrycountysc.gov, which made the museum look like a service page. v3 keeps the county's palette, type and chrome - so it still reads as a county property - and gives the museum back the one thing v1 had that v2 lost: a dark gallery band, used for the hero and for two features, with photography carrying it. Every brand value below is verbatim from HorryCountySCGov.WebV9/wwwroot/css_v2/controls/control.css and controls/control-color.css. The county CSS is not linked, for the same reason as in v2: control.css opens with `* { display: flex }`, which rewrites the display type of every element and collapses a standalone page. ========================================================================== */ :root { /* --- control.css: grays ------------------------------------------------ */ --lightest: #ffffff; --gray-off-white: #f2f2f2; --gray-lt: #bbb; --gray-med: #767676; --gray-dark: #333; --darkest: #000000; /* --- control.css: blue ramp ------------------------------------------- */ --blue-1: #E6F9FF; --blue-2: #B8EAFB; --blue-3: #7ACBE5; --blue-4: #4DB8DB; --blue-5: #0099CC; --blue-6: #017CA4; --blue-7: #025B7B; --blue-8: #063951; --blue-9: #002434; /* --- control.css: yellow ramp (the county's .visitor palette) --------- */ --yellow-1: #FFF3D1; --yellow-2: #FFE398; --yellow-3: #F9D46E; --yellow-4: #FFCA3D; --yellow-5: #FFBD0A; --yellow-6: #C89100; --yellow-7: #976F00; --yellow-8: #755700; --yellow-9: #553F00; /* --- control.css: other ramps ---------------------------------------- */ --green-5: #00CC90; --green-7: #017F5A; --red-orange-5: #FA5709; --red-orange-7: #9F3502; /* --- control.css: shadows, shapes, measurements ---------------------- */ --shadow: rgba(35, 35, 35, .36); --shadow-lt: rgba(35, 35, 35, .18); --highlight: rgba(255, 255, 255, .89); --dropshadow-sm: 0 1px 3px 0px var(--shadow-lt); --float: -1rem 1rem 1rem 0px var(--shadow); --float-close: 0 0 .25rem 0px var(--shadow); --concave-sm: inset 0px 2px 2px var(--shadow), inset 0px -2px 2px var(--highlight); --circle: 1000px; --max-web: 1280px; /* --- control-nav.css -------------------------------------------------- */ --max-width: 80rem; --nav-border: 2px; --nav-height: 3rem; --nav-padding: 1rem; --nav-secondary: calc(var(--nav-height) * 1.5); /* --- control-footer.css: the county footer is #222, not navy --------- */ --footer: #222; --ease: cubic-bezier(.4, 0, .2, 1); } /* control-color.css — `body.light.government` resolves the semantic layer. */ body { --color-1: var(--blue-1); --color-2: var(--blue-2); --color-3: var(--blue-3); --color-4: var(--blue-4); --color-5: var(--blue-5); --color-6: var(--blue-6); --color-7: var(--blue-7); --color-8: var(--blue-8); --color-9: var(--blue-9); --compare: var(--gray-off-white); --compare-less: var(--gray-lt); --compare-more: var(--lightest); --contrast: var(--gray-dark); --contrast-less: var(--gray-med); --contrast-more: var(--darkest); --bg-color: var(--lightest); } /* ========================================================================== DERIVED TOKENS — required to hold 4.5:1 on all text Measured against the grounds they actually sit on: --gray-med #767676 on --compare #f2f2f2 = 4.06:1 FAILS --color-6 #017CA4 on --compare #f2f2f2 = 4.24:1 FAILS --color-6 #017CA4 on white = 4.75:1 passes So --color-6 carries fills, borders and rules only, and these carry text. Each is a color-mix of county tokens - no new hex values enter the system. ========================================================================== */ :root { /* 4.66:1 on #f2f2f2, 5.19:1 on white */ --muted: color-mix(in srgb, var(--gray-med) 88%, var(--darkest)); /* #025B7B - 6.74:1 on #f2f2f2, 7.54:1 on white */ --accent-text: var(--blue-7); /* text on the yellow ramp: --blue-9 on --yellow-4 is 8.6:1 */ --on-yellow: var(--blue-9); /* ---- the gallery band ------------------------------------------------ v1's one good idea, kept. Deliberately dark on a light site, and its own small palette so nothing inherits the wrong ink into it. */ --gal: var(--blue-9); --gal-2: var(--blue-8); --gal-ink: var(--lightest); /* 15.9:1 on --gal */ --gal-ink-2: var(--blue-1); /* 15.0:1 on --gal */ --gal-ink-3: var(--blue-3); /* 8.9:1 on --gal */ --gal-accent: var(--yellow-4); /* 10.7:1 on --gal */ --gal-hair: color-mix(in srgb, var(--blue-1) 22%, transparent); /* ---- hairlines and lift on the light ground ------------------------- */ --hair: color-mix(in srgb, var(--blue-9) 13%, transparent); --hair-soft: color-mix(in srgb, var(--blue-9) 7%, transparent); --hair-ui: color-mix(in srgb, var(--blue-9) 45%, transparent); --lift: 0 1px 2px color-mix(in srgb, var(--blue-9) 8%, transparent), 0 16px 36px -22px color-mix(in srgb, var(--blue-9) 38%, transparent); --wash: color-mix(in srgb, var(--blue-1) 55%, var(--lightest)); --wash-warm: color-mix(in srgb, var(--yellow-1) 60%, var(--lightest)); /* ---- channel triplets ------------------------------------------------ cssfallback.py can give a static twin to a declaration whose whole value is a color-mix(), but not to one where the color-mix sits inside a `linear-gradient(...)` or a `border: 1px solid ...` shorthand. On a pre-2023 browser those declarations are dropped whole. For a border that is cosmetic. For the hero scrim it is not: without it, white text sits directly on a photograph. So anything load-bearing is written with a channel triplet and a plain rgba() instead, which works in every browser that supports custom properties at all. --blue-9 #002434 --lightest #ffffff */ --gal-rgb: 0, 36, 52; --light-rgb: 255, 255, 255; /* The band scrim only. --gal-rgb is the band's own navy and still fills the .visit-panel tint; the scrim is half that navy and half --darkest, which lets it hold the same worst-case contrast at a lower alpha and so show more of the photograph. Both halves are county tokens - the triplet form is here for the same reason as --gal-rgb, not to smuggle in a new hex. color-mix(in srgb, var(--blue-9) 50%, var(--darkest)) = #00121A */ --scrim-rgb: 0, 18, 26; }