/* ======================================================================
JoyOS Lab -- Build-Journey Design System
theme.css v1.0 (2026-06-20)
Usage:
Then add + (see below)
and drop the structural classes on your markup.
All values extracted verbatim from:
.planning/revamp-mockups/reference/build-journey-rendered.html
.planning/revamp-mockups/reference/build-journey-feel.md
.planning/revamp-mockups/locked/learning-lab-inner.html
====================================================================== */
/* ======================================================================
0. GOOGLE FONTS
======================================================================
Add these two tags inside BEFORE this stylesheet:
Sora 300-700: all UI text (labels, body, nav, numbers, buttons).
Newsreader italic 400/500: ONLY for pulled quotes / AI voice on dark cards.
====================================================================== */
/* ======================================================================
1. RESET
====================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
/* ======================================================================
2. DESIGN TOKENS (:root)
Verbatim from build-journey-rendered.html :root block.
====================================================================== */
:root {
/* -- Primary brand accent ------------------------------------------- */
--gold: #cbab61; /* CTA buttons, active nav, earnings */
--gold-hover: #d9bc79; /* Lighter hover state */
--gold-subtle: rgba(203,171,97,0.12); /* Card bg tints, section tints */
--gold-dim: rgba(203,171,97,0.35); /* Borders, bar fills */
/* -- Dark surfaces -------------------------------------------------- */
--black: #272525; /* Sidebar, dark cards, body text */
--black-surface: #302e2e; /* Hover state on dark surfaces */
--black-deep: #1e1c1c; /* Deepest dark (sparse use) */
/* -- Cream / warm whites -------------------------------------------- */
--cream: #eeedea; /* Page canvas (the body background) */
--cream-surface: #f5f4f1; /* Topbar, input backgrounds */
--cream-card: #faf9f7; /* Cards sitting on cream canvas */
/* -- Teal secondary accent ------------------------------------------ */
--teal: #039fb2; /* Insight chips, links, EPIC bars */
--teal-subtle: rgba(3,159,178,0.10); /* Chip backgrounds */
/* -- Semantic text alphas on cream ---------------------------------- */
--warm-dim: rgba(39,37,37,0.55); /* Secondary text on cream */
--warm-muted: rgba(39,37,37,0.35); /* Tertiary / placeholder text */
--warm-faint: rgba(39,37,37,0.10); /* Dividers, borders on cream */
/* -- Layout --------------------------------------------------------- */
--sidebar-w: 240px;
/* -- Typography ----------------------------------------------------- */
--font-sans: 'Sora', sans-serif;
--font-serif: 'Newsreader', serif;
/* -- Radii ---------------------------------------------------------- */
--r: 12px; /* cards */
--r-sm: 8px; /* buttons, small components */
--r-lg: 16px; /* hero/banner cards */
/* -- Transitions ---------------------------------------------------- */
--t: 0.15s ease; /* The ONE timing constant -- fast, decisive */
}
/* ======================================================================
3. BASE
====================================================================== */
body {
font-family: var(--font-sans);
background: var(--cream);
color: var(--black);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
/* ======================================================================
4. APP SHELL
Shell classes that form the dashboard frame:
.shell -- root flex container
.sidebar -- 240px fixed column
.topbar -- 56px sticky header
.main -- content area (margin-left: 240px)
.page-content -- inner padding + max-width
====================================================================== */
/* 4a. Root shell (flex, full viewport height) */
.shell {
display: flex;
min-height: 100vh;
}
/* 4b. Sidebar */
.sidebar {
width: var(--sidebar-w);
background: var(--black);
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 100;
padding: 0 0 24px;
}
/* Sidebar logo block */
.sidebar-logo {
padding: 28px 24px 24px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-logo-mark {
display: flex;
align-items: center;
gap: 10px;
}
/*
.logo-gem -- 28x28 gold square with radius 7px holding the J mark.
ALWAYS gold + square-rounded, never circular. Only in sidebar header.
*/
.logo-gem {
width: 28px;
height: 28px;
background: var(--gold);
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.logo-gem svg { width: 14px; height: 14px; }
.logo-text {
font-size: 14px;
font-weight: 600;
color: var(--cream);
letter-spacing: -0.01em;
line-height: 1;
}
.logo-sub {
font-size: 9px;
font-weight: 400;
color: rgba(255,255,255,0.35);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 2px;
}
/* Member block below logo */
.sidebar-member {
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
gap: 10px;
}
/*
Avatar: gold-to-bronze gradient. The ONE gradient allowed in this system.
Used only for user-identity circles.
*/
.member-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #cbab61 0%, #8b7035 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: var(--black);
flex-shrink: 0;
letter-spacing: -0.01em;
}
.member-info { flex: 1; min-width: 0; }
.member-name {
font-size: 12.5px;
font-weight: 500;
color: var(--cream);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-tier {
font-size: 9.5px;
color: var(--gold);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Nav items */
.sidebar-nav {
flex: 1;
padding: 12px 0;
overflow-y: auto;
}
/*
ALLCAPS section labels inside the nav.
25% white opacity -- never full white, never gold.
*/
.nav-section-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.25);
padding: 12px 24px 6px;
}
/*
Nav item default: 50% white opacity, no bg.
Active: gold left-border + gold-subtle bg tint + gold icon.
Hover: 85% white, 4% white bg.
*/
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 20px;
font-size: 12.5px;
font-weight: 400;
color: rgba(255,255,255,0.50);
cursor: pointer;
position: relative;
text-decoration: none;
border-left: 2px solid transparent;
transition: color var(--t), background var(--t);
}
.nav-item:hover {
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.04);
}
.nav-item.active {
color: var(--cream);
background: rgba(203,171,97,0.08);
border-left-color: var(--gold);
font-weight: 500;
}
.nav-item.active .nav-icon { color: var(--gold); opacity: 1; }
.nav-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.7;
}
/* Small badge on nav item (notification count, status) */
.nav-badge {
margin-left: auto;
background: var(--gold);
color: var(--black);
font-size: 9px;
font-weight: 700;
padding: 1.5px 6px;
border-radius: 20px;
}
.nav-badge.teal { background: var(--teal); color: white; }
.sidebar-footer {
padding: 12px 20px 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
/* 4c. Main content column */
.main {
margin-left: var(--sidebar-w);
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/*
Topbar: 56px sticky, cream-surface bg, eyebrow+title left, actions right.
No shadow -- hairline border only.
*/
.topbar {
background: var(--cream-surface);
border-bottom: 1px solid var(--warm-faint);
padding: 0 36px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 50;
}
.topbar-left {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--warm-muted);
}
.topbar-divider {
width: 1px;
height: 14px;
background: var(--warm-faint);
}
.topbar-title {
font-size: 13px;
font-weight: 500;
color: var(--black);
letter-spacing: -0.01em;
}
.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
/*
.topbar-action -- small pill button used in the topbar.
Default is dark (black bg, cream text). Modifier .gold inverts.
*/
.topbar-action {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--black);
color: var(--cream);
border: none;
border-radius: var(--r-sm);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--t), transform 0.1s;
}
.topbar-action:hover { background: var(--black-surface); }
.topbar-action:active { transform: scale(0.98); }
.topbar-action.gold { background: var(--gold); color: var(--black); }
.topbar-action.gold:hover { background: var(--gold-hover); }
/* Inner page padding box */
.page-content {
padding: 32px 36px 48px;
max-width: 1180px;
}
/* ======================================================================
5. TYPOGRAPHY PATTERNS
Eyebrow + Title is the universal section opener.
NEVER start a section with a heading alone.
====================================================================== */
/*
.eyebrow -- 9.5px ALLCAPS gold label above every section heading.
Negative top margin to tuck close to the title below it.
*/
.eyebrow {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 3px;
line-height: 1;
}
.eyebrow.muted { color: var(--warm-muted); } /* secondary / non-gold eyebrow */
/*
.section-title -- 18px 600 heading that always follows .eyebrow.
*/
.section-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--black);
line-height: 1.2;
}
/* Combined block for the eyebrow + title pair */
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 20px;
}
.section-header-left {}
.section-header-right { flex-shrink: 0; }
.section-link {
font-size: 11.5px;
font-weight: 500;
color: var(--teal);
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: opacity var(--t);
}
.section-link:hover { opacity: 0.7; }
/* Section rhythm spacer */
.section-block { margin-bottom: 32px; }
/*
.quote -- Newsreader italic for AI / human-voice content.
ONLY use inside .card-dark or on dark backgrounds.
NEVER use for UI labels, nav, or headings.
*/
.quote {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
/* Quote with left-border accent (inline on cream context) */
.quote-pull {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--black);
line-height: 1.5;
padding-left: 12px;
border-left: 2px solid var(--gold);
}
/* Divider */
.divider {
height: 1px;
background: var(--warm-faint);
margin: 32px 0;
}
/* ======================================================================
6. CARDS
Rule of thumb:
.card-dark = AI / machine / pipeline content (bg #272525)
.card-cream = human / social / action content (bg #faf9f7)
====================================================================== */
/*
.card-dark -- dark inset card on cream canvas.
No border, no shadow -- the dark surface IS the separation.
*/
.card-dark {
background: var(--black);
border-radius: var(--r);
padding: 24px;
position: relative;
overflow: hidden;
}
/*
.card-cream -- cream card sitting on the cream canvas.
Thin warm-faint border provides separation from the canvas.
*/
.card-cream {
background: var(--cream-card);
border: 1px solid rgba(39,37,37,0.08);
border-radius: var(--r);
padding: 24px;
}
/*
.card-surface -- slightly darker cream surface card (cream-surface bg).
Used for secondary panels, marketplace sections.
*/
.card-surface {
background: var(--cream-surface);
border: 1px solid rgba(39,37,37,0.07);
border-radius: var(--r-lg);
padding: 28px 32px;
}
/*
Grain texture overlay for dark hero cards.
Add as an empty as the FIRST child of .card-dark.
Opacity 0.04 -- subtle texture depth without an actual image.
*/
.card-grain {
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
opacity: 0.04;
z-index: 0;
}
/* Ensure card children sit above grain */
.card-dark > *:not(.card-grain) { position: relative; z-index: 1; }
/* ======================================================================
7. BUTTONS
====================================================================== */
/*
.btn-gold -- primary action. Gold bg, black text.
The canonical primary CTA across every mockup.
border-radius 8px (not pill, not 24px).
*/
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 14px;
background: var(--gold);
color: var(--black);
border: none;
border-radius: var(--r-sm);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--t), transform 0.1s;
white-space: nowrap;
}
.btn-gold:hover { background: var(--gold-hover); }
.btn-gold:active { transform: scale(0.98); }
/* Larger gold button (e.g. register / upgrade CTAs) */
.btn-gold-lg {
padding: 9px 20px;
font-size: 12px;
font-weight: 700;
border-radius: var(--r-sm);
background: var(--gold);
color: var(--black);
border: none;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: var(--font-sans);
transition: background var(--t), transform 0.1s;
}
.btn-gold-lg:hover { background: var(--gold-hover); }
.btn-gold-lg:active { transform: scale(0.98); }
/*
.btn-dark -- secondary action on dark cards. Black bg, cream text.
*/
.btn-dark {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--black);
color: var(--cream);
border: none;
border-radius: var(--r-sm);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background var(--t), transform 0.1s;
}
.btn-dark:hover { background: var(--black-surface); }
.btn-dark:active { transform: scale(0.98); }
/*
.btn-ghost -- tertiary / text-like button. Transparent with hairline border.
*/
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: transparent;
color: var(--warm-dim);
border: 1px solid rgba(39,37,37,0.12);
border-radius: var(--r-sm);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background var(--t), color var(--t);
}
.btn-ghost:hover { background: var(--warm-faint); color: var(--black); }
/* ======================================================================
8. CHIPS / BADGES
Two flavors:
.chip-teal -- secondary accent (insights, labels, content types)
.chip-gold -- primary brand chip (tier markers, gold labels)
Both: border-radius 4px, ALLCAPS, tiny. NEVER pill-shaped.
====================================================================== */
/*
.chip-teal -- teal-subtle bg, #027a87 text, 1px teal border.
Exact computed values from build-journey-tokens.txt.
*/
.chip-teal {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
background: var(--teal-subtle);
color: #027a87;
border: 1px solid rgba(3,159,178,0.15);
border-radius: 4px;
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/*
.chip-gold -- gold-subtle bg, warm gold text.
Used for tier labels, Catalyst/Activator markers.
*/
.chip-gold {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: rgba(203,171,97,0.12);
color: #9a7e3a;
border: 1px solid rgba(203,171,97,0.20);
border-radius: 4px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/* Generic inline chip (warm-faint bg, for tags / skill labels) */
.chip {
display: inline-flex;
align-items: center;
padding: 2px 7px;
background: var(--warm-faint);
border-radius: 4px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--warm-dim);
}
/* Status indicator chips (live / draft / review) */
.chip-live { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.20); border-radius: 4px; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.chip-draft { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.40); border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.chip-review { background: rgba(203,171,97,0.15); color: var(--gold); border: 1px solid rgba(203,171,97,0.25); border-radius: 4px; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.chip-purple { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.20); border-radius: 4px; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* ======================================================================
9. PIPELINE BANNER (.pipeline-banner)
The hero Build Pipeline component. Full-width dark card with:
- grain overlay (.card-grain pattern)
- horizontal 5-stage node track
- earnings counter top-right (large gold numerals)
- status strip below stages
====================================================================== */
.pipeline-banner {
background: var(--black);
border-radius: var(--r-lg);
padding: 28px 32px;
margin-bottom: 32px;
position: relative;
overflow: hidden;
}
.pipeline-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.pipeline-headline {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.9);
letter-spacing: -0.01em;
}
.pipeline-sub {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-top: 2px;
}
/* Earnings counter (top-right) */
.pipeline-earnings { text-align: right; }
.earnings-label {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
}
.earnings-amount {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--gold);
line-height: 1;
}
.earnings-period {
font-size: 10px;
color: rgba(255,255,255,0.3);
margin-top: 1px;
}
/* Stage track */
.pipeline-stages {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
}
/*
Gold connector line behind the stage nodes.
Fades from solid gold (35%) to near-transparent (100%) -- left to right.
*/
.pipeline-connector {
position: absolute;
top: 28px; /* center of 56px stage-dot */
left: calc(10%);
right: calc(10%);
height: 1px;
background: linear-gradient(90deg, var(--gold) 35%, rgba(203,171,97,0.20) 65%, rgba(203,171,97,0.08) 100%);
pointer-events: none;
z-index: 0;
}
.pipeline-stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 8px;
}
/* Stage dot variants */
.stage-dot {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
position: relative;
transition: transform 0.2s;
}
.stage-dot.done { background: var(--gold); box-shadow: 0 0 0 4px rgba(203,171,97,0.15); }
.stage-dot.active { background: var(--gold-subtle); border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(203,171,97,0.08), 0 0 20px rgba(203,171,97,0.20); animation: stage-pulse 2.5s ease-in-out infinite; }
.stage-dot.locked { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.stage-dot svg { width: 20px; height: 20px; }
.stage-dot.done svg { color: var(--black); }
.stage-dot.active svg { color: var(--gold); }
.stage-dot.locked svg { color: rgba(255,255,255,0.20); }
/* Activity count bubble on stage dot */
.stage-count {
position: absolute;
top: -4px;
right: -4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--teal);
color: white;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.stage-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); text-align: center; letter-spacing: -0.01em; }
.stage-sub { font-size: 9.5px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 3px; line-height: 1.4; }
.stage-label.locked-text { color: rgba(255,255,255,0.25); }
.stage-sub.locked-sub { color: rgba(255,255,255,0.15); }
@keyframes stage-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(203,171,97,0.08), 0 0 20px rgba(203,171,97,0.20); }
50% { box-shadow: 0 0 0 8px rgba(203,171,97,0.04), 0 0 32px rgba(203,171,97,0.30); }
}
/* Status strip below stages */
.pipeline-status-row {
display: flex;
align-items: center;
gap: 24px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.status-pill { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.45); }
.status-val { font-weight: 600; color: rgba(255,255,255,0.80); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.20); }
.status-dot.green { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.50); animation: dot-breathe 2s ease-in-out infinite; }
.status-dot.gold { background: var(--gold); }
@keyframes dot-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ======================================================================
10. UNLOCK BANNER (.unlock-banner)
The gold-washed upgrade / marketplace-unlock motif.
1.5px gold border, 8% gold bg, 12px radius.
ONLY for tier-gated or upgrade prompts.
====================================================================== */
.unlock-banner {
border: 1.5px solid rgba(203,171,97,0.40);
border-radius: var(--r);
background: rgba(203,171,97,0.08);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 32px;
position: relative;
overflow: hidden;
}
.unlock-banner-glow {
position: absolute;
top: 0; right: 0;
width: 200px;
height: 100%;
background: radial-gradient(ellipse at right center, rgba(203,171,97,0.12) 0%, transparent 70%);
pointer-events: none;
}
/* ======================================================================
11. METRIC TILES (.metric-tile)
4-up grid of bare number tiles -- no card wrapper.
Sit directly on the cream canvas after the pipeline banner.
====================================================================== */
.metric-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--warm-faint);
border: 1px solid var(--warm-faint);
border-radius: var(--r);
overflow: hidden;
margin-bottom: 28px;
}
.metric-tile {
background: var(--cream-card);
padding: 20px 22px;
}
.metric-label {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--warm-muted);
margin-bottom: 6px;
}
/* Large number: 26px, very tight tracking, no card bg */
.metric-value {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.05em;
color: var(--black);
line-height: 1;
}
.metric-value.gold { color: var(--gold); }
.metric-value.teal { color: var(--teal); }
.metric-change { font-size: 10.5px; color: #4ade80; font-weight: 500; margin-top: 3px; }
.metric-change.neutral { color: var(--warm-muted); }
/* ======================================================================
12. EPIC PROGRESS BARS (.epic-bar*)
Horizontal attribute bars for the Joy Profile / EPIC panels.
Track: warm-faint (rgba 39,37,37,0.10).
Fill colors: teal (primary), gold (energy), purple, green.
No borders on bars -- color fill on faint track only.
====================================================================== */
.epic-bars { display: flex; flex-direction: column; gap: 12px; }
.epic-bar-row {
display: flex;
align-items: center;
gap: 10px;
}
.epic-bar-label {
font-size: 11px;
font-weight: 500;
color: var(--black);
width: 90px;
flex-shrink: 0;
letter-spacing: -0.01em;
}
.epic-bar-track {
flex: 1;
height: 6px;
background: var(--warm-faint);
border-radius: 3px;
overflow: hidden;
}
.epic-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
/* Fill color variants */
.fill-teal { background: var(--teal); }
.fill-gold { background: var(--gold); }
.fill-gold-dim { background: var(--gold-dim); }
.fill-purple { background: #a78bfa; }
.fill-green { background: #4ade80; }
.epic-bar-pct {
font-size: 10.5px;
font-weight: 600;
color: var(--warm-dim);
width: 32px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ======================================================================
13. GRID HELPERS
====================================================================== */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 28px;
}
.three-col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
/* Tab strip (inline nav below the pipeline) */
.tab-bar {
display: flex;
margin-bottom: 28px;
border-bottom: 1px solid var(--warm-faint);
}
.tab-btn {
padding: 10px 20px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
color: var(--warm-dim);
background: none;
border: none;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color var(--t), border-color var(--t);
letter-spacing: -0.01em;
white-space: nowrap;
}
.tab-btn:hover { color: var(--black); }
.tab-btn.active { color: var(--black); border-bottom-color: var(--gold); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ======================================================================
14. RESPONSIVE (mobile < 880px, narrow < 560px)
On mobile:
- sidebar hidden; content goes full-width
- 2-col grids -> 1-col
- pipeline banner stages wrap
- topbar pads collapse
====================================================================== */
@media (max-width: 880px) {
.sidebar { display: none; }
.main { margin-left: 0; }
.page-content { padding: 20px 16px 40px; }
.topbar { padding: 0 16px; }
.two-col { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr; }
.metric-row { grid-template-columns: repeat(2, 1fr); }
.pipeline-stages { grid-template-columns: repeat(3, 1fr); }
.pipeline-stages .pipeline-stage:nth-child(4),
.pipeline-stages .pipeline-stage:nth-child(5) { margin-top: 16px; }
.pipeline-connector { display: none; }
.unlock-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
.pipeline-stages { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pipeline-stages .pipeline-stage:nth-child(5) { grid-column: span 2; margin-top: 0; }
.metric-row { grid-template-columns: repeat(2, 1fr); }
.three-col { grid-template-columns: 1fr; }
}
/* ======================================================================
END theme.css
====================================================================== */