/* ============================================================ SUB-BRAND THEMES — Brand Book v3.0, §7 ------------------------------------------------------------ AGC v2.0 §6.2 already described two visual tiers. v3.0 keeps that idea but implements it as SCOPED TOKEN OVERRIDES rather than separate stylesheets: a themed wrapper re-points the same variables the core system already uses, so every component built in brand-v3.css and site-v3.css (.band, .d0, .eyebrow, .steps, .work-card, .phero, .nav) renders in the sub-brand without one line of component CSS changing. Add a theme by wrapping the page: THE PROFESSIONAL TIER — Additions, Remodels, and AGC itself. Navy / Stone / Lake Blue, Instrument Serif + Montserrat. THE LUXURY TIER — AG Signature Kitchens. Ivory / Rich Black / Warm Gold, Fraunces + Mulish. ============================================================ */ /* ============================================================ AWESOME ADDITIONS — professional tier Source: awesome-additions-website/css/styles.css :root --logo-navy #021F3B (the exact ground of logo-reverse.jpeg — surfaces behind the reversed logo must match) --lake-blue #1F6BC4 · --bright-blue #3DA5E8 · --sand #E5D5B8 Closest to the master brand, so it overrides only the accent pair and the dark ground. ============================================================ */ .brand-additions { /* The reversed logo sits on this exact value — do not round it. */ --navy-deep: #021F3B; --navy-soft: #0E2547; --lake: #1F6BC4; --lake-light: #3DA5E8; } /* Additions leans on photography more than the master brand does. */ .brand-additions .phero { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); } /* ============================================================ AG SIGNATURE KITCHENS — luxury tier Source: ag-signature-kitchens/src/styles/global.css :root Ivory #FAF7F2 · Cream #F2ECE2 · Charcoal #2B2B2B Rich Black #0D0D0D · Warm Gold #C8A263 · Olive #474C3A Fraunces (display) · Mulish (UI) This tier is deliberately distinct because the customer is distinct. It is the boutique kitchen specialist, not the general remodeler. ============================================================ */ .brand-kitchens { /* Canvases — black replaces navy, ivory replaces stone */ --navy: #0D0D0D; --navy-deep: #080808; --navy-soft: #1C1A17; --stone: #FAF7F2; --stone-deep: #F2ECE2; /* Ink */ --sand: #EDE4D4; --sand-dim: rgba(237, 228, 212, 0.62); --sand-faint: rgba(200, 162, 99, 0.26); /* gold-tinted hairline on dark */ --ink: #0D0D0D; --body: #4A463F; --body-dim: rgba(74, 70, 63, 0.66); --hairline: rgba(43, 43, 43, 0.14); /* Identifier — warm gold replaces Lake Blue */ --lake: #C8A263; --lake-light: #D5C8AC; } /* Display face swaps to Fraunces; UI to Mulish. Fraunces carries real weight, so unlike Instrument Serif it sits at 600 and needs less negative tracking. */ .brand-kitchens { font-family: "Mulish", "Helvetica Neue", Arial, sans-serif; } .brand-kitchens .d0, .brand-kitchens .d1, .brand-kitchens .d2, .brand-kitchens .d3, .brand-kitchens .serif, .brand-kitchens .u-mono-num, .brand-kitchens .wordmark__a, .brand-kitchens .menu__link, .brand-kitchens .step h3, .brand-kitchens .work-card h3, .brand-kitchens .market h3, .brand-kitchens .discipline__meta dd, .brand-kitchens .legal h2, .brand-kitchens .legal h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; font-optical-sizing: auto; } .brand-kitchens .d0 { line-height: 0.92; } .brand-kitchens .d1 { line-height: 0.96; } .brand-kitchens .eyebrow, .brand-kitchens .overline, .brand-kitchens .nav__label, .brand-kitchens .btn, .brand-kitchens .link-u, .brand-kitchens .wordmark__b { font-family: "Mulish", "Helvetica Neue", Arial, sans-serif; } /* The signature eyebrow: a gold diamond, wider tracking than the master brand's. Carried over from the AGSK identity. */ .brand-kitchens .eyebrow { letter-spacing: 0.30em; color: var(--lake); } .brand-kitchens .eyebrow::before { content: "\25C6"; margin-right: 0.8em; font-size: 0.62em; vertical-align: middle; opacity: 0.85; } .brand-kitchens .on-navy .eyebrow { color: var(--lake-light); } /* Italic accents run gold in this tier. */ .brand-kitchens em { color: var(--lake); font-style: italic; } .brand-kitchens .on-navy em { color: var(--lake-light); } ::selection { background: var(--lake); } .brand-kitchens ::selection { background: var(--lake); color: #0D0D0D; } /* ============================================================ BRAND SWITCHER A hairline strip that lets a visitor move between the tiers without going back to the homepage — the whole point of one site. ============================================================ */ .brandbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--u) * 10) calc(var(--u) * 28); padding: calc(var(--u) * 16) 0; border-bottom: 1px solid var(--hairline); } .brandbar__label { font-size: calc(var(--u) * 10); font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: var(--body-dim); margin-right: auto; } .on-navy .brandbar__label { color: var(--sand-dim); } .brandbar a { font-size: calc(var(--u) * 11); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--body-dim); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .4s var(--ease), border-color .4s var(--ease); } .on-navy .brandbar a { color: var(--sand-dim); } .brandbar a:hover { color: var(--lake); border-color: var(--lake); } .brandbar a[aria-current="page"] { color: var(--ink); border-color: var(--lake); } .on-navy .brandbar a[aria-current="page"] { color: var(--sand); }