/* ========================================= VELOURA EAST — CUSTOMER ACCOUNT PORTAL White / ivory / gold (matches site theme) ========================================= */ /* ========================================= ACCOUNT LAYOUT ========================================= */ /* UI-003: the pre-shell .account-layout grid and its .account-sidebar-* / .account-nav-* children are removed here — includes/portal-sidebar.php (rendering .pv-sidebar, styled by portal-shell.css) has been the only sidebar markup any account/*.php page has actually rendered since UI-002A. Confirmed zero remaining references before deletion. .account-content is now a pure pass-through wrapper — .pv-content (portal-shell.css), which it always contains, owns padding/background/ min-height. This used to duplicate the exact same values on both elements, stacking to nearly double the intended spacing on every account/*.php page. */ .account-content { display: block; } /* ========================================= PORTAL SHELL — SITEWIDE HEADER OFFSET RESET ========================================= */ /* Root cause of the sidebar/topbar misalignment reported in UI-003: assets/css/navigation.css sets an UNSCOPED `body { padding-top }` (~110px desktop / ~102px ≤1024px) to clear the public site's fixed header + announcement bar. That file is pulled in on every page, including this one, via app.css's @import chain — so the Collector Portal inherited the offset even though it never renders that header and has its own in-flow topbar instead. .pv-sidebar is `position: fixed; top: 0`, so it's positioned against the real viewport and ignores body padding entirely. The rest of the shell (.pv-shell/.pv-main/.pv-topbar/.pv-content) is in normal flow, so IT got pushed down by the inherited padding while the sidebar didn't move — a growing gap between the two that read as a transparent, misaligned, overlapping sidebar. account/partials/head.php sets specifically so this reset can target the portal without touching navigation.css itself, which still needs that offset for the public site. */ body.pv-page { padding-top: 0; } /* ========================================= PAGE HEADER ========================================= */ .account-page-header { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--border); } .account-page-header h1 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; color: var(--black); margin-bottom: 8px; } .account-page-header p { color: var(--muted); font-size: 14px; } /* UI-004: shared back-link for detail pages (order-detail.php was the only page needing this and used an inline style="color:#C9A96E" — moved to a class so any future detail page can reuse it instead of re-inlining the same color). */ .account-page-header-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--t-color-primary, var(--gold)); text-decoration: none; } .account-page-header-back:hover { text-decoration: underline; } /* ========================================= DASHBOARD WIDGETS ========================================= */ .dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 36px; } .dashboard-widget { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; transition: all .3s ease; position: relative; overflow: hidden; } .dashboard-widget::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); opacity: 0; transition: opacity .3s; } .dashboard-widget:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-md, 0 12px 36px rgba(0,0,0,.08)); } .dashboard-widget:hover::before { opacity: 1; } .widget-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-line); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .widget-icon svg { width: 20px; height: 20px; color: var(--gold-2); } .widget-number { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--black); line-height: 1; margin-bottom: 8px; } .widget-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } /* ========================================= KPI CARD — TREND / SECONDARY TEXT Opt-in additions to .dashboard-widget: a month-over-month trend pill and a muted secondary line, used by account/dashboard.php. Existing widgets that don't use them are unaffected. ========================================= */ .widget-secondary { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; } .widget-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; margin-top: 8px; } .widget-trend svg { width: 11px; height: 11px; flex-shrink: 0; } .widget-trend.up { background: rgba(46,204,113,.1); color: #1F9D55; } .widget-trend.down { background: rgba(231,76,60,.1); color: #DC2626; } .widget-trend.down svg { transform: rotate(180deg); } /* ========================================= COLLECTION GROWTH — chart card Minimal, original chart styling (Chart.js config lives in assets/js/dashboard-charts.js). Height is fixed so the surrounding card layout never shifts while Chart.js measures/renders. ========================================= */ .dashboard-chart-card .account-card-header .widget-secondary { margin-top: 0; } .dashboard-chart-canvas-wrap { position: relative; height: 240px; } .dashboard-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; } /* ========================================= COLLECTOR TIMELINE Reusable connector-line timeline for Recent Activity / Authentication / Ownership events. Icons are the single-glyph markers already returned by collectorEventLabel(). ========================================= */ .cp-timeline { display: flex; flex-direction: column; } .cp-timeline-item { position: relative; display: flex; gap: 12px; padding-bottom: 18px; } .cp-timeline-item:last-child { padding-bottom: 0; } .cp-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 1px; background: var(--border); } .cp-timeline-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-line); color: var(--gold-2); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; z-index: 1; } .cp-timeline-body { flex: 1; min-width: 0; padding-top: 3px; } .cp-timeline-label { font-size: 13px; color: var(--text); line-height: 1.4; } .cp-timeline-cert { color: var(--muted); } .cp-timeline-date { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ========================================= COLLECTOR STATUS (account/dashboard.php) UI-006: previously three inline-styled flex columns with fixed min-widths (220/180/220) inside a flex-wrap row. Under ~620px combined the row had nowhere to wrap cleanly, so the timeline, achievements, and progress bar collapsed into each other with no visual separation. Rebuilt as a proper responsive grid: side-by-side on desktop (unchanged), clearly divided stacked sections on mobile. ========================================= */ .collector-status-actions { display: flex; gap: 8px; flex-wrap: wrap; } .collector-status-body { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding: 4px 0 8px; } .collector-status-col--level { min-width: 220px; } .collector-status-col--achievements { min-width: 180px; } .collector-status-col--activity { flex: 1; min-width: 220px; } .collector-status-col-label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .collector-status-points { margin-top: 10px; font-size: 13px; color: var(--muted); } .collector-progress-track { height: 6px; border-radius: 100px; background: rgba(0,0,0,.06); margin-top: 10px; max-width: 260px; overflow: hidden; } .collector-progress-fill { height: 100%; border-radius: 100px; background: var(--gold, #C9A96E); } .collector-achievements-icons { display: flex; gap: 8px; flex-wrap: wrap; max-width: 220px; font-size: 18px; } .collector-status-sub { font-size: 12px; color: var(--muted); margin-top: 6px; } .collector-status-empty { font-size: 13px; color: var(--muted); } /* ========================================= RECOMMENDED FOR YOU (account/dashboard.php) UI-006: was a flex-wrap row of fixed width:140px cards — on narrow phones that forced a horizontal scroll or left a single card stranded with a huge gap next to it, and images had no consistent ratio. A responsive grid (same auto-fill pattern as .wishlist-grid) gives equal-width, equal- height cards that reflow cleanly at every size with no overflow. ========================================= */ .recommended-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; } .recommended-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .recommended-card-image { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-3, #F5F2ED); margin-bottom: 8px; } .recommended-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .recommended-card-title { font-size: 13px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recommended-card-price { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ========================================= DASHBOARD QUICK LINKS ========================================= */ .dashboard-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } .dashboard-quicklink { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-decoration: none; display: block; transition: border-color .2s; } .dashboard-quicklink:hover { border-color: var(--gold); } .dashboard-quicklink:focus-visible, .dashboard-widget:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .dashboard-quicklink-eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-bottom: 8px; } .dashboard-quicklink-title { font-size: 15px; font-weight: 500; color: var(--black); } .dashboard-quicklink-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } @media (max-width: 640px) { .dashboard-quicklinks { grid-template-columns: 1fr; gap: 12px; } } /* ========================================= ACCOUNT CARDS ========================================= */ .account-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; margin-bottom: 24px; overflow: hidden; } .account-card-header { padding: 24px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .account-card-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--black); } .account-card-body { padding: 28px; } /* ========================================= FORMS ========================================= */ .account-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .account-form .form-group { margin-bottom: 20px; } .account-form label { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .account-form input, .account-form textarea, .account-form select { width: 100%; background: #fff; border: 1px solid var(--border); color: var(--text); padding: 14px 18px; border-radius: 10px; font-size: 14px; transition: border-color .2s; } .account-form input:focus, .account-form textarea:focus, .account-form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,.15); } .account-form input:focus-visible, .account-form textarea:focus-visible, .account-form select:focus-visible { outline: 2px solid transparent; /* box-shadow above already carries the indicator */ } /* Ties a field to the page-level $error flash: add aria-invalid="true" (or class="is-invalid") to the specific input that failed validation so the person doesn't have to guess which one it was. */ .account-form input[aria-invalid="true"], .account-form textarea[aria-invalid="true"], .account-form select[aria-invalid="true"], .account-form input.is-invalid, .account-form textarea.is-invalid, .account-form select.is-invalid { border-color: var(--danger, #C62828); } .account-form input[aria-invalid="true"]:focus, .account-form textarea[aria-invalid="true"]:focus, .account-form select[aria-invalid="true"]:focus, .account-form input.is-invalid:focus, .account-form textarea.is-invalid:focus, .account-form select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(198,40,40,.12); } .account-form .field-error { font-size: 12px; color: var(--danger, #C62828); margin-top: 6px; } .account-form input:disabled, .account-form textarea:disabled, .account-form select:disabled { opacity: .5; cursor: not-allowed; background: var(--bg-2); } .account-form .form-actions { display: flex; align-items: center; gap: 14px; padding-top: 10px; } /* ========================================= TABLES ========================================= */ .account-table { width: 100%; border-collapse: collapse; font-size: 14px; } .account-table th { text-align: left; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--border); } .account-table td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .account-table tr:last-child td { border-bottom: none; } .account-table tr:hover td { background: var(--bg-2); } /* ========================================= STATUS BADGES ========================================= */ .status-badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: capitalize; } .status-active { background: rgba(46,204,113,.1); color: #1F9D55; } .status-pending { background: rgba(243,156,18,.1); color: #B45309; } .status-pending-verification, .status-more-info-requested { background: rgba(243,156,18,.1); color: #B45309; } .status-approved { background: rgba(46,204,113,.1); color: #1F9D55; } .status-processing, .status-packed { background: var(--gold-line); color: var(--gold-2); } .status-shipped { background: rgba(52,152,219,.1); color: #1D4ED8; } .status-confirmed { background: rgba(46,204,113,.1); color: #1F9D55; } .status-delivered { background: rgba(46,204,113,.1); color: #1F9D55; } .status-rejected, .status-cancelled { background: rgba(231,76,60,.1); color: #DC2626; } .status-transferred { background: var(--gold-line); color: var(--gold-2); } /* UI-004: neutral variant for badges that show informational (not lifecycle-status) data — e.g. payment method on account/orders.php, which previously used style="background:var(--bg-2);color:var(--text);" inline instead of a shared class. */ .status-neutral { background: var(--bg-2); color: var(--text); } /* ========================================= WISHLIST GRID ========================================= */ .wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; } .wishlist-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all .25s ease; } .wishlist-item:hover { border-color: var(--gold); transform: translateY(-2px); } .wishlist-item-img { aspect-ratio: 1; background: var(--bg-3); display: flex; align-items: center; justify-content: center; } .wishlist-item-img img { width: 100%; height: 100%; object-fit: cover; } .wishlist-item-body { padding: 16px; } .wishlist-item-name { font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 6px; } .wishlist-item-price { font-size: 13px; color: var(--gold-2); margin-bottom: 12px; } .wishlist-item-actions { display: flex; gap: 8px; } /* ========================================= TWO-COLUMN INFO LAYOUTS (account/addresses.php, account/security.php) UI-006: previously raw inline style="display:grid;grid-template-columns:1fr 1fr" with no responsive fallback anywhere — forced two equal columns even at 320px, squeezing the address form / account info into unreadably narrow strips. ========================================= */ .addresses-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .security-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* ========================================= EDITION CARDS ========================================= */ .edition-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; gap: 20px; align-items: flex-start; margin-bottom: 16px; transition: border-color .2s; } .edition-card:hover { border-color: var(--gold); } .edition-card-img { width: 80px; height: 80px; border-radius: 10px; background: var(--bg-3); flex-shrink: 0; overflow: hidden; } .edition-card-img img { width: 100%; height: 100%; object-fit: cover; } .edition-card-info { flex: 1; } .edition-card-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: var(--black); margin-bottom: 6px; } .edition-card-serial { font-size: 12px; color: var(--gold-2); letter-spacing: 1px; margin-bottom: 12px; font-family: monospace; } .edition-card-meta { display: flex; flex-wrap: wrap; gap: 16px 20px; } .edition-card-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .edition-progress-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 6px; } .edition-meta-item { display: flex; flex-direction: column; gap: 2px; } .edition-meta-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .edition-meta-value { font-size: 13px; color: var(--text); } /* ========================================= CERTIFICATE CARD ========================================= */ .certificate-card { background: linear-gradient(135deg, #fff 0%, var(--bg-3) 100%); border: 1px solid var(--gold-line); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; margin-bottom: 16px; } .certificate-card::before { content: 'AUTHENTICATED'; position: absolute; top: 24px; right: -30px; background: var(--gold); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 2px; padding: 6px 40px; transform: rotate(45deg) translateX(20px); } .certificate-number { font-family: monospace; font-size: 14px; color: var(--gold-2); letter-spacing: 2px; margin-bottom: 10px; } .certificate-product { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--black); margin-bottom: 16px; } .certificate-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ========================================= NOTIFICATIONS TOGGLE ========================================= */ .notification-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); } .notification-row:last-child { border-bottom: none; } .notification-info { min-width: 0; } .notification-info h4 { font-size: 14px; font-weight: 500; color: var(--black); margin-bottom: 4px; } .notification-info p { font-size: 12px; color: var(--muted); } /* UI-006 fix: .toggle-switch is a