/* brand-tokens.css * Easy Guide portfolio design tokens. * Every site in the Easy Guide family inherits these values. * Site-specific accent is set via the `data-site` attribute on . * * Load ORDER matters: include this file AFTER the site's base style.css so * any conflicts resolve in brand-tokens' favor. */ /* * ─── COLOR HYGIENE RULE ─────────────────────────────────────────────── * Every Easy Guide site is monochromatic. * * Allowed colors on any site page: * - The site's accent color (var(--site-accent)) * - Opacity variants of the site's accent — use color-mix or rgba, * never a hand-picked hex that "feels like the accent" * - Neutrals: white, charcoal, slate grays, text inks (including * var(--navy), which despite the legacy name is now pure ink #1a2332) * - Functional UI colors where UX convention demands them: yellow for * warnings (--warn-bg / --warn-border). Document inline when used. * * NEVER use: * - Hardcoded hex colors that aren't from the palette * - Colors from a different site's accent (e.g., w-2 amber on the w-4 site) * - Off-brand fades, mixed-palette gradients, or "decorative" accents * * When adding a new section or component: * - Backgrounds: white, charcoal, OR color-mix(in srgb, var(--site-accent) X%, white) * - Text: var(--text), var(--muted), var(--navy), OR pure white/charcoal * - Accent lines: var(--site-accent) — and nothing else * * If a design need can't be satisfied within these constraints, ask Graham. * * Rule adopted Session 7.5 (2026-04-24) after color hygiene audit. * ───────────────────────────────────────────────────────────────────── */ /* * ─── VOICE & READING LEVEL RULE ─────────────────────────────────────── * Every Easy Guide site is written for a 6th grade reading level. * The brand promise is in the name — "Easy Guide" means easy. * * Banned categories of language: * - Industry jargon ("synergy," "leverage," "robust," "comprehensive") * - Sports metaphors ("punting," "moving the goalposts," "running with it") * - Business-speak ("circle back," "deep dive," "low-hanging fruit", * "moving the needle") * - Pretentious words ("myriad," "plethora," "endeavor," "garner", * "utilize") * - Filler phrases ("at the end of the day," "as mentioned above", * "in this article") * - Internal/dev jargon leaking into user copy ("scaffolded", * "validated against a battery", "implemented", "worksheet-accurate", * "wizard" when meaning the tool, "session" when meaning a build sprint) * * Allowed exceptions: * - The actual form reference (W-2, W-4, Box 1, Box 2, Step 4(c), etc.) * - Common tax terms (withholding, deduction, credit) — must be * introduced and explained on first use of each page. * - Legal pages (privacy, terms, disclaimer) follow legal-copy convention * and are exempt from the 6th-grade rule for terms with specific legal * meaning (warranties, indemnify, hold harmless, etc.). * * Test for any word: would a typical 12-year-old understand this without * context? If no, replace. * * When in doubt: shorter, simpler, more direct. * * Rule adopted Session B.2 (2026-04-25) after voice audit on w2easyguide. * ───────────────────────────────────────────────────────────────────── */ :root { /* Brand colors — Tier 1 + Tier 2 */ --brand-hub: #1e3a4a; --brand-w4: #2e6b3e; --brand-w2: #b2753a; --brand-w9: #2a5580; --brand-paycheck: #7a3a68; --brand-i9: #a83a3a; --brand-ein: #2a7878; --brand-1099: #9a6a1e; /* Brand colors — Tier 3 (strategic squats, 2027+) */ --brand-fafsa: #3a6b8a; --brand-retirement: #6a4a8a; --brand-ssa: #4a6b3a; --brand-llc: #8a5a2a; --brand-probate: #5a5a6a; --brand-budget: #2a6b5a; /* Per-site accent (set via data-site on ) — default to w4 */ --site-accent: var(--brand-w4); /* ─── Site chrome (universal, NOT per-site) ────────────────────────── * Footer is family-level neutral chrome — same across every Easy Guide * site. Brand identity (per-site accent) lives above the fold; chrome * (footer) lives below. `--brand-hub` is reserved for theeasyguides.com * itself, not for sister-site footers. */ --color-footer-bg: #2a2a2a; /* warm-neutral charcoal (not pure black) */ --color-footer-text: #e5e7eb; /* light slate for body */ --color-footer-heading: #ffffff; --color-footer-link: #9ca3af; /* mid-gray for links */ --color-footer-link-hover: #ffffff; /* Brand typography */ --font-brand: 'Zilla Slab', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Per-site accent switching via data attribute on */ body[data-site="hub"] { --site-accent: var(--brand-hub); } body[data-site="w4"] { --site-accent: var(--brand-w4); } body[data-site="w2"] { --site-accent: var(--brand-w2); } body[data-site="w9"] { --site-accent: var(--brand-w9); } body[data-site="paycheck"] { --site-accent: var(--brand-paycheck); } body[data-site="i9"] { --site-accent: var(--brand-i9); } body[data-site="ein"] { --site-accent: var(--brand-ein); } body[data-site="1099"] { --site-accent: var(--brand-1099); } body[data-site="fafsa"] { --site-accent: var(--brand-fafsa); } body[data-site="retirement"] { --site-accent: var(--brand-retirement); } body[data-site="ssa"] { --site-accent: var(--brand-ssa); } body[data-site="llc"] { --site-accent: var(--brand-llc); } body[data-site="probate"] { --site-accent: var(--brand-probate); } body[data-site="budget"] { --site-accent: var(--brand-budget); } /* ─── Brand wordmark (reusable across sites) ─────────────────────────── */ .brand-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; line-height: 1; white-space: nowrap; } .brand-wordmark__icon { /* Session 7.3: icon stays at 28px while wordmark bumps to 36px — Graham wants the wordmark to dominate and the icon to sit as a supporting mark. With flex `align-items: center` on the parent, the 28px icon centers on the 36px text — its top sits roughly at the x-height line of the lower- case letters and its center aligns with the visual midline of the text. This reads better than cap-aligning a smaller icon would. */ width: 28px; height: 28px; flex-shrink: 0; color: var(--site-accent); } .brand-wordmark__variant { font-family: var(--font-sans); font-weight: 700; font-size: 36px; line-height: 1; color: var(--site-accent); letter-spacing: -0.01em; } .brand-wordmark__easy-guide { font-family: var(--font-brand); font-weight: 700; font-size: 36px; line-height: 1; color: var(--navy, #1a2332); letter-spacing: -0.005em; } /* Narrow viewports: shrink wordmark so the hamburger toggle stays on-screen. */ @media (max-width: 380px) { .brand-wordmark__variant, .brand-wordmark__easy-guide { font-size: 30px; } }