/* ═══════════════════════════════════════════════════════════════════════
Trzeciak Laboratories — shared web framework
Single source of truth for every TL app. Served at https://style.trzeciak.cloud/tl.css
USAGE (per app):
1. (or "garden") — picks the palette.
2.
3. Load the three fonts (Big Shoulders Display, Jost, Space Mono) — e.g.
4. Use the .tl-* components below. Don't redefine them locally — edit
this file and re-serve so every app updates together.
THEMING MODEL
- Palette tokens (--color-tl-*) hold raw values; they differ per theme.
- Semantic role tokens (--tl-*) map the palette onto jobs (structure,
header, button fill) so components are written ONCE and themes only
remap. To add a theme: add a [data-tl-theme="x"] block; touch nothing else.
INVARIANTS (see tl-style/CLAUDE.md): flat (no shadows/gradients/radius);
three fonts, three jobs; role-locked accents — teal=data, blue=interactive,
magenta=config, green/orange/red=status. Structure is gold (deco) / chrome (garden).
═══════════════════════════════════════════════════════════════════════ */
/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
/* ── Themes ─────────────────────────────────────────────────────────────
:root defaults to Deco so an app that forgets data-tl-theme still renders.
─────────────────────────────────────────────────────────────────────── */
:root,
[data-tl-theme="deco"] {
/* Palette — Wetland Dark */
--color-tl-bg: #141414;
--color-tl-bg-mid: #1c1c1c;
--color-tl-surface: #262626;
--color-tl-highlight: #333333;
--color-tl-border: #2e2e2e;
--color-tl-text: #cccccc;
--color-tl-text-secondary: #a0a0a0;
--color-tl-text-muted: #7a7a7a;
--color-tl-text-bright: #e8e8e8;
--color-tl-gold: #e8bc50; /* structure: borders, headings, rules */
--color-tl-gold-dim: #a07828;
--color-tl-teal: #4a9a9a; /* data only */
--color-tl-teal-dim: #3d8080;
--color-tl-blue: #4c82ba; /* interactive only */
--color-tl-blue-dim: #3a6898;
--color-tl-magenta: #8e6dad; /* config only */
--color-tl-magenta-dim: #6e5090;
--color-tl-red: #c43e52;
--color-tl-green: #68aa7c;
--color-tl-orange: #d07848;
/* Semantic roles */
--tl-structure: var(--color-tl-gold);
--tl-structure-dim: var(--color-tl-gold-dim);
--tl-btn-fill-text: var(--color-tl-bg);
--tl-header-bg: var(--color-tl-bg-mid);
--tl-header-border: var(--color-tl-gold);
--tl-header-fg: var(--color-tl-gold); /* logo stroke + title */
--tl-header-fg-hover: var(--color-tl-text-bright); /* logo hover */
--tl-header-divider: var(--color-tl-border);
--tl-header-tagline: var(--color-tl-text-muted);
/* Fonts */
--font-tl-display: "Big Shoulders Display", sans-serif;
--font-tl-sans: "Jost", sans-serif;
--font-tl-mono: "Space Mono", monospace;
}
[data-tl-theme="garden"] {
/* Palette — Wetland Light */
--color-tl-bg: #fdf8e9;
--color-tl-bg-mid: #f2e5be;
--color-tl-surface: #fffdf3;
--color-tl-highlight: #e6d294;
--color-tl-border: #dccc9c;
--color-tl-text: #2a2520;
--color-tl-text-secondary: #5a5246;
--color-tl-text-muted: #857c6c;
--color-tl-text-bright: #1a1814;
/* Garden splits Deco's gold: chrome (emerald) carries structure, gold demotes to accent */
--color-tl-chrome: #0e6a35;
--color-tl-chrome-dim: #3d8a5a;
--color-tl-gold: #a87800; /* accent only: buttons, links, ornaments */
--color-tl-gold-dim: #c89820;
--color-tl-teal: #1a7575;
--color-tl-teal-dim: #4a9a9a;
--color-tl-blue: #1f5a9c;
--color-tl-blue-dim: #4c82ba;
--color-tl-magenta: #6e4aaa;
--color-tl-magenta-dim: #8e6dad;
--color-tl-red: #b81e3a;
--color-tl-green: #2d8055;
--color-tl-orange: #c25a18;
/* Semantic roles — structure remaps to chrome; header inverts to a solid emerald bar */
--tl-structure: var(--color-tl-chrome);
--tl-structure-dim: var(--color-tl-chrome-dim);
--tl-btn-fill-text: var(--color-tl-surface);
--tl-header-bg: var(--color-tl-chrome);
--tl-header-border: var(--color-tl-gold-dim);
--tl-header-fg: var(--color-tl-bg); /* cream logo + title on green */
--tl-header-fg-hover: var(--color-tl-gold-dim);
--tl-header-divider: rgb(253 248 233 / 0.3);
--tl-header-tagline: rgb(253 248 233 / 0.75);
}
/* ── Base elements ──────────────────────────────────────────────────────
NOTE: font-size lives on body, never on — sizing the root rescales
every rem and silently shrinks rem-based components (see html-vs-body bug).
─────────────────────────────────────────────────────────────────────── */
body {
background-color: var(--color-tl-bg);
color: var(--color-tl-text);
font-family: var(--font-tl-sans);
font-size: 0.9375rem;
line-height: 1.6;
}
h1, h2, h3 {
font-family: var(--font-tl-display);
color: var(--tl-structure);
letter-spacing: 0.04em;
line-height: 1.1;
text-transform: uppercase;
}
h4, h5, h6 {
font-family: var(--font-tl-sans);
color: var(--color-tl-text-bright);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
}
a { color: var(--color-tl-blue); text-decoration: none; }
a:hover { color: var(--color-tl-text-bright); }
input, select, textarea {
background-color: var(--color-tl-surface);
color: var(--color-tl-text);
border: 1px solid var(--color-tl-border);
font-family: var(--font-tl-sans);
font-size: 0.9375rem;
padding: 0.5rem 0.75rem;
outline: none;
width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-tl-blue); }
select { appearance: none; cursor: pointer; }
label {
display: block;
color: var(--color-tl-text-secondary);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
/* ── Panels ─────────────────────────────────────────────────────────── */
.tl-panel {
background-color: var(--color-tl-surface);
border: 1px solid var(--tl-structure);
padding: 1.5rem;
}
/* Double border — art deco nested-line treatment */
.tl-panel-featured {
background-color: var(--color-tl-surface);
border: 1px solid var(--tl-structure);
outline: 1px solid var(--tl-structure);
outline-offset: 4px;
padding: 1.5rem;
}
/* Corner accent marks — diagonal L-brackets at opposing corners */
.tl-panel-corners {
position: relative;
background-color: var(--color-tl-surface);
border: 1px solid var(--tl-structure);
padding: 1.5rem;
}
.tl-panel-corners::before {
content: '';
position: absolute;
top: 5px; left: 5px;
width: 16px; height: 16px;
border-top: 1px solid var(--tl-structure);
border-left: 1px solid var(--tl-structure);
pointer-events: none;
}
.tl-panel-corners::after {
content: '';
position: absolute;
bottom: 5px; right: 5px;
width: 16px; height: 16px;
border-bottom: 1px solid var(--tl-structure);
border-right: 1px solid var(--tl-structure);
pointer-events: none;
}
/* ── Cards (panel + title + description) ─────────────────────────────── */
.tl-card-name {
font-family: var(--font-tl-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--tl-structure);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.tl-card-desc { font-size: 0.8rem; color: var(--color-tl-text-secondary); }
/* ── Rules & dividers ───────────────────────────────────────────────── */
.tl-rule {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--tl-structure);
font-family: var(--font-tl-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-block: 1.5rem;
}
.tl-rule::before, .tl-rule::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--tl-structure);
}
.tl-hr { border: none; border-top: 1px solid var(--color-tl-border); margin-block: 1rem; }
/* ── Buttons ────────────────────────────────────────────────────────────
.tl-btn — default, structural gold outline
.tl-btn-secondary — dim gold
.tl-btn-action — blue, for primary/interactive actions
─────────────────────────────────────────────────────────────────────── */
.tl-btn {
display: inline-block;
border: 1px solid var(--color-tl-gold);
color: var(--color-tl-gold);
background: transparent;
font-family: var(--font-tl-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.5rem 1.5rem;
cursor: pointer;
transition: background-color 100ms, color 100ms;
}
.tl-btn:hover { background-color: var(--color-tl-gold); color: var(--tl-btn-fill-text); }
.tl-btn:disabled { border-color: var(--color-tl-border); color: var(--color-tl-text-muted); cursor: not-allowed; background: transparent; }
.tl-btn-secondary { border-color: var(--color-tl-gold-dim); color: var(--color-tl-gold-dim); }
.tl-btn-secondary:hover { background-color: var(--color-tl-gold-dim); color: var(--tl-btn-fill-text); }
.tl-btn-action { border-color: var(--color-tl-blue); color: var(--color-tl-blue); }
.tl-btn-action:hover { background-color: var(--color-tl-blue); color: var(--tl-btn-fill-text); }
/* ── Badges ─────────────────────────────────────────────────────────── */
.tl-badge {
display: inline-block;
font-family: var(--font-tl-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border: 1px solid currentColor;
}
.tl-badge-active { color: var(--color-tl-teal); }
.tl-badge-ok { color: var(--color-tl-green); }
.tl-badge-warning { color: var(--color-tl-orange); }
.tl-badge-error { color: var(--color-tl-red); }
.tl-badge-info { color: var(--color-tl-blue); }
.tl-badge-config { color: var(--color-tl-magenta); }
/* ── Data readouts (teal, monospace — live values only) ─────────────── */
.tl-readout { font-family: var(--font-tl-mono); color: var(--color-tl-teal); font-variant-numeric: tabular-nums; }
.tl-readout-label { font-family: var(--font-tl-sans); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-tl-text-muted); }
/* ── Level meters ───────────────────────────────────────────────────── */
.tl-bar-meter { height: 4px; background-color: var(--color-tl-border); width: 100%; margin-top: 0.75rem; }
.tl-bar-meter-fill { height: 100%; background-color: var(--color-tl-teal); }
.tl-bar-meter-fill.warn { background-color: var(--color-tl-orange); }
.tl-bar-meter-fill.clip { background-color: var(--color-tl-red); }
.tl-seg-meter { display: flex; gap: 2px; margin-top: 0.5rem; }
.tl-seg-meter .seg { width: 10px; height: 6px; background-color: var(--color-tl-border); flex-shrink: 0; }
.tl-seg-meter .seg.on { background-color: var(--color-tl-teal); }
.tl-seg-meter .seg.peak { background-color: var(--color-tl-orange); }
.tl-seg-meter .seg.clip { background-color: var(--color-tl-red); }
.tl-dual-meter { display: flex; flex-direction: column; gap: 3px; margin-top: 0.75rem; }
.tl-dual-meter .channel-label { font-family: var(--font-tl-mono); font-size: 0.55rem; color: var(--color-tl-text-muted); letter-spacing: 0.08em; margin-bottom: 2px; }
/* ── Header ──────────────────────────────────────────────────────────────
Shared shape across every TL app: logo (links home) │ divider │ title on
the left, optional tagline on the right. Only colors change between themes
(via --tl-header-* tokens). Markup partial: header.html.
─────────────────────────────────────────────────────────────────────── */
.tl-header { background-color: var(--tl-header-bg); border-bottom: 1px solid var(--tl-header-border); padding: 0.875rem 2rem; display: flex; align-items: center; gap: 1.5rem; }
.tl-header-logo-link { display: flex; align-items: center; height: 2rem; flex-shrink: 0; }
.tl-header-logo-link:hover .tl-header-logo { stroke: var(--tl-header-fg-hover); }
.tl-header-logo { height: 100%; width: auto; stroke: var(--tl-header-fg); }
.tl-header-divider { width: 1px; height: 1.25rem; background-color: var(--tl-header-divider); flex-shrink: 0; }
.tl-header-title { font-family: var(--font-tl-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-header-fg); line-height: 1; }
.tl-header-tagline { margin-left: auto; font-family: var(--font-tl-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-align: right; color: var(--tl-header-tagline); }
/* ── Footer ─────────────────────────────────────────────────────────── */
.tl-footer { text-align: center; padding: 2rem; border-top: 1px solid var(--color-tl-border); }
.tl-footer-brand { font-family: var(--font-tl-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--color-tl-text-muted); margin-top: 0.5rem; }