/* * cluster-modifiers.css * ───────────────────────────────────────────────────────────────────────── * Cluster visual differentiation via body class modifiers. * Applied via: * * Philosophy: * - Subtle shifts — same brand, different character * - Hero backgrounds and accent tones are the primary levers * - Dark sections (hooks, evidence) stay consistent across clusters * - No structural changes — layout and spacing unchanged * * Usage in layouts: * All rules use body-level selectors so they apply automatically. * No changes needed to layout files — just include this stylesheet. * * Add to BaseLayout.astro : * * Or import in a global CSS file. * ───────────────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ CYBERSECURITY & RESILIENCE Character: serious, technical, higher stakes Shifts: hero background darker/cooler, eyebrow slightly more urgent ════════════════════════════════════════════════════════════════════════ */ .cluster-cybersecurity-resilience .conv-hero { background: #EEF0EC; } .cluster-cybersecurity-resilience .conv-hero::before { background: radial-gradient(circle, rgba(27,94,69,0.09), transparent 70%); } .cluster-cybersecurity-resilience .conv-hero::after { background: radial-gradient(circle, rgba(15,23,42,0.04), transparent 70%); } .cluster-cybersecurity-resilience .auth-hero { background: #F2F4F0; border-bottom-color: rgba(27,94,69,0.12); } .cluster-cybersecurity-resilience .hub-hero { background: #EDEEE9; } /* Eyebrow gets a slightly more urgent green tint */ .cluster-cybersecurity-resilience .conv-eyebrow, .cluster-cybersecurity-resilience .auth-eyebrow, .cluster-cybersecurity-resilience .hub-eyebrow, .cluster-cybersecurity-resilience .cmp-eyebrow { color: #9A6B1A; } /* ════════════════════════════════════════════════════════════════════════ NETWORKING Character: technical, infrastructure, precision Shifts: hero slightly cooler/greyer, clean and structured ════════════════════════════════════════════════════════════════════════ */ .cluster-networking .conv-hero { background: #EFF1F2; } .cluster-networking .conv-hero::before { background: radial-gradient(circle, rgba(15,23,42,0.04), transparent 70%); } .cluster-networking .conv-hero::after { background: radial-gradient(circle, rgba(27,94,69,0.04), transparent 70%); } .cluster-networking .auth-hero { background: #F0F2F3; } .cluster-networking .hub-hero { background: #ECF0F2; } /* Networking uses a slightly blue-shifted eyebrow */ .cluster-networking .conv-eyebrow, .cluster-networking .auth-eyebrow, .cluster-networking .hub-eyebrow, .cluster-networking .cmp-eyebrow { color: #7A6530; letter-spacing: 0.16em; } /* ════════════════════════════════════════════════════════════════════════ CLOUD & INFRASTRUCTURE Character: modern, scalable, forward-looking Shifts: warmer hero, slightly more open feel ════════════════════════════════════════════════════════════════════════ */ .cluster-cloud .conv-hero { background: #F3F1EB; } .cluster-cloud .auth-hero { background: #F5F3ED; } .cluster-cloud .hub-hero { background: #F4F2EC; } /* Cloud cards get a slightly warmer gradient */ .cluster-cloud .card { background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F5 100%); } /* ════════════════════════════════════════════════════════════════════════ MSP (MANAGED IT) Character: operational, reliable, partnership-focused Shifts: stays closest to base brand — warm, approachable ════════════════════════════════════════════════════════════════════════ */ /* MSP uses default warm-white — no hero shift needed */ /* Minor: slightly warmer card background */ .cluster-msp .card { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F3 100%); } /* MSP hook band gets a fractionally warmer slate */ .cluster-msp .conv-hook { background: #111827; } /* ════════════════════════════════════════════════════════════════════════ TECHNOLOGY ADVISORY Character: strategic, consultative, board-level Shifts: more restrained/formal hero, cooler palette ════════════════════════════════════════════════════════════════════════ */ .cluster-technology-advisory .conv-hero { background: #F0EEE8; } .cluster-technology-advisory .auth-hero { background: #F2F0EA; } .cluster-technology-advisory .hub-hero { background: #EFECEA; } /* Advisory eyebrow more restrained */ .cluster-technology-advisory .conv-eyebrow, .cluster-technology-advisory .auth-eyebrow, .cluster-technology-advisory .hub-eyebrow { letter-spacing: 0.18em; font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════ AI & AUTOMATION Character: forward-looking, innovative, precise Shifts: slightly cooler hero, more technical feel ════════════════════════════════════════════════════════════════════════ */ .cluster-ai-automation .conv-hero { background: #EDEEF2; } .cluster-ai-automation .auth-hero { background: #EEF0F4; } /* AI cards get a subtly cooler feel */ .cluster-ai-automation .card { background: linear-gradient(180deg, #FFFFFF 0%, #F8F8FB 100%); } /* ════════════════════════════════════════════════════════════════════════ INDUSTRIES Character: sector-specific, applied, practical Shifts: hub hero uses industry variant (already handled in HubLayout) Additional: conversion pages in industries cluster get warmer hero ════════════════════════════════════════════════════════════════════════ */ .cluster-industries .conv-hero { background: #F2EFE8; } .cluster-industries .conv-hero::before { background: radial-gradient(circle, rgba(184,138,46,0.08), transparent 70%); } /* Industry conversion pages get gold-tinted strap */ .cluster-industries .conv-hero-strap { border-left-color: #A07828; } /* ════════════════════════════════════════════════════════════════════════ INSIGHTS Character: editorial, opinionated, authoritative Shifts: insight layout already has dark hero — no change needed Minor: insight body section gets slightly larger line height ════════════════════════════════════════════════════════════════════════ */ .cluster-insights .ins-body p { line-height: 1.80; } .cluster-insights .ins-body h2 { font-weight: 750; } /* ════════════════════════════════════════════════════════════════════════ CASE STUDIES Character: proof, outcomes, credibility Shifts: case study layout already has dark green hero Minor: result numbers slightly larger ════════════════════════════════════════════════════════════════════════ */ .cluster-case-studies .cs-result-num { font-size: 32px; } .cluster-case-studies .cs-stat-num { font-size: 36px; } /* ════════════════════════════════════════════════════════════════════════ GLOBAL (static pages — home, about, contact, legal) Character: brand-defining, accessible, foundational Shifts: stays at pure base brand — no modifications ════════════════════════════════════════════════════════════════════════ */ /* No overrides — global cluster is the canonical base brand expression */ /* ════════════════════════════════════════════════════════════════════════ TEMPLATE + CLUSTER COMBINATIONS Fine-tuned rules for specific template × cluster intersections where the default modifier alone isn't quite right. ════════════════════════════════════════════════════════════════════════ */ /* Cybersecurity comparison pages — table header more intense */ .cluster-cybersecurity-resilience.template-comparison .cmp-table thead tr { background: #0F1F2E; } /* Networking authority pages — narrower, more technical reading width */ .cluster-networking.template-authority .auth-section-inner { max-width: 800px; } /* MSP authority pages — slightly warmer section backgrounds */ .cluster-msp.template-authority .auth-section:nth-child(even) { background: var(--warm-white); } /* Technology advisory conversion pages — more formal hero h1 */ .cluster-technology-advisory.template-conversion .conv-hero h1, .cluster-technology-advisory.template-conversion .conv-hero-inner h1 { font-weight: 650; letter-spacing: -0.04em; }