/* ===================================================================== CivicLens — CLIENT THEME: City & Borough of Wrangell --------------------------------------------------------------------- Deployed to css/client-theme.css and loaded AFTER css/styles.css. It overrides ONLY the semantic tokens + typeface — no product rules are duplicated here. That is the whole re-skin surface for a municipality. Palette and type are from the official CBW Style Guide; application conventions follow the City's own Ports & Harbors stylesheet. ===================================================================== */ /* ---- Gilroy — the City's brand typeface ----------------------------- Licensed to CBW (Fontspring). Brand rule: there is no separate Bold — 700 and 800 both map to Heavy. Paths are relative to /css. */ @font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-RegularItalic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Heavy.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Heavy.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Heavy.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; } :root { /* ---- Typeface ---------------------------------------------------- */ --font: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ---- Brand palette (official CBW Style Guide) --------------------- */ --accent: #C33531; /* Garnet — leads: nav, hero, CTAs */ --accent-dark: #a32a27; --surface-dark: #1D294F; /* Navy — supporting: footer, staff area */ --surface-deepest: #131c38; --surface-dark-soft: #2b3a66; --surface-warm: #F9F2E9; /* Sand — card surfaces */ /* Secondary brand colors (consumed by existing rules via these aliases) */ --wr-salmon: #E09896; --wr-light-salmon: #F0CDCB; /* ---- Neutrals ----------------------------------------------------- */ --sand-deep: #efe4d2; --ink: #1f2937; --muted: #4b5563; /* 6.8:1 on Sand cards, 6.7:1 on the section tint (#6b7280 was 4.3:1) */ --line: rgba(0,0,0,.07); --field-line: #cfd4dc; --control-line: #8a8f98; /* search box border: 3.3:1 on white */ --card: var(--surface-warm); /* ---- Accent as text / behind white text (WCAG AA) ----------------- Garnet passes as text (5.4:1 on white, 4.9:1 on Sand) and behind white text (5.4:1); on the garnet-tinted account chips and the salmon callout the darker garnet is used. */ --accent-text: var(--accent); --accent-text-strong: var(--accent-dark); --accent-tint: rgba(195,53,49,.10); --accent-strong: var(--accent); /* ---- Budget status (brand-faithful, not the CivicLens green/teal) -- Navy = on track, Salmon = watch, Garnet = over budget. The pills pair each with a text color that reaches 4.5:1 (salmon itself is 2.1:1). */ --ok: #1D294F; --watch: #E09896; --over: #C33531; --ok-text: #1D294F; --ok-bg: rgba(29,41,79,.12); --watch-text: #7a2522; --watch-bg: rgba(224,152,150,.35); --over-bg: #C33531; /* ---- Component conventions from the City's stylesheet ------------- */ --btn-radius: 1px; /* sharp rectangular buttons */ --btn-track: .02em; --shadow-sm: 0 6px 18px rgba(0,0,0,.06); --shadow-md: 0 10px 30px rgba(29,41,79,.16); } /* Garnet scrollbar — small brand signature carried from the City site. */ html { scrollbar-color: var(--accent) rgba(0,0,0,.08); } html::-webkit-scrollbar-thumb { background: var(--accent); } /* The municipality's logo replaces the neutral product mark in the nav. */ .brand .brand-logo { height: 40px; width: auto; display: block; flex: none; } @media (max-width: 720px) { .brand .brand-logo { height: 32px; } } @media (max-width: 420px) { .brand .brand-logo { height: 26px; } } /* ===================================================================== BRAND LEADERSHIP — Wrangell leads with Garnet. The neutral product leads with its dark surface and uses the accent sparingly. The City's direction is the inverse: Garnet carries the nav and hero; Navy becomes the supporting accent (active state, sign-in, footer, staff area). These are the only structural overrides. ===================================================================== */ .nav { background: var(--accent); } /* Text on garnet is solid white: 5.4:1. (White at 82–85% opacity was 4.1–4.3:1, below AA at this size.) */ .nav-links a { color: #fff; } .brand .brand-text span { color: #fff; } .nav-links a:hover { background: var(--accent-dark); color: #fff; } .nav-links a.active { background: var(--surface-dark); color: #fff; } .nav-cta { background: var(--surface-dark); } .nav-cta:hover { background: var(--surface-dark-soft); } .hero { background: linear-gradient(155deg, var(--accent) 0%, var(--accent-dark) 100%); } /* The soft highlight sits behind the eyebrow and the start of the lead on phones: at 8% white, white text over its brightest point is 4.8:1 (16% was 4.2:1). */ .hero::after { background: radial-gradient(circle, rgba(255,255,255,.08), transparent 62%); } /* The paper-tinted lead was 3.9:1 at the light end of the garnet gradient. */ .hero .eyebrow, .hero .lead { color: #fff; } /* On a garnet hero the primary action becomes white for contrast. */ .hero .btn-primary { background: #fff; color: var(--accent); border-color: #fff; } .hero .btn-primary:hover { background: var(--surface-warm); color: var(--accent-dark); filter: none; }