/*
Theme Name: Laser TeamWork
Template: ekg-base
Theme URI: https://laserteamwork.com/
Author: EKG Marketing
Author URI: https://ekgmarketing.com/
Description: Laser TeamWork child theme (parent: EKG Base). A machine-agnostic laser-education resource for U.S. educators — grades 6-12, CTE, and higher education. Workshop Blueprint look (2026-09-30): warm paper, graphite ink, blueprint blue for links and actions, a sparing beam-orange accent, self-hosted Hanken Grotesk / Newsreader / JetBrains Mono, and a full dark mode. Green is learning and safe process, amber is caution, and red stays reserved for stop conditions. The content core is vendor-neutral so the thin sponsor layer stays swappable. Tone is clear, capable, evidence-aware, and honest about limits.
Version: 0.9.7
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ltw
*/
/* ==========================================================================
Everything below is the LTW design system, authored and adversarially
reviewed against five standalone mockups before it graduated into the theme.
Token groups are commented in place. Do not add per-page CSS elsewhere —
a genuinely new pattern gets added HERE, not scattered inline.
========================================================================== */
@charset "UTF-8";
/* ==========================================================================
LASER TEAMWORK — SHARED DESIGN SYSTEM
Single source of truth for every LaserTeamWork mockup. Import it; do not
fork it, and do not add page-local CSS. If a page needs something this file
does not provide, that is a gap in the system — report it, don't patch it.
Property : laserteamwork.com (machine-agnostic laser education for U.S. educators)
Stage : Gate 1 — standalone HTML mockups only. Nothing here is deployed.
Graduates to: the `ltw` child theme (ekg-base parent) at Gate 2.
Direction (blueprint §14 "Visual direction" — note: the task brief called this
§13; §13 is "Interactive tools". Design direction is §14, cross-checked
against Structure-Spec §5):
- Academic, practical, calm. Not industrial sales collateral.
- SUPERSEDED 2026-09-30 by the Workshop Blueprint palette (§02, §23):
paper + graphite + blueprint blue + beam orange. Kept below for history.
- Deep blue/teal = technical trust. Green = learning + safe process.
Warm amber = caution. Restrained red = STOP CONDITIONS ONLY.
- EXPLICITLY NOT Boss red/black. No brand red anywhere except .ltw-stop.
- Highly legible sans for body, nav, and tables.
Rules this file obeys:
- No external font, CDN, @import, or any network reference. System stacks only.
- Every text/background pair meets WCAG 2.1 AA (4.5:1 body, 3:1 large text
and UI boundaries). Measured ratios are stated in comments beside each token.
- Relative units throughout; tables scroll in their own container.
- Fluid type follows EKG-Typography-Standard.md: headings fluid, body FIXED.
CONTENTS
01 Reset + base
02 Color tokens (raw ramps)
03 Semantic color aliases
04 Typography tokens
05 Space / measure / radius / shadow / motion tokens
06 Elements (headings, prose, links, tables, code)
07 Layout (page shell, sections, containers)
08 Components
.ltw-breadcrumb .ltw-badge .ltw-chip
.ltw-meta-bar .ltw-actions .ltw-pagination
.ltw-reviewed .ltw-reviewed--inline .ltw-answer
.ltw-warn .ltw-stop .ltw-note
.ltw-manual-notice .ltw-sources .ltw-download
.ltw-download__body .ltw-steps .ltw-table
.ltw-decision .ltw-card .ltw-related
.ltw-lead-form .ltw-btn .ltw-sponsor
.ltw-figure-scroll
09 Utilities
10 Dark mode (prefers-color-scheme)
11 Print
========================================================================== */
/* ==========================================================================
01 RESET + BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* Offset for any in-page anchor so headings don't hide under sticky chrome. */
scroll-padding-top: var(--ltw-space-8);
}
body {
margin: 0;
background: var(--ltw-surface);
color: var(--ltw-ink);
font-family: var(--ltw-font-sans);
font-size: var(--ltw-fs-body);
line-height: var(--ltw-lh-body);
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Visible, high-contrast focus on every interactive thing. Accessibility is a
stated developer requirement (blueprint §15) — never remove this. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--ltw-focus);
outline-offset: 2px;
border-radius: var(--ltw-radius-xs);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Skip link — first focusable element on every page. */
.ltw-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: var(--ltw-space-3) var(--ltw-space-5);
background: var(--ltw-accent);
color: var(--ltw-on-accent);
font-weight: 600;
border-radius: 0 0 var(--ltw-radius-md) 0;
}
.ltw-skip:focus { left: 0; }
/* ==========================================================================
02 COLOR TOKENS — raw ramps
Ramps are the vocabulary; §03 assigns meaning. Prefer the semantic alias in
component CSS so dark mode only has to remap one layer.
Deliberately absent: any Boss-adjacent pure red (#E00, #C00) or pure black.
Neutrals are warm paper/graphite (Workshop Blueprint, 2026-09-30).
========================================================================== */
:root {
/* WORKSHOP BLUEPRINT palette — adopted 2026-09-30 from the "Workshop Blueprint
design system" mockup, tuned and re-measured here. Paper, graphite, one
blueprint blue, and a sparing beam of orange. Ratios are measured, not guessed.
--- Neutral ramp (warm paper to graphite) -------------------------------
On paper (#FAF8F4): n500 5.55 · n600 8.29 · n800 13.71 · n900 17.07 */
--ltw-n-0: #FFFFFF; /* card */
--ltw-n-25: #FAF8F4; /* PAGE PAPER */
--ltw-n-50: #F3F0E9; /* sunken paper band, zebra row */
--ltw-n-100: #EAE6DC; /* table head, inset */
--ltw-n-200: #DAD5C9; /* borders, grid-paper lines (decorative) */
--ltw-n-300: #BFB9AC; /* strong border / disabled */
--ltw-n-400: #9C968A; /* icon-only, never body text on light */
--ltw-n-500: #696459; /* MUTED TEXT — 5.55 paper, 5.89 white, 4.72 n-100 */
--ltw-n-600: #4E4A44; /* secondary text — 8.29 on paper */
--ltw-n-700: #3B3834; /* strong secondary — 9.36 on n-100 */
--ltw-n-800: #2A2926; /* BODY INK — 13.71 on paper */
--ltw-n-900: #161615; /* graphite: headings, inverse field */
--ltw-n-950: #0D0D0C; /* dark-mode deepest */
/* --- Blueprint ramp — PRIMARY: links, primary buttons, brand surfaces -----
b-600 7.91 on paper · white on b-600 8.39 · b-700 10.20 on paper */
--ltw-blue-50: #EEF3FA;
--ltw-blue-100: #DBE5F4;
--ltw-blue-200: #B4C8E8; /* dark-mode hover/link — 10.77 on dark page */
--ltw-blue-300: #8FAEE0; /* dark-mode accent — 8.10 on dark page */
--ltw-blue-400: #5381C7; /* UI / large text only */
--ltw-blue-500: #2F5FAC; /* focus ring — 5.90 on paper */
--ltw-blue-600: #234C8F; /* PRIMARY */
--ltw-blue-700: #1B3C73;
--ltw-blue-800: #152D56;
--ltw-blue-900: #0E1D38;
/* --- Beam ramp — THE ACCENT. Section numbers, kicker rules, active nav, the
short-answer mark. One beam moment per view region; never body text on
light except beam-600 (5.62 on paper). */
--ltw-beam-50: #FDF1E9;
--ltw-beam-100: #FADFCC;
--ltw-beam-200: #F4BC98;
--ltw-beam-300: #F0A06E; /* dark-mode accent text — 8.67 on dark page */
--ltw-beam-400: #E7773A; /* dark-mode rules */
--ltw-beam-500: #D65B1D; /* RULES / DOTS only — 3.68 on paper */
--ltw-beam-600: #A9440F; /* accent text — 5.62 paper, 5.38 on beam-50 */
--ltw-beam-700: #8A3810;
/* --- Birch — material tone: figure grounds, resource bands, higher-ed ---- */
--ltw-birch-100: #F2EADB;
--ltw-birch-200: #E5D6BB;
--ltw-birch-400: #C4A77A;
--ltw-birch-600: #8E7048;
--ltw-birch-800: #5E4A2E; /* 7.04 on birch-100 */
/* --- Green ramp — LEARNING + SAFE PROCESS (unchanged, re-measured) -------
g-600 6.27 on paper */
--ltw-green-50: #EAF6EF;
--ltw-green-100: #CFE9DA;
--ltw-green-200: #A3D5BA;
--ltw-green-300: #6CC194;
--ltw-green-400: #3D9A6B;
--ltw-green-500: #2A7F53;
--ltw-green-600: #1F6942;
--ltw-green-700: #17512F;
/* --- Amber ramp — CAUTION (unchanged). a-600 5.58 on paper -------------- */
--ltw-amber-50: #FDF4E3;
--ltw-amber-100: #FAE6BF;
--ltw-amber-200: #F2CE86;
--ltw-amber-400: #D9950F;
--ltw-amber-500: #A97008;
--ltw-amber-600: #8A5A06;
--ltw-amber-700: #6B4505;
/* --- Red ramp — STOP CONDITIONS ONLY (unchanged). r-600 7.13 on paper ----
Still the one hard rule: red means "do not proceed" and appears only on
stop boxes, prohibited-material chips and stop rows. The beam accent is
orange and never carries a stop meaning. */
--ltw-red-50: #FCEDEC;
--ltw-red-100: #F7D6D3;
--ltw-red-200: #EFB2AC;
--ltw-red-300: #E08076;
--ltw-red-400: #CF4A3C;
--ltw-red-600: #A32017;
--ltw-red-700: #801710;
}
/* ==========================================================================
03 SEMANTIC COLOR ALIASES
Component CSS uses ONLY these. Dark mode (§10) remaps this block and nothing
else, which is what keeps light/dark from drifting apart.
========================================================================== */
:root {
/* Surfaces — warm paper page, white cards, graphite inverse */
--ltw-surface: var(--ltw-n-25); /* page paper */
--ltw-surface-card: var(--ltw-n-0); /* cards, panels, downloads */
--ltw-surface-tint: var(--ltw-n-50); /* alternating band, zebra row */
--ltw-surface-raised: var(--ltw-n-0); /* card, panel */
--ltw-surface-sunken: var(--ltw-n-100); /* table head, inset */
--ltw-surface-inverse: var(--ltw-n-900); /* footer, lead form, dark band */
--ltw-surface-material: var(--ltw-birch-100); /* resource bands, figure mats */
--ltw-band: var(--ltw-n-50); /* page-opening paper band */
--ltw-grid-line: var(--ltw-n-200); /* grid paper behind openings */
/* Ink */
--ltw-ink: var(--ltw-n-800); /* body 13.71 on paper */
--ltw-ink-strong: var(--ltw-n-900); /* headings 17.07 on paper */
--ltw-ink-secondary: var(--ltw-n-600); /* secondary 8.29 on paper */
--ltw-muted: var(--ltw-n-500); /* meta 5.55 on paper */
--ltw-ink-inverse: var(--ltw-n-25); /* on inverse 16.4 */
--ltw-ink-inverse-muted:#BDB8AD; /* on inverse 8.82 */
/* Lines */
--ltw-border: var(--ltw-n-200);
--ltw-border-strong: var(--ltw-n-300);
--ltw-border-subtle: var(--ltw-n-100);
--ltw-border-ink: var(--ltw-n-900); /* card hover, short-answer rule */
/* Accent (primary interactive) */
--ltw-accent: var(--ltw-blue-600); /* 7.91 on paper */
--ltw-accent-hover: var(--ltw-blue-700);
--ltw-accent-press: var(--ltw-blue-800);
--ltw-accent-soft: var(--ltw-blue-50);
--ltw-accent-soft-line: var(--ltw-blue-200);
--ltw-on-accent: var(--ltw-n-0); /* 8.39 on accent */
/* Accent 2 is now the BEAM: kicker numbers, labels, the short-answer mark.
Text-safe step only; rules and dots use --ltw-beam. */
--ltw-accent-2: var(--ltw-beam-600); /* 5.62 on paper */
--ltw-accent-2-soft: var(--ltw-beam-50);
--ltw-beam: var(--ltw-beam-500); /* rules, dots, active nav */
--ltw-info-ink: var(--ltw-blue-700); /* 9.71 on accent-soft */
/* Learning / safe process */
--ltw-safe: var(--ltw-green-600); /* 6.27 on paper */
--ltw-safe-ink: var(--ltw-green-700);
--ltw-safe-soft: var(--ltw-green-50);
--ltw-safe-line: var(--ltw-green-400);
/* Caution */
--ltw-caution: var(--ltw-amber-600); /* 5.58 on paper */
--ltw-caution-ink: var(--ltw-amber-700);
--ltw-caution-soft: var(--ltw-amber-50);
--ltw-caution-line: var(--ltw-amber-400);
/* Stop — restricted to stop conditions */
--ltw-stop: var(--ltw-red-600); /* 7.13 on paper */
--ltw-stop-ink: var(--ltw-red-700);
--ltw-stop-soft: var(--ltw-red-50);
--ltw-stop-line: var(--ltw-red-400);
--ltw-on-stop: var(--ltw-n-0);
/* Body text sitting on any tinted callout surface */
--ltw-ink-on-tint: var(--ltw-n-800);
--ltw-muted-on-tint: var(--ltw-n-500);
/* Focus ring — blueprint, never an error colour. 5.90 on paper. */
--ltw-focus: var(--ltw-blue-500);
/* Link */
--ltw-link: var(--ltw-blue-600);
--ltw-link-hover: var(--ltw-blue-800);
--ltw-link-visited: var(--ltw-blue-700); /* 10.2 on paper */
}
/* ==========================================================================
04 TYPOGRAPHY TOKENS
Follows EKG-Typography-Standard.md: 7 named steps; HEADINGS FLUID, BODY FIXED.
Fluid window is 768px → 1600px, matching WordPress fluid typography, so these
mockups and the eventual theme presets render identically.
Body being fixed is intentional, not an omission — fluid body text is an
accessibility anti-pattern and this site is read on classroom projectors,
Chromebooks, and printouts.
No webfont. System sans only: no network reference, and the stack is already
the most legible option on every device a school actually owns.
========================================================================== */
:root {
/* Workshop Blueprint type (2026-09-30). Three open-licence (SIL OFL) faces,
SELF-HOSTED from assets/fonts (licences alongside) — no network reference
to Google or any CDN, so this file's no-third-party rule still holds.
System stacks remain as fallbacks, so a failed font load still reads well.
Second in each stack is a local font sized to the web font (§23.1), so the
page doesn't move when the font arrives; theme.json's presets match.
Hanken Grotesk — headings (700–800, tight tracking) and body
Newsreader — the short answer, ledes, quotes only
JetBrains Mono — kickers, metadata, breadcrumbs, captions */
--ltw-font-sans: "Hanken Grotesk", "LTW Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--ltw-font-serif: "Newsreader", "LTW Serif Fallback", Georgia, Cambria, "Times New Roman", Times, serif;
--ltw-font-mono: "JetBrains Mono", "LTW Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
/* --- The 7 steps (EKG-Typography-Standard: headings fluid, body fixed) --- */
--ltw-fs-xs: 0.75rem; /* 12px kicker / badge fixed */
--ltw-fs-sm: 0.875rem; /* 14px meta / caption fixed */
--ltw-fs-body: 1.0625rem; /* 17px body; Hanken's x-height wants it */
--ltw-fs-lead: 1.1875rem; /* 19px intro / lead paragraph fixed */
--ltw-fs-h3: clamp(1.375rem, 1.19rem + 0.39vw, 1.625rem); /* 22 to 26 */
--ltw-fs-h2: clamp(1.75rem, 1.17rem + 1.2vw, 2.375rem); /* 28 to 38 */
--ltw-fs-h1: clamp(2.25rem, 1.33rem + 1.92vw, 3.25rem); /* 36 to 52 */
--ltw-fs-h4: 1.1875rem; /* 19px */
--ltw-fs-h5: 1.0625rem; /* 17px */
/* Line heights */
--ltw-lh-tight: 1.12;
--ltw-lh-snug: 1.3;
--ltw-lh-body: 1.65;
--ltw-lh-loose: 1.72;
/* Weights */
--ltw-fw-normal: 400;
--ltw-fw-medium: 500;
--ltw-fw-semi: 600;
--ltw-fw-bold: 700;
--ltw-fw-heavy: 800;
/* Tracking */
--ltw-ls-eyebrow: 0.09em; /* mono kickers */
--ltw-ls-wide: 0.09em;
--ltw-ls-tight: -0.018em; /* headings */
--ltw-ls-display:-0.03em; /* h1 */
}
/* ==========================================================================
05 SPACE / MEASURE / RADIUS / SHADOW / MOTION
Space scale is a 4px base with a soft geometric climb. Use tokens, not
arbitrary values — this is what makes five separately-authored pages look
like one site.
========================================================================== */
:root {
--ltw-space-0: 0;
--ltw-space-1: 0.25rem; /* 4px */
--ltw-space-2: 0.5rem; /* 8px */
--ltw-space-3: 0.75rem; /* 12px */
--ltw-space-4: 1rem; /* 16px */
--ltw-space-5: 1.5rem; /* 24px */
--ltw-space-6: 2rem; /* 32px */
--ltw-space-7: 2.5rem; /* 40px */
--ltw-space-8: 3rem; /* 48px */
--ltw-space-9: 4rem; /* 64px */
--ltw-space-10: 5rem; /* 80px */
--ltw-space-11: 6.5rem; /* 104px */
/* Measure — reading line length. Body copy never exceeds --ltw-measure. */
--ltw-measure: 68ch;
--ltw-measure-narrow: 56ch;
--ltw-measure-wide: 80ch;
/* Containers */
--ltw-container: 75rem; /* 1200px — the blueprint container */
--ltw-container-wide: 84rem;
--ltw-container-text: 46rem;
--ltw-gutter: clamp(1.25rem, 4vw, 2.5rem);
/* Radius — 4px controls, 6px callouts, 10px cards and image frames. */
--ltw-radius-xs: 2px;
--ltw-radius-sm: 4px;
--ltw-radius-md: 6px;
--ltw-radius-lg: 10px;
--ltw-radius-pill: 999px;
/* Shadow — warm graphite. Borders do the work; shadow is for lift. */
--ltw-shadow-xs: 0 1px 0 rgba(22, 22, 21, 0.04);
--ltw-shadow-sm: 0 1px 0 rgba(22, 22, 21, 0.04), 0 1px 3px rgba(22, 22, 21, 0.06);
--ltw-shadow-md: 0 1px 2px rgba(22, 22, 21, 0.05), 0 10px 28px -12px rgba(22, 22, 21, 0.18);
--ltw-shadow-lg: 0 2px 4px rgba(22, 22, 21, 0.06), 0 24px 48px -16px rgba(22, 22, 21, 0.24);
/* Motion — 120–200ms ease-out; no bounce, no scroll-jacking. */
--ltw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--ltw-dur: 160ms;
/* Structural */
--ltw-rule: 1px solid var(--ltw-border);
/* Callouts are fully bordered tinted boxes, never a coloured left stripe.
The decision table keeps its own state bar (--ltw-state-bar). */
--ltw-callout-bar: 1px;
--ltw-state-bar: 4px;
--ltw-rule-path: 1.5px dashed var(--ltw-border-strong); /* planned / placeholder */
}
/* ==========================================================================
06 ELEMENTS
========================================================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--ltw-space-4);
color: var(--ltw-ink-strong);
font-weight: var(--ltw-fw-bold);
line-height: var(--ltw-lh-snug);
letter-spacing: var(--ltw-ls-tight);
text-wrap: balance;
}
/* Heading caps are in em, not ch (0.9.6): 1ch is the "0" of whatever font is
showing, so before the font arrived the box itself was 5.6% narrower and
headings wrapped an extra line. Hanken's "0" is 0.56em at every weight, so
20ch = 11.2em, 19ch = 10.64em, 13ch = 7.28em: the same width once it loads. */
h1 { font-size: var(--ltw-fs-h1); line-height: var(--ltw-lh-tight); max-width: 11.2em; }
h2 { font-size: var(--ltw-fs-h2); line-height: var(--ltw-lh-tight); margin-top: var(--ltw-space-8); }
h3 { font-size: var(--ltw-fs-h3); margin-top: var(--ltw-space-7); }
h4 { font-size: var(--ltw-fs-h4); margin-top: var(--ltw-space-6); font-weight: var(--ltw-fw-semi); }
h5 { font-size: var(--ltw-fs-h5); margin-top: var(--ltw-space-5); font-weight: var(--ltw-fw-semi); }
h6 {
font-size: var(--ltw-fs-sm); margin-top: var(--ltw-space-5);
font-weight: var(--ltw-fw-semi); text-transform: uppercase;
letter-spacing: var(--ltw-ls-eyebrow); color: var(--ltw-ink-secondary);
}
/* First heading in a container should not push the container open. */
:where(section, article, aside, div, td, th) > :where(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
p, ul, ol, dl, figure, blockquote, pre { margin: 0 0 var(--ltw-space-5); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--ltw-fw-semi); color: var(--ltw-ink-strong); }
small { font-size: var(--ltw-fs-sm); }
a {
color: var(--ltw-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
transition: color var(--ltw-dur) var(--ltw-ease);
}
a:hover { color: var(--ltw-link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--ltw-link-visited); }
hr {
border: 0;
border-top: var(--ltw-rule);
margin: var(--ltw-space-8) 0;
}
code, kbd, samp {
font-family: var(--ltw-font-mono);
font-size: 0.9em;
background: var(--ltw-surface-sunken);
border: 1px solid var(--ltw-border-subtle);
border-radius: var(--ltw-radius-xs);
padding: 0.1em 0.35em;
}
pre {
font-family: var(--ltw-font-mono);
font-size: var(--ltw-fs-sm);
background: var(--ltw-surface-sunken);
border: var(--ltw-rule);
border-radius: var(--ltw-radius-md);
padding: var(--ltw-space-4);
overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; }
blockquote {
margin-inline: 0;
padding-left: var(--ltw-space-5);
border-left: var(--ltw-callout-bar) solid var(--ltw-accent-soft-line);
color: var(--ltw-ink-secondary);
}
abbr[title] { text-decoration: underline dotted; cursor: help; }
/* ==========================================================================
07 LAYOUT
========================================================================== */
.ltw-container { width: 100%; max-width: var(--ltw-container); margin-inline: auto; padding-inline: var(--ltw-gutter); }
.ltw-container--wide{ max-width: var(--ltw-container-wide); }
.ltw-container--text{ max-width: var(--ltw-container-text); }
/* Article body column: keeps prose at a readable measure while letting tables,
callouts, and figures break out to the full container width. */
.ltw-prose { max-width: var(--ltw-measure); }
.ltw-prose > p,
.ltw-prose > ul,
.ltw-prose > ol { max-width: var(--ltw-measure); }
.ltw-prose > :where(.ltw-table-wrap, figure, .ltw-card-grid, .ltw-download-grid, .ltw-steps) { max-width: none; }
.ltw-lead { font-size: var(--ltw-fs-lead); line-height: var(--ltw-lh-loose); color: var(--ltw-ink-secondary); max-width: var(--ltw-measure-narrow); }
/* Vertical rhythm between page sections. */
.ltw-section { padding-block: var(--ltw-space-9); }
.ltw-section--tight{ padding-block: var(--ltw-space-7); }
.ltw-section--tint { background: var(--ltw-surface-tint); }
.ltw-section--sunken { background: var(--ltw-surface-raised); }
/* Hero band — a light section head with the photograph shown, not hidden.
This was first built as a dark scrim over a full-bleed background image.
That was the wrong instinct for a reading site: it put one marketing-shaped
band at the top of what is otherwise a continuous light reading surface, and
a cold blue scrim over a warm photograph composited to olive in the midtones.
It also hid the picture it was built around, at 62-94% opacity.
The photograph is now a real beside the type — visible, alt-texted,
responsive via srcset — and the type sits on the ordinary page surface where
no contrast gymnastics are needed.
Markup:
eyebrow, h1, lead, prose, buttons
*/
.ltw-section--hero {
padding-block: var(--ltw-space-9);
background: var(--ltw-surface-tint);
}
.ltw-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.75rem, 4vw, 3.25rem);
align-items: center;
}
/* Two columns only where there is room for a readable measure AND a photograph
still worth looking at. Below that they stack, type first. */
@media (min-width: 62rem) {
.ltw-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.ltw-hero-body > :first-child { margin-top: 0; }
.ltw-hero-body > :last-child { margin-bottom: 0; }
.ltw-hero-body :where(p, ul, ol) { max-width: var(--ltw-measure-narrow); }
.ltw-hero-figure { margin: 0; }
.ltw-hero-figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center 58%; /* favours the hands and the workpiece */
border: var(--ltw-rule);
border-radius: var(--ltw-radius-md);
}
@media (max-width: 61.999rem) {
.ltw-hero-figure img { aspect-ratio: 16 / 9; }
}
@media print {
.ltw-section--hero { background: transparent; }
.ltw-hero-figure { display: none; }
}
/* Header / footer field — the one place the deep-blue inverse surface is used. */
.ltw-band-inverse {
background: var(--ltw-surface-inverse);
color: var(--ltw-ink-inverse);
}
.ltw-band-inverse :where(h1,h2,h3,h4,h5,h6) { color: var(--ltw-ink-inverse); }
.ltw-band-inverse a { color: var(--ltw-blue-200); }
.ltw-band-inverse a:hover { color: var(--ltw-n-0); }
.ltw-eyebrow {
display: block;
font-size: var(--ltw-fs-sm);
font-weight: var(--ltw-fw-semi);
letter-spacing: var(--ltw-ls-eyebrow);
text-transform: uppercase;
/* Was --ltw-accent-2 (teal #0A626E). Retired from section heads 2026-07-27:
it was the only non-blue colour in the reading column, it appears above
every section of every page, and it read as "green" against the warm
photography. An eyebrow is a quiet section label, not an accent — the
neutral does that job and leaves the palette one blue family + neutrals.
Teal still lives on badges, chips and the logo, where it is doing a
different and much smaller job. */
color: var(--ltw-ink-secondary); /* 7.15:1 on surface */
margin-bottom: var(--ltw-space-2);
}
/* Stack utility — the workhorse for vertical spacing inside components. */
.ltw-stack > * + * { margin-top: var(--ltw-space-5); }
.ltw-stack-sm > * + * { margin-top: var(--ltw-space-3); }
.ltw-stack-lg > * + * { margin-top: var(--ltw-space-7); }
/* ==========================================================================
08 COMPONENTS
These recur on every page type. Build pages FROM these; do not restyle them.
========================================================================== */
/* --- 8.1 Breadcrumb -------------------------------------------------------
Markup: */
.ltw-breadcrumb { font-size: var(--ltw-fs-sm); color: var(--ltw-muted); }
.ltw-breadcrumb ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--ltw-space-1) var(--ltw-space-2);
}
.ltw-breadcrumb li { display: flex; align-items: center; gap: var(--ltw-space-2); }
.ltw-breadcrumb li + li::before {
content: "/";
color: var(--ltw-border-strong);
font-weight: var(--ltw-fw-normal);
}
.ltw-breadcrumb a { color: var(--ltw-ink-secondary); text-decoration: none; }
.ltw-breadcrumb a:hover { color: var(--ltw-link-hover); text-decoration: underline; }
.ltw-breadcrumb [aria-current="page"] { color: var(--ltw-ink); font-weight: var(--ltw-fw-medium); }
/* --- 8.2 Audience badge ---------------------------------------------------
Who a page is for. One of three, per Structure-Spec §2.1 `audience` taxonomy.
Markup: Grades 6–12
Modifiers: --6-12 (blue) · --higher-ed (birch) · --admin (neutral)
All three carry a text label — colour is never the only signal. */
.ltw-badge {
display: inline-flex; align-items: center; gap: var(--ltw-space-2);
padding: var(--ltw-space-1) var(--ltw-space-3);
font-size: var(--ltw-fs-xs);
font-weight: var(--ltw-fw-semi);
line-height: var(--ltw-lh-snug);
letter-spacing: 0.02em;
border-radius: var(--ltw-radius-pill);
border: 1px solid transparent;
white-space: nowrap;
}
.ltw-badge::before {
content: "";
width: 0.5em; height: 0.5em; border-radius: 50%;
background: currentColor; flex: none;
}
.ltw-badge--6-12 {
background: var(--ltw-accent-soft);
color: var(--ltw-blue-700); /* 8.74:1 on blue-100/-50 */
border-color: var(--ltw-accent-soft-line);
}
.ltw-badge--higher-ed {
background: var(--ltw-surface-material);
color: var(--ltw-birch-800); /* 7.04:1 on birch-100 */
border-color: var(--ltw-birch-200);
}
.ltw-badge--admin {
background: var(--ltw-surface-sunken);
color: var(--ltw-n-700); /* 8.15:1 on n-100 */
border-color: var(--ltw-border);
}
/* --- 8.3 Chips ------------------------------------------------------------
Compact factual metadata. Distinct from badges: badges say WHO, chips say
WHAT/HOW MUCH. Chips carry an explicit label so they read out of context.
Markup: Actual laser minutes12 min
Variants:
.ltw-chip--grade grade / level (neutral)
.ltw-chip--minutes actual laser minutes (birch — the blueprint's signature
metric: machine time, NOT class time)
.ltw-chip--periods class periods (neutral)
.ltw-chip--material material status; REQUIRES a state class:
.is-approved green — cleared for classroom use
.is-caution amber — conditional: ventilation, supervision, testing
.is-prohibited red — never cut/engrave. STOP-class information, and
the one chip permitted to use red.
Material status also sets a text prefix so the state survives greyscale
printing and colour-blind reading. */
.ltw-chip {
display: inline-flex; align-items: baseline; gap: var(--ltw-space-2);
padding: var(--ltw-space-1) var(--ltw-space-3);
font-size: var(--ltw-fs-xs);
line-height: var(--ltw-lh-snug);
background: var(--ltw-surface-raised);
border: 1px solid var(--ltw-border);
border-radius: var(--ltw-radius-sm);
color: var(--ltw-ink);
}
.ltw-chip__label {
color: var(--ltw-muted);
font-weight: var(--ltw-fw-normal);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.92em;
}
.ltw-chip__label::after { content: ":"; }
.ltw-chip__value { font-weight: var(--ltw-fw-semi); font-variant-numeric: tabular-nums; }
/* Grade/level and class-periods chips use the neutral base deliberately —
they are context, not status. Declared explicitly so the intent is legible. */
.ltw-chip--grade,
.ltw-chip--periods { background: var(--ltw-surface-raised); border-color: var(--ltw-border); }
.ltw-chip--minutes {
background: var(--ltw-surface-material);
border-color: var(--ltw-birch-200);
color: var(--ltw-birch-800);
}
.ltw-chip--minutes .ltw-chip__label { color: var(--ltw-birch-800); opacity: 0.85; }
.ltw-chip--material .ltw-chip__value::before { font-weight: var(--ltw-fw-bold); margin-right: 0.35em; }
.ltw-chip--material.is-approved {
background: var(--ltw-safe-soft); border-color: var(--ltw-green-200); color: var(--ltw-safe-ink);
}
.ltw-chip--material.is-approved .ltw-chip__value::before { content: "✓"; }
.ltw-chip--material.is-approved .ltw-chip__label { color: var(--ltw-safe-ink); opacity: 0.85; }
.ltw-chip--material.is-caution {
background: var(--ltw-caution-soft); border-color: var(--ltw-amber-200); color: var(--ltw-caution-ink);
}
.ltw-chip--material.is-caution .ltw-chip__value::before { content: "!"; }
.ltw-chip--material.is-caution .ltw-chip__label { color: var(--ltw-caution-ink); opacity: 0.85; }
.ltw-chip--material.is-prohibited {
background: var(--ltw-stop-soft); border-color: var(--ltw-red-200); color: var(--ltw-stop-ink);
}
.ltw-chip--material.is-prohibited .ltw-chip__value::before { content: "✕"; }
.ltw-chip--material.is-prohibited .ltw-chip__label { color: var(--ltw-stop-ink); opacity: 0.85; }
/* Row wrapper for METADATA ONLY — audience badges and factual chips under a
page title, or in the foot of a card. It is NOT a button row and NOT a
pager: those are .ltw-actions and .ltw-pagination (§8.3b). Keeping meta-bar
to one job is what stopped it drifting into four. */
.ltw-meta-bar {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--ltw-space-2) var(--ltw-space-3);
margin-block: var(--ltw-space-4);
}
/* --- 8.3b Action row + pagination -----------------------------------------
The two jobs .ltw-meta-bar used to be overloaded with, each now its own
component so a title's metadata row and a page's buttons never share a class.
.ltw-actions a row of buttons — hero CTAs, form submit/reset, tool
controls. Honors the one-primary-per-section rule (§8.14):
at most one .ltw-btn--primary in the row.
.ltw-pagination an archive pager — previous / numbered pages / next. Use a