/* ============================================================ Exploring Claude — Lab Workbook. PALETTE AND TYPE COME FROM THE COURSE, NOT FROM THIS SITE. The workbook is course collateral that happens to be hosted on diegoclaw.com. A participant sees the deck and the six videos all day; this page is the third thing in that set, so it matches them rather than the Hub around it. Everything below is taken from `exploring-claude-video-briefs.md` §1 "Visual style": Black #1A1A1A · White #FFFFFF · Fujitsu red #E60012 Grey #8C8C8C · Light grey #F2F2F2 Arial bold for headings, Calibri for body Flat: no gradients, no shading, no drop shadows "Red marks only the thing that matters. Never decorative." That is why this file redefines diego.css's tokens instead of loading theme-violet.css like the other four Hub pages. The violet theme is untouched and still owns those pages. TWO PLACES THE BRIEF CONTRADICTS ITSELF, resolved toward its own accessibility floor (§9: "Contrast ratio 4.5:1 minimum"): · Grey #8C8C8C on white is 3.36:1. It fails body text, so it is used for rules and borders only; dim text is #6B6B6B (5.33:1). · Fujitsu red on white is 4.80:1 and passes, but on light grey #F2F2F2 it is 4.29:1 and does not. Red text therefore never sits on a grey panel — on grey it appears only as a fill carrying white text, which is 4.80:1. And §9's other rule — "never use red alone to carry meaning" — is why every red signal here is paired with a word: a template is marked FILL THE BLANKS, not just given a red edge. Monospace survives in exactly three places: the prompt bodies, the blanks inside them, and the export preview. Those are literal strings a participant copies, and a proportional face makes it harder to see what is really there. Consolas pairs with Calibri. ============================================================ */ :root{ /* --- the course palette, overriding diego.css ------------------- */ color-scheme: light; --dead-air:#FFFFFF; /* page ground */ --signal-floor:#FFFFFF; /* panels and cards */ --signal-floor-raised:#F2F2F2; /* raised bands, table heads */ --transmission-black:#F2F2F2; /* prompt-block interiors */ --carrier-edge:#D8D8D8; /* 1px rules */ --carrier-edge-soft:#E9E9E9; /* dividers inside a panel */ --ink:#1A1A1A; --ink-lede:#1A1A1A; /* a document reads in full black */ --ink-muted:#3D3D3D; --ink-quiet:#5A5A5A; --ink-dim:#6B6B6B; /* the floor: 5.33:1 on white */ --ink-terminal:#1A1A1A; --ink-strong:#000000; /* was #fff on the dark theme */ --on-signal:#FFFFFF; /* text on a red fill, 4.80:1 */ --neon1:#E60012; /* Fujitsu red — the only accent */ --neon2:#1A1A1A; /* what used to be cyan is now ink */ --rgb1:230,0,18; --rgb2:26,26,26; --rule-grey:#8C8C8C; /* borders only, never text */ --hatch:repeating-linear-gradient(45deg,#E4E4E4,#E4E4E4 6px,#F2F2F2 6px,#F2F2F2 12px); /* --- type: Arial headings, Calibri body ------------------------ Arimo and Carlito are the metric-compatible open substitutes, so a machine without the Microsoft faces still sets identical lines. */ --display:Arial, Arimo, Helvetica, sans-serif; --mono:Calibri, Carlito, "Segoe UI", system-ui, sans-serif; --code:Consolas, "Courier New", ui-monospace, monospace; /* --- the one distinction the workbook is built on --------------- Red goes on the block that still needs something from you. A block you copy as written is finished, so it stays black. */ --wb-verbatim:#1A1A1A; /* ```prompt — copy as written */ --wb-fill:#E60012; /* ```template — blanks first */ --wb-fill-wash:#FDECED; /* red at 8% over white */ --wb-rail: 15.5rem; /* Height of the site navbar, which nav.js injects and diego.css sticks to the top of the viewport. Measured at runtime by workbook.js; anything of ours that also sticks has to clear it. */ --wb-navh: 0px; --z-rail: 25; } /* The injected site navbar keeps its own vars, so it reskins in one rule rather than being fought selector by selector. A black bar over a white document is the course palette exactly. `!important` on the custom properties is required, not decorative: nav.js injects its