/* ============================================================================ BOUNTEOUS BRAND THEME · v1.0 · drop-in CSS ---------------------------------------------------------------------------- "An AI Services firm where agentic engineering and human experience converge." Self-contained: import the fonts (below) + this file, then use the tokens and helper classes. Light body + dark hero is the signature contrast. ============================================================================ */ /* Fonts — add to : Inter = body / UI / tables. Space Grotesk = display headings + KPI numbers ONLY. */ :root { /* ── Core brand palette (the canonical 5) ── */ --midnight: #0B111C; /* primary dark surface, hero base */ --indigo: #33139F; /* anchoring brand color, gradient mid */ --deep-violet: #693AF4; /* hero glow accents */ --purple-rain: #853EFF; /* primary action / interactive accent / gradient start */ --electric-blue: #34B4FF; /* highlight / gradient end / focus rings */ /* ── Solution-pillar accents (use only when representing that pillar) ── */ --magenta: #D200B5; /* AI-Enhanced Experience Transformation */ --aqua: #2EEFEC; /* Agentic Business Reinvention */ /* Intelligent Product Engineering = --electric-blue */ --coral: #FF4759; /* Modern Business Platforms */ /* ── Neutral surface tokens (light mode) ── */ --ink: #0F172A; /* body text */ --slate: #475569; /* secondary text */ --slate-light: #94A3B8; /* tertiary text */ --line: #E5E7EB; /* borders (the brand separates via borders, not shadows) */ --bg: #FAFAFB; /* page background */ --bg-card: #FFFFFF; /* card background */ /* ── Data-viz series ── */ --won: #34B4FF; /* electric blue */ --open: #853EFF; /* purple rain */ --lost: #FF4759; /* coral */ --selling-ai: #0E6F6E; /* deep teal */ --using-ai: #D200B5; /* magenta */ --non-ai: #94A3B8; /* slate */ /* ── Type ── */ --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; } /* ── Signature gradients ── */ .grad-hero { background: radial-gradient(ellipse at 18% 5%, rgba(105,58,244,.55) 0%, transparent 60%), radial-gradient(ellipse at 88% 95%, rgba(52,180,255,.42) 0%, transparent 55%), linear-gradient(135deg, #0B111C 0%, #1A0B5C 50%, #33139F 100%); } .grad-accent { background: linear-gradient(90deg, #853EFF 0%, #34B4FF 100%); } .grad-text { background: linear-gradient(90deg, #853EFF 0%, #34B4FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .card-dark { background: linear-gradient(160deg, #0B111C 0%, #1F0F66 70%, #33139F 100%); color: #fff; border-radius: 1rem; } /* Solution-pillar gradients — use only for that pillar */ .pillar-aex { background: linear-gradient(160deg, #D200B5 0%, #33139F 65%, #0B111C 100%); } .pillar-abr { background: linear-gradient(160deg, #2EEFEC 0%, #33139F 65%, #0B111C 100%); } .pillar-ipe { background: linear-gradient(160deg, #34B4FF 0%, #33139F 65%, #0B111C 100%); } .pillar-mbp { background: linear-gradient(160deg, #FF4759 0%, #33139F 65%, #0B111C 100%); } /* ── Tinted chip / pill families (soft tints, never solid heavy fills) ── */ .chip-aqua { background:#D6FBFA; color:#0E6F6E; } /* good */ .chip-coral { background:#FFE2E5; color:#9F1230; } /* bad */ .chip-magenta { background:#FBE4F4; color:#86006F; } /* watch */ .chip-indigo { background:#E6E0FF; color:#33139F; } /* info */ .chip-blue { background:#DCEEFF; color:#0E5DAA; } /* neutral-info */ .chip-slate { background:#F1F5F9; color:#334155; } /* default */ /* ── Base element defaults (optional — apply to body) ── */ body { font-family: var(--font-body); background: var(--bg); color: var(--ink); } .font-display { font-family: var(--font-display); } /* ── Component starters ── */ .b-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; } .b-kpi { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .b-kpi .val { font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .b-btn { border:none; border-radius:8px; padding:.5rem .9rem; font:600 12.5px var(--font-body); cursor:pointer; } .b-btn-primary{ background: linear-gradient(90deg,#853EFF,#34B4FF); color:#fff; } .b-btn-ghost { background:#fff; border:1px solid var(--line); color:var(--ink); } .b-btn-ghost:hover { background:#F8FAFC; } /* Tabs: inactive slate text; active = midnight fill OR electric-blue underline */ .b-tab { padding:.7rem 1.05rem; color:var(--slate-light); font:500 13.5px var(--font-body); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; } .b-tab.active { color:#fff; border-bottom-color: var(--electric-blue); } /* ── DO / DON'T ────────────────────────────────────────────────────────────── DO open pages with a .grad-hero band; reserve .grad-text for the key noun. DO use Space Grotesk only for h1/h2 + KPI numbers; body stays Inter. DO separate cards with borders, not drop shadows. DON'T use Tailwind default indigo/purple/blue — use these tokens. DON'T invent new accent colors; pick the closest tint family. DON'T use solid heavy chip fills — use the tint pairs above. ──────────────────────────────────────────────────────────────────────────── */