/* ============================================================================ PRIVATE SELLER — NAV CONSISTENCY & STICKY FOOTER (single source of truth) File: wwwroot/css/private-seller-nav-consistency.css Load: DEAD LAST among private-seller styles — immediately AFTER private-seller-mobile-redesign.css in Index.cshtml's @section Styles. ---------------------------------------------------------------------------- WHY THIS FILE EXISTS The Back / Continue footer was inconsistent across the journey because its appearance and position were spread over many stylesheets that loaded in a fragile order and fought each other on specificity: • Appearance (glass pills) lived in list-scene.css scoped to `#leftPanel.list-mode .ps-btn-back/.ps-btn-next` (1,2,0) and excluded the disabled state with `:not(:disabled)`. DNA-scene layout rules at `.ps-scene#psScene2 .ps-nav-dna .ps-btn-*` (1,3,0) out-specified it, so Scenes 3/4 fell back to the base solid/plain buttons. • Sticky-bottom positioning lived in private-seller-mobile-redesign.css but was only ever written for Scenes 1, 2 and 3 (#psScene0/1/2). Scenes 6, 7, 8 and the auth scene had NO sticky rule, so their footers floated mid-column on short content and scrolled away on long content. The base "FIX 2" rule `.ps-nav { margin-top:12px !important }` in private-seller.css actively defeats the `margin-top:auto` those scenes need. This file replaces that scattered behaviour with ONE authoritative, scene-agnostic system, scoped to `#psModuleRoot` (always present, wraps the whole carousel) so it works in every tab and never depends on `.list-mode` or the disabled state. Every footer in the journey now: 1. pins to the bottom of its scene's scroll column (sticky + margin:auto), 2. paints a transparent row so the scene reads through, 3. renders the SAME glass Back pill + tinted-dark Continue pill, 4. keeps a clearly-primary coloured CTA on phones for tap clarity. Covered footers / button families: .ps-nav (Scenes 1,2,6,7,8,auth, core-identity) .ps-nav-dna (Scene 3 — DNA, scene-level child) .ps-workbench-foot (Scene 4 — Value Intelligence) buttons: .ps-btn-back .ps-btn-next .ps-btn-launch .ps-btn-ghost .ps-btn-orb ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════ 1. STICKY-BOTTOM FOOTER — MOBILE ONLY (≤768px) ------------------------------------------------------------------------ IMPORTANT: scoped to ≤768px. Desktop footer positioning is left exactly as the original per-scene stylesheets define it (the reported floating-footer problem was mobile-only; desktop was already correct). On mobile, the scene's `.ps-left` is a flex column with a definite height (the carousel slot). `margin-top:auto` makes the footer absorb all free space and sit at the very bottom; when content overflows, the auto-margin resolves to 0 and the column scrolls with the footer pinned via position:sticky. This is the Scene-5 benchmark pattern, applied to the scenes that lacked it. We out-specify the base `.ps-nav { margin-top:12px !important }`. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene > .ps-left { display: flex !important; flex-direction: column !important; min-height: 0 !important; } body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene > .ps-left > .ps-nav, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene > .ps-left > .ps-nav-dna, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene > .ps-left > .ps-workbench-foot { position: -webkit-sticky !important; position: sticky !important; bottom: 0 !important; margin-top: auto !important; /* pin to the column floor (defeats FIX 2) */ flex: 0 0 auto !important; /* never shrink */ z-index: 40 !important; /* below open dropdowns (≥9000) */ /* Transparent row so the animated scene reads through behind the pills. */ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top: 1px solid rgba(15, 23, 42, 0.06) !important; box-shadow: none !important; padding-top: 10px !important; padding-bottom: 6px !important; } /* Reset legacy bottom-padding that older rules added to "reserve space" for a previously fixed/absolute footer — with margin-top:auto it only shoves the footer up. Applies to the scenes whose nav lives in .ps-left. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene5 > .ps-left, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene6 > .ps-left, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene7 > .ps-left, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene8 > .ps-left, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene9 > .ps-left { padding-bottom: 0 !important; } } /* DNA scene (#psScene2): its nav `.ps-nav-dna` is a SCENE-level child, not a `.ps-left` child, and the scene already switches to a flex column + bottom- pinned nav on mobile via private-seller.css (and stays a two-column ROW on desktop). We deliberately DO NOT touch the DNA scene's flex-direction or the DNA nav's position — doing so would force the desktop two-column layout into a single column. The DNA footer only needs the mobile BUTTON treatment (§2). */ /* ════════════════════════════════════════════════════════════════════════ 2. CANONICAL BUTTON SYSTEM — MOBILE ONLY (≤768px) ------------------------------------------------------------------------ IMPORTANT: this entire block is scoped to ≤768px. Desktop button styling is left EXACTLY as the original per-scene stylesheets define it (small dark Continue, etc.) — the reported issue was mobile-only and desktop was already correct, so we must not touch it. On mobile the journey's footers use five button classes across five per-scene stylesheets, each with its own fill/shape/size: .ps-btn-back .ps-btn-next (Scenes 1,2,3,6,7, core-identity, auth) .ps-btn-launch (Scene 8) .ps-btn-ghost .ps-btn-orb (Scene 4 — and #psScene3 .ps-btn-ghost in private-seller-scene4-mobile.css forces a SOLID-WHITE square/circle Back, the main inconsistency the screenshots showed). On mobile we collapse them all into TWO canonical pills: • BACK → frosted-white pill, clearly visible border, label always shown. • PRIMARY→ solid brand-orange pill (Continue / Launch / Orb). SPECIFICITY: per-scene overrides reach (1,1,0) / (1,3,0); every selector here adds a `.ps-scene` step (→ (1,4,0)+) so it wins inside the media query. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Shared geometry for ALL footer buttons (identical pill on every scene). */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-back, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-next, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-launch, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav-dna .ps-btn-back, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav-dna .ps-btn-next, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-ghost, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-orb { border-radius: 999px !important; /* identical pill on every scene */ min-height: 46px !important; padding: 11px 22px !important; font-size: 0.9rem !important; font-weight: 700 !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; transition: background 0.2s ease, border-color 0.2s ease !important; } /* The Scene-4 Back label is hidden on tiny phones by scene4-mobile.css, which shrinks it to a square. Force the label back so Back always reads as a text pill, consistent with every other scene. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-ghost span { display: inline !important; } /* ── BACK / secondary — frosted-white pill, clearly visible ─────────── */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-back, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav-dna .ps-btn-back, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-ghost { flex: 0 0 auto !important; background: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: saturate(125%) blur(8px) !important; backdrop-filter: saturate(125%) blur(8px) !important; border: 1.5px solid rgba(26, 29, 32, 0.14) !important; color: #1A1D20 !important; box-shadow: none !important; } body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-back:hover, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav-dna .ps-btn-back:hover, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-ghost:hover { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(26, 29, 32, 0.22) !important; } /* ── PRIMARY — solid brand-orange pill (Continue / Launch / Orb) ────── */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-next:not(:disabled), body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav-dna .ps-btn-next:not(:disabled), body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-launch:not(:disabled), body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-orb:not(:disabled) { flex: 1 1 auto !important; background: linear-gradient(135deg, var(--sj-orange, #F58220) 0%, #E86810 100%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 6px 18px -4px rgba(245, 130, 32, 0.45) !important; } /* Neutralise the orb's decorative glow pseudo-layers so the primary reads as one clean orange pill. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-orb::before, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-orb::after { background: transparent !important; box-shadow: none !important; opacity: 0 !important; } body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-next:not(:disabled):hover, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav-dna .ps-btn-next:not(:disabled):hover, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-launch:not(:disabled):hover, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-orb:not(:disabled):hover { background: linear-gradient(135deg, #F58220 0%, #D96B10 100%) !important; } /* ── PRIMARY (disabled) — muted, clearly inert, SAME pill shape ─────── */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-next:disabled, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-nav .ps-btn-launch:disabled, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene .ps-workbench-foot .ps-btn-orb:disabled { flex: 1 1 auto !important; background: rgba(26, 29, 32, 0.10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: rgba(26, 29, 32, 0.40) !important; border: 0 !important; box-shadow: none !important; } } /* ════════════════════════════════════════════════════════════════════════ 4. SCENE 6 (Pricing) — keep the ".00" cents glued to the amount on mobile ------------------------------------------------------------------------ The price field uses a mirror technique: an invisible `.ps-price-mirror-text` reserves the exact width of the typed amount, and the muted `.ps-price-cents- ghost` (".00") sits immediately after it. For the ghost to land flush against the last digit, `.ps-price-mirror` MUST share the input's padding + font metrics. The base rule matches them (18px/52px, 1.3rem) — but the mobile rules in private-seller.css shrink ONLY `.ps-price-input` (≤768px → 14px/48px, 1rem; ≤480px → 12px/42px, 0.95rem) and never update the mirror, so the reserved width diverges and the ".00" drifts away from the number. We mirror those exact metrics here so they stay glued at every width. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-price-mirror { padding: 14px 14px 14px 48px !important; /* MUST match .ps-price-input ≤768 */ font-size: 1rem !important; } } @media (max-width: 480px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-price-mirror { padding: 12px 12px 12px 42px !important; /* MUST match .ps-price-input ≤480 */ font-size: 0.95rem !important; } } /* The ghost must not add its own gap; it is a plain inline run right after the width-reserving mirror text. (Defensive — guards against any inherited margin/letter-spacing that could re-introduce a gap.) */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-price-cents-ghost { margin: 0 !important; padding: 0 !important; letter-spacing: -0.01em !important; /* match the input's tracking */ } /* ════════════════════════════════════════════════════════════════════════ 5. SIGN-IN / REGISTER scene (.ps-scene-auth-v2) — transparent form + nav ------------------------------------------------------------------------ • The form card `.ps-auth-v2-stack` was solid white (background:#fff in ps-batch34-fixes.css). Make it a translucent glass panel so the animated scene reads through, consistent with the rest of the journey on the List tab — while keeping the inputs legible (they keep their own fills). • The scene's footer `.ps-nav` (Back + Continue) is already pinned by §1 (its nav lives inside `.ps-left`). We additionally guarantee the auth scene's `.ps-left` is a flex column so the sticky footer has a definite column to pin against, and is scrollable so a tall form never hides the footer — this is why Back/Continue were missing on mobile. ════════════════════════════════════════════════════════════════════════ */ /* The auth form (Google + divider + tabs + two stacked forms + legal) is tall. On mobile, auth-center-fix.css sets `.ps-left { overflow:hidden }`, which clips the column and pushes the Back/Continue nav off-screen — that is why the auth scene appeared to have NO nav on phones. Make the column SCROLLABLE on mobile so the form scrolls while the sticky nav stays pinned to the column bottom. Scoped to ≤900px (the breakpoint auth-center-fix uses) and out-specified by the #psModuleRoot id so it beats auth-center-fix's (0,2,0)!important rule. Desktop is left exactly as auth-center-fix tuned it (2-col form, no scroll). */ @media (max-width: 900px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 > .ps-left { display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 0 !important; } /* Nav pinned to the bottom of the scrolling column, with an opaque→fade backing so the scrolling form reads cleanly beneath it. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 > .ps-left > .ps-nav { position: -webkit-sticky !important; position: sticky !important; bottom: 0 !important; margin-top: auto !important; flex: 0 0 auto !important; z-index: 45 !important; padding: 12px 0 max(12px, env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 34%, #ffffff 100%) !important; border-top: 1px solid rgba(15, 23, 42, 0.06) !important; } } /* Much more transparent glass form card so the animated scene clearly reads through — only the INPUTS stand out with a near-opaque fill, matching how the other scenes treat their fields. The Google button, tabs and divider get a light translucent treatment too so the card reads as one cohesive glass panel rather than a stack of solid white blocks. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 .ps-auth-v2-stack { background: rgba(255, 255, 255, 0.22) !important; -webkit-backdrop-filter: saturate(125%) blur(12px) !important; backdrop-filter: saturate(125%) blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 10px 30px rgba(26, 29, 32, 0.07) !important; } /* Google button + tab strip: translucent, not solid white. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 .ps-auth-v2-google, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 .ps-auth-v2-tabs { background: rgba(255, 255, 255, 0.40) !important; border-color: rgba(255, 255, 255, 0.55) !important; } body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 .ps-auth-v2-tab.is-active { background: rgba(255, 255, 255, 0.85) !important; /* active tab reads clearly */ } /* INPUTS are the only colour-standout surfaces — near-opaque + crisp. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-auth-v2 .ps-auth-v2-field input { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(26, 29, 32, 0.12) !important; } /* ════════════════════════════════════════════════════════════════════════ 6. FIRST-SCENE FLICKER FIX — no entry animation, no ghost neighbour ------------------------------------------------------------------------ The flash on first mount came from the `psFadeUp` ENTRY ANIMATION: the first scene's left-column children start at opacity:0 / translateY and fade in, and because goToScene re-stamps `.ps-scene-enter`, that reveal can replay and read as a flash — made worse by the neighbouring `.ps-scene-near` card painting for one frame before the carousel is clipped. Fix (simple + reliable, no JS timing games): (a) PERMANENTLY disable the entry animation on the FIRST scene (#psScene0). It is the landing scene and needs no entrance reveal; killing it removes the flash at the source. Other scenes keep their entrance animation. (b) A lightweight boot guard (the `is-booting` class, removed after the first paint by the init script) hard-hides only the NON-active scenes so no neighbour bleeds in on frame 1. We do NOT toggle opacity on the active scene (that toggle was itself causing a visible repaint on release) — the active scene is simply always visible. ════════════════════════════════════════════════════════════════════════ */ /* (a) First scene never runs the fade-up entrance (kills the flash at source). */ body:not([data-pa-flow="agent"]) #psModuleRoot #psScene0.ps-scene-enter .ps-left > *, body:not([data-pa-flow="agent"]) #psModuleRoot #psScene0 .ps-left > * { animation: none !important; opacity: 1 !important; transform: none !important; } /* (b) Boot guard — freeze the track transition and hide non-active scenes for the first paint frames only. No opacity work on the active scene. */ body:not([data-pa-flow="agent"]) #psModuleRoot.is-booting .ps-viewport { overflow: hidden !important; } /* Also clip the module root itself during boot. A non-active scene that is momentarily mis-positioned (e.g. the payment scaffold #psScene10 before the carousel transform settles) was able to paint OUTSIDE the .ps-viewport clip for one frame — read as the "256-bit SSL / 3-D Secure card flashes then jumps to the middle" ghost. Clipping the root closes that escape hatch. */ body:not([data-pa-flow="agent"]) #psModuleRoot.is-booting { overflow: hidden !important; } body:not([data-pa-flow="agent"]) #psModuleRoot.is-booting .ps-track { transition: none !important; } body:not([data-pa-flow="agent"]) #psModuleRoot.is-booting .ps-scene:not(.ps-scene-active) { visibility: hidden !important; content-visibility: hidden !important; /* Belt-and-braces: if .ps-scene-active has not yet been stamped on the landing scene when the very first frame paints, visibility:hidden alone can miss a scene that briefly sits at translateX(0). opacity:0 on EVERY non-active scene during boot guarantees nothing bleeds through. This is scoped to the boot window only — steady-state windowing/transitions are untouched, so the previously-fixed "repaint on release" does not return (the ACTIVE scene is never given an opacity transition here). */ opacity: 0 !important; pointer-events: none !important; } /* ════════════════════════════════════════════════════════════════════════ 7. SCENE 8 (Listing Package, #psScene7) — sticky footer on mobile ------------------------------------------------------------------------ launch-card-redesign.css makes the SCENE scroll on ≤900px and explicitly sets the nav to `position:static; margin-top:0` (it had reverted an earlier sticky attempt that "overlapped the card"). Per the requirement the Back/ Continue must stay pinned to the bottom while the scene scrolls. The nav is the last child of `.ps-left`, which on mobile is `display:block; overflow:visible` inside the scrolling `.ps-scene#psScene7`. `position:sticky` resolves against the nearest scrolling ancestor (the scene), so bottom:0 pins the bar to the scene's viewport bottom while the "What you've captured" rail scrolls underneath. We give it an opaque→fade backing so scrolling content reads cleanly under it, and add scroll-padding so the last item clears it. Higher specificity than launch-card's `.ps-scene#psScene7 > .ps-left > .ps-nav` (1,3,0)!important is reached with the #psModuleRoot id prefix (2,3,0). ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene7 { scroll-padding-bottom: 84px !important; } body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene7 > .ps-left > .ps-nav { position: -webkit-sticky !important; position: sticky !important; bottom: 0 !important; margin-top: 8px !important; z-index: 45 !important; /* above the right-rail preview */ padding: 12px 14px max(12px, env(safe-area-inset-bottom)) 14px !important; /* Opaque backing so the scrolling preview reads cleanly underneath. */ background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 32%, #ffffff 100%) !important; border-top: 1px solid rgba(15, 23, 42, 0.06) !important; } /* The right rail ("What you've captured") gets bottom breathing room so its final row isn't trapped permanently under the pinned bar. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene#psScene7 > #psRight7.ps-right { padding-bottom: 88px !important; } } /* ════════════════════════════════════════════════════════════════════════ 8. BREADCRUMB — smaller on mobile so the full trail fits (no truncation) ------------------------------------------------------------------------ The trail "Category › Subtype — Scene" is 0.8rem with no mobile reduction, so on narrow phones the scene segment was clipped ("DNA Bu…", "Listing …"). Shrink the whole trail on phones; the existing ellipsis logic then rarely needs to fire, and when it does it has more room. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-breadcrumb, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-breadcrumb--v2, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-trail { font-size: 0.68rem !important; } body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-trail .ps-breadcrumb-text, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-cat, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-sub, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-scene { font-size: 1em !important; /* inherit the reduced trail size */ } /* The "Change Role" swap chip stays compact and never steals trail width. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-changerole { flex: 0 0 auto !important; } } @media (max-width: 400px) { body:not([data-pa-flow="agent"]) #psModuleRoot .ps-breadcrumb, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-breadcrumb--v2, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-crumb-trail { font-size: 0.62rem !important; } } /* ════════════════════════════════════════════════════════════════════════ 9. CORE IDENTITY (#psScene8, .ps-scene-identity) — more transparent cards ------------------------------------------------------------------------ The section cards were rgba(255,255,255,0.55). Per the request, lower the alpha so more of the journey backdrop reads through, while INPUTS stay near-opaque so they remain the legible, colour-standout elements (matching the other scenes). Buttons are handled by §2/§3 (canonical pills). ════════════════════════════════════════════════════════════════════════ */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity .ps-id-row, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity #peEntitySection, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity #psIdCompanySection { background: rgba(255, 255, 255, 0.38) !important; border-color: rgba(255, 255, 255, 0.45) !important; } /* Inputs/selects stay near-opaque — the only colour-standout surfaces. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity .ps-id-input, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity .ps-id-dial-select, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity .pe-input, body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity .pe-select { background: rgba(255, 255, 255, 0.94) !important; } /* The contact/WhatsApp highlighted question row keeps its faint orange tint but a touch lighter so it doesn't read as a solid block over the lighter cards. */ body:not([data-pa-flow="agent"]) #psModuleRoot .ps-scene-identity .ps-id-question-row { background: rgba(245, 130, 32, 0.05) !important; }