/* ================================================================================================ WESTONARIA CONNECT — MOBILE & UI ENHANCEMENTS (v2 — cleaned) Add to index.html : NOTE: Gallery grid untouched. Lightbox swipe is in style.css + gallery-system.js directly. ================================================================================================ */ /* ── 1. GOLD GLOWING STARS ──────────────────────────────────────────────────────────────────── */ .listing-rating i, .card-rating i, .star-rating i, .stars i, .review-stars i, .business-rating i, .rating-stars i, #businessDetailsModal .business-details-header i.fa-star, #businessDetailsModal .business-details-header i.fa-star-half-alt { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; text-shadow: 0 0 6px rgba(255, 215, 0, 0.9), 0 0 12px rgba(255, 165, 0, 0.7), 0 0 20px rgba(255, 140, 0, 0.5); filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.8)); transition: text-shadow 0.2s ease; } /* Empty stars — dim gold */ .listing-rating .far.fa-star, .card-rating .far.fa-star, .star-rating .far.fa-star, .stars .far.fa-star, .review-stars .far.fa-star, .rating-stars .far.fa-star { color: rgba(255, 215, 0, 0.28) !important; -webkit-text-fill-color: rgba(255, 215, 0, 0.28) !important; text-shadow: none; filter: none; } /* Glow intensifies on card hover */ .business-listing-card:hover .listing-rating i, .business-listing-card:hover .card-rating i { text-shadow: 0 0 8px rgba(255, 215, 0, 1), 0 0 16px rgba(255, 165, 0, 0.9), 0 0 28px rgba(255, 120, 0, 0.7); } .rating-value, .stars-count { color: #FFD700 !important; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } /* ── 2. HEADER — HIDE ON SCROLL + DRAG VISUAL STATES ────────────────────────────────────────── */ .main-header { cursor: grab; user-select: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, opacity 0.3s ease; } .main-header.dragging { cursor: grabbing; box-shadow: 0 8px 40px rgba(0, 217, 255, 0.35), 0 4px 20px rgba(0,0,0,0.6); opacity: 0.95; } .main-header.header-hidden { transform: translateY(-110%); } /* Subtle drag-handle notch at the bottom of the header */ .main-header::after { content: ''; display: block; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 36px; height: 3px; border-radius: 2px; background: rgba(0, 217, 255, 0.18); transition: background 0.2s; pointer-events: none; } .main-header:hover::after, .main-header.dragging::after { background: rgba(0, 217, 255, 0.55); } /* Floating restore pill shown when header scrolls away */ #header-restore-pill { display: none; position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(31, 31, 31, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 217, 255, 0.35); border-radius: 30px; padding: 6px 18px; z-index: 1001; cursor: pointer; font-size: 0.78rem; font-weight: 700; color: var(--electric-cyan, #00D9FF); letter-spacing: 0.05em; text-transform: uppercase; gap: 8px; align-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.4); animation: pillPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } #header-restore-pill.visible { display: flex; } @keyframes pillPop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } } /* ── 3. MOBILE — GENERAL LAYOUT ─────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .navbar { padding: 12px 0; flex-wrap: wrap; gap: 8px; } .logo h1 { font-size: 1.3rem; } .nav-links { position: static; transform: none; order: 3; width: 100%; justify-content: center; padding: 0 0 4px; } .header-right { margin-left: auto; } section { padding: 40px 0; } .container { padding: 0 16px; } .search-section { padding: 20px 0; } .search-results { padding: 16px; } .search-filter-container { min-height: auto; } .hero { padding: 60px 0; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 0.95rem; } .search-box { flex-wrap: wrap; } .search-box input { width: 100%; border-radius: 8px 8px 0 0; } .btn-search { width: 100%; border-radius: 0 0 8px 8px; } .auth-buttons { display: flex; gap: 6px; flex-wrap: nowrap; } .auth-buttons .btn-outline, .auth-buttons .btn-primary { padding: 6px 12px; font-size: 0.8rem; } .business-listings { grid-template-columns: 1fr; gap: 16px; } .business-listing-card { min-height: auto; padding: 16px; } .active-filters { gap: 6px; } .active-filter-tag { font-size: 0.8rem; padding: 4px 10px; } } /* ── 4. MOBILE — RESULTS CONTROLS SCROLL PILL STRIP ─────────────────────────────────────────── */ @media (max-width: 768px) { .results-header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; } .results-header h2 { font-size: 1.3rem; text-align: center; } .results-controls { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; padding: 4px 2px 10px; } .results-controls::-webkit-scrollbar { display: none; } .results-controls .sort-options { flex-shrink: 0; scroll-snap-align: start; background: rgba(255,255,255,0.05); border: 1px solid rgba(0, 217, 255, 0.2); border-radius: 50px; padding: 6px 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; backdrop-filter: blur(8px); } .results-controls .sort-options label { font-size: 0.8rem; color: rgba(0, 217, 255, 0.8); flex-shrink: 0; } .results-controls .sort-options select { background: transparent; border: none; color: var(--pearl, #E8E8E8); font-size: 0.82rem; padding: 0; cursor: pointer; max-width: 130px; } .results-controls .sort-options select:focus { outline: none; } .results-controls .view-toggle { flex-shrink: 0; scroll-snap-align: start; border-radius: 50px; padding: 6px 16px; font-size: 0.82rem; white-space: nowrap; border: 1px solid rgba(0, 217, 255, 0.3); background: rgba(255,255,255,0.04); color: rgba(0, 217, 255, 0.85); } /* Trailing spacer hints more content to scroll */ .results-controls::after { content: ''; flex-shrink: 0; width: 20px; } } @media (min-width: 769px) and (max-width: 1024px) { .results-controls { flex-wrap: wrap; gap: 8px; } .business-listings { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } /* Right-edge fade wrapper */ .results-controls-wrapper { position: relative; } @media (max-width: 768px) { .results-controls-wrapper::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 30px; background: linear-gradient(to right, transparent, var(--void-black, #0A0A0A)); pointer-events: none; } } /* ── 5. MOBILE — BUSINESS DETAILS BOTTOM SHEET ───────────────────────────────────────────────── */ @media (max-width: 768px) { #businessDetailsModal { padding: 0; align-items: flex-end; } #businessDetailsModal .modal-content { border-radius: 20px 20px 0 0; max-height: 94dvh; height: 94dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; } #businessDetailsModal .modal-content::before { content: ''; display: block; width: 40px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 10px auto 0; } #businessDetailsModal .business-details-header { padding: 16px 16px 12px !important; } #businessDetailsModal .business-details-grid { grid-template-columns: 1fr !important; } #businessDetailsModal .details-sidebar-column { order: -1; } #businessDetailsModal .business-quick-actions { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding: 8px 0 12px; flex-wrap: nowrap; } #businessDetailsModal .business-quick-actions::-webkit-scrollbar { display: none; } #businessDetailsModal .business-quick-actions button { flex-shrink: 0; white-space: nowrap; } } /* ── Mobile: business cards — rounded corners, side margins so glow shows ── */ @media (max-width: 768px) { /* Remove padding from search results but keep small side space for glow */ .search-results { padding: 0 !important; } .search-section .container { padding: 0 !important; max-width: 100% !important; } /* Grid: single column, gap between cards, side padding so glow isn't clipped */ #business-listings { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 12px 12px !important; width: 100% !important; } /* Cards: rounded corners, all borders visible for glow */ .business-listing-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.08) !important; overflow: hidden !important; } /* Inner content padding */ .business-listing-card .card-header, .business-listing-card .listing-description, .business-listing-card .card-rating, .business-listing-card .card-details, .business-listing-card .card-actions, .business-listing-card .gallery-thumbnail-section, .business-listing-card .hours-badge-row { padding-left: 16px; padding-right: 16px; } .business-listing-card .card-header { padding-top: 16px; } .business-listing-card .card-actions { padding-bottom: 16px; } /* Results header, filters and leaderboard get side padding */ .results-header { padding: 16px 16px 0 !important; } .active-filters { padding: 0 16px !important; } #topspot-leaderboard { padding: 0 12px !important; } } /* ── Mobile card glow — works on touch devices too ── */ @media (max-width: 768px) { .business-listing-card:active, .business-listing-card.card-touch-active { box-shadow: 0 0 0 1.5px rgba(0,217,255,0.6), 0 0 24px rgba(0,217,255,0.3), 0 4px 20px rgba(0,0,0,0.5) !important; border-color: rgba(0,217,255,0.6) !important; transform: scale(0.98) !important; } } /* ── Card glow — uniform on all sides, no irregularity ── */ @media (hover: hover) { .business-listing-card:hover { box-shadow: 0 0 0 1px rgba(0,217,255,0.4), 0 0 20px rgba(0,217,255,0.15), 0 8px 32px rgba(0,0,0,0.6) !important; border-color: rgba(0,217,255,0.4) !important; transform: translateY(-4px) !important; } } .business-listing-card:active, .business-listing-card.card-touch-active { box-shadow: 0 0 0 1px rgba(0,217,255,0.45), 0 0 18px rgba(0,217,255,0.18), 0 4px 20px rgba(0,0,0,0.5) !important; border-color: rgba(0,217,255,0.45) !important; transform: scale(0.99) !important; } /* Disable the extra ::after pulse ring — causes the irregular double-border look */ .business-listing-card::after { display: none !important; }/* ── Lightbox loader — matches close/arrow button palette ── */ .lightbox-loader { color: var(--silver) !important; filter: none !important; font-size: 2rem !important; } /* ── Lightbox nav arrows — match close button style ── */ .lightbox-prev, .lightbox-next { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: var(--silver) !important; backdrop-filter: none !important; } .lightbox-prev:hover, .lightbox-next:hover { background: var(--gradient-sunset) !important; border-color: transparent !important; color: var(--pure-white) !important; box-shadow: none !important; } /* ── Desktop: business cards — consistent inner padding ── */ @media (min-width: 769px) { .business-listing-card .card-header, .business-listing-card .listing-description, .business-listing-card .card-rating, .business-listing-card .card-details, .business-listing-card .card-actions, .business-listing-card .gallery-thumbnail-section, .business-listing-card .hours-badge-row { padding-left: 20px; padding-right: 20px; } .business-listing-card .card-header { padding-top: 20px; } .business-listing-card .card-actions { padding-bottom: 20px; } } /* ── Lightbox close button — exact admin dashboard style ── */ .lightbox-close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: var(--silver) !important; font-size: 1.1rem !important; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-base); opacity: 1; } .lightbox-close:hover { background: var(--gradient-sunset) !important; color: var(--pure-white) !important; border-color: transparent !important; transform: rotate(90deg); } /* ── Lightbox background: pure black ── */ .gallery-lightbox { background: #000 !important; } .lightbox-overlay { background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .lightbox-overlay::after { display: none !important; } /* ── Hide "Add Your Own Business" button in header nav ── */ #openListingModal2 { display: none !important; } /* ── Hide "Add Business" button in owner dashboard ── */ #ownerDashAdd, .owner-add-btn { display: none !important; } /* ── User dropdown: ensure it closes on outside click ── */ .user-dropdown:not(.open) { display: none !important; } .user-dropdown.open { display: flex !important; } /* ── Dropdown close handle button ── */ .dropdown-close-handle { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px var(--space-xl); margin-top: 4px; border-top: 1px solid var(--graphite); border: none; background: none; color: var(--silver); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; width: 100%; font-family: inherit; transition: color 0.15s, background 0.15s; border-top: 1px solid var(--graphite) !important; } .dropdown-close-handle:hover { color: var(--error); background: rgba(239,68,68,0.06); }