/* ============================================================================ EMPLOYEEIQ 2026 — SITE COMPONENTS ---------------------------------------------------------------------------- status: LIVE on employeeiq.com only. Pending a promotion decision after G2E 2026 (Sept 29 – Oct 1). See _claude_prompts/06. source: EmployeeIQ_Brand_Kit_2026_v2 (README, web/employeeiq-brand-tokens.css) EmployeeIQ_Website_Brand_Refresh_Recommendations.md, items 1–10. Load order: s9-brands.css → s9-core.css → eiq-2026.css This is NOT part of the shared design system and is not copied to any other site. It holds the components that arrived with the 2026 refresh — icon wells, badge categories, the candidate journey line, the hero grid, the logo lockups — and one deliberate override of core (BLOCK C). They have shipped nowhere else. If they earn their place they are promoted into s9-core.css as unbranded .s9-* components taking their color from the five brand vars, the way .s9-phone already does, and this file shrinks or goes. No value from the five-variable brand contract lives here — those, and the warm-neutral opt-in, are in s9-brands.css and nowhere else. What this file may hold is EmployeeIQ-only accents (the --eiq-* palette below): they are used only by the components in this file, so they live beside them rather than being copied to six sites that will never read them. (From the mockup: BLOCK A and the neutrals in BLOCK B moved to s9-brands.css and s9-core.css; the hero and CTA gradient overrides in BLOCK C were replaced by core's .s9-hero--flat / .s9-cta--flat in 1.13.0; BLOCK F, the clay placeholder, was deleted when the renders arrived. Letters are kept as they were in _claude_prompts/06-mockup/ so the two can be compared.) Contrast figures are measured, not estimated. ========================================================================== */ /* ===== BLOCK B — the supporting palette ==================== SITE-ONLY ===== Recommendation 2. Named, not loose hex. Aliased rather than re-declared wherever the five already carry the value, so the gold can never drift from --brand-bright: it IS --brand-bright. Scoped like the warm opt-in. */ :root[data-brand="employeeiq"]{ --eiq-gold:var(--brand-bright); /* same value — one source of truth */ --eiq-cream:var(--brand-light); /* same value — one source of truth */ --eiq-purple:#8d3a96; /* genuinely new: the former primary */ --eiq-orange:#e58a3a; /* genuinely new */ --eiq-teal:#68b8a9; /* genuinely new */ } /* ===== BLOCK C — bands ===================================== SITE-ONLY ===== Recommendation 7. The hero and the closing CTA take core's .s9-hero--flat and .s9-cta--flat (s9-core.css 1.13.0) in the markup: the ramp stops at purple and the People Gold arrives as a 3px rule under the band, because white text over a gold gradient corner is 2.08:1. Nothing here overrides core any more; the mockup's gradient overrides are gone. */ /* The kicker on a dark ground takes the gold. On white it stays purple — gold is 2.08:1 there and must never carry text. */ [data-brand="employeeiq"] .s9-hero .s9-kicker, [data-brand="employeeiq"] .s9-band-dark .s9-kicker{color:var(--eiq-gold);} /* ===== BLOCK D — the icon family ============================ NEW COMPONENT = Recommendation 3. Replaces the emoji and the bare .s9-card__mark text label with the twelve kit icons. Drawn once as an inline sprite at the top of each page and referenced with — no HTTP request, no icon font, and the stroke inherits currentColor so one file serves purple-on-cream, white- on-purple and gold-on-dark without a second copy. The kit ships these at stroke-width 6 on a 96 box. Kept exactly. */ .eiq-icon{ width:28px;height:28px;display:block; fill:none;stroke:currentColor;stroke-width:6; stroke-linecap:round;stroke-linejoin:round; } .eiq-well{ width:52px;height:52px;flex:0 0 52px; display:flex;align-items:center;justify-content:center; border-radius:14px; background:var(--brand-light);color:var(--brand); margin-bottom:var(--sp-4); } /* Warm well — hiring, Job Fair, anything the gold owns. Gold at 18% keeps the purple icon on it at 8.9:1. */ .eiq-well--warm{background:color-mix(in srgb,var(--eiq-gold) 20%,#fff);} /* Tech well — integrations. */ .eiq-well--tech{background:color-mix(in srgb,var(--eiq-teal) 22%,#fff);} /* On a dark band the well goes translucent and the icon goes gold. */ .s9-band-dark .eiq-well{background:rgba(255,255,255,.1);color:var(--eiq-gold);} /* A card that leads with an icon. Everything else is stock .s9-card. */ .s9-card .eiq-well{margin-bottom:var(--sp-4);} /* ===== BLOCK E — badge categories ========================== EXTENDS CORE === Recommendation 9. Same geometry as .s9-tag — same radius, padding, size, tracking. Only the two colors change, and they now mean something: (default) product / EmployeeIQ purple ink on cream --hiring hiring, Job Fair, events deep purple on gold 5.18:1 --tech integrations, platform deep purple on teal 4.63:1 Three categories is the limit. A fourth and they stop meaning anything. */ .s9-tag--hiring{background:var(--eiq-gold);color:var(--brand-dark);} .s9-tag--tech{background:var(--eiq-teal);color:var(--brand-dark);} /* .s9-badge is the dark-band pill; the hiring variant is its gold twin. */ .s9-badge--hiring{ border-color:color-mix(in srgb,var(--eiq-gold) 55%,transparent); color:var(--eiq-gold); } /* ===== BLOCK F2 — the clay scene in place =================== NEW COMPONENT = The delivered render sitting in the hero's right column. It is a cream image on a purple band, so it reads as a framed panel rather than bleeding into the ground — see the note in the prompts page; that is the open question. The gold hairline ties it to the rule under the band. */ .eiq-heroart{ display:block;width:100%;height:auto; border-radius:var(--r-xl); border:1px solid color-mix(in srgb,var(--eiq-gold) 45%,transparent); box-shadow:0 18px 44px rgba(20,10,24,.34); background:var(--eiq-cream); } /* ===== BLOCK G — the candidate journey line ================= NEW COMPONENT = Recommendation 6. Job Fair's secondary visual signature: a rounded gold line with round station markers, the markers echoing the heads in the people mark. It carries real station names, so it is information, not ornament — which is also why it is a list in the markup and not a background image. Built as a flex row with the line drawn behind the markers. Wraps to a stacked list under 640px rather than shrinking into illegibility. */ .eiq-journey{ --eiq-j-dot:15px; list-style:none;display:flex;align-items:flex-start; gap:0;position:relative;margin:0;padding:0; } .eiq-journey li{ flex:1;position:relative;text-align:center; padding-top:calc(var(--eiq-j-dot) + 13px); font-size:11.5px;font-weight:600;line-height:1.3; color:var(--muted); } /* the rail: one segment per gap, drawn from each marker to the next */ .eiq-journey li::after{ content:"";position:absolute; top:calc(var(--eiq-j-dot) / 2 - 2px);left:50%;width:100%;height:4px; border-radius:2px;background:var(--eiq-gold); } .eiq-journey li:last-child::after{display:none;} .eiq-journey li::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:var(--eiq-j-dot);height:var(--eiq-j-dot);border-radius:50%; background:var(--eiq-gold);z-index:1; } /* the last station is the outcome — it gets the orange and a ring */ .eiq-journey li:last-child::before{ background:var(--eiq-orange); box-shadow:0 0 0 4px color-mix(in srgb,var(--eiq-orange) 30%,transparent); } /* on a dark ground */ .eiq-journey--onbrand li{color:rgba(255,255,255,.88);} @media(max-width:640px){ .eiq-journey{flex-direction:column;align-items:flex-start;gap:14px;} .eiq-journey li{ flex:none;text-align:left;padding:0 0 0 26px;width:100%;font-size:13px; } .eiq-journey li::before{top:3px;left:0;transform:none;} .eiq-journey li::after{ top:18px;left:6px;width:4px;height:calc(100% + 6px); } .eiq-journey li:last-child::after{display:none;} } /* ===== BLOCK H — logo lockups =============================== NEW COMPONENT == The kit's SVG masters set the wordmark in Arial Bold rather than in outlines. That is fine for a master and wrong for the web: the mark renders in whatever the machine calls Arial, so it drifts between Windows, macOS and Android, and it does not match Instrument Sans anywhere on this page. FLAGGED: the shipping artwork needs the wordmark converted to paths. Until then the mockup uses the masters as supplied so nothing is faked. Also flagged: EmployeeIQ_Reversed.svg and EmployeeIQ_JobFair_Reversed.svg both ship with a solid #5E256A plate behind the mark, so they cannot sit on a photograph, a gradient or the footer. The mockup carries plate-free copies (EmployeeIQ_White.svg, EmployeeIQ_JobFair_White.svg) derived from them. Those belong in the kit. */ .eiq-logo{display:block;height:34px;width:auto;} .eiq-logo--foot{height:30px;width:auto;display:block;margin-bottom:var(--sp-3);} .eiq-logo--hero{height:74px;width:auto;display:block;margin-bottom:var(--sp-5);} /* The same lockup inside a dark band, where it shares the column with a heading and has to sit under it rather than compete with it. */ .eiq-logo--band{height:56px;width:auto;display:block;margin-bottom:var(--sp-4);} @media(max-width:560px){.eiq-logo--hero{height:58px;}} /* "by Strategy9", recommendation 1. The endorsement sits beside the mark, in the page's own typeface — it is a line of type, not part of the logo. */ .eiq-endorse{ display:flex;align-items:center;gap:10px; } .eiq-endorse__by{ font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);padding-left:10px;border-left:1px solid var(--line); white-space:nowrap; } .s9-hero .eiq-endorse__by, .s9-footer .eiq-endorse__by{ color:rgba(255,255,255,.62);border-left-color:rgba(255,255,255,.25); } @media(max-width:560px){.eiq-endorse__by{display:none;}} /* ===== BLOCK I — hero layout ================================ EXTENDS CORE == Recommendation 7: copy left, scene right. The core hero is a single column, so this is one grid declaration, not a new hero. The stat tiles stay exactly where they were, full width underneath. */ .eiq-herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;} @media(max-width:900px){.eiq-herogrid{grid-template-columns:1fr;gap:34px;}} /* ===== BLOCK J — small corrections ========================== SITE-ONLY ===== Things the refresh exposes rather than introduces. */ /* The campaign bar needs no rule here. It used to: core painted it --card white and this file overrode it to the cream. Core 1.14.0 tints the bar with --brand-light, which for EmployeeIQ IS the cream, so the override was dead weight and is gone. */ /* .s9-checks marks are --green, a shared semantic. They stay green: a check is a verdict, not a brand element. Same reasoning as the severity ramp. */ /* Section alternation: --alt is --card white, which against the warm ground is now a real change of surface rather than the near-invisible one it was. No rule needed — noted so nobody "fixes" it. */ /* ===== BLOCK K — the campaign line ========================== NEW COMPONENT = Recommendation 8 — the campaign statement on job-fair.html. Set in the display face at hero scale, above the product headline, and the only place on either page where type goes all-caps at size. Deliberately loud: it is a campaign line, and it has one job. It is a

, never the

— the product headline is the sentence that explains what this is. Specificity: core sets .s9-hero p{font-size:19px} (0,1,1), which outranks a bare class. Scope it to the hero so the campaign line wins. Moved here verbatim from the mockup page's