/* One pull-to-refresh only: suppress the browser's native PTR on RPP pages so the gated in-app gesture (rpp-pull-to-refresh.tsx) is the single behavior. */ html, body { overscroll-behavior-y: contain; } /* ════════════════════════════════════════════════════════════════════════ RESIDENT DASHBOARD + GUEST APP (ported from goldgar-accounts.css → #ga-app) ════════════════════════════════════════════════════════════════════════ */ /* House motion curve — ease-out, NO bounce (goldgar-ui-simplify Rule 3 / impeccable). Declared on :root, not .rpp-root, because the modal overlay is portaled to OUTSIDE .rpp-root and its buttons need the same curve. Safe: this stylesheet is only ever injected by the /rpp layout, so the var never reaches an admin (PCC) route. */ :root { --rpp-ease: cubic-bezier(0.22, 1, 0.36, 1); } .rpp-root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #f1f5f9; background: #0e0e0e; min-height: 100vh; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── PCC grid-dot backdrop ────────────────────────────────────────────── Replicates the admin (PCC) protected-layout backdrop: a fixed, subtle radial-dot grid sitting behind all content. The PCC uses radial-gradient(circle, rgb(var(--dot-grid) / var(--dot-grid-op)) 1px, transparent 1px) at 28px tiles. The RPP has no admin CSS vars, so it hardcodes the equivalent: a lifted warm-grey rgba(96,96,96,0.34) on dark (~20% more noticeable than the old rgba(55,55,55,0.28)) and a darker-gold dot on light (below). pointer- events:none + z-index:0 keeps it inert behind the z-indexed app content; the dark #0e0e0e base color shows between the dots. */ .rpp-root::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(96,96,96,0.34) 1px, transparent 1px); background-size: 28px 28px; } /* Lift the actual app shell above the dot grid. */ .rpp-root > * { position: relative; z-index: 1; } .rpp-root *, .rpp-root *::before, .rpp-root *::after { box-sizing: border-box; } .rpp-root button { font-family: inherit; cursor: pointer; } .rpp-root input, .rpp-root select, .rpp-root textarea { font-family: inherit; font-size: 16px; } .rpp-root a:not(.ga-btn) { color: #ccac28; } /* App container — matches #ga-app responsive widths/padding exactly. padding-top includes the iOS safe-area inset so that, when installed as a standalone PWA (viewportFit:cover), the first content row clears the status bar / Dynamic Island instead of being drawn underneath it. env() resolves to 0 in a normal browser tab and on non-notched devices. */ .rpp-app { max-width: 680px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 64px; } @media (min-width: 1024px) { /* 72px (not 48px): there's no bottom tab bar on desktop, but the floating "Install App" pill still sits fixed at bottom:16px + ~38px tall — the scroll area needs enough bottom room to clear it too. Kept in sync with .rpp-install-pill's desktop bottom offset. */ .rpp-app { max-width: 1100px; margin: 0 auto; padding: 24px 20px 72px; } } /* ── Content scale (~10% bigger for mobile readability) ───────────────────── Wraps ONLY the page content (cards/sections) in the (portal) layout — the fixed chrome (bottom tab bar, install pill, version watcher) and the modals (portaled to ) live OUTSIDE this wrapper, so scaling here never misplaces a fixed element. zoom reflows (unlike transform scale), so cards stay fluid and nothing clips. Owner directive 2026-06-12 (mirror the PCC). */ .rpp-scale { zoom: 1.1; } /* ── Vehicle cards ── Elevated: a faint top-lit gradient over the #1a1a1a surface + a layered contact shadow give the card real depth against the dark canvas (mirrors the PCC .card treatment). The status-edge left borders below are unchanged. */ .ga-vehicle-card { background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 72px), #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 20px; margin-bottom: 14px; position: relative; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4); transition: transform 0.32s var(--rpp-ease), box-shadow 0.32s var(--rpp-ease); } /* Hover lift — the card rises off the canvas on a slow ease-out. Content cards stay SOLID (goldgar-ui-simplify Rule 3: glass is chrome-only); depth comes from shadow + translate, never from a blur. Gated on (hover: hover) so a phone tap never leaves a card stuck in the lifted state. NOTE: deliberately no border-color change — .ga-blacklisted / .ga-bolo and the ga-approved/pending/denied status edges live in the border, and a shorthand hover border-color would wipe the semantic colour signal. */ @media (hover: hover) { .ga-vehicle-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.75), 0 3px 8px -3px rgba(0,0,0,0.55); } } .ga-vehicle-card.ga-approved { border-left: 3px solid #22c55e; } .ga-vehicle-card.ga-pending { border-left: 3px solid #f59e0b; } .ga-vehicle-card.ga-denied { border-left: 3px solid #ef4444; } .ga-vehicle-card.ga-inactive { border-left: 3px solid #64748b; opacity: .75; } .ga-vehicle-card.ga-blacklisted, .ga-vehicle-card.ga-bolo { border: 1.5px solid #b91c1c; background: #1a0505; } /* OPEN "Register a Vehicle" slot — green dashed ghost card (was inline). */ .ga-vehicle-card.rpp-ghost-add { border: 2px dashed #22c55e; background: #0c1a0c; } /* ── Status badges ── */ .ga-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .ga-badge-green { background: #052e16; color: #4ade80; } .ga-badge-amber { background: #451a03; color: #fbbf24; } .ga-badge-red { background: #450a0a; color: #f87171; } .ga-badge-blue { background: #0c1a2e; color: #60a5fa; } .ga-badge-gray { background: #1f2937; color: #9ca3af; } /* ── Section cards ── */ .ga-section { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 80px), #111; border: 1px solid #2a2a2a; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px -3px rgba(0,0,0,0.55), 0 1px 2px -1px rgba(0,0,0,0.4); } .ga-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin: 0 0 18px; } /* ── Buttons — "slightly liquid" (owner directive 2026-07-14 pass 3) ────────── ONE family, three coordinated signals, all on the house ease-out curve (cubic-bezier(0.22, 1, 0.36, 1) — slow, eased, NO bounce): • SPECULAR — a top-lit highlight (::after) that fades in on hover. This is what reads as "liquid": light sitting ON the surface. It fades IN on hover, so it communicates state; it is not a decorative looping sweep (goldgar-ui-simplify Rule 3 bans gratuitous motion). • GLOW — a coloured outer bloom on hover, tinted per variant. • PRESS — a scale-down on :active (the native-app tactile feel). Hover effects are gated behind @media (hover: hover) so a touch device never gets a stuck hover state after a tap — the RPP is mobile-first (~80% of resident traffic) and press-scale is the feedback that matters there. Every one of these collapses to a no-op under the RPP reduced-motion block at the end of this sheet. */ .ga-btn { /* position/overflow/isolation exist to clip + stack the ::after specular. */ position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.28s var(--rpp-ease), transform 0.28s var(--rpp-ease), box-shadow 0.28s var(--rpp-ease), border-color 0.28s var(--rpp-ease), color 0.28s var(--rpp-ease), background 0.28s var(--rpp-ease); text-decoration: none; } /* The specular film. pointer-events:none so it never eats a click. z-index:-1 paints it ON the surface but UNDER the ink: .ga-btn is a stacking context (isolation:isolate), so a negative-z child paints after the button's own background and before its inline content. This is NOT cosmetic — a white film ON TOP of the label measurably drops contrast, and .ga-btn-outline in light mode is gold-on-cream (~2.7:1 at rest), i.e. it cannot afford to lose any. Under the ink the highlight still reads as light sitting on the material (which is what Apple's specular actually is) with zero legibility cost. */ .ga-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05) 46%, rgba(255,255,255,0) 72%); transition: opacity 0.28s var(--rpp-ease); } @media (hover: hover) { .ga-btn:hover::after { opacity: 1; } .ga-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(204,172,40,0.55), 0 2px 6px rgba(0,0,0,0.45); } .ga-btn-outline:hover { transform: translateY(-1px); background: rgba(204,172,40,0.10); border-color: #e0c14a; box-shadow: 0 8px 20px -8px rgba(204,172,40,0.45); } .ga-btn-ghost:hover { transform: translateY(-1px); background: #222; border-color: #4a4a4a; color: #f1f5f9 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.75); } .ga-btn-danger:hover { transform: translateY(-1px); background: rgba(239,68,68,0.10); border-color: #f87171; box-shadow: 0 8px 20px -8px rgba(239,68,68,0.45); } } /* Press feedback: a scale-down alongside the 1px settle — the native-app "tactile" feel (owner directive 2026-07-14 pass 2 — "motion should feel native-app, not web"). This is the PRIMARY button feedback on touch. */ .ga-btn:active { transform: translateY(1px) scale(0.96); } .ga-btn:focus-visible { outline: 2px solid #ccac28; outline-offset: 2px; } .ga-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .ga-btn:disabled::after { opacity: 0 !important; } .ga-btn-gold { background: #ccac28; color: #0e0e0e !important; box-shadow: 0 2px 8px -2px rgba(204,172,40,0.35), 0 1px 2px rgba(0,0,0,0.4); } .ga-btn-gold:active { transform: translateY(0) scale(0.96); } .ga-btn-outline { background: transparent; border: 1.5px solid #ccac28; color: #ccac28 !important; } .ga-btn-ghost { background: #1a1a1a; border: 1px solid #333; color: #94a3b8 !important; } .ga-btn-danger { background: transparent; border: 1.5px solid #ef4444; color: #ef4444 !important; } .ga-btn-sm { padding: 7px 14px; font-size: 12px; } .ga-btn-full { width: 100%; } /* ── Form inputs ── */ .ga-field { margin-bottom: 16px; } .ga-label { display: block; font-size: 13px; font-weight: 600; color: #94a3b8; margin-bottom: 6px; } .ga-input, .ga-select, .ga-textarea { width: 100%; /* min-width:0 + max-width:100% let datetime-local inputs SHRINK to the field instead of forcing their iOS intrinsic min-content width, which was pushing the Start/End fields past the modal's right padding on mobile. */ min-width: 0; max-width: 100%; padding: 11px 14px; /* D2 dark-inversion fix (2026-07-15): fields must read LIGHTER than the glass modal backdrop (rgba(26,26,26,0.82) ≈ rgb(34) effective) so they look raised, matching the light-theme direction — the old near-black #0e0e0e sat BELOW the backdrop and read sunken/muddy. Dark only; light is overridden to #FFFFFF far below (html[data-theme="light"] .ga-input). */ background: #2e2e2e; border: 1px solid #333; border-radius: 12px; color: #f1f5f9; font-size: 15px; outline: none; transition: border-color 0.15s cubic-bezier(0.165,0.84,0.44,1), box-shadow 0.15s cubic-bezier(0.165,0.84,0.44,1); } .ga-input:focus, .ga-select:focus, .ga-textarea:focus { border-color: #ccac28; box-shadow: 0 0 0 3px rgba(204,172,40,0.15); } .ga-input:focus-visible, .ga-select:focus-visible, .ga-textarea:focus-visible { outline: 2px solid #ccac28; outline-offset: 2px; } .ga-input::placeholder { color: #4b5563; } .ga-textarea { resize: vertical; min-height: 80px; } .ga-select { color-scheme: dark; } .ga-select option, .ga-select optgroup { background-color: #1a1a1a; color: #f1f5f9; } /* ── License Plate Input ── */ .ga-plate-wrap { background: #0e0e0e; border: 2px solid #2a2a2a; border-radius: 12px; padding: 16px 16px 12px; text-align: center; transition: border-color 0.2s; } .ga-plate-wrap:focus-within { border-color: #ccac28; } .ga-plate-hint { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .ga-plate-input { background: transparent !important; border: none !important; border-bottom: 2px solid #ccac28 !important; color: #f1f5f9 !important; font-size: 28px; font-weight: 800; text-align: center; width: 100%; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 0; outline: none; caret-color: #ccac28; font-family: monospace, monospace; } .ga-plate-input::placeholder { color: #2a2a2a; } /* ── Alert banners ── */ .ga-alert { border-radius: 10px; padding: 14px 16px; font-size: 14px; margin-bottom: 16px; line-height: 1.5; } .ga-alert-amber { background: #1c1000; border: 1px solid #92400e; color: #fbbf24; } .ga-alert-red { background: #1c0000; border: 1px solid #7f1d1d; color: #f87171; } .ga-alert-green { background: #052e16; border: 1px solid #166534; color: #4ade80; } .ga-alert-blue { background: #0c1a2e; border: 1px solid #1e3a5f; color: #93c5fd; } /* ── Spinner ── */ @keyframes ga-spin { to { transform: rotate(360deg); } } .ga-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #ccac28; border-radius: 50%; animation: ga-spin 0.7s linear infinite; vertical-align: middle; } /* ════════════════════════════════════════════════════════════════════════ DESKTOP LAYOUT (sidebar + main) — ported verbatim from goldgar-accounts.css ════════════════════════════════════════════════════════════════════════ */ .ga-layout { display: flex; min-height: 60vh; gap: 0; } .ga-sidebar { width: 240px; shrink: 0; background: #111; border-right: 1px solid #1f1f1f; border-radius: 14px 0 0 14px; padding: 28px 0 32px; display: flex; flex-direction: column; } .ga-sidebar-profile { padding: 0 20px 24px; border-bottom: 1px solid #1f1f1f; } .ga-avatar { width: 48px; height: 48px; border-radius: 50%; background: #1e2a1e; border: 2px solid #ccac28; color: #ccac28; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } /* Company logo in the sidebar profile — replaces the resident initials avatar (owner directive 2026-07-21). Same 48px footprint as .ga-avatar. */ .ga-avatar-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; margin-bottom: 12px; display: block; } .ga-sidebar-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; } .ga-sidebar-community { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #ccac28; margin-bottom: 3px; } .ga-sidebar-address { font-size: 12px; color: #64748b; line-height: 1.4; } .ga-nav { padding: 16px 12px; flex: 1; } .ga-nav-link { /* relative + isolation anchor the sliding .rpp-nav-pill (below). */ position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #94a3b8; cursor: pointer; transition: background 0.28s var(--rpp-ease), color 0.28s var(--rpp-ease); margin-bottom: 2px; border: none; background: none; width: 100%; text-align: left; text-decoration: none; } .ga-nav-link:hover { background: #1a1a1a; color: #fff; } /* The active row now carries ONLY its colour — its gold background is the shared sliding pill below, so the highlight GLIDES between tabs instead of hard- cutting. (owner directive 2026-07-14 pass 3.) */ .ga-nav-link.ga-nav-active { color: #ccac28; } /* ── Sliding active-nav pill (desktop sidebar) ─────────────────────────────── Rendered by rpp-chrome.tsx as a single motion.span with layoutId="rppNavPill". Only ONE exists at a time, so motion animates it from the old link's box to the new one on a slow ease-out tween. Sits at z-index 0 under the icon+label (which are lifted to z-index 1) so it reads as a background, not an overlay. */ .rpp-nav-pill { position: absolute; inset: 0; z-index: 0; border-radius: 8px; background: #1a1500; box-shadow: inset 0 0 0 1px rgba(204,172,40,0.20); } .rpp-nav-label { position: relative; z-index: 1; } .ga-nav-icon { position: relative; z-index: 1; width: 20px; height: 20px; shrink: 0; display: flex; align-items: center; justify-content: center; } .ga-nav-icon svg, .ga-tab-icon svg { display: block; } .ga-main { flex: 1; min-width: 0; padding: 28px 28px 48px; background: #0e0e0e; border-radius: 0 14px 14px 0; } /* Mobile compact header. The flex layout lives HERE (not inline on the element) so the desktop media-query display:none rule below can actually hide it — an inline display:flex would outrank that media query and leak this identity header into the desktop content area next to the sidebar (fix 2026-07-22). */ .ga-mobile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; } /* ── Guest-app usage bar (matches guest-parking-app.js token palette) ── */ .ga-usage { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; } .ga-usage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .ga-usage-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; } .ga-usage-value { font-size: 13px; font-weight: 700; color: #ccac28; } .ga-usage-track { height: 10px; border-radius: 6px; background: #0e0e0e; border: 1px solid #2a2a2a; overflow: hidden; } .ga-usage-fill { height: 100%; background: linear-gradient(90deg,#ccac28,#b8960c); transition: width .3s; } .ga-usage-fill.ga-usage-over { background: linear-gradient(90deg,#ef4444,#b91c1c); } /* ── Guest-app stay rows ── */ .ga-stay { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; } .ga-stay.ga-stay-active { border-left: 3px solid #22c55e; } .ga-stay.ga-stay-upcoming { border-left: 3px solid #60a5fa; } .ga-stay.ga-stay-expired { border-left: 3px solid #3f3f46; opacity: .7; } .ga-stay-plate { font-size: 17px; font-weight: 800; letter-spacing: .06em; font-family: monospace; color: #f1f5f9; } .ga-stay-meta { font-size: 12px; color: #94a3b8; margin-top: 3px; } .ga-stay-dates { font-size: 12px; color: #64748b; margin-top: 6px; } .ga-empty { text-align: center; color: #4b5563; padding: 26px 16px; font-size: 14px; } /* ── Modal ── Overlays are portaled to (see rpp-modal-portal.tsx) so they sit above the fixed bottom tab bar and outside the .rpp-scale content zoom. Safe-area padding keeps a centered modal clear of the Dynamic Island + home indicator in a standalone PWA. The modal box carries its own zoom:1.1 so it reads at the same ~10%-larger scale as the page content (which it no longer inherits, being portaled out of .rpp-scale). max-height is 80vh → ~88vh once zoomed. */ .ga-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); } /* Liquid Glass — Regular variant (goldgar-ui-simplify Rule 3). The expand/edit modal shell (the ONE choke point every RPP modal renders through, via RppModalPortal) is floating chrome above content — a sanctioned glass surface. It is text-heavy (forms, alerts), so opacity sits at the TOP of the HIG Regular band (0.82) for legibility, per HIG "larger / text-bearing elements appear more opaque." Blur/saturate/tint mirror the shared --glass-* tokens (globals.css) inlined in RPP's #1a1a1a palette. The scrim (.ga-modal-overlay) already dims + blurs the page behind, so the semi-translucent card stays fully legible. Solid on-brand fallbacks for reduce-transparency / increase-contrast are at the end of this sheet; reduced-MOTION is handled by the global backstop + RppModalPortal. */ /* Glass intensity bumped to the top of the Regular band + more entrance travel (owner directive 2026-07-14): blur 28→38, saturate 1.3→1.5, deeper elevation, and the pop keyframe rises further (6→10px, scale 0.97→0.96) so the glass surface visibly ARRIVES. Mirrors the shared --glass-* token bumps in globals.css, inlined here for RPP's isolated #1a1a1a palette. DARK TINT FIX (owner directive 2026-07-14 — "dark glass has a muddy gold tint, should look silverish, no hue"): this is RPP's dark default (no [data-theme] prefix), so it was an unconditional gold film with no light variant to redeem it — now achromatic white at very low alpha, plus a light hairline border instead of the flat #2a2a2a. The LIGHT override 60 lines below (html[data-theme="light"] .ga-modal) is untouched — cream + gold film was never flagged. */ .ga-modal { background-color: rgba(18,18,18,0.9); background-image: linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(38px) saturate(1.5); backdrop-filter: blur(38px) saturate(1.5); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 28px 24px 32px; width: 100%; max-width: 500px; max-height: 80vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; zoom: 1.1; box-shadow: 0 32px 72px -12px rgba(0,0,0,0.8), 0 12px 28px -10px rgba(0,0,0,0.65); box-shadow: 0 32px 72px -12px rgba(0,0,0,0.8), 0 12px 28px -10px rgba(0,0,0,0.65), inset 0 1px 0 0 rgba(255,255,255,0.06); animation: ga-modal-pop 0.24s cubic-bezier(0.165,0.84,0.44,1); } @keyframes ga-modal-pop { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .ga-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; } /* ── D2 phase 2 (owner directive 2026-07-15): dark-modal inversion, EVERY surface. The modal glass reads ~rgb(34); anything inside it still carrying a page-dark background (#0e0e0e–#1a1a1a) sat BELOW the card and read sunken — exactly the inversion the owner flagged (add-safelist, extended-stay and vehicle modals). Translucent white lifts each raised element above the glass, matching the liquid-glass direction (dark card, lighter fields/elements). DARK ONLY by construction: every class here has an html[data-theme="light"] re-assertion whose specificity (21) beats these selectors (20), and this block sits EARLY so stateful variants declared later at equal specificity (.rpp-durchip.is-active gold, .rpp-upload-zone.has-file green) still win. */ .ga-modal .ga-plate-wrap { background: rgba(255,255,255,0.09); border-color: #454545; } .ga-modal .ga-plate-input::placeholder { color: #6b7280; } /* old #2a2a2a vanishes on the lifted wrap */ .ga-modal .ga-btn-ghost { background: rgba(255,255,255,0.08); border-color: #4a4a4a; } .ga-modal .rpp-durchip { background: rgba(255,255,255,0.07); border-color: #4a4a4a; } .ga-modal .rpp-plate-dropdown { background: #2e2e2e; border-color: #454545; } .ga-modal .rpp-plate-row { border-bottom-color: #3a3a3a; } .ga-modal .rpp-plate-row:hover { background: rgba(255,255,255,0.10); } .ga-modal .rpp-upload-zone { background: rgba(255,255,255,0.06); } .ga-modal .rpp-upload-zone:hover { background: rgba(255,255,255,0.09); } .ga-modal .rpp-vio-row { background: rgba(255,255,255,0.08); border-color: #3f3f3f; } .ga-modal .rpp-lp-card { background: rgba(255,255,255,0.08); border-color: #3b4a63; } .ga-modal .rpp-lp-paywall { background: rgba(255,255,255,0.05); } .ga-modal .rpp-register-slot.rpp-slot-locked { background: rgba(255,255,255,0.06); } /* The overlay is portaled to , OUTSIDE .rpp-root — so re-assert the typography + border-box that .rpp-root / .rpp-root-star normally provide, otherwise modal text inherits the host body color and inputs lose border-box (which would push the datetime fields past the modal edge). Scoped to the overlay so nothing leaks. */ .ga-modal-overlay { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #f1f5f9; -webkit-font-smoothing: antialiased; } .ga-modal-overlay *, .ga-modal-overlay *::before, .ga-modal-overlay *::after { box-sizing: border-box; } .ga-modal-overlay button { font-family: inherit; cursor: pointer; } .ga-modal-overlay input, .ga-modal-overlay select, .ga-modal-overlay textarea { font-family: inherit; font-size: 16px; } .ga-modal-overlay a:not(.ga-btn) { color: #ccac28; } /* minmax(0,1fr) lets each track shrink below its content's intrinsic min-width. Without it, a datetime-local / date input's wide min-content size forces the tracks past the modal edge and triggers horizontal scroll. The paired inputs are width:100% + border-box (see .rpp-root *) so they now fit the track. */ .ga-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .ga-two-col > * { min-width: 0; } @media (max-width: 560px) { .ga-two-col { grid-template-columns: minmax(0, 1fr); } } /* ── Register-a-Vehicle compact form (D15) ──────────────────────────────────── Plate-first, 2-columns-even-on-mobile, tighter density. Scoped to .rpp-form-compact so the DEFAULT .ga-two-col (which MUST collapse to 1-col for the guest date/time pickers) is untouched. Input font-size is deliberately NOT reduced — keeping it at the .ga-modal-overlay-pinned 16px avoids iOS focus-zoom; density comes from padding + margins only. */ .rpp-form-compact .ga-field { margin-bottom: 10px; } .rpp-form-compact .ga-label { margin-bottom: 4px; font-size: 12px; } .rpp-form-compact .ga-input { padding: 9px 12px; } @media (max-width: 560px) { .rpp-form-compact .ga-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } } /* ── Native date/time inputs — mobile overflow guard (D17) ──────────────────── On ~390px phones the datetime-local fields in the add-stay / edit-times forms pushed past the modal's right edge: WebKit sizes these to their value's intrinsic width, and .ga-modal's overflow-x:hidden then clipped the right portion so they read as cut off at the viewport. Force the flexible box model on the field AND its internal value box so they shrink to the (collapsed) column. Native picker behavior is untouched — no appearance reset. */ .ga-input[type="datetime-local"], .ga-input[type="date"], .ga-input[type="time"] { min-width: 0; max-width: 100%; } .ga-input[type="datetime-local"]::-webkit-date-and-time-value, .ga-input[type="date"]::-webkit-date-and-time-value, .ga-input[type="time"]::-webkit-date-and-time-value { min-width: 0; text-align: left; } /* ════════════════════════════════════════════════════════════════════════ PORTAL-ONLY ADDITIONS (not in the storefront CSS) ════════════════════════════════════════════════════════════════════════ */ /* ── Mobile bottom tab bar — the phone-app-like nav (Home · Guests · Account). Fixed to the viewport bottom; hidden on desktop where the gold sidebar takes over. ── */ .rpp-bottom-tabs { display: none; /* The bar is portaled to (rpp-chrome.tsx), OUTSIDE .rpp-root, so it no longer inherits the portal font stack — restate it here so the tab labels match the rest of the RPP exactly. box-sizing is re-asserted for the same reason (the .rpp-root * rule doesn't reach a child). */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; box-sizing: border-box; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; /* The bar must be tall enough for comfortable thumb targets (~60px tab row) AND sit above the iOS home-indicator. We pad the BOTTOM by the safe-area inset so the home-indicator overlay never clips the tab labels; the row itself keeps a fixed min-height regardless of the inset. */ /* Liquid Glass — Regular variant (goldgar-ui-simplify Rule 3). This fixed bottom nav is the RPP's persistent floating CHROME sitting above scrolling content — exactly Rule 3's sanctioned target (glass belongs on the nav/control layer, never on the content cards it floats over). Numbers mirror the shared --glass-* tokens in globals.css (28px blur / 0.72 surface alpha / 1.3 saturate / low-alpha gold tint) but are inlined in RPP's own #111 palette because the portal is deliberately isolated from the admin tokens. Kept MONOCHROMATIC per HIG (toolbars/tab bars read best mono; the gold lives only on the active tab's foreground, .rpp-tab-active). The glass sits dark-on-dark over the near-black canvas, so tab-label contrast is unchanged from the prior near-opaque bar. Solid on-brand fallbacks for reduce-transparency / increase-contrast are at the end of this sheet. */ /* Intensity bumped 2026-07-14 (blur 28→38, saturate 1.3→1.5, deeper cast) — mirrors the globals.css --glass-* bumps for this persistent nav chrome. DARK TINT FIX (owner directive 2026-07-14): gold film → achromatic white at very low alpha + a light hairline border, same fix as .ga-modal above and for the same reason (this is the dark default, unconditionally). */ background-color: rgba(17,17,17,0.72); background-image: linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(38px) saturate(1.5); backdrop-filter: blur(38px) saturate(1.5); border-top: 1px solid rgba(255,255,255,0.10); box-shadow: 0 -12px 32px -12px rgba(0,0,0,0.8), inset 0 1px 0 0 rgba(255,255,255,0.05); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); /* extra left/right safe-area on notched landscape — harmless in portrait. */ padding-left: calc(8px + env(safe-area-inset-left, 0px)); padding-right: calc(8px + env(safe-area-inset-right, 0px)); transition: box-shadow 0.25s cubic-bezier(0.165,0.84,0.44,1), transform 0.25s cubic-bezier(0.165,0.84,0.44,1); } /* Re-assert border-box on the portaled bar's descendants — the .rpp-root * rule doesn't reach a child, and the tab/pill sizing was authored under it. */ .rpp-bottom-tabs *, .rpp-bottom-tabs *::before, .rpp-bottom-tabs *::after { box-sizing: border-box; } /* D9 — mobile keyboard: a position:fixed bottom:0 bar rides UP above the soft keyboard on phones whose keyboard resizes the layout viewport. While a text field is focused, rpp-chrome.tsx adds .is-keyboard and we slide the bar down out of view (behind the keyboard) instead. pointer-events off so a tap can't land on the hidden bar. Desktop bar is display:none, so this never applies. */ .rpp-bottom-tabs.is-keyboard { transform: translateY(100%); pointer-events: none; } /* Momentum-scroll elevation (owner directive 2026-07-14 pass 2 — "momentum in scroll-attached chrome"): rpp-chrome.tsx toggles this once the page has scrolled past a few px, so the glass bar visibly separates further from content passing beneath it — same idea as the PCC mobile header's scroll-condense, applied to a bottom bar. */ .rpp-bottom-tabs.is-scrolled { box-shadow: 0 -16px 36px -10px rgba(0,0,0,0.85), inset 0 1px 0 0 rgba(255,255,255,0.06); } .rpp-bottom-tab { /* relative + isolation anchor the sliding .rpp-tab-pill (below). */ position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* Comfortable tap target: ~60px tall row (min-height) so every tab is an easy thumb hit and never visually cramped on small phones. The pill insets below are deliberately small — the HIT AREA is the whole tab, the pill is only the visual. Never shrink this chasing a look (goldgar-ui-simplify Rule 3 reception caveat: "shrinking tap targets"). */ min-height: 60px; padding: 8px 2px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #64748b; text-decoration: none !important; transition: color 0.28s var(--rpp-ease), background 0.28s var(--rpp-ease), transform 0.22s var(--rpp-ease); min-width: 0; text-align: center; } .rpp-bottom-tab .ga-tab-icon { position: relative; z-index: 1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.28s var(--rpp-ease); } .rpp-tab-label { position: relative; z-index: 1; } .rpp-bottom-tab .ga-tab-icon svg { width: 24px; height: 24px; } /* Active tab: colour + icon lift. The gold capsule itself is the SLIDING pill below, not a static background on this element. */ .rpp-bottom-tab.rpp-tab-active { color: #ccac28; } .rpp-bottom-tab.rpp-tab-active .ga-tab-icon { transform: translateY(-1px); } /* Press flash kept (dark parity with the light :active rule below). It paints on the element itself, i.e. BENEATH the pill, so the active tab just deepens. */ .rpp-bottom-tab:active { background: #1a1500; transform: scale(0.94); } /* ── Sliding active-tab pill (mobile bottom bar) ────────────────────────────── The headline of the tab-switch motion. rpp-chrome.tsx renders exactly ONE motion.span with layoutId="rppTabPill" inside whichever tab is active; because the nav now stays mounted across navigations (next/link, not ), motion GLIDES that single element from the old tab's box to the new one on a slow ease-out tween — no bounce, no hard cut. Reduced motion → the tween duration is 0 in rpp-chrome.tsx, so it snaps (a true no-op). */ .rpp-tab-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 12px; background: rgba(204,172,40,0.14); box-shadow: inset 0 0 0 1px rgba(204,172,40,0.24), 0 6px 18px -8px rgba(204,172,40,0.5); pointer-events: none; /* width / height / transform are set inline by rpp-chrome.tsx from the active tab's measured offset box within this fixed bar (offsetLeft/offsetWidth — relative to the bar, so page scroll never leaks in and the pill only ever travels horizontally). No motion layoutId / getBoundingClientRect anymore. */ } /* Responsive switch — identical breakpoints to goldgar-accounts.css. Mobile: no sidebar, fixed bottom tabs, extra bottom padding so the last card never hides behind the bar. */ @media (max-width: 1023px) { .ga-layout { display: block; } .ga-sidebar { display: none; } .ga-main { padding: 0; background: transparent; border-radius: 0; } .rpp-bottom-tabs { display: flex; } /* Clear the fixed bottom bar: ~60px tab row + 16px vertical bar padding + the iOS safe-area inset + breathing room, so the last card is never hidden behind the bar. Kept in sync with .rpp-bottom-tabs / .rpp-bottom-tab. +48px on top of that clears the floating "Install App" pill too — the pill's bottom offset sits flush on this same 96px line (see .rpp-install-pill's own mobile override below) and it stands ~38px tall plus a breathing gap, so the scroll area needs to reserve past the pill, not just the tab bar under it. Kept in sync with .rpp-install-pill's mobile bottom offset. */ .rpp-app { padding-bottom: calc(144px + env(safe-area-inset-bottom, 0px)); } } @media (min-width: 1024px) { .ga-mobile-header { display: none; } .rpp-bottom-tabs { display: none; } } /* Brand tag: full name on desktop, "RPP" on mobile (≤1023px). */ .rpp-brand-short { display: none; } @media (max-width: 1023px) { .rpp-brand-full { display: none; } .rpp-brand-short { display: inline; } } /* ── Login page ── */ .rpp-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .rpp-login-card { width: 100%; max-width: 430px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 96px), #111; border: 1px solid #2a2a2a; border-radius: 16px; padding: 34px 28px 30px; box-shadow: 0 24px 56px -16px rgba(0,0,0,0.6), inset 0 1px 0 0 rgba(255,255,255,0.035); } .rpp-login-brand { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ccac28; text-align: center; margin-bottom: 6px; } .rpp-login-title { font-size: 22px; font-weight: 800; color: #fff; text-align: center; margin: 0 0 6px; } .rpp-login-sub { font-size: 13px; color: #94a3b8; text-align: center; margin: 0 0 24px; line-height: 1.5; } .rpp-login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: #4b5563; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .rpp-login-divider::before, .rpp-login-divider::after { content: ""; flex: 1; height: 1px; background: #1f1f1f; } .rpp-code-input { width: 100%; padding: 12px 14px; background: #0e0e0e; border: 1px solid #333; border-radius: 8px; color: #f1f5f9; font-size: 26px; font-weight: 800; letter-spacing: .35em; text-align: center; font-family: monospace, monospace; outline: none; caret-color: #ccac28; } .rpp-code-input:focus { border-color: #ccac28; } .rpp-code-input::placeholder { color: #2a2a2a; letter-spacing: .2em; } /* ── Green ghost "Register a Vehicle" slot pulse (storefront parity) ── */ @keyframes ga-border-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } 50% { box-shadow: 0 0 12px 2px rgba(34,197,94,0.35); } } .ga-ghost-border-pulse { animation: ga-border-glow 2.2s ease-in-out infinite; } /* ════════════════════════════════════════════════════════════════════════ UNIFIED IA SHARED STYLES (Home + Guests + Account) Added once here so the three page agents NEVER touch rpp-theme.ts (avoids edit collisions). All ga-* / rpp-* naming, same dark/gold palette. ════════════════════════════════════════════════════════════════════════ */ /* ── Page + section headers (the big tab title + the "section · action" row) ── */ .rpp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .rpp-section-title-lg { font-size: 22px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; } .rpp-section-sub { font-size: 13px; color: #94a3b8; margin: 4px 0 0; } /* In-card section header with a trailing action (e.g. "My Vehicles · + Add"). */ .rpp-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 14px; } .rpp-block-head:first-child { margin-top: 0; } .rpp-block-title { font-size: 15px; font-weight: 700; color: #f1f5f9; margin: 0; } .rpp-block-count { font-size: 12px; font-weight: 700; color: #ccac28; background: #1a1500; border-radius: 999px; padding: 2px 9px; } /* ── Register a Vehicle ghost slot (green, available slot) ── */ .rpp-register-slot { display: flex; align-items: center; gap: 14px; width: 100%; background: #0c1a0c; border: 1.5px dashed #22c55e; border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; color: #4ade80; font-size: 15px; font-weight: 700; text-align: left; transition: background 0.28s var(--rpp-ease), transform 0.28s var(--rpp-ease), box-shadow 0.28s var(--rpp-ease), border-color 0.28s var(--rpp-ease); } /* Ghost "register a vehicle" slot lifts + blooms green on hover — same lift language as the cards, tinted to its own semantic colour. */ @media (hover: hover) { .rpp-register-slot:hover { background: #0f2310; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(34,197,94,0.45); } .rpp-register-slot.rpp-slot-locked:hover { box-shadow: 0 10px 24px -12px rgba(0,0,0,0.7); } } .rpp-register-slot:active { transform: scale(0.985); } .rpp-register-slot .rpp-register-plus { shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #052e16; border: 1.5px solid #22c55e; font-size: 22px; font-weight: 400; line-height: 1; } .rpp-register-sub { font-size: 12px; font-weight: 500; color: #5eb37a; margin-top: 2px; } /* Grey/locked ghost slot variant (no available slots — buy/upgrade prompt). */ .rpp-register-slot.rpp-slot-locked { background: #141414; border-color: #3f3f46; color: #94a3b8; } .rpp-register-slot.rpp-slot-locked .rpp-register-plus { background: #1a1a1a; border-color: #3f3f46; } /* ── Add-guest CTA button (gold, full-width, the Home + Guests primary CTA) ── The single most-pressed control in the portal — it gets the full liquid treatment (specular + glow + press), same recipe as .ga-btn-gold. */ .rpp-add-guest { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: #ccac28; color: #0e0e0e; border: none; border-radius: 14px; padding: 15px 20px; font-size: 15px; font-weight: 800; letter-spacing: .01em; margin-bottom: 16px; box-shadow: 0 2px 10px -3px rgba(204,172,40,0.4), 0 1px 2px rgba(0,0,0,0.4); transition: opacity 0.28s var(--rpp-ease), transform 0.28s var(--rpp-ease), box-shadow 0.28s var(--rpp-ease); } /* z-index:-1 — same rule as .ga-btn::after: the specular sits on the material, under the ink, so it never washes the label. */ .rpp-add-guest::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 72%); transition: opacity 0.28s var(--rpp-ease); } @media (hover: hover) { .rpp-add-guest:hover::after { opacity: 1; } .rpp-add-guest:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(204,172,40,0.6), 0 2px 6px rgba(0,0,0,0.45); } } .rpp-add-guest:active { transform: translateY(0) scale(0.97); } .rpp-add-guest:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .rpp-add-guest:disabled::after { opacity: 0 !important; } .rpp-add-guest .rpp-add-guest-icon { font-size: 20px; line-height: 1; } /* ── Guest stay card (richer than the bare ga-stay row — used in the unified Home summary + the Guests tab list). Header plate + status pill, meta, date window, footer actions. ── */ /* Tightened footprint (owner directive 2026-07-14): now that the card is down to 4–5 blocks the padding/margins shrink so more cards fit per screen and the card reads as compact, not a big box with gaps. */ .rpp-guest-card { background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 64px), #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.5); transition: transform 0.32s var(--rpp-ease), box-shadow 0.32s var(--rpp-ease); } /* Brief gold-ring pulse when a card is deep-linked from Home (?stay=). */ @keyframes rpp-stay-flash { 0% { box-shadow: 0 0 0 0 rgba(204,172,40,0.0); } 25% { box-shadow: 0 0 0 3px rgba(204,172,40,0.55); } 100% { box-shadow: 0 0 0 0 rgba(204,172,40,0.0); } } .rpp-stay-flash { animation: rpp-stay-flash 1.5s var(--rpp-ease); } /* Same hover lift as .ga-vehicle-card. Again NO border-color change — the is-active / is-upcoming / is-expired left edges are border-based. */ @media (hover: hover) { .rpp-guest-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.75), 0 3px 8px -3px rgba(0,0,0,0.55); } } .rpp-guest-card.is-active { border-left: 3px solid #22c55e; } .rpp-guest-card.is-upcoming { border-left: 3px solid #60a5fa; } .rpp-guest-card.is-expired { border-left: 3px solid #3f3f46; opacity: .72; } .rpp-guest-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .rpp-guest-plate { font-size: 18px; font-weight: 800; letter-spacing: .06em; font-family: monospace, monospace; color: #f1f5f9; } .rpp-guest-meta { font-size: 12px; color: #94a3b8; margin-top: 2px; } /* Date/time window is the DOMINANT scan target (owner directive 2026-07-14): 15px/600 steps it clearly above the 12px secondary meta line — the second anchor after the plate, since the window drives the decision. */ .rpp-guest-dates { font-size: 15px; font-weight: 600; color: #cbd5e1; margin-top: 6px; display: flex; align-items: center; gap: 6px; } .rpp-guest-card-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #1f1f1f; flex-wrap: wrap; } /* ── Orders / message list rows (Account tab) ── */ .rpp-list-row { display: flex; align-items: center; gap: 12px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; width: 100%; text-align: left; transition: border-color 0.3s var(--rpp-ease), background 0.3s var(--rpp-ease), box-shadow 0.3s var(--rpp-ease), transform 0.3s var(--rpp-ease); } /* Order / message rows lift like the cards do (this row has no status-coloured border, so it CAN take a hover border-color — unlike the guest/vehicle cards). */ @media (hover: hover) { .rpp-list-row:hover { border-color: #3a3a3a; background: #1d1d1d; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0,0,0,0.7), 0 3px 8px -4px rgba(0,0,0,0.5); } } .rpp-list-row:active { transform: scale(0.985); } .rpp-list-row.is-unread { border-color: #ccac28; } .rpp-list-icon { shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #0e0e0e; border: 1px solid #2a2a2a; color: #ccac28; } .rpp-list-body { flex: 1; min-width: 0; } .rpp-list-title { font-size: 14px; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpp-list-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; } /* Contact-Support category tiles (was inline dark) — flips on cream below. */ .rpp-support-tile { background: #0f1117; border: 2px solid #333; color: #e2e8f0; } .rpp-support-tile.is-active { background: #1a1500; border-color: #ccac28; } /* "View Violations" amber bar (was inline dark) — flips on cream below. */ .rpp-view-violations-btn { background: #1a0b00; border: 1px solid #7c3800; color: #fb923c; } .rpp-list-meta { shrink: 0; text-align: right; } .rpp-list-amount { font-size: 14px; font-weight: 700; color: #e2e8f0; } .rpp-list-date { font-size: 11px; color: #64748b; margin-top: 2px; } .rpp-list-chevron { shrink: 0; color: #4b5563; font-size: 18px; line-height: 1; } .rpp-unread-dot { shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #ccac28; box-shadow: 0 0 6px 1px rgba(204,172,40,0.5); } /* ── Thread / message bubbles (request thread modal/page) ── */ .rpp-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .rpp-msg { max-width: 85%; border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.5; } .rpp-msg-admin { align-self: flex-start; background: #1a1a1a; border: 1px solid #2a2a2a; color: #e2e8f0; border-bottom-left-radius: 4px; } .rpp-msg-resident { align-self: flex-end; background: #1a1500; border: 1px solid #4a3a00; color: #f1f5f9; border-bottom-right-radius: 4px; } .rpp-msg-time { font-size: 10px; color: #64748b; margin-top: 5px; } .rpp-msg-attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; color: #ccac28; background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 8px; padding: 6px 10px; text-decoration: none; } /* ── Modal shell extras (footer action row + close button) ── */ .rpp-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .rpp-modal-close { shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: #0e0e0e; border: 1px solid #2a2a2a; color: #94a3b8; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color 0.28s var(--rpp-ease), border-color 0.28s var(--rpp-ease), transform 0.28s var(--rpp-ease); } @media (hover: hover) { .rpp-modal-close:hover { color: #fff; border-color: #3a3a3a; transform: scale(1.06); } } .rpp-modal-close:active { transform: scale(0.92); } .rpp-modal-actions { display: flex; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #1f1f1f; } .rpp-modal-actions .ga-btn { flex: 1; } /* ── Upload drop zone (vehicle reg / lease / DL / message attachments) ── */ .rpp-upload-zone { border: 1.5px dashed #3a3a3a; border-radius: 12px; padding: 22px 16px; text-align: center; cursor: pointer; background: #0e0e0e; transition: border-color 0.15s, background 0.15s; } .rpp-upload-zone:hover { border-color: #ccac28; background: #14110a; } .rpp-upload-zone.has-file { border-style: solid; border-color: #22c55e; background: #0c1a0c; } .rpp-upload-icon { font-size: 26px; margin-bottom: 6px; } .rpp-upload-text { font-size: 13px; font-weight: 600; color: #cbd5e1; } .rpp-upload-hint { font-size: 11px; color: #64748b; margin-top: 4px; } /* ── Small "summary stat" pills (e.g. slots used, guest passes left) ── */ .rpp-stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .rpp-stat { flex: 1; min-width: 120px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 48px), #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px -1px rgba(0,0,0,0.5); transition: transform 0.32s var(--rpp-ease), box-shadow 0.32s var(--rpp-ease), border-color 0.32s var(--rpp-ease); } @media (hover: hover) { .rpp-stat:hover { transform: translateY(-2px); border-color: #3a3a3a; box-shadow: 0 12px 26px -14px rgba(0,0,0,0.7), 0 2px 6px -3px rgba(0,0,0,0.5); } } .rpp-stat-num { font-size: 22px; font-weight: 800; color: #ccac28; line-height: 1.1; } .rpp-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-top: 4px; } /* ── "See all" / view-more link row ── */ .rpp-see-all { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #ccac28; background: none; border: none; padding: 6px 0; text-decoration: none; } .rpp-see-all:hover { opacity: .8; } /* ── Keyboard focus rings (a11y) — match the PCC's 2px gold / 2px offset ring. The portal's custom button/row controls previously only changed opacity or border-color on :focus, leaving keyboard users with no visible focus. Scoped to :focus-visible so pointer clicks don't draw a ring. The modal controls are listed explicitly because the overlay is portaled OUTSIDE .rpp-root. ── */ .rpp-add-guest:focus-visible, .rpp-bottom-tab:focus-visible, .rpp-info-btn:focus-visible, .rpp-install-pill:focus-visible, .rpp-see-all:focus-visible, .rpp-list-row:focus-visible, .rpp-register-slot:focus-visible, .rpp-modal-close:focus-visible, .rpp-plate-row:focus-visible { outline: 2px solid #ccac28; outline-offset: 2px; } /* ── Inline glyphs (plate / vehicle + guest key) ─────────────────────────── Small SVG glyphs injected next to a plate (the car/vehicle mark the PCC shows beside every plate) and beside the guest code (a gold key). Match the ga-* line-art language: currentColor stroke so the parent's color wins. The key glyph is gold by default to read as "your guest access code". */ .rpp-glyph { display: inline-flex; align-items: center; justify-content: center; shrink: 0; vertical-align: middle; } .rpp-glyph svg { display: block; } .rpp-glyph-plate { color: #94a3b8; } /* neutral by default; parent can override */ .rpp-glyph-key { color: #ccac28; } /* gold guest-code key */ /* Info (i) button + modal trigger — a tiny circular affordance that opens shared-info-modal. Sits inline after a label/heading. */ .rpp-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #1a1a1a; border: 1px solid #2a2a2a; color: #94a3b8; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; margin-left: 6px; vertical-align: middle; transition: color 0.15s, border-color 0.15s; } .rpp-info-btn:hover { color: #ccac28; border-color: #ccac28; } /* shared-info-modal body copy (a definition list of inline explanations). */ .rpp-info-body { font-size: 14px; line-height: 1.6; color: #cbd5e1; } .rpp-info-body p { margin: 0 0 12px; } .rpp-info-body p:last-child { margin-bottom: 0; } .rpp-info-body strong { color: #f1f5f9; } .rpp-info-row { margin-bottom: 14px; } .rpp-info-row:last-child { margin-bottom: 0; } .rpp-info-row-title { font-size: 13px; font-weight: 700; color: #ccac28; margin: 0 0 4px; display: flex; align-items: center; gap: 7px; } /* ════════════════════════════════════════════════════════════════════════ PWA "Install App" pill + device-aware steps modal (mirrors the PCC's install-bubble / install-prompt-modal, restyled in the ga- / rpp- dark-gold language since the RPP has no Tailwind tokens). Hidden when standalone. ════════════════════════════════════════════════════════════════════════ */ /* Floating pill — anchored bottom-RIGHT so it never collides with the bottom-left of the screen; on mobile it floats ABOVE the fixed bottom tab bar (which is ~60px tall + safe-area). On desktop the bottom bar is hidden, so the pill sits at the normal bottom inset. */ .rpp-install-pill { position: fixed; z-index: 90; /* below the install modal (1000) + bottom tabs nav stays tappable */ right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #ccac28; color: #0e0e0e; border: none; font-size: 14px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 8px 24px rgba(0,0,0,0.45); transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s; } .rpp-install-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.55); } .rpp-install-pill:active { transform: translateY(0); opacity: 0.9; } .rpp-install-pill .rpp-install-pill-icon { display: inline-flex; } .rpp-install-pill .rpp-install-pill-icon svg { display: block; } /* On mobile, lift the pill clear of the fixed bottom tab bar (~60px row + ~16px padding + safe-area inset). */ @media (max-width: 1023px) { .rpp-install-pill { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* Install steps modal — reuses ga-modal-overlay / ga-modal shells; these add the numbered-step list + the inline Share/Add chips. */ .rpp-install-steps { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; } .rpp-install-step { display: flex; align-items: flex-start; gap: 12px; } .rpp-install-step-num { shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1a1500; border: 1px solid #b8960c; color: #ccac28; font-size: 13px; font-weight: 800; line-height: 1; } .rpp-install-step-body { font-size: 14px; color: #cbd5e1; line-height: 1.5; padding-top: 3px; } .rpp-install-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; margin: 0 2px; border-radius: 6px; background: #0e0e0e; border: 1px solid #2a2a2a; color: #f1f5f9; font-size: 12px; font-weight: 700; vertical-align: middle; } .rpp-install-chip svg { display: block; } .rpp-install-note { margin-top: 4px; border-radius: 10px; border: 1px solid #2a2a2a; background: #141414; padding: 12px 14px; font-size: 13px; color: #94a3b8; line-height: 1.5; } /* ── shared-guest-plate-picker typeahead dropdown (ports the storefront's .gs-plate-dropdown / .gs-plate-row look onto the ga-plate-wrap input). ── */ .rpp-plate-picker { position: relative; } .rpp-plate-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1100; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; max-height: 240px; overflow-y: auto; box-shadow: 0 12px 28px rgba(0,0,0,0.55); } .rpp-plate-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; cursor: pointer; background: none; border: none; border-bottom: 1px solid #222; transition: background 0.12s; } .rpp-plate-row:last-child { border-bottom: none; } .rpp-plate-row:hover { background: #222; } .rpp-plate-row-plate { font-family: monospace, monospace; font-weight: 800; font-size: 15px; letter-spacing: .06em; color: #f1f5f9; } .rpp-plate-row-info { font-size: 12px; color: #94a3b8; } .rpp-plate-row-meta { margin-left: auto; font-size: 11px; color: #64748b; shrink: 0; } /* ════════════════════════════════════════════════════════════════════════ RPP LIGHT THEME (cream) — owner-requested light/dark toggle. The dark rules above are the DEFAULT and remain byte-identical. This block only fires when is set (by the shared no-flash bootstrap + the resident ThemeToggle). The RPP is deliberately isolated from the admin --tokens, so the light values are inlined here, mirroring the PCC light set: cream #FAF8F3 canvas, #FFFFFF cards, #ECE7DC borders, gold #ccac28 fills with #B8941F gold-ink text, dark #1A1A1A text on cream. Modal rules are duplicated under [data-theme="light"] .ga-modal-overlay because the overlay is portaled to , OUTSIDE .rpp-root. ════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .rpp-root { color: #1A1A1A; background: #FAF8F3; } html[data-theme="light"] .rpp-root::before { /* light dot-grid — a DARKER GOLD (not faint black) so the grid actually reads on cream. Bumped 0.13→0.26 so the dots are clearly noticeable. Mirrors the PCC light --dot-grid #967814 @0.26. */ background-image: radial-gradient(circle, rgba(150,120,20,0.26) 1px, transparent 1px); } html[data-theme="light"] .rpp-root a:not(.ga-btn) { color: #B8941F; } /* Vehicle + section cards */ html[data-theme="light"] .ga-vehicle-card { background: linear-gradient(180deg, rgba(0,0,0,0.015), rgba(0,0,0,0) 72px), #FFFFFF; border-color: #ECE7DC; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.06); } html[data-theme="light"] .ga-vehicle-card.ga-blacklisted, html[data-theme="light"] .ga-vehicle-card.ga-bolo { border-color: #b91c1c; background: #fdecec; } html[data-theme="light"] .ga-section { background: linear-gradient(180deg, rgba(0,0,0,0.012), rgba(0,0,0,0) 80px), #FFFFFF; border-color: #ECE7DC; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.06); } html[data-theme="light"] .ga-section-title { color: #5C5648; } /* Status badges — light tints with readable dark-ish ink */ html[data-theme="light"] .ga-badge-green { background: #dcfce7; color: #15803d; } html[data-theme="light"] .ga-badge-amber { background: #fef3c7; color: #b45309; } html[data-theme="light"] .ga-badge-red { background: #fee2e2; color: #b91c1c; } html[data-theme="light"] .ga-badge-blue { background: #dbeafe; color: #1d4ed8; } html[data-theme="light"] .ga-badge-gray { background: #F4F1E9; color: #57534e; } /* Buttons — gold fill stays; ghost/outline retune to the cream palette */ html[data-theme="light"] .ga-btn-gold { color: #1A1A1A !important; } html[data-theme="light"] .ga-btn-outline { border-color: #B8941F; color: #B8941F !important; } html[data-theme="light"] .ga-btn-ghost { background: #F4F1E9; border-color: #DED7C7; color: #57534e !important; } html[data-theme="light"] .ga-btn-danger { border-color: #dc2626; color: #dc2626 !important; } /* Liquid-button hovers on cream. LIGHT-MODE FOOTGUN the dark rules would walk straight into: the dark .ga-btn-ghost:hover sets color:#f1f5f9 (near-white) — on a cream ghost button that is invisible. Each variant gets a cream-tuned hover here: dark ink, a soft tinted fill, and a much lighter glow (the dark rules' rgba(0,0,0,0.75) casts read as a smudge on #FAF8F3). */ @media (hover: hover) { html[data-theme="light"] .ga-btn-gold:hover { box-shadow: 0 10px 24px -6px rgba(184,148,31,0.5), 0 2px 6px rgba(0,0,0,0.12); } html[data-theme="light"] .ga-btn-outline:hover { background: rgba(184,148,31,0.10); border-color: #B8941F; box-shadow: 0 8px 20px -8px rgba(184,148,31,0.4); } html[data-theme="light"] .ga-btn-ghost:hover { background: #EDE8DC; border-color: #C9BFA8; color: #1A1A1A !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.2); } html[data-theme="light"] .ga-btn-danger:hover { background: rgba(220,38,38,0.08); border-color: #dc2626; color: #dc2626 !important; box-shadow: 0 8px 20px -8px rgba(220,38,38,0.32); } } /* Form inputs */ html[data-theme="light"] .ga-input, html[data-theme="light"] .ga-select, html[data-theme="light"] .ga-textarea { background: #FFFFFF; border-color: #DED7C7; color: #1A1A1A; } html[data-theme="light"] .ga-input:focus, html[data-theme="light"] .ga-select:focus, html[data-theme="light"] .ga-textarea:focus { border-color: #ccac28; box-shadow: 0 0 0 3px rgba(204,172,40,0.18); } html[data-theme="light"] .ga-input::placeholder { color: #9b937f; } html[data-theme="light"] .ga-select { color-scheme: light; } html[data-theme="light"] .ga-select option, html[data-theme="light"] .ga-select optgroup { background-color: #FFFFFF; color: #1A1A1A; } /* License-plate input */ html[data-theme="light"] .ga-plate-wrap { background: #FFFFFF; border-color: #DED7C7; } html[data-theme="light"] .ga-plate-hint { color: #5C5648; } html[data-theme="light"] .ga-plate-input { color: #1A1A1A !important; } html[data-theme="light"] .ga-plate-input::placeholder { color: #DED7C7; } /* Alert banners */ html[data-theme="light"] .ga-alert-amber { background: #fef3c7; border-color: #f0c674; color: #92400e; } html[data-theme="light"] .ga-alert-red { background: #fee2e2; border-color: #f1a9a9; color: #b91c1c; } html[data-theme="light"] .ga-alert-green { background: #dcfce7; border-color: #8fd9aa; color: #15803d; } html[data-theme="light"] .ga-alert-blue { background: #dbeafe; border-color: #9dc1f0; color: #1d4ed8; } /* Desktop layout shells */ html[data-theme="light"] .ga-sidebar { background: #FFFFFF; border-right-color: #ECE7DC; } html[data-theme="light"] .ga-sidebar-profile { border-bottom-color: #ECE7DC; } html[data-theme="light"] .ga-avatar { background: #FBF4DC; } html[data-theme="light"] .ga-sidebar-name { color: #1A1A1A; } html[data-theme="light"] .ga-sidebar-community { color: #B8941F; } html[data-theme="light"] .ga-sidebar-address { color: #6B6557; } html[data-theme="light"] .ga-nav-link { color: #5C5648; } html[data-theme="light"] .ga-nav-link:hover { background: #F4F1E9; color: #1A1A1A; } /* Active row keeps only its gold ink — the background is the sliding pill. */ html[data-theme="light"] .ga-nav-link.ga-nav-active { color: #B8941F; } html[data-theme="light"] .rpp-nav-pill { background: #FBF4DC; box-shadow: inset 0 0 0 1px rgba(184,148,31,0.28); } html[data-theme="light"] .ga-main { background: #FAF8F3; } /* Usage bar */ html[data-theme="light"] .ga-usage { background: #FFFFFF; border-color: #ECE7DC; } html[data-theme="light"] .ga-usage-label { color: #5C5648; } html[data-theme="light"] .ga-usage-value { color: #B8941F; } html[data-theme="light"] .ga-usage-track { background: #F4F1E9; border-color: #ECE7DC; } /* The guest-code card's usage bar lives INSIDE the gold/beige card — it must * stay transparent (no white box). This selector (0,2,0) intentionally matches * the .ga-usage light override above so it wins by source order and keeps the * bar flush on the card in light mode, not a floating white slab. */ html[data-theme="light"] .rpp-guestcode-usage { background: transparent; border-color: transparent; } /* Stay rows */ html[data-theme="light"] .ga-stay { background: #FFFFFF; border-color: #ECE7DC; } html[data-theme="light"] .ga-stay-plate { color: #1A1A1A; } html[data-theme="light"] .ga-stay-meta { color: #5C5648; } html[data-theme="light"] .ga-stay-dates { color: #6B6557; } html[data-theme="light"] .ga-empty { color: #6B6557; } /* Bottom tab bar (mobile) */ /* Bottom nav glass — light. blur/saturate carry over from the base rule; only the translucent surface + brand tint + edge-light are re-tuned for cream. */ html[data-theme="light"] .rpp-bottom-tabs { background-color: rgba(255,255,255,0.72); background-image: linear-gradient(0deg, rgba(204,172,40,0.09), rgba(204,172,40,0.09)); border-top-color: #ECE7DC; box-shadow: 0 -12px 32px -14px rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.6); } html[data-theme="light"] .rpp-bottom-tabs.is-scrolled { box-shadow: 0 -16px 36px -12px rgba(0,0,0,0.28), inset 0 1px 0 0 rgba(255,255,255,0.7); } html[data-theme="light"] .rpp-bottom-tab { color: #5C5648; } /* Active tab keeps only its gold ink — the capsule is the sliding pill. */ html[data-theme="light"] .rpp-bottom-tab.rpp-tab-active { color: #B8941F; } html[data-theme="light"] .rpp-bottom-tab:active { background: #FBF4DC; } html[data-theme="light"] .rpp-tab-pill { background: rgba(184,148,31,0.14); box-shadow: inset 0 0 0 1px rgba(184,148,31,0.30), 0 6px 18px -8px rgba(184,148,31,0.35); } /* Login card */ html[data-theme="light"] .rpp-login-card { background: linear-gradient(180deg, rgba(0,0,0,0.012), rgba(0,0,0,0) 96px), #FFFFFF; border-color: #ECE7DC; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 18px 40px rgba(0,0,0,0.08); } html[data-theme="light"] .rpp-login-brand { color: #B8941F; } html[data-theme="light"] .rpp-login-title { color: #1A1A1A; } html[data-theme="light"] .rpp-login-sub { color: #5C5648; } html[data-theme="light"] .rpp-login-divider { color: #6B6557; } html[data-theme="light"] .rpp-login-divider::before, html[data-theme="light"] .rpp-login-divider::after { background: #ECE7DC; } html[data-theme="light"] .rpp-code-input { background: #FFFFFF; border-color: #DED7C7; color: #1A1A1A; } html[data-theme="light"] .rpp-code-input:focus { border-color: #ccac28; } html[data-theme="light"] .rpp-code-input::placeholder { color: #DED7C7; } /* Unified IA shared styles */ html[data-theme="light"] .rpp-section-title-lg { color: #1A1A1A; } html[data-theme="light"] .rpp-section-sub { color: #5C5648; } html[data-theme="light"] .rpp-block-title { color: #1A1A1A; } html[data-theme="light"] .rpp-block-count { color: #B8941F; background: #FBF4DC; } html[data-theme="light"] .rpp-register-slot { background: #effaf0; border-color: #22c55e; color: #15803d; } html[data-theme="light"] .rpp-register-slot:hover { background: #e3f6e6; } html[data-theme="light"] .rpp-register-slot .rpp-register-plus { background: #dcfce7; border-color: #22c55e; } html[data-theme="light"] .rpp-register-sub { color: #3f9d5e; } html[data-theme="light"] .rpp-register-slot.rpp-slot-locked { background: #F4F1E9; border-color: #DED7C7; color: #5C5648; } html[data-theme="light"] .rpp-register-slot.rpp-slot-locked .rpp-register-plus { background: #FFFFFF; border-color: #DED7C7; } /* OPEN "Register a Vehicle" slot on cream — flip dark-green slab + retune inline greens (mirrors .rpp-register-slot light palette). !important beats inline. */ html[data-theme="light"] .ga-vehicle-card.rpp-ghost-add { background: #effaf0; border-color: #22c55e; } html[data-theme="light"] .ga-vehicle-card.rpp-ghost-add [style*="color"] { color: #15803d !important; } html[data-theme="light"] .rpp-add-guest { color: #1A1A1A; } html[data-theme="light"] .rpp-guest-card { background: linear-gradient(180deg, rgba(0,0,0,0.012), rgba(0,0,0,0) 64px), #FFFFFF; border-color: #ECE7DC; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } html[data-theme="light"] .rpp-guest-plate { color: #1A1A1A; } html[data-theme="light"] .rpp-guest-meta { color: #5C5648; } /* Dominant date on cream: darker ink than the muted meta so the 15px/600 window line (base rule) still reads as the primary scan target in light mode too. */ html[data-theme="light"] .rpp-guest-dates { color: #3A352B; } html[data-theme="light"] .rpp-guest-card-actions { border-top-color: #ECE7DC; } /* Orders / message list rows */ html[data-theme="light"] .rpp-list-row { background: #FFFFFF; border-color: #ECE7DC; } html[data-theme="light"] .rpp-list-row:hover { border-color: #DED7C7; background: #FCFBF7; box-shadow: 0 4px 12px -6px rgba(0,0,0,0.12); } html[data-theme="light"] .rpp-list-row.is-unread { border-color: #ccac28; } html[data-theme="light"] .rpp-list-icon { background: #F4F1E9; border-color: #ECE7DC; color: #B8941F; } html[data-theme="light"] .rpp-list-title { color: #1A1A1A; } html[data-theme="light"] .rpp-list-sub { color: #5C5648; } html[data-theme="light"] .rpp-support-tile { background: #F4F1E9; border-color: #ECE7DC; color: #1A1A1A; } html[data-theme="light"] .rpp-support-tile.is-active { background: #FBF4DC; border-color: #ccac28; } html[data-theme="light"] .rpp-view-violations-btn { background: #fff7ed; border-color: #fdba74; color: #c2410c; } html[data-theme="light"] .rpp-list-amount { color: #1A1A1A; } html[data-theme="light"] .rpp-list-date { color: #6B6557; } html[data-theme="light"] .rpp-list-chevron { color: #9b937f; } html[data-theme="light"] .rpp-unread-dot { background: #ccac28; box-shadow: 0 0 6px 1px rgba(204,172,40,0.5); } /* Thread / message bubbles */ html[data-theme="light"] .rpp-msg-admin { background: #F4F1E9; border-color: #ECE7DC; color: #1A1A1A; } html[data-theme="light"] .rpp-msg-resident { background: #FBF4DC; border-color: #ecd9a0; color: #1A1A1A; } html[data-theme="light"] .rpp-msg-time { color: #6B6557; } html[data-theme="light"] .rpp-msg-attach { color: #B8941F; background: #FFFFFF; border-color: #ECE7DC; } /* Upload zone */ html[data-theme="light"] .rpp-upload-zone { background: #FFFFFF; border-color: #DED7C7; } html[data-theme="light"] .rpp-upload-zone:hover { border-color: #ccac28; background: #FBF8EE; } html[data-theme="light"] .rpp-upload-zone.has-file { border-color: #22c55e; background: #effaf0; } html[data-theme="light"] .rpp-upload-text { color: #1A1A1A; } html[data-theme="light"] .rpp-upload-hint { color: #6B6557; } /* Summary stat pills */ html[data-theme="light"] .rpp-stat { background: linear-gradient(180deg, rgba(0,0,0,0.012), rgba(0,0,0,0) 48px), #FFFFFF; border-color: #ECE7DC; box-shadow: 0 1px 3px -1px rgba(0,0,0,0.08); } html[data-theme="light"] .rpp-stat-num { color: #B8941F; } /* ── Card hover lifts on cream ─────────────────────────────────────────────── The translate half of the lift is theme-agnostic (set on the base rules); only the SHADOW needs re-tuning — the dark rules' rgba(0,0,0,0.75) casts read as a dirty smudge on #FAF8F3. Same geometry, a fraction of the opacity. */ @media (hover: hover) { html[data-theme="light"] .ga-vehicle-card:hover, html[data-theme="light"] .rpp-guest-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.07), 0 18px 36px -14px rgba(0,0,0,0.16); } html[data-theme="light"] .rpp-stat:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 14px 28px -14px rgba(0,0,0,0.14); } /* SHADOW ONLY — deliberately NOT border-color/background. The light .rpp-list-row:hover rule further up already sets both, and it sits BEFORE the .rpp-list-row.is-unread rule in source order, so the gold unread edge still wins on hover. Re-declaring border-color HERE (identical specificity, later in the sheet) silently beat .is-unread and wiped the unread signal the moment a resident hovered the row — light mode only. Don't put it back. (NB: this file is a TEMPLATE LITERAL — never use backticks in a comment.) */ html[data-theme="light"] .rpp-list-row:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 14px 28px -14px rgba(0,0,0,0.15); } } html[data-theme="light"] .rpp-stat-label { color: #5C5648; } html[data-theme="light"] .rpp-see-all { color: #B8941F; } /* Glyphs + info button */ html[data-theme="light"] .rpp-glyph-plate { color: #5C5648; } html[data-theme="light"] .rpp-glyph-key { color: #B8941F; } html[data-theme="light"] .rpp-info-btn { background: #F4F1E9; border-color: #ECE7DC; color: #5C5648; } html[data-theme="light"] .rpp-info-btn:hover { color: #B8941F; border-color: #ccac28; } html[data-theme="light"] .rpp-info-body { color: #44403c; } html[data-theme="light"] .rpp-info-body strong { color: #1A1A1A; } html[data-theme="light"] .rpp-info-row-title { color: #B8941F; } /* Install pill + steps modal */ html[data-theme="light"] .rpp-install-pill { color: #1A1A1A; box-shadow: 0 8px 24px rgba(0,0,0,0.18); } html[data-theme="light"] .rpp-install-step-num { background: #FBF4DC; border-color: #B8941F; color: #B8941F; } html[data-theme="light"] .rpp-install-step-body { color: #44403c; } html[data-theme="light"] .rpp-install-chip { background: #FFFFFF; border-color: #ECE7DC; color: #1A1A1A; } html[data-theme="light"] .rpp-install-note { background: #F4F1E9; border-color: #ECE7DC; color: #5C5648; } /* Plate-picker typeahead dropdown */ html[data-theme="light"] .rpp-plate-dropdown { background: #FFFFFF; border-color: #ECE7DC; box-shadow: 0 12px 28px rgba(0,0,0,0.16); } html[data-theme="light"] .rpp-plate-row { border-bottom-color: #ECE7DC; } html[data-theme="light"] .rpp-plate-row:hover { background: #F4F1E9; } html[data-theme="light"] .rpp-plate-row-plate { color: #1A1A1A; } html[data-theme="light"] .rpp-plate-row-info { color: #5C5648; } html[data-theme="light"] .rpp-plate-row-meta { color: #6B6557; } /* Portaled modal (lives outside .rpp-root, on ) */ /* Modal glass — light. blur/saturate carry over from the base .ga-modal rule; only the translucent surface + brand tint are re-tuned for cream. */ html[data-theme="light"] .ga-modal { background-color: rgba(255,255,255,0.82); background-image: linear-gradient(0deg, rgba(204,172,40,0.09), rgba(204,172,40,0.09)); border-color: #ECE7DC; box-shadow: 0 22px 48px rgba(0,0,0,0.16), 0 6px 16px rgba(0,0,0,0.1); } html[data-theme="light"] .ga-modal-overlay { color: #1A1A1A; background: rgba(0,0,0,.45); } html[data-theme="light"] .ga-modal-overlay a:not(.ga-btn) { color: #B8941F; } html[data-theme="light"] .ga-modal-title { color: #1A1A1A; } html[data-theme="light"] .rpp-modal-close { background: #F4F1E9; border-color: #ECE7DC; color: #5C5648; } html[data-theme="light"] .rpp-modal-close:hover { color: #1A1A1A; border-color: #DED7C7; } html[data-theme="light"] .rpp-modal-actions { border-top-color: #ECE7DC; } html[data-theme="light"] .ga-label { color: #5C5648; } html[data-theme="light"] .ga-field { color: #1A1A1A; } /* ════════════════════════════════════════════════════════════════════════ LIGHT-THEME TARGETED FIXES ════════════════════════════════════════════════════════════════════════ */ /* ── Mobile header resident name + address ── Dark default: white name, slate-600 address. Light override: near-black on cream. */ .rpp-mobile-name { color: #fff; } .rpp-mobile-addr { color: #64748b; } html[data-theme="light"] .rpp-mobile-name { color: #1A1A1A; } html[data-theme="light"] .rpp-mobile-addr { color: #5C5648; } /* ── Vehicle card status left borders — re-assert after the light-theme border-color shorthand (#ECE7DC) would otherwise strip the colored edge. The shorthand in the base light rule sets ALL borders; these rules re-override just border-left for each status class so the semantic color signal stays visible on cream. ── */ html[data-theme="light"] .ga-vehicle-card.ga-approved { border-left: 3px solid #22c55e; } html[data-theme="light"] .ga-vehicle-card.ga-pending { border-left: 3px solid #f59e0b; } html[data-theme="light"] .ga-vehicle-card.ga-denied { border-left: 3px solid #ef4444; } html[data-theme="light"] .ga-vehicle-card.ga-inactive { border-left: 3px solid #64748b; } html[data-theme="light"] .rpp-guest-card.is-active { border-left: 3px solid #22c55e; } html[data-theme="light"] .rpp-guest-card.is-upcoming { border-left: 3px solid #60a5fa; } html[data-theme="light"] .rpp-guest-card.is-expired { border-left: 3px solid #a1a1aa; opacity: .72; } /* ── Guest parking paywall card (no-pass state). Dark: deep amber-black gradient, gold/amber text. Light: warm cream card, readable dark ink. ── */ .rpp-paywall-card { background: linear-gradient(135deg,#1a1500 0%,#120e00 100%); border: 1px solid #6d5a12; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 2px 10px -4px rgba(0,0,0,0.5); } .rpp-paywall-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #241c00; border: 1px solid #6d5a12; color: #ccac28; } .rpp-paywall-main { flex: 1; min-width: 0; } .rpp-paywall-title { font-size: 18px; font-weight: 800; color: #fbbf24; margin-bottom: 6px; } .rpp-paywall-body { font-size: 13px; color: #b39a4a; margin-bottom: 14px; line-height: 1.5; } .rpp-paywall-buying { font-size: 12px; margin-top: 8px; } html[data-theme="light"] .rpp-paywall-card { background: linear-gradient(135deg,#FFFDF5 0%,#FBF4DC 100%); border-color: #E4D7A8; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05); } html[data-theme="light"] .rpp-paywall-icon { background: #FFFFFF; border-color: #E4D7A8; color: #B8941F; } html[data-theme="light"] .rpp-paywall-title { color: #92400e; } html[data-theme="light"] .rpp-paywall-body { color: #78350f; } /* ── Request-thread reply composer bar — pinned to the bottom of the chat. Dark default mirrors the old inline literals; light flips to cream so the bar doesn't stay black on the light page (mirrors the .ga-section pair). ── */ .rpp-composer-bar { border-top: 1px solid #1f1f1f; background: #111; } html[data-theme="light"] .rpp-composer-bar { border-top-color: #ECE7DC; background: #FFFFFF; } /* ── Chat: message bubbles + composer (Account → a request thread) ──────────── The RPP thread renders through the SHARED chat primitives (components/chat/chat.tsx), which ALSO drive the PCC request thread and the chatbot — so that file is deliberately left alone. request-chat-client.tsx instead passes .rpp-chat-bubble through the primitive's existing className prop, and the motion lives here. Zero PCC blast radius. */ @keyframes rpp-msg-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } .rpp-chat-bubble { /* Deliberately NO animation-fill-mode: a filled animation keeps its final transform applied, and animations outrank normal declarations in the cascade — it would silently beat the :hover transform below. Letting the animation release hands control back to CSS. Only NEW messages animate: React keys bubbles by message id, so a realtime refresh reuses the existing DOM nodes and never replays the entrance. */ animation: rpp-msg-in 0.42s var(--rpp-ease); box-shadow: 0 1px 2px -1px rgba(0,0,0,0.35); transition: transform 0.3s var(--rpp-ease), box-shadow 0.3s var(--rpp-ease); } @media (hover: hover) { .rpp-chat-bubble:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0,0,0,0.7), 0 2px 5px -2px rgba(0,0,0,0.45); } } /* Composer: the bar blooms a soft gold edge-light while the resident is actually typing, so it reads as the live surface. Pairs with .ga-textarea:focus's ring. */ .rpp-composer-bar { transition: box-shadow 0.3s var(--rpp-ease), border-color 0.3s var(--rpp-ease); } .rpp-composer-bar:focus-within { border-top-color: rgba(204,172,40,0.45); box-shadow: inset 0 1px 0 0 rgba(204,172,40,0.18), 0 -10px 26px -18px rgba(204,172,40,0.55); } html[data-theme="light"] .rpp-chat-bubble { box-shadow: 0 1px 2px -1px rgba(0,0,0,0.10); } @media (hover: hover) { html[data-theme="light"] .rpp-chat-bubble:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 24px -14px rgba(0,0,0,0.18); } } html[data-theme="light"] .rpp-composer-bar:focus-within { border-top-color: rgba(184,148,31,0.5); box-shadow: inset 0 1px 0 0 rgba(184,148,31,0.2), 0 -10px 26px -18px rgba(184,148,31,0.4); } /* ── Notification toggle track — OFF state only (checked=gold stays inline). Dark off-track near-black; light off-track cream so it isn't near-black on cream. The knob + checked gold are set inline on the button. ── */ .rpp-toggle-track { background: #1a1a1a; border-color: #333; } html[data-theme="light"] .rpp-toggle-track { background: #E7E2D6; border-color: #DED7C7; } /* ── Per-vehicle violation row inside the Home violations modal. Dark: slate slab; light: white row on cream (mirrors .rpp-list-row). ── */ .rpp-vio-row { background: #1a1a1a; border: 1px solid #2a2a2a; } html[data-theme="light"] .rpp-vio-row { background: #FFFFFF; border-color: #ECE7DC; } /* ── Muted body-text utilities ────────────────────────────────────────────── The pervasive inline slate literals (#94a3b8 / #64748b) on hand-rolled elements are unreachable by [data-theme=light] CSS. These two classes carry the SAME dark value as their inline literal (so dark is byte-identical) and flip to an AA-on-cream ink in light. Replace the inline color with the class. .rpp-muted = slate-400 #94a3b8 → cream #6B6557 (subtitles, meta, helper) .rpp-faint = slate-500 #64748b → cream #5C5648 (dates, plate-state, hints) */ .rpp-muted { color: #94a3b8; } .rpp-faint { color: #64748b; } html[data-theme="light"] .rpp-muted { color: #6B6557; } html[data-theme="light"] .rpp-faint { color: #5C5648; } /* Near-white primary card/list text (#e2e8f0 / #cbd5e1) → dark ink on cream (these would be invisible-on-white if left as the inline literal). */ .rpp-ink-200 { color: #e2e8f0; } html[data-theme="light"] .rpp-ink-200 { color: #1A1A1A; } /* ── Guest-code + usage card (guest-code-usage-card.tsx) ───────────────────── Dark: near-black gold-edged slab (kept as the DARK base here so the inline gradient can be dropped). Light: warm cream so it flips off the dark slab on the cream page; inner label/divider retune to legible gold-ink on cream. ── */ .rpp-guestcode-card { border: 1px solid #b8960c; border-radius: 14px; background: linear-gradient(135deg,#15110a 0%,#0e0e0e 100%); padding: 16px; margin-bottom: 20px; } .rpp-guestcode-divider { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #2a2410; } .rpp-guestcode-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7a6600; } .rpp-guestcode-sub { font-size: 12px; margin-top: 4px; } .rpp-guestcode-value { flex-shrink: 0; font-size: 24px; font-weight: 800; letter-spacing: .08em; font-family: monospace, monospace; color: #ccac28; } /* .ga-usage overrides — the usage bar lives INSIDE the gold card, no chrome. */ .rpp-guestcode-usage { border: none; background: transparent; padding: 0; margin: 0; } .rpp-usage-remaining { font-size: 12px; margin-top: 8px; font-weight: 600; color: #bba24a; } .rpp-usage-remaining.is-over { color: #f87171; } .rpp-usage-consec { font-size: 12px; margin-top: 8px; } html[data-theme="light"] .rpp-guestcode-card { background: linear-gradient(135deg,#FFFDF5 0%,#FBF4DC 100%); border-color: #E4D7A8; } html[data-theme="light"] .rpp-guestcode-divider { border-bottom-color: #ECE7DC; } html[data-theme="light"] .rpp-guestcode-label { color: #B8941F; } html[data-theme="light"] .rpp-guestcode-value { color: #7a5c00; } /* The hours value sits on the cream guest-code card — darken it past the shared .ga-usage-value gold token for AA on cream. */ html[data-theme="light"] .rpp-guestcode-usage .ga-usage-value { color: #7a5c00; } html[data-theme="light"] .rpp-usage-remaining { color: #7a5c00; } html[data-theme="light"] .rpp-usage-remaining.is-over { color: #b91c1c; } /* ── Permit pill (#XX-0101 badge on vehicle cards, dashboard PermitPill) ───── Dark: near-black pill, gold number. Light: gold-tinted cream pill with gold-ink number, legible on the white vehicle card. ── */ .rpp-permit-pill { background: #120f00; border: 1px solid #b8960c; } /* Permit number + expiry — gold as the DARK base (were inline literals on the dashboard PermitPill, which beat the light override → gold-on-cream ~1.7:1). With the inline dropped, the light overrides below win in light. Dark base matches the prior inline exactly: num #ccac28, exp #b8960c. */ .rpp-permit-pill .rpp-permit-num { color: #ccac28; } .rpp-permit-pill .rpp-permit-exp { color: #b8960c; } html[data-theme="light"] .rpp-permit-pill { background: #FBF4DC; border-color: #E4D7A8; } html[data-theme="light"] .rpp-permit-pill .rpp-permit-num { color: #7a5c00; } html[data-theme="light"] .rpp-permit-pill .rpp-permit-exp { color: #B8941F; } /* ── Vehicle-actions ghost button — give the "Report a permit issue" ghost a legible label + visible border on cream (was #57534e on #F4F1E9, read as disabled). Scoped to the actions modal so other ghosts are unchanged. ── */ html[data-theme="light"] .rpp-actions-ghost.ga-btn-ghost { color: #1A1A1A !important; border-color: #DED7C7; } /* ── Lost / damaged permit modal cards (home-lost-permit-modal.tsx) ────────── These were inline dark slabs (#0d1117 / #0d0d0d / #0f1117) that stayed dark on the cream modal in light. Each class carries its dark literal as the DARK base (so dark is byte-identical) + a light override flipping it to a cream card. The text sitting ON these cards is converted to .rpp-muted / .rpp-faint / gold-ink so it reads in BOTH themes. */ .rpp-lp-card { background: #0d1117; border: 1px solid #1e293b; } /* ── RPP content-layer liquid morphism (owner directive 2026-07-26) ────────── Mirrors the PCC .glass-card treatment so both surfaces read as one product. (No backticks in this file: it is one big TS template literal.) DELIBERATELY NO backdrop-filter: the RPP is phone-first (~80% of resident traffic) and these cards live in scrolling lists, which is the exact case documented to drop a blurred surface from 60fps to ~30fps. The iOS 27 look is carried entirely by the outer contrast ring plus static top/bottom specular — which is precisely what Apple leaned on when they removed the gyro sheen, so dropping the blur here costs almost nothing visually and nothing at all in battery. Applied via box-shadow only, so every existing background/border rule above (including the light-theme overrides) is left untouched. */ .rpp-lp-card, .rpp-guest-card, .ga-vehicle-card, .rpp-guestcode-card { box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 0 10px 24px -12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.07); } html[data-theme="light"] .rpp-lp-card, html[data-theme="light"] .rpp-guest-card, html[data-theme="light"] .ga-vehicle-card, html[data-theme="light"] .rpp-guestcode-card { /* On cream, a 0.28 ring reads as a smudge and white specular is invisible — same inversion of emphasis the PCC light theme uses. */ box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 10px 24px -14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,255,255,0.22); } .rpp-lp-paywall { background: #0d0d0d; border: 1.5px solid #b45309; } .rpp-lp-reason { background: #0f1117; } /* Paywall title — amber as the DARK base (was inline #fbbf24, invisible on the now-cream paywall card in light); flips to dark amber on cream. */ .rpp-lp-paywall-title { color: #fbbf24; } /* Inline #permitNum gold reference — gold DARK base (was inline #ccac28, only ~1.7:1 on the cream paywall card); flips to gold-ink on cream (matches the .rpp-permit-num light value). */ .rpp-lp-permit-ref { color: #ccac28; } /* Plate hero — sits on the modal BODY (cream in light), so the inline white was invisible-on-cream. White DARK base + near-black on cream (mirrors .ga-stay-plate / .rpp-guest-plate). */ .rpp-lp-plate { color: #fff; } html[data-theme="light"] .rpp-lp-plate { color: #1A1A1A; } /* "Permit Number" eyebrow label — gold DARK base (was inline #b8960c, ~3.4:1 on the now-white card); flips to AA gold-ink on cream. */ .rpp-lp-label { color: #b8960c; } html[data-theme="light"] .rpp-lp-label { color: #7a5c00; } html[data-theme="light"] .rpp-lp-card { background: #FFFFFF; border-color: #ECE7DC; } html[data-theme="light"] .rpp-lp-paywall { background: #FBF4DC; border-color: #d97706; } html[data-theme="light"] .rpp-lp-reason { background: #FFFFFF; } html[data-theme="light"] .rpp-lp-paywall-title { color: #92400e; } html[data-theme="light"] .rpp-lp-permit-ref { color: #7a5c00; } /* ── Guest-pass paywall card extras (guest-client + dashboard share .rpp-paywall-card/title/body above; these add the eyebrow + the "Shop Guest Pass" outline CTA, which were inline literals that stayed gold-on-cream / low-contrast in light). Dark bases match the prior inline exactly: eyebrow #7a6600, CTA border #b8960c + text #fbbf24. ── */ .rpp-paywall-eyebrow { color: #c9a83a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; } .rpp-paywall-cta { border-color: #b8960c !important; color: #fbbf24 !important; } html[data-theme="light"] .rpp-paywall-eyebrow { color: #92400e; } html[data-theme="light"] .rpp-paywall-cta { border-color: #B8941F !important; color: #92400e !important; } /* ── Per-vehicle violation type badges (home-vehicle-violations-modal). The Tow / Final-Notice (red) and Violation (amber) pills were inline near- black slabs that stayed dark on the cream modal. Each keeps its exact dark literal as the DARK base; light flips to a soft tint with readable ink (mirrors .ga-badge-red / .rpp-view-violations-btn light values). The Resolved/remedied pill already maps cleanly to .ga-badge-gray. ── */ .rpp-vio-badge-red { background: #1a0505; color: #f87171; border: 1px solid #7f1d1d; } .rpp-vio-badge-amber { background: #1a0b00; color: #fb923c; border: 1px solid #7c3800; } html[data-theme="light"] .rpp-vio-badge-red { background: #fee2e2; color: #b91c1c; border-color: #f1a9a9; } html[data-theme="light"] .rpp-vio-badge-amber { background: #fff7ed; color: #c2410c; border-color: #fdba74; } /* ── Chat image-attachment letterbox (request-chat-client). The wrapper around a contained photo had an inline #0e0e0e backdrop that stayed a dark frame on the cream thread. Dark base = the prior inline; light flips to a cream letterbox. */ .rpp-msg-img { background: #0e0e0e; border: 1px solid #2a2a2a; } html[data-theme="light"] .rpp-msg-img { background: #F4F1E9; border-color: #ECE7DC; } /* ── "Update available" refresh toast (rpp-version-watcher .rpp-update-pill). A fixed slate-gradient pill with a gold border + light text. Its bg/border/ color are all set inline (the .rpp-update-pill class previously had no rule), so dark stays byte-identical from the inline. Light flips it to a cream pill with dark ink so it isn't a dark slab on cream — !important beats the inline background/color/border on the light side only. ── */ html[data-theme="light"] .rpp-update-pill { background: #FFFFFF !important; color: #1A1A1A !important; border-color: rgba(184,148,31,0.55) !important; } /* ════════════════════════════════════════════════════════════════════════ GUEST FLOW REDESIGN (2026-07-02) — enter-plate module, duration chips, skeleton loaders, refined stay + edit cards, animated modal shell. Motion is applied in the components (motion/react); this is the static skin. Dark values are the default; html[data-theme="light"] overrides below. Gold #ccac28 is theme-stable. prefers-reduced-motion is honored by the global backstop (globals.css) + useReducedMotion in the components. ════════════════════════════════════════════════════════════════════════ */ /* ── Animated modal shell — when RppModalPortal drives the card with motion, neutralize the CSS pop-in so the two don't fight. ── */ .ga-modal.rpp-modal-animated { animation: none !important; } /* ── Guest Vehicle Module (the primary enter-plate path) ── */ .rpp-gvm { display: block; } .rpp-gvm-plate { margin-bottom: 14px; } .rpp-gvm-plate-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .rpp-gvm-carmark { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #1a1500; border: 1px solid #4a3d0a; color: #ccac28; } .rpp-gvm-plate-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; } .rpp-gvm-remove { margin-left: auto; background: none; border: none; padding: 6px 4px; font-size: 12px; font-weight: 700; color: #f87171; } .rpp-gvm-remove:hover { opacity: .8; } .rpp-gvm-remove:focus-visible { outline: 2px solid #ccac28; outline-offset: 2px; border-radius: 6px; } /* Add-another-vehicle — dashed gold-tint affordance. */ .rpp-gvm-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-bottom: 18px; background: transparent; border: 1.5px dashed #4a3d0a; border-radius: 12px; color: #ccac28; font-size: 13px; font-weight: 700; transition: border-color .15s, background .15s; } .rpp-gvm-add:hover { border-color: #ccac28; background: #14110a; } .rpp-gvm-add:focus-visible { outline: 2px solid #ccac28; outline-offset: 2px; } .rpp-gvm-add-plus { font-size: 18px; line-height: 1; } .rpp-gvm-capnote { font-size: 12px; margin: 0 0 18px; } .rpp-gvm-when { margin-bottom: 8px; } /* ── Duration chip group (segmented, ≥44px hit targets) ── */ .rpp-chipgroup { display: flex; flex-wrap: wrap; gap: 8px; } .rpp-durchip { flex: 1 1 auto; min-width: 62px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; letter-spacing: .01em; background: #141414; border: 1.5px solid #2f2f2f; color: #cbd5e1; transition: border-color .28s var(--rpp-ease), background .28s var(--rpp-ease), color .28s var(--rpp-ease), box-shadow .28s var(--rpp-ease), transform .28s var(--rpp-ease); } /* Duration chips are ACTIONS — hover lifts + glows; the selected chip blooms gold. The dark :hover ink (#f1f5f9) is re-tuned in the light block below — near-white on cream would be the classic light-mode footgun. */ @media (hover: hover) { .rpp-durchip:hover { border-color: #4a4a4a; color: #f1f5f9; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(0,0,0,0.75); } .rpp-durchip.is-active:hover { box-shadow: 0 10px 22px -6px rgba(204,172,40,0.55); } } .rpp-durchip:active { transform: scale(0.94); } .rpp-durchip:focus-visible { outline: 2px solid #ccac28; outline-offset: 2px; } .rpp-durchip.is-active { background: #ccac28; border-color: #ccac28; color: #0e0e0e; box-shadow: 0 2px 8px -2px rgba(204,172,40,0.4); } .rpp-gvm-pickers { margin-top: 14px; } /* ── Live running total (accent panel) ── */ .rpp-gvm-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 16px; padding: 12px 14px; border-radius: 12px; background: #14110a; border: 1px solid #4a3d0a; } .rpp-gvm-total-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; } .rpp-gvm-total-value { font-size: 17px; font-weight: 800; color: #ccac28; letter-spacing: .01em; margin-left: auto; } .rpp-gvm-total-mult { color: #94a3b8; font-weight: 700; } .rpp-gvm-total-usage { flex-basis: 100%; font-size: 12px; color: #94a3b8; } .rpp-gvm-submit { min-height: 48px; } /* ── Secondary (share-link) callout inside the add modal ── */ .rpp-gvm-secondary { margin-top: 16px; padding: 14px 16px; border-radius: 10px; border: 1px solid #2a2a2a; background: #141414; } .rpp-gvm-secondary-title { font-size: 13px; font-weight: 700; color: #ccac28; margin-bottom: 6px; } .rpp-gvm-secondary-body { font-size: 12px; color: #94a3b8; margin-bottom: 10px; line-height: 1.5; } .rpp-gvm-sharehead { font-size: 15px; font-weight: 800; margin-bottom: 4px; } .rpp-gvm-sharesub { font-size: 13px; margin-bottom: 14px; line-height: 1.5; } /* ── Refined guest stay card bits ── */ .rpp-guest-plate-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .rpp-guest-plate-glyph { color: #94a3b8; } .rpp-guest-plate-state { font-size: 12px; letter-spacing: 0; } .rpp-guest-note { font-size: 12px; margin-top: 6px; } .rpp-guest-safelisted { font-size: 11px; color: #4ade80; margin-top: 6px; } html[data-theme="light"] .rpp-guest-safelisted { color: #15803d; } /* ── Edit-stay modal plate hero ── */ .rpp-edit-plate { display: flex; align-items: center; gap: 8px; font-family: monospace, monospace; font-weight: 800; letter-spacing: .06em; font-size: 15px; color: #f1f5f9; margin-bottom: 16px; } .rpp-edit-plate-glyph { color: #94a3b8; } html[data-theme="light"] .rpp-edit-plate { color: #1A1A1A; } /* ── Skeleton loaders (shimmer; static under reduced-motion via globals) ── */ @keyframes rpp-skel-shimmer { to { background-position: -200% 0; } } .rpp-skel { border-radius: 12px; background: linear-gradient(90deg, #161616 25%, #202020 37%, #161616 63%); background-size: 200% 100%; animation: rpp-skel-shimmer 1.4s ease-in-out infinite; } .rpp-skel-guestcode { height: 128px; margin-bottom: 20px; border: 1px solid #2a2410; } .rpp-skel-cta { height: 52px; margin-bottom: 16px; } .rpp-skel-card { height: 96px; margin-bottom: 12px; } html[data-theme="light"] .rpp-skel { background: linear-gradient(90deg, #F1ECE0 25%, #FAF7EF 37%, #F1ECE0 63%); background-size: 200% 100%; } html[data-theme="light"] .rpp-skel-guestcode { border-color: #E4D7A8; } /* ── Light-theme overrides for the guest-flow redesign ── */ html[data-theme="light"] .rpp-gvm-carmark { background: #FBF4DC; border-color: #E4D7A8; color: #B8941F; } html[data-theme="light"] .rpp-gvm-plate-label { color: #5C5648; } html[data-theme="light"] .rpp-gvm-remove { color: #dc2626; } html[data-theme="light"] .rpp-gvm-add { border-color: #E4D7A8; color: #7a5c00; } html[data-theme="light"] .rpp-gvm-add:hover { border-color: #ccac28; background: #FBF8EE; } html[data-theme="light"] .rpp-durchip { background: #FFFFFF; border-color: #DED7C7; color: #1A1A1A; } html[data-theme="light"] .rpp-durchip:hover { border-color: #C9BFA8; color: #1A1A1A; } /* Cream-tuned chip / slot glows (the dark casts above are far too heavy on #FAF8F3). */ @media (hover: hover) { html[data-theme="light"] .rpp-durchip:hover { box-shadow: 0 8px 18px -10px rgba(0,0,0,0.22); } html[data-theme="light"] .rpp-durchip.is-active:hover { box-shadow: 0 10px 22px -6px rgba(184,148,31,0.45); } html[data-theme="light"] .rpp-register-slot:hover { box-shadow: 0 10px 24px -10px rgba(34,197,94,0.32); } html[data-theme="light"] .rpp-register-slot.rpp-slot-locked:hover { box-shadow: 0 10px 24px -12px rgba(0,0,0,0.2); } html[data-theme="light"] .rpp-add-guest:hover { box-shadow: 0 14px 30px -8px rgba(184,148,31,0.5), 0 2px 6px rgba(0,0,0,0.12); } } html[data-theme="light"] .rpp-durchip.is-active { background: #ccac28; border-color: #B8941F; color: #1A1A1A; } html[data-theme="light"] .rpp-gvm-total { background: #FBF4DC; border-color: #E4D7A8; } html[data-theme="light"] .rpp-gvm-total-label { color: #5C5648; } html[data-theme="light"] .rpp-gvm-total-value { color: #7a5c00; } html[data-theme="light"] .rpp-gvm-total-mult { color: #5C5648; } html[data-theme="light"] .rpp-gvm-total-usage { color: #5C5648; } html[data-theme="light"] .rpp-gvm-secondary { background: #F4F1E9; border-color: #ECE7DC; } html[data-theme="light"] .rpp-gvm-secondary-title { color: #7a5c00; } html[data-theme="light"] .rpp-gvm-secondary-body { color: #5C5648; } html[data-theme="light"] .rpp-guest-plate-glyph { color: #5C5648; } html[data-theme="light"] .rpp-edit-plate-glyph { color: #5C5648; } /* ════════════════════════════════════════════════════════════════════════ LIQUID GLASS — ACCESSIBILITY FALLBACKS (goldgar-ui-simplify Rule 3) The Regular-variant glass on .rpp-bottom-tabs (persistent nav) and .ga-modal (shared modal shell) MUST degrade to a SOLID, on-brand surface when the user asks for reduced transparency or increased contrast — a Rule 3 hard requirement. globals.css ships these swaps for the admin .glass-chrome utility, but the RPP paints glass inline on its OWN classes (isolated palette), so the swaps are re-declared here in RPP's colors. Reduced-MOTION is already covered app-wide by the universal backstop in globals.css and the useReducedMotion path in RppModalPortal, so it is deliberately NOT repeated here. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-transparency: reduce) { .rpp-bottom-tabs { background-color: #111; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .ga-modal { background-color: #1a1a1a; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="light"] .rpp-bottom-tabs { background-color: #FFFFFF; } html[data-theme="light"] .ga-modal { background-color: #FFFFFF; } } @media (prefers-contrast: more) { .rpp-bottom-tabs { background-color: #0a0a0a; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: #3a3a3a; } .ga-modal { background-color: #141414; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #4a4a4a; } html[data-theme="light"] .rpp-bottom-tabs { background-color: #FFFFFF; border-top-color: #C9BFA8; } html[data-theme="light"] .ga-modal { background-color: #FFFFFF; border-color: #C9BFA8; } } /* ════════════════════════════════════════════════════════════════════════ REDUCED MOTION — the RPP's own hard no-op (NOT optional) ════════════════════════════════════════════════════════════════════════ globals.css ships an app-wide backstop, but it only clamps animation/ transition DURATION to 0.01ms. That is NOT sufficient for this pass: a ~0s transition still APPLIES its end state, so every hover-lift, press-scale and icon-lift added here would still visibly jump the element — it would just jump instantly instead of gliding. This block kills the transform itself, so RPP motion genuinely collapses to nothing. The star (*) rules are anchored to BOTH roots because the modal overlay is portaled to , OUTSIDE .rpp-root. The transform kills are written unprefixed: every class named is RPP-only, and this stylesheet is ONLY ever injected by the /rpp layout, so it can never reach a PCC route. Colour, shadow and opacity feedback are deliberately KEPT. Reduced-motion means no MOVEMENT — it does not mean stripping the only cue that a control is interactive (that would trade one a11y win for a worse one). ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .rpp-root *, .rpp-root *::before, .rpp-root *::after, .ga-modal-overlay *, .ga-modal-overlay *::before, .ga-modal-overlay *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Every transform this sheet introduces, neutralised at the source. Enumerated rather than a blanket star-hover transform:none, so that a legitimate STATIC transform on some hovered descendant is never collateral damage. */ .ga-btn:hover, .ga-btn:active, .ga-vehicle-card:hover, .rpp-guest-card:hover, .rpp-stat:hover, .rpp-list-row:hover, .rpp-list-row:active, .rpp-add-guest:hover, .rpp-add-guest:active, .rpp-register-slot:hover, .rpp-register-slot:active, .rpp-durchip:hover, .rpp-durchip:active, .rpp-chat-bubble:hover, .rpp-modal-close:hover, .rpp-modal-close:active, .rpp-install-pill:hover, .rpp-install-pill:active, .rpp-bottom-tab:active, .rpp-bottom-tab.rpp-tab-active .ga-tab-icon { transform: none !important; } /* The chat-bubble entrance keyframe is movement too. (The sliding tab/nav pill and the page cross-fade are motion/react, not CSS — they are zeroed in rpp-chrome.tsx via useReducedMotion(): tween duration 0 + initial={false}.) */ .rpp-chat-bubble { animation: none !important; } }

Resident Parking Platform