/* The Portal — base styling. Deliberately small and dependency-free: no framework, no CDN. Later slices add component styles; this is only enough to make the auth flow legible. */ /* ───────────────────────────────────────────────────────────────────────────── TWO THEMES: "One house" (dark) and "Daylight" (light). Names are Jeff's, from the Palette Lab session on 2026-08-18. (Since 2026-09-21 these are the DEFAULTS of two slots, and seven more themes follow the light block — see "MORE THEMES, AND THE TWO SLOTS THEY FILL".) One house rotates the Portal's neutrals to hue 30 and takes the marketing site's gold accent, so www and portal read as one brand — they had a nearly matching accent over divergent greys, which is the wrong way round. Daylight flips the Portal to a warm light ground; the marketing site stays dark, because a shop window and a tool you work in all evening have different jobs. ── EVERY COLOUR IS A TOKEN. THAT IS THE POINT, NOT TIDINESS. ── Before this, portal.css carried 26 rgba() literals and two hex ink values outside the token block: white overlays for hover, accent tints frozen at the OLD accent, and badge fills. Swapping only :root would have left all of them behind — the white overlays are invisible on a light ground, the accent tints would still be the previous orange fighting the new gold, and the ink on a button would stay dark on an accent that now needs light ink. So the overlays, the tints, the two shadows and the button ink are tokens as well, and each theme sets its own. A theme is now the block below and nothing else; there is no second place to remember. ── WHICH THEME IS ACTIVE ── Dark is the default ground, so :root carries One house and the light block overrides it. The choice is stamped as data-theme on by the inline script in base.html BEFORE first paint — no @media (prefers-color-scheme) block here, deliberately, because honouring it in CSS means writing both palettes twice and letting them drift. That script resolves the OS preference instead, and only writes storage when somebody actually presses the switch, so the OS keeps being followed until they do. With JavaScript off nothing is stamped and the Portal is dark, which is exactly what it was before any of this. ───────────────────────────────────────────────────────────────────────────── */ :root { /* One house — dark */ --bg: #1a1714; --surface: #27221b; --border: #3b332a; --text: #edeae8; --muted: #aea297; --accent: #c8974a; --special: #6fa8e8; /* a scale's special note (2026-09-21) */ --accent-hover: #daac64; /* Ink for text sitting ON the accent, not beside it. 6.94 against the gold. */ --accent-ink: #1b1408; /* TWO deliberate departures from the stored One house palette, and only two. They are the same two the palette notes already recorded as AA-for-large- text-only, and the browser audit found exactly them and nothing else: danger #e5534b → #ef6a60 4.26 on a card → 5.18 success #3fa66a → #4fb87a 4.36 on a badge → 6.36 Neither is large text. --danger is the word "Remove" on every destructive control at 14px; --success is the "Active" badge, at 12px, ten of them down the users screen. Both lifted within their own hue, nothing else touched. Revert these two lines to go back to the palette exactly as stored. */ --danger: #ef6a60; --success: #4fb87a; --warning: #d9a441; --radius: 10px; /* Hover and fill washes. White on a dark ground; the light theme flips these to the text colour, which is the single change that stops every hover state disappearing. Six steps because six distinct weights are actually in use — snapping them to fewer would silently restyle screens nobody asked about. */ --overlay-faint: rgba(255, 255, 255, 0.02); --overlay-soft: rgba(255, 255, 255, 0.03); --overlay: rgba(255, 255, 255, 0.04); --overlay-mid: rgba(255, 255, 255, 0.05); --overlay-strong: rgba(255, 255, 255, 0.06); --overlay-bold: rgba(255, 255, 255, 0.08); /* Accent and semantic washes, tracking the accent above rather than frozen at whatever it happened to be when the rule was written. #c8974a / #3fa66a / #d9a441 / #e5534b as rgb, so the alpha can vary per use. */ --tint-accent-faint: rgba(200, 151, 74, 0.08); --tint-accent-soft: rgba(200, 151, 74, 0.10); --tint-accent-mid: rgba(200, 151, 74, 0.14); --tint-accent-strong: rgba(200, 151, 74, 0.22); --tint-success: rgba(79, 184, 122, 0.12); --tint-warning-soft: rgba(217, 164, 65, 0.10); --tint-warning: rgba(217, 164, 65, 0.12); --tint-warning-strong: rgba(217, 164, 65, 0.20); --tint-danger: rgba(239, 106, 96, 0.12); --shadow-menu: rgba(0, 0, 0, 0.45); --scrim: rgba(0, 0, 0, 0.60); /* Placeholder text, dimmer than --muted. It has to be distinguishable from a REAL value at a glance — an empty tempo box showing a grey 100 reads as a song that is 100 bpm — and still legible, so it is not pushed as far as it could go. 3.17 against the input ground here, against 14.90 for a value actually typed in: about a fifth of the contrast, which is the gap that makes the difference obvious without making the hint unreadable. */ --placeholder: #6f665c; /* Tells the BROWSER which way round this theme is, which no other declaration here can do. It is what draws a native , which stays in the page as the value. Generic on purpose -- nothing here knows about scenes, so the day dials are wanted on another screen this is already written. */ .rotary { display: inline-block; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; cursor: ns-resize; touch-action: none; -webkit-user-select: none; user-select: none; } .rotary svg { display: block; width: 100%; height: 100%; overflow: visible; } .rotary-track, .rotary-value { fill: none; stroke-width: 9; stroke-linecap: round; } .rotary-track { stroke: var(--border); } .rotary-value { stroke: var(--accent); } .rotary-knob { fill: var(--surface); stroke: var(--border); stroke-width: 2; } .rotary-pointer { stroke: var(--text); stroke-width: 7; stroke-linecap: round; } .rotary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rotary[aria-disabled="true"] { cursor: default; opacity: 0.5; } /* The range underneath: still in the page and still the value, never seen. !important on the size, because whatever screen it is on already styles its ranges -- the scene screen's `.scene-attr-controls input[type="range"]` sets width: 100% at higher specificity, and an invisible 310px slider scrolled the whole dialog sideways. A hidden element must not be sizeable by anyone. */ .rotary-source { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; } /* A plpgsql error context is a call stack: multi-line, sometimes very wide, and the line breaks carry the meaning. It scrolls inside its OWN box rather than widening the page — a log viewer that makes the whole document scroll sideways is one nobody can read the rest of. */ pre.log-context { margin: 0.4rem 0 0; padding: 0.6rem 0.7rem; overflow-x: auto; max-height: 18rem; overflow-y: auto; font-size: 0.78rem; line-height: 1.45; white-space: pre; background: var(--overlay-mid); border-radius: 4px; color: var(--muted); } /* A default that has to be undone thirty-three times is not a default. The auth cards say what they want instead, through .btn-block below, and they are the minority they always were. */ button { width: auto; margin-top: 0; padding: 0.7rem 1rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; } /* :where() so this carries NO specificity beyond the element itself. `button:hover` is 0,1,1 and beat every class that had opted out of the button look — .block-card-open sets `background: none` at 0,1,0, so hovering a vibe, an invite or a template card filled the whole card with the full accent colour and left its text unreadable. Every opted-out button was one bad hover, and each would have needed its own reset. `button:where(:hover)` is 0,0,1, so any class that sets a background now wins by construction and a plain