/* =============================================================================
* LEDGER Cyber Lab -- parallel design layer (tokens + atmosphere + utilities)
*
* Scope: body.ledger-cyber (set per-page via ).
* Every rule in this file starts with that class so the stylesheet
* is inert anywhere it accidentally loads.
*
* Coexists with: assets/style.css (apothecary palette, default layer).
* Opt-in is per-page via body class. Pages without the class render the
* apothecary layer untouched.
*
* Provenance:
* Ported from the upstream Cyber Lab prototype. Visual values preserved
* identical. Identifiers renamed to the ledger-cyber namespace. Type
* stacks resolved via the existing --serif and --mono tokens in style.css
* for single-source font management. Grain layer intentionally not ported
* (perf cost vs. visual signal at login surface DPI).
* ============================================================================= */
/* ---- Tokens ---------------------------------------------------------------- */
body.ledger-cyber {
/* Surfaces (TASK-1 warm-apothecary rework).
* Were cold blue-black (#07090d etc., blue the dominant channel). Now a
* candlelit warm charcoal: red > green > blue, so the surfaces stop fighting
* the warm cream ink and the gold/oxblood atmosphere. Same value ladder
* (0 deepest -> surface-2 most raised), only the hue moved. */
--ledger-cyber-bg-0: #0b0907;
--ledger-cyber-bg-1: #13100c;
--ledger-cyber-bg-2: #1a1610;
--ledger-cyber-surface-1: #221d15;
--ledger-cyber-surface-2: #2b241a;
/* Ink. Warmed the base to aged-parchment cream. ink-dim was rgba .4, which
* measured ~3:1 on the background and failed WCAG AA on real content
* (product meta, counts, cart line meta, placeholders); raised to .56
* (~5.2:1, passes). mute raised to .72; faint stays decorative-only. */
--ledger-cyber-ink-hi: #f6ecd4;
--ledger-cyber-ink: #ece3d1;
--ledger-cyber-ink-mute: rgba(236, 227, 209, 0.72);
--ledger-cyber-ink-dim: rgba(236, 227, 209, 0.56);
--ledger-cyber-ink-faint: rgba(236, 227, 209, 0.32);
/* Accents (unchanged: gold + oxblood are already apothecary). */
--ledger-cyber-gold: #d4a53a;
--ledger-cyber-gold-hi: #e8c878;
--ledger-cyber-gold-lo: #b8892c;
--ledger-cyber-crimson: #7b1e3a;
--ledger-cyber-crimson-hi: #c43e60;
/* Lines. Warmed from a cold white tint to a faint parchment line, and
* nudged up in opacity so card/table borders read against the warm ground
* (the old rgba white .05 was nearly invisible). */
--ledger-cyber-line: rgba(240, 224, 190, 0.09);
--ledger-cyber-line-gold: rgba(212, 165, 58, 0.20);
--ledger-cyber-line-gold-2: rgba(212, 165, 58, 0.13);
/* Page gradient */
--ledger-cyber-page-bg: linear-gradient(180deg,
var(--ledger-cyber-bg-0) 0%,
var(--ledger-cyber-bg-1) 45%,
var(--ledger-cyber-bg-2) 100%);
/* Type stacks resolve via the apothecary layer's existing tokens
* (style.css lines 92-93) for single-source font management. */
--ledger-cyber-font-display: var(--serif);
--ledger-cyber-font-body: var(--serif);
--ledger-cyber-font-mono: var(--mono);
background: var(--ledger-cyber-page-bg);
color: var(--ledger-cyber-ink);
font-family: var(--ledger-cyber-font-body);
}
/* ---- Atmosphere: ambient layer base ---------------------------------------- */
body.ledger-cyber .ledger-cyber-glow,
body.ledger-cyber .ledger-cyber-blob-gold,
body.ledger-cyber .ledger-cyber-blob-crimson {
position: fixed;
pointer-events: none;
z-index: 0;
}
/* ---- Atmosphere: mouse-tracked glow ---------------------------------------- */
body.ledger-cyber .ledger-cyber-glow {
inset: 0;
--ledger-cyber-mouse-x: 0.5;
--ledger-cyber-mouse-y: 0.3;
background: radial-gradient(
800px circle at calc(var(--ledger-cyber-mouse-x) * 100%) calc(var(--ledger-cyber-mouse-y) * 100%),
rgba(123, 30, 58, 0.18),
transparent 50%);
transition: background 400ms ease;
}
/* Static fallback for input devices without hover/mouse. The glow rests
* slightly above center so it reads as "behind the hero" on first paint
* instead of "behind the page middle". */
@media (hover: none) {
body.ledger-cyber .ledger-cyber-glow {
--ledger-cyber-mouse-x: 0.5;
--ledger-cyber-mouse-y: 0.35;
}
}
/* ---- Atmosphere: drifting blobs -------------------------------------------- */
body.ledger-cyber .ledger-cyber-blob-gold {
top: -200px;
right: -150px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(212, 165, 58, 0.08), transparent 70%);
filter: blur(60px);
animation: ledger-cyber-drift 18s ease-in-out infinite;
}
body.ledger-cyber .ledger-cyber-blob-crimson {
bottom: -200px;
left: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(123, 30, 58, 0.12), transparent 70%);
filter: blur(80px);
animation: ledger-cyber-drift 22s ease-in-out infinite reverse;
}
@keyframes ledger-cyber-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -30px) scale(1.05); }
}
/* ---- Content lift ---------------------------------------------------------- */
/* Lift every direct body child above the ambient layers, exempting the
* ambient divs themselves via the data attribute stamped by the JS injector
* and the PHP placeholder helper. Durable across page structures: no
* wrapper-ID assumptions. */
body.ledger-cyber > *:not([data-ledger-cyber-ambient]) {
position: relative;
z-index: 2;
}
/* ---- Glass surface utility ------------------------------------------------- */
body.ledger-cyber .ledger-cyber-glass {
position: relative;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.025),
rgba(255, 255, 255, 0.012));
border: 1px solid var(--ledger-cyber-line-gold-2);
border-radius: 6px;
padding: clamp(28px, 4vw, 56px);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 30px 80px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(212, 165, 58, 0.05);
}
/* ---- Corner ornaments ------------------------------------------------------ */
body.ledger-cyber .ledger-cyber-corner {
position: absolute;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
opacity: 0.5;
pointer-events: none;
}
body.ledger-cyber .ledger-cyber-corner-tl { top: 14px; left: 14px; transform: rotate(0deg); }
body.ledger-cyber .ledger-cyber-corner-tr { top: 14px; right: 14px; transform: rotate(90deg); }
body.ledger-cyber .ledger-cyber-corner-br { bottom: 14px; right: 14px; transform: rotate(180deg); }
body.ledger-cyber .ledger-cyber-corner-bl { bottom: 14px; left: 14px; transform: rotate(270deg); }
/* ---- Form components ------------------------------------------------------- */
/* Label (class-required) */
body.ledger-cyber .ledger-cyber-label {
display: block;
font-family: var(--ledger-cyber-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ledger-cyber-ink-mute);
margin-bottom: 8px;
}
/* Field wrapper (utility) */
body.ledger-cyber .ledger-cyber-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
/* Inputs (class-required: must carry .ledger-cyber-input). Type-restriction
* removed -- any input type opted in via the class gets the cyber treatment.
* Inputs without the class render with browser defaults on cyber pages. */
body.ledger-cyber input.ledger-cyber-input {
font-family: var(--ledger-cyber-font-body);
font-size: 16px;
line-height: 1.4;
color: var(--ledger-cyber-ink-hi);
background: var(--ledger-cyber-surface-1);
border: 1px solid var(--ledger-cyber-line-gold-2);
border-radius: 3px;
padding: 12px 14px;
width: 100%;
appearance: none;
transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
body.ledger-cyber input.ledger-cyber-input::placeholder {
color: var(--ledger-cyber-ink-faint);
}
/* Focus: gold accent ring (the transition above provides the animation) */
body.ledger-cyber input.ledger-cyber-input:focus {
outline: none;
border-color: var(--ledger-cyber-gold);
background: var(--ledger-cyber-surface-2);
box-shadow:
0 0 0 3px rgba(212, 165, 58, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
/* Suppress browser-default :invalid styling per G3.6 pattern in apothecary
* layer (style.css:330-341). Scoped to .ledger-cyber-input only so UA
* chrome on un-opted-in inputs is never altered. Validation feedback is
* delivered via the explicit class/attribute rule below. */
body.ledger-cyber input.ledger-cyber-input:invalid {
box-shadow: none;
}
/* Invalid (explicit opt-in; requires .ledger-cyber-input base class) */
body.ledger-cyber input.ledger-cyber-input.ledger-cyber-input-invalid,
body.ledger-cyber input.ledger-cyber-input[aria-invalid="true"] {
border-color: var(--ledger-cyber-crimson-hi);
box-shadow:
0 0 0 3px rgba(196, 62, 96, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
/* Disabled */
body.ledger-cyber input.ledger-cyber-input:disabled {
color: var(--ledger-cyber-ink-dim);
background: rgba(7, 9, 13, 0.4);
border-color: var(--ledger-cyber-line);
cursor: not-allowed;
}
/* Helper text + error messages under inputs */
body.ledger-cyber .ledger-cyber-help {
font-family: var(--ledger-cyber-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ledger-cyber-ink-dim);
margin-top: 6px;
}
body.ledger-cyber .ledger-cyber-help-error {
color: var(--ledger-cyber-crimson-hi);
}
/* Primary button: soft gold gradient with hover glow + active press.
* Auto-applied to button[type="submit"] (one submit per form is the
* convention) and opt-in via .ledger-cyber-button-primary for non-submit
* buttons. */
body.ledger-cyber button[type="submit"],
body.ledger-cyber .ledger-cyber-button-primary {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ledger-cyber-font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ledger-cyber-ink-hi);
background: linear-gradient(180deg,
rgba(212, 165, 58, 0.22),
rgba(184, 137, 44, 0.16));
border: 1px solid var(--ledger-cyber-line-gold);
border-radius: 3px;
padding: 13px 22px;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 80ms ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(212, 165, 58, 0.10);
}
body.ledger-cyber button[type="submit"]:hover,
body.ledger-cyber .ledger-cyber-button-primary:hover {
background: linear-gradient(180deg,
rgba(232, 200, 120, 0.28),
rgba(212, 165, 58, 0.20));
border-color: var(--ledger-cyber-gold);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(212, 165, 58, 0.18),
0 0 20px rgba(212, 165, 58, 0.12);
}
body.ledger-cyber button[type="submit"]:active,
body.ledger-cyber .ledger-cyber-button-primary:active {
transform: translateY(1px);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(212, 165, 58, 0.16);
}
body.ledger-cyber button[type="submit"]:focus-visible,
body.ledger-cyber .ledger-cyber-button-primary:focus-visible {
outline: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 3px rgba(212, 165, 58, 0.32);
}
body.ledger-cyber button[type="submit"]:disabled,
body.ledger-cyber .ledger-cyber-button-primary:disabled {
color: var(--ledger-cyber-ink-dim);
background: rgba(7, 9, 13, 0.4);
border-color: var(--ledger-cyber-line);
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* Block variant (full width) */
body.ledger-cyber .ledger-cyber-button-block {
width: 100%;
}
/* ---- Tables (data + user-list, one shared cyber class) -------------------- */
body.ledger-cyber .ledger-cyber-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-family: var(--ledger-cyber-font-body);
color: var(--ledger-cyber-ink);
}
body.ledger-cyber .ledger-cyber-table thead th {
text-align: left;
font-family: var(--ledger-cyber-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ledger-cyber-ink-mute);
padding: 10px 14px;
border-bottom: 1px solid var(--ledger-cyber-line-gold-2);
background: transparent;
position: sticky;
top: 0;
z-index: 1;
}
body.ledger-cyber .ledger-cyber-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--ledger-cyber-line-gold-2);
vertical-align: top;
}
body.ledger-cyber .ledger-cyber-table tbody tr:hover td {
background: var(--ledger-cyber-surface-1);
}
body.ledger-cyber .ledger-cyber-table td.r,
body.ledger-cyber .ledger-cyber-table th.r { text-align: right; }
body.ledger-cyber .ledger-cyber-table td.c,
body.ledger-cyber .ledger-cyber-table th.c { text-align: center; }
body.ledger-cyber .ledger-cyber-table .mono,
body.ledger-cyber .ledger-cyber-table td.mono { font-family: var(--ledger-cyber-font-mono); }
body.ledger-cyber .ledger-cyber-table .price { font-weight: 500; }
body.ledger-cyber .ledger-cyber-table tbody tr.ledger-cyber-row-discontinued td {
color: var(--ledger-cyber-ink-dim);
text-decoration: line-through;
}
/* ---- Status pills (products_v2.status, via format.php status_pill()) ------ */
body.ledger-cyber .ledger-cyber-pill {
display: inline-block;
font-family: var(--ledger-cyber-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ledger-cyber-ink-mute);
padding: 2px 9px;
border: 1px solid var(--ledger-cyber-ink-mute);
background: transparent;
line-height: 1.4;
}
body.ledger-cyber .ledger-cyber-pill-live {
color: var(--ledger-cyber-gold-hi);
border-color: var(--ledger-cyber-gold-hi);
border-bottom: 2px solid var(--ledger-cyber-gold-hi);
}
body.ledger-cyber .ledger-cyber-pill-sold-out {
color: var(--ledger-cyber-gold-lo);
border-color: var(--ledger-cyber-gold-lo);
}
body.ledger-cyber .ledger-cyber-pill-dsc {
color: var(--ledger-cyber-ink-mute);
border-color: var(--ledger-cyber-ink-mute);
}
body.ledger-cyber .ledger-cyber-pill-hidden {
color: var(--ledger-cyber-ink-dim);
border-color: var(--ledger-cyber-ink-dim);
border-style: dashed;
}
body.ledger-cyber .ledger-cyber-pill-trashed {
color: var(--ledger-cyber-crimson-hi);
border-color: var(--ledger-cyber-crimson-hi);
border-style: dashed;
}
/* Unknown status: deliberately broken so bad data is screaming. The status_pill()
* helper also stamps inline style for transient resilience; this class rule is
* the post-GC-final form once the inline style can be dropped. */
body.ledger-cyber .ledger-cyber-pill-unknown {
color: #000;
background: #ff0;
border: 2px solid #c00;
font-weight: bold;
}
/* ---- User account status spans (users.php inline, no helper, single-use) -- */
body.ledger-cyber .ledger-cyber-user-status {
display: inline-block;
font-family: var(--ledger-cyber-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 2px 9px;
border: 1px solid;
background: transparent;
line-height: 1.4;
}
body.ledger-cyber .ledger-cyber-user-status-pending {
color: var(--ledger-cyber-gold-lo);
border-color: var(--ledger-cyber-gold-lo);
}
body.ledger-cyber .ledger-cyber-user-status-approved {
color: var(--ledger-cyber-gold-hi);
border-color: var(--ledger-cyber-gold-hi);
}
body.ledger-cyber .ledger-cyber-user-status-rejected {
color: var(--ledger-cyber-crimson-hi);
border-color: var(--ledger-cyber-crimson-hi);
}
/* ---- Danger button variant (crimson, parallel to button-primary) ---------- */
body.ledger-cyber .ledger-cyber-button-danger {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ledger-cyber-font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ledger-cyber-ink-hi);
background: linear-gradient(180deg,
rgba(196, 62, 96, 0.22),
rgba(123, 30, 58, 0.16));
border: 1px solid rgba(196, 62, 96, 0.30);
border-radius: 3px;
padding: 9px 16px;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 80ms ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px rgba(196, 62, 96, 0.08);
}
body.ledger-cyber .ledger-cyber-button-danger:hover {
background: linear-gradient(180deg,
rgba(196, 62, 96, 0.32),
rgba(123, 30, 58, 0.22));
border-color: var(--ledger-cyber-crimson-hi);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(196, 62, 96, 0.18),
0 0 18px rgba(196, 62, 96, 0.12);
}
body.ledger-cyber .ledger-cyber-button-danger:active {
transform: translateY(1px);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(196, 62, 96, 0.16);
}
body.ledger-cyber .ledger-cyber-button-danger:focus-visible {
outline: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 3px rgba(196, 62, 96, 0.32);
}
body.ledger-cyber .ledger-cyber-button-danger:disabled {
color: var(--ledger-cyber-ink-dim);
background: rgba(7, 9, 13, 0.4);
border-color: var(--ledger-cyber-line);
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* ---- Notice family (collapse .ok / .err / .notice into one cyber family) -- */
body.ledger-cyber .ledger-cyber-notice {
padding: 12px 16px;
border-left: 3px solid var(--ledger-cyber-ink-mute);
background: var(--ledger-cyber-surface-1);
color: var(--ledger-cyber-ink);
font-size: 14px;
border-radius: 0 3px 3px 0;
}
body.ledger-cyber .ledger-cyber-notice-error {
border-left-color: var(--ledger-cyber-crimson-hi);
}
body.ledger-cyber .ledger-cyber-notice-success {
border-left-color: var(--ledger-cyber-gold-hi);
}
/* ---- Muted (re-classed per SD-2-6, no shadow exception) ------------------- */
body.ledger-cyber .ledger-cyber-muted {
color: var(--ledger-cyber-ink-mute);
}
/* ---- Inline form layout (users.php pattern: label wraps input) ------------ */
body.ledger-cyber .ledger-cyber-form-inline {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
margin-bottom: 24px;
}
body.ledger-cyber .ledger-cyber-form-inline label {
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--ledger-cyber-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ledger-cyber-ink-mute);
}
/* ---- Select (under cyber, used in users.php role picker) ------------------ */
body.ledger-cyber select.ledger-cyber-input {
font-family: var(--ledger-cyber-font-body);
font-size: 16px;
line-height: 1.4;
color: var(--ledger-cyber-ink-hi);
background-color: var(--ledger-cyber-surface-1);
border: 1px solid var(--ledger-cyber-line-gold-2);
border-radius: 3px;
padding: 12px 36px 12px 14px;
width: 100%;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
body.ledger-cyber select.ledger-cyber-input:focus {
outline: none;
border-color: var(--ledger-cyber-gold);
background-color: var(--ledger-cyber-surface-2);
box-shadow:
0 0 0 3px rgba(212, 165, 58, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
/* ---- GC-3 form components (textarea, mono variant, ghost button, button-row) - */
/* Textarea variant (D-GC3.1). Parallel to the input rule, element-prefixed
* to