/* ============================================ AdFinder - Consolidated Mobile-First Stylesheet Version 2.0 - Created: 2025-12-03 This file consolidates modern.css and style.css into a single mobile-first responsive stylesheet. ============================================ */ /* ========== 1. CSS VARIABLES (DESIGN TOKENS) ========== */ /* Theme tokens live in `static/css/themes.css` and are applied via ``. */ :root { /* Keep listing cards uniform across the site (matches homepage card sizing). */ --listing-card-section-height: 112px; /* Premium spacing scale - Jude-inspired */ --space-xs: 8px; --space-sm: 12px; --space-md: 20px; /* Mobile base */ --space-lg: 32px; /* Desktop base */ --space-xl: 40px; /* Large desktop */ --space-2xl: 56px; /* Hero sections */ /* Component-specific spacing */ --card-padding-mobile: 16px; --card-padding-desktop: 24px; --section-gap-mobile: 20px; --section-gap-desktop: 40px; } @media (min-width: 576px) { :root { --listing-card-section-height: 120px; } } @media (min-width: 768px) { :root { --listing-card-section-height: 132px; /* Responsive spacing increases for desktop */ --space-md: 32px; --space-lg: 48px; --space-xl: 64px; --space-2xl: 80px; } } @media (min-width: 992px) { :root { --listing-card-section-height: 140px; } } /* ========== 2. BASE STYLES (MOBILE-FIRST) ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; width: 100%; } body { font-family: 'Manrope', 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--page-bg); color: var(--ink); line-height: 1.6; padding-top: var(--navbar-height); /* Mobile: Fixed navbar height */ padding-bottom: var(--bottom-nav-height); /* Mobile: Bottom nav space */ min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; /* Minimum readable size */ overflow-x: hidden; width: 100%; } .page-gradient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--page-gradient-bg); } .page-main { padding: 12px 0 16px; /* Reduced vertical padding */ flex: 1; } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--brand-primary); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 2000; text-decoration: none; } .skip-link:focus { left: 12px; } *:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Prevent horizontal overflow on mobile */ @media (max-width: 767px) { body { overflow-x: hidden; max-width: 100vw; } /* Target specific elements instead of wildcard */ img, video, iframe, embed, object { max-width: 100%; height: auto; } p, h1, h2, h3, h4, h5, h6, li, td, th { max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; } /* Fix: Neutralize Bootstrap .row negative margins on mobile */ .container .row, .hero-panel .row, .row { margin-left: 0 !important; margin-right: 0 !important; --bs-gutter-x: 0.5rem !important; /* Reduce from 1rem */ } /* Also fix columns to prevent overflow */ .row > [class*="col-"] { padding-left: 0.25rem !important; /* 4px instead of 8px */ padding-right: 0.25rem !important; min-width: 0; /* CRITICAL: Allow flex shrinkage */ } /* Ensure container never exceeds viewport */ .container, .hero-panel, .glass-card, .sidebar-section, .filters-panel, .detail-card { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } } /* ========== 3. LAYOUT COMPONENTS (MOBILE-FIRST) ========== */ /* Container - Mobile default */ .container { width: 100%; padding: 0 4px; /* Ultra-tight on mobile - maximizes space */ margin: 0 auto; } /* Slight constraint on very small phones */ @media (max-width: 374px) { .container { padding: 0 2px; /* Minimal safe padding on tiny screens */ } } /* Main Content - Mobile: Single column, no sidebar */ .main-content { display: grid; grid-template-columns: 1fr; gap: 12px; /* Tighter spacing on mobile */ margin-bottom: 20px; width: 100%; max-width: 100%; box-sizing: border-box; } /* Home layout uses a single column (no sidebar column reserved) */ body[data-page="home"] .main-content { grid-template-columns: 1fr; } /* Prevent flex/grid overflow */ .main-content > *, .content-area > *, .listings > * { min-width: 0; /* CRITICAL for flexbox/grid */ max-width: 100%; } .listings.listings-horizontal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 992px) { .listings.listings-horizontal { /* Desktop: match homepage card sizing (~240px per card). */ grid-template-columns: repeat(auto-fit, minmax(240px, 240px)); justify-content: center; } } @media (min-width: 1400px) { .listings.listings-horizontal { grid-template-columns: repeat(auto-fit, minmax(240px, 240px)); justify-content: center; } } .listings.listings-horizontal .listing-card { display: flex; flex-direction: column; height: 100%; } .listing-card-wrapper .listing-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .listing-card-wrapper .listing-content .listing-meta { margin-top: auto; } .listing-card.listing-card-horizontal { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 10px; background: var(--surface); } .listing-card.listing-card-horizontal .listing-image { height: 100%; min-height: 160px; border-radius: 12px; overflow: hidden; } .listing-horizontal-image { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .listing-card.listing-card-horizontal { grid-template-columns: 1fr; } .listing-card.listing-card-horizontal .listing-image { min-height: 200px; } } /* Sidebar - Hidden on mobile */ .sidebar { display: none; } /* ========== 4. HEADER & NAVIGATION (MOBILE-FIRST) ========== */ /* Header - Mobile: Minimal fixed header */ header, .navbar-modern { position: fixed; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; background: rgba(var(--surface-rgb), 0.92); box-shadow: var(--shadow-soft); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(14px); z-index: 1000; padding: 0 12px; transition: padding 0.2s ease, box-shadow 0.2s ease; } /* Ensure Bootstrap navbar is sticky on mobile */ @media (max-width: 991.98px) { nav.navbar.sticky-top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1020; background: rgba(var(--surface-rgb), 0.96) !important; backdrop-filter: blur(14px); box-shadow: var(--shadow-nav); } } .header-content, .navbar-modern .header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; gap: 8px; } /* Logo - Mobile */ .logo, .brand-mark { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.12), rgba(var(--brand-accent-rgb), 0.08)); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; flex-shrink: 0; } .brand-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: 1rem; } .brand-icon-pink { background: linear-gradient(135deg, #ff8fb1, #f15bb5); } .brand-icon-blue { background: linear-gradient(135deg, #7ee0ff, #3b82f6); } .brand-type { display: flex; flex-direction: column; line-height: 1.1; } .brand-sub { display: none; /* Hidden on mobile */ color: var(--muted); font-weight: 500; font-size: 0.85rem; } .logo i { font-size: 1.3rem; } /* Search Bar - Mobile: Full width, simplified */ .search-bar { flex: 1; max-width: 100%; margin: 0; min-width: 0; /* Allows flex shrink */ } .search-bar form, .theme-modern .search-bar form { display: flex; align-items: center; background: var(--surface); border-radius: 12px; border: 1px solid var(--border-subtle); padding: 4px; gap: 4px; box-shadow: var(--shadow-soft); } .search-bar input[name="query"], .theme-modern .search-bar input[name="query"] { width: 100%; border: none; background: transparent; padding: 8px 10px; font-size: 0.9rem; min-width: 0; } .search-bar input[name="query"]:focus, .theme-modern .search-bar input[name="query"]:focus { outline: none; box-shadow: none; } .search-bar button, .theme-modern .search-bar button { border: none; background: var(--brand-primary); color: white; border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: var(--transition); font-size: 0.85rem; white-space: nowrap; display: grid; place-items: center; } .search-bar button:hover { background: var(--brand-primary-strong); } /* Nav Buttons - Hidden on mobile */ .nav-buttons { display: none; } /* Mobile Menu Toggle - Visible on mobile */ .mobile-menu-toggle { display: grid; place-items: center; background: var(--ink); color: #fff; border: none; width: 40px; height: 40px; border-radius: 12px; box-shadow: var(--shadow-soft); cursor: pointer; font-size: 1.3rem; padding: 0; transition: var(--transition); flex-shrink: 0; } .mobile-menu-toggle:hover { transform: translateY(-1px); } /* Hamburger icon lines */ .mobile-menu-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s ease; } .mobile-menu-toggle span:not(:last-child) { margin-bottom: 4px; } /* Hamburger animation when menu is open */ .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } /* Hamburger Menu - Mobile */ .hamburger-menu { position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; background: var(--surface); box-shadow: var(--shadow-soft); z-index: 2000; transition: right 0.3s ease; overflow-y: auto; } .hamburger-menu.active { right: 0; } .hamburger-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-subtle); } .hamburger-header h3 { margin: 0; font-size: 1.2rem; color: var(--ink); } .hamburger-close { background: none; border: none; font-size: 1.5rem; color: var(--gray); cursor: pointer; padding: 5px; transition: var(--transition); } .hamburger-close:hover { color: var(--danger); } .hamburger-links { list-style: none; padding: 0; margin: 0; } .hamburger-links li { border-bottom: 1px solid var(--border-subtle); } .hamburger-links li.hamburger-divider { height: 1px; background: var(--border-subtle); margin: 10px 0; border: none; } .hamburger-links a { display: flex; align-items: center; gap: 15px; padding: 15px 20px; color: var(--ink); text-decoration: none; transition: var(--transition); } .hamburger-links a:hover { background: var(--surface-muted); color: var(--brand-primary); } .hamburger-links a i { width: 20px; text-align: center; color: var(--brand-primary); } /* Hamburger Overlay */ .hamburger-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; transition: opacity 0.3s ease; } .hamburger-overlay.active { display: block; opacity: 1; } /* Hamburger Categories Section */ .hamburger-categories { padding: 20px; border-top: 1px solid var(--border-subtle); background: var(--surface-muted); max-height: 50vh; overflow-y: auto; } .hamburger-categories-title { font-size: 0.85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px 0; } .hamburger-category-pills { display: flex; flex-wrap: wrap; gap: 8px; } .hamburger-category-pills .category-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(var(--surface-rgb), 0.95); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.85rem; white-space: nowrap; border: 1px solid var(--border-subtle); transition: var(--transition); min-height: 36px; } .hamburger-category-pills .category-pill:hover { background: var(--brand-primary); color: white; border-color: var(--brand-primary); transform: translateY(-1px); box-shadow: var(--shadow-soft); } .hamburger-category-pills .pill-count { background: rgba(0, 0, 0, 0.1); padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; } .hamburger-category-pills .category-pill:hover .pill-count { background: rgba(var(--surface-rgb), 0.2); color: white; } /* Smooth scrolling for many categories */ .hamburger-categories::-webkit-scrollbar { width: 6px; } .hamburger-categories::-webkit-scrollbar-track { background: var(--surface); } .hamburger-categories::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; } .hamburger-categories::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Bottom Navigation - Visible on mobile */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-height); background: rgba(15, 23, 42, 0.94); box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.18); z-index: 1000; padding: 8px 0; justify-content: space-around; align-items: center; transition: transform 0.25s ease; } .bottom-nav-hide { transform: translateY(100%); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; color: #d0d4e0; text-decoration: none; transition: var(--transition); flex: 1; text-align: center; position: relative; min-height: 44px; /* Touch target */ min-width: 44px; } .bottom-nav-item i { font-size: 1.3rem; margin-bottom: 4px; } .bottom-nav-item span { font-size: 0.7rem; font-weight: 500; } .bottom-nav-item:hover, .bottom-nav-item.active { color: #fff; } .bottom-nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: var(--brand-primary); border-radius: 0 0 3px 3px; } /* Unread badge on bottom nav icons (e.g., Messages) */ .bottom-nav-badge { position: absolute; top: 6px; right: 18px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35); } /* Staff support inbox (mailbox layout) */ .mailbox-sidebar { max-height: 70vh; overflow: auto; } .mailbox-body { /* * Mailbox reading pane: fixed "paper card" height across devices, * with internal scrolling so actions/tabs stay in place. */ height: clamp(320px, 52vh, 640px); overflow: auto; } @media (min-width: 768px) { .mailbox-body { height: clamp(420px, 58vh, 760px); } } @media (min-width: 992px) { .mailbox-body { height: clamp(520px, 66vh, 920px); } } .mailbox-body .tab-pane { min-height: 100%; } .mailbox-body pre { margin-bottom: 0; } .support-inbox-list { display: grid; gap: 10px; } .support-inbox-item { border: 1px solid var(--border-subtle) !important; border-radius: 14px !important; background: rgba(var(--surface-rgb), 0.96); box-shadow: var(--shadow-soft); padding: 14px 14px; } .support-inbox-item--compact { padding: 12px 12px; box-shadow: var(--shadow-soft); } .support-inbox-item + .support-inbox-item { border-top-width: 1px !important; /* override Bootstrap stacked list-group behavior */ } .support-inbox-item:active { transform: translateY(1px); } .support-inbox-item:hover { background: rgba(var(--surface-rgb), 1); box-shadow: var(--shadow-strong); } .support-inbox-item.active { background: rgba(var(--surface-rgb), 0.98) !important; border-color: rgba(var(--brand-primary-rgb), 0.28) !important; color: var(--ink) !important; box-shadow: 0 14px 34px rgba(var(--brand-primary-rgb), 0.12) !important; position: relative; } .support-inbox-item.active .text-muted, .support-inbox-item.active .opacity-75, .support-inbox-item.active .badge { color: var(--muted) !important; opacity: 1 !important; } .support-inbox-item.active .badge { background: rgba(var(--brand-primary-rgb), 0.08) !important; color: var(--ink) !important; } .support-inbox-item.active:hover { box-shadow: 0 16px 38px rgba(var(--brand-primary-rgb), 0.16) !important; } .support-inbox-item.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-strong)); } /* Support inbox (table layout) — add row separation on tablets/desktop */ .support-inbox-table { border-collapse: separate !important; border-spacing: 0 10px; } .support-inbox-table thead th { border-bottom: 0 !important; } .support-inbox-table tbody tr.support-inbox-row td { background: rgba(var(--surface-rgb), 0.96) !important; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .support-inbox-table tbody tr.support-inbox-row td:first-child { border-left: 1px solid var(--border-subtle); border-top-left-radius: 14px; border-bottom-left-radius: 14px; } .support-inbox-table tbody tr.support-inbox-row td:last-child { border-right: 1px solid var(--border-subtle); border-top-right-radius: 14px; border-bottom-right-radius: 14px; } .support-inbox-table tbody tr.support-inbox-row:hover td { background: rgba(var(--surface-rgb), 1) !important; box-shadow: var(--shadow-soft); } .mailbox-preview-frame { width: 100%; height: 100%; min-height: 320px; border: 1px solid var(--border-subtle); border-radius: 0.75rem; background: var(--surface); } @media (max-width: 991.98px) { .mailbox-preview-frame { min-height: 260px; } } .mailbox-search { min-width: 280px; } @media (max-width: 575.98px) { .mailbox-search { width: 100%; min-width: 0; } } .mailbox-layout code { background: rgba(15, 23, 42, 0.06); padding: 2px 6px; border-radius: 8px; font-size: 0.9em; } /* Primary action button */ .bottom-nav-primary i { font-size: 2rem; color: var(--brand-primary); } .bottom-nav-primary:hover i { transform: scale(1.1); } /* ============================================ Mobile Quickbar (Homepage only) ============================================ */ .mobile-quickbar { display: none; /* Hidden by default */ } @media (max-width: 991.98px) { .navbar-modern { display: none; /* Hide main navbar on mobile homepage */ } .mobile-quickbar { position: sticky; top: 0; z-index: 1200; display: grid; grid-template-columns: 1fr max-content; grid-template-areas: "brand actions" "search search"; align-items: center; gap: 10px; padding: 8px 6px; /* Matches new container padding */ margin: 0 0 8px; /* Remove negative margins */ background: rgba(var(--surface-rgb), 0.96); box-shadow: var(--shadow-soft); border-radius: 14px; } .mobile-brand { grid-area: brand; font-weight: 800; font-size: 1rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; } .mobile-search { grid-area: search; display: flex; align-items: center; gap: 6px; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 4px 6px 4px 10px; } .mobile-search input { border: none; background: transparent; width: 100%; font-size: 0.95rem; } .mobile-search input:focus { outline: none; } .mobile-search button { border: none; background: var(--brand-primary); color: #fff; border-radius: 10px; padding: 8px 10px; display: grid; place-items: center; } .mobile-quick-actions { grid-area: actions; display: inline-flex; align-items: center; gap: 8px; justify-self: end; } .mobile-post-btn, .mobile-quickbar .mobile-menu-toggle { width: 40px; height: 40px; border-radius: 12px; border: none; display: grid; place-items: center; box-shadow: var(--shadow-soft); text-decoration: none; } .mobile-post-btn { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)); color: #fff; } /* Hide post shortcut inside search bar on mobile portrait; keep in landscape/tablet */ @media (orientation: portrait) { .mobile-post-btn { display: none !important; } } .mobile-quickbar .mobile-menu-toggle { background: var(--ink); color: #fff; } .hero-panel { margin-top: 12px; } .hero-home-link { color: inherit; text-decoration: none; } .hero-actions { width: 100%; } } /* Pages that render the mobile quickbar: hide the Bootstrap navbar and remove extra top spacing. */ @media (max-width: 991.98px) { body[data-has-quickbar="1"] { padding-top: 0 !important; } body[data-has-quickbar="1"] nav.navbar { display: none !important; } body[data-has-quickbar="1"] #main-content { margin-top: 0 !important; padding-top: 0 !important; } } /* ======================================== Portrait Mode: Brand Above Quickbar Using both orientation and aspect-ratio for better browser support ======================================== */ @media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (max-aspect-ratio: 5/8) { /* Only remove top padding when using the mobile quickbar layout. */ body[data-has-quickbar="1"] { padding-top: 0 !important; } /* Override grid to remove brand column */ .mobile-quickbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1) !important; } /* Add top margin to first hero panel to clear the fixed quickbar */ body[data-has-quickbar="1"] .hero-panel { margin-top: 108px !important; } /* Reset page-main padding since body padding-top is 0 */ body[data-has-quickbar="1"] .page-main { padding-top: 12px !important; } } /* ======================================== Landscape Mode: Brand Stays in Grid ======================================== */ @media (max-width: 767px) and (orientation: landscape) { /* No special layout needed; base layout already gives search full width. */ } /* ======================================== Mobile Homepage: Remove top spacing above hero ======================================== */ @media (max-width: 767px) { body[data-page="home"] .hero-panel { margin-top: 0 !important; } } /* ======================================== Mobile Homepage: Keep top navbar flush ======================================== */ /* (Removed) Homepage should respect the fixed navbar offset so the mobile top search bar renders below the header instead of underneath it. */ /* ========== 5. CONTENT COMPONENTS (MOBILE-FIRST) ========== */ /* Glass Cards & Panels */ .glass-card, .sidebar-section, .hero-panel, .filters-panel, .detail-card { background: rgba(var(--surface-rgb), 0.92); border-radius: 16px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); width: 100%; max-width: 100%; box-sizing: border-box; } .sidebar-section { padding: 20px; margin-bottom: 20px; } .content-area { display: grid; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; } /* Section Titles */ .section-title { font-size: 1.25rem; font-weight: 800; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; /* Tighter on mobile */ position: relative; padding-bottom: 10px; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background: var(--brand-primary); border-radius: 2px; } .section-title i { color: var(--brand-primary); } /* Hero Section - Mobile */ .hero, .hero-panel { background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.12), rgba(var(--brand-accent-rgb), 0.08)); padding: 10px; /* Reduced from 16px for more space */ border-radius: 16px; position: relative; overflow: hidden; margin-bottom: 16px; } /* Reduce padding on very small phones */ @media (max-width: 374px) { .hero-panel { padding: 8px; /* Minimal padding on very small devices */ } } .hero-panel::after { content: ""; position: absolute; inset: 12px; border-radius: 16px; background: linear-gradient(120deg, rgba(var(--brand-primary-rgb), 0.08), rgba(var(--brand-accent-rgb), 0.08)); z-index: 0; pointer-events: none; } .hero-panel > * { position: relative; z-index: 1; } .hero-title { font-size: clamp(1.25rem, 4vw, 1.5rem); /* 20px-24px responsive */ line-height: 1.2; margin-bottom: 12px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); word-wrap: break-word; } .hero-lede, .hero p { color: var(--muted); font-size: 0.95rem; line-height: 1.4; margin-bottom: 16px; max-width: 620px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; } /* Reduce gap when buttons stack on mobile */ @media (max-width: 767px) { .hero-actions { gap: 8px; /* Tighter button spacing */ } } .hero-stats { display: none; /* Hidden on mobile */ } /* Listings Grid - Mobile (2 columns, 140px cards) */ .listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; /* Enough space for 2-up layout */ margin-bottom: 20px; width: 100%; /* Take full width of parent */ max-width: 100%; /* Never exceed parent width */ box-sizing: border-box; /* Include padding in width calculation */ } .home-listings-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } /* Listing Cards */ .listing-card { background: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.02), rgba(var(--surface-rgb), 0.9)); border-radius: 16px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); text-decoration: none; color: var(--ink); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; display: block; min-height: 44px; /* Touch target */ } /* Uniform "photo + info" card sizing across the site. Scope to anchors so dashboard cards (e.g. My Listings) are unaffected. */ a.listing-card:not(.listing-card-horizontal) { display: flex; flex-direction: column; } a.listing-card:not(.listing-card-horizontal) .listing-image { height: var(--listing-card-section-height); } a.listing-card:not(.listing-card-horizontal) .listing-content { height: var(--listing-card-section-height); overflow: hidden; align-content: start; gap: 6px; padding: 10px; } /* Listing detail page: don't force compact card heights (keeps "Similar Listings" unchanged). */ body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) { display: block; } body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-content { height: auto; overflow: visible; align-content: initial; gap: 8px; padding: 8px; } /* Restore the standard listing-image heights on detail pages (same values as `.listing-image` rules). */ body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 135px; } @media (max-width: 374px) { body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 125px; } } @media (min-width: 375px) and (max-width: 427px) { body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 130px; } } @media (min-width: 428px) { body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 130px; } } @media (min-width: 428px) and (max-width: 575px) { body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 140px; } } @media (min-width: 576px) { body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 135px; } } @media (min-width: 768px) { body[data-page="listing-detail"] a.listing-card:not(.listing-card-horizontal) .listing-image { height: 140px; } } .listing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); border-color: rgba(var(--brand-primary-rgb), 0.2); } .listing-image { height: 135px; width: 100%; background-color: var(--surface-muted); display: flex; align-items: center; justify-content: center; color: var(--muted); position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); } .listing-image img { width: 100%; height: 100%; object-fit: cover; } .listing-content { padding: 8px; /* Reduced but still readable */ display: grid; gap: 8px; } .listing-card-wrapper .listing-content { padding: 12px; } /* Listing-list page: Make image more square (50% of card height) */ .listing-card-wrapper a.listing-card:not(.listing-card-horizontal) .listing-image { height: calc(var(--listing-card-section-height) * 1.3); aspect-ratio: 1 / 1; object-fit: cover; } .listing-card-wrapper a.listing-card:not(.listing-card-horizontal) .listing-content { height: auto; min-height: var(--listing-card-section-height); } .listing-price { font-size: 1.25rem; font-weight: 700; color: var(--brand-primary); /* Orange for emphasis */ margin-bottom: 0; } .listing-title { font-weight: 700; font-size: 0.9rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.3; } .listing-description { display: none; } /* View count styling */ .listing-views { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.875rem; } .home-card-views { display: inline-flex; align-items: center; gap: 6px; } .listing-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 0.85rem; } .listing-location { display: flex; align-items: center; gap: 5px; } .listing-stats { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; justify-content: flex-end; min-width: 0; } .listing-stat { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; } /* My Listings: keep meta on one line and avoid wrapping */ @media (max-width: 767px) { .my-listings-shell .listing-meta { flex-wrap: nowrap; } .my-listings-shell .listing-location { min-width: 0; overflow: hidden; } .my-listings-shell .listing-location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } } .quick-favorite-btn { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(var(--surface-rgb), 0.92); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); cursor: pointer; transition: transform 0.2s ease; color: var(--muted); } .quick-favorite-btn:hover { transform: translateY(-2px); } .quick-favorite-btn.favorited { color: var(--danger); } /* Listing Badges - Orange Theme */ .listing-badge { position: absolute; top: 10px; right: 10px; border-radius: 12px; padding: 8px 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; box-shadow: var(--shadow-soft); z-index: 1; } .badge-premium, .listing-badge.badge-premium { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); color: white; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; /* Softer corners */ box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.2); } .badge-plus, .listing-badge.badge-plus { background: linear-gradient(135deg, var(--brand-primary-strong), #FFB399); color: white; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 8px; /* Softer corners */ } .badge-featured, .listing-badge.badge-featured { background: var(--brand-primary); color: white; border-radius: 8px; /* Softer corners */ } .badge-urgent, .listing-badge.badge-urgent { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep)); color: white; border-radius: 8px; /* Softer corners */ animation: badge-pulse 2s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } /* Favorite Pin */ .favorite-pin { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--surface-rgb), 0.9); display: grid; place-items: center; color: var(--accent); box-shadow: var(--shadow-soft); z-index: 1; transition: transform 0.2s ease; } .favorite-pin:hover { transform: translateY(-2px); } /* Verified Badge - Orange Theme */ .verified-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-tint-light); /* Soft #FFF4F0 */ color: var(--brand-primary); padding: 6px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(var(--brand-primary-rgb), 0.15); } .verified-badge i { color: var(--brand-primary); } /* Stat Chip - Orange Accents */ .stat-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: white; color: var(--ink); font-weight: 600; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); } .stat-chip i { color: var(--brand-primary); } /* Pills - Orange Theme */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--orange-tint-light); /* Soft #FFF4F0 */ color: var(--brand-primary-deep); /* Deeper orange for better contrast */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; border: 1px solid rgba(var(--brand-primary-rgb), 0.15); } /* Categories */ .categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; } .category-card { background: var(--surface); border-radius: var(--border-radius); padding: 16px; text-align: center; box-shadow: var(--box-shadow); transition: var(--transition); cursor: pointer; text-decoration: none; color: var(--ink); } .category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .category-icon { font-size: 2rem; color: var(--brand-primary); margin-bottom: 10px; } .category-card h3 { font-size: 0.95rem; } /* Category List */ .category-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .category-list a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; color: var(--ink); background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.78), rgba(var(--surface-muted-rgb), 0.9)); transition: all 0.2s ease; position: relative; overflow: hidden; } .category-list a:hover { border-color: var(--border-subtle); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .category-list a::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--brand-primary); margin-right: 10px; flex-shrink: 0; box-shadow: 0 0 0 6px rgba(var(--brand-primary-rgb), 0.12); } .category-list a .count { background: rgba(var(--brand-primary-rgb), 0.08); padding: 2px 8px; border-radius: 999px; font-size: 0.82rem; color: var(--muted); } .category-pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .category-pill { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 6px 10px; display: block; text-decoration: none; cursor: pointer; background: var(--surface); transition: var(--transition); box-shadow: none; } .category-pill:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-soft); } .category-pill input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .category-pill .pill-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .category-pill .category-name { font-weight: 600; color: var(--ink); } .category-pill.subcategory-pill .category-name { font-weight: 500; } .category-pill input[type="checkbox"]:checked ~ .pill-body { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.06); border-radius: 8px; padding: 4px 6px; } .category-pill input[type="checkbox"]:checked ~ .pill-body .badge { background: var(--brand-primary); color: #fff; } .subcategory-pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 6px; margin-left: 4px; } .stats-pill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .stat-pill { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 4px; transition: var(--transition); } .stat-pill:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .stat-label { font-weight: 600; font-size: 0.9rem; } .stat-value { font-size: 1.4rem; font-weight: 800; color: var(--brand-primary); } .filter-pill-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 992px) { .filter-pill-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } } .filter-pill { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; transition: var(--transition); } .filter-pill:hover { border-color: var(--brand-primary); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .filter-label { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; } .filter-pill input, .filter-pill select, .filter-pill textarea { width: 100%; border-radius: 10px; border: 1px solid var(--border-subtle); background: #f8f9fd; } .filter-pill small { margin-top: 6px; } .categories-widget .list-group-item { border-left: 0; border-right: 0; } .subcategory-list { margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--border-subtle); display: grid; gap: 6px; } /* Category Pills */ .category-pill-row { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; overflow-x: auto; padding: 4px 2px; scrollbar-width: thin; width: 100%; /* Take full container width */ max-width: 100%; /* Never exceed container */ box-sizing: border-box; /* Include padding in width */ } .home-scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 12px); /* Show ~2 cards per view on mobile */ gap: 12px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .home-scroll-row .listing-card-wrapper { scroll-snap-align: start; width: 100%; } @media (min-width: 576px) { .home-scroll-row { grid-auto-columns: calc(50% - 14px); } } @media (min-width: 768px) { .home-scroll-row { grid-auto-columns: minmax(220px, 1fr); } } @media (min-width: 992px) { .home-scroll-row { grid-auto-columns: minmax(240px, 1fr); } } .category-pill, .category-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(var(--brand-primary-rgb), 0.08); color: var(--ink); text-decoration: none; font-weight: 700; white-space: nowrap; border: 1px solid var(--border-subtle); outline: none; min-height: 44px; /* Touch target */ } .category-pill:hover, .category-pill-btn:hover { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary-strong); border-color: var(--brand-primary); } /* Category Checkbox Labels */ .category-checkbox-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; transition: background 0.2s ease; margin-bottom: 4px; } .category-checkbox-label:hover { background: rgba(var(--brand-primary-rgb), 0.05); } .category-checkbox-label input[type="checkbox"] { cursor: pointer; width: 18px; height: 18px; } .category-checkbox-label input[type="checkbox"]:checked + .category-name { font-weight: 600; color: var(--brand-primary-strong); } .category-checkbox-label .category-name { flex: 1; } .category-checkbox-label .count { color: var(--muted); font-size: 0.85rem; } /* Category Actions */ .category-actions { position: sticky; bottom: 0; padding: 12px; background: var(--surface); border-top: 1px solid var(--border-subtle); } /* Category Pill Link Styling */ .category-pill-link { display: inline-block; cursor: pointer; margin: 0; text-decoration: none; } .category-pill-link .pill-text { display: inline-block; padding: 8px 16px; background: rgba(var(--surface-rgb), 0.95); border: 2px solid var(--border-subtle); border-radius: 20px; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; color: inherit; } .category-pill-link:hover .pill-text { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.1); text-decoration: none; } /* Mobile/tablet: make the "All Categories" chip strip more compact */ @media (max-width: 991.98px) { .mobile-categories-card .category-pill-row { gap: 8px; padding: 2px 0; } .mobile-categories-card .category-pill-link .pill-text { padding: 6px 12px; border-width: 1px; font-size: 0.82rem; } } /* Pagination */ .pagination { display: inline-flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(var(--surface-rgb), 0.95); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); } .pagination a, .pagination span { padding: 8px 12px; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--ink); border: 1px solid var(--border-subtle); transition: var(--transition); } .pagination a:hover { background-color: var(--brand-primary); color: white; border-color: var(--brand-primary); } .pagination .current { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } /* ========== 6. BUTTONS (MOBILE-FIRST) ========== */ .btn { border-radius: 12px; font-weight: 700; padding: 12px 20px; /* Larger on mobile for touch */ border: 1px solid transparent; box-shadow: var(--shadow-soft); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; white-space: nowrap; text-decoration: none; min-height: 44px; /* Touch target */ } .btn-lg { padding: 14px 28px; font-size: 1rem; font-weight: 600; } /* Button size variants */ .btn-sm { padding: 10px 20px; font-size: 0.875rem; border-radius: 20px; } /* Mobile touch-friendly buttons */ @media (max-width: 767px) { .btn { min-height: 48px; /* Touch target */ padding: 12px 24px; } .btn-lg { padding: 16px 32px; } .btn-sm { padding: 10px 20px; } } .btn-primary { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep)); border: 2px solid var(--brand-primary); border-radius: var(--border-radius-large); /* 24px for Jude aesthetic */ color: white; font-weight: 600; box-shadow: 0px 4px 12px rgba(var(--brand-primary-rgb), 0.15); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Enhance contrast */ transition: all 0.2s ease; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--brand-primary-strong), var(--brand-primary)); border-color: var(--brand-primary-strong); color: white; transform: translateY(-1px); box-shadow: 0px 6px 20px rgba(var(--brand-primary-rgb), 0.25); } .btn-primary:active { background: var(--brand-primary-deep); border-color: var(--brand-primary-deep); transform: translateY(0); } /* Primary button icons should be white, not gradient */ .btn-primary .icon-gradient, .btn-primary i.icon-gradient { color: white !important; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: white; } .btn-outline, .btn-outline-primary { background: transparent; border: 2px solid var(--border-subtle); border-radius: var(--border-radius-large); /* 24px */ color: var(--ink); font-weight: 600; transition: all 0.2s ease; } .btn-outline:hover, .btn-outline-primary:hover, .btn-outline:focus, .btn-outline-primary:focus { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.05); transform: translateY(-1px); } .btn-outline .icon-gradient { color: var(--ink); } .btn-outline:hover .icon-gradient, .btn-outline-primary:hover .icon-gradient { color: var(--brand-primary) !important; } .btn-danger { background-color: var(--danger); color: white; } .btn-danger:hover { background-color: var(--danger-hover); } /* ========== 7. FILTERS & SIDEBAR WIDGETS ========== */ .filters-panel { padding: 20px; } .filters-panel .form-group { margin-bottom: 18px; } .filters-panel label { font-weight: 700; color: var(--ink); display: block; margin-bottom: 8px; } .filters-panel input, .filters-panel select { width: 100%; border-radius: 12px; border: 1px solid var(--border-subtle); padding: 10px 12px; background: var(--surface); color: var(--ink); } .filter-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary-strong); padding: 8px 12px; border-radius: 12px; font-weight: 700; } /* ========== 8. FORMS (MOBILE-FIRST) ========== */ .form-group { margin-bottom: 20px; } .form-group label, form label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--ink); } .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 1rem; background: var(--surface); color: var(--ink); transition: all 0.2s ease; } input:focus, .form-control:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12); background: white; } input:focus::placeholder, textarea:focus::placeholder { color: var(--muted); opacity: 0.5; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; } .form-check-input { width: auto; height: auto; margin-right: 8px; } .errorlist { list-style: none; padding-left: 0; margin: 6px 0 0; color: var(--danger); font-size: 0.9rem; } /* ========== 9. MESSAGES & ALERTS ========== */ .messages-container { padding: 15px 0; } .messages-container .alert { border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface); } .alert { padding: 12px 20px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .alert-success { background-color: var(--bs-success-bg-subtle); border: 1px solid var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); } .alert-error, .alert-danger { background-color: var(--bs-danger-bg-subtle); border: 1px solid var(--bs-danger-border-subtle); color: var(--bs-danger-text-emphasis); } .alert-info { background-color: var(--bs-info-bg-subtle); border: 1px solid var(--bs-info-border-subtle); color: var(--bs-info-text-emphasis); } .alert-warning { background-color: var(--bs-warning-bg-subtle); border: 1px solid var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); } .close-alert { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: inherit; opacity: 0.5; } .close-alert:hover { opacity: 1; } /* ========== 10. DETAIL PAGES ========== */ .breadcrumb-modern { display: flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 600; flex-wrap: wrap; } .breadcrumb-modern a { color: var(--brand-primary-strong); text-decoration: none; } .detail-card { padding: 12px; /* Mobile-optimized padding */ } .meta-row { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; } .price-block { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1), rgba(var(--brand-accent-rgb), 0.08)); border: 1px solid var(--border-subtle); } .price-block .price { font-size: 1.8rem; font-weight: 800; } .table-modern { width: 100%; border-collapse: collapse; } .table-modern tr + tr td { border-top: 1px solid var(--border-subtle); } .table-modern td { padding: 12px 0; vertical-align: middle; } .table-modern td:first-child { font-weight: 700; color: var(--muted); width: 35%; } /* ========== 11. AUTH PAGES ========== */ .auth-shell { max-width: 520px; margin: 24px auto 48px; } .profile-shell { max-width: 1200px; margin: 24px auto 48px; } .profile-edit-shell { max-width: 960px; margin: 24px auto 48px; } .my-listings-shell { max-width: 1200px; margin: 24px auto 48px; } .favorites-shell { max-width: 1200px; margin: 24px auto 48px; } .my-listings-card { width: 100%; } .profile-card { width: 100%; } .auth-card { background: rgba(var(--surface-rgb), 0.95); border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-soft); padding: 24px; } .auth-back-link { margin-bottom: 12px; } .auth-back-link a { font-weight: 700; color: var(--brand-primary); text-decoration: none; } .auth-back-link a:hover { text-decoration: underline; } .auth-shell-wide { max-width: 1120px; } .auth-card--split { display: grid; grid-template-columns: 1fr; gap: 18px; } .auth-split-hero { text-align: center; background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.08), rgba(var(--brand-accent-rgb), 0.08)); border: 1px solid rgba(var(--brand-primary-rgb), 0.12); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; min-height: 100%; } .auth-split-hero .hero-icon { font-size: 2.5rem; color: var(--brand-primary); } .auth-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .auth-benefits li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; } .auth-benefits i { color: var(--brand-primary); } .auth-cta a { font-weight: 700; } .auth-header .auth-icon { font-size: 3rem; color: var(--brand-primary); margin-bottom: 10px; } .auth-header h1 { font-size: 1.6rem; margin-bottom: 6px; } .auth-header p { margin: 0; } .auth-form .form-group { margin-bottom: 16px; } .auth-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .auth-link { color: var(--brand-primary-strong); text-decoration: none; } .auth-link:hover { color: var(--brand-primary); } /* ========== 12. MESSAGES (MESSAGING SYSTEM) ========== */ .message-tab-btn { border: 1px solid var(--border-subtle); background: var(--surface); padding: 10px 14px; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; transition: all 0.2s ease; } .message-tab-btn.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: var(--shadow-soft); } .message-card { background: rgba(var(--surface-rgb), 0.95); border-radius: 14px; border: 1px solid var(--border-subtle); padding: 16px; box-shadow: var(--shadow-soft); outline: none; margin-bottom: 12px; } .message-card--collapsible { padding: 0; overflow: hidden; } .message-card--collapsible summary { list-style: none; } .message-card--collapsible summary::-webkit-details-marker { display: none; } .message-card-summary { cursor: pointer; padding: 16px; outline: none; } .message-card--collapsible[open] .message-open-hint { display: none; } .message-preview { border: 1px dashed var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: rgba(var(--surface-rgb), 0.9); } .message-card--collapsible.is-unread:not([open]) .message-preview { filter: blur(3px); opacity: 0.7; } .message-card--collapsible.is-unread[open] .message-preview { filter: none; opacity: 1; } .message-card--collapsible .message-listing, .message-card--collapsible .message-body, .message-card--collapsible .btn { margin-left: 16px; margin-right: 16px; } .message-card--collapsible .message-listing { margin-top: 0; } .message-card--collapsible .message-body { margin-top: 10px; } .message-card--collapsible .d-flex.gap-2.flex-wrap.mt-2 { margin-bottom: 16px; } .message-card.is-unread { border-left: 4px solid var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.04); } .message-card.is-read { border-left: 4px solid var(--border-subtle); } .message-listing { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px; margin-bottom: 10px; } .message-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; } .message-body { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; } .pre-wrap { white-space: pre-wrap; } /* ========== 13. FOOTER ========== */ footer { background: linear-gradient(180deg, #0f172a, #0f172a); color: #ffffff; padding: 18px 0 16px; margin-top: auto; } .footer-inline { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; } .footer-brand { font-weight: 800; color: #fff; } .footer-meta { display: flex; gap: 12px; flex-wrap: wrap; color: #f1f5f9; font-size: 0.9rem; } .footer-meta span { display: inline-flex; align-items: center; gap: 6px; } .copyright { border-top: 1px solid var(--footer-divider); margin-top: 12px; padding-top: 10px; color: #c4c8d6; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; text-align: center; font-size: 0.85rem; } .legal-links { display: inline-flex; gap: 12px; flex-wrap: wrap; } .legal-links a { color: #f1f5f9; text-decoration: none; } .legal-links a:hover { color: #fff; } .footer-content { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } .footer-column h3 { font-size: 1.1rem; margin-bottom: 12px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: #f1f5f9; text-decoration: none; transition: var(--transition); font-size: 0.9rem; } .footer-links a:hover { color: white; } @media (max-width: 767px) { footer { padding: 24px 0 90px; /* Add breathing room above fixed bottom nav */ } footer, .footer-meta, .footer-links a, .copyright, .legal-links a, footer * { color: #ffffff !important; /* Ensure visibility on dark footer */ } .footer-links a:hover, .legal-links a:hover { color: #f8fafc; } } /* ========== 14. RESPONSIVE OVERRIDES (MOBILE-FIRST) ========== */ /* Small phones (320px) fallback */ @media (max-width: 374px) { .listings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .home-listings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-image { height: 125px; /* Slightly shorter for small screens */ } .hamburger-menu { width: 90%; right: -90%; } .bottom-nav-item i { font-size: 1.1rem; } .bottom-nav-item span { font-size: 0.65rem; } .container { padding: 0 4px; } } /* Optimize for popular phone sizes (375-427px) */ @media (min-width: 375px) and (max-width: 427px) { .listings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .home-listings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-image { height: 130px; /* Scale between 120px and 130px */ } } /* Large phones (428px+) */ @media (min-width: 428px) { .hero-title { font-size: 1.75rem; /* 28px */ } .listing-image { height: 130px; } } /* Medium phones (428-575px) */ @media (min-width: 428px) and (max-width: 575px) { .listings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .home-listings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-image { height: 140px; } } /* Small devices (576px+) - Bootstrap sm */ @media (min-width: 576px) { .container { padding: 0 6px; } .categories { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } /* Listings grid - Small tablets (576px+) */ .listings { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; } .listing-image { height: 135px; } } /* Medium devices (768px+) - Tablets */ @media (min-width: 768px) { body { padding-top: 70px; } .page-main { padding: 20px 0 30px; } .container { padding: 0 8px; max-width: 100%; } .main-content { gap: 20px; margin-bottom: 30px; } .content-area { gap: 18px; } /* Hero */ .hero-title { font-size: 2rem; /* 32px */ margin-bottom: 16px; } .hero-lede, .hero p { font-size: 1.05rem; } /* Listings */ .listings { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .listing-image { height: 140px; } /* Categories */ .categories { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; } /* Pagination */ .pagination { justify-content: center; margin: 30px 0; } /* Search bar */ .search-bar { max-width: 500px; } .search-bar input[name="query"] { padding: 10px 12px; font-size: 0.95rem; } /* Detail page */ .price-block .price { font-size: 2rem; } .detail-card { padding: 24px; } /* Auth */ .auth-shell { margin: 36px auto 60px; } .auth-card { padding: 32px; } .auth-card--split { grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; } .auth-split-hero { text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .auth-benefits { gap: 10px; } .auth-header .auth-icon { font-size: 3.5rem; } .auth-header h1 { font-size: 1.8rem; } /* Profile page: use full-width shell on desktop */ .profile-shell { max-width: 1200px; } /* Footer */ .footer-content { grid-template-columns: repeat(2, 1fr); gap: 30px; } } /* Large devices (992px+) - Desktop */ @media (min-width: 992px) { body { padding-top: 0; /* Remove extra top padding on desktop */ padding-bottom: 0; /* No bottom nav */ } .page-main { padding: 24px 0 100px; } .container { max-width: 100%; } /* Header */ header, .navbar-modern { height: auto; padding: 14px 0; } .brand-sub { display: block; } .brand-icon { width: 42px; height: 42px; font-size: 1.1rem; } .brand-mark { padding: 10px 14px; border-radius: 14px; } .search-bar { max-width: 640px; margin: 0 15px; } .search-bar form, .theme-modern .search-bar form { padding: 6px; } .search-bar input[name="query"], .theme-modern .search-bar input[name="query"] { padding: 12px 14px; font-size: 0.95rem; } .search-bar button, .theme-modern .search-bar button { padding: 10px 16px; } /* Show desktop nav, hide mobile nav */ .nav-buttons { display: flex !important; gap: 8px; } .nav-buttons .btn, .theme-modern .nav-buttons .btn { border-radius: 12px; padding: 10px 16px; font-weight: 700; } .mobile-menu-toggle { display: none; } .bottom-nav { display: none; } /* Main content with sidebar */ .main-content { grid-template-columns: 1fr; gap: 28px; margin-bottom: 60px; } .main-content.main-content--detail { grid-template-columns: 1fr 2.4fr; align-items: stretch; column-gap: 32px; row-gap: 24px; } .main-content.main-content--detail > .content-area { display: flex; flex-direction: column; } .main-content.main-content--detail > .content-area > .detail-card { flex: 1 1 auto; } .main-content.main-content--detail .sidebar-section { margin-bottom: 0; } .main-content.main-content--detail .detail-map, .main-content.main-content--detail .detail-similar { grid-column: 1 / -1; } .detail-container { max-width: 1300px !important; } .sidebar { display: none; } /* Hero */ .hero-title { font-size: 2.4rem; /* 38.4px */ margin-bottom: 20px; } .hero-lede { font-size: 1.15rem; } .hero-stats { display: flex; } .hero-panel { padding: 26px; } /* Listings */ .listings { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin-bottom: 50px; } /* Categories */ .categories { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* Buttons */ .btn { padding: 10px 16px; font-size: 0.9rem; } /* Detail page */ .price-block .price { font-size: 2.2rem; } /* Footer */ .footer-content { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 40px; } footer { padding: 50px 0 20px; } } /* Tablet & mobile: avoid narrow centered shells */ @media (max-width: 1199.98px) { /* Full-bleed layout on mobile/tablets (e.g., Galaxy Tab S7+): no side padding. */ .container { padding-left: 0 !important; padding-right: 0 !important; } .auth-shell, .profile-shell, .profile-edit-shell, .my-listings-shell, .favorites-shell { max-width: 100%; } } /* Touch devices: always allow full-width containers even at large breakpoints */ @media (hover: none) and (pointer: coarse) { .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ========== INFINITE SCROLL UI ========== */ @media (max-width: 767px) { .infinite-scroll-loading { margin: 20px 0; animation: fadeIn 0.3s ease-in; } .infinite-scroll-sentinel { visibility: hidden; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } } /* Extra large devices (1200px+) */ @media (min-width: 1200px) { .container { max-width: 1140px; } .main-content { grid-template-columns: 300px 1fr; gap: 30px; } /* Listing list page has no sidebar; keep content full-width on desktop */ body[data-page="listing-list"] .main-content { grid-template-columns: 1fr; } .hero-title { font-size: 2.6rem; /* 41.6px */ } .listings { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .sidebar-section { padding: 25px; } } /* Extra extra large (1400px+) */ @media (min-width: 1400px) { .container { max-width: 1320px; } .listings { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* ========== 15. UTILITY CLASSES & MISC ========== */ .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } /* Show/hide at specific breakpoints */ @media (min-width: 992px) { .d-lg-block { display: block !important; } .d-lg-none { display: none !important; } .d-lg-flex { display: flex !important; } } @media (max-width: 991px) { .d-lg-block { display: none !important; } } @media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } .d-md-inline-flex { display: inline-flex !important; } } @media (max-width: 767px) { .d-md-block { display: none !important; } } /* Touch target enforcement on mobile */ @media (max-width: 767px) { .btn, .bottom-nav-item, .mobile-menu-toggle, .category-pill-btn, a.listing-card { min-height: 44px; min-width: 44px; } } /* Hover states only on devices that support hover */ @media (hover: hover) { .logo:hover, .brand-mark:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb), 0.18); } .listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); } } /* Print styles */ @media print { .navbar-modern, .bottom-nav, .hamburger-menu, .mobile-menu-toggle, .nav-buttons { display: none !important; } body { padding-top: 0; padding-bottom: 0; } } /* ========== MAP VIEW STYLES ========== */ /* Map container */ #map { width: 100%; height: 500px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); } /* Mobile: Full viewport height minus header/nav */ @media (max-width: 767px) { #map { height: calc(100vh - 140px); border-radius: 0; } } /* Tablet: Larger but not full height */ @media (min-width: 768px) and (max-width: 991px) { #map { height: 600px; } } /* Desktop: Tall map */ @media (min-width: 992px) { #map { height: 700px; } } /* Custom info window styling */ .gm-style .gm-style-iw-c { border-radius: 12px !important; padding: 12px !important; max-width: 280px !important; } .gm-style .gm-style-iw-d { overflow: auto !important; max-height: 400px !important; } .gm-style .gm-style-iw-t::after { background: var(--surface) !important; } /* Info window content */ .map-info-window { max-width: 250px; font-family: 'Manrope', 'Space Grotesk', sans-serif; } .map-info-window img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; } .map-info-window h3 { font-size: 1rem; font-weight: 700; margin: 8px 0; color: var(--ink); line-height: 1.3; } .map-info-window .price { font-size: 1.2rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 8px; } .map-info-window .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; } .map-info-window .meta div { display: flex; align-items: center; gap: 6px; } .map-info-window .meta i { width: 14px; text-align: center; color: var(--brand-primary); } .map-info-window .badges { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .map-info-window .badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .map-info-window .badge-premium { background: linear-gradient(135deg, #ffd166, #ff8c37); color: #3a2000; } .map-info-window .badge-plus { background: linear-gradient(135deg, #72efdd, #3494e6); color: #0c3b5a; } .map-info-window .badge-featured { background: linear-gradient(135deg, #7ee0ff, #3b82f6); color: #0f305a; } .map-info-window .badge-urgent { background: linear-gradient(135deg, #ff7b9e, #f33b67); color: white; } .map-info-window .view-btn { display: inline-block; width: 100%; text-align: center; padding: 10px 16px; background: var(--brand-primary); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: var(--transition); } .map-info-window .view-btn:hover { background: var(--brand-primary-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); } /* Loading overlay */ .map-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(var(--surface-rgb), 0.95); padding: 20px 30px; border-radius: 12px; box-shadow: var(--shadow-strong); z-index: 1000; display: none; font-weight: 600; color: var(--ink); } .map-loading.active { display: flex; align-items: center; gap: 12px; } .map-loading i { font-size: 1.2rem; color: var(--brand-primary); } /* Listing count badge */ .listing-count-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(var(--surface-rgb), 0.95); padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-soft); font-weight: 600; font-size: 0.85rem; color: var(--ink); z-index: 100; display: none; } .listing-count-badge:not(:empty) { display: block; } /* Mobile: Position at bottom to avoid conflicting with map controls */ @media (max-width: 767px) { .listing-count-badge { top: auto; bottom: 80px; left: 10px; right: 10px; transform: none; text-align: center; } } /* Custom marker icon styling (for future HTML markers) */ .custom-marker { background: var(--brand-primary); border: 3px solid white; border-radius: 50%; width: 30px; height: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.75rem; } .custom-marker.featured { background: linear-gradient(135deg, #ffd166, #ff8c37); } .custom-marker.urgent { background: linear-gradient(135deg, #ff7b9e, #f33b67); animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } 50% { transform: scale(1.15); box-shadow: 0 4px 12px rgba(255, 123, 158, 0.6); } } /* Fix for Google Maps controls on mobile */ @media (max-width: 767px) { .gm-style .gm-style-cc { display: none !important; } .gm-style .gmnoprint { margin: 5px !important; } .gm-style button { min-width: 36px !important; min-height: 36px !important; } } /* Ensure map controls are accessible */ .gm-style button:focus { outline: 2px solid var(--brand-primary) !important; outline-offset: 2px !important; } /* =================================== Horizontal Categories Bar =================================== */ .horizontal-categories-bar { position: relative; z-index: 10; } /* Optional: Uncomment for sticky positioning */ /* .horizontal-categories-bar { position: sticky; top: 70px; z-index: 100; background: rgba(248, 249, 254, 0.95); backdrop-filter: blur(10px); } */ .categories-horizontal-scroll { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; /* Custom scrollbar styling */ scrollbar-width: thin; scrollbar-color: rgba(var(--brand-primary-rgb), 0.3) transparent; } .categories-horizontal-scroll::-webkit-scrollbar { height: 6px; } .categories-horizontal-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; } .categories-horizontal-scroll::-webkit-scrollbar-thumb { background: rgba(var(--brand-primary-rgb), 0.3); border-radius: 3px; transition: background 0.2s ease; } .categories-horizontal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-primary-rgb), 0.5); } .categories-track { display: flex; gap: 0.5rem; padding: 0.5rem 0; min-width: min-content; } /* Category Chips */ .category-chip { display: inline-flex; align-items: center; flex-shrink: 0; background: var(--surface); border: 2px solid var(--border-subtle); border-radius: 24px; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s ease; user-select: none; white-space: nowrap; text-decoration: none; color: inherit; position: relative; } .category-chip:hover { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.08); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.2); text-decoration: none; color: inherit; } .category-chip-focus { border-color: var(--brand-primary) !important; background: rgba(var(--brand-primary-rgb), 0.12) !important; box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.25) !important; } .category-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .category-chip input[type="checkbox"]:focus-visible + .chip-content { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 16px; } .category-chip input[type="checkbox"]:checked + .chip-content { color: var(--brand-primary); font-weight: 600; } .category-chip input[type="checkbox"]:checked + .chip-content .icon-gradient { color: var(--brand-primary) !important; } @supports selector(.category-chip:has(input:checked)) { .category-chip:has(input:checked) { border-color: var(--brand-primary); background: var(--orange-tint-light); box-shadow: 0 2px 10px rgba(var(--brand-primary-rgb), 0.18); } } .chip-content { display: flex; align-items: center; gap: 0.5rem; } .chip-content i { font-size: 0.875rem; opacity: 0.8; } .chip-name { font-size: 0.875rem; font-weight: 500; } .chip-count { display: inline-block; padding: 0.125rem 0.5rem; background: rgba(0, 0, 0, 0.1); border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .subcategory-panel { display: block; margin-top: 8px; } .subcategory-row { display: none; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px; background: var(--surface); box-shadow: var(--shadow-soft); } .subcategory-row.active { display: block; animation: subcategory-reveal 0.16s ease; } @keyframes subcategory-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .subcategory-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; color: var(--ink); gap: 10px; } .subcategory-row-title i { color: var(--brand-primary); margin-right: 6px; } .subcategory-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .subcategory-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--surface); border: 2px solid var(--border-subtle); border-radius: 24px; cursor: pointer; transition: all 0.2s ease; width: 100%; box-sizing: border-box; text-decoration: none; color: inherit; } .subcategory-chip:hover { border-color: var(--brand-primary); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.15); background: rgba(var(--brand-primary-rgb), 0.08); transform: translateY(-1px); text-decoration: none; color: var(--brand-primary); } /* Mobile subcategory accordions */ .mobile-subcategory-groups { margin-top: 8px; display: grid; gap: 6px; } .mobile-category-stack-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: var(--surface); text-decoration: none; color: inherit; } .mobile-category-stack-link:hover, .mobile-category-stack-link:active { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.08); text-decoration: none; color: inherit; } .mobile-subcategory-accordion { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 8px 10px; background: var(--surface); } .mobile-subcategory-accordion summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-weight: 600; } .mobile-subcategory-accordion summary .mobile-accordion-chevron { transition: transform 0.2s ease; opacity: 0.75; } .mobile-subcategory-accordion[open] summary .mobile-accordion-chevron { transform: rotate(180deg); } .mobile-subcategory-accordion summary::-webkit-details-marker { display: none; } .mobile-subcategory-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mobile-subcategory-group { flex: 1 1 100%; display: grid; gap: 6px; } .mobile-subsubcategory-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 10px; } .mobile-subsubcategory-chip { display: inline-flex; align-items: center; gap: 8px; padding: 0.4rem 0.85rem; background: rgba(var(--brand-primary-rgb), 0.06); border: 1px solid rgba(var(--brand-primary-rgb), 0.18); border-radius: 999px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; color: inherit; font-size: 0.92rem; } .mobile-subsubcategory-chip:hover, .mobile-subsubcategory-chip:active { border-color: var(--brand-primary); background: #eff6ff; text-decoration: none; color: inherit; } .mobile-subsubcategory-chip .pill-count { font-size: 0.75rem; padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,0.08); } .mobile-subcategory-groups--all .mobile-subcategory-list { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .mobile-subcategory-groups--all .mobile-subcategory-link { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; } .mobile-subcategory-groups--all .mobile-subcategory-group { flex: 0 0 auto; min-width: 220px; scroll-snap-align: start; } .mobile-subcategory-groups--all .mobile-subsubcategory-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 10px 2px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .mobile-subcategory-groups--all .mobile-subsubcategory-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; } .mobile-category-toggle { border: 1px dashed var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: rgba(var(--surface-rgb), 0.92); } .mobile-category-toggle-summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); } .mobile-category-toggle-summary::-webkit-details-marker { display: none; } .mobile-category-toggle[open] { border-style: solid; border-color: rgba(var(--brand-primary-rgb), 0.35); background: var(--surface); } .mobile-subcategory-link { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 1rem; background: var(--surface); border: 2px solid var(--border-subtle); border-radius: 24px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; color: inherit; } .mobile-subcategory-link:hover { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.08); text-decoration: none; } .mobile-subcategory-link .pill-count { font-size: 0.75rem; padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,0.08); } /* Inline mobile subcategory reveal block */ .mobile-subcategory-inline { display: none; margin-top: 12px; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; background: var(--surface); box-shadow: var(--shadow-soft); transition: transform 0.2s ease, opacity 0.2s ease; } .mobile-subcategory-inline.active { display: block; transform: translateY(0); opacity: 1; } .mobile-subcategory-inline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .mobile-subcategory-inline-header .inline-icon { font-size: 1.25rem; opacity: 0.85; } .mobile-subcategory-inline-title { font-weight: 700; color: var(--ink); font-size: 0.95rem; } .mobile-subcategory-inline-close { width: 32px; height: 32px; border: none; background: rgba(0, 0, 0, 0.05); border-radius: 50%; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .mobile-subcategory-inline-close:hover, .mobile-subcategory-inline-close:active { background: rgba(0, 0, 0, 0.1); } .mobile-subcategory-inline-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .mobile-subcategory-inline-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0.5rem 1rem; background: var(--surface); border: 2px solid var(--border-subtle); border-radius: 24px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; color: inherit; font-size: 0.875rem; min-width: 120px; } .mobile-subcategory-inline-link:hover, .mobile-subcategory-inline-link:active { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.08); text-decoration: none; } .mobile-subcategory-inline-link .pill-count { font-size: 0.75rem; padding: 2px 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.08); } .mobile-subcategory-inline-view-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: rgba(var(--brand-primary-rgb), 0.08); border-radius: 10px; color: var(--brand-primary); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: all 0.2s ease; } .mobile-subcategory-inline-view-all:hover, .mobile-subcategory-inline-view-all:active { background: rgba(var(--brand-primary-rgb), 0.15); text-decoration: none; } .category-pill-link.active .pill-text { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary-strong); font-weight: 600; } /* Accordion stack is active on mobile; keep visible */ /* Category detail page */ .category-shell { max-width: 1200px; margin: 0 auto; display: grid; gap: 16px; } .category-hero { padding: 24px; } .category-hero-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; } .sibling-card { border: 1px solid var(--border-subtle); border-radius: 18px; padding: 1.5rem; background: var(--surface); box-shadow: var(--shadow-soft); max-width: 420px; } .sibling-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .category-chip.sibling-chip { border-color: var(--border-subtle); background: var(--surface-muted); justify-content: center; } .category-chip.sibling-chip .chip-content { justify-content: center; gap: 0.5rem; } .category-chip.sibling-chip .chip-count { font-size: 0.7rem; background: rgba(0, 0, 0, 0.05); } .subcategory-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); } /* Category page: make subcategory pills use space efficiently on small screens */ @media (max-width: 576px) { .subcategory-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .subcategory-pills .category-chip { width: 100%; justify-content: space-between; white-space: normal; padding: 0.45rem 0.75rem; } .subcategory-pills .chip-content { width: 100%; min-width: 0; } .subcategory-pills .chip-name { min-width: 0; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (min-width: 992px) { .category-hero { padding: 28px; } } @media (max-width: 768px) { /* Hide desktop subcategory rows on small screens; mobile accordions handle subcategories */ .subcategory-panel { display: none; } } /* Scroll Hint Shadows */ .categories-horizontal-scroll::before, .categories-horizontal-scroll::after { content: ''; position: absolute; top: 0; bottom: 6px; width: 40px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s; } .categories-horizontal-scroll::before { left: 0; background: linear-gradient(to right, rgba(var(--surface-muted-rgb), 1), transparent); } .categories-horizontal-scroll::after { right: 0; background: linear-gradient(to left, rgba(var(--surface-muted-rgb), 1), transparent); } .categories-horizontal-scroll.has-scroll-left::before { opacity: 1; } .categories-horizontal-scroll.has-scroll-right::after { opacity: 1; } /* Responsive Design */ @media (max-width: 768px) { .horizontal-categories-bar { margin-left: -0.75rem; margin-right: -0.75rem; } .horizontal-categories-bar .glass-card { border-radius: 0; border-left: none; border-right: none; } .category-chip { padding: 0.4rem 0.75rem; } .chip-name { font-size: 0.8125rem; } .subcategory-row { padding: 10px; } .subcategory-chips { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } /* ======================================== ICON SYSTEM - Monochromatic Navy + Orange States ======================================== */ /* Base Icon Class - Navy (default for all icons) */ .icon-gradient, .icon-gradient-primary, .icon-gradient-secondary, .icon-gradient-info, .icon-gradient-brand, .icon-gradient-vehicles, .icon-gradient-property, .icon-gradient-property-to-rent, .icon-gradient-electronics, .icon-gradient-electronics-computers, .icon-gradient-home-garden, .icon-gradient-furniture, .icon-gradient-diy-tools-materials, .icon-gradient-fashion-clothing, .icon-gradient-fashion-accessories, .icon-gradient-sports-leisure, .icon-gradient-sports-outdoors, .icon-gradient-hobbies-collectibles, .icon-gradient-toys-games-hobbies, .icon-gradient-baby-kids, .icon-gradient-pets, .icon-gradient-office-business, .icon-gradient-business-industrial-supplies, .icon-gradient-health-beauty, .icon-gradient-food-drink, .icon-gradient-music-instruments, .icon-gradient-tickets, .icon-gradient-free-stuff, .icon-gradient-jobs, .icon-gradient-jobs-professional-services, .icon-gradient-services, .icon-gradient-services-experiences, .icon-gradient-community, .icon-gradient-mobile-phones-smartphones, .icon-gradient-laptops-computers, .icon-gradient-video-games-consoles, .icon-gradient-cameras-photography, .icon-gradient-books-magazines, .icon-gradient-books-music-media, .icon-gradient-automotive-vehicles, .icon-gradient-property-rentals { color: var(--ink); /* Navy by default */ display: inline-block; font-style: normal; transition: color 0.2s ease; } /* Orange for success/positive actions */ .icon-gradient-success { color: #10b981; /* Keep green for success */ } /* Orange for warnings/featured/urgent */ .icon-gradient-warning, .icon-gradient-featured, .icon-gradient-urgent { color: var(--brand-primary); /* Orange */ } /* Red for danger/delete */ .icon-gradient-danger { color: var(--danger); /* Red */ } /* Hover Effect - Interactive Icons Turn Orange */ .icon-gradient-hover { transition: all 0.3s ease; cursor: pointer; } .icon-gradient-hover:hover { color: var(--brand-primary) !important; transform: scale(1.05); } /* Active/Selected State - Orange */ .icon-gradient.active, .bottom-nav-item.active .icon-gradient, .nav-link.active .icon-gradient, .category-chip.active .icon-gradient { color: var(--brand-primary) !important; } /* Size Variants */ .icon-gradient-sm { font-size: 0.875rem; } .icon-gradient-md { font-size: 1rem; } .icon-gradient-lg { font-size: 1.25rem; } .icon-gradient-xl { font-size: 1.5rem; } .icon-gradient-2xl { font-size: 2rem; } /* Animation Effects */ @keyframes icon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .icon-gradient-pulse { animation: icon-pulse 2s ease-in-out infinite; color: var(--brand-primary); } .icon-gradient-glow { filter: drop-shadow(0 0 8px rgba(var(--brand-primary-rgb), 0.4)); color: var(--brand-primary); } /* Accessibility - Reduced Motion */ @media (prefers-reduced-motion: reduce) { .icon-gradient-hover { transition: none; } .icon-gradient-hover:hover { transform: none; } .icon-gradient-pulse { animation: none; } } /* Dark Mode Support (onyx-red theme) */ html[data-theme="onyx-red"] .icon-gradient, html[data-theme="onyx-red"] .icon-gradient-primary, html[data-theme="onyx-red"] .icon-gradient-secondary, html[data-theme="onyx-red"] .icon-gradient-info, html[data-theme="onyx-red"] .icon-gradient-brand { color: #e5e7eb; /* Light gray in dark mode */ } html[data-theme="onyx-red"] .icon-gradient-hover:hover { color: #ef4444 !important; /* Red in dark mode */ } /* My Listings: force single column on mobile */ @media (max-width: 767px) { .my-listings-shell .listings { display: flex; flex-direction: column; gap: 12px; } /* Make photo area visually dominant vs info area */ .my-listings-shell .listing-image { height: 190px; } .my-listings-shell .listing-content { gap: 6px; padding: 10px; } } /* Homepage "Trades & Services" mobile progressive disclosure */ @media (max-width: 767.98px) { .home-services-card:not(.is-open) .home-services-extra { display: none; } } /* ========== END OF ADFINDER.CSS ========== */