/*
* ════════════════════════════════════════════════════════════════
* 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;
--section-max: 1140px;
--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. SITE NAVIGATION
════════════════════════════════════════ */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
height: 68px;
background: var(--color-purple);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 2px solid rgba(255,127,232,0.22);
box-shadow: 0 2px 20px rgba(0,0,0,0.22);
}
.site-nav ul,
ul.site-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 2px;
}
.site-nav li { display: flex; }
.site-nav a {
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.72);
text-decoration: none;
padding: 7px 16px;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
letter-spacing: -0.01em;
}
.site-nav a:hover {
color: white;
background: rgba(255,255,255,0.1);
}
.site-nav a.active {
color: white;
background: rgba(255,255,255,0.13);
font-weight: 600;
}
.nav-cta {
font-size: 13px;
font-weight: 700;
color: var(--color-dark);
background: var(--color-pink);
text-decoration: none;
padding: 9px 22px;
border-radius: 8px;
white-space: nowrap;
letter-spacing: -0.01em;
transition: background 0.15s, transform 0.1s;
}
.nav-cta:hover {
background: #FF60E0;
transform: translateY(-1px);
}
/* ── Hamburger button ─────────────────── */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px 4px;
margin-left: 8px;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: rgba(255,255,255,0.85);
border-radius: 2px;
transition: all 0.22s ease;
}
.nav-hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Mobile nav drawer ───────────────── */
.mobile-nav {
display: none;
position: fixed;
top: 68px;
left: 0; right: 0;
background: var(--color-dark);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 8px 0 20px;
z-index: 99;
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
display: block;
font-family: var(--font);
font-size: 16px;
font-weight: 500;
color: rgba(255,255,255,0.75);
text-decoration: none;
padding: 14px 24px;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: color 0.15s, background 0.15s;
}
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover { color: white; background: rgba(255,255,255,0.04); }
.mobile-nav a.active { color: var(--color-pink); }
.mobile-nav .mobile-nav-cta {
display: block;
margin: 16px 24px 0;
text-align: center;
font-family: var(--font);
font-size: 14px;
font-weight: 700;
color: var(--color-dark);
background: var(--color-pink);
text-decoration: none;
padding: 12px 24px;
border-radius: 10px;
border-bottom: none;
transition: background 0.15s;
}
.mobile-nav .mobile-nav-cta:hover { background: #FF60E0; color: var(--color-dark); }
@media (max-width: 768px) {
.site-header { padding: 0 20px; }
.site-nav { display: none; }
.nav-cta { display: none; } /* hidden — mobile CTA is inside drawer */
.nav-hamburger { display: flex; }
}
/* ════════════════════════════════════════
5. SITE FOOTER
════════════════════════════════════════ */
.site-footer {
background: var(--color-dark);
border-top: 1px solid rgba(255,255,255,0.07);
padding: 60px 40px 32px;
}
.footer-inner {
max-width: var(--section-max);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo {
font-size: 16px;
font-weight: 700;
letter-spacing: var(--tight);
color: white;
text-decoration: none;
}
.footer-logo .ai { color: var(--color-pink); }
.footer-tagline {
font-size: 13px;
color: rgba(255,255,255,0.4);
margin: 10px 0 0;
line-height: 1.6;
}
.footer-col-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 16px;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 14px;
color: rgba(255,255,255,0.55);
text-decoration: none;
transition: color 0.15s;
}
.footer-links a:hover { color: white; }
.footer-bottom {
max-width: var(--section-max);
margin: 28px auto 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-legal {
font-size: 12px;
color: rgba(255,255,255,0.3);
}
.footer-social a {
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.4);
text-decoration: none;
transition: color 0.15s;
}
.footer-social a:hover { color: white; }
@media (max-width: 768px) {
.site-footer { padding: 48px 20px 28px; }
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
/* ════════════════════════════════════════
6. BUTTON SYSTEM
════════════════════════════════════════ */
/* Primary — solid pink, used in page body CTAs */
.btn-primary {
display: inline-block;
font-family: var(--font); font-size: 15px; font-weight: 700;
color: var(--color-dark); background: var(--color-pink);
text-decoration: none;
padding: 13px 28px; border-radius: 10px;
transition: opacity 0.15s; white-space: nowrap;
}
.btn-primary:hover { opacity: 0.88; }
/* Secondary — ghost outline, used in page body CTAs */
.btn-secondary {
display: inline-block;
font-family: var(--font); font-size: 15px; font-weight: 600;
color: rgba(255,255,255,0.7); background: transparent;
text-decoration: none;
border: 1.5px solid rgba(255,255,255,0.2);
padding: 12px 28px; border-radius: 10px;
transition: all 0.15s; white-space: nowrap;
}
.btn-secondary:hover { color: white; border-color: rgba(255,255,255,0.45); }
/* 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 {
/* ── Page setup ──────────────────────── */
@page {
size: A4;
margin: 14mm 16mm 16mm;
}
@page :first {
margin-top: 0; /* hero banner bleeds to top on page 1 */
}
/* Force all colours through — must be on root */
html {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* ── Hide navigation chrome ──────────── */
.preview-banner,
.hero-nav-actions,
.hero-nav .btn-ghost,
.hero-nav .btn-pink,
.site-header,
.site-footer,
.card-cta { display: none !important; }
/* ── Body ────────────────────────────── */
body {
background: white !important;
font-size: 13px;
}
.report-outer {
padding: 20px 0 40px;
max-width: 100%;
}
/* ── Page break rules ────────────────── */
.card,
.card-dark,
.week-block,
.tool-card { page-break-inside: avoid; break-inside: avoid; }
.card + .card,
.card + .card-dark,
.card-dark + .card { page-break-before: auto; }
h2, h3 { page-break-after: avoid; break-after: avoid; }
/* ── Hero: dark brand block, print solid ── */
.hero-banner {
background: var(--color-dark) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
page-break-after: avoid;
break-after: avoid;
margin: -14mm -16mm 0; /* bleed to page edges */
padding-left: 16mm;
padding-right: 16mm;
}
.hero-banner::before,
.hero-banner::after { display: none; }
/* Hero text stays white on dark */
.hero-name { color: white !important; }
.hero-sub { color: rgba(255,255,255,0.7) !important; }
.hero-eyebrow { color: var(--color-pink) !important; }
.hero-value-label { color: rgba(255,255,255,0.55) !important; }
.logo { color: white !important; }
.logo .ai { color: var(--color-pink) !important; }
/* ── Value words: force semantic colours ── */
.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; }
/* ── Cards: keep semantic tints ──────── */
.card.tint-red {
background: var(--tint-red-bg) !important;
border-color: var(--tint-red-border) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.card.tint-amber {
background: var(--tint-amber-bg) !important;
border-color: var(--tint-amber-border) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.card.tint-green {
background: var(--tint-green-bg) !important;
border-color: var(--tint-green-border) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* ── Dark cards: force solid dark background ── */
.card-dark {
background: var(--color-dark) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.card-dark * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.card-dark .insight-body { color: rgba(255,255,255,0.85) !important; }
.card-dark .action-body { color: rgba(255,255,255,0.8) !important; }
.card-dark .cta-tagline { color: rgba(255,255,255,0.6) !important; }
.card-dark .cta-list li { color: rgba(255,255,255,0.75) !important; }
.card-dark .section-eyebrow { color: rgba(255,255,255,0.45) !important; }
.card-dark .section-title { color: white !important; }
.card-dark .section-defn { color: rgba(255,255,255,0.55) !important; }
.card-dark .reflection-box { background: rgba(255,255,255,0.07) !important; }
.card-dark .reflection-text { color: rgba(255,255,255,0.75) !important; }
.card-dark .reflection-label { color: var(--color-yellow) !important; }
.card-dark .btn-cta { display: none; }
/* ── Sub-blocks: keep tinted ─────────── */
.level-sub.how {
background: var(--subblock-green-bg) !important;
border-color: var(--subblock-green-border) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.level-sub.risk {
background: var(--subblock-red-bg) !important;
border-color: var(--subblock-red-border) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.level-sub.next {
background: var(--subblock-purple-bg) !important;
border-color: var(--subblock-purple-border) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* ── Capability bars ─────────────────── */
.cap-bar-track {
background: var(--color-grey-purple) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.cap-bar-fill.strong { background: var(--color-green) !important; }
.cap-bar-fill.bottleneck { background: var(--color-amber) !important; }
.cap-bar-fill.bottleneck.low { background: var(--color-red) !important; }
/* ── Work shape track ────────────────── */
.work-shape-track {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.ws-under { background: var(--color-red) !important; }
.ws-moving { background: var(--color-amber) !important; }
.ws-human { background: var(--color-green) !important; }
/* ── Week blocks ─────────────────────── */
.week-block {
border-left-color: var(--color-purple) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* ── Tool cards: ensure visible ──────── */
.tool-card {
border: 1px solid var(--color-grey-purple) !important;
background: white !important;
}
.tool-tag {
background: var(--subblock-purple-bg) !important;
color: var(--color-purple) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
/* ════════════════════════════════════════
17. RESPONSIVE
════════════════════════════════════════ */
/* ── 768px: tablet / large phone ──────── */
@media (max-width: 768px) {
/* Inner page hero (organizations, individuals, about, contact) */
.page-hero { padding: 56px 24px 48px !important; }
.page-hero-inner { max-width: 100% !important; }
.page-title { font-size: clamp(26px, 6vw, 44px) !important; }
.page-sub { font-size: 15px !important; }
/* Footer: 3-col → 2-col at tablet */
.footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* ── 620px: standard mobile ───────────── */
@media (max-width: 620px) {
/* Report hero banner */
.hero-nav { padding: 14px 20px; }
.hero-body { padding: 32px 20px 40px; }
.hero-name { font-size: 36px; }
.hero-values { gap: 20px; flex-wrap: wrap; }
/* Report body */
.report-outer { padding: 16px 14px 80px; }
.card, .card-dark { padding: 22px 18px; }
/* Value words */
.value-word { font-size: 40px; }
/* Work columns: stack vertically */
.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; }
/* Cap bars */
.cap-bar-header { flex-wrap: wrap; gap: 4px; }
/* Week/roadmap blocks */
.week-block { padding: 16px 18px; }
/* Footer: single column */
.footer-inner { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
.site-footer { padding: 40px 20px 24px; }
/* Capability section: tool cards stack */
.tool-cards { grid-template-columns: 1fr !important; }
/* Level sub-blocks: full width */
.level-subs { flex-direction: column; }
}