/* Generated by the Local Site Kit (sitekit/onepage.py). Edit the declaration, not this file. Source: brand/tokens.css */ /* ============================================================ C.B. PAINTING — brand/tokens.css VALUES only. Shapes live in brand/components.css. Source of truth: brand/BRAND.md. Never hardcode a hex elsewhere. ---- THE SURFACE-CONTEXT RULE ------------------------------- Components never name a color. They paint from the --ui-* layer, which a context class (.on-tint, .on-dark, .on-deep) redefines. That is what makes a component correct on every surface by construction, instead of needing a matching override somebody has to remember. The first build shipped green links on a green band, ratio 1.00, invisible, with nothing erroring. ---- RESTRAINT ---------------------------------------------- Second lesson, learned the same way: having four brand colors is not permission to use four brand colors. Upscale reads as ONE quiet surface, ink, and a single warm accent doing one job. - WHITE is the page. Warm tints are bands, used sparingly; a site that is ecru end to end reads dated, not minimal. Cream appears once per page. - Green is INK first (headings, the logo) and a surface rarely: at most one deep band in the body, plus the footer. - Umber is the CTA on LIGHT surfaces only. Umber on green is mud, which is exactly what shipped before this rewrite. On a dark surface the primary button inverts to paper with green text. ============================================================ */ :root { /* ---------- RAW PALETTE — never referenced by a component ---------- */ --green-900: #1F3C25; /* footer ground */ --green-800: #224229; /* dark band ground. The brand doc Forest Green: deeper than the logo green and better under light text */ --green-700: #365731; /* PRIMARY. Measured from logos/cb_logo.avif */ --green-100: #E7EDE5; /* faintest green wash */ --copper-100: #E3CDB6; /* small caps and labels ON a green ground. 7.28 on the dark band, so it clears AAA rather than sitting just over the AA floor at small uppercase sizes. Keeps the copper thread on dark surfaces instead of switching to sage, which reads like a second accent color */ --sage-200: #D0DBD0; --sage-300: #C4D2C4; --moss-500: #678A62; /* DECORATIVE ONLY, never text */ --copper-500: #93634B; /* DECORATIVE ONLY, never text */ --copper-700: #6B4230; /* copper ink: eyebrows, small caps, links. 7.11 on cream, the worst surface it lands on, so it clears AAA there and everywhere lighter. #7F5239 cleared AA only. */ --umber-800: #673717; /* CTA fill on light. White on it = 9.83 */ --umber-700: #7C421C; --walnut-800: #4E342E; /* body text. 10.68 on paper */ --walnut-600: #6A534B; --warmgrey-700: #4F463C; /* captions and notes. 9.94 on white. The earlier #5F5348 cleared AA at 7.45 and still read faded: AA is a floor, not a target, and small text needs more than the floor. */ --white: #FFFFFF; /* THE PAGE. Actual white. */ --star-gold: #FBBC04; /* review stars only: Google's own star yellow. Decorative, never text */ --paper-50: #FAF6EC; /* warm panel and band tint. Warmer than it was: at #FBF8F2 a tinted band was indistinguishable from the white page, so the page read as all white space. */ --cream-100: #F1E9DA; --cream-200: #E5D9C4; /* the tan from the brand doc: one band, never a page */ --charcoal-900: #1A1A1A; /* ---------- UI LAYER (default context: paper) ---------------------- */ --ui-bg: var(--white); --ui-surface: var(--paper-50); /* cards read as soft panels ON white */ --ui-surface-alt: var(--cream-100); --ui-heading: var(--green-700); /* 7.73 on paper */ --ui-text: var(--walnut-800); /* 10.68 */ --ui-text-muted: var(--warmgrey-700); /* 7.45 on white */ --ui-accent: var(--copper-700); /* 6.25 — eyebrows, ticks, small marks */ --ui-accent-deco: var(--copper-500); --ui-rule: rgba(54, 87, 49, .14); /* hairline, green-tinted */ --ui-rule-strong: rgba(54, 87, 49, .28); --ui-link: var(--green-800); /* a step darker than headings: the same green as a heading cleared AAA on white and fell to 6.79 on the cream band, and links are small text that needs the headroom */ --ui-link-hover: var(--umber-800); --ui-focus: var(--umber-800); /* ---------- CTA HIERARCHY ---------------------------------------- 1 primary the one thing this page exists to cause. One per screenful. 2 secondary the real alternative (usually "call instead"). 3 tertiary going deeper into the site. A link, not a button. */ --cta1-bg: var(--umber-800); --cta1-bg-hover: var(--umber-700); --cta1-text: var(--white); --cta1-border: transparent; --cta2-bg: transparent; --cta2-bg-hover: rgba(54, 87, 49, .07); --cta2-text: var(--green-700); --cta2-border: var(--ui-rule-strong); --cta3-text: var(--green-700); --cta3-text-hover:var(--umber-800); /* ---------- TYPE --------------------------------------------------- Rockwell + Gill Sans are licensed desktop faces with no web licence, so the web uses the closest open matches. See BRAND.md section 3. Display weight is 400, not 700: Arvo's bold is a heavy slab and at headline size it reads blunt rather than composed. */ --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif; --font-body: Mulish, "Gill Sans MT", "Gill Sans", system-ui, sans-serif; /* Per-level display weight. One weight for every heading was the mistake: Zilla Slab 400 carries a 64px h1 fine and goes feathery at h2 and h3 sizes, where the strokes are thinner but the eye still expects a heading to feel set. */ --display-weight-h1: 500; --display-weight-h2: 600; --display-weight-h3: 600; /* ---- TYPE SCALE ---------------------------------------------------- A major third (1.25) at desktop, compressed at mobile so headlines do not eat a phone screen. Every step is a clamp, so the RATIOS hold at any width instead of only at the size they were designed at. step mobile -> desktop used for xs 14 -> 15px eyebrows, legal, footnotes sm 16 -> 17px captions, hints, muted secondary text base 17 -> 19px BODY COPY. The default. lg 19 -> 22px lede paragraph under an h1 or h2 xl 22 -> 25px h3, FAQ questions, card titles 2xl 30 -> 44px h2, one per band 3xl 38 -> 64px h1, one per page Body at 19px is deliberate, not generous: this audience skews older and reads on a phone in daylight. 16px is a habit from desktop-era design. */ --text-xs: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --text-sm: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem); --text-base: clamp(1.0625rem,1rem + 0.28vw, 1.1875rem); --text-lg: clamp(1.1875rem,1.08rem + 0.45vw, 1.375rem); --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.5625rem); --text-2xl: clamp(2rem, 1.45rem + 2.5vw, 3rem); --text-3xl: clamp(2.375rem, 1.6rem + 3.6vw, 4rem); --leading-tight: 1.1; /* h1, h2 */ --leading-snug: 1.25; /* h3, h4 */ --leading-body: 1.65; --measure: 62ch; --measure-lede: 46ch; --tracking-display: -0.018em; --tracking-eyebrow: 0.16em; /* ---------- SPACE -------------------------------------------------- Generous by default. Cramped is the single fastest way to look cheap. */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Tuned down from 4.5-8rem. Generous spacing reads upscale right up to the point where a section's heading loses contact with the section above it and the page feels sparse rather than composed. */ --section-y: clamp(3.25rem, 6vw, 5.5rem); --section-y-lg: clamp(4rem, 7.5vw, 7rem); --radius-sm: 6px; --radius-md: 10px; /* buttons, and the numbered markers */ --radius-lg: 16px; /* cards, images, placeholders */ --radius-pill: 999px; /* was referenced by .step::before and never defined, so the markers rendered as hard squares. An undefined custom property invalidates the whole declaration and fails silently, which is why nobody caught it by reading. */ --shadow-card: 0 1px 2px rgba(36,57,31,.04), 0 12px 32px -12px rgba(36,57,31,.14); /* ---- NUMBERED MARKERS ---- Used by .step and anything else that numbers a sequence. A 1px outlined square in accent color was nearly invisible on the dark band; a filled disc with real contrast is a marker rather than a hint. Tokenised so every numbered sequence on the site is identical, and so the dark contexts can invert it in one place. */ --marker-size: 3.25rem; --marker-bg: transparent; --marker-text: var(--green-700); --marker-border: var(--green-700); --marker-border-w: 2px; --marker-radius: var(--radius-md); --marker-font: var(--font-display); --marker-weight: 600; --marker-font-size: var(--text-xl); --touch-min: 46px; --ease: cubic-bezier(.2,.6,.3,1); } /* ============================================================ CONTEXTS — repoint the UI layer, never the components. ============================================================ */ /* Barely-warm band. The lightest possible break from white. */ .on-tint { --ui-bg: var(--paper-50); --ui-surface: var(--white); --ui-surface-alt: var(--cream-100); --ui-rule: rgba(54, 87, 49, .14); background: var(--ui-bg); color: var(--ui-text); } /* The faintest brand green. A band that reads as a different color from the warm tint without leaving the palette, so white cards stand out on it. */ .on-sage { --ui-bg: var(--green-100); --ui-surface: var(--white); --ui-surface-alt: var(--paper-50); --ui-rule: rgba(54, 87, 49, .18); background: var(--ui-bg); color: var(--ui-text); } /* One estimate button, the same on every surface. The default primary button inverts to paper on dark grounds, which made the page's main call to action two different colors. This pins it to the brand's umber and rings it in cream so it still reads on a dark band or a photo. */ .cta-solid { --cta1-bg: var(--umber-800); --cta1-bg-hover: var(--umber-700); --cta1-text: var(--white); --cta1-border: var(--cream-100); } /* A light panel set INSIDE a context that repoints the whole layer (a form card on the hero, a card on a dark band). Without it the card inherits the context's white text and paints white on white. Resets every --ui-* value to the page default. */ .on-light { --ui-bg: var(--white); --ui-surface: var(--paper-50); --ui-surface-alt: var(--cream-100); --ui-heading: var(--green-700); --ui-text: var(--walnut-800); --ui-text-muted: var(--warmgrey-700); --ui-accent: var(--copper-700); --ui-accent-deco: var(--copper-500); --ui-rule: rgba(54, 87, 49, .14); --ui-rule-strong: rgba(54, 87, 49, .28); --ui-link: var(--green-800); --ui-link-hover: var(--umber-800); --ui-focus: var(--umber-800); --cta1-bg: var(--umber-800); --cta1-bg-hover: var(--umber-700); --cta1-text: var(--white); --cta1-border: transparent; --cta2-bg: transparent; --cta2-bg-hover: rgba(54, 87, 49, .07); --cta2-text: var(--green-700); --cta2-border: var(--ui-rule-strong); background: var(--ui-bg); color: var(--ui-text); } /* The brand's tan. Warm, and used ONCE on a page: any more and the whole site goes ecru, which reads dated rather than upscale. */ .on-warm { --ui-bg: var(--cream-100); --ui-surface: var(--white); --ui-surface-alt: var(--paper-50); --ui-heading: var(--green-700); /* 5.87 */ --ui-rule: rgba(54, 87, 49, .20); background: var(--ui-bg); color: var(--ui-text); } /* Green. Use SPARINGLY: at most one in the body of a page. Note cta1 inverts here. Umber on green is mud. */ .on-dark { --ui-bg: var(--green-800); --ui-surface: rgba(251,248,242,.08); --ui-surface-alt: rgba(251,248,242,.05); --ui-heading: var(--white); /* 8.19 on green */ --ui-text: var(--cream-200); /* 5.87 */ --ui-text-muted: var(--sage-300); /* 5.21 */ --ui-accent: var(--copper-100); /* 6.19 on the dark band */ --ui-accent-deco: var(--moss-500); --ui-rule: rgba(251,248,242,.18); --ui-rule-strong: rgba(251,248,242,.42); --ui-link: var(--white); --ui-link-hover: var(--sage-200); --ui-focus: var(--sage-200); --cta1-bg: var(--white); --cta1-bg-hover: var(--paper-50); --cta1-text: var(--green-900); --cta2-text: var(--white); --cta2-border: rgba(251,248,242,.45); --cta2-bg-hover: rgba(251,248,242,.12); --cta3-text: var(--white); --cta3-text-hover:var(--sage-200); --marker-bg: transparent; --marker-text: var(--cream-200); --marker-border: var(--cream-200); background: var(--ui-bg); color: var(--ui-text); } /* Full-bleed hero: text sits ON an image, so the surface under it is unknowable. Everything here is white or near-white and the scrim (site.css) is sized so white text clears AAA even over a pure white photograph, which is the worst case. */ .on-hero { /* transparent, because .band paints var(--ui-bg) and would cover the photograph */ --ui-bg: transparent; --ui-surface: rgba(255,255,255,.10); --ui-heading: var(--white); --ui-text: var(--white); /* White, not a dimmed near-white. The scrim above is sized so WHITE clears AAA over the worst-case surface, and #E8EFE7 was quietly spending contrast the hero does not have. The home hero's claim list rendered it at --text-sm, which needs 4.5, and measured 3.51; that list has since been deleted as a duplicate of the trust strip, but the token was wrong on its own terms and any future muted text on a hero would have inherited the same problem. Nobody saw it because the audit in PATTERNS.md section 7 reads backgroundColor on ancestor ELEMENTS, the hero green is a gradient on .hero-bleed::after, so every hero node fell through to white and reported ratio 1.00 as undifferentiated noise. On a hero, "muted" is a job for size and weight, not for less contrast. */ --ui-text-muted: var(--white); --ui-accent: var(--white); --ui-rule: rgba(255,255,255,.28); --ui-rule-strong: rgba(255,255,255,.55); --ui-link: var(--white); --ui-link-hover: var(--cream-200); --ui-focus: var(--white); --cta1-bg: var(--white); --cta1-bg-hover: var(--cream-100); --cta1-text: var(--green-900); --cta2-bg: transparent; --cta2-text: var(--white); --cta2-border: rgba(255,255,255,.6); --cta2-bg-hover: rgba(255,255,255,.14); --cta3-text: var(--white); --cta3-text-hover:var(--cream-200); --marker-text: var(--white); --marker-border: var(--white); color: var(--ui-text); } /* Deepest green. The footer, and anywhere a dark band must touch another. */ .on-deep { --ui-bg: var(--green-900); --ui-surface: rgba(251,248,242,.07); --ui-surface-alt: rgba(251,248,242,.05); --ui-heading: var(--white); /* 12.5 on deep green */ --ui-text: var(--cream-200); /* 8.96 */ --ui-text-muted: var(--sage-300); /* 7.95 */ --ui-accent: var(--copper-100); /* 6.72 on the footer ground */ --ui-accent-deco: var(--moss-500); --ui-rule: rgba(251,248,242,.16); --ui-rule-strong: rgba(251,248,242,.38); --ui-link: var(--white); --ui-link-hover: var(--sage-200); --ui-focus: var(--sage-200); --cta1-bg: var(--white); --cta1-bg-hover: var(--paper-50); --cta1-text: var(--green-900); --cta2-text: var(--white); --cta2-border: rgba(251,248,242,.45); --cta2-bg-hover: rgba(251,248,242,.12); --cta3-text: var(--white); --cta3-text-hover:var(--sage-200); --marker-bg: transparent; --marker-text: var(--cream-200); --marker-border: var(--cream-200); background: var(--ui-bg); color: var(--ui-text); }