/* ============================================================ GUARDIAN MESH — BRANDED EXPERIENCE STYLES ------------------------------------------------------------ Loaded on every gated portal page. Two concerns: 1. COMPETITOR HIDE RULES When is set by js/branded.js, every element tagged with data-competitor="wavelynx" or "legic" is hidden. Same pattern for WaveLynx-branded and LEGIC-branded sessions. 2. BRAND ACCENT TOUCHPOINTS Subtle but clear use of --brand-accent (set per-session by js/branded.js) on CTAs, focus rings, and active nav indicators. Unbranded sessions keep the charcoal default from css/tokens.css so there's no visual change. To add a new partner: add a matching hide-rule block below. ============================================================ */ /* ── 1. Competitor hide rules ── */ /* HID-branded session: hide WaveLynx + LEGIC */ [data-branded-experience="hid"] [data-competitor="wavelynx"], [data-branded-experience="hid"] [data-competitor="legic"], /* WaveLynx-branded session: hide HID + LEGIC */ [data-branded-experience="wavelynx"] [data-competitor="hid"], [data-branded-experience="wavelynx"] [data-competitor="legic"], /* LEGIC-branded session: hide HID + WaveLynx */ [data-branded-experience="legic"] [data-competitor="hid"], [data-branded-experience="legic"] [data-competitor="wavelynx"] { display: none !important; } /* ── 2. Brand accent token is still available ── js/branded.js continues to set --brand-accent on when a branded session is active. The tool chrome (buttons, focus rings, nav hovers) is INTENTIONALLY monochromatic per brand-guidelines.html: "The Guardian Mesh system is intentionally monochromatic. Brand color may appear in partner-owned areas only — never in system UI." So this stylesheet no longer paints the brand color onto CTAs or focus rings. Partner-owned areas (welcome hero, any future branded surface) can opt in explicitly via var(--brand-accent) from their own page-level CSS. */ /* ── 2a. Welcome hero background — partner-owned surface ── The welcome hero on partner-portal.html is the ONE place we paint the brand color (per brand-guidelines.html monochrome principle). All three partners use a solid brand-color fill — no gradient. Matt iterated through the full gradient menu (see the dev-only brand preview toggle in partner-portal.html, gated behind ?brand-preview=1) and picked solid fill for consistency and clarity. Iteration history: B+ gradient → B++ → slider → solid. Brand color sources: - HID: Dark Blue #002D56 (Matt's pick over HID Blue PMS 287 #003087 — darker, more "operator tool" feel). hidglobal.com/brand-guidelines - WaveLynx: Dark teal-blue #1C5074 (Brand Guidelines April 2025 p.10) - LEGIC: LEGIC blue #003c71 (Pantone 541, CD Guidelines v7.1 p.11) */ [data-branded-experience="hid"] .welcome-hero { background: #002D56 !important; } [data-branded-experience="wavelynx"] .welcome-hero { background: #1C5074 !important; } [data-branded-experience="legic"] .welcome-hero { background: #003c71 !important; } /* ── 3. Co-brand lockup (Mesh × Partner brand chip) ── Partner-portal renders its own large welcome-hero lockup via JS. This .mesh-brand-chip element is injected by js/branded.js into the existing .site-nav or .id-bar-right container on other gated pages, so it reads as part of the navigation chrome rather than a floating badge. Inherits color from the nav context. */ .mesh-brand-chip { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; line-height: 1; color: inherit; pointer-events: none; user-select: none; } .mesh-brand-chip-mesh { width: 13px; height: 13px; flex-shrink: 0; } .mesh-brand-chip-x { font-size: 11px; font-weight: 300; opacity: 0.4; line-height: 1; } .mesh-brand-chip-partner { height: 12px; width: auto; max-width: 70px; object-fit: contain; display: block; } /* ── Mode: .site-nav (quote-builder, solutionbuilder, mesh-quotes-portal) ── Append to the end of the breadcrumb row. Separated from the breadcrumb text with a small gap on the left. Pushes to the far right of the nav. */ .mesh-brand-chip-site-nav { margin-left: auto; padding-left: 14px; font-size: 10px; letter-spacing: 0.02em; } /* ── Mode: .id-bar (pricing-calc, wallet-guide, brand-guide, status) ── Inserted as the first child of .id-bar-right, so it sits to the left of the "Partner Portal" link. The parent's own gap handles spacing. */ .mesh-brand-chip-id-bar .mesh-brand-chip-mesh { width: 14px; height: 14px; } .mesh-brand-chip-id-bar .mesh-brand-chip-partner { height: 13px; } /* Dark theme: the mesh SVG uses currentColor, so it picks up nav color automatically. Partner logos are always the color version so they look fine on light backgrounds; on dark backgrounds we can rely on the logo being designed for it. */ /* Suppress the chip in print so it doesn't end up on PDF exports */ @media print { .mesh-brand-chip { display: none !important; } }