/* ──────────────────────────────────────────────────────────────────
twelve-breathing.css · the typographic + theme gear
──────────────────────────────────────────────────────────────────
Pairs with twelve-breathing.js (same dir). A page adopts both with:
The gear renders itself in the lower-left of the viewport. State
persists in localStorage under: cyrelium.mode · cyrelium.scale ·
cyrelium.h1Scale.
Twelve breaths · the 12-step modular scale on a perfect-fourth
ratio (1.067x per step). Captain coinage. Sibling reading: the
twelve gates of the open horizon.
This stylesheet only declares the gear's chrome and the CSS variable
defaults. Pages must declare their own type sizes using:
font-size: calc( * 1px * var(--breath, 1));
so the multiplier propagates. The js writes --breath and --h1-scale
on :root and toggles a data-theme="light|dark" on .
────────────────────────────────────────────────────────────────── */
:root {
/* dark theme (default) — inherits from _ptah/cyrelium-md-viewer.html */
--bg: #070b1a;
--bg-deep: #040611;
--ink: #e8e6dc;
--ink-soft: #c8c5b8;
--muted: #6b6e75;
--line: rgba(255, 255, 255, 0.09);
--line-strong: rgba(255, 255, 255, 0.18);
--card: rgba(255, 255, 255, 0.03);
--card-soft: rgba(255, 255, 255, 0.05);
--cyrelium: #6fa0b5;
--cyrelium-soft: rgba(111, 160, 181, 0.22);
--cyrelium-glow: 0 0 14px rgba(111, 160, 181, 0.55);
--gold: #f5d678;
--gold-soft: rgba(245, 214, 120, 0.22);
--gold-glow: 0 0 14px rgba(245, 214, 120, 0.55);
--bad: #d65a4a;
--bad-soft: rgba(214, 90, 74, 0.22);
--done: #6ec98a;
--done-soft: rgba(110, 201, 138, 0.22);
--done-glow: 0 0 14px rgba(110, 201, 138, 0.5);
--serif: "Cormorant", "Hylia Serif", "Charter", "Iowan Old Style", Georgia, serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--bg-radial: radial-gradient(ellipse at 50% 0%, #0d1428 0%, var(--bg) 45%, var(--bg-deep) 100%);
/* twelve-breathing scale variables — written by JS */
--breath: 1; /* base multiplier on every font-size */
--h1-scale: 1; /* additional multiplier on H1-class display */
}
html[data-theme="light"] {
/* light parchment — same palette logic, ink inverted, accents darkened for contrast */
--bg: #f4ede1;
--bg-deep: #ebe0cc;
--ink: #1a1d22;
--ink-soft: #2f343b;
--muted: #7a7468;
--line: rgba(28, 32, 40, 0.10);
--line-strong: rgba(28, 32, 40, 0.22);
--card: rgba(28, 32, 40, 0.04);
--card-soft: rgba(28, 32, 40, 0.07);
--cyrelium: #3d6e85;
--cyrelium-soft: rgba(61, 110, 133, 0.20);
--cyrelium-glow: 0 0 14px rgba(61, 110, 133, 0.30);
--gold: #a07f1a;
--gold-soft: rgba(160, 127, 26, 0.22);
--gold-glow: 0 0 14px rgba(160, 127, 26, 0.30);
--bad: #b34638;
--bad-soft: rgba(179, 70, 56, 0.20);
--done: #3e8e58;
--done-soft: rgba(62, 142, 88, 0.22);
--done-glow: 0 0 14px rgba(62, 142, 88, 0.30);
--bg-radial: radial-gradient(ellipse at 50% 0%, #faf4e7 0%, var(--bg) 45%, var(--bg-deep) 100%);
}
/* ── the gear chrome ─────────────────────────────────────────────── */
.tb-gear {
position: fixed;
bottom: 18px;
left: 18px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--line);
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font: 18px var(--serif);
z-index: 60;
opacity: 0.40;
transition: opacity .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .35s ease;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.tb-gear:hover {
opacity: 1;
background: var(--card-soft);
border-color: var(--cyrelium-soft);
color: var(--cyrelium);
box-shadow: var(--cyrelium-glow);
transform: rotate(45deg);
}
.tb-gear.open {
opacity: 1;
color: var(--gold);
border-color: var(--gold-soft);
box-shadow: var(--gold-glow);
transform: rotate(90deg);
}
.tb-panel {
position: fixed;
bottom: 64px;
left: 18px;
width: 260px;
background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
border: 1px solid var(--line-strong);
border-radius: 6px;
padding: 14px 16px 12px;
z-index: 60;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.tb-panel.on {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.tb-panel-head {
font: 500 10px/1 var(--serif);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--muted);
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: baseline;
gap: 10px;
}
.tb-panel-head .tb-sigil {
color: var(--gold);
font: 14px var(--serif);
letter-spacing: 0;
}
.tb-panel-head .tb-cap {
color: var(--ink-soft);
font-style: italic;
letter-spacing: 0.12em;
}
.tb-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 11px;
}
.tb-row:last-of-type { margin-bottom: 6px; }
.tb-row .tb-label {
font: 9.5px var(--mono);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
flex-shrink: 0;
}
.tb-seg {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 3px;
overflow: hidden;
}
.tb-seg button {
background: transparent;
border: 0;
color: var(--muted);
font: 600 10px var(--mono);
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 5px 10px;
cursor: pointer;
transition: background .15s, color .15s;
}
.tb-seg button.on {
background: var(--cyrelium-soft);
color: var(--ink);
}
.tb-seg button:hover:not(.on) {
color: var(--ink-soft);
background: var(--card-soft);
}
.tb-step {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 3px;
overflow: hidden;
}
.tb-step button {
background: transparent;
border: 0;
color: var(--muted);
font: 600 12px var(--mono);
cursor: pointer;
width: 22px;
height: 24px;
transition: background .15s, color .15s;
}
.tb-step button:hover { color: var(--ink); background: var(--card-soft); }
.tb-step .tb-val {
font: 600 11px var(--mono);
color: var(--gold);
min-width: 36px;
text-align: center;
padding: 0 4px;
letter-spacing: 0.08em;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
}
.tb-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.tb-foot .tb-mantra {
font: 9px var(--mono);
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
opacity: 0.65;
}
.tb-reset {
background: transparent;
border: 0;
color: var(--muted);
font: 9.5px var(--mono);
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
padding: 3px 6px;
border-radius: 2px;
transition: color .15s, background .15s;
}
.tb-reset:hover { color: var(--bad); background: var(--bad-soft); }