/* ========================================================================== INSIDE & OUT CONSORTIUM - BRAND TOKENS ========================================================================== THIS IS THE ONLY FILE THAT SHOULD CHANGE WHEN LEE DELIVERS BRANDING. Every colour, font and radius used anywhere on the site is defined here. Swap the values below and the whole site (all 5 member companies, blog, estimator) re-skins with no other edits. Current values are PLACEHOLDERS carried over from the original Inside & Out Property Maintenance concept page so the site looks finished and credible while Lee's real brand package is pending. ACCESSIBILITY NOTE - do not change accent colours casually. Every --co-*-accent below has been checked to clear WCAG AA 4.5:1 in BOTH directions: white text on the accent (buttons) and accent text on the paper background (links, eyebrows). If Lee supplies lighter brand colours, keep a darker "ink" variant for text and use the light version for large fills only. See README.md. ========================================================================== */ :root { /* ---- Core consortium palette ---- */ --navy: #16233a; --navy-deep: #0e1826; --charcoal: #33373f; --slate: #6b6f76; --paper: #faf8f4; --paper-dim: #f1ede5; --paper-warm: #e9e3d6; --line: #e4ddd0; --white: #ffffff; /* Consortium accent (the umbrella brand itself). Civic blue + gold mood, loosely inspired by Cambridge's own municipal palette (deliberately NOT an exact match -- copying a government site's brand colours on a commercial site risks implying City affiliation). --accent: 6.68:1 on --paper, 7.09:1 on white. --accent-soft is used only for decorative fills (dots, bullets, quote marks, hover borders), never as text, so it is not held to the same contrast bar. */ --accent: #1a5f7a; --accent-soft: #c99a2e; --accent-wash: #eaf1f4; /* ---- Member company accents ---- Each member company page sets data-company on , which swaps --accent / --accent-soft / --accent-wash to its own colour. All five clear AA on white text AND on --paper. */ --co-gc-accent: #a85c0f; /* General Contracting - amber 4.95:1 / 4.60:1 */ --co-gc-soft: #d9791f; --co-gc-wash: #fdf3e7; /* Cleaning is delivered by ShineCo Cleaning, so this accent is theirs. ShineCo supplied five brand colours. Only the dark green clears AA, so it is the only one used for text or on buttons. Measured against white: #ebe453 yellow 1.33:1 decorative only #3cac49 green 2.92:1 large fills only #0296f6 blue 3.14:1 large fills only #c3e9f3 light blue 1.29:1 background tint only #356926 dark green 6.56:1 AA both ways, so this is --accent Do not promote the brighter green to --accent to "match the logo better". It fails on a Request a quote button, which is an accessibility defect rather than a stylistic preference. See README, Branding. */ --co-clean-accent: #356926; /* ShineCo dark green 6.56:1 / 6.10:1 */ --co-clean-soft: #3cac49; /* ShineCo green, fills only */ --co-clean-wash: #eef6ec; /* Full ShineCo palette, for logo and decorative use on the cleaning page */ --shineco-yellow: #ebe453; --shineco-green: #3cac49; --shineco-dark-green: #356926; --shineco-blue: #0296f6; --shineco-light-blue: #c3e9f3; --co-land-accent: #35682e; /* Landscaping - green 6.40:1 / 5.94:1 */ --co-land-soft: #4b8a40; --co-land-wash: #eef5ec; --co-pm-accent: #33528c; /* Property Maintenance - indigo 7.60:1 / 6.50:1 */ --co-pm-soft: #4a6fb0; --co-pm-wash: #edf1f9; --co-handy-accent: #97362c; /* Handyman - brick 7.30:1 / 6.80:1 */ --co-handy-soft: #bd4a3d; --co-handy-wash: #fbeeec; /* ---- Type ---- Placeholder system stack. When Lee supplies brand fonts, self-host the woff2 files in assets/fonts/ and change only these two lines plus the @font-face blocks. Do NOT link Google Fonts (adds a third-party request and slows Core Web Vitals, which we are optimising for SEO). */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Shape & rhythm ---- */ --radius: 10px; --radius-sm: 7px; --radius-pill: 999px; --max: 1180px; --max-narrow: 720px; --gutter: 24px; --shadow-sm: 0 6px 18px rgba(22, 35, 58, 0.08); --shadow-md: 0 14px 30px rgba(22, 35, 58, 0.10); --shadow-lg: 0 20px 45px rgba(22, 35, 58, 0.12); } /* ---- Per-company accent switching ---- Set on etc. Everything downstream (buttons, links, eyebrows, badges) picks it up automatically. */ body[data-company="general-contracting"] { --accent: var(--co-gc-accent); --accent-soft: var(--co-gc-soft); --accent-wash: var(--co-gc-wash); } body[data-company="cleaning"] { --accent: var(--co-clean-accent); --accent-soft: var(--co-clean-soft); --accent-wash: var(--co-clean-wash); } body[data-company="landscaping"] { --accent: var(--co-land-accent); --accent-soft: var(--co-land-soft); --accent-wash: var(--co-land-wash); } body[data-company="property-maintenance"] { --accent: var(--co-pm-accent); --accent-soft: var(--co-pm-soft); --accent-wash: var(--co-pm-wash); } body[data-company="handyman"] { --accent: var(--co-handy-accent); --accent-soft: var(--co-handy-soft); --accent-wash: var(--co-handy-wash); }