/* ============================================================ PEAK MARKET — Modern Mobile-First UI Overlay Loaded AFTER brand.css and dashboard-layout.css so it wins specificity battles via :root tokens + scoped overrides. Toggle with . ============================================================ */ :root.pm-modern, body.pm-modern { --pm-bg: #0b0f0e; --pm-bg-elev: #131a18; --pm-bg-elev-2: #1a2421; --pm-border: #1f2a27; --pm-text: #ecfdf5; --pm-text-dim: #94a3a0; --pm-text-muted: #6b7672; --pm-accent: #10b981; /* green/teal */ --pm-accent-strong: #059669; --pm-accent-soft: rgba(16, 185, 129, 0.15); --pm-danger: #ef4444; --pm-warn: #f59e0b; --pm-radius: 18px; --pm-radius-sm: 12px; --pm-radius-pill: 999px; --pm-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); --pm-bottom-nav-h: 68px; --pm-topbar-h: 48px; --pm-chip-row-h: 52px; color-scheme: dark; } /* ----------------------------------------------------------- GLOBAL DARK SHELL ----------------------------------------------------------- */ body.pm-modern, body.pm-modern .dash-shell, body.pm-modern .dash-main { background: var(--pm-bg); color: var(--pm-text); } /* ----------------------------------------------------------- SCROLL ARCHITECTURE The fixed top bar (.pm-topbar) and fixed bottom nav (.pm-bottom-nav) are out of flow. The middle area (.dash-content) must be the ONLY scroll container; body must not scroll, otherwise content slides under the fixed bars. To make .dash-content's `overflow-y: auto` actually fire, every ancestor in the flex chain must be height- constrained AND have `min-height: 0` (flex items default to min-height: auto, which prevents shrinking below content size). ----------------------------------------------------------- */ html, body.pm-modern { height: 100%; overflow: hidden; /* lock body, only .dash-content scrolls */ overscroll-behavior: none; } body.pm-modern .dash-shell { height: 100vh; height: 100dvh; /* iOS Safari: avoids URL-bar jump */ min-height: 0; overflow: hidden; margin: 0 auto; } body.pm-modern .dash-main { height: 100%; min-height: 0; display: flex; flex-direction: column; /* Fill the entire viewport width — previously this column was capped at 720px AND pinned to the left with `margin-left: 0 !important`, which left a large blank gutter on the right of the dashboard on any screen wider than 720px. Removing the cap + the left-pin lets the topbar (already fixed left:0/right:0), the scroll content, the sticky chip row (which bleeds -14px to match .dash-content's 14px gutter) and the feed grid all share the same full-width edges. */ margin: 0 auto; width: 100% !important; max-width: none; padding: 0; /* top/bottom clearance moves to .dash-content */ box-sizing: border-box; overflow: hidden; } body.pm-modern .dash-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* iOS momentum scroll */ overscroll-behavior: contain; /* Clear the fixed topbar at the top and the fixed bottom nav at the bottom. The home panel adds its OWN top padding equal to the fixed chip row's height — see `body.pm-modern #panel_home` below — so listings start exactly below the chip row, never under it. Other panels (Search/Chat/Profile/etc.) inherit only the topbar clearance, because they don't have a chip row of their own. */ padding-top: var(--pm-topbar-h); padding-bottom: calc(var(--pm-bottom-nav-h) + 24px); padding-left: 14px; padding-right: 14px; background: var(--pm-bg); } /* HOME-PANEL ONLY: reserve vertical space below the FIXED .feed-header (the category chip row). The chip row is `position: fixed` and sits immediately below the topbar; without this padding the first listing card would render UNDER the chip row. Scoped to `#panel_home` so other panels (Search/Chat/Profile/Notifications/etc.) are unaffected — they render directly under the topbar with no chip-row spacer. */ body.pm-modern #panel_home { padding-top: var(--pm-chip-row-h); } body.pm-modern h1, body.pm-modern h2, body.pm-modern h3, body.pm-modern h4, body.pm-modern p, body.pm-modern label, body.pm-modern span:not(.mkt-badge):not(.shop-card-arrow), body.pm-modern div { color: inherit; } body.pm-modern .pm-input, body.pm-modern input.pm-input, body.pm-modern textarea.pm-input, body.pm-modern select.pm-input { background: var(--pm-bg-elev); color: var(--pm-text); border: 1px solid var(--pm-border); border-radius: var(--pm-radius-sm); } body.pm-modern .pm-input::placeholder { color: var(--pm-text-muted); } body.pm-modern .pm-input:focus { border-color: var(--pm-accent); box-shadow: 0 0 0 3px var(--pm-accent-soft); outline: none; } body.pm-modern .pm-btn { background: var(--pm-accent); color: #042f1f; border: none; border-radius: var(--pm-radius-pill); font-weight: 700; letter-spacing: 0.2px; transition: transform .12s ease, background .15s ease; } body.pm-modern .pm-btn:hover { background: var(--pm-accent-strong); color: #fff; } body.pm-modern .pm-btn:active { transform: scale(0.98); } body.pm-modern .pm-btn--secondary { background: var(--pm-bg-elev-2); color: var(--pm-text); } /* ----------------------------------------------------------- TOP NAV (kept structurally; just re-skinned) ----------------------------------------------------------- */ body.pm-modern .dash-topnav, body.pm-modern .topnav, body.pm-modern .dash-sidebar { background: var(--pm-bg-elev); border-color: var(--pm-border); } body.pm-modern .topnav-btn { background: transparent; color: var(--pm-text-dim); border-radius: var(--pm-radius-pill); } body.pm-modern .topnav-btn:hover { color: var(--pm-text); background: var(--pm-bg-elev-2); } body.pm-modern .topnav-btn.active { color: var(--pm-accent); background: var(--pm-accent-soft); } body.pm-modern .topnav-dropdown { background: var(--pm-bg-elev-2); border: 1px solid var(--pm-border); box-shadow: var(--pm-shadow); border-radius: var(--pm-radius-sm); } body.pm-modern .topnav-dropdown-item { color: var(--pm-text); } body.pm-modern .topnav-dropdown-item:hover { background: var(--pm-accent-soft); color: var(--pm-accent); } /* ----------------------------------------------------------- PANELS ----------------------------------------------------------- */ body.pm-modern .dash-panel, body.pm-modern .dash-profile-panel, body.pm-modern .shop-card, body.pm-modern .dash-shop-panel, body.pm-modern .wizard-card, body.pm-modern .mkt-toolbar, body.pm-modern .dash-panel-header { background: var(--pm-bg-elev); color: var(--pm-text); border-color: var(--pm-border); } body.pm-modern .dash-panel-header h3, body.pm-modern .dash-panel-header h2 { color: var(--pm-text); } body.pm-modern .nav-back-btn { background: var(--pm-bg-elev-2); color: var(--pm-text); border-radius: 50%; /* Drop the leftover green accent border inherited from the light-theme .nav-back-btn--labeled pill. In pm-modern the back control is a dark circle; the green border was never restyled here, so its top edge showed as a thin green arc peeking above the profile/settings cards. */ border: none; } /* ----------------------------------------------------------- FEED / LISTING CARDS (TikTok-style large vertical cards) ----------------------------------------------------------- */ body.pm-modern #mktListingsContainer, body.pm-modern #shopListingsContainer { display: flex; flex-direction: column; gap: 18px; padding: 4px 0; } /* Media-dominant card (Play Store polish): the card is now just the media. The text/actions sit in an absolutely-positioned overlay at the bottom (see .mkt-listing-body) over a gradient scrim — there is NO solid dark body panel below the photo anymore. Background is #000 so any letterbox around a non-cover photo reads as neutral film matte, not a light panel. */ body.pm-modern .mkt-listing-card { position: relative; background: #000; border: 1px solid var(--pm-border); border-radius: var(--pm-radius); overflow: hidden; box-shadow: var(--pm-shadow); } /* Feed card actions row (Home feed) — compact pill, hugs content */ body.pm-modern .feed-card-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; } /* Transparent Chat action (Play Store polish): no filled pill background so the listing media stays fully visible; accent-coloured text + subtle shadow keep it readable and premium-looking. */ body.pm-modern .feed-card-action { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; font-size: 12px; line-height: 1; font-weight: 600; border-radius: var(--pm-radius-pill); border: none; background: transparent; color: var(--pm-accent); cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: color .15s ease, transform .1s ease; min-height: 34px; } body.pm-modern .feed-card-action:hover { color: var(--pm-accent-strong); } body.pm-modern .feed-card-action:active { transform: scale(0.92); } body.pm-modern .feed-card-action svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } body.pm-modern .feed-card-seller { font-weight: 600; color: #e5e7eb; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } body.pm-modern .mkt-listing-thumb { width: 100%; aspect-ratio: 4 / 5; max-height: 520px; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.pm-modern .mkt-listing-thumb img, body.pm-modern .mkt-listing-thumb video { width: 100%; height: 100%; object-fit: cover; } body.pm-modern .mkt-listing-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 14px 14px; display: flex; flex-direction: column; gap: 5px; background: linear-gradient(to top, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.62) 42%, rgba(0,0,0,0.20) 78%, rgba(0,0,0,0) 100%); } body.pm-modern .mkt-listing-title { font-size: 17px; font-weight: 700; color: #ffffff; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,0.75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.pm-modern .mkt-listing-price { font-size: 21px; font-weight: 800; color: var(--pm-accent); text-shadow: 0 1px 4px rgba(0,0,0,0.75); } body.pm-modern .mkt-listing-location { font-size: 13px; color: var(--pm-text-dim); } body.pm-modern .mkt-listing-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } body.pm-modern .mkt-badge { background: var(--pm-bg-elev-2); color: var(--pm-text-dim); border-radius: var(--pm-radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } body.pm-modern .mkt-badge--featured { background: var(--pm-accent); color: #042f1f; } body.pm-modern .mkt-badge--boosted { background: rgba(245, 158, 11, 0.18); color: var(--pm-warn); } /* Category label pills on listing cards. The base rules in dashboard-layout.css give `.feed-badge--category` and `.mkt-badge--category` a near-white (#f0f4ff) background, which renders as an unreadable white pill on the dark shell (e.g. the "Service" pill on the home feed). Force a dark background + readable light text + visible border in dark mode. These are informational labels (not active/inactive toggles), so no green state. */ body.pm-modern .feed-badge--category, body.pm-modern .mkt-badge--category { background: var(--pm-bg-elev-2); color: var(--pm-text); border: 1px solid var(--pm-border); } /* "Request price" pill — replaces the price number on request-price listings (feed cards, market cards, and the detail Price row). Tappable: opens the Contact Seller sheet (or /login for anonymous visitors). */ .mkt-request-price-btn { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--pm-accent, #10b981); background: rgba(16, 185, 129, 0.14); color: var(--pm-accent, #10b981); font-size: 0.85rem; font-weight: 600; line-height: 1.3; cursor: pointer; font-family: inherit; } .mkt-request-price-btn:active { opacity: 0.75; } /* The "boosted" feed pill also uses a near-white (#ecfdf5) base; keep it on theme so it is not another light pill floating on the dark feed. */ body.pm-modern .feed-badge--boosted { background: rgba(16, 185, 129, 0.16); color: var(--pm-accent); } /* The status feed pill base uses the light --pm-surface token; pin it dark. */ body.pm-modern .feed-badge--status { background: var(--pm-bg-elev-2); color: var(--pm-text-dim); border: 1px solid var(--pm-border); } body.pm-modern .mkt-cred-bar { height: 4px; background: var(--pm-bg-elev-2); border-radius: 999px; overflow: hidden; margin-top: 10px; } body.pm-modern .mkt-cred-fill { height: 100%; transition: width .25s ease; } /* Shop cards same dark treatment */ body.pm-modern .mkt-shop-card, body.pm-modern .shop-card { background: var(--pm-bg-elev); border: 1px solid var(--pm-border); border-radius: var(--pm-radius); color: var(--pm-text); } body.pm-modern .mkt-shop-name, body.pm-modern .shop-card-name { color: var(--pm-text); } body.pm-modern .mkt-shop-meta, body.pm-modern .shop-card-category { color: var(--pm-text-dim); } body.pm-modern .mkt-empty { color: var(--pm-text-muted); text-align: center; padding: 32px 12px; } /* ----------------------------------------------------------- FILTER TABS (For You / Cars / Property / Electronics) ----------------------------------------------------------- */ body.pm-modern .shop-filter-tabs, body.pm-modern .pm-filter-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px; scrollbar-width: none; } body.pm-modern .shop-filter-tabs::-webkit-scrollbar, body.pm-modern .pm-filter-tabs::-webkit-scrollbar { display: none; } body.pm-modern .shop-filter-tab, body.pm-modern .pm-filter-tab { background: var(--pm-bg-elev); color: var(--pm-text-dim); border: 1px solid var(--pm-border); padding: 8px 16px; border-radius: var(--pm-radius-pill); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s ease; } body.pm-modern .shop-filter-tab.active, body.pm-modern .pm-filter-tab.active { background: var(--pm-accent); color: #042f1f; border-color: var(--pm-accent); } /* ----------------------------------------------------------- CHAT BUBBLES ----------------------------------------------------------- */ body.pm-modern .chat-msg, body.pm-modern .chat-bubble, body.pm-modern .msg-bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; margin: 4px 0; word-wrap: break-word; } body.pm-modern .chat-msg.sent, body.pm-modern .chat-msg--mine, body.pm-modern .chat-bubble--mine, body.pm-modern .msg-bubble--mine { background: var(--pm-accent); color: #042f1f; margin-left: auto; border-bottom-right-radius: 4px; } body.pm-modern .chat-msg.received, body.pm-modern .chat-msg--theirs, body.pm-modern .chat-bubble--theirs, body.pm-modern .msg-bubble--theirs { background: var(--pm-bg-elev-2); color: var(--pm-text); margin-right: auto; border-bottom-left-radius: 4px; } body.pm-modern .chat-input, body.pm-modern .chat-composer, body.pm-modern .pm-chat-input { background: var(--pm-bg-elev); border-top: 1px solid var(--pm-border); padding: 10px; } body.pm-modern .chat-input input, body.pm-modern .chat-composer input, body.pm-modern .pm-chat-input input { background: var(--pm-bg-elev-2); color: var(--pm-text); border: 1px solid var(--pm-border); border-radius: var(--pm-radius-pill); padding: 10px 14px; } /* Cleaned chat shell: simple top/middle/bottom layout, no big labels. The .chat-list-header dark block has been REMOVED — the single global back arrow lives in `.pm-topbar__back`. The thread view's slim header (avatar + name) is styled in dashboard-layout.css. */ .chat-thread-title { font-size: 16px; font-weight: 600; color: var(--pm-text, #e6f0ea); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; /* Clear the iOS home indicator / Android gesture bar so the composer never tucks behind the system inset. The flex + 100dvh container already keeps it glued above the soft keyboard. */ padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pm-border, #1f2a23); background: #1a2421; } /* The "+" trigger that replaced the three standalone icon buttons. Circular, ghost-styled, big tap target, sitting left of the input. */ .chat-input-bar .chat-plus-btn { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; font-weight: 300; line-height: 1; color: var(--pm-text, #e6f0ea); background: #22302b; border: 1px solid var(--pm-border, #1f2a23); } .chat-input-bar .chat-plus-btn:hover, .chat-input-bar .chat-plus-btn:active { background: #2a3a34; } /* Compact action sheet opened by the "+" button. Pops up just above the composer; dark literal surfaces (var(--pm-surface) is a light global). */ .chat-add-sheet { position: absolute; left: 10px; bottom: 70px; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 232px; padding: 6px; background: #1a2421; border: 1px solid var(--pm-border, #1f2a23); border-radius: 16px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } .chat-add-sheet[hidden] { display: none; } .chat-add-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: none; border-radius: 11px; background: transparent; color: var(--pm-text, #e6f0ea); font-size: 14px; font-family: inherit; text-align: left; cursor: pointer; } .chat-add-item:hover, .chat-add-item:active { background: rgba(255, 255, 255, 0.06); } .chat-add-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; } /* "Sent" indicator on the user's own outgoing bubbles. A single ✓ means the message was persisted to the server. Delivered/read (✓✓) is not shown — it would require per-message receipt tracking (a backend change that is out of scope for this UI pass). */ .chat-msg-status { margin-inline-start: 4px; font-size: 11px; opacity: 0.75; } [dir="rtl"] .chat-add-sheet { left: auto; right: 10px; } .chat-input-bar .chat-input { flex: 1 1 auto; min-width: 0; background: #22302b; color: var(--pm-text, #e6f0ea); border: 1px solid var(--pm-border, #1f2a23); border-radius: 20px; padding: 11px 16px; /* 16px is the magic number that stops iOS Safari auto-zooming the viewport when the user focuses this input. The previous 15px produced a focus-zoom + reflow that frequently knocked the Send button out from under the user's tap on mobile (the classic "tap Send does nothing" symptom). */ font-size: 16px; line-height: 1.4; /* Auto-growing textarea: starts ~one line, grows to a cap, then scrolls. resize:none keeps the drag handle from breaking the mobile layout; JS (pmAutoGrowChatInput) drives the height. */ resize: none; min-height: 46px; max-height: 140px; overflow-y: auto; font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; } .chat-input-bar .chat-input:focus { border-color: var(--pm-accent, #2ecc71); } .chat-send-btn { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--pm-accent, #2ecc71); color: #042f1f; cursor: pointer; padding: 0; transition: opacity 0.15s ease, transform 0.05s ease; } .chat-send-btn:hover { opacity: 0.92; } .chat-send-btn:active { transform: scale(0.96); } /* Subtle empty-state hint — small, light, never dominant. */ .chat-empty-hint { text-align: center; font-size: 13px; font-weight: 400; color: var(--pm-text-muted, #7a8a82); opacity: 0.75; padding: 28px 16px; letter-spacing: 0.01em; } /* RTL: flip the input bar so the send button stays on the trailing edge. */ html[dir="rtl"] .chat-input-bar { direction: rtl; } html[dir="rtl"] .chat-thread-header { direction: rtl; } /* ----------------------------------------------------------- WIZARD (create listing) — softer, more breathable ----------------------------------------------------------- */ body.pm-modern .wizard-overlay { background: rgba(0, 0, 0, 0.7); /* sit above bottom-nav (1000) and topbar (1000) so the wizard reads as a real full-screen modal; bottom-nav onClick still routes the underlying panel because closeWizardIfOpen() in app-modern.js dismisses the overlay before navigating. */ z-index: 1050; } /* Bigger, clearly tappable Back arrow in the wizard header */ body.pm-modern .wizard-header { padding: 14px 14px; gap: 10px; } body.pm-modern .wizard-header .nav-back-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: 999px; background: var(--pm-bg-elev); color: var(--pm-text); border: 1px solid var(--pm-border); } body.pm-modern .wizard-header .nav-back-btn:hover { background: var(--pm-bg-elev-2); color: var(--pm-accent); } body.pm-modern .wizard-card { background: var(--pm-bg); border-radius: var(--pm-radius); } body.pm-modern .wizard-step-title { color: var(--pm-text); font-size: 18px; font-weight: 700; margin: 8px 0 14px; } body.pm-modern .wizard-progress-bar { background: var(--pm-bg-elev-2); height: 4px; border-radius: 999px; } body.pm-modern .wizard-progress-fill { background: var(--pm-accent); height: 100%; border-radius: 999px; } body.pm-modern .dpe-label { color: var(--pm-text-dim); font-size: 13px; font-weight: 600; } /* ----------------------------------------------------------- BOTTOM NAVIGATION (mobile, fixed) ----------------------------------------------------------- */ .pm-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--pm-bottom-nav-h, 68px); background: rgba(11, 15, 14, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--pm-border, #1f2a27); display: flex; align-items: center; justify-content: space-around; z-index: 1000; padding: 6px 8px env(safe-area-inset-bottom); } .pm-bottom-nav__btn { flex: 1; background: none; border: none; color: var(--pm-text-dim, #94a3a0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: color .15s ease; } .pm-bottom-nav__btn { position: relative; } .pm-bottom-nav__btn svg { width: 24px; height: 24px; } .pm-bottom-nav__btn:hover, .pm-bottom-nav__btn.active { color: var(--pm-accent, #10b981); } /* Red unread-count pill on bottom-nav buttons (chat today, can be reused for notifications). Anchored to the top-right of the icon. */ .pm-bottom-nav__badge { position: absolute; top: 2px; left: 50%; transform: translateX(4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--pm-bg, #0b1a14); pointer-events: none; white-space: nowrap; } [dir="rtl"] .pm-bottom-nav__badge { left: auto; right: 50%; transform: translateX(-4px); } .pm-bottom-nav__btn--create { flex: 0 0 auto; width: 56px; height: 56px; margin-top: -22px; background: var(--pm-accent, #10b981); color: #042f1f !important; border-radius: 50%; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); font-size: 0; } .pm-bottom-nav__btn--create svg { width: 28px; height: 28px; } .pm-bottom-nav__btn--create:hover { background: var(--pm-accent-strong, #059669); } /* Profile slot: round avatar (or Peak Market logo fallback) + the user's first name. Sized to match the SVG icons used by the other bottom-nav slots so the row stays vertically aligned. */ .pm-bottom-nav__avatar { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; display: block; background: var(--pm-surface, #f3f4f6); border: 1px solid rgba(0,0,0,0.08); } /* No coloured ring on the active/hover state of the bottom-nav profile avatar. The previous build painted a green border on the 24px circular avatar when the profile slot was active, which read as a "small green circle" in the bottom-right of the screen the moment the user tapped Profile. Per product feedback we keep the avatar visible (image, name, slot intact) but drop the coloured ring entirely. The label below the avatar already turns green via `color: var(--pm-accent)`, which is enough active-state cue. */ /* Truncate the name so a long display name can never push the row out of alignment. The slot still sits as the rightmost button, exactly where "Profile" lived before. */ .pm-bottom-nav__btn--profile > span:not(.pm-bottom-nav__badge) { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ----------------------------------------------------------- PHASE 1 SHELL: hide legacy chrome, show simple top bar + bottom nav as the ONLY primary navigation, at every width. ----------------------------------------------------------- */ body.pm-modern .dash-topnav, body.pm-modern .dash-sidebar { display: none !important; } /* New slim top bar (brand + language) */ .pm-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--pm-topbar-h, 56px); /* SOLID background (was rgba(...,0.92) + backdrop-filter blur). The translucent topbar caused listings scrolling under it to be visible as a blurred image right next to the PEAK MARKET logo. With a fully opaque background the listings disappear cleanly into the bar as they scroll up. */ background: var(--pm-bg, #0b0f0e); border-bottom: 1px solid var(--pm-border, #1f2a27); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 1000; } .pm-topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: var(--pm-text, #eaf3ee); text-transform: uppercase; background: none; border: none; cursor: pointer; padding: 0; } .pm-topbar__brand img { height: 26px; width: auto; display: block; } .pm-topbar__actions { display: flex; align-items: center; gap: 6px; } .pm-topbar__icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--pm-bg-elev-2, #1a2421); border: 1px solid var(--pm-border, #1f2a27); color: var(--pm-text, #eaf3ee); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .pm-topbar__icon-btn:hover { background: var(--pm-accent-soft, #0f3a2c); color: var(--pm-accent, #10b981); } .pm-topbar__icon-btn svg { width: 20px; height: 20px; } /* Anonymous LOGIN button — visible only for logged-out users (body.pm-anonymous is set by dashboard-nav.js applyState). Hidden by default so it never flashes for authed users before the auth probe resolves. */ .pm-topbar__login { display: none; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--pm-accent, #10b981); border: none; color: #06231a; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .15s ease, transform .05s ease; white-space: nowrap; } .pm-topbar__login:hover { filter: brightness(1.06); } .pm-topbar__login:active { transform: scale(.97); } body.pm-anonymous .pm-topbar__login { display: inline-flex; } /* Single GLOBAL back arrow on the left of the top bar. Hidden by default (only shown via the `--visible` modifier when a chat thread / profile / non-Home panel is active). The button keeps its layout space so the brand logo doesn't shift when toggled. */ .pm-topbar__back { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; color: var(--pm-text, #eaf3ee); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 6px; visibility: hidden; opacity: 0; transition: background .15s ease, color .15s ease, opacity .15s ease; } .pm-topbar__back.pm-topbar__back--visible { visibility: visible; opacity: 1; } .pm-topbar__back:hover { background: var(--pm-accent-soft, #0f3a2c); color: var(--pm-accent, #10b981); } .pm-topbar__back svg { width: 22px; height: 22px; display: block; } /* RTL: flip the chevron so it always points "back" in reading order. */ html[dir="rtl"] .pm-topbar__back svg { transform: scaleX(-1); } /* Language quick menu */ .pm-lang-menu { position: fixed; top: calc(var(--pm-topbar-h, 56px) + 6px); right: 12px; background: var(--pm-bg-elev-2, #1a2421); border: 1px solid var(--pm-border, #1f2a27); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); padding: 6px; z-index: 1100; min-width: 160px; display: none; } .pm-lang-menu.open { display: block; } .pm-lang-menu__item { width: 100%; background: none; border: none; color: var(--pm-text, #eaf3ee); text-align: start; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pm-lang-menu__item:hover { background: var(--pm-accent-soft, #0f3a2c); color: var(--pm-accent, #10b981); } .pm-lang-menu__item.active { color: var(--pm-accent, #10b981); } .pm-lang-menu__item .pm-lang-check { opacity: 0; font-weight: 700; } .pm-lang-menu__item.active .pm-lang-check { opacity: 1; } /* RTL niceties for the new top bar */ html[dir="rtl"] .pm-topbar__brand { flex-direction: row-reverse; } html[dir="rtl"] .pm-lang-menu { right: auto; left: 12px; } /* (Removed legacy `@media (min-width:1100px) { .dash-main { max-width:840px } }` — the column is now uncapped and fills the viewport, so the override is a no-op. Kept this comment as a breadcrumb so future readers know the cap was intentionally removed to fix the right-side blank-gutter bug.) */ /* ----------------------------------------------------------- SELLER PROFILE — dark-theme contrast fixes The base rules in dashboard-layout.css give the seller aside a white card (#fff) and the filter pills a white background with `color: inherit`. Under the dark pm-modern shell that renders as light-on-white (stats + filter labels become invisible). These scoped overrides restore readable contrast WITHOUT touching the light-theme defaults. Stats keep their markup order (Listings, Followers, Following) — this is purely visual. ----------------------------------------------------------- */ body.pm-modern .mkt-seller-aside { background: var(--pm-bg-elev); color: var(--pm-text); border: 1px solid var(--pm-border); box-shadow: var(--pm-shadow); } body.pm-modern .mkt-seller-avatar { background: var(--pm-bg-elev-2); } body.pm-modern .mkt-seller-dname { color: var(--pm-text); } body.pm-modern .mkt-seller-type { color: var(--pm-text-dim); opacity: 1; } /* Keep all three stats readable and side-by-side on one row when the card is wide enough; only wrap on an extremely narrow card. */ body.pm-modern .mkt-seller-stats { flex-wrap: nowrap; } body.pm-modern .mkt-seller-stat-num { color: var(--pm-text); } body.pm-modern .mkt-seller-stat-lbl { color: var(--pm-text-dim); opacity: 1; } /* Filter pills are intentionally styled ONCE in dashboard-layout.css with theme-independent literals (dark bg / light text / green active) so there is a single source of truth and no specificity/order conflict between the two stylesheets. Do not re-add a pm-modern filter override here. */ /* Category dropdown + empty-state contrast on the dark page. */ body.pm-modern .mkt-seller-cat { background: var(--pm-bg-elev-2); color: var(--pm-text); border: 1px solid var(--pm-border); } body.pm-modern .mkt-empty { color: var(--pm-text-dim); } /* RTL note: the filter row and stats are plain flex rows, so the browser already mirrors their order under dir="rtl". No row-reverse override is added — that would double-flip and break the Arabic layout. */ /* ── Providers Directory ───────────────────────────────────────────────── Public provider cards (Home "Providers" chip → panel_market_providers). Mobile-first: single column on small screens, auto-fit grid on wider. */ .providers-subtext { margin: 0 12px 10px; color: #9aa0a6; font-size: .9rem; } .providers-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 10px; /* flex-end aligns every input's bottom edge; the labelled Location field no longer forces a tall row that left big vertical gaps around Recommended. */ align-items: flex-end; /* Centered, capped width so controls stay balanced on wide desktops instead of stretching edge-to-edge. */ max-width: 1160px; margin: 0 auto; } .providers-toolbar .providers-search { flex: 1 1 100%; min-width: 0; } .providers-toolbar .providers-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; margin: 0; } .providers-toolbar .providers-field-lbl { font-size: .78rem; font-weight: 600; color: #9aa0a6; padding-left: 2px; } .providers-toolbar .providers-field .providers-location { width: 100%; } .providers-toolbar .providers-location-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; flex: 1 1 100%; } /* Compact toggle chips (Saved / Nearby) grouped on a shared row. */ .providers-toolbar .providers-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; max-width: none; } @media (min-width: 768px) { /* Desktop/tablet: a centered 3-column grid keeps controls balanced and guarantees the Saved/Nearby chips have a fixed home (never pushed off-screen or clipped). Row 1: Search (full width) Row 2: Location field (2 cols → input + All locations) | Recommended Row 3: Category | chips (2 cols → Saved | Nearby) */ .providers-toolbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; align-items: end; } .providers-toolbar .providers-search { grid-column: 1 / -1; } .providers-toolbar .providers-field--location { grid-column: span 2; } .providers-toolbar .providers-sort { grid-column: span 1; } .providers-toolbar .providers-chips { grid-column: span 2; } } .providers-toolbar .providers-location-inputwrap { position: relative; flex: 1 1 100%; min-width: 0; } .providers-toolbar .providers-location-inputwrap .providers-location { padding-right: 34px; } .providers-toolbar .providers-location-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa0a6; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .providers-toolbar .providers-location-clear:hover { color: #e6e8e6; } .providers-toolbar .providers-location-suggest { flex: 1 1 100%; min-width: 0; } [dir="rtl"] .providers-toolbar .providers-location-inputwrap .providers-location { padding-right: 12px; padding-left: 34px; } [dir="rtl"] .providers-toolbar .providers-location-clear { right: auto; left: 6px; } @media (min-width: 520px) { .providers-toolbar .providers-location-inputwrap { flex: 1 1 58%; } .providers-toolbar .providers-location-suggest { flex: 1 1 38%; } } /* Single-control mode: the hierarchy select is the ONLY location control. */ .providers-toolbar .providers-location-suggest--full, .providers-toolbar .providers-location-suggest.providers-location-suggest--full { flex: 1 1 100%; width: 100%; } .providers-toolbar .providers-sort { flex: 1 1 100%; min-width: 0; } /* Compact Categories dropdown pinned next to the Providers panel title. */ .providers-cat-dd { position: relative; display: inline-flex; } .providers-cat-dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: #1a2421; color: var(--pm-text); font-size: .82rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; } .providers-cat-dd-btn.is-active { color: #cfa94a; border-color: rgba(207, 169, 74, .5); } .providers-cat-dd-caret { font-size: .7rem; line-height: 1; opacity: .8; } .providers-cat-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 60; min-width: 200px; max-width: 260px; margin: 0; padding: 6px; list-style: none; background: #131a18; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); max-height: 60vh; overflow-y: auto; } .providers-cat-menu[hidden] { display: none; } .providers-cat-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: .88rem; color: var(--pm-text); cursor: pointer; outline: none; } .providers-cat-item:hover, .providers-cat-item:focus { background: #1a2421; } .providers-cat-item.is-selected { color: #cfa94a; } .providers-cat-item.is-selected::after { content: "\2713"; font-size: .85rem; } @media (max-width: 480px) { .providers-cat-menu { min-width: 180px; max-width: calc(100vw - 32px); } } /* Provider grid: 1 col mobile (clean vertical stack), 2 cols tablet, multi-col desktop (min 300px so list-style cards never look squeezed). */ .providers-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 12px 16px; /* Match the centered toolbar so the whole section reads as one column. */ max-width: 1160px; margin: 0 auto; } @media (min-width: 640px) { .providers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .providers-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } .provider-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: #131a18; border: 1px solid rgba(255, 255, 255, .06); } .provider-card-main { display: flex; gap: 10px; align-items: center; cursor: pointer; min-width: 0; } .provider-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #1a2421; } .provider-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .provider-avatar--mono { display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; color: #cfa94a; } .provider-info { min-width: 0; flex: 1 1 auto; } /* Provider name is the primary visual element. */ .provider-name { font-weight: 800; font-size: 1rem; line-height: 1.25; color: #f2f3f2; /* allow up to 2 lines so names aren't truncated too aggressively */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* keep clear of the top-right save star */ padding-right: 30px; } [dir="rtl"] .provider-name { padding-right: 0; padding-left: 30px; } .provider-type { font-size: .78rem; color: #cfa94a; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .provider-loc { font-size: .76rem; color: #9aa0a6; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Listings + followers on one inline row: "63 Listings • 12 Followers". */ .provider-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: .76rem; color: #9aa0a6; } .provider-stat-sep { color: #5c6360; } .provider-stat strong { color: #e6e8e6; font-weight: 700; } .provider-actions { display: flex; gap: 8px; } .provider-actions .pm-btn { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 7px 12px; font-size: .82rem; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .provider-follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .provider-follow-btn.is-active { background: #1a2421; color: #cfa94a; } /* Compact star icon toggle for Save — pinned to the card's top-right corner. */ .provider-save-btn { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); color: #9aa0a6; cursor: pointer; } .provider-save-btn .provider-save-ico { font-size: 1.05rem; line-height: 1; } .provider-save-btn.is-saved { background: #1a2421; color: #cfa94a; border-color: rgba(207, 169, 74, .5); } /* Compact Saved / Nearby toggle chips in the toolbar. */ .providers-saved-toggle, .providers-nearby-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* Compact chips on ALL screen sizes — never grow to fill the row. */ width: auto; flex: 0 0 auto; min-width: 120px; max-width: 160px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: .84rem; } .providers-saved-toggle.is-active, .providers-nearby-toggle.is-active { background: #1a2421; color: #cfa94a; border-color: rgba(207, 169, 74, .4); } .providers-nearby-toggle:disabled { opacity: .65; cursor: default; } .providers-saved-toggle .provider-save-ico, .providers-nearby-toggle .providers-nearby-ico { font-size: 1rem; line-height: 1; } /* Non-blocking status banner shown under the toolbar while locating / active / on error. */ .providers-nearby-banner { display: flex; align-items: center; gap: 10px; margin: 0 12px 10px; padding: 9px 12px; border-radius: 12px; background: #131a18; border: 1px solid rgba(207, 169, 74, .35); color: #e6e8e6; font-size: .84rem; } .providers-nearby-banner[hidden] { display: none; } .providers-nearby-banner.is-error { border-color: rgba(224, 108, 108, .45); background: rgba(224, 108, 108, .10); } .providers-nearby-banner.is-active { border-color: rgba(207, 169, 74, .4); } .providers-nearby-banner .providers-nearby-banner-msg { flex: 1 1 auto; min-width: 0; } .providers-nearby-exit { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #e6e8e6; font-size: .82rem; font-weight: 600; cursor: pointer; } .providers-nearby-exit:hover { background: rgba(255, 255, 255, .06); } .providers-nearby-exit[hidden] { display: none; } /* Approximate distance chip on a provider card. */ .provider-distance { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: #cfa94a; margin-top: 3px; } /* Featured / Sponsored placement badge (Task #29). Deliberately obvious but NOT deceptive — a small pill next to the provider name, clearly readable as a paid placement, never styled to look like an organic "verified" endorsement. */ .provider-promo-badge { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; vertical-align: middle; white-space: nowrap; } .provider-promo-badge--featured { color: #1a1205; background: #cfa94a; border: 1px solid #cfa94a; } .provider-promo-badge--sponsored { color: #cfd3d6; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .28); } .providers-empty { text-align: center; padding: 40px 16px; } .providers-empty-title { font-weight: 700; color: #e6e8e6; margin-bottom: 6px; } .providers-empty-sub { font-size: .88rem; color: #9aa0a6; } .providers-load-more { display: flex; justify-content: center; padding: 4px 12px 20px; } .feed-chip--providers { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* ---- Provider profile "Verified by Peak" section ---- Shown only for genuinely admin-approved sellers (server verified_by_peak). Public-safe copy only — never surfaces private documents or admin notes. Mobile-first: full-width, wraps cleanly, dark-card palette. */ .mkt-seller-verified { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(46, 160, 90, .12); border: 1px solid rgba(46, 160, 90, .35); } .mkt-seller-verified-ico { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.3; } .mkt-seller-verified-txt { min-width: 0; } .mkt-seller-verified-title { font-weight: 700; font-size: .95rem; color: #eafff2; } .mkt-seller-verified-sub { font-size: .82rem; color: #9fd8b6; margin-top: 2px; } /* ── TikTok-style feed/detail audio: small "sound" pill (PMFeedAudio) ────── Fixed, bottom-center, floating above the bottom nav. Professional and compact — never a big popup. Three states: enable ("Tap for sound"), playing (animated equalizer = mute toggle), muted (speaker-off = unmute). */ .pm-sound-pill { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1200; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100vw - 32px); padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(19, 26, 24, .92); color: #f4f7f5; font-size: .82rem; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .18s ease, transform .18s ease; } .pm-sound-pill:active { transform: translateX(-50%) scale(.96); } .pm-sound-pill .pm-sound-pill-ico { font-size: 1rem; line-height: 1; } .pm-sound-pill .pm-sound-pill-lbl { white-space: nowrap; } .pm-sound-pill.is-playing { padding: 8px 12px; } /* Equalizer indicator (playing state) */ .pm-sound-pill-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .pm-sound-pill-eq i { display: block; width: 3px; height: 4px; border-radius: 2px; background: #4fd08a; animation: pmSoundEq .9s ease-in-out infinite; } .pm-sound-pill-eq i:nth-child(2) { animation-delay: .18s; } .pm-sound-pill-eq i:nth-child(3) { animation-delay: .36s; } @keyframes pmSoundEq { 0%, 100% { height: 4px; } 50% { height: 14px; } } @media (prefers-reduced-motion: reduce) { .pm-sound-pill-eq i { animation: none; height: 10px; } } [dir="rtl"] .pm-sound-pill { transform: translateX(50%); } [dir="rtl"] .pm-sound-pill:active { transform: translateX(50%) scale(.96); }