/*
* ════════════════════════════════════════════════════════════════
* FUTUREBRAINING — SHARED DESIGN SYSTEM
* brand.css · v1.0 · 20 March 2026
*
* Paste this in every HTML (before brand.css link):
*
*
*
*
*
* Contents:
* 1. Design tokens (CSS custom properties)
* 2. Reset + base
* 3. Logo
* 4. Button system
* 5. Hero banner (full-width dark, used on all report/diagnostic pages)
* 6. Section heading system
* 7. Card system (white + semantic tints + dark)
* 8. Value word system ← consistent large-value display (HIGH / L2 / MIXED etc.)
* 9. Capability bars + curiosity signal
* 10. Work shape (3-column track + columns)
* 11. Operating level sub-blocks
* 12. OCC / environment block
* 13. Dark card body elements (insight, action, reflection, CTA list)
* 14. Preview banner (dev/staging only)
* 15. Utility classes
* 16. Print overrides
* 17. Responsive overrides
* ════════════════════════════════════════════════════════════════
*/
/* ════════════════════════════════════════
1. DESIGN TOKENS
════════════════════════════════════════ */
:root {
/* ── Brand colours ──────────────────────
Use for identity, UI chrome, navigation.
Do NOT use to convey data meaning. */
--color-dark: #231B3B;
--color-purple: #483778;
--color-light-purple: #6F658C;
--color-grey-purple: #C7C1D9;
--color-pink: #FF7FE8;
--color-yellow: #DEFF00;
--color-cyan: #72FFFF;
--color-blue-purple: #8052FE;
/* ── Semantic colours ───────────────────
Use ONLY for data meaning. Never swap.
High/L0-L1/Bottleneck/Limiting = red
Medium/L2/Warning/Mixed = amber
Low/L3/Strong/Enabling = green */
--color-red: #E8443A;
--color-amber: #E8922A;
--color-green: #22C55E;
/* ── Semantic tints ─────────────────────
Card backgrounds + borders */
--tint-red-bg: rgba(232, 68, 58, 0.04);
--tint-red-border: rgba(232, 68, 58, 0.18);
--tint-amber-bg: rgba(232, 146, 42, 0.05);
--tint-amber-border: rgba(232, 146, 42, 0.20);
--tint-green-bg: rgba(34, 197, 94, 0.04);
--tint-green-border: rgba(34, 197, 94, 0.18);
/* ── Sub-block tints (operating level) ── */
--subblock-green-bg: rgba(34, 197, 94, 0.09);
--subblock-green-border: rgba(34, 197, 94, 0.20);
--subblock-red-bg: rgba(232, 68, 58, 0.08);
--subblock-red-border: rgba(232, 68, 58, 0.18);
--subblock-purple-bg: rgba(72, 55, 120, 0.08);
--subblock-purple-border: rgba(72, 55, 120, 0.18);
/* ── Typography ─────────────────────── */
--font: 'Poppins', sans-serif;
--tight: -0.027em;
/* ── Layout ─────────────────────────── */
--report-max-width: 780px;
--card-radius: 14px;
--card-padding: 30px 32px;
/* ── Page background ─────────────────── */
--page-bg: #F4F2F9;
}
/* ════════════════════════════════════════
2. RESET + BASE
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--page-bg);
color: var(--color-dark);
min-height: 100vh;
line-height: 1.4;
}
.report-outer {
max-width: var(--report-max-width);
margin: 0 auto;
padding: 28px 24px 100px;
}
/* ════════════════════════════════════════
3. LOGO
════════════════════════════════════════ */
.logo {
font-size: 16px;
font-weight: 700;
letter-spacing: var(--tight);
color: white;
text-decoration: none;
}
.logo .ai { color: var(--color-pink); }
.logo .tm {
color: rgba(255,255,255,0.3);
font-size: 9px;
vertical-align: super;
font-weight: 400;
}
/* Light-background variant */
.logo.dark { color: var(--color-purple); }
.logo.dark .ai { color: var(--color-pink); }
.logo.dark .tm { color: var(--color-light-purple); }
/* ════════════════════════════════════════
4. BUTTON SYSTEM
════════════════════════════════════════ */
/* Ghost — hero nav on dark backgrounds */
.btn-ghost {
font-family: var(--font); font-size: 12px; font-weight: 600;
color: rgba(255,255,255,0.65); background: transparent;
border: 1.5px solid rgba(255,255,255,0.2);
padding: 7px 14px; border-radius: 7px; cursor: pointer;
transition: all 0.14s; white-space: nowrap;
}
.btn-ghost:hover { color: white; border-color: rgba(255,255,255,0.45); }
/* Pink solid — primary CTA in hero nav */
.btn-pink {
font-family: var(--font); font-size: 12px; font-weight: 700;
color: var(--color-dark); background: var(--color-pink);
border: none; padding: 7px 16px; border-radius: 7px;
cursor: pointer; transition: all 0.14s; white-space: nowrap;
}
.btn-pink:hover { background: #FF60E0; }
/* Large CTA — inside dark cards */
.btn-cta {
display: inline-block;
font-family: var(--font); font-size: 15px; font-weight: 700;
color: var(--color-dark); background: var(--color-pink);
border: none; cursor: pointer;
padding: 14px 32px; border-radius: 10px;
text-decoration: none; transition: all 0.14s;
}
.btn-cta:hover { background: #FF60E0; transform: translateY(-1px); }
/* Light outline — light-background pages (survey, landing) */
.btn-outline {
font-family: var(--font); font-size: 13px; font-weight: 600;
color: var(--color-light-purple); background: white;
border: 1.5px solid var(--color-grey-purple);
padding: 8px 16px; border-radius: 8px; cursor: pointer;
transition: all 0.14s;
}
.btn-outline:hover { border-color: var(--color-purple); color: var(--color-purple); }
/* ════════════════════════════════════════
5. HERO BANNER
Full-width dark strip. No border-radius.
Used on all report and diagnostic pages.
════════════════════════════════════════ */
.hero-banner {
background: var(--color-dark);
position: relative;
overflow: hidden;
}
.hero-banner::before {
content: '';
position: absolute; top: -80px; right: -80px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(255,127,232,0.18) 0%, transparent 65%);
border-radius: 50%; pointer-events: none;
}
.hero-banner::after {
content: '';
position: absolute; bottom: -80px; left: -60px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(128,82,254,0.14) 0%, transparent 65%);
border-radius: 50%; pointer-events: none;
}
.hero-nav {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 16px 40px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-nav-actions { display: flex; gap: 10px; }
.hero-body {
position: relative; z-index: 2;
max-width: var(--report-max-width);
margin: 0 auto;
padding: 44px 40px 52px;
}
.hero-eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--color-pink);
margin-bottom: 18px;
}
.hero-name {
font-size: 52px; font-weight: 800; letter-spacing: var(--tight);
color: white; line-height: 1.05; margin-bottom: 10px;
}
.hero-sub {
font-size: 14px; color: rgba(255,255,255,0.45);
margin-bottom: 32px; line-height: 1.5;
}
.hero-sub strong { color: rgba(255,255,255,0.7); font-weight: 500; }
/* Key result values row in hero */
.hero-values { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.hero-value-group { display: flex; flex-direction: column; gap: 3px; }
.hero-value-label {
font-size: 9px; font-weight: 700; letter-spacing: 0.13em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.hero-value-word {
font-size: 24px; font-weight: 800; letter-spacing: var(--tight); line-height: 1;
}
.hero-value-word.red { color: var(--color-red); }
.hero-value-word.amber { color: var(--color-amber); }
.hero-value-word.green { color: var(--color-green); }
.hero-value-word.muted { color: rgba(255,255,255,0.4); }
/* ════════════════════════════════════════
6. SECTION HEADING SYSTEM
════════════════════════════════════════ */
.section-eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--color-light-purple);
margin-bottom: 3px;
}
.section-title {
font-size: 20px; font-weight: 800; letter-spacing: var(--tight);
color: var(--color-dark); line-height: 1.2; margin-bottom: 5px;
}
.section-defn {
font-size: 13px; color: var(--color-light-purple);
margin-bottom: 22px; line-height: 1.55; font-style: italic;
}
/* ════════════════════════════════════════
7. CARD SYSTEM
════════════════════════════════════════ */
.card {
background: white; border-radius: var(--card-radius);
padding: var(--card-padding); margin-bottom: 8px;
border: 1px solid rgba(199,193,217,0.5);
}
.card.tint-red { background: var(--tint-red-bg); border-color: var(--tint-red-border); }
.card.tint-amber { background: var(--tint-amber-bg); border-color: var(--tint-amber-border); }
.card.tint-green { background: var(--tint-green-bg); border-color: var(--tint-green-border); }
.card-dark {
background: var(--color-dark); border-radius: var(--card-radius);
padding: var(--card-padding); margin-bottom: 8px;
}
.card-dark .section-eyebrow { color: rgba(255,255,255,0.3); }
.card-dark .section-title { color: white; }
.card-dark .section-defn { color: rgba(255,255,255,0.35); }
/* ════════════════════════════════════════
8. VALUE WORD SYSTEM
Consistent large-value display for all
key results. No boxes. No borders.
Semantic mapping:
Impact: HIGH=red MEDIUM=amber LOW=green
Level: L0=red L1=red L2=amber
L3-Ready=green L3=green
OCC: Limiting=red Mixed=amber Enabling=green
Readiness score: muted (number only, + anchor label below)
════════════════════════════════════════ */
.value-word {
font-size: 52px; font-weight: 800; letter-spacing: var(--tight);
line-height: 1; margin-bottom: 4px;
}
.value-sub {
font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
text-transform: uppercase; margin-bottom: 18px;
}
.value-word.red, .value-sub.red { color: var(--color-red); }
.value-word.amber, .value-sub.amber { color: var(--color-amber); }
.value-word.green, .value-sub.green { color: var(--color-green); }
.value-word.muted, .value-sub.muted { color: var(--color-light-purple); }
/* ════════════════════════════════════════
9. CAPABILITY BARS + CURIOSITY SIGNAL
════════════════════════════════════════ */
.cap-bars { display: flex; flex-direction: column; gap: 13px; margin-bottom: 20px; }
.cap-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.cap-bar-name { font-size: 13px; font-weight: 600; color: var(--color-dark); }
.cap-bar-tag {
font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
text-transform: uppercase; padding: 3px 9px; border-radius: 4px;
}
.cap-bar-tag.strong { background: rgba(34,197,94,0.12); color: var(--color-green); }
.cap-bar-tag.bottleneck { background: rgba(232,146,42,0.14); color: var(--color-amber); }
.cap-bar-tag.bottleneck.low { background: rgba(232,68,58,0.12); color: var(--color-red); }
.cap-bar-track { background: rgba(199,193,217,0.35); border-radius: 5px; height: 8px; overflow: hidden; }
.cap-bar-fill { height: 100%; border-radius: 5px; }
.cap-bar-fill.strong { background: var(--color-green); }
.cap-bar-fill.bottleneck { background: var(--color-amber); }
.cap-bar-fill.bottleneck.low { background: var(--color-red); }
.readiness-note {
font-size: 12.5px; color: var(--color-light-purple);
margin-bottom: 22px; line-height: 1.5;
}
.curiosity-signal {
background: linear-gradient(135deg, #1a1030, #2a1f45);
border-radius: 10px; padding: 16px 20px;
display: flex; align-items: flex-start; gap: 12px;
}
.curiosity-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--color-cyan); box-shadow: 0 0 8px var(--color-cyan);
flex-shrink: 0; margin-top: 4px;
}
.curiosity-signal-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--color-cyan); margin-bottom: 4px;
}
.curiosity-signal-text { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.55; }
/* ════════════════════════════════════════
10. WORK SHAPE — TRACK + 3-COLUMN GRID
════════════════════════════════════════ */
.work-shape-track {
height: 10px; border-radius: 6px; display: flex; overflow: hidden; margin-bottom: 1px;
}
.ws-under { background: var(--color-red); }
.ws-moving { background: var(--color-amber); }
.ws-human { background: var(--color-green); }
.work-cols {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 1px; background: rgba(199,193,217,0.4);
border-radius: 10px; overflow: hidden;
}
.work-col { padding: 16px 14px; }
.work-col.under { background: rgba(232,68,58,0.07); }
.work-col.moving { background: rgba(232,146,42,0.07); }
.work-col.human { background: rgba(34,197,94,0.07); }
.work-col:first-child { border-radius: 10px 0 0 10px; }
.work-col:last-child { border-radius: 0 10px 10px 0; }
.work-col-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.work-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.work-col-dot.under { background: var(--color-red); }
.work-col-dot.moving { background: var(--color-amber); }
.work-col-dot.human { background: var(--color-green); }
.work-col-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.work-col-label.under { color: var(--color-red); }
.work-col-label.moving { color: var(--color-amber); }
.work-col-label.human { color: var(--color-green); }
.work-col-pct { font-size: 26px; font-weight: 800; letter-spacing: var(--tight); margin-bottom: 12px; }
.work-col-pct.under { color: var(--color-red); }
.work-col-pct.moving { color: var(--color-amber); }
.work-col-pct.human { color: var(--color-green); }
.work-col-tasks { display: flex; flex-direction: column; gap: 5px; }
.work-task {
font-size: 12px; color: var(--color-dark); line-height: 1.4;
padding: 6px 8px; background: rgba(255,255,255,0.7); border-radius: 6px;
}
/* ════════════════════════════════════════
11. OPERATING LEVEL SUB-BLOCKS
HOW YOU WORK = green
PRIMARY RISK = red
NEXT LEVEL = purple
════════════════════════════════════════ */
.level-description { font-size: 15px; color: var(--color-dark); line-height: 1.75; margin-bottom: 20px; }
.level-subs { display: flex; flex-direction: column; gap: 8px; }
.level-sub { border-radius: 10px; padding: 14px 18px; }
.level-sub.how { background: var(--subblock-green-bg); border: 1px solid var(--subblock-green-border); }
.level-sub.risk { background: var(--subblock-red-bg); border: 1px solid var(--subblock-red-border); }
.level-sub.next { background: var(--subblock-purple-bg); border: 1px solid var(--subblock-purple-border); }
.level-sub-label {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; margin-bottom: 5px;
}
.level-sub.how .level-sub-label { color: var(--color-green); }
.level-sub.risk .level-sub-label { color: var(--color-red); }
.level-sub.next .level-sub-label { color: var(--color-purple); }
.level-sub-text { font-size: 13.5px; color: var(--color-dark); line-height: 1.6; }
.level-sub.next .level-sub-text { color: var(--color-purple); font-weight: 500; }
/* ════════════════════════════════════════
12. OCC / ENVIRONMENT
════════════════════════════════════════ */
.occ-narrative { font-size: 15px; color: var(--color-dark); line-height: 1.75; }
/* ════════════════════════════════════════
13. DARK CARD BODY ELEMENTS
════════════════════════════════════════ */
.insight-body { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.8; }
.action-body { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.75; margin-bottom: 20px; }
.reflection-box {
background: rgba(255,255,255,0.07); border-radius: 10px;
padding: 18px 20px; border-left: 3px solid var(--color-yellow);
}
.reflection-label {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--color-yellow); margin-bottom: 8px;
}
.reflection-text { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.65; font-style: italic; }
.cta-tagline { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 22px; line-height: 1.65; }
.cta-list { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 9px; }
.cta-list li { display: flex; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.cta-list li::before { content: '→'; color: var(--color-pink); font-weight: 700; flex-shrink: 0; }
/* ════════════════════════════════════════
14. PREVIEW BANNER (dev/staging only)
════════════════════════════════════════ */
.preview-banner {
background: var(--color-yellow); color: var(--color-dark);
font-family: var(--font); font-size: 11px; font-weight: 700;
text-align: center; padding: 7px 24px;
letter-spacing: 0.08em; text-transform: uppercase;
position: sticky; top: 0; z-index: 300;
}
/* ════════════════════════════════════════
15. UTILITY CLASSES
════════════════════════════════════════ */
.text-red { color: var(--color-red); }
.text-amber { color: var(--color-amber); }
.text-green { color: var(--color-green); }
.text-muted { color: var(--color-light-purple); }
.text-pink { color: var(--color-pink); }
.text-white { color: white; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
/* ════════════════════════════════════════
16. PRINT OVERRIDES
════════════════════════════════════════ */
@media print {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
.preview-banner { display: none; }
.hero-nav-actions { display: none; }
.card-cta { display: none; }
body { background: white; }
/* Hero goes white with dark border */
.hero-banner {
background: white !important;
border-bottom: 2px solid var(--color-dark);
}
.hero-banner::before,
.hero-banner::after { display: none; }
.hero-name { color: var(--color-dark) !important; }
.hero-sub { color: var(--color-light-purple) !important; }
.hero-eyebrow { color: var(--color-purple) !important; }
.logo { color: var(--color-dark) !important; }
.logo .ai { color: var(--color-pink) !important; }
.hero-value-label { color: var(--color-light-purple) !important; }
/* Force semantic colours through */
.value-word.red, .value-sub.red { color: var(--color-red) !important; }
.value-word.amber, .value-sub.amber { color: var(--color-amber) !important; }
.value-word.green, .value-sub.green { color: var(--color-green) !important; }
.value-word.muted, .value-sub.muted { color: var(--color-light-purple) !important; }
/* Keep semantic tints */
.card.tint-red { background: var(--tint-red-bg) !important; border-color: var(--tint-red-border) !important; }
.card.tint-amber { background: var(--tint-amber-bg) !important; border-color: var(--tint-amber-border) !important; }
.card.tint-green { background: var(--tint-green-bg) !important; border-color: var(--tint-green-border) !important; }
/* Keep dark cards dark */
.card-dark { background: var(--color-dark) !important; }
}
/* ════════════════════════════════════════
17. RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 620px) {
.hero-nav { padding: 14px 20px; }
.hero-body { padding: 32px 20px 40px; }
.hero-name { font-size: 36px; }
.hero-values { gap: 20px; }
.report-outer { padding: 16px 14px 80px; }
.card, .card-dark { padding: 22px 18px; }
.value-word { font-size: 40px; }
.work-cols {
grid-template-columns: 1fr;
gap: 0;
background: none;
}
.work-col { border-radius: 0 !important; border-bottom: 1px solid rgba(199,193,217,0.3); }
.work-col:last-child { border-bottom: none; }
}