/* ============================================================================ Blue — one stylesheet for every Blue artifact (reports and decks). THIS FILE IS THE SINGLE SOURCE OF TRUTH. It is copied verbatim into every skill's assets/ by scripts/sync-assets.sh, and CI fails if a copy drifts. Never hand-edit a copy under a skill's own assets directory — edit THIS file, then run: scripts/sync-assets.sh CAREFUL when editing these comments: a CSS comment ends at the first star-slash, so writing a glob path (a doubled star followed by a slash) closes the comment early and the parser then swallows the next rule block whole — which silently kills every token in :root and leaves you with an unstyled, serif, colorless page. Spell such paths out in prose instead. scripts/sync-assets.sh --check greps for this. Three house rules are enforced by the CSS itself, not left to the agent: 1. LIGHT IS THE DEFAULT. Dark is opt-in via . Print always renders light, whatever the theme. 2. NO EYEBROWS. There is no eyebrow class. Section rhythm comes from `.mark` — a short accent rule with no label text. A tracked-out uppercase mono chip above every heading is the single loudest generic-AI tell in a deliverable; we don't ship it. 3. MONOSPACE IS ALMOST NEVER RIGHT. JetBrains Mono is Blue's editorial chrome voice and it stays — but bound to exactly three selectors: `.foot__src`, `.blue-src` (source-citation lines) and inline ``. Nowhere else. In particular it is NOT how you align numbers: figures are General Sans with `font-variant-numeric: tabular-nums`, which is the actual tool for that job and is already set on every numeric component. Palette values are [VERIFIED] from bluecommunications.com's theme CSS (2026-05-30) and the shipped deck. When an official brand guide lands, change the hues in :root here; everything else inherits. ============================================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap'); /* JetBrains Mono — citations and inline code ONLY (rule 3). Weight 500 is all those two uses need; don't pull in more. */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap'); /* --------------------------------------------------------------------------- 1. TOKENS Brand hues are invariant — they never change between light and dark. Surfaces, ink and lines are SEMANTIC — they flip with the theme. --------------------------------------------------------------------------- */ :root{ /* Brand hues — invariant */ --blue-midnight:#00101E; /* deepest navy */ --blue-navy:#002342; /* secondary dark surface */ --blue-ink:#0a1828; /* near-black body ink */ --blue-paper:#FFFFFF; --blue-ice:#EBF2F5; --blue-blue:#1B5FEB; /* electric blue — primary accent */ --blue-sky:#539CF5; /* sky — AI / tech-forward framing */ --blue-orange:#F35F05; /* vivid orange */ --blue-amber:#F99C24; /* amber — the LOGO color, the highlighter */ --blue-coral:#E64B62; /* coral — energy / emotional callouts */ --blue-red:#CE1626; /* alarm (sparingly) */ --blue-green:#00C074; /* positive / "go" (sparingly) */ --blue-dim2:#5d7a9c; /* muted blue-grey */ /* Type */ --font:'General Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* rule 3 — see header */ /* 8pt spacing scale */ --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; /* Semantic surfaces — LIGHT (the default) */ --bg:#F4F7FA; --surface:#FFFFFF; --ink:var(--blue-ink); --muted:#56708c; --line:rgba(10,24,40,.12); --track:rgba(10,24,40,.07); --shadow:0 1px 2px rgba(0,16,30,.04), 0 8px 24px rgba(0,16,30,.06); --wash:radial-gradient(70% 55% at 92% -8%, var(--accent-soft), transparent 60%); /* Accent — one per section, set with [data-accent] */ --accent:var(--blue-amber); /* Derived accent shades. These hold a literal color-mix() expression, so var(--accent) re-resolves per element — a [data-accent] section automatically gets its own wash, edge and ink. Set --accent, get five. */ --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent); --accent-edge:color-mix(in srgb, var(--accent) 35%, transparent); --accent-wash:color-mix(in srgb, var(--accent) 9%, var(--surface)); --accent-ink :color-mix(in srgb, var(--accent) 72%, #08131f); /* readable on --accent-wash */ } /* Semantic surfaces — DARK. Opt-in only: . */ [data-theme="dark"]{ --bg:var(--blue-midnight); --surface:#04192b; --ink:#e8f0f8; --muted:#8aa6c9; --line:rgba(255,255,255,.14); --track:rgba(255,255,255,.08); --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --accent-wash:color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink :color-mix(in srgb, var(--accent) 90%, #ffffff); /* bright reads fine on dark */ } /* One accent per section — "a deliberate arc, not a rainbow." Set data-accent on each
; everything accent-colored inside follows. */ [data-accent="blue"] { --accent:var(--blue-blue); } [data-accent="sky"] { --accent:var(--blue-sky); } [data-accent="orange"]{ --accent:var(--blue-orange); } [data-accent="amber"] { --accent:var(--blue-amber); } [data-accent="coral"] { --accent:var(--blue-coral); } [data-accent="green"] { --accent:var(--blue-green); } [data-accent="red"] { --accent:var(--blue-red); } /* Invert one surface inside a light document — a navy cover panel, the dark half of a two-zone. This is how the navy ground survives a light default: as a deliberate panel, not the whole artifact. */ .invert{ --surface:#04192b; --ink:#e8f0f8; --muted:#8aa6c9; --line:rgba(255,255,255,.14); --track:rgba(255,255,255,.08); --accent-wash:color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink :color-mix(in srgb, var(--accent) 90%, #ffffff); background:var(--blue-midnight); color:var(--ink); } /* --------------------------------------------------------------------------- 2. BASE --------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0;} body{ font-family:var(--font); -webkit-font-smoothing:antialiased; background:var(--bg); background-image:var(--wash); color:var(--ink); line-height:1.5; padding:clamp(28px,5vw,72px); } .wrap{max-width:1080px;margin:0 auto;} a{color:var(--accent-ink);text-underline-offset:2px;} code{font-family:var(--mono);font-size:.85em;background:var(--track); padding:1px 5px;border-radius:4px;color:var(--ink);} /* --------------------------------------------------------------------------- 3. REPORT COMPONENTS The vocabulary every Blue report composes from. See canonical/components.md for copy-paste markup. --------------------------------------------------------------------------- */ /* Masthead — logo stacked above the headline. Replaces the old dark cover. */ .mast{padding-bottom:28px;border-bottom:2px solid var(--line);margin-bottom:48px;} /* No `display` here on purpose — `.mast .logo` would outrank the .logo--ink / .logo--white toggles below and force BOTH lockups visible. */ .mast .logo{height:56px;width:auto;margin-bottom:24px;} /* Logo contrast, handled by CSS so one file is correct in both themes and in print. Inline BOTH lockups in the masthead; the wrong one hides itself. The footer mark needs no toggle — the amber circle carries it on any ground. */ .logo{display:block;} .logo--ink{display:block;} .logo--white{display:none;} [data-theme="dark"] .logo--ink,.invert .logo--ink{display:none;} [data-theme="dark"] .logo--white,.invert .logo--white{display:block;} @media print{ .logo--ink{display:block!important;} .logo--white{display:none!important;} } h1{font-weight:700;line-height:.94;letter-spacing:-.03em;text-transform:uppercase; font-size:clamp(38px,5.5vw,66px);color:var(--ink);} .a,.blue-accent-word{color:var(--accent);} /* exactly one accent word per headline */ .mast__sub{font-size:clamp(15px,1.8vw,19px);color:var(--muted);font-weight:500;margin-top:12px;} /* Section. Heading + subtitle carry the structure — no eyebrow, ever. */ section{margin-bottom:52px;} h2{font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;color:var(--ink);} h3{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px;} .subtitle{font-size:clamp(14px,1.6vw,17px);color:var(--muted);font-weight:500; margin-top:6px;margin-bottom:26px;max-width:62ch;} .body{font-size:15px;color:var(--muted);max-width:66ch;margin:10px 0 18px;} /* The accent rule. This is the ONLY section marker — a short colored rule with no label text. It is what replaced the mono eyebrow; don't reintroduce one. */ .mark{width:34px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:14px;} /* KPI grid — hairline-separated cards. The headline numbers. */ .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);} .kpi{background:var(--surface);padding:24px;} .kpi__num{font-size:clamp(34px,4.4vw,52px);font-weight:700;letter-spacing:-.03em; color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;} .kpi__label{font-size:14px;font-weight:600;margin-top:12px;color:var(--ink);} .kpi__sub{font-size:12.5px;color:var(--muted);margin-top:4px;} /* Horizontal bars — the default chart. Set the fill color inline per series. */ .bars{display:flex;flex-direction:column;gap:16px;} .bar__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:7px;} .bar__label{font-size:15px;font-weight:600;color:var(--ink);} .bar__val{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap; font-variant-numeric:tabular-nums;} .bar__track{height:12px;background:var(--track);border-radius:7px;overflow:hidden;} .bar__fill{height:100%;border-radius:7px;min-width:3px;background:var(--accent);} .bar__sub{font-size:12.5px;color:var(--muted);margin-top:5px;} /* Column chart — for a time series (per-day volume, per-hour usage). */ .cols{display:flex;align-items:flex-end;gap:5px;height:200px;padding:18px; background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);} .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center; height:100%;gap:7px;} .col__bar{width:100%;max-width:26px;border-radius:4px 4px 0 0;min-height:2px;background:var(--accent);} .col__lbl{font-size:10px;color:var(--muted);} .legend{display:flex;gap:20px;margin-top:14px;font-size:13px;color:var(--muted);} .legend span::before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px; margin-right:7px;vertical-align:middle;background:var(--accent);} /* Callout — the one thing you want read if nothing else is. One per section. */ .callout{background:var(--accent-wash);border:1px solid var(--accent-edge); border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:22px 26px; font-size:clamp(15px,1.7vw,18px);color:var(--ink);font-weight:500;} .callout b{color:var(--accent-ink);} /* Table — hairline, zebra, tabular numerals. Header is ink, not navy-filled. */ .tbl{border-collapse:collapse;width:100%;margin:14px 0 6px;font-size:13.5px;} .tbl th,.tbl td{border:1px solid var(--line);padding:9px 11px;text-align:center;} .tbl td{font-variant-numeric:tabular-nums;} .tbl thead th{background:var(--track);color:var(--ink);font-weight:600;font-size:12.5px;} .tbl tbody tr:nth-child(even){background:var(--track);} .tbl td.lbl,.tbl th.lbl{text-align:left;font-weight:600;} /* Value emphasis inside tables and key lines. */ .pos{color:var(--blue-green);font-weight:700;} .warn{color:var(--blue-orange);font-weight:700;} .neg{color:var(--blue-coral);font-weight:700;} .dim{color:var(--muted);} /* Quote / verbatim comment. */ blockquote{font-style:italic;color:var(--muted);margin:8px 0;padding-left:14px; border-left:2px solid var(--line);font-size:14px;} /* Card — a bordered block for a standout item, a per-page breakdown, a profile. */ .card{background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:20px 22px;box-shadow:var(--shadow);} .card__t{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px;} .card__t a{color:var(--accent-ink);} .card__b{font-size:14px;color:var(--muted);} /* List — a compact index (conversations, entries, pages), one row per item. */ .list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);} .lrow{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:baseline; padding:10px 16px;border-top:1px solid var(--line);font-size:13.5px;} .lrow:first-child{border-top:none;} .lrow__n{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;} .lrow__m{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;} /* Recommendations — an em-dash list in the accent color. */ ul.recs{list-style:none;padding:0;margin:8px 0;} ul.recs li{position:relative;padding-left:22px;margin:12px 0;font-size:14.5px;color:var(--muted);} ul.recs li::before{content:"—";position:absolute;left:0;color:var(--accent);font-weight:700;} ul.recs li b{color:var(--ink);} /* Caveats — the honest small print. Never omit it to make a report look cleaner. */ .caveats{font-size:13.5px;color:var(--muted);} .caveats li{margin:8px 0 8px 18px;} /* Layout helpers. */ .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;} .split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:34px;} .split .subtitle{margin-bottom:0;} /* Footer — logo left, provenance right. The source line is one of exactly two places monospace is allowed. */ .foot{display:flex;justify-content:space-between;align-items:center;gap:20px; margin-top:56px;padding-top:24px;border-top:2px solid var(--line);} .foot .logo{height:30px;width:auto;flex:none;} .foot__src{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted); text-align:right;} /* --------------------------------------------------------------------------- 4. DECK COMPONENTS (blue-brand) A deck is light by default too. Reach for .invert on a cover or divider when you want the navy ground — deliberately, on one surface, not everywhere. --------------------------------------------------------------------------- */ .blue-stage{width:1280px;height:720px;position:relative;overflow:hidden;} .blue-slide{position:relative;background:var(--bg);background-image:var(--wash); color:var(--ink);padding:var(--s6);} .blue-slide.invert{background:var(--blue-midnight);background-image:var(--wash);} /* Stacked display headline — heavy General Sans, tight. The core Blue move. */ .blue-display{font-weight:700;line-height:.94;letter-spacing:-.03em;text-transform:uppercase;} .blue-display--tight{line-height:.9;} h1.blue-display{font-size:clamp(64px,8vw,104px);} h2.blue-display{font-size:clamp(40px,5vw,54px);letter-spacing:-.02em;} .blue-lead{font-size:clamp(22px,2.4vw,30px);line-height:1.32;font-weight:500; color:var(--ink);max-width:24ch;} .blue-body{font-size:clamp(16px,1.8vw,22px);line-height:1.5;color:var(--muted);max-width:60ch;} /* Highlighter — amber marker behind a phrase. Type inside stays ink, always. */ .blue-highlight{background:var(--blue-amber);color:var(--blue-ink);padding:.04em .26em; box-decoration-break:clone;-webkit-box-decoration-break:clone;} /* Big section number — sans, not mono. One oversized digit announcing a section. */ .blue-bignum{font-weight:700;font-size:clamp(120px,18vw,240px);line-height:1; letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums;} /* Outlined ghost type — a supporting layer behind solid display type. */ .blue-ghost-type{-webkit-text-stroke:2px currentColor;color:transparent;} /* Circular photo mask. */ .blue-circle-mask{aspect-ratio:1;border-radius:50%;overflow:hidden;} .blue-circle-mask img{width:100%;height:100%;object-fit:cover;display:block;} /* Echo — repeated display text as background texture. */ .blue-echo{position:relative;overflow:hidden;} .blue-echo__layer{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:center;pointer-events:none;z-index:0;} .blue-echo__layer span{font-weight:700;text-transform:uppercase;font-size:clamp(80px,12vw,160px); line-height:.92;letter-spacing:-.03em;} .blue-echo__layer span:nth-child(odd){color:var(--ink);opacity:.06;} .blue-echo__layer span:nth-child(even){-webkit-text-stroke:1.5px var(--ink);color:transparent;opacity:.16;} .blue-echo > *:not(.blue-echo__layer){position:relative;z-index:1;} /* Asymmetric split — content in a narrow column, generous void beside it. */ .blue-split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5);align-items:center;} .blue-split--reverse{grid-template-columns:7fr 5fr;} /* Two-zone — a light zone and an inverted zone (what/how, before/after). */ .blue-two-zone{display:grid;grid-template-columns:1fr 1fr;min-height:100%;} .blue-two-zone > *{padding:var(--s5);} /* Logo — the real SVG from assets/logo/. Never a CSS fake. */ .blue-logo{position:absolute;height:64px;width:auto;} .blue-logo--corner-br{right:var(--s4);bottom:var(--s4);} .blue-logo--corner-bl{left:var(--s4);bottom:var(--s4);height:40px;} /* Source citation — honesty about where a stat came from. */ .blue-src{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em; color:var(--muted);margin-top:9px;} .blue-src::before{content:"› ";color:var(--accent);} /* --------------------------------------------------------------------------- 5. RESPONSIVE / MOTION / PRINT --------------------------------------------------------------------------- */ @media (max-width:760px){ .kpis{grid-template-columns:1fr 1fr;} .grid2,.grid3,.split{grid-template-columns:1fr;gap:26px;} .blue-split,.blue-split--reverse,.blue-two-zone{grid-template-columns:1fr;} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* Print → always light, whatever the theme, and force the accent colors through into the PDF. Stripping print-color-adjust is what turns a Blue report into a grey one; don't. */ @media print{ @page{size:A4;margin:12mm;} html,body{ -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; background:#FFFFFF!important; background-image:none!important; color:var(--blue-ink)!important; padding:0!important; } /* html[data-theme="dark"] must be named explicitly — it outranks a bare `html` selector, so without it a dark-themed file would print its dark tokens. */ html, html[data-theme="dark"]{ --bg:#FFFFFF; --surface:#FFFFFF; --ink:#0a1828; --muted:#56708c; --line:rgba(10,24,40,.12); --track:rgba(10,24,40,.07); --shadow:none; --accent-wash:color-mix(in srgb, var(--accent) 9%, #FFFFFF); --accent-ink:color-mix(in srgb, var(--accent) 72%, #08131f); } *{-webkit-print-color-adjust:exact!important; print-color-adjust:exact!important;} .wrap{max-width:none;} section,.kpis,.cols,.callout,.split,.grid2,.grid3,.card,.list,.tbl{break-inside:avoid;} h2,h3{break-after:avoid;} .blue-slide,.blue-stage{break-after:page;position:static;transform:none;} }