:root { /* Ponder grid theme colors */ --filter-handle-bg: #7f7f7f; /* #333333; */ --filter-handle-expanded-bg: #7f7f7f; /* #2a2a2a; */ --criterion-header-bg: #1a1a1a; --cell-bg: #1e1e1e; --cell-hover-bg: rgba(255, 215, 0, 0.1); --grid-gap-color: #111; /* Sort indicators */ --sort-indicator-color: #888; --sort-indicator-hover: #fff; /* Drop zones — used by NEWS/Replace dropzones, ZoT, and any future drop target. One hue for ALL dropzones so users learn "this color means droppable here." Override per-brand if needed. */ --dropzone-hue: limegreen; /* Readiness Gate — menu-swatch tints (specs/Readiness_Gate.md). Light versions; stable has no tint. */ --readiness-tint-broken: rgba(255, 80, 80, 0.22); --readiness-tint-wip: rgba(255, 165, 0, 0.22); --readiness-tint-alpha: rgba(255, 221, 0, 0.20); --readiness-tint-beta: rgba( 80, 150, 255, 0.22); } html { overflow: hidden; /* prevent elastic overscroll on mobile */ overscroll-behavior: none; } /* ============================================================ Readiness Gate — see specs/Readiness_Gate.md The user's Readiness floor is applied by toggling `readiness-hide-` classes on (readiness.js applyReadinessFloor). Each class hides every element explicitly tagged at that level. `stable` is never hidden; an element with no `data-readiness` attribute is "stable by absence" and never matched. ============================================================ */ html.readiness-hide-broken [data-readiness="broken"], html.readiness-hide-wip [data-readiness="wip"], html.readiness-hide-alpha [data-readiness="alpha"], html.readiness-hide-beta [data-readiness="beta"] { display: none !important; } /* Readiness Gate — Phase 2 hue tints (§7). A sub-stable feature that IS shown (to a user who opted below stable) carries a light tint so it reads as unfinished. Hidden items (display:none above) are unaffected; stable items have no data-readiness attribute, no tint. */ [data-readiness="broken"] { background-color: var(--readiness-tint-broken); } [data-readiness="wip"] { background-color: var(--readiness-tint-wip); } [data-readiness="alpha"] { background-color: var(--readiness-tint-alpha); } [data-readiness="beta"] { background-color: var(--readiness-tint-beta); } body { font-family: Arial, sans-serif; background-color: var(--brand-bg, seagreen); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; /* fallback for older browsers */ height: 100dvh; /* matches visible viewport on mobile */ overflow: hidden; /* prevent elastic overscroll on mobile */ overscroll-behavior: none; } /* Brand heading color applies only to auth-style standalone views (login/register/enlist/logout). Don't leak into app panels, which set their own text color and rely on the UA default for body. */ body.auth-view { color: var(--brand-heading-color, #333); } h1 { margin-bottom: 0.3em; text-align: center; } .container { text-align: center; margin-bottom: auto; } h1 a { text-decoration: none; color: inherit; } .brand-title { font-family: var(--brand-title-font, Arial, sans-serif); color: var(--brand-title-color, #333); margin-bottom: 0.2em; text-align: center; } .brand-tagline { font-family: var(--brand-tagline-font, var(--brand-title-font, Arial, sans-serif)); color: var(--brand-tagline-color, #555); font-weight: 400; margin-top: 0; margin-bottom: 0.4em; text-align: center; } .platform-footer { width: 100%; margin-top: auto; text-align: center; padding: 0.6em 1em; padding-bottom: env(safe-area-inset-bottom, 0.6em); font-size: 0.75rem; color: var(--brand-tagline-color, #888); opacity: 0.6; letter-spacing: 0.02em; box-sizing: border-box; } .platform-footer a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .platform-footer a:hover { opacity: 1; text-decoration-style: solid; } form { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } fieldset { display: flex; flex-direction: column; width: 100%; } label { margin-bottom: 8px; font-weight: bold; } input[type="text"], input[type="email"] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 20px; font-size: 16px; width: 100%; box-sizing: border-box; } button[type="submit"] { background-color: #4CAF50; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; } button[type="submit"]:hover { background-color: #45a049; } #feedback { color: red; margin-top: -15px; margin-bottom: 15px; } #earlyaccess { margin-top: 20px; text-align: center; font-size: 14px; color: #555; } #earlyaccess a { color: #1e90ff; text-decoration: none; } #earlyaccess a:hover { text-decoration: underline; } button.link-button { z-index: 100; position: absolute; top: 3em; right: 0.1em; color: white; background-color: red; border-radius: 0.5em; font-size: 1.1em; cursor: pointer; transform: rotate(38deg); border: none; padding: 10px; text-align: center; text-decoration: none; } button.link-button:hover { background-color: darkred; } button.link-button.link-button-left { right: auto; left: 0.1em; transform: rotate(-38deg); } #logo-banner { background-image: var(--brand-logo-image, url('/img/thinkertoys-rodin-facing-logo.png')); background-size: cover; background-repeat: no-repeat; background-position: center; width: min(90vw, 45vh); max-width: 500px; aspect-ratio: 1; margin: auto auto 0 auto; border-radius: 50%; } /* Compact layout on short screens (phones in portrait) */ @media (max-height: 700px) { .button-container { margin-top: 10px; } .button-container a { padding: 8px 14px; font-size: 1em; } .platform-footer { padding: 0.3em 1em; font-size: 0.7rem; } }