/* ============================================================
Team Empathy — branded document stylesheet (PDF + web)
The single foundation for any TE document we build: link this
one file, write semantic content, and it renders as a clean
on-brand web page (screen) AND a print-ready PDF (WeasyPrint).
Built on the team-empathy-design system (tokens + self-hosted
fonts). Light canvas, navy headlines, royal accents, forest
blocks, sky + green accents. No dark grey. No em dashes.
------------------------------------------------------------
Usage:
...content...
Blocks: .hero (forest) .footer (forest) table / table.compare
.callout .pill-h .lead-h .rule .eyebrow .note
============================================================ */
@font-face { font-family:'Manrope'; font-weight:600; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:700; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:800; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:400; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:500; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:600; src:url('/Users/benmale/Team Empathy AIOS/.claude/skills/team-empathy-design/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); }
:root {
--forest:#2C6D3C; --forest-700:#1E5130; --royal:#2874B7; --royal-600:#2369A8;
--navy:#1A3B90; --sky:#87D1F5; --green:#2BB673; --charcoal:#191919;
--pale-green:#E8F5EC; --pale-blue:#EAF4FB; --paper:#F4F7F4;
--line:#E1E6E1; --line-soft:#ECEFEC; --grey:#5C6960;
}
* { box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
body { font-family:'Poppins',sans-serif; color:var(--charcoal); margin:0; font-size:11pt; line-height:1.6; }
.te-doc { }
/* ---- Forest hero block ---- */
.hero {
background:
radial-gradient(120% 140% at 88% -10%, rgba(135,209,245,0.22), rgba(44,109,60,0) 55%),
radial-gradient(120% 130% at 0% 120%, rgba(30,81,48,0.55), rgba(44,109,60,0) 60%),
linear-gradient(135deg, #2C6D3C 0%, #246339 60%, #1E5130 100%);
color:#fff; border-radius:16px; padding:32px 34px; position:relative; overflow:hidden;
}
.hero::after { content:""; position:absolute; inset:0;
background-image:radial-gradient(circle, rgba(135,209,245,0.30) 1.1px, transparent 1.1px);
background-size:22px 22px; opacity:0.5; pointer-events:none; }
.hero > * { position:relative; }
.eyebrow { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:8.5pt; letter-spacing:0.16em; text-transform:uppercase; }
.hero .eyebrow { color:var(--sky); margin-bottom:14px; }
.hero h1 { font-family:'Manrope',sans-serif; font-weight:800; font-size:34pt; line-height:1.04; letter-spacing:-0.02em; margin:0 0 10px; }
.hero .tag { font-family:'Manrope',sans-serif; font-weight:600; font-size:15pt; color:var(--sky); margin:0 0 16px; }
.hero .meta { font-family:'JetBrains Mono',monospace; font-size:8.5pt; letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.80); }
.hero .meta .dot { color:var(--sky); }
/* ---- Body ---- */
.body { padding:4px 4px 0; }
h2 { font-family:'Manrope',sans-serif; font-weight:700; font-size:17pt; color:var(--navy); letter-spacing:-0.01em; margin:30px 0 6px; }
.rule { height:3px; width:46px; background:var(--royal); border-radius:3px; margin:0 0 14px; }
h3 { font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5pt; color:var(--navy); margin:20px 0 7px; }
.pill-h { display:flex; align-items:baseline; gap:12px; margin:22px 0 7px; }
.pill-h .n { font-family:'Manrope',sans-serif; font-weight:800; font-size:20pt; color:var(--royal); line-height:1; min-width:34px; }
.pill-h .t { font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5pt; color:var(--navy); }
.lead-h { font-family:'Manrope',sans-serif; font-weight:700; font-size:11pt; color:var(--forest); margin:16px 0 6px; }
p { margin:0 0 11px; }
strong { font-weight:600; color:var(--navy); }
ul { margin:4px 0 12px; padding-left:0; list-style:none; }
li { position:relative; padding-left:20px; margin-bottom:7px; }
li::before { content:""; position:absolute; left:2px; top:0.62em; width:6px; height:6px; border-radius:50%; background:var(--royal); }
a { color:var(--royal); }
/* ---- Tables ---- */
table { width:100%; border-collapse:separate; border-spacing:0; margin:10px 0 18px; font-size:10.5pt;
border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { padding:11px 15px; text-align:left; vertical-align:top; line-height:1.5; }
thead th { background:var(--royal); color:#fff; font-family:'Manrope',sans-serif; font-weight:600; font-size:10pt; }
tbody td { border-top:1px solid var(--line-soft); }
tbody tr:nth-child(even) td { background:var(--pale-blue); }
td.k { font-weight:600; color:var(--navy); width:34%; }
table.compare thead th { background:var(--forest); }
table.compare tbody tr:nth-child(even) td { background:var(--pale-green); }
table.compare td.k { width:38%; }
.callout { background:var(--pale-green); border:1px solid #CDE7D5; border-left:4px solid var(--forest);
border-radius:10px; padding:14px 18px; margin:14px 0 16px; font-size:10.5pt; }
.callout .l { font-weight:700; color:var(--forest); }
.callout.blue { background:var(--pale-blue); border-color:#CFE3F5; border-left-color:var(--royal); }
.callout.blue .l { color:var(--royal); }
.note { font-size:10pt; color:var(--grey); margin:4px 0 14px; }
/* ---- Forest footer block ---- */
.footer { margin-top:30px; background:
radial-gradient(120% 160% at 90% 0%, rgba(135,209,245,0.18), rgba(44,109,60,0) 55%),
linear-gradient(135deg, #2C6D3C 0%, #1E5130 100%);
color:#fff; border-radius:16px; padding:26px 30px; position:relative; overflow:hidden; }
.footer::after { content:""; position:absolute; inset:0;
background-image:radial-gradient(circle, rgba(135,209,245,0.28) 1.1px, transparent 1.1px);
background-size:22px 22px; opacity:0.5; }
.footer > * { position:relative; }
.footer .b { font-family:'Manrope',sans-serif; font-weight:800; font-size:13pt; }
.footer .s { color:var(--sky); font-size:10pt; margin-top:2px; }
.footer .c { font-family:'JetBrains Mono',monospace; font-size:9pt; letter-spacing:0.06em; color:rgba(255,255,255,0.85); margin-top:10px; }
/* ============================================================
SCREEN — presentable web page: white document card on a soft
paper canvas with a faint dot-grid, centred and roomy.
============================================================ */
@media screen {
body { background:
radial-gradient(circle, rgba(44,109,60,0.06) 1px, transparent 1px) 0 0/28px 28px,
var(--paper); padding:40px 16px; }
.te-doc { max-width:920px; margin:0 auto; background:#fff; border-radius:20px;
box-shadow:0 20px 60px rgba(12,33,20,0.10); padding:40px 48px 32px; }
.hero { padding:44px 46px; }
.hero h1 { font-size:42pt; }
.body { padding:8px 6px 0; }
}
/* ============================================================
PRINT — A4 paged PDF (WeasyPrint).
============================================================ */
@media print {
@page { size:A4; margin:14mm 15mm; }
body { background:#fff; }
h2, h3, .pill-h, table, .callout { page-break-inside:avoid; }
thead { display:table-header-group; }
}