/* ===================================================================== Login-page design-token port (NEW FILE, 2026-09-07) --------------------------------------------------------------------- Ports the warm workspace palette introduced in app.css / vision/vision.css (2026-09-06 prototype re-skin) onto index.html and portal.html's own sign-in / showcase surface — WITHOUT touching styles.css, portal.css, pha-shared.css or rs-nav.css, which remain the shared 28-page shell and are protected by scripts/shell-check.mjs + tests/shell/shell-mount-check.mjs. Scope: every rule below is either (a) scoped under a selector that only exists on the sign-in/showcase hero (#signin, .ent-*, .live-metrics, .data-coverage, .dm-*, #signin-btn) or (b) scoped under #portal-gate / .pt-gate-* for portal.html's equivalent gate. Nothing here touches .rsn-shell, the shared nav, or any of the other 27 public pages that also load styles.css/pha-shared.css. Kept intact by design (do not restyle): - #depth-map-block / #depth-map — the map hero, still the primary above-the-fold element. - .ent-signin-block markup, ids and behavior (state/PHA dropdowns, #signin-btn, #pha-search) — visual tokens only, no structural change. Load order: linked LAST in , after styles.css / pha-shared.css / portal.css / rs-nav.css, so these scoped selectors win on specificity ties without !important. ===================================================================== */ #signin, #pt-gate { --lv-bg: #f4f3ef; --lv-surface: #ffffff; --lv-surface-2: #faf9f5; --lv-border: #d9d4c9; --lv-border-strong: #bcb6a8; --lv-text: #1c1a15; --lv-muted: #565146; --lv-faint: #6b6559; --lv-primary: #10407f; --lv-primary-hover: #0b3268; --lv-primary-tint: #e5ecf7; --lv-ok: #17603c; --lv-ok-tint: #e0efe7; --lv-ok-border: #b6d7c5; --lv-due: #855100; --lv-due-tint: #faedd8; --lv-due-border: #e5cb9c; --lv-over: #a01d18; --lv-over-tint: #fbe5e3; --lv-over-border: #edbcb8; --lv-radius-sm: 4px; --lv-radius: 6px; --lv-radius-lg: 10px; --lv-shadow: 0 1px 2px rgb(16 24 40 / 0.06); --lv-shadow-md: 0 4px 14px rgb(16 24 40 / 0.09); } /* ---- Hero background: warm ground instead of cool Foundry blue-grey ---- */ #signin.ent-hero { background: var(--lv-bg); } /* ---- Primary sign-in card: flatten to the workspace's card language ---- */ #signin .ent-card.ent-primary, #signin .ent-card { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } #signin .eyebrow { color: var(--lv-primary); letter-spacing: 0.14em; } #signin .signin-h1 { color: var(--lv-text); font-weight: 700; letter-spacing: -0.01em; } #signin .signin-body { color: var(--lv-muted); } #signin .ent-trust-list li { color: var(--lv-muted); } #signin .ent-trust-list li svg { color: var(--lv-ok); } #signin .ent-signin-block { border-top: 1px solid var(--lv-border); } #signin .ent-signin-label { color: var(--lv-faint); } #signin .signin-context { color: var(--lv-muted); } #signin .field-label { color: var(--lv-text); } /* ---- Form controls: warm surface + workspace focus ring ---- */ #signin .field-select, #signin .pha-search-input { background: var(--lv-surface-2); color: var(--lv-text); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); } #signin .field-select:focus, #signin .pha-search-input:focus { outline: none; border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); } #signin .pha-search-list { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); box-shadow: var(--lv-shadow-md); } /* ---- Primary button: workspace navy, flat, no lift-on-hover shadow ---- */ #signin #signin-btn.btn-primary { background: var(--lv-primary); color: #ffffff; border-radius: var(--lv-radius-sm); box-shadow: none; font-weight: 600; } #signin #signin-btn.btn-primary:hover { background: var(--lv-primary-hover); box-shadow: none; transform: none; } #signin .signin-footer { color: var(--lv-faint); } #signin .signin-footer svg { color: var(--lv-primary); } /* ---- Metrics rail / data coverage chips: workspace status tokens ---- */ #signin .live-metrics .lm-title { color: var(--lv-text); font-weight: 700; } #signin .live-metrics .lm-sub { color: var(--lv-faint); } #signin .dm-strip { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); } #signin .depth-map-layers label { color: var(--lv-muted); } #signin .data-coverage { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } #signin .dc-item .dc-num { color: var(--lv-primary); font-weight: 700; font-variant-numeric: tabular-nums; } #signin .dc-item .dc-label { color: var(--lv-faint); } /* ---- Demo-portal entry point (new — see "Explore the demo") ---- */ #signin .lv-demo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 16px; border-radius: var(--lv-radius-sm); border: 1px solid var(--lv-primary); color: var(--lv-primary); background: var(--lv-primary-tint); font-size: 13.5px; font-weight: 600; text-decoration: none; } #signin .lv-demo-cta:hover { background: var(--lv-primary-tint); border-color: var(--lv-primary-hover); color: var(--lv-primary-hover); } #signin .lv-demo-cta-note { display: block; margin-top: 6px; font-size: 12px; color: var(--lv-faint); } /* ---- portal.html's equivalent gate card, same treatment ---- */ #pt-gate .pt-gate-card { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } #pt-gate .pt-gate-h1 { color: var(--lv-text); } #pt-gate .pt-gate-card p { color: var(--lv-muted); } #pt-gate .pt-gate-explore { background: var(--lv-primary); color: #ffffff; border-radius: var(--lv-radius-sm); box-shadow: none; } #pt-gate .pt-gate-explore:hover { background: var(--lv-primary-hover); } /* ===================================================================== FULL COSMETIC REFRESH (2026-09-08) -- extends the 2026-09-07 token-only port above to full visual parity with the signed-in workspace shell (app.css / vision/vision.css). Everything below stays scoped to #pt-gate (and #signin for index.html) and never edits styles.css / portal.css / pha-shared.css / rs-nav.css. KEY TECHNIQUE: pha-shared.css defines page-level custom properties (--pha-blue, --pha-blue-deep, --pha-hairline, --pha-green, --pha-text, --pha-text-muted, --pha-on-dark*, --pha-font-mono, --pha-radius-*) that dozens of protected-file rules (.rs-authority-top, .pt-gate-card, .gv11-band, .gv11-matrix, .pt-matrix, .pha-showcase, etc.) consume. pha-shared.css's own header explicitly forbids redefining these at :root ("must not redefine --pha-blue / --pha-text / --pha-hairline") because six other apps share that file. We honor that by NEVER touching :root -- instead we redeclare the same custom properties on the #pt-gate element itself. Custom properties cascade by DOM proximity, so every protected rule that reads var(--pha-blue) etc. *inside* #pt-gate now resolves to the workspace-matched value, while the identical rule anywhere outside #pt-gate (other pages, and portal.html's own signed-in .pt-page views which sit outside the #pt-gate wrapper) keeps reading the real, unmodified :root token. No shared selector, rule or file changes; only a scoped variable re-assignment plus new/extended rules under #pt-gate's own selectors below. ===================================================================== */ #pt-gate { /* Re-skin the shared token surface, scoped -- see note above. */ --pha-blue: var(--lv-primary); --pha-blue-hover: var(--lv-primary-hover); --pha-blue-deep: #1c1a16; /* was cool navy #163c73 -> workspace dark rail graphite */ --pha-text: var(--lv-text); --pha-text-secondary: var(--lv-text); --pha-text-muted: var(--lv-muted); --pha-hairline: var(--lv-border-strong); --pha-hairline-strong: var(--lv-border-strong); --pha-canvas: var(--lv-bg); --pha-card: var(--lv-surface); --pha-green: var(--lv-ok); --pha-green-bg: var(--lv-ok-tint); --pha-amber: var(--lv-due); --pha-amber-bg: var(--lv-due-tint); --pha-cyan: var(--lv-primary); --pha-cyan-bg: var(--lv-primary-tint); --pha-on-dark: #ffffff; --pha-on-dark-accent: #b9c6d8; /* workspace --rail-count-fg */ --pha-on-dark-body: #cbc5b9; /* workspace --sidebar-foreground */ --pha-on-dark-muted: #9c968a; --pha-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --pha-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --pha-font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; --pha-radius-sm: var(--lv-radius-sm); --pha-radius-md: var(--lv-radius); --pha-radius-lg: var(--lv-radius-lg); --pha-shadow-card: var(--lv-shadow); --pha-shadow-pop: var(--lv-shadow-md); /* Base type rhythm to match the workspace's denser product-UI feel. */ font-size: 14px; line-height: 1.45; } /* ---- Top navy brand header -> workspace-native dark graphite chrome ---- */ #pt-gate .rs-authority-top { background: var(--pha-blue-deep); border-bottom: 1px solid #332f28; } #pt-gate .rs-authority-brand-div { background: #332f28; } #pt-gate .rs-authority-slogan { color: var(--lv-faint); } #pt-gate .rs-authority-pdd-btn { border: 1px solid #332f28; color: #cbc5b9; border-radius: var(--lv-radius-sm); } #pt-gate .rs-authority-pdd-btn:hover, #pt-gate .rs-authority-pdd-btn[aria-expanded="true"] { background: #282520; color: #ffffff; } #pt-gate .rs-authority-pdd-menu { background: #1c1a16; border: 1px solid #332f28; border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow-md); } /* ---- Live stats strip (#gv17-proof): dark navy -> dark graphite, drop the foreign Space Grotesk figure font for the workspace mono/tabular treatment used on .kpi-value. ---- */ #pt-gate .gv17-proof { background: #1c1a16; border-bottom: 1px solid #332f28; } #pt-gate .gv17-cell { border-left: 1px solid #332f28; } #pt-gate .gv17-cell b { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; color: #ffffff; } #pt-gate .gv17-cell span { font-family: var(--pha-font-mono); color: #9c968a; } #pt-gate .gv17-cell i { color: var(--lv-ok); } /* ---- Sign-in / browse card: opaque workspace card, no glass/blur ---- */ #pt-gate .pt-gate-card { background: var(--lv-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } #pt-gate .pt-gate-card .sub { color: var(--lv-muted); } #pt-gate .pt-gate-card label { color: var(--lv-faint); font-family: var(--pha-font-mono); } #pt-gate .pt-gate-card select, #pt-gate .pt-gate-card input { background: var(--lv-surface-2); color: var(--lv-text); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); } #pt-gate .pt-gate-card select:focus, #pt-gate .pt-gate-card input:focus { outline: none; border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); } #pt-gate .pt-gate-card select:disabled { color: var(--lv-faint); background: var(--lv-surface-2); opacity: 1; } /* Disabled CTA. This is the state EVERY first-time visitor sees, because the button stays disabled until a state is picked -- so it is effectively the default appearance of the page's primary call to action, not a rare edge state. The first version used white text on the tan --lv-border-strong, measured live at 2.02:1 (owner QA 2026-09-08) -- far under the 4.5:1 AA threshold and hard to read on arrival. Dark warm graphite on the same tan measures 5.74:1 and keeps the muted, clearly-not-clickable look. */ #pt-gate #gate-btn:disabled, #pt-gate .pt-gate-cta:disabled { background: var(--lv-border-strong); border-color: var(--lv-border-strong); color: #3d3833; opacity: 1; cursor: not-allowed; } #pt-gate .pt-gate-search input::placeholder { color: var(--lv-faint); } /* ---- Staff Sign-In / Browse an Authority tab toggle ---- */ #pt-gate .pt-gtab { background: var(--lv-surface-2); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); color: var(--lv-muted); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } #pt-gate .pt-gtab.on { background: var(--lv-primary); border-color: var(--lv-primary); color: #ffffff; } /* ---- Primary CTA button ---- */ #pt-gate #gate-btn { background: var(--lv-primary); border-radius: var(--lv-radius-sm); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; box-shadow: none; } #pt-gate #gate-btn:hover { background: var(--lv-primary-hover); } #pt-gate .pt-gate-foot { border-top: 1px solid var(--lv-border); color: var(--lv-muted); } #pt-gate .pt-gate-search input:focus { border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint); } /* ---- Evidence stat tiles (2x2 grid inside the sign-in card) -- restyle as workspace-native KPI tiles: white card, hairline border, quiet shadow, tabular figure, uppercase tracked label. ---- */ #pt-gate .gv17-cardstats { gap: 8px; } #pt-gate .gv17-scell { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .gv17-scell b { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; color: var(--lv-text); } #pt-gate .gv17-scell span { font-family: var(--pha-font-mono); letter-spacing: 0.07em; color: var(--lv-faint); } /* ---- Map panel chrome ---- */ #pt-gate .gv6-mapbox { border: 1px solid var(--lv-border); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow); } /* UE-1, 2026-09-26: OpenStreetMap standard tiles have no keyless dark set (docs/BASEMAP.md), so the "Dark" basemap toggle inverts the MapLibre canvas in CSS instead of switching to a second keyed provider. Applied only to the canvas, never to markers/legend/controls. */ #pt-gate .gv6-mapbox canvas.gate-map-dark { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); } #pt-gate .pt-gate-explore kbd { background: var(--lv-surface-2); border: 1px solid var(--lv-border); border-radius: var(--lv-radius-sm); color: var(--lv-muted); } /* Basemap style control (Streets/Satellite/Dark/Light) -- workspace segmented-button treatment: hairline group border, active = primary. */ #pt-gate .gv6-mapbox [class*="maplibre-ctrl"] button, #pt-gate .gv6-mapbox .gv6-map-style button, #pt-gate .gv6-mapbox .gv6-basemap button { border-radius: var(--lv-radius-sm); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ---- Compliance posture / mandate band: dark navy gradient -> workspace dark graphite, drop the blue-tinted grid texture accent colors. ---- */ #pt-gate .gv11-band { background: linear-gradient(180deg, #1c1a16 0%, #12100c 100%); border-top: 1px solid #332f28; } #pt-gate .gv11-band-eyebrow { color: #b9c6d8; } #pt-gate .gv11-pulse { background: var(--lv-ok); box-shadow: 0 0 0 0 rgba(23, 96, 60, .55); } #pt-gate .gv11-stat-n { font-family: var(--pha-font-mono); color: #ffffff; } #pt-gate .gv11-band-stat { border-left: 2px solid #43403a; } #pt-gate .gv11-m { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .gv11-m-cite a, #pt-gate .gv11-m-duty a { color: var(--lv-primary); border-bottom-color: rgba(16, 64, 127, .45); } #pt-gate .gv11-m-ans strong, #pt-gate .gv11-m-b em { color: var(--lv-text); } /* ---- Assurance / vendor comparison matrix: light grid stays, but the table header goes from solid dark navy to the workspace's light sticky-header treatment (matches [data-rs-table] .rs-tblwrap). ---- */ #pt-gate .gv11-matrix { background: linear-gradient(180deg, var(--lv-bg) 0%, var(--lv-surface-2) 100%); border-top: 1px solid var(--lv-border); } #pt-gate .pt-matrix th { background: var(--lv-surface-2); color: var(--lv-text); border-bottom: 1px solid var(--lv-border); box-shadow: 0 1px 0 var(--lv-border); } #pt-gate .pt-matrix td { border-top: 1px solid var(--lv-border); } #pt-gate .pt-matrix td.pk .key { font-family: var(--pha-font-mono); color: var(--lv-text); } #pt-gate .pt-matrix td.pk .desc { color: var(--lv-faint); } #pt-gate .pt-matrix td.pk .pii { background: var(--lv-due-tint); border: 1px solid var(--lv-due-border); color: var(--lv-due); } /* ---- Modules / solutions showcase cards ---- */ #pt-gate .pha-showcase .pha-card-featured { border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); } #pt-gate .pha-showcase-tier-label { color: var(--lv-faint); } /* ---- Footer: previously entirely unstyled (inherited dark-on-dark); give it a workspace-native surface, column rhythm and link treatment matching the sidebar's label/nav convention. ---- */ #pt-gate .gvft { background: #1c1a16; color: #cbc5b9; } #pt-gate .gvft-inner { max-width: 1516px; margin: 0 auto; padding: 40px 20px 28px; } #pt-gate .gvft-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 24px; } #pt-gate .gvft-col h4 { margin: 0 0 10px; font-family: var(--pha-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7c8ba0; } #pt-gate .gvft-col a { display: block; margin-bottom: 8px; font-size: 12.5px; color: #cbc5b9; text-decoration: none; } #pt-gate .gvft-col a:hover { color: #ffffff; text-decoration: underline; } #pt-gate .gvft-logo { display: flex; align-items: center; gap: 8px; color: #ffffff; font-weight: 700; margin-bottom: 10px; } #pt-gate .gvft-logo svg { color: #b9c6d8; } #pt-gate .gvft-brand p { font-size: 12.5px; line-height: 1.55; color: #9c968a; margin: 0 0 12px; } #pt-gate .gvft-cta { color: #b9c6d8; font-size: 12.5px; font-weight: 600; text-decoration: none; } #pt-gate .gvft-cta:hover { text-decoration: underline; } #pt-gate .gvft-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid #332f28; font-size: 11.5px; color: #6b6559; } #pt-gate .gvft-base a { color: #9c968a; } @media (max-width: 900px) { #pt-gate .gvft-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { #pt-gate .gvft-cols { grid-template-columns: 1fr; } } /* ---- Focus rings site-wide within the gate: workspace ring, not the cool-blue rgba(16, 64, 127,...) used throughout portal.css. ---- */ #pt-gate a:focus-visible, #pt-gate button:focus-visible, #pt-gate input:focus-visible, #pt-gate select:focus-visible { outline: 2px solid var(--lv-primary); outline-offset: 2px; } /* ---- Back-to-top FAB + contact modal: workspace card language ---- */ #pt-gate #gv16-top-fab { background: var(--lv-primary); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow-md); } #pt-gate #gv16-top-fab:hover { background: var(--lv-primary-hover); } #pt-gate .gv18-modal-card { background: var(--lv-surface); border-radius: var(--lv-radius-lg); box-shadow: var(--lv-shadow-md); } #pt-gate .gv18-ct-send { background: var(--lv-primary); border-radius: var(--lv-radius-sm); } #pt-gate .gv18-ct-send:hover { background: var(--lv-primary-hover); }