/* ════════════════════════════════════════════════════════════════
PETRUS CMS · skin
────────────────────────────────────────────────────────────────
Everything the editing layer needs to look like part of the studio
rather than a bolted-on dashboard. None of this shows to a visitor:
the affordances only appear once wears .petrus-edit, which I
only add after the server confirms my session.
Colors match the Cards interface exactly — same palette, same
chrome logic, same hover inversion pattern.
Naming: every class here is prefixed .pet- so it can never collide
with the site's own styles. Hooks the JS looks for are data-petrus-*.
════════════════════════════════════════════════════════════════ */
:root {
/* ── Cards palette, verbatim ──────────────────────────────────── */
--pet-ink: #F4ECDC; /* paper */
--pet-ink-2: rgba(244,236,220,.82); /* paper-2 */
--pet-ink-3: rgba(244,236,220,.52); /* paper-3 */
--pet-bg: rgba(28,10,4,.66); /* appbar / gate chrome */
--pet-bg-2: rgba(28,10,4,.5); /* dock / raised surface */
--pet-line: rgba(244,236,220,.16); /* default border */
--pet-line-2: rgba(244,236,220,.3); /* stronger border */
--pet-accent: #9E2A14; /* Cards red — primary action */
--pet-danger: #9E2A14; /* same red for destructive */
--pet-ok: #6fae7d; /* green for success toasts */
--pet-mono: "Chivo Mono", ui-monospace, monospace;
--pet-sans: "Chivo", system-ui, sans-serif;
}
/* ───────────────────────── hold-to-unlock countdown ───────────────────────── */
/* A frosted square drops from above and centers over the element. The inner
.pet-num span pops in on each tick. Enters on .on, exits by removing it
(the transition reverses automatically). */
[data-petrus-hold] { position: relative; }
/* Camera-guide viewfinder: landscape rectangle, corner brackets only.
The proportion echoes the logo; the corner marks echo a camera composition
guide — a small inside joke for a photo/video studio CMS. */
.pet-hold-ring {
position: absolute;
top: 50%; left: 50%;
width: 148px; height: 64px; /* ~2.3:1 — landscape, logo-ish */
transform: translate(-50%, calc(-50% - 18px)) scale(.92);
background-color: rgba(28,10,4,.35);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
/* Corner bracket marks — no full border, just 8 L-corner segments */
background-image:
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink)),
linear-gradient(var(--pet-ink), var(--pet-ink));
background-size:
18px 1.5px, 1.5px 13px,
18px 1.5px, 1.5px 13px,
18px 1.5px, 1.5px 13px,
18px 1.5px, 1.5px 13px;
background-position:
top left, top left,
top right, top right,
bottom left, bottom left,
bottom right,bottom right;
background-repeat: no-repeat;
color: var(--pet-ink);
font-family: var(--pet-mono);
font-weight: 700;
display: grid; place-items: center;
pointer-events: none; z-index: 60;
opacity: 0;
transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.pet-hold-ring.on {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* The number pops in fresh on each change */
.pet-num {
display: block;
font-size: 28px; line-height: 1;
font-variant-numeric: tabular-nums;
}
.pet-num.pet-tick {
animation: pet-num-in .2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pet-num-in {
from { transform: scale(1.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ───────────────────────── password gate ──────────────────────── */
.pet-gate {
position: fixed; inset: 0; z-index: 9000;
display: none; place-items: center;
background: rgba(28,10,4,.72);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pet-gate.on { display: grid; }
.pet-gate-card {
width: min(92vw, 340px);
background: var(--pet-bg);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--pet-line);
border-radius: 2px;
padding: 26px 24px 22px;
color: var(--pet-ink);
font-family: var(--pet-sans);
box-shadow: 0 30px 80px rgba(0,0,0,.5);
transform: translateY(8px); opacity: 0;
transition: transform .3s ease, opacity .3s ease;
}
.pet-gate.on .pet-gate-card { transform: none; opacity: 1; }
.pet-gate-card.shake { animation: pet-shake .4s; }
@keyframes pet-shake {
10%,90% { transform: translateX(-2px); }
30%,70% { transform: translateX(4px); }
50% { transform: translateX(-6px); }
}
.pet-gate-brand {
font-family: var(--pet-mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--pet-ink-3); margin: 0 0 14px;
}
.pet-gate-card label {
display: block; font-size: 11px; letter-spacing: .04em;
opacity: .7; margin: 0 0 8px;
}
.pet-input {
width: 100%; box-sizing: border-box;
background: var(--pet-bg-2); border: 1px solid var(--pet-line);
color: var(--pet-ink); font-family: var(--pet-mono); font-size: 14px;
padding: 11px 12px; border-radius: 2px; outline: none;
}
.pet-input:focus { border-color: var(--pet-line-2); }
.pet-gate-row { display: flex; gap: 8px; margin-top: 14px; }
.pet-gate-msg {
min-height: 16px; font-size: 11px; color: var(--pet-ink-3);
margin: 10px 0 0; font-family: var(--pet-mono);
}
/* ───────────────────────── shared button ──────────────────────── */
/* All controls use the Cards pattern: square 2px, 1px border, paper/red
inversion on hover. Active / go state is always paper + red. */
.pet-btn {
font-family: var(--pet-mono); font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; cursor: pointer;
background: transparent; color: var(--pet-ink);
border: 1px solid var(--pet-line-2); border-radius: 2px;
padding: 8px 15px;
transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .15s ease;
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.pet-btn:hover { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
.pet-btn[disabled] { opacity: .4; cursor: default; }
/* Primary action — always in the paper/red active state */
.pet-btn-go { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
.pet-btn-go:hover { background: #F4ECDC; }
/* Danger — dimmed until hover, then same inversion */
.pet-btn-danger { color: var(--pet-ink-3); border-color: var(--pet-line); }
.pet-btn-danger:hover { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
/* ───────────────────────── editor toolbar ─────────────────────── */
.pet-bar {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%);
z-index: 8000;
display: flex; align-items: center; gap: 6px;
background: var(--pet-bg); color: var(--pet-ink);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--pet-line); border-radius: 2px;
padding: 8px 10px;
font-family: var(--pet-mono);
box-shadow: 0 24px 60px rgba(0,0,0,.5);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
body.petrus-edit .pet-bar { transform: translateX(-50%) translateY(0); }
.pet-bar-brand {
font-family: var(--pet-mono); font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--pet-ink-3);
padding-right: 8px; border-right: 1px solid var(--pet-line);
}
.pet-bar-sep { width: 1px; align-self: stretch; background: var(--pet-line); }
.pet-time {
font-family: var(--pet-mono); font-size: 10px; letter-spacing: .04em;
color: var(--pet-ink-3); min-width: 100px; text-align: center; line-height: 1.3;
}
.pet-time b { display: block; color: var(--pet-ink); letter-spacing: .12em; }
.pet-icon-btn { width: 30px; height: 30px; padding: 0; justify-content: center; flex: none; }
/* Save button is neutral until there are unsaved changes, then it inverts */
.pet-bar-save { color: var(--pet-ink-3); border-color: var(--pet-line); position: relative; }
.pet-bar-save:hover { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
body.petrus-dirty .pet-bar-save { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
/* Power button: hold 3s fills left-to-right, then logs out without saving.
JS drives --pet-hold (0→1) on the button element; ::before scales with it.
On plain hover (no hold): a 50%-opacity fill appears instantly as preview.
On hold: the fill animates from left to right at full opacity via rAF. */
.pet-power { position: relative; overflow: hidden; }
.pet-power svg { position: relative; z-index: 1; }
/* The hold fill lives in ::before and scales left→right via --pet-hold (JS rAF).
It is INVISIBLE until the button carries .holding — hover never animates it. */
.pet-power::before {
content: "";
position: absolute; inset: 0;
background: var(--pet-ink);
transform-origin: left center;
transform: scaleX(0);
opacity: 0;
pointer-events: none; z-index: 0;
}
/* Holding: JS-driven fill, full opacity, left→right. No CSS transition
so the fill tracks --pet-hold exactly frame-by-frame. */
.pet-power.holding::before {
transform: scaleX(var(--pet-hold, 0));
opacity: 1;
}
/* Hover matches the Save button exactly — ink fill, accent text. */
.pet-power:hover { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
.pet-power.holding { color: var(--pet-accent); border-color: var(--pet-ink); }
/* Dirty dot sits absolutely in the save button's corner so the floppy icon
stays perfectly centered regardless of dirty state. */
.pet-dirty-dot {
position: absolute; top: 5px; right: 5px;
width: 5px; height: 5px; border-radius: 999px; background: var(--pet-accent);
opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
body.petrus-dirty .pet-dirty-dot { opacity: 1; }
/* ───────────────────────── editable text ──────────────────────── */
body.petrus-edit [data-petrus-text] {
outline: 1px dashed var(--pet-line-2);
outline-offset: 3px; border-radius: 2px; cursor: text;
transition: outline-color .15s ease, background .15s ease;
}
body.petrus-edit [data-petrus-text]:hover { outline-color: var(--pet-ink); }
body.petrus-edit [data-petrus-text]:focus {
outline: 1px solid var(--pet-ink);
background: rgba(244,236,220,.08);
}
/* In edit mode the thumb button absorbs all clicks (browser quirk) and the
controls never receive pointer events. Disable the button in edit mode so
clicks fall through to the absolutely-positioned .pet-mini spans. */
body.petrus-edit .thumb { pointer-events: none; }
body.petrus-edit .pet-mini { pointer-events: auto; }
/* ───────────────────────── gallery edit controls ──────────────── */
.pet-thumb-tools { position: absolute; inset: 0; display: none; pointer-events: none; }
body.petrus-edit .pet-thumb-tools { display: block; }
.pet-mini {
position: absolute; pointer-events: auto;
width: 26px; height: 26px; border-radius: 2px;
display: grid; place-items: center;
background: var(--pet-bg); color: var(--pet-ink);
border: 1px solid var(--pet-line-2); cursor: pointer;
font-family: var(--pet-mono); font-size: 13px; line-height: 1;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.pet-mini:hover { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
.pet-mini:active { transform: scale(.9); }
.pet-mini-del { top: 6px; right: 6px; }
.pet-mini-del:hover { background: var(--pet-ink); color: var(--pet-accent); border-color: var(--pet-ink); }
.pet-mini-prev { bottom: 6px; left: 6px; }
.pet-mini-next { bottom: 6px; left: 38px; }
/* Sequence (Recent Work) edit cluster lays its minis out in a flex row, so
neutralise the absolute base positioning — otherwise they stack and overlap. */
.seq-edit .pet-mini { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
/* Feature image replace button */
.pet-feat-tools { position: absolute; top: 10px; left: 10px; z-index: 30; display: none; gap: 8px; }
body.petrus-edit .pet-feat-tools { display: flex; }
/* ───────────────────────── gallery empty state ────────────────── */
/* A single, refined on-brand square — not a stretched bar. Centres itself in
both the home masonry grid (column-span:all) and the family sequence mount. */
.pet-empty {
column-span: all;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 16px; text-align: center;
width: 100%; max-width: 360px; aspect-ratio: 1 / 1; margin: 20px auto;
border: 1px dashed var(--pet-line);
border-radius: 4px;
background: rgba(244,236,220,.02);
color: var(--pet-ink-3);
font-family: var(--pet-mono);
cursor: pointer;
transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.pet-empty:hover { border-color: var(--pet-line-2); color: var(--pet-ink); background: rgba(244,236,220,.05); }
.pet-empty-plus {
width: 48px; height: 48px; display: grid; place-items: center;
border: 1px solid var(--pet-line); border-radius: 50%;
font-size: 24px; font-weight: 300; line-height: 1; color: var(--pet-ink-2);
transition: border-color .25s ease, color .25s ease;
}
.pet-empty:hover .pet-empty-plus { border-color: var(--pet-ink); color: var(--pet-ink); }
.pet-empty-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.pet-empty-sub { font-size: 9.5px; letter-spacing: .1em; opacity: .55; }
/* Persistent add-more tile in the populated gallery — a stable on-brand square
matching the masonry column, so adding more never disappears after the first. */
.pet-add { display: none; }
body.petrus-edit .pet-add {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
width: 100%; aspect-ratio: 1 / 1; margin: 0 0 clamp(10px,1vw,16px); break-inside: avoid;
border: 1px dashed var(--pet-line); border-radius: 2px; background: transparent;
color: var(--pet-ink-3); font-family: var(--pet-mono); cursor: pointer;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
body.petrus-edit .pet-add:hover { border-color: var(--pet-line-2); color: var(--pet-ink); background: rgba(244,236,220,.05); }
.pet-add-plus { font-size: 28px; line-height: 1; }
.pet-add-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
/* Limestone (on-light) Works section — the Petrus palette is paper-toned for dark
sections, so flip the dashed placeholders to warm ink to stay legible on stone. */
body.on-light .pet-empty,
body.on-light.petrus-edit .pet-add { color: rgba(36,31,24,.55); border-color: rgba(36,31,24,.22); }
body.on-light .pet-empty:hover,
body.on-light.petrus-edit .pet-add:hover { color: #241F18; border-color: rgba(36,31,24,.42); background: rgba(36,31,24,.04); }
body.on-light .pet-empty-plus { color: rgba(36,31,24,.5); }
/* Flash-free text gate: while carries .tct-hydrating (set in ,
lifted by the end-of-body preload once saved/empty text is applied), petrus
text fields are invisible — so a saved/edited field never paints its shipped
default before the preload runs. visibility (not display) keeps layout. */
html.tct-hydrating [data-petrus-text] { visibility: hidden; }
/* Editable image slot with no photo yet. Hide the empty ![]()
for EVERYONE so the
browser's broken-image glyph + alt text never shows — but keep the slot's box
so an unconfigured slot reads as a clean container-sized placeholder on public. */
[data-petrus-img].pet-img-empty img { display: none; }
/* BEFORE any JS runs, a shipped ![]()
with no src would paint the broken glyph
for a frame on F5. This CSS applies at parse time, so a srcless slot image is
never visible — kills the flash regardless of script timing. */
[data-petrus-img] img:not([src]) { display: none; }
/* Only the owner sees an add affordance on the empty slot.
The Three Ways section sits on light stone, so use warm-ink tones. */
body.petrus-edit .way-photo.pet-img-empty {
border: 1px dashed rgba(36,31,24,.28);
background: rgba(36,31,24,.03);
display: grid; place-items: center;
}
body.petrus-edit .way-photo.pet-img-empty::after {
content: "+ Add photo";
font-family: var(--pet-mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: rgba(36,31,24,.55);
}
/* ───────────────────────── family edit controls ─────────────────── */
body.petrus-edit [data-fam-name],
body.petrus-edit [data-fam-place] {
outline: 1px dashed var(--pet-line-2);
outline-offset: 3px; border-radius: 2px; cursor: text;
transition: outline-color .15s ease, background .15s ease;
}
body.petrus-edit [data-fam-name]:hover,
body.petrus-edit [data-fam-place]:hover { outline-color: var(--pet-ink); }
body.petrus-edit [data-fam-name]:focus,
body.petrus-edit [data-fam-place]:focus {
outline: 1px solid var(--pet-ink);
background: rgba(244,236,220,.08);
}
body.petrus-edit .plate { position: relative; }
.pet-plate-tools {
position: absolute; top: 8px; right: 8px; z-index: 20;
display: none; gap: 6px;
}
body.petrus-edit .pet-plate-tools { display: flex; }
.pet-plate-tools .pet-mini { position: relative; top: auto; left: auto; bottom: auto; right: auto; }
.pet-plate-tools .pet-mini-link { font-size: 13px; }
.pet-plate-tools .pet-mini-link[title^="Edit"] { color: var(--pet-ink); }
/* Invisible full-plate link overlay for visitor navigation */
.plate-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; text-decoration: none; display: block; }
body.petrus-edit .plate .ph { cursor: pointer; }
body.petrus-edit .plate .ph::after {
content: "Replace photo";
position: absolute; inset: auto 0 0 0;
background: var(--pet-bg); color: var(--pet-ink);
font-family: var(--pet-mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; text-align: center; padding: 7px 0;
opacity: 0; transition: opacity .2s ease;
}
body.petrus-edit .plate .ph:hover::after { opacity: 1; }
/* ───────────────────────── toast ──────────────────────────────── */
.pet-toast {
position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(20px);
z-index: 9500; opacity: 0; pointer-events: none;
background: var(--pet-bg); color: var(--pet-ink);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--pet-line); border-left: 3px solid var(--pet-ink-2);
border-radius: 2px; padding: 11px 16px;
font-family: var(--pet-mono); font-size: 11px; letter-spacing: .04em;
box-shadow: 0 16px 40px rgba(0,0,0,.45);
transition: opacity .3s ease, transform .3s ease;
max-width: 80vw;
}
.pet-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.pet-toast.err { border-left-color: var(--pet-accent); }
.pet-toast.ok { border-left-color: var(--pet-ok); }
/* ───────────────────────── bg picker gate ─────────────────────── */
.bg-picker { display: none !important; }
body.petrus-edit .bg-picker { display: flex !important; }
/* ───────────────────────── edit mode banner ───────────────────── */
body.petrus-edit::before {
content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 8500;
background: linear-gradient(90deg, transparent, var(--pet-ink-2), transparent);
pointer-events: none;
}
body.petrus-preview .pet-time b { color: var(--pet-ink-3); }
/* ───────────────────────── inline link editor ─────────────────── */
/* Right-click a text selection in edit mode → this strip floats by it to set a
URL. Links are stored as plain [label](url) markdown (boot.php renders them to
for visitors), so the plaintext text model is never touched. */
.pet-linker {
position: fixed; z-index: 9400; display: none; align-items: center; gap: 8px;
padding: 8px 10px; background: var(--pet-bg); color: var(--pet-ink);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--pet-line); border-radius: 2px;
box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.pet-linker.on { display: flex; }
.pet-linker input {
width: 250px; max-width: 46vw; background: rgba(0,0,0,.18);
border: 1px solid var(--pet-line); border-radius: 2px; color: var(--pet-ink);
font-family: var(--pet-mono); font-size: 12px; letter-spacing: .02em;
padding: 8px 10px; outline: none;
}
.pet-linker input::placeholder { color: var(--pet-ink-3); }
.pet-linker input:focus { border-color: var(--pet-ink-2); }
.pet-linker button {
appearance: none; cursor: pointer; border: 1px solid var(--pet-line);
background: transparent; color: var(--pet-ink); height: 34px; flex: none;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pet-linker .pet-go { width: 34px; }
.pet-linker .pet-go svg { width: 15px; height: 15px; display: block; }
.pet-linker .pet-unlink {
padding: 0 11px; font-family: var(--pet-mono); font-size: 10px;
letter-spacing: .14em; text-transform: uppercase;
}
.pet-linker button:hover { background: var(--pet-accent); border-color: var(--pet-accent); color: #F4ECDC; }
.pet-linker .pet-unlink[hidden] { display: none; }