/** * services-premium.css v7 * ───────────────────────────────────────────────────────────────────────────── * SINGLE SOURCE OF TRUTH: * - Desktop and mobile display IDENTICAL chip list (no slicing, no limiting) * - Both use flex-wrap:wrap + justify-content:center * - Chips visible without scrolling on all viewports * - City picker: portal dropdown (position:fixed via JS, escapes overflow:hidden) * - Overrides all conflicting rules from homepage-v13.css, * homepage-conversion-optimizer.css, ui_fixes.css * ───────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════ SECTION ══════════════════════════════════════════════════════════ */ #services.services-section { padding-top: 36px !important; padding-bottom: 28px !important; } #services .section-header h2 { font-size: clamp(1.25rem, 2.5vw, 1.8rem) !important; margin-bottom: 4px !important; } #services .section-header p { font-size: 0.82rem !important; opacity: 0.60 !important; margin-bottom: 16px !important; } /* ══════════════════════════════════════════════════════════ NATIVE SELECT — hidden (replaced by JS city picker) ══════════════════════════════════════════════════════════ */ #services-city-filter { opacity: 0 !important; pointer-events: none !important; position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; } /* ══════════════════════════════════════════════════════════ FILTER BAR — city pill row ══════════════════════════════════════════════════════════ */ #services .services-filter-bar, #services .services-filter { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 14px !important; padding: 0 !important; flex-wrap: nowrap !important; } /* ══════════════════════════════════════════════════════════ CITY PICKER WRAP ══════════════════════════════════════════════════════════ */ .svc-city-wrap { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; } /* ══════════════════════════════════════════════════════════ CITY PILL BUTTON ══════════════════════════════════════════════════════════ */ .svc-city-pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 32px !important; padding: 0 12px 0 10px !important; border-radius: 999px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.78) !important; font-size: 0.80rem !important; font-weight: 500 !important; cursor: pointer !important; white-space: nowrap !important; line-height: 1 !important; transition: background 0.18s, border-color 0.18s !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; user-select: none !important; } .svc-city-pill:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.20) !important; } .svc-city-pill.has-value { background: rgba(225,48,108,0.14) !important; border-color: rgba(225,48,108,0.40) !important; color: #ff85b0 !important; } .svc-city-pill.open { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.24) !important; } .svc-city-pin { width: 10px !important; height: 10px !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; } .svc-city-chevron { width: 8px !important; height: 5px !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; opacity: 0.55 !important; transition: transform 0.18s ease !important; } .svc-city-pill.open .svc-city-chevron { transform: rotate(180deg) !important; } /* ══════════════════════════════════════════════════════════ DROPDOWN — PORTAL (appended to , position:fixed via JS) ══════════════════════════════════════════════════════════ */ .svc-city-dropdown { display: none; min-width: 192px; background: rgba(12, 12, 24, 0.98); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 2px 10px rgba(0,0,0,0.35); max-height: 280px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; visibility: hidden; } .svc-city-dropdown::-webkit-scrollbar { width: 3px; } .svc-city-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; } .svc-city-dropdown.svc-open { display: block; visibility: visible; animation: svcDropIn 0.20s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes svcDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .svc-city-option { display: flex; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.80); cursor: pointer; transition: background 0.12s; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .svc-city-option:hover { background: rgba(255,255,255,0.08); } .svc-city-option:active { background: rgba(255,255,255,0.12); } .svc-city-option.selected { background: rgba(225,48,108,0.15); color: #ff85b0; font-weight: 600; } .svc-city-option.selected::after { content: '✓'; margin-left: auto; padding-left: 8px; font-size: 0.70rem; color: #E1306C; } /* ══════════════════════════════════════════════════════════ CHIPS CONTAINER — SHARED LAYOUT (desktop + mobile) ── flex-wrap:wrap + justify-content:center on ALL viewports ── ── No horizontal scroll, no truncation, all chips visible ── ══════════════════════════════════════════════════════════ */ html body #services.services-section .category-chips, html body #services.services-section.homepage-conversion-priority .category-chips { display: flex !important; flex-wrap: wrap !important; /* ALL chips visible, multi-row */ justify-content: center !important; /* each row centered */ align-items: center !important; gap: 8px !important; /* Constrain width for balanced rows; centered via margin:0 auto */ width: auto !important; max-width: 960px !important; min-width: 0 !important; margin: 0 auto !important; padding: 4px 0 !important; /* No horizontal scroll */ overflow-x: visible !important; overflow-y: visible !important; overflow: visible !important; /* No grid */ grid-template-columns: unset !important; /* Reset scroll properties */ scroll-snap-type: none !important; scrollbar-width: auto !important; touch-action: auto !important; } /* Remove the scroll-spacer ::after (only needed for scroll mode) */ html body #services.services-section .category-chips::after { content: none !important; display: none !important; flex: none !important; } /* ══════════════════════════════════════════════════════════ INDIVIDUAL CHIPS — shared base ══════════════════════════════════════════════════════════ */ html body #services.services-section .service-chip, html body #services.services-section.homepage-conversion-priority .service-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 32px !important; padding: 0 13px !important; border-radius: 999px !important; font-size: 0.80rem !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important; flex-shrink: 0 !important; /* Reset big-block overrides */ width: auto !important; max-width: none !important; min-height: 0 !important; min-width: 0 !important; /* Style */ border: 1px solid rgba(255,255,255,0.09) !important; background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.74) !important; transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.14s, box-shadow 0.16s !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; } html body #services.services-section .service-chip .chip-icon { font-size: 0.88rem !important; line-height: 1 !important; } html body #services.services-section .service-chip:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.94) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important; } html body #services.services-section .service-chip.active { background: linear-gradient(135deg, rgba(225,48,108,0.26), rgba(131,58,180,0.22)) !important; border-color: rgba(225,48,108,0.52) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 0 0 1px rgba(225,48,108,0.22), 0 4px 18px rgba(225,48,108,0.20) !important; } html body #services.services-section .service-chip:focus-visible { outline: 2px solid rgba(225,48,108,0.7) !important; outline-offset: 2px !important; } html body #services.services-section .service-chip.svc-visible { opacity: 1 !important; } /* ══════════════════════════════════════════════════════════ MOBILE adjustments ≤768px Only SIZE changes — layout stays the same (wrap, centered) ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #services.services-section { padding-top: 24px !important; padding-bottom: 18px !important; } #services .section-header { padding: 0 16px !important; margin-bottom: 10px !important; } #services .section-header h2 { font-size: 1.15rem !important; } #services .section-header p { font-size: 0.75rem !important; } #services .services-filter-bar, #services .services-filter { padding: 0 16px !important; margin-bottom: 10px !important; } .svc-city-pill { height: 30px !important; font-size: 0.75rem !important; padding: 0 10px 0 8px !important; } /* Chips container: same layout as desktop, just full width */ html body #services.services-section .category-chips, html body #services.services-section.homepage-conversion-priority .category-chips { max-width: 100% !important; margin: 0 !important; padding: 4px 16px 8px !important; gap: 6px !important; /* Explicitly ensure wrap + center on mobile too */ flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; touch-action: auto !important; } /* Chips: slightly smaller on mobile */ html body #services.services-section .service-chip, html body #services.services-section.homepage-conversion-priority .service-chip { height: 30px !important; padding: 0 11px !important; font-size: 0.76rem !important; gap: 4px !important; } html body #services.services-section .service-chip .chip-icon { font-size: 0.82rem !important; } html body #services.services-section .service-chip:hover { transform: none !important; box-shadow: none !important; } html body #services.services-section .service-chip:active { background: rgba(255,255,255,0.12) !important; transform: scale(0.96) !important; } } /* ══════════════════════════════════════════════════════════ TABLET 769px–1024px ══════════════════════════════════════════════════════════ */ @media (min-width: 769px) and (max-width: 1024px) { html body #services.services-section .category-chips, html body #services.services-section.homepage-conversion-priority .category-chips { max-width: 100% !important; gap: 7px !important; } } /* ══════════════════════════════════════════════════════════ ENTRANCE ANIMATION ══════════════════════════════════════════════════════════ */ html body #services.services-section .service-chip:not(.svc-visible) { opacity: 0; } html body #services.services-section .service-chip.svc-visible { opacity: 1 !important; transition: opacity 0.3s ease !important; } /* ══════════════════════════════════════════════════════════ KILL scroll-related wrappers (from older JS versions) ══════════════════════════════════════════════════════════ */ .svc-chips-wrap { display: contents !important; /* passthrough, no box */ } .svc-chips-wrap::after { display: none !important; content: none !important; }