/* ============================================================================
PEELBACK DESIGN SYSTEM
----------------------------------------------------------------------------
One editorial language across all four surfaces:
Left Panel · Study Snapshot · Publication Summary · Jargon Scan
The north star is the Publication Summary: warm paper, ONE purple,
Citrine for display titles & numbers, restrained uppercase eyebrows,
hairline borders. This file makes the rest of the product speak it too.
HOW TO USE
1. Keep your Typekit link in .
2. Load this file AFTER main.css:
Layer 1 (TOKENS) redefines the variables your existing CSS already reads,
so most of the product re-skins itself with zero markup changes.
Layer 4 (RETROFIT) mops up the hardcoded hex values that bypass tokens.
3. Build NEW work with the Layer 3 primitives (.pb-eyebrow, .pb-card, …).
============================================================================ */
/* ============================================================================
LAYER 1 — TOKENS
The single source of truth. These names overwrite the ones in base.css,
so anything reading var(--primary), var(--border), var(--spacing-md), etc.
updates automatically.
============================================================================ */
:root {
/* ── BRAND ─────────────────────────────────────────────────────────────
Purple is the ONLY brand hue. Citrine (lime) is a rare punctuation
accent — the hamburger, a focus tick — never a fill or a text colour. */
--pb-purple: #544FF0; /* primary actions, links, active, eyebrows */
--pb-purple-hover: #4340C8; /* hover/pressed for purple surfaces */
--pb-purple-ink: #3F3AB8; /* purple text on light, for AA contrast */
--pb-purple-tint: #F0EFFD; /* hover/selected wash on white */
--pb-purple-wash: #F4F3FE; /* editorial stat-card fill (PS size cards) */
--pb-accent: #E7FD7D; /* citrine — punctuation only, used sparingly */
/* ── INK (text) — one warm-neutral ramp, dark → faint ───────────────────
Pure #000 is retired; #1A1A2E reads as editorial black. */
--pb-ink: #1A1A2E; /* primary text, display numbers in body */
--pb-ink-soft: #575353; /* secondary body, Citrine display in muted slot */
--pb-muted: #6B6B72; /* supporting text, captions */
--pb-faint: #9A9AA2; /* meta, helper, placeholder-ish labels */
--pb-faintest: #BCBBC2; /* hairline labels, decorative ticks */
/* ── PAPER (surfaces) — warm, never cool ────────────────────────────────*/
--pb-paper: #FFFFFF; /* panels, primary cards */
--pb-canvas: #FAFAF8; /* app/page background (warm off-white) */
--pb-surface: #F9F9F7; /* subtle card fill, inset cells */
--pb-surface-2:#F2F1EC; /* deeper inset (code, scrollbar track) */
--pb-dark: #1A1A2E; /* inverted panels (PS policy block) */
/* ── LINES ──────────────────────────────────────────────────────────────*/
--pb-hairline: #E8E7E0; /* default card & divider border */
--pb-line: #DAD8D0; /* stronger divider */
/* ── SEMANTIC (muted, editorial — not neon) ─────────────────────────────*/
--pb-success: #1F8A5B;
--pb-success-bg: #ECF6F0;
--pb-error: #C0392B;
--pb-error-bg: #FBEDEB;
/* ── TYPE ────────────────────────────────────────────────────────────────
Citrine = display titles + numbers ONLY. Aktiv Grotesk = everything else. */
--pb-font-display: 'citrine', 'citrine-variable', Georgia, serif;
--pb-font-body: 'aktiv-grotesk', 'Helvetica Neue', Arial, sans-serif;
/* Type scale (desktop). step : size / line-height / weight / tracking */
--pb-display-xl: 700 40px/1.05 var(--pb-font-display); /* hero title/number */
--pb-display-l: 700 28px/1.15 var(--pb-font-display); /* section title */
--pb-display-m: 700 22px/1.25 var(--pb-font-display); /* card display num */
--pb-title: 600 18px/1.3 var(--pb-font-body); /* panel/card heading */
--pb-body-l: 400 15px/1.6 var(--pb-font-body); /* lead body */
--pb-body: 400 14px/1.6 var(--pb-font-body); /* default body */
--pb-body-s: 400 13px/1.5 var(--pb-font-body); /* dense body, inputs */
--pb-caption: 400 12px/1.5 var(--pb-font-body); /* captions */
/* ── SPACING — one 4px-based scale ──────────────────────────────────────*/
--pb-1: 4px; --pb-2: 8px; --pb-3: 12px; --pb-4: 16px;
--pb-5: 20px; --pb-6: 24px; --pb-8: 32px; --pb-10: 40px; --pb-12: 48px;
/* ── RADIUS — restrained ────────────────────────────────────────────────*/
--pb-radius-sm: 6px; /* inputs, chips, inset cells */
--pb-radius: 8px; /* cards, buttons */
--pb-radius-pill: 999px; /* pills, badges */
/* ── ELEVATION — barely-there, editorial ───────────────────────────────*/
--pb-shadow-sm: 0 1px 2px rgba(26,26,46,0.04);
--pb-shadow-card: 0 1px 3px rgba(26,26,46,0.06);
--pb-shadow-pop: 0 8px 28px rgba(26,26,46,0.12); /* menus, modals, drag */
/* ── MOTION ──────────────────────────────────────────────────────────────*/
--pb-ease: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
/* ════════════════════════════════════════════════════════════════════════
ALIASES — overwrite base.css names so existing CSS inherits the system.
Touch nothing in your other files; these reroute the old variables.
════════════════════════════════════════════════════════════════════════ */
--primary: var(--pb-purple);
--primary-light: var(--pb-purple-tint);
--primary-brand: var(--pb-purple);
--primary-hover: var(--pb-purple-hover);
--accent: var(--pb-accent);
--text: var(--pb-ink);
--text-primary: var(--pb-ink);
--text-secondary: var(--pb-ink-soft);
--dark-grey: var(--pb-ink-soft);
--text-muted: var(--pb-muted);
--text-light: var(--pb-faint);
--border: var(--pb-hairline);
--border-light: var(--pb-hairline);
--border-medium: var(--pb-line);
--white: var(--pb-paper);
--bg-panel: var(--pb-paper);
--page-bg: var(--pb-canvas);
--bg-main: var(--pb-canvas);
--card-bg: var(--pb-surface);
--bg-secondary: var(--pb-surface-2);
--success: var(--pb-success);
--error: var(--pb-error);
--font-body: var(--pb-font-body);
--font-heading: var(--pb-font-display);
--radius: var(--pb-radius);
--radius-sm: var(--pb-radius-sm);
--radius-md: var(--pb-radius);
--radius-lg: 10px; /* audience cards: a touch softer than base cards */
--radius-xl: 12px;
--spacing-xs: var(--pb-2);
--spacing-sm: var(--pb-3);
--spacing-md: var(--pb-4);
--spacing-lg: var(--pb-6);
--spacing-xl: var(--pb-8);
--shadow-sm: var(--pb-shadow-sm);
--shadow-md: var(--pb-shadow-card);
--shadow-lg: var(--pb-shadow-pop);
}
/* ============================================================================
LAYER 2 — ELEMENT DEFAULTS
Light-touch defaults so unstyled text already looks right.
============================================================================ */
.pb-scope, body {
font: var(--pb-body);
color: var(--pb-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--pb-purple); color: #fff; }
/* ============================================================================
LAYER 3 — PRIMITIVES
Reusable classes for NEW work. Compose these instead of inventing one-offs.
============================================================================ */
/* ── Eyebrow — the signature editorial micro-label ──────────────────────────
The thread that ties every surface together. Use above any titled group:
section headers, card labels, stat labels, panel sections. */
.pb-eyebrow {
font-family: var(--pb-font-body);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pb-purple);
}
.pb-eyebrow--muted { color: var(--pb-faint); } /* neutral context labels */
.pb-eyebrow--on-dark { color: rgba(255,255,255,0.4); }
/* ── Display ── Citrine, for titles & numbers only ──────────────────────────*/
.pb-display-xl { font: var(--pb-display-xl); letter-spacing: -0.02em; color: var(--pb-ink); }
.pb-display-l { font: var(--pb-display-l); letter-spacing: -0.02em; color: var(--pb-ink); }
.pb-display-m { font: var(--pb-display-m); letter-spacing: -0.01em; color: var(--pb-ink); }
.pb-num { font-family: var(--pb-font-display); font-weight: 700; color: var(--pb-purple); line-height: 1; }
/* ── Title / body helpers ───────────────────────────────────────────────────*/
.pb-title { font: var(--pb-title); color: var(--pb-ink); }
.pb-body-l { font: var(--pb-body-l); color: var(--pb-ink-soft); }
.pb-body { font: var(--pb-body); color: var(--pb-ink-soft); }
.pb-caption { font: var(--pb-caption); color: var(--pb-muted); }
/* ── Card — the universal editorial container ───────────────────────────────
Flat paper, hairline border, small radius. No gradients, no heavy shadow. */
.pb-card {
background: var(--pb-paper);
border: 1px solid var(--pb-hairline);
border-radius: var(--pb-radius);
padding: var(--pb-4);
}
.pb-card--surface { background: var(--pb-surface); }
.pb-card--inset { background: var(--pb-surface); border-radius: var(--pb-radius-sm); }
.pb-card--dark { background: var(--pb-dark); border-color: transparent; color: #fff; }
/* ── Buttons ────────────────────────────────────────────────────────────────
Primary = filled purple (the ONE main action per view)
Ghost = purple outline (secondary)
Quiet = neutral outline (tertiary / icon pills)
Danger = red outline (destructive only) */
.pb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--pb-2);
font-family: var(--pb-font-body); font-size: 13px; font-weight: 600;
padding: 8px 16px; border-radius: var(--pb-radius);
border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
transition: background var(--pb-ease), border-color var(--pb-ease), box-shadow var(--pb-ease), color var(--pb-ease);
}
.pb-btn--primary { background: var(--pb-purple); color: #fff; border-color: var(--pb-purple); }
.pb-btn--primary:hover { background: var(--pb-purple-hover); border-color: var(--pb-purple-hover); box-shadow: 0 2px 8px rgba(84,79,240,0.28); }
.pb-btn--ghost { background: var(--pb-paper); color: var(--pb-purple); border-color: var(--pb-purple); }
.pb-btn--ghost:hover { background: var(--pb-purple-tint); }
.pb-btn--quiet { background: var(--pb-paper); color: var(--pb-ink-soft); border-color: var(--pb-line); }
.pb-btn--quiet:hover { background: var(--pb-surface); border-color: var(--pb-purple); color: var(--pb-purple); }
.pb-btn--danger { background: var(--pb-paper); color: var(--pb-error); border-color: #E9C4BF; }
.pb-btn--danger:hover { background: var(--pb-error-bg); border-color: var(--pb-error); }
.pb-btn--pill { border-radius: var(--pb-radius-pill); }
.pb-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
/* ── Inputs ─────────────────────────────────────────────────────────────────*/
.pb-input, .pb-textarea {
width: 100%; box-sizing: border-box;
font-family: var(--pb-font-body); font-size: 13px; color: var(--pb-ink);
background: var(--pb-paper);
border: 1.5px solid var(--pb-line); border-radius: var(--pb-radius);
padding: 10px 12px; outline: none;
transition: border-color var(--pb-ease);
}
.pb-textarea { resize: none; line-height: 1.5; }
.pb-input:focus, .pb-textarea:focus { border-color: var(--pb-purple); }
.pb-input::placeholder, .pb-textarea::placeholder { color: var(--pb-faint); }
/* ── Pill / badge ─────────────────────────────────────────────────────────── */
.pb-pill {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--pb-font-body); font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: var(--pb-radius-pill);
background: var(--pb-surface); color: var(--pb-muted);
border: 1px solid var(--pb-hairline);
}
.pb-pill--verified { background: var(--pb-success-bg); color: var(--pb-success); border-color: transparent; }
.pb-pill--verified::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--pb-success); }
/* ── Divider ──────────────────────────────────────────────────────────────── */
.pb-rule { height: 1px; background: var(--pb-hairline); border: 0; margin: var(--pb-4) 0; }
/* ── Selectable choice card (audience picker pattern) ───────────────────────*/
.pb-choice {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pb-2);
background: var(--pb-paper); border: 1.5px solid var(--pb-hairline);
border-radius: var(--pb-radius); padding: var(--pb-4) var(--pb-3);
cursor: pointer; text-align: center; min-height: 96px; position: relative;
transition: border-color var(--pb-ease), background var(--pb-ease), transform var(--pb-ease);
}
.pb-choice:hover { border-color: var(--pb-purple); background: var(--pb-purple-tint); transform: translateY(-1px); }
.pb-choice.is-selected { border-color: var(--pb-purple); background: var(--pb-purple-tint); }
.pb-choice .pb-choice-icon { color: var(--pb-ink-soft); }
.pb-choice.is-selected .pb-choice-icon { color: var(--pb-purple); }
.pb-choice .pb-choice-label { font-size: 13px; font-weight: 600; color: var(--pb-ink); }
/* ============================================================================
LAYER 4 — RETROFIT
Surgical overrides that pull the existing components onto the system.
Pure CSS — no markup changes. This is where the candy gradients and the
stray #6366F1 indigo die. Grouped by surface.
============================================================================ */
/* ── STUDY SNAPSHOT BLOCKS ──────────────────────────────────────────────────
The biggest offender: every block type shipped its own pastel gradient and
indigo accent. Flatten them all to one editorial card. */
.block,
.block.text-block,
.block.summary-block,
.block.stats-block,
.block.findings-block,
.block.implications-block,
.block.recommendations-block,
.block.sample-info-block,
.block.author-block,
.block.publication-block,
.block.how-to-explain-block {
background: var(--pb-paper) !important;
border: 1px solid var(--pb-hairline) !important;
border-radius: var(--pb-radius) !important;
}
.block:hover,
.block.summary-block:hover { border-color: var(--pb-purple) !important; box-shadow: var(--pb-shadow-card) !important; }
/* Block headings: every type had its own coloured heading — unify to ink */
.block .block-content h3,
.block .block-content h4,
.summary-block .block-content h3,
.stats-block .block-content h3,
.findings-block .block-content h3,
.implications-block .block-content h3,
.implications-block .block-content p,
.recommendations-block .block-content h3 {
color: var(--pb-ink) !important;
}
/* Inner stat / sample cells → editorial inset, not white-on-gradient */
.stat-item, .sample-item {
background: var(--pb-surface) !important;
border: 1px solid var(--pb-hairline) !important;
border-radius: var(--pb-radius-sm) !important;
}
.stat-value { color: var(--pb-purple) !important; font-family: var(--pb-font-display) !important; }
.stat-label, .sample-label, .pub-label, .explain-label {
color: var(--pb-faint) !important; letter-spacing: 0.1em !important;
}
.sample-value { color: var(--pb-ink) !important; }
/* List bullets & finding markers → one purple, not red/blue/green */
.block-content li::before,
.findings-block .block-content li::before,
.recommendations-block .block-content li::before { color: var(--pb-purple) !important; }
/* Participant quote: keep the editorial purple rule, drop the lilac wash */
.participant-quote { background: var(--pb-surface) !important; border-left-color: var(--pb-purple) !important; }
/* Drag affordances & indicators: indigo → brand purple */
.between-indicator, .side-indicator { background: var(--pb-purple) !important; box-shadow: 0 0 12px rgba(84,79,240,0.4) !important; }
.drag-clone { border-color: var(--pb-purple) !important; box-shadow: var(--pb-shadow-pop) !important; }
.btn-save-block { background: var(--pb-purple) !important; border-radius: var(--pb-radius-pill) !important; }
.btn-save-block:hover { background: var(--pb-purple-hover) !important; box-shadow: 0 2px 8px rgba(84,79,240,0.35) !important; }
.drag-handle:hover { color: var(--pb-purple) !important; }
/* The live snapshot grid (results.css) used a TEAL gradient hairline — make it
a flat brand-neutral hairline so the card edge stops reading as a 4th accent. */
.blocks-container .block.block-card::before { background: var(--pb-hairline) !important; }
.blocks-container .block.block-card .block-content * { color: var(--pb-ink) !important; }
.blocks-container { border-color: var(--pb-purple) !important; }
.block-label,
.blocks-container .block.block-card .block-label { color: var(--pb-muted) !important; }
/* Display numbers in the snapshot → Citrine, per the brand rule */
.study-size-number, .sample-age-number, .sample-age {
font-family: var(--pb-font-display) !important; color: var(--pb-ink) !important;
}
.study-size-unit { color: var(--pb-purple) !important; }
/* ── PUBLICATION SUMMARY TABS / EXPORT ──────────────────────────────────────
The export action button was the last stray indigo (#6366F1). */
.btn-export-action { background: var(--pb-purple) !important; border-color: var(--pb-purple) !important; }
.btn-export-action:hover:not(:disabled) { background: var(--pb-purple-hover) !important; border-color: var(--pb-purple-hover) !important; }
.tab:hover { border-color: var(--pb-purple); color: var(--pb-purple); background: var(--pb-purple-tint); }
.tab.active { background: var(--pb-purple); border-color: var(--pb-purple); }
.export-preview-scroll { background: var(--pb-surface-2); }
.plain-text-heading { color: var(--pb-ink); }
.plain-text-line { color: var(--pb-ink-soft); }
/* ── LEFT PANEL — controls, audience cards ──────────────────────────────────*/
.page-title { font-family: var(--pb-font-display) !important; color: var(--pb-ink); }
.audience-card { border-color: var(--pb-hairline); border-radius: var(--pb-radius); }
.audience-card:hover { border-color: var(--pb-purple); background: var(--pb-purple-tint); box-shadow: var(--pb-shadow-card); }
.audience-card.selected { border-color: var(--pb-purple); background: var(--pb-purple-tint); }
.card-icon { filter: none; } /* drop the grayscale flicker on hover */
.slider-container { background: var(--pb-surface); border-radius: var(--pb-radius); }
.slider-value { color: var(--pb-purple); }
.accordion-label { font-size: 16px; } /* was 21px — calmer panel rhythm */
/* ── JARGON SCAN — the 4th layer, brought into the family ────────────────────*/
.jscan-meaning-el { color: var(--pb-ink); }
.jscan-arrow { color: var(--pb-faint); }
.jscan-footer { color: var(--pb-muted); }
.jscan-dot-item { background: var(--pb-line); }
.jscan-dot-item.jscan-dot-active, .jscan-pulse-dot, .jscan-term-el { color: var(--pb-purple); background-color: var(--pb-purple); }
.jscan-term-el { background: transparent; } /* term is text, not a fill */
/* ── GLOBAL POLISH ──────────────────────────────────────────────────────────*/
*:focus-visible { outline: 2px solid var(--pb-purple); outline-offset: 2px; }
.empty-state h3, .empty-state .empty-state-title { color: var(--pb-ink-soft); }
.results-panel-title { color: var(--pb-purple) !important; }
/* ── COOKIE CONSENT ───────────────────────────────────────────────────────*/
.cookie-banner {
display: none;
position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 100;
max-width: 720px; margin: 0 auto;
background: var(--pb-paper); border: 1px solid var(--pb-line); border-radius: var(--pb-radius);
box-shadow: var(--pb-shadow-pop); padding: 20px 24px;
align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner p { font-size: 14px; color: var(--pb-ink-soft); line-height: 1.55; flex: 1 1 320px; margin: 0; }
.cookie-banner p a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .pb-btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 560px) {
.cookie-banner { left: 16px; right: 16px; bottom: 16px; padding: 18px; }
.cookie-actions { width: 100%; }
.cookie-actions .pb-btn { flex: 1; }
}