/* 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 { /* The portal's own role in the font pack — src/lib/fonts.ts, FONT.rpp. Declared here as the token so restyling the portal is one edit there. */ font-family: var(--gg-font-rpp, -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 { /* No top ramp (2026-07-29). Same species as the PCC card's 180deg specular wash — gentler at 0.025, but it is still paint ACROSS the face rather than light on the EDGE, and the two surfaces have to read as one material. The lit rim in the shared card box-shadow below does this job now. */ background: #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; } .ga-badge-purple { background: #2a1035; color: #c084fc; } /* ── 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; /* Comfortable tap target (Apple HIG / WCAG 2.5.5). Padding alone lands just under 44px, and .ga-btn-sm's tighter padding lands well under — min-height guarantees it for both (sm is always used alongside .ga-btn). */ min-height: 44px; 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: var(--gg-font-plate); } .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 (owner 2026-08-14 modal unification — supersedes the 2026-07-14 "no hue on dark glass" ruling for MODALS): every modal app-wide carries a TINY brand-gold film, dark included ("the proper color in dark theme too"). The 07-14 mud was an 11% film; this is gold at 5%, warmth without mud, matching the PCC's --modal-tint. The LIGHT override below (html[data-theme="light"] .ga-modal) already carries its gold film. */ .ga-modal { background-color: rgba(18,18,18,0.9); background-image: linear-gradient(0deg, rgba(204,172,40,0.05), rgba(204,172,40,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; } /* Collapse at 620px, not 560 (owner clip report 2026-08-14): .ga-modal renders at zoom 1.1, so a 560–616px viewport still laid out TWO zoomed tracks in a box that only fits one — the right track walked off the modal edge. 620/1.1 ≈ 563 keeps the collapse aligned with the modal's real rendered width. */ @media (max-width: 620px) { .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, hardened 2026-08-14) On phones the datetime-local fields in the add-stay / edit-times / extended-stay forms clipped off the modal's right edge. D17's first pass (min/max-width only, "no appearance reset") was not enough on iOS: WebKit lays out a NATIVE-appearance datetime control at its intrinsic width and min-width:0 cannot shrink the control's shadow content. The owner still saw the clip on device (2026-08-14). The standard, definitive iOS fix is the appearance reset — the value keeps rendering through the ::-webkit-date-and-time-value pseudo (styled below; iOS-only, Chromium ignores it and keeps its segmented editor), and tapping still opens the native picker. display:flex + align-items keeps the value vertically centered once the native chrome is gone. */ .ga-input[type="datetime-local"], .ga-input[type="date"], .ga-input[type="time"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; } .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; margin: 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; } /* Secondary actions on the login card. Everything that is not "sign in" is one of these: a text link, never a competing full-width button. Rendered as a real

Resident Parking Platform