/* ========================================================================== Beaumont Chamber of Commerce: design tokens Direction (Stage 6): "civic editorial". A deep ink-navy surface and a cool paper surface carry the page; a light editorial serif (Newsreader) sets the display type and a calm grotesk (Hanken Grotesk) handles UI and body. The seal is abstracted rather than illustrated: its ring becomes hairline orbit rings, its curved field lines become contour lines, and its colours become stipple dot-fields and soft glows. Blue, sky and green are accents and texture colours; mountain brown is a tile colour; star gold is a sparing highlight only (focus ring on dark, a dot, an underline), never a large button fill. Components must reference these tokens only (no raw hex in components). Contrast notes give the ratio against white (#fff) unless stated. ========================================================================== */ :root { /* ---- Brand scales (palette unchanged from v1; 975 is a derived ink step) */ /* Navy (seal ring). 800 is the brand navy; 950/975 are the "ink" surfaces. */ --navy-975: #000a2b; /* 19.2:1 deepest ink (footer, hero floor) */ --navy-950: #00113f; /* 18.2:1 ink surface */ --navy-900: #001a63; /* 16.0:1 headings */ --navy-800: #00227E; /* 13.5:1 brand */ --navy-700: #0a3594; --navy-600: #1d4aa8; --navy-300: #8fa3d6; --navy-200: #c4d0ee; --navy-100: #e3e9f7; --navy-50: #f2f5fb; /* Chamber blue. 500 is brand; 600 is the accessible text/link shade. */ --blue-700: #01579a; /* 7.6:1 */ --blue-600: #0164a8; /* 6.2:1 links, filled feature button */ --blue-500: #017ACA; /* 4.5:1 brand (large text / fills / glows only) */ --blue-100: #d9ecfb; --blue-50: #eef7fe; /* Sky. Decorative: glows, stipple, contour lines. Never body text on white. */ --sky-500: #0FA1F1; --sky-300: #7ccbf7; /* 8.6:1 on navy-900: icon/check colour on ink */ --sky-100: #dcf1fd; --sky-50: #f1f9fe; /* Field green. 500 is brand (fills, dots); 700 is the text shade. */ --green-900: #074021; --green-800: #0a5c2c; /* 7.9:1 */ --green-700: #0e7a3c; /* 5.4:1 success text, green colour tile */ --green-600: #0B9448; --green-500: #1AAC57; /* brand (fills, dots, glows) */ --green-300: #8fdaae; --green-100: #dbf4e5; --green-50: #effaf3; /* Mountain brown. 700 is brand and passes as text (7.9:1). */ --brown-800: #5e310b; --brown-700: #7E4210; /* brown colour tile (white text 7.9:1) */ --brown-500: #a8652c; --brown-100: #f3e4d6; --brown-50: #fbf5ef; /* Star gold. Sparing highlight only: focus ring on ink, dots, underlines. */ --gold-800: #6b5a00; /* 6.9:1 gold-family text */ --gold-600: #d9c200; --gold-500: #FDE504; /* 14:1 on navy-950 (focus ring on ink) */ --gold-300: #fef07a; --gold-100: #fff8c4; --gold-50: #fffce6; /* Feedback hues */ --red-800: #8f1b12; --red-700: #b42318; /* 6.5:1 */ --red-300: #f1a59e; --red-100: #fde4e1; --red-50: #fef3f2; --amber-800: #8a4b00; /* 6.9:1 */ --amber-300: #f2c46d; --amber-100: #ffefcc; --amber-50: #fff8e8; /* Neutrals: cool, faintly navy-tinted (never warm cream). */ --ink-900: #0f1a33; /* 17:1 body text */ --ink-800: #222e4a; --ink-700: #33405c; /* 10.6:1 */ --ink-600: #4a5672; /* 7.3:1 on white, 6.7:1 on paper: muted text */ --ink-500: #7c87a0; /* 3.6:1 control borders (non-text 3:1) */ --ink-400: #98a2b8; --ink-300: #c3cad8; --ink-200: #dde2ec; --ink-100: #eceff5; --ink-50: #f6f8fb; --white: #ffffff; /* Paper: the cool light surface (never warm cream). */ --paper: #f2f4f8; /* section background; ink-600 6.7:1, blue-600 5.6:1, green-700 4.9:1 */ --paper-2: #e8ecf3; /* deeper paper (wells, table heads on paper) */ /* ---- Semantic colour --------------------------------------------------- */ --color-text: var(--ink-900); --color-text-muted: var(--ink-600); --color-text-subtle: var(--ink-600); --color-heading: var(--navy-900); --color-link: var(--blue-600); --color-link-hover: var(--navy-800); --color-link-visited: var(--navy-600); --surface-page: var(--white); --surface-raised: var(--white); --surface-sunken: var(--paper); --surface-paper: var(--paper); --surface-sky: var(--sky-50); --surface-field: var(--green-50); --surface-inverse: var(--navy-950); /* ink */ --surface-inverse-deep: var(--navy-975); --text-on-inverse: var(--white); /* 18.2:1 on navy-950; 13.5:1 on navy-800 */ --text-on-inverse-muted: #dde5f6; /* 14.4:1 on navy-950; 10.5:1 on navy-800 */ --text-on-inverse-subtle: #a9b6d3; /* 9.0:1 on navy-950; 6.6:1 on navy-800; ~5.8:1 on the hero blue glow; NOT over stipple dots */ --text-on-gold: var(--navy-800); /* 10.7:1 (gold fills are now rare) */ --text-on-green: var(--white); /* on green-700: 5.4:1; on green-800: 7.9:1 */ --border: var(--ink-200); /* hairline */ --border-strong: var(--ink-300); --border-input: var(--ink-500); /* 3.6:1 non-text */ --border-inverse: color-mix(in srgb, var(--white) 16%, transparent); /* hairline on ink */ --color-accent: var(--gold-500); /* highlight only */ --color-primary: var(--navy-800); --color-primary-hover: var(--navy-900); --color-feature: var(--blue-600); /* feature CTA fill on light (white text 6.2:1) */ --color-feature-hover: var(--blue-700); --color-success: var(--green-700); --color-success-bg: var(--green-50); --color-success-border: var(--green-300); --color-warning: var(--amber-800); --color-warning-bg: var(--amber-50); --color-warning-border: var(--amber-300); --color-danger: var(--red-700); --color-danger-bg: var(--red-50); --color-danger-border: var(--red-300); --color-info: var(--blue-700); --color-info-bg: var(--blue-50); --color-info-border: var(--sky-300); --focus-ring: var(--blue-600); /* 6.2:1 on white, 5.6:1 on paper */ --focus-ring-inverse: var(--gold-500); /* 14:1 on ink */ --focus-width: 3px; --focus-offset: 2px; /* ---- Glass, glows, gradients (alpha mixes of palette tokens) ----------- */ --glass-light: color-mix(in srgb, var(--white) 84%, transparent); /* generic light glass. NOTE the header pill does not use it: its ::before is solid white at opacity 0.72 resting / 0.94 scrolled (motion.css); worst case over the ink hero ~#b8bcc9: navy-900 8.3:1, navy-800 7.1:1, ink-700 5.5:1 (ink-600 3.9:1, so not used in the pill) */ --glass-light-strong: color-mix(in srgb, var(--white) 94%, transparent); --glass-light-border: color-mix(in srgb, var(--navy-800) 12%, transparent); --glass-dark: color-mix(in srgb, var(--white) 6%, transparent); /* cards on ink */ --glass-dark-strong: color-mix(in srgb, var(--navy-950) 82%, transparent); --glass-dark-border: color-mix(in srgb, var(--white) 14%, transparent); --glass-blur: 18px; --glow-blue: color-mix(in srgb, var(--blue-500) 38%, transparent); --glow-sky: color-mix(in srgb, var(--sky-500) 24%, transparent); --glow-green: color-mix(in srgb, var(--green-500) 22%, transparent); --glow-gold: color-mix(in srgb, var(--gold-500) 32%, transparent); /* Stipple dots sit under text, so they are kept faint. Worst case is a dot inside the hero's blue glow: sky-300 at 30% there is about rgb(37 99 152): white 6.3:1, --text-on-inverse-muted 5.0:1. (--text-on-inverse-subtle drops to ~3.1:1 on a dot, so never set subtle text over stipple.) */ --stipple-on-ink: color-mix(in srgb, var(--sky-300) 30%, transparent); --stipple-on-paper: color-mix(in srgb, var(--blue-500) 26%, transparent); --contour-on-ink: color-mix(in srgb, var(--white) 10%, transparent); --contour-on-paper: color-mix(in srgb, var(--navy-800) 9%, transparent); /* Underline for key numbers and the stat sentence. */ --gradient-brand: linear-gradient(90deg, var(--blue-500), var(--sky-500) 55%, var(--green-500)); --gradient-ink: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-975) 100%); /* ---- Typography -------------------------------------------------------- */ /* Newsreader (Production Type, built for on-screen news) gives a civic, editorial voice; its optical sizes let one family run light and fine at 72px display and sturdy at 17px reading size. Hanken Grotesk is a calm, open grotesk for UI, labels and body. */ --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-display: var(--font-serif); /* Modular scale, ratio about 1.25, fluid at the top end. */ --step--2: 0.75rem; /* 12px */ --step--1: 0.875rem; /* 14px */ --step-0: 1.0625rem; /* 17px body */ --step-1: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem); /* 19-22 */ --step-2: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); /* 22-28 */ --step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); /* 26-36 */ --step-4: clamp(2rem, 1.55rem + 2vw, 3.125rem); /* 32-50 */ --step-5: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem); /* 40-76 */ --step-6: clamp(2.875rem, 1.5rem + 5.6vw, 6.25rem); /* 46-100 home display */ --weight-light: 300; --weight-display: 340; /* Newsreader display headings */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* legacy; avoid in new work */ --leading-display: 1.02; --leading-tight: 1.08; --leading-snug: 1.22; --leading-normal: 1.6; --leading-loose: 1.7; /* serif prose */ --tracking-display: -0.028em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --measure: 68ch; --measure-narrow: 52ch; /* ---- Spacing (1rem = 16px) -------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --section-space: clamp(3.5rem, 2rem + 5vw, 7rem); --gutter: clamp(1rem, 4vw, 2rem); /* ---- Layout ------------------------------------------------------------ */ --container: 76rem; --container-narrow: 46rem; --container-wide: 88rem; --nav-breakpoint: 68.75em; /* 1100px: documented; media queries use the literal */ /* Floating header pill: inset from the viewport top, overlaps the hero. */ --header-inset: 0.625rem; --header-pill: 3.5rem; --header-space: calc(var(--header-inset) + var(--header-pill)); /* ---- Radius: hierarchy, not one value for everything ------------------ */ --radius-xs: 4px; /* table badges, small marks */ --radius-sm: 10px; /* inputs, alerts, small panels */ --radius-md: 16px; /* cards */ --radius-lg: 28px; /* hero panels, CTA band, dialogs, colour tiles */ --radius-pill: 999px;/* buttons, chips, badges, header */ --radius-round: 50%; /* ---- Shadow: navy-tinted, soft and wide -------------------------------- */ --shadow-1: 0 1px 2px rgba(0, 26, 99, 0.06); --shadow-2: 0 14px 30px -18px rgba(0, 26, 99, 0.28), 0 2px 6px rgba(0, 26, 99, 0.04); --shadow-3: 0 30px 60px -24px rgba(0, 17, 63, 0.38), 0 6px 14px rgba(0, 17, 63, 0.06); --shadow-glass: 0 10px 30px -12px rgba(0, 17, 63, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); --shadow-inset: inset 0 1px 2px rgba(0, 26, 99, 0.06); /* ---- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 380ms; /* ---- Layers ------------------------------------------------------------ */ --z-header: 100; --z-dropdown: 200; --z-overlay: 300; --z-demo: 450; --z-toast: 500; /* ---- Textures (data-URI SVG, file:// safe). All are MASKS: the colour comes from background-color, so one texture tints to any token. ------ */ /* Stipple: an irregular dot-field tile (140px). */ --art-stipple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Ccircle cx='7' cy='12' r='1.1'/%3E%3Ccircle cx='23' cy='5' r='.7'/%3E%3Ccircle cx='38' cy='18' r='1.4'/%3E%3Ccircle cx='52' cy='8' r='.8'/%3E%3Ccircle cx='67' cy='22' r='1'/%3E%3Ccircle cx='81' cy='6' r='1.3'/%3E%3Ccircle cx='96' cy='15' r='.7'/%3E%3Ccircle cx='112' cy='9' r='1.1'/%3E%3Ccircle cx='128' cy='20' r='.9'/%3E%3Ccircle cx='14' cy='31' r='.8'/%3E%3Ccircle cx='30' cy='40' r='1.2'/%3E%3Ccircle cx='45' cy='33' r='.7'/%3E%3Ccircle cx='60' cy='44' r='1.5'/%3E%3Ccircle cx='75' cy='36' r='.8'/%3E%3Ccircle cx='90' cy='47' r='1.1'/%3E%3Ccircle cx='104' cy='34' r='.9'/%3E%3Ccircle cx='120' cy='42' r='1.3'/%3E%3Ccircle cx='134' cy='33' r='.7'/%3E%3Ccircle cx='5' cy='55' r='1.3'/%3E%3Ccircle cx='20' cy='63' r='.9'/%3E%3Ccircle cx='36' cy='58' r='.7'/%3E%3Ccircle cx='51' cy='70' r='1.1'/%3E%3Ccircle cx='66' cy='61' r='.8'/%3E%3Ccircle cx='83' cy='72' r='1.4'/%3E%3Ccircle cx='98' cy='62' r='.7'/%3E%3Ccircle cx='113' cy='71' r='1'/%3E%3Ccircle cx='129' cy='58' r='1.2'/%3E%3Ccircle cx='11' cy='84' r='.7'/%3E%3Ccircle cx='27' cy='92' r='1.4'/%3E%3Ccircle cx='43' cy='82' r='1'/%3E%3Ccircle cx='57' cy='95' r='.7'/%3E%3Ccircle cx='73' cy='88' r='1.2'/%3E%3Ccircle cx='88' cy='99' r='.8'/%3E%3Ccircle cx='103' cy='86' r='1.3'/%3E%3Ccircle cx='119' cy='96' r='.7'/%3E%3Ccircle cx='135' cy='84' r='1'/%3E%3Ccircle cx='6' cy='110' r='1'/%3E%3Ccircle cx='21' cy='118' r='.7'/%3E%3Ccircle cx='37' cy='107' r='1.3'/%3E%3Ccircle cx='50' cy='121' r='.9'/%3E%3Ccircle cx='65' cy='112' r='.7'/%3E%3Ccircle cx='80' cy='124' r='1.1'/%3E%3Ccircle cx='95' cy='113' r='1.4'/%3E%3Ccircle cx='110' cy='125' r='.8'/%3E%3Ccircle cx='126' cy='112' r='1.1'/%3E%3Ccircle cx='15' cy='134' r='1.2'/%3E%3Ccircle cx='31' cy='137' r='.8'/%3E%3Ccircle cx='58' cy='135' r='1'/%3E%3Ccircle cx='86' cy='138' r='.7'/%3E%3Ccircle cx='117' cy='136' r='1.3'/%3E%3C/svg%3E"); /* Contours: the seal's curved field lines as hairline topography (480x240 tile, seamless both ways). */ --art-contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 12C160 -6 320 30 480 12'/%3E%3Cpath d='M0 36C160 14 320 58 480 36'/%3E%3Cpath d='M0 60C160 33 320 87 480 60'/%3E%3Cpath d='M0 84C160 52 320 116 480 84'/%3E%3Cpath d='M0 108C160 72 320 144 480 108'/%3E%3Cpath d='M0 132C160 92 320 172 480 132'/%3E%3Cpath d='M0 156C160 120 320 192 480 156'/%3E%3Cpath d='M0 180C160 148 320 212 480 180'/%3E%3Cpath d='M0 204C160 177 320 231 480 204'/%3E%3Cpath d='M0 228C160 206 320 250 480 228'/%3E%3C/g%3E%3C/svg%3E"); /* Chevron (mask) for selects, dropdowns. */ --art-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Select arrow as a coloured image (navy). */ --art-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%2300227E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --art-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --art-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%234a5672' stroke-width='2'/%3E%3Cpath d='M13 13l4.5 4.5' stroke='%234a5672' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } @media (min-width: 68.75em) { :root { --header-inset: 0.875rem; --header-pill: 4rem; } }